body.portal:before{content:'';position:fixed;z-index:6;pointer-events:none;left:65%;top:45%;width:20px;height:20px;border:8px solid #dcfff3aa;border-radius:50%;animation:ripple 1.3s ease-out forwards}@keyframes ripple{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(130);opacity:0}}
:root{font-family:Arial,sans-serif;color:#f9f2df;background:#174f59;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:pan-y}body:after{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,47,54,.7),transparent 65%),linear-gradient(0deg,rgba(9,41,48,.6),transparent 22%);z-index:1}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:3px solid #f8d7a2;outline-offset:5px}button:disabled{opacity:.4;cursor:wait}header{position:fixed;z-index:4;left:5vw;right:5vw;top:32px;display:flex;justify-content:space-between;align-items:start}.brand{font-size:10px;letter-spacing:.22em;text-decoration:none;color:inherit;line-height:1.9}.brand span{display:block;font-size:13px;letter-spacing:.29em}.tools{display:flex;gap:9px}.tools button{padding:11px 15px;background:#153b4266;border:1px solid #f7e9ce50;border-radius:40px;font-size:12px}.tools button[aria-pressed=true]{background:#f0d5ac;color:#244b51}main{position:fixed;z-index:3;left:9vw;top:32%;max-width:480px;transition:opacity .35s,transform .35s}.eyebrow{font-size:10px;letter-spacing:.28em;color:#f4d7a7;margin-bottom:24px}h1{font:normal clamp(44px,5.4vw,78px)/1.06 Georgia,serif;letter-spacing:-.045em;margin:0 0 24px;max-width:520px}main p{font-size:16px;line-height:1.75;max-width:340px;color:#e0e7db;margin:0 0 26px}.primary{background:#f6dfb5;color:#23454b;padding:16px 24px;border-radius:3px;min-width:165px;text-align:left;font-size:14px;box-shadow:0 6px 28px #0d424a20}.primary span{float:right;margin-left:30px}.primary:hover{background:#fff0ce;transform:translateY(-2px)}main .hint{font-size:11px;letter-spacing:.035em;margin:16px 0;color:#d2dfd4}footer{position:fixed;z-index:4;bottom:26px;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.07em}footer i{font-style:normal;opacity:.5;margin:0 12px}footer nav{display:flex;gap:10px}.dot{width:22px;height:22px;background:transparent;position:relative;padding:0}.dot:after{content:'';width:5px;height:5px;position:absolute;left:8px;top:8px;border:1px solid #f8e3bd;border-radius:50%}.dot.active:after{background:#f8e3bd;box-shadow:0 0 0 4px #f8e3bd20}#skip{background:none;font-size:11px;padding:10px 0}.world-target{position:fixed;z-index:4;left:62%;top:64%;padding:13px 18px;background:#fcf0ddee;color:#345660;border-radius:30px;box-shadow:0 0 0 7px #fcf0dd20;font-size:12px}.world-target span{margin-left:8px}#loading{position:fixed;inset:0;background:#174f59;z-index:8;display:grid;place-content:center;text-align:center;font:30px Georgia}#loading span{display:block;font:12px Arial;letter-spacing:.13em;margin-top:20px}#loading[hidden],[hidden]{display:none!important}#letter{position:fixed;z-index:5;right:8vw;top:16%;width:min(450px,44vw);max-height:73vh;overflow:auto;background:#fff2db;color:#345152;padding:32px 36px;box-shadow:0 20px 80px #092f4555;transform:rotate(1deg);border-radius:2px}.letter-meta{font:9px Arial;letter-spacing:.15em;border-bottom:1px solid #42606425;padding-bottom:18px;display:flex;justify-content:space-between}h2{font:normal 31px Georgia;margin:24px 0 20px}.letter-body{font:15px/1.7 Georgia,serif}.letter-body p{margin:0 0 17px}#fold{border-top:1px solid #42606425;padding:16px 0 0;background:none;color:#306268;width:100%;text-align:left;font-size:12px}#fold span{float:right}#bubbles{position:fixed;z-index:3;left:51%;top:26%;display:grid;gap:18px;pointer-events:none}#bubbles span{background:#e1f4e8d9;border:1px solid #e5fff8;color:#2e6266;padding:12px 18px;border-radius:25px;font:14px Georgia;box-shadow:0 8px 40px #1b657633;animation:arrive 1s both}#bubbles span:nth-child(2){margin-left:30px;animation-delay:.6s}#bubbles span:nth-child(3){animation-delay:1.2s}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}#error{position:fixed;z-index:20;inset:20%;padding:30px;background:#fff2db;color:#345152}body.letter-open main{left:7vw;max-width:300px}body.letter-open h1{font-size:48px}body.letter-open .hint{max-width:240px}
@media(max-width:650px){header{top:22px;left:24px;right:24px}.brand{font-size:8px}.brand span{font-size:10px}.tools button{padding:10px 12px}.tools span{display:none}main{left:28px;right:28px;top:auto;bottom:100px;max-width:340px}h1{font-size:46px;margin-bottom:14px;max-width:330px}.eyebrow{margin-bottom:15px;font-size:9px}main p{font-size:14px;margin-bottom:16px;max-width:300px}.hint{font-size:10px!important}footer{left:25px;right:25px;bottom:18px;flex-wrap:wrap;gap:8px}#episode{width:100%;font-size:8px}footer nav{gap:4px}#skip{font-size:10px}.world-target{left:auto;right:26px;top:38%;font-size:11px}#letter{top:16%;left:20px;right:20px;width:auto;max-height:70vh;padding:24px 27px;transform:none}.letter-body{font-size:14px;line-height:1.6}.letter-meta{font-size:8px}body.letter-open main{display:none}#bubbles{top:21%;left:22%;right:20px;gap:10px}#bubbles span{font-size:12px}body:after{background:linear-gradient(0deg,#143e49e6,transparent 75%)}.primary{padding:14px 20px}}
/* The story sits in the margin like a book dedication, leaving the figure room. */
@media(min-width:651px){main{left:7vw;max-width:370px;top:35%}h1{font-size:clamp(42px,4.5vw,65px)}main p{font-size:15px;max-width:295px}header{top:26px}.primary{border-radius:24px;padding:14px 23px}.eyebrow{margin-bottom:18px}body:after{background:linear-gradient(90deg,rgba(15,47,54,.64),transparent 54%),linear-gradient(0deg,rgba(9,41,48,.42),transparent 17%)}}
@media(max-width:650px){h1{font-size:40px}main{bottom:97px}.primary{border-radius:24px}main .hint{max-width:270px}}
/* Mobile: illustration and story have separate space; camera uses canvas aspect. */
@media (max-width:650px), (max-height:500px) and (pointer:coarse){
html,body{width:100%;height:100%;height:100dvh;overscroll-behavior:none}body{--edge:20px;--safe-bottom:env(safe-area-inset-bottom,0px)}
#ocean{height:var(--scene-height,56dvh);touch-action:manipulation}body:after{bottom:auto;height:var(--scene-height,56dvh);background:linear-gradient(180deg,#133f4938,transparent 30%,transparent 75%,#174f59)}
header{top:max(12px,env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));right:max(var(--edge),env(safe-area-inset-right));align-items:center}.brand{font-size:8px}.brand span{font-size:10px}.tools{gap:6px}.tools button{min-width:44px;min-height:44px;padding:10px;font-size:16px;background:#174f5980}.tools span{display:none}
main{top:auto;bottom:calc(68px + var(--safe-bottom));left:var(--edge);right:var(--edge);max-width:none;padding:16px 0 0;transition:none}.eyebrow{font-size:9px;margin:0 0 9px;letter-spacing:.21em}h1{font-size:clamp(30px,8.2vw,38px);max-width:100%;margin:0 0 10px;line-height:1.08}main p{font-size:14px;line-height:1.5;max-width:100%;margin:0 0 14px}.primary{width:100%;min-height:48px;border-radius:26px;padding:14px 20px;font-size:14px}main .hint{font-size:10px!important;line-height:1.4;max-width:100%;margin:10px 0 0}
footer{left:var(--edge);right:var(--edge);bottom:var(--safe-bottom);height:60px;gap:0;flex-wrap:nowrap;border-top:1px solid #f4dfba25}#episode{display:none}footer nav{gap:0}.dot{width:36px;height:44px}.dot:after{left:16px;top:20px}.dot.active:after{width:6px;height:6px}#skip{min-height:44px;font-size:10px;padding:8px 0 8px 8px;letter-spacing:0}
.world-target{min-height:44px;left:50%;right:auto;top:calc(var(--scene-height,56dvh) - 56px);transform:translateX(-50%);white-space:nowrap;font-size:11px;padding:12px 18px;box-shadow:0 0 0 4px #fcf0dd20}
#bubbles{top:max(74px,calc(env(safe-area-inset-top) + 62px));left:20px;right:auto;gap:6px;max-width:220px}#bubbles span{font-size:12px;padding:8px 12px;box-shadow:none}#bubbles span:nth-child(2){margin-left:12px}
#letter{top:max(76px,calc(env(safe-area-inset-top) + 64px));bottom:calc(70px + var(--safe-bottom));left:14px;right:14px;width:auto;max-height:none;padding:24px;transform:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-padding:24px}.letter-meta{font-size:9px;line-height:1.5;padding-bottom:16px}h2{font-size:30px;margin:20px 0}.letter-body{font-size:16px;line-height:1.65}.letter-body p{margin-bottom:18px}#fold{min-height:48px;padding:16px 0;font-size:13px}body.letter-open main{display:none}body.letter-open #target{display:none}#error{inset:80px 20px;overflow:auto;font-size:14px}
}
@media(max-width:650px) and (max-height:760px){main{padding-top:12px}h1{font-size:30px}main .hint{display:none}main p{margin-bottom:12px}}
@media(max-height:500px) and (min-width:651px){
#ocean{left:42%;width:58%;height:100dvh}body:after{left:42%;height:100dvh;background:linear-gradient(90deg,#174f59,transparent 30%)}header{top:max(8px,env(safe-area-inset-top))}.brand{font-size:7px}.brand span{font-size:9px}
main{left:max(20px,env(safe-area-inset-left));right:auto;width:38%;bottom:62px;top:auto;padding:0}h1{font-size:30px}main p{font-size:13px;margin-bottom:12px}main .hint{display:none}.eyebrow{font-size:8px;margin-bottom:8px}footer{height:52px}#skip{font-size:11px}footer nav{gap:8px}.dot{width:36px}.world-target{left:72%;top:auto;bottom:68px}#bubbles{left:46%;top:74px}#letter{left:20%;right:20%;top:62px;bottom:62px;padding:20px 28px}.letter-body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}