@font-face{font-family:"Geist";src:url("/lobby/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/lobby/geist-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --k:#000;--w1:#e6e6e6;--w2:#c4c4c4;--g1:#757575;--g2:#2e2e2e;--o:#ff4d00;
  --sans:"Geist","Geist Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  --canvas-offset:100svh;
  --line:rgba(230,230,230,.085);--line-soft:rgba(230,230,230,.05);
  --maxw:82.5rem;--gutter:16px;
}
@font-face{font-family:"Geist Fallback";src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0%;size-adjust:104.76%}
@font-face{font-family:"Geist Mono Fallback";src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0%;size-adjust:134.59%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#000}
body{background:var(--k);color:#fff;font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
img,svg{display:block}
::selection{background:var(--o);color:#000}

.f-h0{font-size:5.4375rem;line-height:5.25rem;letter-spacing:-.035em;font-weight:400}
.f-h1{font-size:4.75rem;line-height:4.75rem;letter-spacing:-.035em;font-weight:400}
.f-h2{font-size:2.375rem;line-height:2.5rem;letter-spacing:-.03em;font-weight:400}
.f-h3{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.02em;font-weight:500}
.f-h4{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.02em;font-weight:600}
.f-p{font-size:.8125rem;line-height:1rem;letter-spacing:0;font-weight:600}
.f-nav{font-size:.75rem;line-height:1rem;font-weight:600}

.grid-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- canvas ---------- */
#canvas-container{position:fixed;top:0;left:0;width:100%;height:var(--canvas-offset);z-index:0;background:#000;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
#gl.mode{touch-action:none}
#modeclose{position:absolute;top:76px;right:16px;z-index:5;min-height:44px;padding:0 18px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--w1);background:rgba(0,0,0,.7);border:1px solid var(--g1);border-radius:9999px}
#modeclose[hidden]{display:none}

#loader{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--o);letter-spacing:.02em;text-transform:uppercase;pointer-events:none;transition:opacity .6s ease}
#loader.done{opacity:0}
#loader span{display:inline-block;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--w2);background:rgba(0,0,0,.6);border:1px solid var(--g2);padding:6px 14px;border-radius:9999px;pointer-events:none;opacity:0;transition:opacity .35s;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#hint.show{opacity:1}
#hud{position:absolute;top:76px;left:16px;font-family:var(--mono);color:var(--o);font-size:13px;line-height:16px;font-weight:600;text-transform:uppercase;pointer-events:none}
#tvcap{position:absolute;left:16px;bottom:120px;max-width:420px;pointer-events:none;color:var(--w1)}
#tvcap .idx{display:block;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;color:var(--o);margin-bottom:8px}
#tvcap .ttl{display:block;font-size:2.375rem;line-height:2.25rem;letter-spacing:-.04em;font-weight:600}
#tvcap .desc{display:block;font-size:.9375rem;line-height:1.25rem;font-weight:500;color:var(--w2);margin-top:8px;text-wrap:pretty}
#hud .msg{display:block;font-family:var(--sans);font-size:64px;line-height:64px;letter-spacing:-.04em;font-weight:600;color:var(--w1);margin-top:8px}

/* ---------- top nav: floating glass pill ---------- */
#topnav{position:fixed;top:12px;left:0;right:0;z-index:1000;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#topnav{perspective:1300px}
#topnav .pillbar{--ex:10px;pointer-events:auto;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;height:46px;width:min(940px,calc(100% - 24px));padding:0 8px 0 16px;border-radius:0;
  background:rgba(17,17,18,.66);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);
  transform:rotateX(2.4deg);transform-origin:50% 100%;
  box-shadow:0 20px 38px rgba(0,0,0,.5)}
/* the two side faces of the box, skewed so they join the front face along its edges */
/* hover flashlight: one light position drives both the wash across the face and a
   brighter copy of the edge lines, revealed through a mask centred on the pointer */
#topnav .pillbar{--mx:50%;--my:50%;--lit:0}
#topnav .pillbar::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:var(--lit);transition:opacity .4s ease;
  background:radial-gradient(260px 130px at var(--mx) var(--my),rgba(255,255,255,.085),rgba(255,255,255,.03) 45%,transparent 72%)}
#topnav .glint{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:var(--lit);transition:opacity .4s ease;
  -webkit-mask:radial-gradient(190px 96px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 42%,transparent 70%);
          mask:radial-gradient(190px 96px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 42%,transparent 70%)}
#topnav .glint::before{content:"";position:absolute;left:15px;right:15px;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,255,255,.55) 0 100%) top left/100% 1px no-repeat,
             linear-gradient(90deg,rgba(255,255,255,.34) 0 100%) bottom left/100% 1px no-repeat}
#topnav .glint::after{content:"";position:absolute;top:15px;bottom:15px;left:0;right:0;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0 100%) top left/1px 100% no-repeat,
             linear-gradient(180deg,rgba(255,255,255,.42) 0 100%) top right/1px 100% no-repeat}
#topnav .ex{position:absolute;pointer-events:none;z-index:-1}
/* a trapezoid, not a parallelogram: both sides taper inward, so the left edge
   runs down-right and the right edge runs down-left */
#topnav .ex-b{left:0;right:0;top:100%;height:var(--ex);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--ex)) 100%,var(--ex) 100%);
  background:linear-gradient(180deg,#232322,#101010)}
/* the outline is broken at the corners and marked with brackets instead of being
   chamfered, so no diagonal ever cuts across the frame */
#topnav .frame{position:absolute;inset:0;pointer-events:none}
#topnav .frame::before{content:"";position:absolute;left:15px;right:15px;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.16),rgba(255,255,255,.06)) top left/100% 1px no-repeat,
             linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.04)) bottom left/100% 1px no-repeat}
#topnav .frame::after{content:"";position:absolute;top:15px;bottom:15px;left:0;right:0;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)) top left/1px 100% no-repeat,
             linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)) top right/1px 100% no-repeat}
#topnav .cnr{position:absolute;width:7px;height:7px;pointer-events:none;border:1px solid rgba(255,255,255,.2)}
#topnav .cnr.tl{top:0;left:0;border-right:0;border-bottom:0}
#topnav .cnr.tr{top:0;right:0;border-left:0;border-bottom:0}
#topnav .cnr.bl{bottom:0;left:0;border-right:0;border-top:0}
#topnav .cnr.br{bottom:0;right:0;border-left:0;border-top:0}
#topnav .logo{display:flex;align-items:center;height:46px;color:#f4f4f2;position:relative;z-index:1}
.wordmark{font-family:var(--sans);font-weight:700;font-size:20px;line-height:20px;letter-spacing:-.055em;color:var(--w1);white-space:nowrap}
.wordmark i{font-style:normal;color:var(--o)}
#topnav .wordmark i{color:rgba(232,232,230,.55)}   /* the bar is monochrome; the footer mark keeps its accent */
#topnav .center{display:flex;align-items:center;gap:4px;position:relative;z-index:1}
#topnav .center a{color:rgba(232,232,230,.62);padding:7px 13px;border-radius:2px;transition:background .2s,color .2s}
#topnav .center a.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
#topnav .center a:hover{background:rgba(255,255,255,.07);color:#f2f2f0}
#topnav .center a.active{color:#f6f6f4;background:rgba(255,255,255,.09)}
#topnav .right{display:flex;align-items:center;justify-content:flex-end;gap:6px;position:relative;z-index:1}
#topnav .term{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border-radius:2px;font-family:var(--mono);font-size:11px;line-height:1;font-weight:600;letter-spacing:.01em;color:rgba(226,226,224,.8);background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background .2s,color .2s;white-space:nowrap}
#topnav .term:hover{background:rgba(255,255,255,.08);color:#f2f2f0}
#topnav .term .led{width:6px;height:6px;border-radius:9999px;background:#dcdcda;box-shadow:0 0 8px rgba(220,220,218,.7);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
#topnav .term .prompt{color:rgba(200,200,198,.42)}
#topnav .term .prompt::after{content:" ~ $";color:var(--g1)}
#topnav .term .txt{color:#ececeb}
#topnav .term .cur{width:6px;height:12px;background:#d8d8d6;animation:blink 1s steps(2) infinite}
#topnav .term[aria-pressed="true"]{background:rgba(255,77,0,.14);box-shadow:inset 0 0 0 1px rgba(255,77,0,.4)}
#topnav .term[aria-pressed="true"] .led{background:var(--o);box-shadow:0 0 8px rgba(255,77,0,.9)}
@keyframes pulse{50%{opacity:.5}}
#topnav .icon{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:2px;color:#dcdcda;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .2s}
#topnav .icon:hover{background:rgba(255,255,255,.13)}
#topnav .icon svg{width:18px;height:18px;fill:currentColor}
#topnav .icon.mail{color:#e2e2e0}
#topnav .burger[aria-expanded="true"]{background:rgba(255,255,255,.16)}
/* The burger summons a full panel: the ThreeDPaper fills it, the menu sits over it.
   The panel carries a transform so the component's position:fixed layers resolve
   against it, exactly as authored. */
.menu{pointer-events:auto;position:fixed;inset:0;z-index:1200;overflow:hidden;
  background:rgba(6,6,8,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-user-select:none;user-select:none;
  transform:translateZ(0);opacity:0;transition:opacity .45s ease;touch-action:none}
/* the page scrolls away so the fixed lobby render is what sits behind the sheet */
body.menu-open #layout{visibility:hidden}
.menu.open{opacity:1}
.menu[hidden]{display:none}
/* the card face: a frosted plastic panel warped onto the sheet, carrying the
   illustration, the menu and the small print under it */
.menu-links{position:absolute;left:0;top:0;z-index:20;width:560px;height:790px;
  transform-origin:0 0;will-change:transform;opacity:0;transition:opacity .5s ease;
  display:flex;flex-direction:column;padding:44px 46px 42px;overflow:hidden;border-radius:16px;
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
  background:linear-gradient(158deg,rgba(255,255,255,.15),rgba(255,255,255,.05) 42%,rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.2)}
.menu-links.on{opacity:1}
.menu-ill{position:absolute;top:24px;right:28px;width:168px;opacity:.5;pointer-events:none}
.menu-nav{margin:200px 0 0 -16px;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
/* each row behaves like a listbox option: a selection plate with a hairline
   outline, a leading marker and a rule that wipes in under the label */
.menu-nav a{position:relative;display:inline-block;padding:2px 18px 4px 18px;
  border:1px solid transparent;border-radius:3px;
  color:rgba(255,255,255,.88);font-family:var(--sans);font-weight:600;
  font-size:30px;line-height:1.22;letter-spacing:-.035em;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .2s ease}
.menu-nav a::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;
  margin-top:-2px;background:currentColor;opacity:0;transform:scale(.4);
  transition:opacity .18s ease,transform .18s ease}
.menu-nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:1px;
  background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.menu-nav a:hover,.menu-nav a:focus-visible{color:#fff;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);transform:translateX(6px);outline:none}
.menu-nav a:hover::before,.menu-nav a:focus-visible::before{opacity:.85;transform:scale(1)}
.menu-nav a:hover::after,.menu-nav a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.menu-nav a,.menu-nav a::before,.menu-nav a::after{transition:none}}
.menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.46)}
.menu-foot b{font-weight:600;color:rgba(255,255,255,.74)}
.menu-close{position:absolute;top:24px;left:28px;z-index:21;height:38px;padding:0 14px;
  display:grid;place-items:center;color:rgba(242,242,240,.78);border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.4);border-radius:2px;cursor:pointer;transition:background .2s,color .2s}
.menu-close .wordmark{font-size:17px}
.menu-close .wordmark i{color:var(--o)}
.menu-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.menu #paper-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:transparent;
  transform:translateZ(0);touch-action:none;cursor:grab}
.menu #paper-stage:active{cursor:grabbing}
#paper-stage{--ink:#f2f2f0;--dim:rgba(242,242,240,.38)}
.mono{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--dim)}

/* ---------- background: one giant word, nothing else ---------- */
#paper-stage #pp-bg{position:fixed;inset:0;z-index:1;overflow:hidden}
#paper-stage #pp-bg h1{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Inter Tight",sans-serif;font-weight:600;letter-spacing:-.055em;
  font-size:clamp(96px,18.6vw,420px);line-height:.8;white-space:nowrap;
  color:rgba(242,242,240,.125);
  -webkit-user-select:none;user-select:none;
}

/* ---------- layers over it ---------- */
#paper-stage #pp-dof{position:fixed;inset:-30px;z-index:2;pointer-events:none;
     backdrop-filter:blur(2.4px);-webkit-backdrop-filter:blur(2.4px);
     background:rgba(8,8,10,.05)}
#paper-stage #pp-gl{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;
    pointer-events:none;display:block}
#paper-stage #pp-grain,#pp-grain2{position:fixed;inset:0;z-index:4;pointer-events:none;
    background-repeat:repeat;background-size:160px 160px}
#paper-stage #pp-grain{opacity:.05;mix-blend-mode:overlay}
#paper-stage #pp-grain2{opacity:.02}
#paper-stage #pp-vig{position:fixed;inset:0;z-index:5;pointer-events:none;
     background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 42%,rgba(0,0,0,.52) 100%)}
#paper-stage #pp-hint{position:fixed;left:0;right:0;bottom:64px;z-index:6;pointer-events:none;
      text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
      color:rgba(242,242,240,.30);opacity:0;transition:opacity .8s ease}
#paper-stage #pp-hint b{font-weight:500;color:rgba(242,242,240,.58)}
@media(hover:none){ #pp-hint .ptr{display:none} }

.actionable{position:relative;font-weight:600;--underline-height:max(.06em,1px)}
.actionable::before{content:"";position:absolute;left:0;right:0;bottom:calc(var(--underline-height) * -1);height:var(--underline-height);background:currentColor;opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}
.actionable:hover::before{opacity:1}
.actionable:hover{animation:actionable-blink .3s .06s linear forwards;text-shadow:0 0 30px color-mix(in srgb,currentColor 25%,transparent)}
@keyframes actionable-blink{0%{opacity:1}40%{opacity:.5}60%{opacity:1}80%{opacity:.5}100%{opacity:1}}
.blink:hover{animation:actionable-blink .3s .06s linear forwards}

/* ---------- particle scroll (Canvas UI) ---------- */
#ps-output{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:850}
.ps-hidden{visibility:hidden}
@media (prefers-reduced-motion:reduce){.ps-hidden{visibility:visible}}
/* ---------- manga marginalia: keyed line drawings sitting behind the copy ---------- */
.ill{position:absolute;pointer-events:none;user-select:none;z-index:0;display:block;
  opacity:.42;filter:saturate(.9)}
.hero,.caps,.contact,.logos{position:relative}
.ill-lantern{top:-3.5rem;right:1.5rem;width:clamp(120px,13vw,214px);opacity:.5}
.ill-cat{bottom:-2.5rem;right:12rem;width:clamp(150px,17vw,268px);opacity:.34}
.ill-joystick{top:2rem;left:1.5rem;width:clamp(110px,12vw,196px);opacity:.3}
.ill-crt{bottom:1rem;right:2rem;width:clamp(120px,12vw,200px);opacity:.34}
@media (max-width:1023px){.ill-cat,.ill-crt{display:none}.ill-lantern,.ill-joystick{width:110px;opacity:.28}}
/* ---------- container lines, frames, rule animation ---------- */
.vrules{position:absolute;inset:0;z-index:0;pointer-events:none;width:100%;max-width:var(--maxw);margin:0 auto;left:0;right:0;
  padding:0 var(--gutter);display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.vrules i{position:relative;display:block}
.vrules i::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--line-soft);
  transform:scaleY(0);transform-origin:top;transition:transform 1.6s cubic-bezier(.16,.84,.24,1)}
.vrules i:last-child::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--line-soft);
  transform:scaleY(0);transform-origin:top;transition:transform 1.6s cubic-bezier(.16,.84,.24,1) .3s}
.vrules.in i::before,.vrules.in i:last-child::after{transform:scaleY(1)}
.vrules i:nth-child(2)::before{transition-delay:.08s}.vrules i:nth-child(3)::before{transition-delay:.16s}
.vrules i:nth-child(4)::before{transition-delay:.24s}.vrules i:nth-child(5)::before{transition-delay:.32s}
.vrules i:nth-child(6)::before{transition-delay:.4s}

.rule{border:0;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.rule.in{transform:scaleX(1)}
.rule.thin{background:var(--line-soft)}

.framed{position:relative;border:1px solid var(--line);padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0))}
.framed.label{padding:9px 14px;width:max-content}
.framed.flush{padding:24px}
.framed .corner{position:absolute;width:5px;height:5px;border:1px solid rgba(230,230,230,.28)}
.framed .corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.framed .corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.framed .corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.framed .corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- layout ---------- */
#layout{position:relative;z-index:1;margin-top:var(--canvas-offset);background:#000;padding-bottom:40px}
main{position:relative;z-index:1;display:flex;flex-direction:column;gap:180px;padding-top:32px}
.hero{padding-top:13rem}
.hero article{grid-column:1/12;display:flex;flex-direction:column;gap:20px;color:var(--w1)}
.hero h1{text-wrap:pretty}
.hero .lede{max-width:46rem;text-wrap:pretty;color:var(--w2);font-weight:500}
.hero .eyebrow{grid-column:1/-1;margin-bottom:28px;display:flex;align-items:center;gap:16px;color:var(--g1);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.hero .eyebrow .rule{flex:1}

/* logos */
.logos{row-gap:28px}
.logos h2{grid-column:1/-1;color:var(--g1)}
.logos .grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.logos a{aspect-ratio:202/110;color:var(--w2);display:block;position:relative}
.logos a::after{content:"";position:absolute;inset:0;border:1px solid rgba(230,230,230,.2);pointer-events:none;z-index:10}
.logos .cell{position:relative;height:100%;display:grid;place-items:center;padding:0 20px}
.logos .cell img{width:150px;max-width:78%;height:auto;max-height:52px;object-fit:contain;position:relative;z-index:2;opacity:.92}
.with-dots{position:relative}
.with-dots::before,.with-dots::after{content:"";pointer-events:none;position:absolute;left:0;right:0;height:1px;z-index:11;
  background-image:linear-gradient(to right,#e6e6e6 0,#e6e6e6 1px,transparent 1px,transparent calc(100% - 1px),#e6e6e6 calc(100% - 1px),#e6e6e6 100%)}
.with-dots::before{top:0}.with-dots::after{bottom:0}
.with-diagonal-lines{position:relative;overflow:hidden}
.with-diagonal-lines::after{content:"";pointer-events:none;position:absolute;inset:-64px;background-repeat:repeat;animation:diag 6s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)' stroke='%23fff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath fill='%23fff' d='M0 0h64v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}
@keyframes diag{to{transform:translate(64px,64px)}}
.logos .lines{position:absolute;inset:0;opacity:0;transition:opacity .2s;pointer-events:none}
.logos a:hover .lines{opacity:1}
.brand{display:flex;align-items:center;gap:9px;color:var(--w2);white-space:nowrap;position:relative;z-index:2}
.brand svg{width:26px;height:26px;fill:currentColor;flex:none}
.brand .n{font-weight:600;font-size:21px;line-height:24px;letter-spacing:-.03em}
.brand.caps .n{text-transform:uppercase;letter-spacing:.14em;font-size:16px;font-weight:600}
.brand.wide .n{letter-spacing:.02em;font-weight:700;font-size:19px}
.brand.mono .n{font-family:var(--mono);font-size:17px;letter-spacing:0;font-weight:700}
.brand.thin .n{font-weight:500;font-size:22px;letter-spacing:-.02em}
.brand.serif .n{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:24px;letter-spacing:-.01em}

/* featured projects — masonry */
.featured{row-gap:0}
.featured .head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.featured .head h2{color:var(--w1)}
.featured .head .sub{max-width:34rem;color:var(--w2)}
.featured .topline{grid-column:1/-1;margin-bottom:36px}
.featured .masonry{grid-column:1/-1;columns:3;column-gap:12px}
.featured .card{break-inside:avoid;display:block;margin:0 0 12px;padding-bottom:0}
.featured .shot{display:block;position:relative;background:#0a0a0a;border:1px solid var(--line);border-bottom:0;overflow:hidden}
.featured .shot img{width:100%;height:auto}
.featured .shot .art{position:relative;inset:auto;aspect-ratio:16/9}
.featured .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35));opacity:.9}
.featured .meta{border-top:0;padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px}
.featured .meta h3{color:var(--w1);text-wrap:pretty}
.featured .meta .desc{color:var(--w2);font-size:.875rem;line-height:1.375rem;font-weight:500;letter-spacing:0;text-wrap:pretty}
.featured .meta .cats{color:var(--g1);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.featured .card a.shot:hover img{opacity:.86;transition:opacity .3s}
.featured .card .go{display:inline-flex;align-items:center;gap:8px;color:var(--w1)}
.featured .card .go svg{width:18px;height:18px;fill:currentColor;opacity:.5}
/* project media art */
.art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.art canvas{position:absolute;inset:0;width:100%;height:100%}
.art .t{position:relative;font-weight:700;letter-spacing:-.05em;white-space:nowrap}
.art-wave{background:#050505}
.art-warm{background:#efe9e1;background-image:radial-gradient(60% 80% at 20% 20%,#fff9f2 0,transparent 60%),radial-gradient(50% 60% at 85% 75%,#e2d8cc 0,transparent 60%),repeating-linear-gradient(-32deg,rgba(255,255,255,.35) 0 22px,rgba(0,0,0,0) 22px 54px)}
.art-warm .t{font-size:clamp(44px,8.5vw,116px);color:#141414;text-shadow:0 14px 26px rgba(0,0,0,.25),0 2px 0 #fff;letter-spacing:-.06em}
.art-warm .t::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:#141414;margin-right:.18em;vertical-align:-.05em;box-shadow:0 14px 26px rgba(0,0,0,.25)}
.art-warm::after{content:"";position:absolute;inset:-40%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.art-sky{background:linear-gradient(#6fa8e6,#a9cdf2 55%,#dbe9f7)}
.art-sky .cl{position:absolute;inset:-20%;background:radial-gradient(28% 40% at 22% 62%,#fff 0,rgba(255,255,255,.95) 40%,transparent 62%),radial-gradient(22% 34% at 60% 30%,#fff 0,rgba(255,255,255,.9) 45%,transparent 66%),radial-gradient(30% 36% at 82% 70%,#fff 0,rgba(255,255,255,.9) 40%,transparent 64%),radial-gradient(18% 30% at 40% 20%,#fff 0,transparent 66%);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(6%) translateY(-3%)}}
.art-sky .t{font-size:clamp(46px,9vw,124px);color:#fff;-webkit-text-stroke:2px #1a2b4a;text-shadow:6px 8px 0 #1a2b4a;letter-spacing:-.04em;transform:rotate(-4deg)}
.art-burst{background:#ff8fc4}
.art-burst .rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,#ff5fae 0 7.5deg,#ffb1d6 7.5deg 15deg);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-burst .t{font-size:clamp(48px,9.5vw,132px);color:#ffe45c;-webkit-text-stroke:3px #1a1a1a;text-shadow:8px 10px 0 #1a1a1a;transform:rotate(-3deg);letter-spacing:-.05em}
.art-burst .t small{display:block;font-size:.34em;letter-spacing:.02em;color:#fff;-webkit-text-stroke:2px #1a1a1a;text-shadow:5px 6px 0 #1a1a1a;background:#7a4bff;padding:.05em .3em;width:max-content;margin-bottom:-.2em;transform:rotate(-3deg)}

/* capabilities */
.caps h2{grid-column:1/-1;margin-bottom:0;color:var(--g1)}
.caps .topline{grid-column:1/-1;margin:26px 0 0}
.caps .big{grid-column:1/-1;color:var(--w2);margin-top:24px}
.caps .big p{text-wrap:balance}
.caps .cols{grid-column:1/-1;margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.caps .cols .inner{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.caps .cap{grid-column:span 2;margin-top:5px;display:flex;flex-direction:column;gap:18px;color:var(--w1);padding:22px 20px}
.caps .cap p{margin-top:-4px;color:var(--w2);font-weight:500;text-wrap:pretty}
.caps .tags{display:flex;flex-wrap:wrap;gap:4px}
.caps .tags span{display:block;width:fit-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--g2);padding:0 4px;color:var(--w1);white-space:nowrap}

/* contact */
.contact{padding:64px 16px 128px}
.contact .box{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:16px;height:fit-content;padding:44px 40px}
.contact .box .lines{position:absolute;inset:0;pointer-events:none}
.contact h2{position:relative;grid-column:span 2;margin-bottom:24px;color:var(--g1)}
.contact .lead{position:relative;grid-column:span 8;grid-row:2;color:var(--w2)}
.contact .mail{position:relative;grid-column:span 5;grid-row:3;display:flex;align-items:center;color:var(--w1);white-space:nowrap}

/* footer */
/* the footer rides as one big floating card: full width less a margin, its own
   rounded frame, and the drive scene clipped inside it */
footer{position:relative;z-index:10;display:flex;flex-direction:column;
  background:rgba(8,8,8,.8);-webkit-backdrop-filter:blur(26px) saturate(130%);backdrop-filter:blur(26px) saturate(130%);
  margin:120px 22px 0;border-radius:20px;border:1px solid rgba(230,230,230,.13);
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 10px 28px rgba(0,0,0,.55);
  min-height:min(1040px,116svh);padding:0 0 72px;overflow:hidden;isolation:isolate;
  --fe-bg:#0a0a0a;--fe-band:clamp(340px,72%,760px)}
footer .grid-layout{padding-left:34px;padding-right:34px}
footer>*:not(.terrain-plume-component){position:relative;z-index:1}
/* ThreeUI TerrainPlumeCanvas (variant: sunset-drive) */
.terrain-plume-component{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate}
.terrain-plume-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.footer-engraved-terrain{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;height:var(--fe-band)}
.footer-engraved-reveal{position:absolute;inset:0;display:block;width:100%;height:100%}
.footer-engraved-grain{position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-repeat:repeat;background-size:140px 140px;background-image:none}

/* the signup card, centred on the road */
footer .fcard-wrap{flex:1;align-content:center;padding:64px 16px 96px}
footer .fcard{grid-column:4/10;justify-self:center;width:100%;max-width:34rem;display:flex;flex-direction:column;gap:14px;
  padding:30px 30px 26px;background:rgba(6,6,6,.6);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(230,230,230,.14)}
footer .fcard .tag{color:var(--o);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px;line-height:16px}
footer .fcard h3{color:var(--w1);text-wrap:pretty}
footer .fcard .sub{color:var(--w2);font-weight:500;text-wrap:pretty}
footer .fcard .fine{color:var(--g1);font-weight:500;letter-spacing:.01em}
footer .signup{display:flex;flex-direction:column;gap:10px;margin-top:6px}
footer .signup input{height:46px;width:100%;padding:0 14px;color:#fff;background:rgba(0,0,0,.5);
  border:1px solid rgba(230,230,230,.22);border-radius:0;outline:none;
  font:500 15px/46px var(--sans);letter-spacing:-.01em;transition:border-color .2s,background .2s}
footer .signup input::placeholder{color:var(--g1)}
footer .signup input:focus{border-color:rgba(255,77,0,.65);background:rgba(0,0,0,.66)}

/* Arcade controls: a moulded cap sitting on a coloured body, with a real throw.
   The body is the drop-shadow layer, so pressing moves the cap down onto it. */
.arcade{--body:#3a1204;--throw:5px;position:relative;border:1px solid rgba(0,0,0,.85);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.42),
             0 var(--throw) 0 var(--body),0 calc(var(--throw) + 3px) 10px rgba(0,0,0,.55);
  transition:transform .07s cubic-bezier(.3,.8,.4,1),box-shadow .07s cubic-bezier(.3,.8,.4,1),filter .18s}
.arcade:hover{filter:brightness(1.09)}
.arcade:active{transform:translateY(var(--throw));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4),
             0 0 0 var(--body),0 1px 3px rgba(0,0,0,.6)}
.arcade:focus-visible{outline:2px solid rgba(255,180,90,.85);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.arcade{transition:none}}
/* the small square controls in the header and the footer share the cap, in metal */
.arcade.metal{--body:#141414;background:linear-gradient(180deg,#2a2a2a,#161616);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.5),
             0 3px 0 var(--body),0 5px 9px rgba(0,0,0,.5)}
.arcade.metal:active{transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 var(--body),0 1px 3px rgba(0,0,0,.6)}

/* ThreeUI <RectangleButtons variant="ember-keycap" mode="dark" />, ported from the
   registered source (rectangle-buttons.json, all 18 files SHA-256 verified). The
   demo stage keeps its ember ground tint but not its 240px preview sizing, since
   the keycap sits inline in the signup form here. */
.threeui-page-button-stage{--threeui-page-ink:#fff;position:relative;display:grid;place-items:center;
  overflow:visible;isolation:isolate;background:#050505;color:var(--threeui-page-ink);
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif}
.threeui-page-button-stage::before{content:"";position:absolute;inset:-18px -12px;z-index:-1;pointer-events:none}
.threeui-page-button-stage--ember-keycap{background:#080604;
  font-family:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace}
.threeui-page-button-stage--ember-keycap::before{
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255,111,35,.20), transparent 30%),
    linear-gradient(180deg, rgba(255,119,45,.035), transparent 58%)}
.threeui-page-button{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;
  font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-font-smoothing:antialiased}
.threeui-page-button:focus-visible{outline:2px solid var(--threeui-page-ink);outline-offset:5px}
.threeui-page-button-ember-wrap{position:relative;display:inline-block}
.threeui-page-button-ember-glow,.threeui-page-button-ember-bloom{position:absolute;pointer-events:none;
  border-radius:50%;mix-blend-mode:plus-lighter;transition:opacity .16s ease,transform .16s ease}
.threeui-page-button-ember-glow{left:6%;right:6%;top:-9px;height:16px;
  background:radial-gradient(closest-side, rgba(255,222,182,.95), rgba(255,138,54,.62) 50%, rgba(255,96,24,0) 100%);
  filter:blur(4px);opacity:1}
.threeui-page-button-ember-bloom{left:-10%;right:-10%;top:-31px;height:58px;
  background:radial-gradient(closest-side, rgba(255,128,50,.55), rgba(255,92,24,.18) 58%, rgba(255,72,14,0) 100%);
  filter:blur(12px);opacity:.85}
.threeui-page-button--ember-keycap{gap:.85em;padding:1.05em 1.6em 1.1em;border-radius:9px;
  background:linear-gradient(178deg,#4a4d54 0%,#34373d 18%,#23262b 62%,#1a1c20 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,238,225,.22),inset 0 -1px 0 rgba(0,0,0,.75),
             0 7px 0 -1px #101215,0 12px 26px rgba(0,0,0,.62);
  color:#fff1e2;font-size:14px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  transform:translateY(0);transition:transform .13s cubic-bezier(.3,.7,.3,1),box-shadow .13s ease}
.threeui-page-button--ember-keycap .threeui-page-button__spark{width:1.1em;height:1.1em;flex:none;
  fill:#ff8a3d;filter:drop-shadow(0 0 .55em rgba(255,120,50,.9))}
.threeui-page-button--ember-keycap .threeui-page-button__price{color:#b9ada3}
.threeui-page-button-ember-wrap:hover .threeui-page-button--ember-keycap,
.threeui-page-button--ember-keycap:focus-visible{transform:translateY(5px);
  box-shadow:inset 0 1.5px 0 rgba(255,238,225,.26),inset 0 -1px 0 rgba(0,0,0,.75),
             0 2px 0 -1px #101215,0 5px 14px rgba(0,0,0,.6)}
.threeui-page-button--ember-keycap:focus-visible{outline-color:#ff9a59}
.threeui-page-button-ember-wrap:hover .threeui-page-button-ember-glow,
.threeui-page-button-ember-wrap:focus-within .threeui-page-button-ember-glow{transform:translateY(5px) scaleX(1.05)}
.threeui-page-button-ember-wrap:hover .threeui-page-button-ember-bloom,
.threeui-page-button-ember-wrap:focus-within .threeui-page-button-ember-bloom{opacity:1;transform:translateY(5px) scale(1.05)}
.threeui-page-button--ember-keycap:active{transform:translateY(6px)}
/* The keycap fills the form row rather than sitting as an inline demo. The stage's
   isolate + own background is what boxed the glow in: plus-lighter was blending
   against the stage instead of the card, printing a lighter rectangle around it. */
footer .signup .threeui-page-button-stage{background:transparent;isolation:auto;overflow:visible;margin-top:16px}
footer .signup .threeui-page-button-stage::before{display:none}
footer .signup .threeui-page-button-ember-wrap,
footer .signup .threeui-page-button--ember-keycap{display:flex;width:100%}
/* warmer, machined-amber cap with a fine scanline over it — closer to a console key */
footer .signup .threeui-page-button--ember-keycap{
  background:linear-gradient(178deg,#5b4a3c 0%,#42352c 18%,#2c2420 62%,#1f1a17 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,226,196,.26),inset 0 -1px 0 rgba(0,0,0,.78),
             0 7px 0 -1px #140f0b,0 12px 26px rgba(0,0,0,.66)}
footer .signup .threeui-page-button-ember-wrap:hover .threeui-page-button--ember-keycap{
  box-shadow:inset 0 1.5px 0 rgba(255,232,206,.3),inset 0 -1px 0 rgba(0,0,0,.78),
             0 2px 0 -1px #140f0b,0 5px 14px rgba(0,0,0,.62)}
footer .signup .threeui-page-button--ember-keycap::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,rgba(255,236,210,.05) 1px 3px)}
footer .signup .threeui-page-button--ember-keycap .lbl,
footer .signup .threeui-page-button__price{text-shadow:0 0 6px rgba(255,150,70,.35)}

/* VHS over the whole signup panel: scanlines, a colour fringe and a tape wobble */
footer .fcard{overflow:hidden}
footer .fcard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.20) 0 1px,rgba(255,255,255,.022) 1px 3px)}
footer .fcard>*:not(.corner){position:relative;animation:fcard-wobble 7s steps(1) infinite}
footer .fcard h3,footer .fcard .sub,footer .fcard .tag,footer .fcard .fine{
  text-shadow:.6px 0 0 rgba(255,60,40,.22),-.6px 0 0 rgba(60,200,255,.18)}
@keyframes fcard-wobble{
  0%,88%{transform:translateX(0)} 89%{transform:translateX(1.2px)} 90%{transform:translateX(-.8px)}
  91%{transform:translateX(.4px)} 92%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){footer .fcard>*:not(.corner){animation:none}}
footer .thanks{color:#7dd6a2;font-weight:600}

footer .mark{grid-column:1/-1;color:var(--w2);border-bottom:1px solid rgba(230,230,230,.3);padding-bottom:16px}
footer .mark svg{width:100%;height:auto;fill:currentColor}
footer .bottom{align-items:center;row-gap:18px;padding-top:18px}
footer .links{grid-column:1/9;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;color:var(--w1)}
footer .links a{color:var(--w1);white-space:nowrap}
footer .social{grid-column:9/13;display:flex;align-items:center;justify-content:flex-end;gap:8px}
footer .social a{width:34px;height:34px;display:grid;place-items:center;color:var(--w2);border:1px solid rgba(230,230,230,.16);transition:color .2s,border-color .2s,background .2s}
footer .social a:hover{color:var(--w1);border-color:rgba(230,230,230,.4);background:rgba(255,255,255,.06)}
footer .social svg{width:17px;height:17px;fill:currentColor}
footer .copy{grid-column:1/13;margin-top:2px;text-align:left;color:var(--g1);font-weight:500}
footer .social .row{display:flex;gap:4px;white-space:nowrap;color:var(--g1)}
footer .social .row a{color:var(--w1);height:max-content}
footer .social .copy{text-align:right;color:var(--g1)}

#vhs-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:900;mix-blend-mode:screen;opacity:.9}
body.machine #vhs-overlay{z-index:2100;mix-blend-mode:screen;opacity:.85}
#machine-scan{display:none;position:fixed;inset:0;z-index:2050;pointer-events:none;overflow:hidden;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.5) 0 1px,rgba(0,0,0,0) 1px 3px)}
body.machine #machine-scan{display:block}
#machine-scan::after{content:'';position:absolute;left:-10%;right:-10%;height:16%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45) 45%,rgba(0,0,0,.1) 62%,rgba(0,0,0,0));
  animation:mtrack 7.5s linear infinite}
@keyframes mtrack{from{transform:translateY(-30%)}to{transform:translateY(640%)}}
@media (prefers-reduced-motion:reduce){#machine-scan::after{animation:none;opacity:.25}}

/* machine mode: ThreeUI <CrtBackground variant="terminal"> host (threeui.css rules for .threeui-background) */
#machine{display:none;position:fixed;inset:0;z-index:2000;background:transparent;mix-blend-mode:screen}
#machine-scrim{display:none;position:fixed;inset:0;z-index:1999;pointer-events:none;
  background:rgba(4,2,0,.34);
  -webkit-backdrop-filter:blur(5px) saturate(.72) brightness(.42);backdrop-filter:blur(5px) saturate(.72) brightness(.42)}
body.machine #machine-scrim{display:block}
body.machine #machine{display:block}
body.machine #topnav,body.machine #layout{display:none}
.threeui-background{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;isolation:isolate;background:#030304}
.threeui-background>canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#crt-host{position:absolute;inset:0}
#machine-close{position:absolute;top:18px;right:22px;z-index:2;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--o);background:rgba(5,2,0,.7);border:1px solid rgba(255,77,0,.4);border-radius:9999px;padding:8px 14px;cursor:pointer;text-shadow:0 0 10px rgba(255,77,0,.6)}
#machine-close:hover{background:rgba(255,77,0,.15)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* responsive */
@media (max-width:1023px){
  .f-h0{font-size:2.875rem;line-height:2.45rem}
  .f-h1{font-size:2.1875rem;line-height:2.25rem;letter-spacing:-.03em}
  .f-h2{font-size:2.1875rem;line-height:2.25rem;letter-spacing:-.03em}
  .f-h3{font-size:1.25rem;line-height:1.25rem}
  .f-h4{font-size:.9375rem;line-height:1rem}
  .f-p{font-size:.75rem}
  :root{--canvas-offset:100svh}
  main{gap:72px}
  #topnav .pillbar{grid-template-columns:auto 1fr;padding-left:14px}
  #topnav .center,#topnav .online{display:none}
    .hero article{grid-column:1/-1}
  .hero .lede{width:100%}
  .logos h2{grid-column:1/-1}
  .logos .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand .n{font-size:17px}
  .featured .head{flex-direction:column;align-items:flex-start;gap:14px}
  .featured .masonry{columns:1}
  .hero{padding-top:6rem}
  .framed{padding:18px}
  .framed.label{padding:8px 12px}
  .caps .cap{padding:18px 16px}
  .contact .box{padding:24px 18px}
  .vrules{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer{--fe-band:clamp(220px,58%,420px);min-height:min(880px,104svh);padding-bottom:48px}
  footer .fcard{grid-column:1/-1;padding:22px 20px}
  footer .fcard-wrap{padding:40px 16px 56px}
  footer .links{grid-column:1/-1;gap:6px 16px}
  footer .social{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  footer .copy{grid-column:1/-1;grid-row:3}
  /* the status chip has to give way or it pushes the icons out of the bar */
  #topnav .right{gap:5px;min-width:0}
  #topnav .term{min-width:0;padding:0 9px}
  #topnav .term .prompt{display:none}
  #topnav .term .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:104px}
  .caps h2{grid-column:1/-1}
  .caps .cols .inner{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .caps .cap{grid-column:span 1}
  .contact{padding:48px 16px 64px}
  .contact .box{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .contact .lead{grid-column:span 4}
  .contact .mail{grid-column:span 4;white-space:normal;font-size:2rem;line-height:2rem;letter-spacing:-.03em}
  .contact .mail a{overflow-wrap:anywhere}
  #machine-close{top:12px;right:12px}
  footer{height:auto;gap:64px}
  footer .bottom{grid-template-rows:auto auto auto}
  footer .links{grid-column:1/-1}
  footer .news{grid-column:1/-1;grid-row:2}
  footer .social{grid-column:1/-1;grid-row:3;align-items:flex-start;transform:none}
  footer .social .copy{text-align:left}
}
@media (min-width:768px) and (max-width:1023px){.featured .masonry{columns:2}}

/* Pixel Pack additions */
.skip{position:fixed;left:12px;top:-60px;z-index:3000;padding:10px 14px;background:#fff;color:#000;font-weight:600}
.skip:focus{top:12px}
.menu-links.flat{left:50%;top:50%;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--flat-s,.72))!important;visibility:visible!important;opacity:1!important}
.contact .alt{position:relative;grid-column:1/-1;color:var(--w2);font-weight:500}
a:focus-visible,button:focus-visible{outline:2px solid var(--o);outline-offset:3px}

/* accessibility pass */
.lobby-keys{position:absolute;left:16px;top:76px;z-index:6;display:flex;flex-direction:column;gap:8px}
.lobby-keys button{position:absolute;left:-9999px;min-height:44px;padding:0 16px;white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;color:#000;background:#fff;border-radius:9999px}
.lobby-keys button:focus-visible{position:static}
#topnav .pillbar{background:rgba(12,12,13,.9)}
#topnav .center a{color:rgba(240,240,238,.86)}
#topnav .term .prompt{color:rgba(226,226,224,.78)}
#topnav .term .prompt::after{color:rgba(226,226,224,.78)}
#hint{background:rgba(0,0,0,.82)}
#tvcap{background:rgba(0,0,0,.72);padding:12px 14px}
.menu-foot{color:rgba(255,255,255,.82)}
.menu-foot b{color:#fff}
.menu-links{background:linear-gradient(158deg,rgba(20,20,22,.72),rgba(20,20,22,.6))}
footer .copy,footer .fcard .fine{color:#a8a8a8}
.motion-btn{font:inherit;color:var(--w1);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html[data-motion="off"] .ps-hidden{visibility:visible}
html[data-motion="off"] .rule,html[data-motion="off"] .vrules i::before,html[data-motion="off"] .vrules i:last-child::after{transform:none}
.no-lobby{--canvas-offset:0px}
.no-lobby #canvas-container{display:none}
.no-lobby .hero{padding-top:8rem}

/* ---------- the enquiry form inside the Contact box (its own rules are in src/styles/form.css) ---------- */
.contact .brief-col{position:relative;grid-column:1/-1;min-width:0;margin-top:8px;
  --bg:#000;--surface:#0a0a0a;--line:#222;--line-strong:#3d3d3d;--text:#e6e6e6;--muted:#c4c4c4;--faint:#8f8f8f;
  --accent:#ff4d00;--accent-ink:#000;--error:#f0a08c;--dur-1:120ms;--dur-2:240ms;--ease:cubic-bezier(.2,.7,.2,1);--shift:8px}
.contact .brief-col fieldset{border:0;min-width:0}
.contact .brief-col :focus-visible{outline:2px solid #e6e6e6;outline-offset:3px}
.contact .brief-col select{appearance:auto}
#contact{scroll-margin-top:72px}
@media (max-width:820px){.contact .brief-col .field-pair{grid-template-columns:1fr}.contact .brief-col .brief-nav .btn{flex:1 1 auto}}

/* ---------- projects live on the lobby's TV screens; the list below is the stand-in when the lobby or motion is off ---------- */
html:not(.no-lobby):not([data-motion="off"]) #work{display:none}
#tvcap .go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 16px;pointer-events:auto;font-family:var(--mono);font-size:12px;font-weight:600;text-transform:uppercase;color:#000;background:var(--w1)}
#tvcap .go:hover{background:#fff}
#tvcap .go:focus-visible{outline:2px solid var(--o);outline-offset:3px}

/* ---------- "Projects" pointer (shown while the screens are out of view) and the phone layout of the screen caption ---------- */
#tvpoint{position:absolute;top:50%;right:12px;z-index:5;min-height:44px;padding:0 16px;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#000;background:var(--o);border-radius:9999px;box-shadow:0 0 24px rgba(255,77,0,.45);animation:tvpoint 1.6s ease-in-out infinite}
#tvpoint[data-side="left"]{right:auto;left:12px}
#tvpoint:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes tvpoint{50%{transform:translateX(4px)}}
#gl{cursor:grab}
@media (max-width:820px){
  #tvcap{left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));max-width:none;padding:10px 12px}
  #tvcap .idx{font-size:11px;margin-bottom:4px}
  #tvcap .ttl{font-size:1.375rem;line-height:1.5rem;letter-spacing:-.03em}
  #tvcap .desc{font-size:.8125rem;line-height:1.125rem;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #tvcap .go{margin-top:8px}
  #gl.mode ~ #hint{top:124px;bottom:auto}
  #gl.mode ~ #hint.show{animation:hint-away 5s forwards}
  @keyframes hint-away{0%,80%{opacity:1}100%{opacity:0}}
}

/* ---------- Contact form buttons: the same orange pill as the lobby's "Projects" pointer ---------- */
.contact .brief-col .btn{min-height:44px;padding:0 20px;border-radius:9999px;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.contact .brief-col .btn-primary{color:#000;background:var(--o);box-shadow:0 0 24px rgba(255,77,0,.45)}
.contact .brief-col .btn-primary:hover{background:#ff7a3d}
.contact .brief-col .btn-ghost{color:var(--w1);background:transparent;border:1px solid var(--g2)}
.contact .brief-col .btn-ghost:hover{border-color:var(--w1)}
.contact .brief-col .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

[hidden]{display:none!important}   /* author display rules must never un-hide a hidden element */
.contact .brief-col .chip span{border-radius:9999px}
.contact .brief-col .chip span::before{border-radius:50%}

/* ---------- plain menu for phones and narrow screens (class set in page.js): no 3D sheet, no blur ---------- */
.menu.simple{background:rgba(6,6,8,.97);-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity .2s ease;touch-action:auto;overflow:auto}
.menu.simple #paper-stage{display:none}
.menu.simple .menu-close{top:16px;left:16px}
.menu.simple .menu-links{position:static;width:auto;height:auto;min-height:100%;transform:none!important;opacity:1;visibility:visible;
  padding:96px 24px max(32px,env(safe-area-inset-bottom));border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.menu.simple .menu-nav{margin:0;gap:4px;align-items:stretch}
.menu.simple .menu-nav a{display:block;padding:12px 18px}
.menu.simple .menu-foot{margin-top:40px;padding-left:18px}

/* phones: the blur behind the menu is the costly part, so it is dropped there */
@media (max-width:820px),(pointer:coarse){.menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,8,.8)}.menu-links{-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-links.flat{background:linear-gradient(158deg,rgba(28,28,31,.94),rgba(20,20,22,.9))}}   /* the card stays see-through on the sheet, and solid only while it stands in for it */

body.menu-open #tvpoint,body.menu-open #hint,body.menu-open .lobby-keys{visibility:hidden}