:root{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#273e3e;background:#f7f7f0;font-synthesis:none;--muted:#7d8981;--ink:#273e3e;--accent:#e9edb9}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #8a9c57;outline-offset:5px}button:hover{color:#39857d}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.site-header{height:105px;margin:0 4.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe3d8}.brand{display:flex;align-items:center;gap:13px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:19px;font-weight:600;letter-spacing:.12em}.brand svg{width:42px;fill:none;stroke:#36756c;stroke-width:1.5}.brand svg circle{fill:#36756c;stroke:none}.brand small{display:block;font:8px/2.3 sans-serif;letter-spacing:.23em;color:#8a9489}.site-header nav{display:flex;gap:37px;font-size:12px;align-items:center}.site-header nav button{padding:12px 0}.site-header nav button span{margin-left:10px;color:#7c8d7d}.nav-current{position:relative}.nav-current:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#5d8472;bottom:-14px;left:50%}.header-note{font-size:11px;color:#7e8a7d;display:flex;align-items:center;gap:8px}.tiny-dot{width:6px;height:6px;background:#91a681;border-radius:50%;display:inline-block;flex-shrink:0}main{margin:0 4.2%}.intro{display:flex;justify-content:space-between;align-items:center;padding:43px 0 35px}.eyebrow{font:9px/1.5 Arial,sans-serif;letter-spacing:.19em;color:#8a9588;margin:0 0 13px}.intro h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(27px,2.7vw,40px);font-weight:500;letter-spacing:.06em;line-height:1.6;margin:0 0 7px}.intro h1 span{color:#8a9e8b}.intro-copy{font-size:12px;color:#7a897e;letter-spacing:.06em;margin:0}.intro-aside{display:flex;gap:20px;align-items:center;color:#8d9a8a;font-size:11px;letter-spacing:.08em;line-height:2}.wave-icon{font-size:42px;color:#b3bfa4;font-family:serif}.aquarium{height:clamp(430px,47vw,650px);min-height:430px;position:relative;isolation:isolate;overflow:clip;border-radius:23px;background:#12697e;box-shadow:inset 0 0 100px #002e4033;--top:#8fc9c1;--middle:#3b9fa6;--bottom:#13536b;--ray:#e2f1c8;--water:#a2d7ce;--plant:#176d6e;transition:background 2s}.ocean-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 32% -10%,#e9ebbe66,transparent 58%),linear-gradient(180deg,var(--top),var(--middle) 40%,var(--bottom));transition:filter 2s;z-index:-6}.sun-rays{position:absolute;inset:-50% -15% -20%;background:repeating-conic-gradient(from 170deg at 35% 0%,transparent 0deg 6deg,var(--ray) 7deg 11deg,transparent 13deg 19deg);opacity:.12;filter:blur(12px);transform-origin:35% 0%;animation:light-shift 26s ease-in-out infinite alternate;z-index:-5}.water-surface{position:absolute;top:-30px;left:-20%;width:140%;height:90px;border-radius:50%;background:repeating-linear-gradient(175deg,transparent 0 9px,#c9ead322 11px 13px,transparent 16px 20px);filter:blur(2px);opacity:.8;z-index:-4}.sea-grain{position:absolute;inset:0;opacity:.16;z-index:5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.32' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.scene-label{position:absolute;left:30px;top:27px;color:#e6f2df;display:flex;gap:13px;align-items:center;z-index:10;pointer-events:none}.scene-index{border:1px solid #d3e8d16b;width:31px;height:36px;display:grid;place-items:center;border-radius:16px 16px 5px 5px;font:10px Georgia,serif}.scene-label strong{display:block;font-weight:400;font-family:"Yu Mincho",serif;font-size:15px;letter-spacing:.14em}.scene-label div>span{display:block;font:8px/2 sans-serif;letter-spacing:.13em;opacity:.64;margin-top:4px}.sea-status{position:absolute;right:28px;top:30px;font-size:10px;color:#e4efdc;display:flex;align-items:center;gap:8px;z-index:10;letter-spacing:.1em}.sea-status i{background:#e5edbc;width:5px;height:5px;border-radius:50%;box-shadow:0 0 10px #e5edbc80}.seafloor{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.sea-bottom{position:absolute;left:29px;right:29px;bottom:23px;color:#d3e5d8;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.06em;z-index:10;pointer-events:none}.little-spark{font-size:18px;margin-right:8px;vertical-align:middle}.depth{font:8px Arial;letter-spacing:.16em;opacity:.8}.depth strong{font-size:17px;font-weight:400;letter-spacing:0;margin-left:9px}.ocean-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dfe3d8;min-height:76px}.live-caption{font-size:11px;color:#859180;display:flex;gap:10px;align-items:center}.toolbar-buttons{display:flex;align-items:center;gap:20px}.control{display:flex;gap:10px;align-items:center;font-size:11px;padding:14px 4px}.control>span:first-child{font:19px Georgia,serif;color:#728372;min-width:18px;text-align:center}.control-divider{height:14px;width:1px;background:#dce1d5}.icon-control{padding:10px 0 10px 10px}.icon-control svg{width:18px;height:18px;fill:#f7f7f0;stroke:#728372;stroke-width:1.4}.notebook{padding:32px 0 35px}.notebook-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.notebook-heading .eyebrow{margin-bottom:8px;font-size:8px}.notebook h2{font-family:"Yu Mincho",serif;font-size:20px;font-weight:500;letter-spacing:.08em;margin:0}.text-link{font-size:10px;display:flex;align-items:center;gap:12px}.text-link #journal-count{font:9px Arial;color:#8a9684;border:1px solid #d9dfcf;padding:4px 6px;border-radius:5px}.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-height:108px}.quote-card{position:relative;display:flex;align-items:center;gap:18px;border:1px solid #e0e5d7;border-radius:13px;padding:20px;background:#fafaf5;animation:card-in .5s ease both}.quote-avatar{width:58px;height:58px;background:#eaf0e3;border-radius:50%;flex-shrink:0;padding:7px;display:grid;place-items:center}.quote-avatar svg{width:60px;height:42px}.quote-card p{font-family:"Yu Mincho",serif;font-size:13px;line-height:1.8;margin:4px 16px 9px 0}.quote-meta{font-size:9px;color:#8e9988;letter-spacing:.04em}.quote-meta b{font-weight:400;color:#637b69;margin-right:12px}.save-quote{position:absolute;right:12px;top:12px;font-size:17px;color:#9ca88e;padding:2px 5px}.save-quote[aria-pressed=true]{color:#8d9b43}.empty-quote{grid-column:1/-1;display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:12px;letter-spacing:.08em;color:#889581;border:1px dashed #dce2d1;border-radius:12px}.empty-quote span{font-size:10px;margin-top:8px;color:#a0aa96}.site-footer{margin:0 4.2%;padding:23px 0 30px;border-top:1px solid #dfe3d8;display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.04em;color:#95a08e}.site-footer>span:last-child{white-space:nowrap}.site-footer>span:last-child>span{margin-left:20px;font-size:20px;color:#9caa92}
#creatures,#particles,#plants,#schools,#speech-layer,#ripples{position:absolute;inset:0;pointer-events:none}#plants{z-index:1}#schools{z-index:-2}#particles{z-index:2}#speech-layer{z-index:12}.creature{position:absolute;left:0;top:0;pointer-events:auto;padding:0;will-change:transform;line-height:0;border-radius:50%;transition:filter .3s}.creature:hover{filter:brightness(1.09) drop-shadow(0 0 10px #d5ecb04d)}.creature:focus-visible{outline:1px dashed #ecf1c3;outline-offset:3px}.creature svg{display:block;width:100%;height:auto;overflow:visible}.creature-art{width:100%;transform-origin:center}.tail{transform-origin:80% 50%;animation:fin 2.8s ease-in-out infinite alternate}.flipper{transform-origin:50% 50%;animation:flipper 3.8s ease-in-out infinite alternate}.gill{opacity:.4}.blink{animation:blink 8s infinite}.swim-shadow{filter:drop-shadow(0 9px 8px #063c4d26)}.speech{position:absolute;left:0;top:0;background:#f7f8e9f5;color:#3c5550;padding:15px 22px;border-radius:18px 18px 18px 4px;max-width:min(260px,70%);width:max-content;font:13px/1.7 "Yu Mincho",serif;box-shadow:0 6px 20px #074c5820;pointer-events:none;animation:speech-in .6s both;letter-spacing:.02em}.speech:after{content:"";position:absolute;bottom:-9px;left:23px;border-top:11px solid #f7f8e9f5;border-right:11px solid transparent}.speech.leaving{opacity:0;transition:opacity .6s}.plant{position:absolute;bottom:8%;height:44%;width:9%;transform-origin:center bottom;animation:plant-sway 8s ease-in-out infinite alternate;opacity:.7}.plant svg{height:100%;width:100%;overflow:visible}.particle{position:absolute;background:#d1eacf;border-radius:50%;opacity:.35;animation:float-up var(--duration) linear infinite;animation-delay:var(--delay);bottom:-10%}.particle.bubble{background:transparent;border:1px solid #c2e9dd66;box-shadow:inset 1px 1px #d9f8e52b}.school{position:absolute;width:95px;height:35px;color:#237e88;opacity:.6;animation:school-swim var(--duration) linear infinite}.school svg{width:100%;height:100%}.ripple{position:absolute;border:1px solid #dff2cf88;border-radius:50%;width:30px;height:30px;animation:ripple 1.5s ease-out both}.paused-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#f0f1d7;background:#174e5866;backdrop-filter:blur(8px);border:1px solid #d1e2ca40;padding:12px 24px;border-radius:30px;font-size:12px;letter-spacing:.15em;z-index:15;pointer-events:none}.aquarium.is-paused *{animation-play-state:paused!important}.aquarium[data-theme=dusk]{--top:#bcada6;--middle:#728e99;--bottom:#26445f;--ray:#ffe6bc}.aquarium[data-theme=dusk] .ocean-sky{filter:saturate(.8)}.aquarium[data-theme=dusk] .seafloor,.aquarium[data-theme=dusk] #plants{filter:hue-rotate(15deg) saturate(.7) brightness(.85)}.aquarium[data-theme=night]{--top:#284b61;--middle:#173c59;--bottom:#10263e;--ray:#9ad6e7}.aquarium[data-theme=night] .sun-rays{opacity:.05}.aquarium[data-theme=night] .seafloor,.aquarium[data-theme=night] #plants{filter:hue-rotate(15deg) saturate(.6) brightness(.55)}.aquarium[data-theme=night] .creature{filter:brightness(.85)}.aquarium[data-theme=night] .particle{box-shadow:0 0 7px #7bede0;background:#a9e9d7}.focus-exit{display:none;position:absolute;bottom:28px;right:28px;z-index:20}.focus-exit button{border:1px solid #dae5c866;color:#e5ecd4;background:#124a5b55;backdrop-filter:blur(10px);padding:10px 15px;border-radius:30px;font-size:11px}body.focus-mode{overflow:hidden}body.focus-mode .aquarium{position:fixed;inset:0;width:100vw;height:100dvh;border-radius:0;z-index:1000}body.focus-mode .focus-exit{display:block}body.focus-mode .sea-bottom{bottom:33px;right:240px}dialog{border:1px solid #d9e1d2;border-radius:22px;background:#f8f9f0;color:var(--ink);padding:27px 32px 33px;width:min(600px,calc(100% - 32px));max-height:85dvh;box-shadow:0 30px 100px #0c3f4440}dialog::backdrop{background:#133d475c;backdrop-filter:blur(7px)}.modal-top{display:flex;align-items:center;justify-content:space-between}.modal-top .eyebrow{margin:0}.close-button{font-size:28px;font-weight:300;color:#7a8b77;line-height:1;padding:0 5px}dialog h2{font-family:"Yu Mincho",serif;font-size:25px;font-weight:500;letter-spacing:.05em;margin:17px 0 25px}dialog p{font-size:12px;line-height:2.2;color:#70846f}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid #e0e5d8;gap:20px}.setting-row label,.setting-row strong{font-size:13px;font-weight:400}.setting-row small{display:block;font-size:10px;color:#96a18e;margin-top:7px}.setting-row select{background:#edf1e5;border:1px solid #d8e0cb;border-radius:7px;color:#52694f;padding:9px 12px;font:11px inherit;max-width:145px}.setting-row input{accent-color:#67886b;width:18px;height:18px}.resident{display:flex;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid #e0e5d8}.resident-art{width:115px;flex-shrink:0}.resident-art svg{width:100%;height:90px}.resident h3{font:17px "Yu Mincho",serif;margin:0 0 5px}.resident small{font-size:9px;color:#9aa58c}.resident p{margin:5px 0 6px;font-size:11px;line-height:1.9}.resident button{font-size:10px;padding:7px 0;text-decoration:underline;text-underline-offset:4px;color:#718761}.journal-tabs{display:flex;gap:8px;margin-bottom:20px}.journal-tabs button{font-size:11px;padding:9px 15px;border-radius:20px;border:1px solid #dce3d0}.journal-tabs button[aria-pressed=true]{background:#e8edce;border-color:#e8edce}.journal-list{display:grid;gap:12px}.journal-list .quote-card{padding:16px}.journal-list .quote-card p{margin-bottom:7px}.journal-empty{padding:25px 0;text-align:center;color:#8d9c85;font-size:12px}.about-mark{font-size:40px;color:#8ea786;text-align:center}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:30px;background:#294a48;color:#f2f3e5;font-size:11px;z-index:3000;box-shadow:0 5px 20px #264e4c30;width:max-content;max-width:90vw;text-align:center}.motion-quiet .sun-rays,.motion-quiet .plant,.motion-quiet .particle,.motion-quiet .school,.motion-quiet .tail,.motion-quiet .flipper,.motion-quiet .blink{animation:none!important}
@keyframes light-shift{to{transform:rotate(9deg) scaleX(1.1)}}@keyframes fin{to{transform:scaleX(.8) skewY(4deg)}}@keyframes flipper{to{transform:rotate(-13deg) scaleY(.85)}}@keyframes blink{0%,44%,47%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.15)}}@keyframes plant-sway{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}@keyframes float-up{from{transform:translate(0,0);opacity:0}10%{opacity:.4}90%{opacity:.25}to{transform:translate(30px,-750px);opacity:0}}@keyframes school-swim{from{transform:translateX(0)}to{transform:translateX(-1600px)}}@keyframes speech-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@keyframes card-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@keyframes ripple{to{transform:scale(4);opacity:0}}
@media(min-width:1600px){main,.site-header,.site-footer{max-width:1530px;margin-left:auto;margin-right:auto}.aquarium{height:650px}.intro{padding:48px 0 40px}}
@media(max-width:1000px){.header-note{display:none}.site-header{height:88px}.site-header nav{gap:25px}.intro{padding:30px 0}.intro-aside{display:none}.aquarium{height:520px}.quote-card{gap:10px;padding:16px 12px}.quote-avatar{width:43px;height:43px;padding:3px}.quote-avatar svg{width:49px}.quote-card p{font-size:12px}.toolbar-buttons{gap:12px}}
@media(max-width:700px){.site-header{height:80px;margin:0 5%}.brand{font-size:16px;gap:8px}.brand svg{width:31px}.brand small{font-size:7px}.site-header nav{gap:19px;font-size:11px}.nav-current,.site-header nav #about-open{display:none}main{margin:0 5%}.intro{padding:29px 0 25px}.intro h1{font-size:25px;letter-spacing:.025em}.intro-copy{font-size:10px;letter-spacing:.025em}.eyebrow{font-size:7px;margin-bottom:12px}.aquarium{height:510px;min-height:430px;border-radius:17px}.scene-label{left:18px;top:21px;gap:10px}.scene-label strong{font-size:13px}.scene-label div>span{font-size:6px}.scene-index{width:25px;height:31px;font-size:8px}.sea-status{right:18px;top:25px;font-size:8px;gap:5px}.sea-bottom{left:18px;right:18px;bottom:18px;font-size:8px}.sea-bottom .depth{display:none}.little-spark{margin-right:4px}.ocean-toolbar{flex-wrap:wrap;padding:15px 0 9px;gap:9px;justify-content:center}.live-caption{width:100%;justify-content:center;font-size:9px}.toolbar-buttons{width:100%;justify-content:center;gap:15px}.control{font-size:10px;gap:7px}.control-divider{display:none}.control>span:first-child{font-size:17px}.notebook{padding:27px 0}.notebook h2{font-size:18px}.notebook-heading{margin-bottom:18px}.text-link{font-size:9px;gap:7px}.quote-grid{grid-template-columns:1fr;gap:10px}.quote-card{padding:14px 17px;gap:16px;min-height:95px}.quote-avatar{width:49px;height:49px}.quote-card p{font-size:13px}.quote-meta{font-size:9px}.site-footer{margin:0 5%;padding:20px 0 25px;flex-direction:column;font-size:8px;gap:9px}.site-footer>span:last-child>span{margin-left:8px}.speech{font-size:12px;padding:13px 17px;max-width:75%}dialog{padding:23px}.resident{gap:15px}.resident-art{width:80px}body.focus-mode .sea-bottom{bottom:85px;right:18px}body.focus-mode .focus-exit{bottom:25px;right:20px}.plant{width:18%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.aquarium:not([data-motion=swim]) .sun-rays,.aquarium:not([data-motion=swim]) .plant,.aquarium:not([data-motion=swim]) .particle,.aquarium:not([data-motion=swim]) .school,.aquarium:not([data-motion=swim]) .tail,.aquarium:not([data-motion=swim]) .flipper,.aquarium:not([data-motion=swim]) .blink{animation:none!important}.speech,.quote-card{animation:none}.ocean-sky,.creature{transition:none}}
.aquarium[data-theme=dawn]{--top:#c6cec0;--middle:#7ab2b2;--bottom:#426c82;--ray:#fff0c7}.sea-status time{font:10px Arial,sans-serif;letter-spacing:.08em;opacity:.72;border-left:1px solid #e1ecd044;padding-left:10px;margin-left:2px}.paused-badge{pointer-events:auto;white-space:pre-line;line-height:1.9;min-width:190px;font-size:11px;cursor:pointer}.paused-badge:hover{color:#fff8d8;background:#215d67aa}.tap-to-swim{cursor:pointer}.tap-to-swim .paused-badge{border-color:#e0edbc99;box-shadow:0 0 35px #b8d7b21c}#creatures{z-index:3;transition:opacity .7s}#visitor-layer{position:absolute;inset:0;pointer-events:none;z-index:7}.visitor-present #creatures{opacity:.45}.visitor{pointer-events:auto}.visitor svg{overflow:visible}.guest-speech{border:1px solid #e4d9a2;background:#fbf7e8f5}.guest-speech:after{border-top-color:#fbf7e8f5}.guest-speech small{display:block;font:9px/1.5 "Yu Gothic UI",sans-serif;color:#9b9367;letter-spacing:.05em;margin-bottom:6px}.visitor-quote{border-color:#e3dfc5}.visitor-quote .quote-avatar{background:#eeecdc}.visitor-quote .quote-avatar svg{height:47px}.scene-label #viewing-time{font-variant-numeric:tabular-nums}.visit-note{font-size:11px;color:#8e9a82;line-height:1.9;margin:18px 0 0}
@media(max-width:700px){.sea-status{gap:4px;right:14px}.sea-status time{font-size:8px;padding-left:6px}.scene-label{left:14px;gap:7px}.scene-label strong{font-size:11px}.scene-label div>span{font-size:5px}.scene-index{width:22px;height:29px}.toolbar-buttons{gap:10px}.control{gap:6px}.guest-speech small{font-size:8px}.paused-badge{min-width:180px}}
body.focus-mode .aquarium{min-height:0}