*{box-sizing:border-box}body{margin:0;background:#071c26;color:#f3ede0;font-family:Arial,sans-serif;min-height:100svh;overflow:hidden}button,a,input,select{touch-action:manipulation}button,a{color:inherit}button{font:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #e7cea4;outline-offset:6px}#landscape,#film,.shade{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}#landscape{background:linear-gradient(#142e40 0%,#6b7e84 34%,#dbb899 51%,#79999e 52%,#174b5b 75%,#0a2637);transition:filter 1.5s}.sea{position:absolute;top:53%;width:150%;left:-25%;height:55%;background:repeating-radial-gradient(ellipse at 50% 0%,transparent 0 22px,#bec8be35 24px,transparent 27px 47px);transform:perspective(300px) rotateX(35deg);animation:tide 14s ease-in-out infinite alternate}.sun{position:absolute;top:39%;left:62%;width:45px;height:45px;border-radius:50%;background:#f8dcb1;box-shadow:0 0 90px 35px #efc59850}.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 17%,#fff8 50%,transparent),radial-gradient(1px 1px at 72% 11%,#fff8 50%,transparent),radial-gradient(2px 2px at 86% 26%,#fff8 50%,transparent)}.shade{background:linear-gradient(#06172455,transparent 45%,#021721cc);pointer-events:none}header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:36px 5vw}header a{text-decoration:none;font-size:24px}header a span{font-size:14px;letter-spacing:5px;margin-left:12px}header button{font-size:11px;letter-spacing:3px}main{position:relative;text-align:center;padding-top:13vh}.eyebrow{font-size:10px;letter-spacing:4px;color:#e9dcc8}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(54px,7vw,100px);line-height:1.08;margin:25px auto;max-width:850px}main p{font-size:13px;letter-spacing:1px;color:#e6e4dd}.primary{margin-top:27px;padding:17px 26px;border:1px solid #eee7d866;border-radius:30px;font-size:12px}.primary span{margin-left:30px}nav{position:fixed;bottom:100px;display:flex;justify-content:center;gap:65px;width:100%}nav button{font-size:22px;display:flex;gap:12px;align-items:center}nav span{font-size:12px;letter-spacing:1px}footer{position:fixed;bottom:30px;left:5vw;right:5vw;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px}footer button{font-size:11px;letter-spacing:0}#controls{position:fixed;bottom:165px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#071c2677;border:1px solid #fff2;border-radius:40px;padding:10px}#controls button{font-size:11px;padding:10px}dialog{background:#0d2530f5;color:#ede8dc;border:1px solid #ffffff30;border-radius:18px;padding:30px;width:min(560px,92vw);max-height:85svh;overflow:auto;box-shadow:0 30px 120px #0008}dialog::backdrop{background:#02111a77;backdrop-filter:blur(10px)}.dialoghead{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px}.close{font-size:27px}h2{font:normal 36px Georgia}dialog p{font-size:14px;line-height:1.7;color:#c1cace}label{display:block;font-size:13px;margin:22px 0 8px}input[type=range]{display:block;width:100%;margin-top:13px;accent-color:#d5bf97}input[type=file]{display:block;max-width:100%;margin-top:10px;font-size:11px}select{float:right;background:#183640;color:#eee;border:1px solid #567;padding:6px;border-radius:4px}.hint{font-size:11px!important;color:#99acb4!important}.check{margin:30px 0}summary{cursor:pointer;font-size:13px;padding:15px 0}#cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}#cards button{text-align:left;padding:26px 18px;background:linear-gradient(145deg,#446977,#122f3b);border:1px solid #ffffff25;border-radius:10px;min-height:110px;font:22px Georgia}#cards small{display:block;font:10px Arial;letter-spacing:1px;margin-top:12px;color:#c5d2d5}#restore{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);font-size:11px;opacity:.5}body.immersed header,body.immersed footer,body.immersed nav,body.immersed #controls,body.immersed main{visibility:hidden}#notice{position:fixed;top:90px;left:50%;transform:translateX(-50%);font-size:12px;background:#12343d;border-radius:20px;padding:12px 20px;display:none}body.paused .sea{animation-play-state:paused}body.deep #landscape{background:radial-gradient(ellipse at 60% -20%,#a3d1c5,#246879 35%,#042733 73%,#021b25)}body.deep .sun{display:none}body.deep .sea{top:0;opacity:.2}body.night #landscape{filter:brightness(.45) hue-rotate(15deg)}@keyframes tide{to{translate:3% 14px;scale:1.04}}@media(max-width:600px){header{padding:26px 6vw}header a span{font-size:11px;letter-spacing:3px}header button{font-size:9px}main{padding:14vh 20px 0}h1{font-size:56px}nav{gap:30px;bottom:100px}nav button{gap:8px}footer{bottom:24px;gap:18px}footer span{font-size:7px;max-width:100px;line-height:1.6}#controls{bottom:155px;padding:6px;width:max-content;max-width:96vw}#controls button{padding:8px;font-size:10px}}@media(prefers-reduced-motion:reduce){.sea{animation:none}}

#cards small{line-height:1.6;letter-spacing:.3px;text-transform:none}.shore,.aurora-veil{display:none;position:absolute;pointer-events:none}body.island .shore{display:block;bottom:0;left:0;width:100%;height:30%;background:linear-gradient(170deg,transparent 18%,#c1ac88 20%,#6a6b5c 75%);border-radius:60% 0 0 0}body.cove .shore{display:block;inset:28% 0 0;background:linear-gradient(110deg,#152f31 0 13%,transparent 13.5% 86%,#1a3534 86.5%);clip-path:polygon(0 0,20% 45%,80% 45%,100% 0,100% 100%,0 100%)}body.aurora #landscape{background:linear-gradient(#03141f,#103b42 50%,#12343f 51%,#061a27)}body.aurora .sun{display:none}body.aurora .aurora-veil{display:block;inset:2% -10% 48%;background:linear-gradient(115deg,transparent 25%,#62e0b355 34%,#a8f0c788 36%,transparent 42%,#6a75d459 55%,#78e2b663 59%,transparent 65%);filter:blur(20px);transform:skewY(-12deg);animation:aurora 18s ease-in-out infinite alternate}body.aurora .stars{opacity:1;background-size:270px 190px}body.paused .aurora-veil{animation-play-state:paused}@keyframes aurora{to{transform:skewY(5deg) translateX(4%);opacity:.65}}@media(prefers-reduced-motion:reduce){body.aurora .aurora-veil{animation:none}}

.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0}header a{display:inline-flex;align-items:center}nav .icon{width:24px;height:24px}#controls .icon,.primary .icon,footer .icon{width:15px;height:15px}.close .icon{width:22px;height:22px}

@media(max-width:600px){nav{gap:0;padding:0 12px;justify-content:space-around}nav button{flex-direction:column;gap:9px;min-width:64px;padding:8px 2px}nav span{font-size:11px}}

/* Controles distribuídos nas margens da paisagem. */
#controls{position:static;transform:none;left:auto;bottom:auto;width:auto;max-width:none;padding:0;background:none;border:0;border-radius:0;white-space:normal}
#controls button{position:fixed;display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:12px;color:#f3ede0;background:#071c2626;border:1px solid #ffffff20;border-radius:50%;backdrop-filter:blur(8px);font-size:11px}
#controls #pause{left:5vw;top:50%;width:44px;height:44px}

#controls #timerButton{right:5vw;top:90px;background:none;border-color:transparent;border-radius:24px;backdrop-filter:none}
#controls #quiet{left:50%;bottom:18px;transform:translateX(-50%);background:none;border-color:transparent;border-radius:24px;backdrop-filter:none}
#controls button:hover{background:#071c2666;border-color:#ffffff55}
@media(max-width:600px){
#controls #timerButton{top:68px;right:5vw;font-size:10px}
#controls #pause{top:auto;bottom:205px;left:6vw}

#controls #quiet{bottom:57px;font-size:10px;min-height:36px;padding:8px 12px}
}
@media(max-height:650px){main{padding-top:4vh}h1{font-size:clamp(38px,6vw,64px);margin:16px auto}}

#controls #pause{left:50%;right:auto;top:auto;bottom:205px;transform:translateX(-50%);width:48px;height:48px}

#poem{font-family:"aglet-mono",monospace;font-size:18px;font-weight:400;font-style:normal;line-height:1.9;letter-spacing:.04em;max-width:560px;margin:32px auto}#poem br{display:none}#poem br::after{content:" "}@media(max-width:600px){#poem{font-size:16px;max-width:320px;line-height:1.9}}

#poem{text-transform:lowercase}

#poem.welcome{font-family:Arial,sans-serif;font-size:10px;font-weight:400;letter-spacing:4px;text-transform:uppercase;line-height:1.9;color:#e9dcc8;max-width:560px}

/* Bloco de texto centralizado horizontalmente, um pouco acima do meio da paisagem. */
main{position:fixed;inset:0;padding:0;pointer-events:none}
#poem,#poem.welcome{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;width:calc(100% - 64px);max-width:560px;text-align:center;overflow-wrap:anywhere;pointer-events:auto}
#enter{position:absolute;top:calc(40% + 72px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;pointer-events:auto}
@media(max-width:600px){#poem{max-width:320px}#poem.welcome{max-width:calc(100% - 48px)}}


/* Preserve the line composition collected from the Instagram artwork. */
#poem:not(.welcome){white-space:pre;overflow-wrap:normal;word-break:normal;text-transform:none}

#ocean{position:absolute;inset:0;width:100%;height:100%;display:block}body.ocean-ready #landscape{filter:none;transition:none}body.ocean-ready #landscape>div{display:none}body.ocean-ready .shade{background:linear-gradient(#06172420,transparent 45%,#02172199)}

body.cove .shore{display:none}body.island .shore{height:10%;border-radius:0;background:linear-gradient(175deg,transparent 30%,#aa9677 35%,#6a695b)}
#cards button[aria-pressed="true"]{border-color:#d5bf97}#places .dialoghead{position:sticky;top:-30px;padding:12px 0;background:#0d2530;z-index:1}

#controls #another{left:50%;bottom:162px;transform:translateX(-50%);border:0;border-radius:20px;background:none;backdrop-filter:none;min-height:36px;padding:8px 14px;font-size:11px;opacity:.8}nav button[aria-pressed="true"]{color:#e7cea4}#controls #another:hover{opacity:1;background:#071c2644}

/* Pause remains centered; the change button sits alongside it. */
#controls #another{left:calc(50% + 60px);bottom:205px;transform:translateX(-50%);width:48px;height:48px;min-height:48px;padding:12px;border:1px solid #ffffff20;border-radius:50%;background:#071c2626;backdrop-filter:blur(8px);opacity:1}
#controls #another:hover{background:#071c2666;border-color:#ffffff55}

#poem:not(.welcome){font-size:14px}@media(max-width:600px){#poem:not(.welcome){font-size:12px}}

#welcomePanel{display:contents}
body:not(.contemplating) #welcomePanel{display:block;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:calc(100% - 48px);max-width:440px;pointer-events:auto}
#welcomeIntro p{font:400 10px/1.9 Arial,sans-serif;letter-spacing:4px;text-transform:uppercase;margin:0 0 15px;color:#e9dcc8}
body:not(.contemplating) #poem.welcome{position:static;transform:none;width:100%;max-width:none;margin:24px 0 0}
body:not(.contemplating) #enter{position:static;transform:none;margin:28px auto 0;white-space:normal}
@media(max-width:600px){#welcomeIntro p{letter-spacing:3px}body:not(.contemplating) #welcomePanel{top:39%}#poem.welcome{letter-spacing:3px}}

#enter{font:400 10px/1.9 Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}

body:not(.contemplating) .shade{background:linear-gradient(rgba(4,18,28,.38),rgba(4,18,28,.42) 45%,rgba(2,23,33,.65))}

#controls #pause{left:calc(50% - 30px)}
#controls #another{left:calc(50% + 30px)}

#poem:not(.welcome){max-width:760px;width:calc(100% - 48px);text-transform:lowercase}body button,dialog{ text-transform:lowercase } .footer-actions{display:flex;gap:18px;align-items:center}#share{display:flex;gap:6px;align-items:center}#shareLink{display:block;width:100%;margin-top:16px;padding:12px;background:#102e39;color:inherit;border:1px solid #fff3}#anchor .icon{overflow:visible}@media(max-width:600px){.footer-actions{gap:10px}#share span{display:none}#poem:not(.welcome){max-width:calc(100% - 48px)}}

#poem:not(.welcome){max-width:440px;white-space:pre-wrap;overflow-wrap:anywhere}

#about .artist-name{text-transform:uppercase}