:root{--f-ink:#efe9dc;--f-muted:#a29fae;--f-accent:#ffb867;--f-line:rgba(255,255,255,.14);--display:"Archivo","Arial Narrow",system-ui,sans-serif;--osd:"VT323",ui-monospace,"Courier New",monospace}
html,body{font-family:var(--display)}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;background:linear-gradient(rgba(5,5,9,.55),rgba(5,5,9,0))}

.brand{top:calc(16px + env(safe-area-inset-top,0px));left:20px;right:20px;z-index:7;display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;text-shadow:none}
html.crt-gating .brand{visibility:visible}
.brand h1{font-family:var(--display);font-weight:850;font-stretch:125%;font-size:26px;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;color:var(--f-ink);pointer-events:auto}
.brand .name{padding:0;font:inherit;font-stretch:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.brand .name:hover{color:#fff}
.brand p{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
.menu button,.menu a{font-family:var(--osd);font-size:38px;line-height:1.1;letter-spacing:.07em;text-decoration:none;color:var(--f-muted);padding:3px 16px 1px;border-radius:4px;border:1px solid transparent;transition:color .15s}
.menu button:hover,.menu a:hover{color:var(--f-ink)}
.menu [aria-current="page"]{color:#0b0b0d;background:var(--f-ink)}
.menu [aria-current="page"]:hover{color:#0b0b0d}
html.crt-gating .menu button{pointer-events:none}

.bar{left:auto;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));padding:0;background:none;flex-direction:column;align-items:flex-end;flex-wrap:nowrap;gap:8px;z-index:2}
.bar .keys{justify-content:flex-end;gap:0 10px}
.bar .keys li+li::before{content:"·";margin-right:10px;color:var(--f-muted)}
.bar .keys{display:flex}
.bar .keys li{display:flex;align-items:center}
.bar .keys button,.bar .keys span{padding:0;font-family:var(--osd);font-size:22px;line-height:1.15;letter-spacing:0;text-transform:none;color:#d3cfdc;text-shadow:0 0 1px #000,0 0 2px #000,0 1px 1px #000,0 0 9px rgba(0,0,0,.8);transition:color .15s}
.bar .keys button:hover{color:#fff}
.bar .keys.vcr{display:none}
html[data-view="desk"] .bar .keys.vcr{display:flex}
html[data-view="outside"] .bar .keys,html[data-view="notepad"] .bar .keys,html[data-view="chair"] .bar .keys{display:none}
.bar kbd{min-width:0;padding:0;margin-right:.35em;border:0;border-radius:0;color:var(--f-ink)}
.bar .toggles{gap:8px;justify-content:flex-end}
.bar .toggles button{padding:5px 16px 4px;font-family:var(--osd);font-size:23px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--f-ink);background:rgba(20,18,24,.55);border:1px solid var(--f-line);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .15s,border-color .15s}
.bar .toggles button:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.bar .toggles button[aria-pressed="true"],.bar .toggles button.on{color:var(--f-accent);border-color:var(--f-accent)}
:focus-visible{outline-color:var(--f-accent)}

.hint{left:0;top:0;bottom:auto;transform:translate(var(--tx,0),var(--ty,0)) translateX(var(--fx,0%));z-index:8;font-family:var(--osd);font-size:17px;letter-spacing:.06em;color:#0b0b0d;background:var(--f-ink);padding:1px 7px 0;border-radius:3px;transition:opacity .12s}

#pad-close{top:calc(84px + env(safe-area-inset-top,0px));right:20px;padding:5px 14px 4px;font-family:var(--osd);font-size:19px;letter-spacing:.06em;color:var(--f-ink);background:rgba(20,18,24,.55);border:1px solid var(--f-line);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#pad-close:hover{color:#fff;border-color:rgba(255,255,255,.34)}

.panel{--ink:#221e1a;--dim:#6f6657;--amber:#b3402c;--line:rgba(40,30,20,.16);padding:1.1rem 1.25rem 1.3rem;border:0;border-radius:2px;font-family:"Courier Prime","Courier New",ui-monospace,monospace;color:var(--ink);background-color:#f1ead8;background-image:linear-gradient(rgba(255,255,255,.35),rgba(0,0,0,.04));box-shadow:0 18px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35)}
.panel .eyebrow{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.panel h2{margin:0 0 0;padding:0 3.2rem 8px 0;font-family:var(--display);font-size:32px;line-height:.95;font-weight:880;font-stretch:62%;text-transform:uppercase;color:#1b1814;border-bottom:1.5px solid rgba(179,64,44,.5)}
#panel-body{padding-top:12px;font-size:14.5px;line-height:23.2px;background:repeating-linear-gradient(transparent 0 22.2px,rgba(60,90,150,.13) 22.2px 23.2px)}
.panel p,.panel li{font-size:14.5px;line-height:23.2px;color:var(--ink)}
.panel p+p,.panel ul,.panel .tags{margin-top:11px}
.panel a{color:#1d3a8a;text-decoration-color:rgba(29,58,138,.4)}
.panel a:hover{color:var(--amber)}
.tags span{font-size:12px;border-color:var(--line);color:var(--dim)}
.panel .close{top:.95rem;right:1.1rem;padding:2px 8px;font-family:inherit;font-size:12px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:2px;transition:color .15s}
.panel .close:hover{color:var(--ink)}
.panel .pager{font-size:12px;letter-spacing:.1em}
.panel .pager button:hover{color:var(--amber)}
@media (max-width:720px){.brand{left:16px;right:16px}.brand h1{font-size:21px}.menu button,.menu a{font-size:30px;padding:3px 10px 1px}#pad-close{top:calc(110px + env(safe-area-inset-top,0px))}.bar{right:16px}.bar .keys{display:none}}

#phone-cap{position:fixed;left:24px;top:88px;z-index:4;max-width:min(380px,86vw);margin:0;padding:12px 18px;border:1px solid rgba(244,232,210,.22);border-radius:10px;background:rgba(14,10,8,.78);backdrop-filter:blur(6px);color:#f2e6cf;font:14px/1.5 "Courier Prime",ui-monospace,monospace}
#phone-cap[hidden]{display:none}

html[data-view="ibm"] .bar .keys{display:none}
html[data-view="desk"] .bar .keys{display:none}
#back{padding:5px 16px 4px;font-family:var(--osd);font-size:23px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--f-ink);background:rgba(20,18,24,.55);border:1px solid var(--f-line);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:color .15s,border-color .15s}
#back:hover{color:#fff;border-color:rgba(255,255,255,.4)}
html[data-view="ibm"] #back,html[data-view="desk"] #back,html[data-view="outside"] #back,html[data-view="notepad"] #back,html[data-view="chair"] #back{display:block}
#back[hidden]{display:none}
html:not([data-view="ibm"]):not([data-view="desk"]):not([data-view="outside"]):not([data-view="notepad"]):not([data-view="chair"]) #back{display:none}

.cred{position:fixed;left:0;top:0;bottom:0;width:min(560px,100vw);z-index:9;display:flex;align-items:flex-start;padding:84px 20px 28px;pointer-events:none}
.cred[hidden]{display:none}
.cred-card{position:relative;width:100%;max-height:100%;overflow:auto;pointer-events:auto;padding:26px 30px 28px;font-family:"Courier Prime","Courier New",ui-monospace,monospace;color:#221e1a;background:#efe8d4 repeating-linear-gradient(transparent 0 27px,rgba(60,90,150,.16) 27px 28px);background-position:0 44px;border-radius:3px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.5) inset;border-top:3px solid #b3402c;transform:translateX(-115%);transition:transform .8s cubic-bezier(.2,.85,.25,1)}
.cred.in .cred-card{transform:translateX(0)}
.cred-card h2{margin:0 0 14px;padding-bottom:6px;font-family:var(--display);font-size:34px;line-height:1;font-weight:880;font-stretch:62%;letter-spacing:.02em;color:#b3402c;border-bottom:1.5px solid rgba(179,64,44,.5)}
.cred-card ul{margin:0;padding:0;list-style:none}
.cred-card li{margin:0;font-size:15px;line-height:28px;color:#221e1a;white-space:normal;clip-path:inset(0 100% 0 0);opacity:0}
.cred.in .cred-card li{animation:cred-type .6s steps(28) both;animation-delay:calc(var(--i)*.16s + .7s)}
.cred-card li b{font-weight:700}
.cred-card li span{color:#6f6657}
.cred-card a{color:#1d3a8a;font-weight:700;text-decoration-color:rgba(29,58,138,.4)}
.cred-card a:hover{color:#b3402c}
.cred-x{position:absolute;top:14px;right:16px;padding:2px 8px;font-family:inherit;font-size:12px;letter-spacing:.1em;color:#6f6657;border:1px solid rgba(40,30,20,.2);border-radius:2px;cursor:pointer}
.cred-x:hover{color:#221e1a}
@keyframes cred-type{from{clip-path:inset(0 100% 0 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}
@media (prefers-reduced-motion:reduce){.cred-card,.cred.in .cred-card,.cred.in .cred-card li{animation:none;transition:none}.cred.in .cred-card li{clip-path:none;opacity:1}}

@media (max-width:1000px){.brand h1{font-size:22px}.menu{gap:2px}.menu button,.menu a{font-size:30px;padding:3px 10px 1px}}
@media (max-width:720px){.brand h1{font-size:19px}.menu button,.menu a{font-size:25px;padding:2px 8px 0}}


#lofi-dialog{position:fixed;inset:0;margin:auto;height:fit-content;border:0;border-radius:14px;padding:1.6rem 1.6rem 1.3rem;width:min(92vw,26rem);background:#fbfaf6;color:#1b1713;box-shadow:0 24px 70px rgba(0,0,0,.5);font-family:var(--display)}
#lofi-dialog::backdrop{background:rgba(8,5,3,.62)}
#lofi-dialog h2{margin:0 0 .6rem;font-size:1.35rem;font-weight:800;line-height:1.2}
#lofi-dialog p{margin:0 0 1.3rem;font-size:1rem;line-height:1.55;color:#4a4339}
.lofi-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.lofi-actions button{flex:1 1 9rem;min-height:46px;padding:0 1.1rem;border-radius:999px;font:700 1rem var(--display);cursor:pointer;border:2px solid #1b1713;background:#fbfaf6;color:#1b1713}
.lofi-actions #lofi-go{background:#1b1713;color:#fbfaf6}
.lofi-actions button:focus-visible{outline:3px solid #d9631c;outline-offset:2px}

.touch{display:none}
@media (hover:none) and (pointer:coarse){
  .bar{left:12px;right:12px;align-items:stretch}
  .bar .keys{display:none!important}
  .touch{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0;-webkit-overflow-scrolling:touch}
  .touch::-webkit-scrollbar{display:none}
  .vcr-touch{display:none}
  html[data-view="desk"] .vcr-touch{display:flex}
  html[data-view="ibm"] .views-touch,html[data-view="notepad"] .views-touch,html[data-view="chair"] .views-touch,html[data-view="outside"] .views-touch{display:none}
  .touch button{flex:0 0 auto;min-height:44px;padding:4px 16px 3px;font-family:var(--osd);font-size:23px;letter-spacing:.05em;text-transform:uppercase;color:var(--f-ink);background:rgba(20,18,24,.72);border:1px solid var(--f-line);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .touch button:active{color:var(--f-accent);border-color:var(--f-accent)}
  .bar .toggles{justify-content:flex-start;flex-wrap:wrap}
  .bar .toggles button{min-height:44px}
  .menu button,.menu a{min-height:44px}
}

@media (hover:none) and (pointer:coarse){
  .pad-sr{left:12px;right:12px;top:calc(104px + env(safe-area-inset-top,0px));bottom:calc(176px + env(safe-area-inset-bottom,0px));width:auto;height:auto;z-index:7;overflow-y:auto;clip-path:none;white-space:normal;padding:18px 18px 22px;border-radius:10px;background:#f3ead8;color:#2a2118;box-shadow:0 18px 50px rgba(0,0,0,.5);-webkit-overflow-scrolling:touch}
  .pad-sr h2{margin:0 0 .6rem;font:850 1.5rem/1.1 var(--display)}
  .pad-sr h3{margin:1rem 0 .3rem;font:400 1.35rem/1.1 var(--osd);letter-spacing:.08em;text-transform:uppercase;color:#a3441b}
  .pad-sr ul{margin:0;padding:0;list-style:none}
  .pad-sr li{padding:.28rem 0;font:500 1rem/1.35 var(--display);border-top:1px solid rgba(42,33,24,.14)}
  #pad-close{top:calc(60px + env(safe-area-inset-top,0px));right:16px}
  .panel{top:auto!important;bottom:calc(176px + env(safe-area-inset-bottom,0px))!important;left:12px!important;right:12px!important;max-height:38vh!important;width:auto!important;transform:none!important}
}

.menu button,.menu a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:top}