@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root{--paper:#dedbd0;--ink:#34352f;--muted:#56574e;--line:#a9a89a;--accent:#87513f;--mono:'Roboto Mono',monospace;--sans:'Barlow','Arial',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100svh}body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:6;opacity:.1;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#77776c 4px,transparent 5px)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border-radius:0}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}button:disabled{cursor:wait}button{min-height:44px}button:hover{filter:brightness(.92)}.page-frame{margin:0 4.2%;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:100svh;padding:0 3.2%;display:flex;flex-direction:column}header{height:128px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:40px}.wordmark{text-decoration:none;font-size:36px;font-weight:600;letter-spacing:2px;line-height:1}.wordmark>span{font-size:25px}.wordmark small{display:block;font:8px var(--mono);letter-spacing:1.6px;margin-top:10px}.header-label{margin-left:auto;text-align:right;font:10px var(--mono);letter-spacing:1.2px}.header-label span{display:block;color:var(--muted);font-size:9px;margin-top:8px}.motion-toggle{margin-left:12px;display:flex;gap:12px;align-items:center;background:transparent;border:1px solid var(--line);padding:0 14px;font:9px var(--mono)}.pause-icon{font-size:20px}main{flex:1;display:flex;flex-direction:column}.section-marker{margin-top:30px;display:flex;align-items:center;gap:12px;font:10px var(--mono);letter-spacing:1px}.square{width:8px;height:8px;background:var(--ink)}.marker-line{height:1px;background:var(--line);flex:1}.section-marker>span:last-child{font-size:9px;color:var(--muted)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3%;align-items:center;padding:64px 0 55px;flex:1}.eyebrow{font:9px var(--mono);letter-spacing:1.2px;color:var(--muted);margin:0 0 20px}h1{font-size:clamp(65px,7.5vw,118px);font-weight:500;letter-spacing:-4px;line-height:.91;margin:0 0 27px}h1>span{font-weight:700}.title-period{color:var(--accent)}.subtitle{font:9px var(--mono);letter-spacing:.6px;display:flex;align-items:center;gap:10px;margin-bottom:33px}.subtitle>span{font-size:7px}.warning{border-top:1px solid var(--line);padding-top:24px;display:flex;gap:15px}.warning-icon{border:1px solid var(--accent);color:var(--accent);width:25px;height:25px;flex-shrink:0;display:grid;place-items:center;font:18px var(--mono)}.warning h2{font-size:17px;font-weight:600;margin:0 0 8px}.warning p{font-size:15px;line-height:1.65;margin:0;color:var(--muted)}.warning strong{color:var(--ink);font-weight:600}.instruction{font-size:13px;line-height:1.7;color:var(--muted);margin:22px 0 29px}.actions{display:flex;gap:15px}.primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink);display:flex;align-items:center;gap:13px;padding:0 18px;min-height:49px;font:10px var(--mono);letter-spacing:1px;position:relative;transition:background .2s,transform .2s}.primary:hover{background:#4e4f46;transform:translateY(-2px)}.button-square{width:7px;height:7px;background:currentColor}.button-end{font-size:21px;margin-left:30px}.secondary{display:flex;align-items:center;gap:27px;background:transparent;color:var(--ink);border:1px solid var(--line);padding:0 17px;font:9px var(--mono);letter-spacing:.6px}.secondary>span{font-size:18px}.access-note{margin-top:19px;font:8px var(--mono);letter-spacing:.7px;color:var(--muted);display:flex;align-items:center;gap:8px}.access-note>span{font-size:14px}.visual{align-self:center;min-width:0;padding-left:12px}.visual-top{display:flex;justify-content:space-between;gap:15px;font:8px var(--mono);letter-spacing:.6px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px}.scanner{position:relative;width:100%;aspect-ratio:1;margin:25px 0;display:grid;place-items:center}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%}.orbit-outer{inset:4%;border:1px dashed #a3a395;animation:orbit 100s linear infinite}.orbit-outer::before{content:'';position:absolute;inset:12px;border:1px solid var(--line);border-radius:50%}.orbit-inner{inset:16%;border:1px solid #8e8f80}.orbit-inner::after{content:'';position:absolute;inset:12px;border:1px dashed var(--line);border-radius:50%}.crosshair{position:absolute;background:var(--line);opacity:.7}.horizontal{width:100%;height:1px}.vertical{height:100%;width:1px}.coordinate{position:absolute;font:8px var(--mono);background:var(--paper);padding:6px}.north{top:0}.south{bottom:0}.east{right:0}.west{left:0}.core-outline{position:absolute;width:42%;height:42%;border:1px solid var(--ink);transform:rotate(45deg)}.core{width:37%;height:37%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--paper);position:relative;z-index:2;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.core-symbol{font-size:43px;line-height:1;margin-bottom:10px}.core>span:not(.core-symbol){font:8px var(--mono);letter-spacing:2px}.core strong{font:12px var(--mono);letter-spacing:2px;margin-top:5px}.scan-sweep{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,#34352f12 350deg,#34352f24 359deg,transparent 360deg);animation:orbit 12s linear infinite}.orbit-tick{position:absolute;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}.tick-one{top:18%;right:18%}.tick-two{bottom:18%;left:18%;width:6px;height:6px}.visual-bottom{display:flex;align-items:center;justify-content:space-between;text-align:center;font:10px var(--mono);letter-spacing:1.1px}.visual-bottom div span{display:block;font:11px var(--sans);letter-spacing:.2px;color:var(--muted);margin-top:8px}.visual-bracket{font-size:28px;color:var(--muted)}.visual-caption{text-align:center;font:8px var(--mono);color:var(--muted);margin-top:24px}.bottom-band{display:flex;align-items:center;gap:24px;background:#d2cfc3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 17px;margin-bottom:25px}.band-label{font:9px var(--mono);letter-spacing:1px;white-space:nowrap}.bottom-band p{margin:0;font-size:12px;color:var(--muted)}.band-mark{margin-left:auto;font-size:16px;white-space:nowrap}footer{border-top:1px solid var(--ink);padding:22px 0 25px;display:flex;justify-content:space-between;gap:20px;font:8px var(--mono);letter-spacing:.7px;color:var(--muted)}.footer-slash{padding:0 9px}.footer-center{font-family:var(--sans);font-style:italic;font-size:12px;letter-spacing:.4px}footer>span:last-child>span{margin-left:12px;color:var(--ink)}.boot{position:fixed;inset:0;z-index:20;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;animation:boot-out .65s 1s forwards;pointer-events:none}.boot>span{font-size:65px;letter-spacing:5px}.boot small{font:9px var(--mono);letter-spacing:2px}.boot-track{height:1px;width:220px;background:#77796b;margin:25px 0;position:relative;overflow:hidden}.boot-track::after{content:'';position:absolute;inset:0;background:var(--paper);transform-origin:left;animation:load 1s ease forwards}.message{animation:reveal .8s 1.15s both}.visual{animation:reveal 1s 1.3s both}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:0;max-width:530px;width:calc(100% - 40px)}dialog::backdrop{background:#262720b8;backdrop-filter:blur(3px)}.dialog-top{background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:10px var(--mono)}.dialog-top button{background:transparent;color:var(--paper);border:0;font-size:26px;width:44px}.dialog-body{padding:32px}.dialog-body h2{font-size:35px;letter-spacing:-1px;margin:0 0 22px}.dialog-body>p:not(.eyebrow){font-size:16px;line-height:1.65}.disclaimer{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;line-height:1.65;margin:25px 0}.disconnected{position:fixed;inset:0;z-index:10;background:var(--paper);display:grid;place-items:center;padding:30px}.disconnected[hidden]{display:none}.disconnect-content{width:min(600px,100%)}.disconnect-content h2{font-size:clamp(45px,8vw,90px);line-height:1;letter-spacing:-3px;margin:0 0 28px}.disconnect-content>p:not(.eyebrow){color:var(--muted);line-height:1.7}.disconnect-content button{margin:25px 0}.disconnect-content small{font:9px var(--mono);color:var(--muted)}.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}.paused .boot{display:none}.paused .message,.paused .visual{opacity:1;transform:none}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes boot-out{to{opacity:0;visibility:hidden}}@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.owner-identity{display:flex;align-items:center;gap:14px;margin-top:23px}.unit-code{font-size:32px;font-weight:600;line-height:1;border-right:1px solid var(--line);padding-right:14px}.owner-identity div>span{display:block;font:8px var(--mono);letter-spacing:.6px;color:var(--muted);margin-bottom:5px}.owner-identity strong{font-size:17px;font-weight:500}.owner-identity+.instruction{margin-top:15px}
@media(min-width:701px){.page-frame{height:100vh;height:100svh;min-height:0}header{height:clamp(64px,11vh,100px);flex-shrink:0}main{min-height:0;overflow:visible}.section-marker{margin-top:clamp(12px,2.5vh,24px);flex-shrink:0}.hero{padding:clamp(12px,3vh,30px) 0;min-height:0}.visual{width:min(100%,46vh,460px);justify-self:center}.scanner{margin:16px 0}h1{font-size:clamp(54px,min(7.5vw,12vh),110px);margin-bottom:22px}.eyebrow{margin-bottom:15px}.warning{padding-top:16px}.warning p{line-height:1.5}.owner-identity{margin-top:16px}.instruction{margin-bottom:18px}.access-note{margin-top:14px}footer{padding:16px 0;flex-shrink:0}}
@media(min-width:701px) and (max-height:650px){header{height:64px}.hero{padding:12px 0}.eyebrow{margin-bottom:10px}h1{font-size:clamp(45px,10vh,65px);margin-bottom:16px}.warning{padding-top:12px}.warning h2{font-size:15px;margin-bottom:5px}.warning p{font-size:13px}.owner-identity{margin-top:12px}.unit-code{font-size:26px}.owner-identity strong{font-size:15px}.instruction{font-size:12px;margin:10px 0 12px}.primary{min-height:44px}.access-note{margin-top:10px}footer{padding:12px 0}}
@media(min-width:701px){.page-frame{width:calc(100% - 64px);max-width:1120px;margin:0 auto;padding:0 36px}header{height:clamp(64px,9vh,84px)}.hero{grid-template-columns:1.1fr 1fr;gap:36px;width:100%;max-width:940px;margin:0 auto}.visual{width:min(100%,40vh,360px);padding-left:0}h1{font-size:clamp(54px,min(7vw,10vh),88px)}.warning p{font-size:14px}.instruction{font-size:12px}.owner-identity{margin-top:14px}.visual-top{font-size:7px}.visual-bottom{font-size:9px}.eyebrow{font-size:8px;letter-spacing:.6px}}
@media(max-width:1050px){.hero{gap:4%}.eyebrow{font-size:8px}.actions{flex-wrap:wrap}.primary{flex:1;justify-content:center}.secondary{justify-content:center}.visual-top{font-size:7px}.core-symbol{font-size:32px}.core strong{font-size:10px}.visual-caption{font-size:7px}.desktop-break{display:none}h1{letter-spacing:-3px}}
@media(max-width:700px){.page-frame{margin:0 16px;padding:0 20px}header{height:100px;gap:15px}.wordmark{font-size:30px}.wordmark small{font-size:6px;letter-spacing:1px}.header-label{display:none}.motion-toggle{margin-left:auto;padding:0 10px}.motion-label{font-size:8px}.section-marker{font-size:8px;gap:8px;margin-top:22px}.section-marker>span:last-child{font-size:7px}.hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:35px;gap:45px}h1{font-size:clamp(62px,14vw,96px)}.eyebrow{font-size:8px;letter-spacing:.6px}.subtitle{font-size:7px;letter-spacing:.3px;margin-bottom:25px}.warning h2{font-size:16px}.warning p{font-size:14px}.actions{gap:10px;flex-wrap:nowrap}.primary{font-size:9px;padding:0 12px;gap:8px}.button-end{margin-left:8px}.secondary{font-size:8px;padding:0 12px;gap:12px}.visual{padding:0;width:min(390px,100%);justify-self:center}.core-symbol{font-size:38px}.visual-top{font-size:8px}.visual-caption{font-size:7px}.bottom-band{gap:12px;padding:14px 10px}.bottom-band p{font-size:11px;line-height:1.5}.band-label{font-size:8px}.band-mark{display:none}footer{flex-wrap:wrap;font-size:7px;gap:14px}.footer-center{order:3;width:100%;text-align:center;margin-top:8px}footer>span:last-child{margin-left:auto;letter-spacing:0}.dialog-body{padding:24px}.dialog-body h2{font-size:30px}}
.orbit-outer{animation:orbit 4s ease-out 1}.scan-sweep{animation:orbit 4s ease-out 1}.primary[aria-busy="true"] .button-square{background:transparent;border:1px solid currentColor;animation:orbit .7s linear infinite}
.core-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.core .core-symbol{font-size:26px;line-height:1;margin:0}.core .core-label{font:500 8px/1.35 var(--mono);letter-spacing:.8px}.title-cursor{display:inline-block;width:3px;height:.75em;margin-left:9px;background:var(--accent);vertical-align:-.015em;animation:cursor-blink 1.2s step-end infinite}#disconnect:not([aria-busy="true"]){animation:disconnect-pulse 3.2s ease-in-out infinite}#disconnect[aria-busy="true"]{animation:none}#disconnect:hover{animation:none;background:#4e4f46}
@keyframes cursor-blink{0%,45%{opacity:1}46%,100%{opacity:0}}@keyframes disconnect-pulse{0%,100%{background:var(--ink)}50%{background:#505248}}
dialog{max-width:560px;overflow:hidden}dialog::backdrop{background:#262720a6;backdrop-filter:none}dialog[open]{animation:menu-open .42s cubic-bezier(.2,.8,.2,1) both}dialog[open]::backdrop{animation:menu-backdrop .25s ease-out both}dialog[open] .dialog-body{animation:menu-content .22s .22s ease-out both}.dialog-top{border-bottom:3px double var(--paper)}.dialog-body .primary{width:100%;justify-content:flex-start}.dialog-body .primary:hover{transform:none}dialog[open].closing{animation:menu-close .22s ease-in both}dialog[open].closing::backdrop{animation:menu-backdrop .22s ease-in reverse both}dialog[open].closing .dialog-body{animation:none}
@keyframes menu-open{0%{clip-path:inset(49.5% 50%);opacity:1}40%{clip-path:inset(49.5% 0)}100%{clip-path:inset(0 0)}}@keyframes menu-close{0%{clip-path:inset(0 0)}65%{clip-path:inset(49.5% 0);opacity:1}100%{clip-path:inset(49.5% 50%);opacity:0}}@keyframes menu-content{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}@keyframes menu-backdrop{from{background:#26272000}to{background:#262720a6}}
body{background:#3b3c35}.page-frame{background:var(--paper)}
@media(min-width:1051px){.hero{max-width:1020px;gap:42px}.visual{width:min(100%,44vh,400px)}h1{font-size:clamp(65px,min(8vw,11vh),98px)}.warning h2{font-size:18px}.warning p{font-size:15px}.owner-identity strong{font-size:18px}.instruction{font-size:13px}.actions button{min-height:52px}}
@media(min-width:701px) and (max-height:650px){h1{font-size:clamp(45px,10vh,65px)}}
/* Information hierarchy: title, section headings, body, controls, metadata. */
:root{
  --type-title:clamp(64px,min(7.5vw,10vh),92px);
  --type-heading:18px;
  --type-body:15px;
  --type-control:11px;
  --type-label:10px;
  --type-caption:9px;
}
h1{font-size:var(--type-title);line-height:.96;letter-spacing:-.045em;font-weight:500}
.wordmark{font-size:36px;line-height:1}
.wordmark>span{font-size:.7em}
.wordmark small{font-size:var(--type-caption);line-height:1.5;letter-spacing:.12em}
.header-label,.section-marker,.eyebrow,.owner-identity div>span,.visual-top,.visual-bottom,.dialog-top{font-size:var(--type-label);line-height:1.5;letter-spacing:.06em}
.header-label span,.section-marker>span:last-child,.access-note,footer,.coordinate{font-size:var(--type-caption);line-height:1.5;letter-spacing:.04em}
.warning h2,.owner-identity strong{font-size:var(--type-heading);line-height:1.35;font-weight:600}
.warning p,.instruction,.dialog-body>p:not(.eyebrow){font-size:var(--type-body);line-height:1.6}
.unit-code{font-size:28px;line-height:1.1}
.primary,.secondary{font-size:var(--type-control);line-height:1.4;letter-spacing:.04em}
.visual-bottom div span,.footer-center{font-size:var(--type-control);line-height:1.5;letter-spacing:.02em}
.core{width:40%;height:40%}
.core-outline{width:46%;height:46%}
.core .core-label{font-size:var(--type-caption);line-height:1.35;letter-spacing:.06em}
.dialog-body h2{font-size:30px;line-height:1.15;letter-spacing:-.025em;font-weight:600}
.dialog-body .eyebrow{font-size:var(--type-label)}
@media(min-width:701px) and (max-height:650px){
  :root{--type-title:clamp(45px,9vh,58px);--type-heading:16px;--type-body:14px}
}
@media(max-width:1050px){
  .visual-top{flex-wrap:wrap;row-gap:4px}
}
@media(min-width:701px) and (max-width:1050px){
  .actions{gap:8px;flex-wrap:nowrap}
  .primary,.secondary{padding:0 10px;gap:8px}
  .button-end{margin-left:6px}
}
@media(max-width:700px){
  :root{--type-title:clamp(52px,14vw,78px);--type-heading:17px;--type-body:15px;--type-control:10px}
  .wordmark{font-size:32px}
  .eyebrow{max-width:30ch}
  .section-marker{flex-wrap:wrap;row-gap:6px}
  .section-marker>span:last-child{font-size:var(--type-caption)}
  .owner-identity div>span{font-size:var(--type-caption)}
  .access-note{letter-spacing:0}
  footer{gap:12px}
  footer>span:last-child{margin-left:0}
  .visual-top{font-size:var(--type-caption)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.boot{display:none}}