*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}button,a,summary{touch-action:manipulation}:root{color-scheme:light;--font-display:monospace;--font-record-meta:var(--font-display);--ink:#102349;--blue:#2461c1;--border:#233d66;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--sea-fill:#87d9f2}body{margin:0;font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:var(--sea-fill);overflow:hidden}body:is(.healing-mode,.calendar-mode){background:#fff}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:1.5px solid var(--border);background:#f9fcff;border-radius:0}button:hover{background:#e0f4ff}:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px}button:disabled{opacity:.4;cursor:default}#ocean{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}#ocean.dragging{cursor:grabbing}#world{position:absolute;width:1536px;height:1024px;transform-origin:0 0;background:url('sea-assets/background-v2.webp') center/100% 100%;will-change:transform}.brand{font:900 calc(30 * var(--text-unit)) var(--font-display);letter-spacing:1px;text-decoration:none;color:var(--ink)}header small{display:block;font-size:calc(11 * var(--text-unit));margin-top:7px;color:#315e85}.bubble{position:absolute;isolation:isolate}.bubble-target{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent!important;clip-path:circle(50%);padding:0}.bubble-ring{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;transition:filter .2s}.bubble:hover .bubble-ring{filter:brightness(1.07)}.label{position:absolute;top:-67px;left:50%;width:400px;height:100px;transform:translateX(-50%);overflow:visible;pointer-events:none}.label text{font-family:var(--font-display);font-weight:900;fill:#122b50;font-size:calc(29 * var(--text-unit));letter-spacing:.3px}.label .ko{font-family:Arial,'Apple SD Gothic Neo',sans-serif;font-size:calc(23 * var(--text-unit));font-weight:400;fill:#3e6c95;letter-spacing:0}.pin{position:absolute;width:84px;height:84px;border:0;background:none!important;transform:translate(-50%,-50%);padding:0;transition:scale .15s}.pin:hover,.pin:focus-visible{scale:1.12;filter:none}.sprite{display:block;width:100%;height:100%;background-image:url('sea-assets/animals.png');background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated}.s0{background-position:0 0}.s1{background-position:33.3333% 0}.s2{background-position:66.6667% 0}.s3{background-position:100% 0}.s4{background-position:0 100%}.s5{background-position:33.3333% 100%}.s6{background-position:66.6667% 100%}.s7{background-position:100% 100%}.cluster{background:#eaf9ffe6!important;border:2px solid white;width:65px;height:65px;font-weight:800;font-size:calc(24 * var(--text-unit));clip-path:polygon(20% 0,80% 0,80% 8%,92% 8%,92% 20%,100% 20%,100% 80%,92% 80%,92% 92%,80% 92%,80% 100%,20% 100%,20% 92%,8% 92%,8% 80%,0 80%,0 20%,8% 20%,8% 8%,20% 8%)}.dock button[aria-pressed=true]{background:#b8def6;box-shadow:inset 3px 3px #6da3cf,inset -3px -3px #f2fbff}.zoom a[hidden]{display:none}.zoom a svg{width:18px;height:18px}.zoom a:hover{background:#e0f4ff}.zoom{position:fixed;right:max(30px,var(--safe-right));bottom:calc(42px + var(--safe-bottom));display:grid}.zoom :is(button,a){display:grid;place-items:center;border:1.5px solid var(--border);background:#f9fcff;color:var(--ink);padding:0;text-decoration:none;width:46px;height:46px;font-size:calc(26 * var(--text-unit));font-weight:700;margin-top:-1px}#hint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(128px + var(--safe-bottom));font-size:calc(12 * var(--text-unit));color:#315e85;pointer-events:none;background:#dcf5fa9c;padding:5px 10px;white-space:nowrap}.sea-preview{position:fixed;bottom:calc(135px + var(--safe-bottom));left:max(24px,var(--safe-left));width:320px;z-index:4}.sea-preview[hidden]{display:none}#peek{border:1.5px solid var(--border);box-shadow:4px 4px #5d8faf2e}#peek img{width:88px;height:76px;object-fit:cover;float:left;margin-right:12px}#peek h3{font-size:var(--text-name);margin:2px 20px 5px 0}#peek p{font-size:var(--text-body);line-height:1.45;margin:6px 0}#peek small{font-size:var(--text-meta);color:#527393}#peek .more{border:0;background:none;color:#1c55b8;padding:0;font-weight:700;font-size:calc(14 * var(--text-unit))}dialog{border:2px solid var(--ink);border-radius:0;width:min(650px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:0;color:var(--ink);background:#f9fdff;box-shadow:8px 8px 0 #082b4f30}dialog::backdrop{background:#0d355657;backdrop-filter:blur(3px)}.panel-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#cdebf9;border-bottom:1px solid var(--border);font-size:calc(14 * var(--text-unit));font-weight:700;z-index:2}.panel-head button{font-size:calc(24 * var(--text-unit));border:none;background:none;line-height:1}#panel-body{padding:22px}.player{width:100%;aspect-ratio:16/9;border:0;background:#102349}.detail-title{font-size:calc(24 * var(--text-unit));margin:20px 0 8px}.meta{font-size:calc(12 * var(--text-unit));color:#55728b}.note{font-size:calc(17 * var(--text-unit));line-height:1.8;white-space:pre-wrap}.footnote{font-size:var(--text-meta);color:#55728b;line-height:1.6}.results{display:grid;gap:10px;margin-top:18px}.result{text-align:left;padding:12px;display:flex;gap:12px;align-items:center;background:white}.result img{width:94px;aspect-ratio:16/9;object-fit:cover}.result strong{display:block;font-size:var(--text-name);margin-bottom:6px}.result small{display:block;color:#54718f;font-size:var(--text-meta)}.field{display:grid;gap:6px;margin:14px 0;font-size:calc(13 * var(--text-unit))}.field input,.field textarea,.field select,.search-input{border:1px solid #7897ad;background:white;width:100%;padding:11px;border-radius:0}.field textarea{min-height:88px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.primary{background:#163a67;color:white;padding:11px 18px}.primary:hover{background:#255a8e}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.form-actions button{padding:10px 16px}.animal-options{display:flex;gap:6px;flex-wrap:wrap}.animal-options button{width:54px;height:54px;padding:5px}.animal-options button[aria-pressed=true]{background:#b8def6;outline:2px solid var(--ink)}.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}.cal-nav button{padding:8px 12px}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cal-grid button{aspect-ratio:1;position:relative;padding:0;overflow:hidden}.cal-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}.cal-grid span{position:relative;z-index:1}.cal-grid .has{color:white}.cal-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:calc(12 * var(--text-unit));margin:15px 0}.empty{padding:30px 0;color:#55728b;text-align:center}#toast{position:fixed;inset:90dvh auto auto 50%;margin:0;max-width:calc(100vw - 32px);border:0;transform:translate(-50%,-50%);z-index:20;background:#153659;color:white;padding:12px 20px;font-size:calc(14 * var(--text-unit))}.healing-title{position:absolute;left:610px;top:160px;font-size:calc(26 * var(--text-unit));letter-spacing:2px}.healing-title small{display:block;font-size:calc(16 * var(--text-unit));font-weight:400;letter-spacing:0;margin-top:8px}.error{color:#a32b46;font-size:calc(13 * var(--text-unit))} @media(max-width:650px){.brand{font-size:calc(23 * var(--text-unit))}header small{font-size:calc(10 * var(--text-unit));max-width:135px}.zoom{right:max(14px,var(--safe-right));bottom:calc(135px + var(--safe-bottom))}.zoom :is(button,a){width:36px;height:36px;font-size:calc(22 * var(--text-unit))}#hint{bottom:calc(98px + var(--safe-bottom));font-size:calc(10 * var(--text-unit))}.sea-preview{left:max(12px,var(--safe-left));bottom:calc(125px + var(--safe-bottom));width:calc(100% - 70px - var(--safe-left) - var(--safe-right));max-width:312px}#panel-body{padding:16px}.two{grid-template-columns:1fr}.note{font-size:calc(15 * var(--text-unit))}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}.animal-sprite{width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.bubble .pin{width:92px;height:92px}#world{background-size:cover;background-position:center} @media(max-width:650px){.bubble .pin{width:82px;height:82px}}#peek img{width:104px;height:auto;aspect-ratio:16/9;object-fit:contain;background:#eaf3f8}.result img{object-fit:contain;background:#eaf3f8}.preview-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#eaf3f8}#peek{padding:0;background:#f5fcff;overflow:hidden}#peek .card-open{display:grid;grid-template-columns:min(37%, 146px) minmax(0,1fr);gap:10px;width:100%;border:0;background:transparent;padding:12px;text-align:left}#peek .card-open:hover{background:transparent}#peek .peek-copy{min-width:0;display:grid;align-content:start;row-gap:2px}#peek img{float:none;margin:0;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;align-self:stretch;background:#08121b}#peek h3{font-size:var(--text-name);line-height:calc(24 * var(--text-unit));margin:0 60px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#peek small{display:block;font-size:var(--text-meta);line-height:calc(18 * var(--text-unit))}#peek p{display:block;font-size:var(--text-body);line-height:calc(21 * var(--text-unit));max-block-size:2lh;margin:0;overflow:hidden;overflow-wrap:anywhere}#peek .close-peek,#peek .expand-card{position:absolute;top:9px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--ink)}#peek .close-peek{right:8px;z-index:2}#peek .expand-card{right:36px}#peek .close-peek svg,#peek .expand-card svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:651px){.sea-preview{width:380px;bottom:calc(140px + var(--safe-bottom))}}
@media(max-width:650px){#peek .card-open{gap:8px;padding:10px}#peek h3{font-size:var(--text-name)}}#world{background-size:100% 100%}.zone-heading{position:absolute;border:none;background:transparent!important;font-weight:800;font-size:calc(30 * var(--text-unit));white-space:nowrap;color:#254d70;padding:12px;z-index:1}.zone-heading small{display:block;font-size:calc(17 * var(--text-unit));font-weight:400;margin-top:8px}.garden-scenery{position:absolute;image-rendering:pixelated;pointer-events:none;z-index:0}.pin{z-index:2}.animal-cluster{background:none!important;clip-path:none;border:none}.cluster-count{position:absolute;right:0;bottom:0;background:#f2fbff;border:2px solid #719dbc;padding:3px 7px;font-weight:700;font-size:calc(20 * var(--text-unit));line-height:1.1;pointer-events:none}.animal-cluster:hover{scale:1.08}#status{max-width:330px}.bubble-target:focus-visible{outline-offset:-8px}.dock [data-action=home][aria-pressed=true]{background:#b8def6}.animal-cluster .cluster-ripples{position:absolute;inset:5% 7% 23%;display:block}.cluster-ripples i{position:absolute;width:55%;height:65%;border:2px solid #f4fdff;background:#dcf6ff33;clip-path:polygon(20% 0,80% 0,80% 8%,92% 8%,92% 20%,100% 20%,100% 80%,92% 80%,92% 92%,80% 92%,80% 100%,20% 100%,20% 92%,8% 92%,8% 80%,0 80%,0 20%,8% 20%,8% 8%,20% 8%)}.cluster-ripples i:nth-child(1){left:0;top:26%}.cluster-ripples i:nth-child(2){right:0;top:26%}.cluster-ripples i:nth-child(3){left:23%;top:0}.animal-cluster .cluster-count{right:auto;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;background:#e7f7fbbf;border:0;color:#284a6b;font-weight:600}.animal-cluster{min-width:0}.cluster-animals{position:absolute;inset:-18% -35% 12%;pointer-events:none}.cluster-animals .animal-sprite{position:absolute;width:65%;height:85%;top:8%}.cluster-animals canvas:nth-child(1){left:-4%;top:14%}.cluster-animals canvas:nth-child(2){right:-4%;top:14%}.cluster-animals canvas:nth-child(3){left:18%;top:-24%}.animal-cluster .cluster-count{bottom:-15%;font-weight:500}.more-pins{position:absolute;transform:translate(-50%,-50%);padding:5px 12px;min-width:44px;min-height:44px;z-index:2;background:#effbff;font-weight:700;white-space:nowrap}.shell-pin canvas{filter:hue-rotate(var(--shell-hue,0deg))}.browsing #ocean,.browsing header,.browsing .dock,.browsing .zoom,.browsing #hint{visibility:hidden}#browse{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain;background:#9bddf2;z-index:6;padding:var(--safe-top) max(5vw,var(--safe-right)) calc(80px + var(--safe-bottom)) max(5vw,var(--safe-left));scrollbar-gutter:stable}#browse[hidden]{display:none}.browse-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:#b9e9f7f5;padding:18px 0;z-index:2;border-bottom:1px solid #448caa}.browse-head button{padding:12px;min-height:44px;font-size:calc(24 * var(--text-unit))}.browse-head button span{font-size:calc(13 * var(--text-unit))}.browse-head h1{font-family:monospace;font-size:calc(28 * var(--text-unit));margin:0;text-align:center}.browse-head p{text-align:center;font-size:calc(13 * var(--text-unit));margin:6px 0 0}.browse-grid{max-width:1100px;margin:32px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:32px 18px;align-items:center}.browse-grid .browse-pin{position:relative;inset:auto;transform:none;width:96px;height:96px;justify-self:center;min-width:44px;min-height:44px}.browse-pin:nth-child(even){margin-top:22px}.browsing #peek{display:none}@media(max-width:650px){#browse{padding:var(--safe-top) max(16px,var(--safe-right)) calc(50px + var(--safe-bottom)) max(16px,var(--safe-left))}.browse-head h1{font-size:calc(22 * var(--text-unit))}.browse-head button span{display:none}.browse-grid{grid-template-columns:repeat(3,1fr);gap:22px 8px}.browse-grid .browse-pin{width:80px;height:80px}}.more-pins{width:76px;height:76px;border:0;background:transparent!important;padding:0;display:grid;place-items:center;box-shadow:none}.more-ring{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.more-pins span{position:relative;z-index:1;font-size:calc(22 * var(--text-unit))}.more-pins:hover{filter:brightness(1.08)}#browse{background:#a7deef}.browse-grid{display:block;position:relative;max-width:1100px;margin:28px auto}.browse-grid .browse-pin{position:absolute;transform:none;margin:0!important;animation:swim-drift var(--float-time,6s) ease-in-out var(--float-delay,0s) infinite}.browse-head{background:#b9e9f7f5}@keyframes swim-drift{0%,100%{translate:0 -3px}50%{translate:0 3px}}@media(prefers-reduced-motion:reduce){.browse-grid .browse-pin{animation:none}}/* The sea scenery stays at viewport scale; only memories zoom and pan. */
#sea-backdrop{position:fixed;inset:0;pointer-events:none;background:var(--sea-fill);overflow:hidden}#sea-backdrop:after{content:"";position:absolute;inset:0;background:url('sea-assets/background-v2.webp') center bottom/cover no-repeat;transform-origin:50% 100%;transform:scale(var(--sea-depth-scale,1.22));transition:transform var(--sea-depth-duration,700ms) cubic-bezier(.22,.61,.36,1);will-change:transform}#world{background:none!important}.sea-search{position:absolute;border:0;background:none!important;width:120px;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 calc(24 * var(--text-unit)) monospace}.sea-search canvas{width:112px;height:90px}.sea-search:hover{scale:1.06}.calendar-pixel{font:calc(50 * var(--text-unit)) monospace;line-height:calc(50 * var(--text-unit));color:#255b91}.healing-mode #ocean,.healing-mode #hint,.healing-mode .zoom,.healing-mode #sea-backdrop{visibility:hidden}.healing-mode #ocean{pointer-events:none}#healing-view{position:fixed;inset:0;overflow-y:auto;background:#f4faff;padding:110px max(24px,7vw) 160px;scrollbar-gutter:stable}#healing-view[hidden]{display:none}.healing-intro{max-width:1100px;margin:auto}.healing-intro small,.note-copy>small{font:calc(12 * var(--text-unit)) monospace;letter-spacing:2px;color:#456683}.healing-intro h1{font-size:clamp(calc(28 * var(--text-unit)),4vw,calc(48 * var(--text-unit)));letter-spacing:-1.5px;margin:18px 0}.healing-intro p{color:#4c6c87}.healing-search-label{display:grid;gap:8px;font-size:calc(13 * var(--text-unit));max-width:560px;margin:32px 0}.healing-search-label input{background:white;border:1px solid #7194ac;padding:14px;width:100%;font:inherit}#healing-notes{max-width:1100px;margin:46px auto}.video-note{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;border-top:1px solid #9cbacb;padding:30px 0 42px}.note-cover{padding:0;border:0;background:none!important;text-align:left;align-self:start}.note-cover img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#d4e8f2}.note-cover span{display:block;margin-top:12px;font-size:calc(13 * var(--text-unit))}.note-copy h2{font-size:calc(20 * var(--text-unit));line-height:1.5;margin:14px 0}.note-copy blockquote{margin:30px 0 18px;font-size:clamp(calc(21 * var(--text-unit)),2.5vw,calc(29 * var(--text-unit)));line-height:1.6;word-break:keep-all}.note-copy p{font-size:calc(13 * var(--text-unit));color:#4c6c87}.note-open{padding:10px 14px;margin-top:18px;background:white}.healing-caption{max-width:1100px;margin:auto;font-size:calc(12 * var(--text-unit));color:#55728b}@media(max-width:650px){.video-note{grid-template-columns:1fr;gap:24px}.healing-intro h1{font-size:calc(30 * var(--text-unit))}#healing-view{padding:95px 22px 125px}.note-copy blockquote{margin-top:20px}}/* Each bubble carries its own pins,so the whole habitat drifts together. */
.bubble-float{position:absolute;inset:0;pointer-events:none;animation:bubble-drift var(--drift-time) ease-in-out var(--drift-delay) infinite;will-change:transform}.bubble-float .bubble,.bubble-float .pin,.bubble-float .more-pins{pointer-events:auto}.bubble-float:focus-within,.bubble-float:hover{animation-play-state:paused}.map-focused .bubble-float{animation:none;transform:none;will-change:auto}.sea-search{animation:submarine-drift 11s ease-in-out -4s infinite;will-change:transform}.sea-search:hover,.sea-search:focus-visible{animation-play-state:paused}@keyframes bubble-drift{0%,100%{transform:translate(calc(var(--drift-x) * -1),0) scale(1)}33%{transform:translate(0,var(--drift-y)) scale(var(--breath))}68%{transform:translate(var(--drift-x),calc(var(--drift-y) * -.4)) scale(.985)}}@keyframes submarine-drift{0%,100%{transform:translate(-13px,3px) rotate(-2deg)}50%{transform:translate(15px,-9px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){.bubble-float,.sea-search{animation:none;will-change:auto}}#browse{background:transparent}.browse-head{background:#b5e9f1e8;border-bottom-color:#ffffff60}.browsing #sea-backdrop{visibility:visible}#browse-callout{position:fixed;z-index:9;width:min(310px,calc(100vw - 24px));background:#f5fcff;border:2px solid #284a6b;border-radius:15px;box-shadow:3px 5px 0 #164b6725;color:#173557}#browse-callout:after{content:"";position:absolute;width:16px;height:16px;background:#f5fcff;bottom:-10px;left:calc(var(--tail-x) - 8px);border-right:2px solid #284a6b;border-bottom:2px solid #284a6b;transform:rotate(45deg)}#browse-callout.below:after{bottom:auto;top:-10px;transform:rotate(225deg)}.bubble-read{display:block;width:100%;border:0;border-radius:13px;background:transparent;text-align:left;padding:17px}.bubble-read:hover{background:#eaf8ff}.bubble-author{padding-right:25px}.bubble-author strong{display:block;font-size:var(--text-name)}.bubble-author span{display:block;font-size:calc(11 * var(--text-unit));color:#527493;margin-top:5px}.bubble-read p{font-size:var(--text-body);line-height:1.6;margin:5px 0 12px;display:block;overflow-wrap:anywhere}.bubble-video{display:flex;gap:10px;align-items:center}.bubble-video img{width:100px;flex:0 0 100px;aspect-ratio:16/9;object-fit:contain;background:#d6ecf5}.bubble-video span{min-width:0;font-size:calc(11 * var(--text-unit));line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.bubble-note-more{white-space:nowrap;font:inherit;color:#496680}.bubble-note-more[hidden]{display:none}.bubble-dismiss{position:absolute;right:8px;top:6px;width:32px;height:32px;border:0;background:transparent;font-size:calc(24 * var(--text-unit));border-radius:6px}.browse-pin[aria-expanded=true]{animation-play-state:paused;filter:brightness(1.08)}/* Category navigation: keep the ocean still; memories gently enter. */
.browse-head{background:transparent;border:0;padding:18px 0;pointer-events:none}.browse-head button{pointer-events:auto;background:transparent;border:0;box-shadow:none;width:48px;height:48px;padding:0;font-size:calc(32 * var(--text-unit));line-height:1;color:#123654}.browse-head button:hover{background:transparent}.browse-head button:focus-visible{outline:2px solid #123654;outline-offset:2px}.browse-head>div{display:flex;align-items:baseline;justify-content:center;gap:12px}.browse-head h1{font-size:calc(28 * var(--text-unit));letter-spacing:.04em;outline:none}.browse-head .browse-count{margin:0;font-size:calc(16 * var(--text-unit));font-family:monospace;font-weight:400;color:#315b76}.browse-arriving .browse-grid{animation:memories-arrive 280ms cubic-bezier(.2,.7,.3,1) both}.browse-arriving .browse-head{animation:heading-arrive 180ms ease-out both}
@keyframes memories-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes heading-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:650px){.browse-head h1{font-size:calc(22 * var(--text-unit))}.browse-head .browse-count{font-size:calc(14 * var(--text-unit))}.browse-head>div{gap:8px}}
@media(prefers-reduced-motion:reduce){.browse-arriving .browse-grid,.browse-arriving .browse-head{animation:none}}#hint{display:none!important}#sea-down{position:fixed;bottom:calc(101px + var(--safe-bottom));left:calc(50% - 22px);width:44px;height:44px;border:0;background:transparent;z-index:3;color:#19456a;padding:10px;animation:down-drift 1.8s ease-in-out infinite}#sea-down[hidden],.browsing #sea-down,.healing-mode #sea-down{display:none}#sea-down svg{width:24px;height:24px;shape-rendering:crispEdges}
@keyframes down-drift{50%{translate:0 5px}}#healing-view{background:#e2f4fc;padding-top:105px}.healing-intro h1{font:700 calc(28 * var(--text-unit)) monospace;letter-spacing:1px;margin:0}.healing-search-label{margin:20px 0;max-width:100%}#healing-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:25px auto}.video-note{display:block;border:0;padding:0 0 24px;border-bottom:1px solid #9cbacb}.note-copy h2{font-size:calc(16 * var(--text-unit));margin:16px 0 10px}.note-copy .healing-message{font-size:calc(15 * var(--text-unit));line-height:1.6;color:#173557;margin:10px 0}.note-open{margin:8px 0 0;padding:8px 0;border:0;background:transparent}
@media(max-width:650px){.zoom{bottom:calc(135px + var(--safe-bottom))}.zoom :is(button,a){width:30px;height:30px;font-size:calc(19 * var(--text-unit))}header .brand{font-size:calc(21 * var(--text-unit))}header small{display:none}.bubble-float{--drift-x:12px!important;--drift-y:16px!important;--breath:1.025!important}#healing-view{padding:92px 18px 110px}#healing-notes{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){#sea-down{animation:none}}/* A visible pixel control,separate from scene artwork. */
#sea-down{background:#f4fcff;border:2px solid #21486b;box-shadow:3px 3px 0 #477ca8;bottom:calc(86px + var(--safe-bottom));color:#163c63;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}#sea-down{display:grid;place-items:center;background:transparent;border:0;box-shadow:none;clip-path:none;padding:5px;color:#164465}#sea-down svg{display:block;width:32px;height:34px;overflow:visible}.mine-create{display:flex;justify-content:flex-end;margin-bottom:16px}


/* Keep the sea image continuous; system insets apply only to interactive content. */
@media(max-width:650px){#sea-backdrop:after{background-position:57% bottom;transform-origin:57% 100%}}
@media(prefers-reduced-motion:reduce){#sea-backdrop:after{transform:none;transition:none;will-change:auto}}.browse-head button{display:grid;place-items:center;width:48px;height:48px;padding:10px}.browse-nav-icon{width:28px;height:28px;display:block;shape-rendering:geometricPrecision;color:#123654}.browse-head button:active .browse-nav-icon{translate:0 2px}.pin{overflow:visible;line-height:0}.pin .animal-sprite{display:block;max-width:none;max-height:none;object-fit:contain}/* Header title and search share one visual centerline. */
header #status{display:none}.brand{line-height:1}
.bubble-float,.map-focused .bubble-float{animation:none!important;transition:none;will-change:transform}/* Card customization: shared palette with the original animal shading retained. */
.tone-picker{border:0;padding:0;margin:20px 0 8px}.tone-picker legend{font-weight:700;margin-bottom:10px}.tone-options{display:flex;flex-wrap:wrap;gap:8px}.tone-options button{display:flex;align-items:center;gap:6px;padding:8px;border:2px solid #b6c8d8;background:#fff;font-size:calc(13 * var(--text-unit));color:#183253}.tone-options button[aria-pressed=true]{border-color:#183253;background:#e7f4ff}.tone-options span{width:22px;height:22px;border:1px solid #7890a5}.animal-preview{display:flex;justify-content:center;padding:12px;background:#85d9f3;margin:12px 0}.animal-preview canvas{width:144px;height:144px;image-rendering:pixelated}/* Hidden form controls must not be overridden by the field grid layout. */
#form [hidden]{display:none!important}.profile-fields{display:grid;grid-template-columns:144px minmax(0,1fr);gap:20px;align-items:center;margin:20px 0}.profile-fields .animal-preview{aspect-ratio:1;margin:0;padding:0;border:1px solid #94b7ca}.profile-fields .animal-preview canvas{width:100%;height:100%;max-width:144px;max-height:144px}.profile-details{min-width:0;display:grid;gap:12px}.profile-details .field{margin:0}.profile-details input{min-width:0}
@media(max-width:450px){.profile-fields{grid-template-columns:96px minmax(0,1fr);gap:12px}.profile-details input{padding:9px 6px}.profile-details .field{font-size:calc(12 * var(--text-unit))}}/* Mobile-first card form: one preview,two chooser panels,compact field rows. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.compact-card-form .field{margin:0;font-size:calc(12 * var(--text-unit));min-width:0}.compact-card-form{display:grid;gap:12px;container-type:inline-size}.compact-card-form .two,.identity-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.customizer-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:stretch}.customizer-row .animal-preview{margin:0;padding:0;align-items:center;border:1px solid #a6c8d7}.customizer-row .animal-preview canvas{width:112px;height:112px}.customizer-controls{min-width:0}.customizer-tabs{display:flex;border-bottom:1px solid #a6c8d7;margin-bottom:8px}.customizer-tabs button{border:0;background:none;padding:8px 14px;min-height:36px;font-size:calc(13 * var(--text-unit))}.customizer-tabs button[aria-selected=true]{box-shadow:inset 0 -3px #163a67;font-weight:700}.customizer-controls [role=tabpanel]{min-height:96px}.customizer-controls .animal-options{gap:5px}.customizer-controls .animal-options button{width:44px;height:44px;padding:2px}.customizer-controls .tone-options{gap:5px}.customizer-controls .tone-options button{width:44px;height:44px;padding:5px;justify-content:center}.customizer-controls .tone-options span{width:28px;height:28px}.tone-options [data-tone-choice="original"] span{background:linear-gradient(135deg,transparent calc(50% - 1px),#c64b55 calc(50% - 1px),#c64b55 calc(50% + 1px),transparent calc(50% + 1px)),#fff}.video-row{display:grid;gap:12px}.compact-card-form input,.compact-card-form select{min-width:0}.compact-card-form textarea{resize:none;line-height:calc(24 * var(--text-unit));min-height:88px;max-height:164px;padding:7px 9px}.compact-card-form .error:empty{display:none}.compact-card-form .form-actions{margin-top:0}
@media(max-width:450px){#panel-body:has(.compact-card-form){padding:14px}.compact-card-form{gap:12px}.customizer-row{grid-template-columns:94px minmax(0,1fr);gap:10px}.customizer-row .animal-preview canvas{width:90px;height:90px}.customizer-controls [role=tabpanel]{min-height:96px}.video-row{gap:10px}.compact-card-form input,.compact-card-form textarea,.compact-card-form select{font-size:calc(16 * var(--text-unit))}.identity-row{gap:10px}}.identity-row.healing-date-row{grid-template-columns:minmax(0,1fr)}/* Nicknames travel with their animal; bounded chips preserve swimming spacing. */
.browse-nickname{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);max-width:112px;width:max-content;padding:4px 10px;border-radius:999px;background:rgba(220,245,250,.82);color:#254b6a;font:500 calc(12 * var(--text-unit))/1.35 Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.browse-pin[aria-expanded=true] .browse-nickname{background:rgba(239,251,255,.95);color:#102349}
@media(max-width:650px){.browse-nickname{max-width:100px;font-size:calc(11 * var(--text-unit));padding:4px 8px}}/* Healing video library — shared ocean navigation,thumbnail-first content. */
#healing-view{padding:28px 32px 150px;background:#f7fbfe;scrollbar-gutter:stable;}.healing-shell{max-width:1320px;margin:auto}.search-field{color:var(--ink);display:flex;align-items:center;gap:10px;min-width:0}.search-field svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.search-field input{border:0;outline:none;background:transparent;width:100%;font-size:var(--text-input);min-width:0}#healing-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px;margin:0;max-width:none}.healing-video{min-width:0}.healing-video-open{display:block;width:100%;text-align:left;border:0;padding:0;background:transparent!important}.healing-thumbnail{position:relative;aspect-ratio:16/9;background:#d1eafa;overflow:hidden}.healing-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.healing-video-meta{display:flex;justify-content:space-between;gap:8px;font-size:calc(11 * var(--text-unit));color:#376e9a;margin:14px 0 8px}.healing-video h2{font-size:calc(17 * var(--text-unit));line-height:1.45;margin:0 0 8px;letter-spacing:-.35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.healing-video p{font-size:calc(13 * var(--text-unit));line-height:1.6;color:#4c6279;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.healing-video small{font-size:calc(11 * var(--text-unit));color:#657d92}.healing-empty{grid-column:1/-1;padding:70px 0;text-align:center}.healing-empty button{padding:12px 20px;background:transparent}#healing-mood-field{border:0;padding:0;margin:0}#healing-mood-field legend{font-size:calc(12 * var(--text-unit));line-height:calc(18 * var(--text-unit));padding:0;margin:0}#healing-mood-field.mood-unselected .mood-limit{color:#a4434d}.mood-choices{display:flex;flex-wrap:wrap;gap:0 8px}.mood-choices button{position:relative;isolation:isolate;padding:6px 10px;min-height:44px;border:0;background:transparent;font-size:var(--control-text)}.mood-choices button::before{content:"";position:absolute;inset:4px 0;z-index:-1;border:1px solid #b6cbdc;background:white;pointer-events:none}.mood-choices button[aria-pressed=true]::before{border-color:#496c8e;background:#b8def0;box-shadow:inset 2px 2px #8dafc4,inset -2px -2px #e7f7ff}.healing-selected-moods{font-size:calc(13 * var(--text-unit));color:#2456a3}.healing-form{}.healing-form .video-row{order:2}.healing-form #category-date-row{order:3}.healing-form #healing-mood-field{order:4}.healing-form>.field{order:5}.healing-form>.error{order:6}.healing-form>.form-actions{order:7}.healing-form .identity-row{order:1}.healing-form #category-date-row{max-width:none}
@media(max-width:1050px){#healing-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#healing-view{padding:16px 16px 112px}#healing-notes{grid-template-columns:1fr;gap:32px}.healing-video h2{font-size:calc(17 * var(--text-unit))}.healing-video p{font-size:calc(13 * var(--text-unit))}.healing-form{}.healing-form .field{font-size:calc(12 * var(--text-unit))}.healing-form #category-date-row{max-width:none}}
/* Pixel controls surround a quiet,uncropped video grid. */
#healing-view{background:#ffffff}.healing-video-open{background:transparent!important}.healing-thumbnail{background:#183552}.healing-video h2{font-size:calc(16 * var(--text-unit))}.healing-video-meta{color:#426a88}
@media(max-width:650px){#healing-view{padding-top:18px}}/* Table-style healing cards with metadata above the thumbnail. */
.healing-record{--record-label-width:52px;container-type:inline-size;--record-cell-inset:12px;min-width:0;align-self:start;color:#20242b;background:transparent;border:1px solid #20242b}.healing-record .healing-thumbnail{border:0;background:#fff}.record-title>button{display:block;width:100%;border:0;background:transparent!important;text-align:left;padding:5px var(--record-cell-inset);color:inherit}.healing-record .record-title h2{font-size:var(--text-title);line-height:1.4;margin:0;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.record-title,.record-feeling{display:grid;grid-template-columns:var(--record-label-width) minmax(0,1fr);border-bottom:1px solid #20242b}.record-feeling{position:relative}.record-label{display:flex;align-items:center;padding:5px 8px;border-right:1px solid #20242b;font:calc(11 * var(--text-unit)) var(--font-record-meta)}.record-feeling .feeling-stats{padding:4px var(--record-cell-inset);justify-content:space-between;flex-wrap:nowrap;gap:0 2px}.feeling-stats{display:flex;align-items:center;gap:12px;min-width:0}.feeling-stat{display:flex;align-items:center;justify-content:center;gap:4px;border:0!important;background:transparent!important;box-shadow:none!important;padding:0;min-height:0;min-width:0;flex:0 0 auto;white-space:nowrap;color:#20242b;font:calc(12 * var(--text-unit)) var(--font-record-meta)}.feeling-pixel{width:24px;height:24px;flex-shrink:0;image-rendering:pixelated}.feeling-stat.is-zero{opacity:.35}.record-feeling .feeling-stat{gap:2px}.record-feeling .feeling-pixel{width:20px;height:20px}

@media(max-width:380px){.feeling-stats{gap:10px}}/* Independent column stacks retain left-to-right item order. */
#healing-notes{grid-auto-rows:1px;row-gap:0;align-items:start}.healing-record{height:max-content}#healing-notes>.healing-empty{grid-column:1 / -1;grid-row:1 / span 160}
@media(max-width:650px){}.tv-screen{fill:#35475b}.tv-on-glint{display:none}#video-view-toggle[aria-pressed=true] .tv-screen{fill:#ffffff}#video-view-toggle[aria-pressed=true] .tv-on-glint{display:block}.video-group-pin{position:absolute;transform:translate(-50%,-50%);padding:3px 3px 22px;border:0;background:#fff;pointer-events:auto;line-height:0;box-shadow:2px 3px 0 #245a7626}.video-group-pin img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;pointer-events:none;background:#102349}.video-participants{position:absolute;right:-7px;top:-10px;min-width:34px;height:34px;display:grid;place-items:center;padding:0 7px;border:2px solid #fff;border-radius:20px;background:#fff;color:#102349;font:bold calc(18 * var(--text-unit))/1 monospace;transform:scale(var(--video-badge-scale,1));transform-origin:80% 50%;box-shadow:0 1px 2px #10234933;pointer-events:none}.video-group-pin:hover{scale:1.04}.browse-video{transform:none}
@media(max-width:650px){body>header .brand{font-size:clamp(calc(16 * var(--text-unit)),4.2vw,calc(21 * var(--text-unit)));letter-spacing:0}}.porthole-icon{display:block;width:100%;height:100%}.bubble-author .bubble-date{font:var(--text-meta) var(--font-record-meta,monospace);line-height:1.6}

/* Narrow healing rows retain all five feelings without shrinking their labels. */
@container(max-width:340px){.record-feeling .feeling-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.record-feeling .feeling-stat{flex-direction:column;gap:2px;padding-block:3px}}.dock{position:fixed;bottom:calc(8px + var(--safe-bottom));left:calc(50% + (var(--safe-left) - var(--safe-right))/2);transform:translateX(-50%);display:flex;z-index:5;box-shadow:4px 5px 0 #3275a32b;max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right))}.dock button{flex:none;width:112px;min-width:0;height:auto;min-height:64px;margin-left:-1px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:32px minmax(14px,auto);padding:6px 8px;line-height:calc(14 * var(--text-unit));align-items:center;justify-content:center;gap:2px;font-size:calc(12 * var(--text-unit));font-weight:700;box-shadow:inset 2px 2px #fff,inset -2px -2px #c5deef}.dock button[data-action=mine]{margin-left:-1px}
@media(max-width:650px){.dock{width:calc(100% - 24px - var(--safe-left) - var(--safe-right))}.dock button{flex:1;width:auto;height:auto;min-height:60px;grid-template-rows:28px minmax(14px,auto);font-size:calc(11 * var(--text-unit))}.dock button[data-action=mine]{margin-left:-1px}}img[data-video-thumb]{display:block;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Both sea tools share one safe-area-aware alignment and hit target. */
.sea-tools{--sea-tools-offset:-4px;position:fixed;z-index:7;top:calc(var(--safe-top) + var(--page-header-height) + var(--sea-tools-offset));right:max(24px,var(--safe-right));display:flex;flex-direction:column;align-items:center;gap:2px}
.sea-tools button{display:grid;place-items:center;width:52px;height:52px;min-height:44px;padding:2px;border:0;background:transparent;box-shadow:none}
.sea-tools button:focus-visible{outline:none}
.sea-tools button:focus-visible :is(svg,canvas){filter:brightness(1.15) drop-shadow(0 0 2px #fff)}
.sea-tools svg{display:block;width:100%;height:100%}
body:is(.healing-mode,.calendar-mode) .sea-tools{display:none}
.browsing .sea-tools #header-search{visibility:hidden;pointer-events:none}
@media(max-width:650px){.sea-tools{--sea-tools-offset:4px;right:max(16px,var(--safe-right))}.sea-tools button{width:44px;height:44px;padding:4px}}

.dock .animal-sprite,.dock .paper-boat-icon,.dock .dock-detail-icon{display:block;justify-self:center;width:40px;height:32px;object-fit:contain;image-rendering:pixelated}
.dock button>span{display:block;line-height:calc(14 * var(--text-unit));min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center;align-self:center}
@media(max-width:650px){.dock .animal-sprite,.dock .paper-boat-icon,.dock .dock-detail-icon{width:36px;height:28px}}

/* Review variant: a pixel game toolbar with horizontal icon/label controls. */
body.dock-bar-preview .dock{inset:auto 0 0;width:100%;max-width:none;transform:none;gap:0;padding:6px max(10px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(10px,var(--safe-left));border-top:2px solid #294a70;background:linear-gradient(#e6f8ff,#b5dcec);box-shadow:inset 0 2px #fff,inset 0 -3px #7fa6bf}
body.dock-bar-preview .dock button{flex:1;width:auto;min-width:0;height:auto;min-height:48px;grid-template-columns:36px auto;grid-template-rows:1fr;justify-content:center;align-items:center;gap:6px;padding:4px 8px;font-size:calc(12 * var(--text-unit));line-height:calc(16 * var(--text-unit));border:2px solid #426384;background:#effaff;box-shadow:inset 2px 2px #fff,inset -2px -2px #b0cfdf}
body.dock-bar-preview .dock button[aria-pressed=true]{background:#acd7ed;box-shadow:inset 2px 2px #6b97b6,inset -2px -2px #e9faff}
body.dock-bar-preview .dock button[data-action=mine]{margin-left:-1px}
body.dock-bar-preview .dock :is(.animal-sprite,.paper-boat-icon,.dock-detail-icon){width:36px;height:30px}
@media(max-width:650px){body.dock-bar-preview .dock{padding-inline:max(6px,var(--safe-left));padding-top:4px;padding-bottom:calc(4px + var(--safe-bottom))}body.dock-bar-preview .dock button{grid-template-columns:24px auto;gap:3px;padding:4px;font-size:calc(11 * var(--text-unit));height:auto;min-height:44px}body.dock-bar-preview .dock :is(.animal-sprite,.paper-boat-icon,.dock-detail-icon){width:24px;height:24px}body.dock-bar-preview .dock button[data-action=mine]{margin-left:-1px}}

.feeling-stat>span{max-width:100%;white-space:normal;overflow-wrap:anywhere}

.browse-head #browse-close{align-self:flex-start;width:48px;height:30px;min-height:30px;padding:3px}

/* The invitation shares the preview's bottom anchor; extra lines grow upward. */
#reaching-welcome{container-type:inline-size;font-size:calc(18 * var(--text-unit))}
#reaching-welcome .welcome-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;box-shadow:none}
#reaching-welcome .welcome-layout{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;align-items:end;pointer-events:none}
#reaching-welcome img{display:block;align-self:end;image-rendering:pixelated}
#reaching-welcome .welcome-speech{position:relative;justify-self:start;align-self:start;display:grid;grid-template-columns:minmax(0,1fr) 22px;column-gap:10px;align-items:start;width:fit-content;max-width:100%;min-width:0;margin-bottom:30px;padding:12px 18px;border:1.5px solid var(--border);border-radius:10px;background:#f5fcff;box-shadow:3px 3px #5d8faf2e;line-height:1.5;word-break:keep-all;overflow-wrap:normal;hyphens:none}
#reaching-welcome .welcome-speech:before{content:"";position:absolute;left:-7px;bottom:10px;width:12px;height:12px;background:#f5fcff;border-bottom:1.5px solid var(--border);border-left:1.5px solid var(--border);transform:rotate(45deg)}
#reaching-welcome:has(.welcome-open:hover) .welcome-speech,#reaching-welcome:has(.welcome-open:hover) .welcome-speech:before{background:#fff}
/* Text and close control start on the same row; the hit area extends into the inset. */
#reaching-welcome .welcome-text{display:block;grid-column:1;grid-row:1;min-width:0}
#reaching-welcome .welcome-dismiss{position:relative;z-index:2;grid-column:2;grid-row:1;align-self:start;display:grid;justify-items:center;align-items:start;width:40px;height:40px;margin:0 -9px;padding:2px 9px 0;border:0;background:transparent;box-shadow:none;pointer-events:auto}
#reaching-welcome .welcome-dismiss svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
body:is(.browsing,.healing-mode,.calendar-mode) #reaching-welcome,body:has(#panel[open]) #reaching-welcome{display:none}
@container(max-width:13em){#reaching-welcome .welcome-layout{grid-template-columns:minmax(0,1fr);row-gap:8px}#reaching-welcome img{grid-column:1;grid-row:2}#reaching-welcome .welcome-speech{grid-column:1;grid-row:1;margin-bottom:0}#reaching-welcome .welcome-speech:before{left:24px;bottom:-7px;transform:rotate(-45deg)}}