:root{color-scheme:dark;--bg:#071116;--panel:#0a181e;--fg:#e2eeef;--muted:#90aeb5;--cyan:#8ee4df;--line:#25424a;--error:#f49caa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{color:inherit}a{text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.top{height:84px;border-bottom:1px solid var(--line);padding:0 4vw;display:flex;align-items:center;gap:30px;font:11px monospace;letter-spacing:1.5px}.brand{display:flex;gap:12px;align-items:center;font-size:13px}.brand strong{font-weight:400;color:var(--cyan)}.mark{font-size:22px;color:var(--cyan);margin-right:10px}.top-note{margin-left:auto;color:var(--muted)}#motion{background:none;border:1px solid var(--line);padding:10px 12px;font:10px monospace;letter-spacing:1px}.gate{min-height:calc(100svh - 133px);display:grid;grid-template-columns:55% 45%}.portrait{position:relative;border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:#09191f;min-height:610px}.portrait-label{display:flex;justify-content:space-between;padding:32px 7%;color:var(--muted);font:10px monospace;letter-spacing:2px;z-index:1}.character{position:absolute;inset:7% 2% 3%;display:grid;place-items:center}.character img{width:100%;height:100%;max-height:680px;object-fit:contain;position:relative;filter:drop-shadow(0 12px 32px #0008);animation:breathe 9s ease-in-out infinite}.halo{position:absolute;width:65%;aspect-ratio:1;border:1px solid #39777d38;border-radius:50%;box-shadow:0 0 90px #427f7c10,inset 0 0 100px #427f7c0b}.halo:before,.halo:after{content:'';position:absolute;inset:10%;border:1px dashed #39646c33;border-radius:50%}.halo:after{inset:-8%;border-style:solid;border-color:#39646c19}.portrait-caption{padding:32px 7%;position:relative;z-index:1;background:#09191fe8;max-width:58%;backdrop-filter:blur(4px);border-right:1px solid #25424a77;display:flex;align-items:flex-start;gap:20px; margin-top:auto}.cross{color:var(--cyan);font:26px monospace}.portrait-caption h2{margin:0;font-size:24px;line-height:1.25;font-weight:400;letter-spacing:-.7px}.portrait-caption p{font:9px monospace;letter-spacing:2px;color:var(--muted);margin:16px 0 0}.access{display:flex;align-items:center;padding:65px 13%}.access-inner{width:100%;max-width:380px}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--cyan);margin:0 0 26px}.eyebrow span{margin-right:12px}h1{font-size:clamp(50px,5.1vw,78px);line-height:.99;letter-spacing:-4px;font-weight:400;margin:0 0 28px}.dot{color:var(--cyan)}.intro{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 42px}label{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1.1px;gap:12px;margin-bottom:13px}label span{color:var(--muted)}input{width:100%;height:64px;background:#0c1b21;border:1px solid #35545d;color:var(--cyan);padding:0 18px;font:26px monospace;letter-spacing:14px;border-radius:0}input::placeholder{color:#72949c}input:focus{border-color:var(--cyan)}.hint{font:10px monospace;line-height:1.7;color:var(--muted);margin:12px 0 23px}.enter{display:flex;justify-content:space-between;align-items:center;width:100%;height:54px;padding:0 20px;background:var(--cyan);color:#07181a;border:1px solid var(--cyan);font:11px monospace;letter-spacing:1px;transition:background .2s}.enter:hover{background:#b6efeb}.enter span:last-child{font-size:22px}#status{min-height:38px;margin:15px 0 0;font:11px monospace;line-height:1.6;color:var(--muted)}#status[data-state=error]{color:var(--error)}#status[data-state=success]{color:var(--cyan)}.security{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:14px;align-items:flex-start;font:9px monospace;letter-spacing:.8px;margin-top:22px;color:var(--muted)}.security>span{font-size:18px;color:var(--cyan)}.security small{display:block;font-size:9px;line-height:1.7;letter-spacing:0;margin-top:8px}footer{height:49px;border-top:1px solid var(--line);padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:12px;font:9px monospace;letter-spacing:1px;color:var(--muted)}body[data-paused=true] .character img{animation-play-state:paused}body[data-hidden=true] .character img{animation-play-state:paused}.character img{grid-area:1/1}.character canvas{grid-area:1/1;position:relative;width:100%;height:100%;max-height:680px;pointer-events:none;animation:breathe 9s ease-in-out infinite}body[data-paused=true] .character canvas,body[data-hidden=true] .character canvas,body[data-interacting=true] .character img,body[data-interacting=true] .character canvas,body[data-offscreen=true] .character img,body[data-offscreen=true] .character canvas{animation-play-state:paused}@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:1700px){.access{padding-left:15%;padding-right:15%}.access-inner{max-width:430px}}@media(max-width:850px){.top-note{display:none}.top{justify-content:space-between}.gate{grid-template-columns:46% 54%}.access{padding:45px 9%}.portrait-caption h2{font-size:20px}.portrait-label span:last-child{display:none}h1{font-size:58px}.character{inset:12% -20% 8%}.portrait{min-height:650px}footer span:last-child{display:none}}@media(max-width:600px){.top{height:68px;padding:0 22px;gap:8px}.brand{font-size:10px;gap:7px}.mark{margin:0;font-size:18px}#motion{font-size:8px;padding:9px 7px;letter-spacing:0}.gate{grid-template-columns:1fr;min-height:0}.portrait{min-height:290px;height:290px;border-right:0;border-bottom:1px solid var(--line)}.portrait-label{padding:20px 24px}.character{inset:-14% -8% -30%;left:18%}.portrait-caption{padding:24px;max-width:60%;background:#09191fcc;backdrop-filter:blur(4px);border-right:1px solid #25424a77}.portrait-caption h2{font-size:19px}.portrait-caption p{font-size:8px;line-height:1.7}.cross{display:none}.access{padding:38px 26px 28px}.access-inner{max-width:none}h1{font-size:50px;letter-spacing:-2px}.intro{margin-bottom:28px}.eyebrow{margin-bottom:18px}footer{height:auto;min-height:58px;padding:14px 24px;font-size:8px;align-items:flex-start}footer span:nth-child(2){max-width:150px;text-align:right}.security{margin-top:8px}}
/* Quiet Resonance: one visual system, no whole-PNG floating. */
.character img,.character canvas{animation:none!important;transform:none!important}
.halo{display:none}
body[data-paused="true"] .character img,body[data-paused="true"] .character canvas{animation-play-state:paused!important}
#sound{background:none;border:1px solid var(--line);padding:10px 12px;font:10px monospace;letter-spacing:1px;white-space:nowrap}
@media(max-width:600px){.top{gap:5px;padding:0 12px}.brand{gap:4px}#sound{font-size:8px;padding:9px 5px;letter-spacing:0}.mark{display:none}}
#resonance{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.character{z-index:1}.portrait-caption{z-index:2}.portrait-label{position:relative}
.portrait:after{content:'';position:absolute;right:0;top:12%;height:65%;width:1px;background:linear-gradient(transparent,#87ded7,transparent);opacity:.18;pointer-events:none;z-index:3;transition:opacity .25s}
body[data-resonance="focus"] .portrait:after,body[data-resonance="input"] .portrait:after{opacity:.8}
body[data-resonance="pending"] .enter{border-color:#8ee4df;background:#153038}
body[data-resonance="success"] .portrait:after{opacity:1;width:3px;box-shadow:0 0 40px 8px #8ee4df55}
body[data-resonance="success"] .access-inner{animation:threshold .36s ease-out both}
@keyframes threshold{to{opacity:0;transform:translateX(12px)}}
@media(prefers-reduced-motion:reduce){body[data-resonance="success"] .access-inner{animation:none}.portrait:after{transition:none}}
body[data-paused="true"] .access-inner{animation:none}
/* Full-bleed tableau: the footer, not an internal caption lane, crops the art. */
@media(min-width:851px){.portrait{min-height:0}.character{inset:auto auto -12px 0;width:min(100%,calc((100svh - 133px) * .96));height:auto;aspect-ratio:667/680;display:block}.character img{display:block;width:100%;height:100%;max-height:none;min-height:0;min-width:0}.character canvas{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;min-width:0}.halo{left:17.5%;top:12%}.portrait-caption{position:absolute;bottom:0;left:0;right:0;max-width:none;margin:0;background:linear-gradient(0deg,#09191f88,transparent);backdrop-filter:none;border:0;padding:32px 7%;text-shadow:0 2px 8px #000}.access{align-items:flex-start;padding:65px 13%}.access-inner{max-width:380px}}
@media(min-width:1700px){.access-inner{max-width:380px}.access{padding-left:13%;padding-right:13%}}
@media(min-width:851px) and (max-height:800px){.top{height:68px}footer{height:42px}.gate{min-height:calc(100svh - 110px)}.access{padding:16px 13%}h1{font-size:48px;margin-bottom:16px;letter-spacing:-2px}.eyebrow{margin-bottom:14px}.intro{line-height:1.5;margin-bottom:16px}label{margin-bottom:10px}input{height:54px}.hint{margin:8px 0 12px}.enter{height:48px}#status{min-height:26px;margin-top:10px}.security{padding-top:12px;margin-top:10px}.security small{margin-top:6px}}
@media(max-width:600px){.character{inset:40px 0 76px}.portrait-caption{max-width:none;background:none;backdrop-filter:none;border:0;padding:14px 24px}.portrait-caption h2{font-size:16px}.portrait-caption p{display:none}}