/* square8.studio — black, white, transparency. Nothing else.
   Animation is transform/opacity only, so it stays cheap. */

:root {
  --bg:      #000000;
  --panel:   #08080a;
  --raise:   #0d0d0f;
  --card:    #121214;
  --line:    #232326;
  --line-2:  #171719;

  --ink:     #f6f4f2;
  --dim:     #9a9a9d;
  --faint:   #5c5c60;
  --ghost:   #333337;

  --glass:   rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.075);
  --edge:    rgba(255,255,255,.14);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
p { margin: 0 0 16px; }
a { color: var(--ink); text-decoration-color: var(--ghost); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
b { font-weight: 600; color: #fff; }
em { font-style: normal; }
ul { margin: 0; padding-left: 18px; }

code {
  font-family: var(--mono); font-size: .85em; background: #1a1a1d;
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px;
}

.sr, .skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--ink); color: #000; padding: 10px 16px; }

.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em;
          text-transform: uppercase; color: var(--faint); margin: 0 0 18px; }
.h2 { font-size: clamp(28px, 5vw, 50px); margin-bottom: 18px; }
.h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.025em; }
.body { color: var(--dim); max-width: 62ch; font-size: 15.5px; }
.body.wide { max-width: 76ch; }
.muted { color: var(--faint); font-size: 14px; }
.muted.tiny { font-size: 12px; }
.copyright { margin-top: 14px; letter-spacing: .02em; }

/* --------------------------------------------------------------- HUD */

.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 24px; padding: 12px 22px;
  background: rgba(0,0,0,.8); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brandmark { width: 20px; height: 20px; display: block; }
.brandmark svg { width: 100%; height: 100%; display: block; }
.brandname { font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: -0.03em; }
.brandname i { font-style: normal; color: var(--faint); font-weight: 400; }
.brandname.big { font-size: 22px; }
.hudlinks { margin-left: auto; display: flex; gap: 16px; letter-spacing: .12em; text-transform: uppercase; }
.hudlinks a { color: var(--faint); text-decoration: none; }
.hudlinks a:hover { color: var(--ink); }

/* -------------------------------------------------------------- HERO */

.hero {
  position: relative; min-height: 92svh; display: grid; grid-template-columns: 1fr;
  align-items: center; padding: 130px 0 70px; overflow: hidden;
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 980px) { .hero { grid-template-columns: 1.3fr .7fr; } }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 30%, transparent 78%);
}
.hero-in { position: relative; z-index: 2; }
.display { font-size: clamp(44px, 10.5vw, 124px); letter-spacing: -0.055em; margin-bottom: 24px; }
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--dim); max-width: 50ch; }
.lede.oneline { color: var(--ink); max-width: 60ch; margin-bottom: 26px; }

.ctas { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 24px; border-radius: 3px;
  background: var(--ink); color: #000; text-decoration: none; border: 1px solid var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }

.markstage { position: relative; z-index: 2; display: grid; place-items: center; padding: 40px 26px 0; }
.heromark { width: min(300px, 70vw); }
.heromark svg { width: 100%; height: auto; display: block; }
.markcap { margin: 20px 0 0; font-family: var(--mono); font-size: 10px;
           letter-spacing: .26em; color: var(--faint); text-transform: uppercase; text-align: center; }

/* ------------------------------------------------------------ BLOCKS */

.block { padding: 88px 0; border-bottom: 1px solid var(--line-2); }
.two { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 880px) { .two { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ------------------------------------------------------------ ROSTER */

.devswitch { display: flex; gap: 8px; margin: 26px 0 12px; }
.dev {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 3px; background: transparent; color: var(--faint);
  border: 1px solid var(--line); cursor: pointer; transition: all .16s ease;
}
.dev:hover { color: var(--ink); border-color: var(--faint); }
.dev[aria-selected="true"] { background: var(--ink); color: #000; border-color: var(--ink); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.filt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; padding: 6px 12px;
  border-radius: 999px; background: transparent; color: var(--faint);
  border: 1px solid var(--line-2); cursor: pointer; transition: all .16s ease;
}
.filt:hover { color: var(--ink); border-color: var(--faint); }
.filt[aria-selected="true"] { background: #1e1e21; color: var(--ink); border-color: var(--ghost); }

.deviceframe {
  margin: 0 auto; max-width: 940px; border: 1px solid var(--edge); border-radius: 8px;
  padding: 11px; background: linear-gradient(180deg, #121214, #08080a);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition: max-width .35s cubic-bezier(.2,.8,.3,1);
}
.deviceframe.handset { max-width: 440px; }
.notch { width: 84px; height: 4px; border-radius: 999px; background: #232327; margin: 3px auto 10px; }
.homebar { width: 110px; height: 3px; border-radius: 999px; background: #232327; margin: 11px auto 3px; }
.screen {
  border-radius: 5px; padding: 15px 15px 20px; border: 1px solid var(--line-2);
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.045), transparent 60%), #050506;
}
.statusbar { display: flex; justify-content: space-between; align-items: center;
             font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
             color: var(--faint); padding: 2px 4px 13px; }
.bars { display: flex; gap: 2px; align-items: flex-end; }
.bars i { width: 3px; background: var(--ghost); display: block; }
.bars i:nth-child(1){height:4px}.bars i:nth-child(2){height:6px}
.bars i:nth-child(3){height:8px}.bars i:nth-child(4){height:10px;background:var(--faint)}

.appgrid { display: grid; gap: 13px; grid-template-columns: repeat(6, 1fr); }
.deviceframe.handset .appgrid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .appgrid, .deviceframe.handset .appgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px) { .appgrid, .deviceframe.handset .appgrid { grid-template-columns: repeat(3, 1fr); } }

.app {
  position: relative; display: flex; flex-direction: column; gap: 7px; align-items: center;
  text-align: center; text-decoration: none; color: inherit;
}
.app[hidden] { display: none; }
.tile {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 22%;
  display: grid; place-items: center; font-size: 25px; line-height: 1;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 6px 16px rgba(0,0,0,.5);
  transition: transform .2s cubic-bezier(.2,.8,.3,1);
  will-change: transform;
}
.app:hover .tile, .app:focus-visible .tile { transform: translateY(-5px) scale(1.05); }
.app:focus-visible { outline: none; }
.app:focus-visible .tile { outline: 2px solid var(--ink); outline-offset: 3px; }
.app .nm { font-size: 11.5px; font-weight: 500; }
.app .dm { font-family: var(--mono); font-size: 8px; letter-spacing: .16em;
           text-transform: uppercase; color: var(--faint); }
.tier { position: absolute; left: 6px; top: 6px; font-family: var(--mono);
        font-size: 7.5px; color: rgba(255,255,255,.5); }
.star { position: absolute; right: 6px; bottom: 5px; font-size: 8px; color: rgba(255,255,255,.7); }
.pip { position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; }
.pip.live { background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 8px rgba(255,255,255,.9); }
.pip.building { background: #b6b6b8; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.pip.research { background: #6f6f73; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.pip.concept { background: transparent; border: 1px solid #6f6f73; }
.pip.open { background: transparent; border: 1px dashed #cfcfd2; }

/* hover card — the short description, so the front page stays quiet */
.hovercard {
  position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0;
  width: 230px; padding: 12px 14px; z-index: 20;
  background: rgba(10,10,12,.97); border: 1px solid var(--edge); border-radius: 4px;
  backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  text-align: left; pointer-events: none;
}
.app:hover .hovercard, .app:focus-visible .hovercard { opacity: 1; visibility: visible; transform: translateY(0); }
.hovercard b { display: block; font-size: 13px; margin-bottom: 5px; }
.hc-line { display: block; font-size: 12px; line-height: 1.5; color: var(--dim); }
.hc-meta { display: block; margin-top: 8px; font-family: var(--mono); font-size: 8.5px;
           letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@media (hover: none) { .hovercard { display: none; } }

.legend { margin: 22px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
          color: var(--faint); text-transform: uppercase; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.legend .pip { position: static; margin-right: 6px; vertical-align: middle; }

/* ------------------------------------------------------------ PAPERS */

.paperlist { margin-top: 24px; border-top: 1px solid var(--line-2); }
.paper { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 4px;
         border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
         transition: background .16s ease; }
@media (min-width: 900px) { .paper { grid-template-columns: 40px 1.1fr 1fr; gap: 28px; } }
.paper:hover { background: #0b0b0d; }
.paper .n { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 4px; }
.paper h3 { font-size: 19px; margin-bottom: 6px; }
.paper .psub { color: var(--dim); font-size: 14px; margin: 0 0 6px; }
.paper .pby { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.paper .pline { color: var(--dim); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------- STEAL */

.steal { background: var(--ink); color: #000; }
.steal .kicker { color: #6b6b6b; }
.steal .body { color: #3a3a3a; }
.steal b { color: #000; }
.pull { margin: 0 0 38px; padding: 0; }
.pull p { font-size: clamp(32px, 6.5vw, 70px); line-height: 1.03; margin: 0 0 12px;
          font-weight: 800; letter-spacing: -0.05em; }
.pull em { color: #6b6b6b; }
.pull cite { font-style: normal; font-size: 12px; color: #7a7a7a; font-family: var(--mono); }

/* -------------------------------------------------------------- OPEN */

.calls { list-style: none; margin: 26px 0 34px; padding: 0; border: 1px solid var(--line);
         border-radius: 4px; overflow: hidden; }
.calls li { background: var(--raise); padding: 15px 20px; color: var(--dim);
            display: flex; gap: 16px; align-items: baseline;
            border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.calls li:last-child { border-bottom: 0; }
.calls li::before { content: attr(data-i); font-family: var(--mono); font-size: 10px;
                    color: var(--faint); flex: none; }

/* ------------------------------------------------------------- FORMS */

.formcard { border: 1px solid var(--line); border-radius: 5px; padding: 24px; background: var(--panel); }
.formcard.steal-form { border-color: var(--ghost); border-style: dashed; }
.twoforms { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
@media (min-width: 900px) { .twoforms { grid-template-columns: 1fr 1fr; } }

.f { margin-top: 14px; display: grid; gap: 10px; }
.frow { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .frow { grid-template-columns: 1fr 1fr; } }
.frow.end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

input[type=text], input[type=email], input[type=tel], input[type=url], textarea {
  width: 100%; padding: 12px 14px; background: #050506; color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55; resize: vertical;
}
input:focus, textarea:focus { outline: none; border-color: var(--faint); background: #08080a; }
input::placeholder, textarea::placeholder { color: var(--ghost); }
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }

.fstatus { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.fstatus.ok { color: #fff; }
.fstatus.err { color: var(--dim); text-decoration: underline; text-decoration-style: dotted; }

.intent .h2 { margin-bottom: 12px; }

/* -------------------------------------------------------- AGENT PAGE */

.agentpage { padding: 120px 0 80px; }
.back { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
        color: var(--faint); text-decoration: none; display: inline-block; margin-bottom: 30px; }
.back:hover { color: var(--ink); }

.dhead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dtile { width: 62px; height: 62px; border-radius: 22%; display: grid; place-items: center;
         font-size: 27px; flex: none; border: 1px solid rgba(255,255,255,.11); }
.dhead h1 { font-size: clamp(30px, 6vw, 52px); }
.dmeta { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
         text-transform: uppercase; color: var(--faint); margin-top: 5px; }
.site { color: var(--dim); text-transform: none; letter-spacing: .04em; }
.chip { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
        text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
        border: 1px solid var(--line); color: var(--dim); }
.chip.live { color: #fff; border-color: #fff; }
.chip.open { border-style: dashed; color: var(--ink); }

.notation { font-family: var(--mono); font-size: 12px; line-height: 1.9; background: #050506;
            border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px;
            margin: 0 0 26px; overflow-x: auto; color: var(--dim); white-space: pre; }
.notation .k { color: var(--ink); } .notation .s { color: #b9b9bb; } .notation .c { color: var(--ghost); }

.dsec { margin-bottom: 22px; max-width: 76ch; }
.dsec h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
           color: var(--faint); margin: 0 0 9px; font-weight: 500; }
.dsec p { color: var(--dim); margin: 0; font-size: 15.5px; }
.dsec ul { color: var(--dim); font-size: 15px; }
.dsec li { margin-bottom: 6px; }
.dsec ul.refuse { list-style: none; padding-left: 0; }
.dsec ul.refuse li { position: relative; padding-left: 22px; }
.dsec ul.refuse li::before { content: "\00d7"; position: absolute; left: 4px; top: -1px; color: var(--faint); }

.note { border-left: 2px solid var(--faint); padding: 12px 16px; background: #0b0b0d;
        font-size: 14.5px; color: var(--dim); border-radius: 0 3px 3px 0; }
.note.take { border-left-style: dashed; border-left-color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border-radius: 999px;
             border: 1px solid var(--line); color: var(--dim); }

/* =========================================================== DEVICES
   Sharp edges, glass, and the eight rings of the mark as the glyph. */

.devstage { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center;
            margin-top: 46px; }
@media (min-width: 940px) { .devstage { grid-template-columns: 320px 1fr; gap: 70px; } }
.devstage.flip { direction: rtl; } .devstage.flip > * { direction: ltr; }

.shell {
  position: relative; margin: 0 auto; border-radius: 10px;
  background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.06));
  padding: 1px;
  box-shadow: 0 50px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
}
.shell .body-plate {
  position: relative; border-radius: 9px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
    #0a0a0c;
  border: 1px solid rgba(255,255,255,.07);
}

.shell.handset { width: min(268px, 78vw); aspect-ratio: 9 / 19.5; }
.shell.tablet  { width: min(480px, 88vw); aspect-ratio: 4 / 3; }

/* the screen */
.dscreen {
  position: absolute; inset: 8px; border-radius: 5px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.05), transparent 62%), #000;
  border: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}
.dbar { display: flex; justify-content: space-between; padding: 9px 11px 0;
        font-family: var(--mono); font-size: 7px; letter-spacing: .18em; color: var(--faint); }
.dapps { flex: 1; display: grid; gap: 8px; padding: 14px 11px; align-content: start; }
.shell.handset .dapps { grid-template-columns: repeat(4, 1fr); }
.shell.tablet  .dapps { grid-template-columns: repeat(7, 1fr); }
.dapp {
  aspect-ratio: 1; border-radius: 24%;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10);
  display: grid; place-items: center; font-size: 10px; color: rgba(255,255,255,.72);
  animation: appin .5s cubic-bezier(.2,.8,.3,1) backwards;
}
.shell.tablet .dapp { font-size: 12px; }
@keyframes appin { from { opacity: 0; transform: scale(.7) translateY(6px); } }

.ddock {
  margin: auto 11px 12px; padding: 7px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  backdrop-filter: blur(6px);
}
.ddock .dapp { animation-delay: .5s; }

/* the intent bar — the organising principle, instead of a search box */
.dintent {
  margin: 0 11px 10px; padding: 8px 10px; border-radius: 4px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; color: var(--dim);
  display: flex; align-items: center; gap: 7px;
}
.dintent .caret { width: 1px; height: 9px; background: var(--ink); animation: blink 1.15s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* physical details */
.lens { position: absolute; border-radius: 50%;
        background: radial-gradient(circle at 34% 30%, #2a2a2e, #050506 62%);
        border: 1px solid rgba(255,255,255,.13); }
.screw { position: absolute; width: 5px; height: 5px; border-radius: 50%;
         background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.side { position: absolute; right: -2px; width: 2px; border-radius: 2px;
        background: rgba(255,255,255,.20); }

/* the glyph: eight arcs, one per ring of the mark */
.glyph { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.glyph svg { width: 68%; height: auto; }
.glyph circle {
  fill: none; stroke: rgba(255,255,255,.9); stroke-linecap: round;
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .12; } 50% { opacity: .95; } }

.devcaption { margin-top: 18px; text-align: center; font-family: var(--mono); font-size: 9.5px;
              letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }

.specs { list-style: none; margin: 22px 0 0; padding: 0; border: 1px solid var(--line);
         border-radius: 4px; overflow: hidden; }
.specs li { display: flex; gap: 14px; padding: 12px 16px; background: var(--raise);
            border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 11.5px;
            align-items: baseline; flex-wrap: wrap; }
.specs li:last-child { border-bottom: 0; }
.specs .sk { color: var(--faint); letter-spacing: .12em; text-transform: uppercase; min-width: 116px; }
.specs .sv { color: var(--ink); }

.draftnote { margin-top: 26px; border-left: 2px dashed var(--faint); padding: 12px 16px;
             background: #0b0b0d; font-size: 14px; color: var(--dim); }

/* ------------------------------------------------------------ FOOTER */

.foot { padding: 46px 0 74px; }
.footgrid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 880px) { .footgrid { grid-template-columns: 320px 1fr; gap: 66px; } }
.foot .muted { max-width: 64ch; }

/* -------------------------------------------------------- RESPONSIVE */

@media (max-width: 900px) { .hudlinks { gap: 12px; font-size: 10px; } .block { padding: 64px 0; } }
@media (max-width: 560px) { .hudlinks a:nth-child(n+3) { display: none; } .agentpage { padding: 100px 0 60px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app:hover .tile, .btn:hover { transform: none; }
  .dapp, .glyph circle, .dintent .caret { animation: none; opacity: 1; }
}

/* ========================================================= FOUR DOORS
   The intent router. Someone lands here for one of four reasons. */

.doors { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 30px 0 0; }
@media (min-width: 720px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .doors { grid-template-columns: repeat(4, 1fr); } }

.door {
  position: relative; display: block; padding: 22px 20px 18px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel);
  color: inherit; transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.door:hover { border-color: var(--edge); transform: translateY(-3px); background: var(--card); }
.door .dnum { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--faint); }
.door h3 { font-size: 17px; margin: 12px 0 8px; letter-spacing: -0.025em; }
.door p { font-size: 13.5px; color: var(--dim); margin: 0 0 16px; }
.door .dgo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
             text-transform: uppercase; color: var(--faint); }
.door:hover .dgo { color: var(--ink); }

/* ========================================================== DISCUSSION
   Collapsed by default. Nothing fetches until it is opened. */

.threadwrap { margin-top: 44px; border-top: 1px solid var(--line-2); padding-top: 22px; }
.threadtoggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  padding: 10px 16px; color: var(--dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  transition: all .16s ease;
}
.threadtoggle:hover { color: var(--ink); border-color: var(--faint); }
.threadtoggle .tt-meta { color: var(--faint); }
.threadtoggle[aria-expanded="true"] { background: var(--ink); color: #000; border-color: var(--ink); }
.threadtoggle[aria-expanded="true"] .tt-meta { color: #555; }
.threadtoggle[aria-expanded="true"] .tt-meta::before { content: "close "; }

.thread { margin-top: 16px; border: 1px solid var(--line); border-radius: 4px;
          padding: 20px; background: var(--panel); max-width: 760px; }
.thread[hidden] { display: none; }
.cm-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
          flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.cm-title { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--faint); }
.cm-title b { color: var(--ink); }

.cm-list { list-style: none; margin: 0; padding: 0; }
.cm { padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.cm:last-child { border-bottom: 0; }
.cm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cm-head b { font-size: 13.5px; }
.cm-when { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.cm p { margin: 0; font-size: 14.5px; color: var(--dim); }
.cm-empty { padding: 18px 0; color: var(--faint); font-size: 14px; }

.cm-vote {
  margin-left: auto; background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--faint);
  font-family: var(--mono); font-size: 10.5px; transition: all .15s ease;
}
.cm-vote:hover { color: var(--ink); border-color: var(--faint); }
.cm-vote.voted { color: var(--ink); border-color: var(--ink); cursor: default; }
.cm-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/* ========================================================= LEADERBOARD */

.lbwrap { margin: 34px 0 0; }
.lb { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line);
      border-radius: 4px; overflow: hidden; }
.lb-row {
  display: grid; grid-template-columns: 34px 1fr 44px; gap: 10px; align-items: center;
  padding: 13px 16px; background: var(--raise); border-bottom: 1px solid var(--line-2);
}
@media (min-width: 720px) {
  .lb-row { grid-template-columns: 40px 180px 1fr 130px 54px; gap: 16px; }
}
.lb-row:last-child { border-bottom: 0; }
.lb-top { background: #131316; }
.lb-top .lb-who { color: #fff; }
.lb-rank { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.lb-top .lb-rank { color: var(--ink); }
.lb-who { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar { display: none; height: 4px; background: #1c1c1f; border-radius: 999px; overflow: hidden; }
@media (min-width: 720px) { .lb-bar { display: block; } }
.lb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4a4a4e, #f6f4f2); }
.lb-stats { display: none; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; }
@media (min-width: 720px) { .lb-stats { display: block; } }
.lb-score { font-family: var(--mono); font-size: 15px; text-align: right; color: var(--ink); font-weight: 700; }
.lb-key { margin-top: 14px; }
.lbrules { margin-top: 46px; border: 1px solid var(--line); border-radius: 4px;
           padding: 24px; background: var(--panel); max-width: 620px; }

/* =========================================================== SEQUENCE */

.rmwave { margin-top: 58px; }
.rmhead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.rmw { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
       color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.rmhead .h2 { font-size: clamp(24px, 3.6vw, 36px); margin: 0; }

.rmlist { margin-top: 22px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.rmrow {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 18px;
  background: var(--raise); border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: inherit; transition: background .16s ease;
}
@media (min-width: 820px) { .rmrow { grid-template-columns: 52px 1fr 110px; gap: 20px; align-items: start; } }
.rmrow:last-child { border-bottom: 0; }
.rmrow:hover { background: #121214; }
.rmrow.rmlast { border-top: 1px dashed var(--ghost); }
.rmtag { font-family: var(--mono); font-size: 11px; color: var(--ink); letter-spacing: .06em; padding-top: 2px; }
.rmbody b { font-size: 16px; display: block; margin-bottom: 4px; }
.rmone { display: block; font-size: 14px; color: var(--dim); margin-bottom: 8px; }
.rmwhy { display: block; font-size: 13px; color: var(--faint); line-height: 1.6; max-width: 68ch; }
.rmstat { display: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
          text-transform: uppercase; color: var(--faint); text-align: right; padding-top: 3px; }
@media (min-width: 820px) { .rmstat { display: block; } }
.rmstat .pip { position: static; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ===================================================== THE MARK, MOVING
   Two animations per band, both compositor-only:
     open  — the figure assembles from the core outward, once, on load
     drift — a very slow opacity breath afterwards, offset per ring so the
             whole thing never pulses in unison (which would read as a
             loading spinner rather than a mark) */

.heromark svg.animate circle {
  animation-name: markopen, markdrift;
  animation-duration: .85s, 9s;
  animation-timing-function: cubic-bezier(.2,.8,.3,1), ease-in-out;
  animation-fill-mode: backwards, none;
  animation-iteration-count: 1, infinite;
  transform-origin: center;
  will-change: opacity;
}
@keyframes markopen  { from { opacity: 0; transform: scale(.9); } }
@keyframes markdrift { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

/* the whole figure breathes very slightly, once every 12s */
.heromark svg.animate { animation: markbreath 12s ease-in-out infinite; }
@keyframes markbreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* a single hairline sweeps the rings — the only moving element on the page */
.markstage { position: relative; }
.markstage::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(300px, 70vw); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 340deg,
    rgba(255,255,255,.22) 352deg, transparent 360deg);
  mask-image: radial-gradient(circle, transparent 26%, #000 30%, #000 98%, transparent 100%);
  animation: sweep 8s linear infinite;
}
@keyframes sweep { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .heromark svg.animate, .heromark svg.animate circle { animation: none; opacity: 1; }
  .markstage::after { animation: none; opacity: .12; }
}

/* ================================================== MOBILE CORRECTIONS

   .paper defines two columns on small screens but has three children, so the
   third wrapped into the 40px column and rendered one word per line. Span it
   across instead. Same guard applied to the other multi-child grid rows so
   the bug cannot come back if a column is ever added. */

.paper .pline { grid-column: 1 / -1; margin-top: 4px; }
@media (min-width: 900px) { .paper .pline { grid-column: auto; margin-top: 0; } }

.rmrow .rmbody { min-width: 0; }
.rmrow .rmwhy, .rmrow .rmone { overflow-wrap: anywhere; }
.lb-row .lb-who { min-width: 0; }

/* nothing may render narrower than it can read */
.paper, .rmrow, .lb-row, .calls li, .ledger li, .specs li { min-width: 0; }
.paper > *, .rmrow > *, .calls li > *, .specs li > * { min-width: 0; }

/* long unbroken strings (urls, keys, slugs) must wrap rather than push */
.body, .lede, .muted, .dsec p, .dsec li, .hc-line, .rmwhy, .psub, .pline,
.notation, .tags span, .cm p { overflow-wrap: anywhere; }
.notation { white-space: pre-wrap; }

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .dhead { gap: 12px; }
  .dhead h1 { font-size: clamp(26px, 8vw, 38px); }
  .chip { margin-left: 0; }
  .hud { gap: 12px; padding: 10px 16px; }
  .agentpage { padding: 96px 0 56px; }
  .block { padding: 56px 0; }
  .formcard { padding: 18px; }
  .thread { padding: 16px; }
  .devstage { gap: 34px; }
  .rmrow { padding: 15px 14px; gap: 12px; }
}

/* ============================================== THE DEVICE SIMULATION

   One agent wakes at a time, and the glyph ring for its domain lights with
   it. That is the whole demonstration: the light on the back tells you which
   domain is working without unlocking anything. */

.dapp { transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1); }
.dapp.awake {
  background: rgba(255,255,255,.92);
  border-color: #fff;
  color: #0a0a0b;
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(255,255,255,.34);
}

.glyph circle { transition: opacity .35s ease, stroke-width .35s ease; }
.glyph circle.lit {
  animation: none;
  opacity: 1;
  stroke: #fff;
  stroke-width: 3.4;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.75));
}

.dintent { transition: border-color .3s ease, background .3s ease; position: relative; }
.dintent .itext { white-space: nowrap; overflow: hidden; }
.dintent.busy { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); }
.dintent.busy::after {
  content: attr(data-agent);
  position: absolute; right: 9px; top: 50%; translate: 0 -50%;
  font-family: var(--mono); font-size: 7px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; opacity: .95;
}
.dintent.busy .caret { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dapp, .glyph circle, .dintent { transition: none; }
  .dapp.awake { transform: none; }
}

/* ============================================ RESPONSIVE CORRECTIONS
   Found by auditing every page at 375, 768 and 1440. */

/* 1. The hover card is 230px wide and centred on its tile. On a three-column
      mobile grid that pushes it past the viewport and creates a horizontal
      scroll. It is a hover affordance, and small screens do not hover, so it
      is simply not shown there. */
@media (max-width: 900px) {
  .hovercard { display: none !important; }
}
.hovercard { max-width: min(230px, 76vw); }

/* 2. Grid children stretch to the row height by default, so the sequence tag
      rendered as a 46 by 166 box. Sit it at the top instead. */
.rmrow > * { align-self: start; }
.rmtag { white-space: nowrap; }

/* 3. Touch targets. Header and footer links were 15 to 16px tall, well under
      what a thumb can hit. Padding grows the target without moving anything
      visually. */
@media (max-width: 900px) {
  .hudlinks { gap: 4px; }
  .hudlinks a { padding: 12px 8px; display: inline-block; }
  .brand { padding: 8px 0; }
  .foot a, .footgrid a { display: inline-block; padding: 6px 0; }
  .legend { gap: 12px 18px; }
}

/* nothing may create a horizontal scrollbar, whatever else goes wrong */
html, body { max-width: 100%; overflow-x: hidden; }