/* veryagile.ai - one stylesheet for the whole site.
   The first half is the landing page's own CSS, unchanged; the second half is
   the same vocabulary applied to the auth cards and the signed-in pages. */
:root{
  --ink:#000000;
  --raise:#0d0d0d;
  --line:#1e1e1e;
  --line-hi:#2f2f2f;
  --white:#ffffff;
  --dim:#8f8f8f;
  --faint:#5c5c5c;
  --flame:#ff5a1f;
  --flame-deep:#2a1206;
  --gut:clamp(20px,5vw,72px);
  --stack:clamp(56px,9vw,112px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px}
[hidden]{display:none !important}
.wrap{max-width:1080px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.display{font-weight:700;letter-spacing:-0.035em;line-height:1.04}
.rule{border:0;border-top:1px solid var(--line)}

/* header */
.bar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.mark{font-weight:700;font-size:19px;letter-spacing:-0.03em}
.mark span{color:var(--flame)}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--dim)}
.nav a:hover,.nav a.on{color:var(--white)}
.btn{display:inline-block;background:var(--flame);color:#190800;font-weight:500;font-size:14px;
  padding:11px 20px;border-radius:4px;line-height:1;white-space:nowrap;border:0;font-family:inherit;cursor:pointer}
.btn:hover{background:#ff7440}
.btn:disabled{opacity:.6;cursor:default}
.btn-ghost{background:transparent;color:var(--white);border:1px solid var(--line-hi)}
.btn-ghost:hover{background:#141414}
/* The signed-in pages' links (templates/app.html). Wide: in the bar, sharing
   the nav's gap. Narrow: folded into a panel under the bar that the menu
   button opens - every page stays reachable, not only the one you are on. */
.pages{display:contents}
.burger{display:none;width:40px;height:40px;margin-right:-10px;background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:4px}
.burger i{display:block;width:18px;height:2px;background:var(--white);border-radius:1px;
  transition:transform .18s,opacity .18s}
.bar.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bar.open .burger i:nth-child(2){opacity:0}
.bar.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:720px){
  .bar .wrap{gap:16px}
  .nav{gap:16px}
  .burger{display:flex}
  .pages{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(0,0,0,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);padding:4px var(--gut) 18px;font-size:15px}
  .bar.open .pages{display:flex}
  .pages a{display:block;padding:13px 0;border-top:1px solid var(--line)}
  .pages a:first-child{border-top:0}
  .pages .acct{padding-top:14px;border-top:1px solid var(--line);margin-top:2px}
}
/* the language switch, top right: the current language plain, the other a link */
.lang{white-space:nowrap;font-size:13px}
.lang b{font-weight:500;color:var(--dim)}
.lang i{font-style:normal;color:var(--line-hi);margin:0 6px}
.lang a{color:var(--faint)}
.lang a:hover{color:var(--white)}

/* hero */
/* top and bottom only: these sit on .wrap, whose side gutters must survive */
.hero{padding-top:calc(var(--stack) * 1.1);padding-bottom:var(--stack)}
.hero h1{font-size:clamp(40px,8.4vw,88px);max-width:14ch;margin-bottom:28px}
.hero h1 em{font-style:normal;color:var(--flame)}
.lede{font-size:clamp(16px,2vw,19px);color:var(--dim);max-width:52ch;margin-bottom:36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.figures{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,72px);margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.fig b{display:block;font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-0.03em;line-height:1}
.fig small{display:block;font-size:13px;color:var(--faint);margin-top:8px}

/* work */
.sec{padding-top:var(--stack);padding-bottom:var(--stack)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:44px}
.sec-head h2{font-size:clamp(26px,4.4vw,42px);font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.sec-head p{font-size:14px;color:var(--faint);max-width:34ch}
.sec-head .aside{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
@media(max-width:760px){.sec-head .aside{align-items:flex-start}}

.job{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;gap:clamp(16px,4vw,48px);
  align-items:start;padding:34px 0;border-top:1px solid var(--line)}
.job:last-of-type{border-bottom:1px solid var(--line)}
.job h3{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.job .client{font-size:13px;color:var(--flame);margin-top:6px}
.job p{font-size:15px;color:var(--dim)}
.spec{font-size:13px;color:var(--faint);text-align:right;white-space:nowrap;line-height:1.9}
@media(max-width:760px){
  .job{grid-template-columns:1fr;gap:14px}
  .spec{text-align:left}
}

/* roster */
.chain{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.hand{background:var(--ink);padding:22px 20px 24px;display:flex;gap:16px;align-items:flex-start}
.hand h4{font-size:16px;font-weight:600;letter-spacing:-0.01em}
.hand .role{font-size:13px;color:var(--dim);margin-top:2px}
.hand .does{font-size:12.5px;color:var(--faint);margin-top:9px;line-height:1.55}
.hand.key{background:#080808}
.hand.key h4::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--flame);margin-left:8px;vertical-align:middle}
.hand.empty{grid-column:1 / -1;color:var(--faint);font-size:14px}

.gate{margin-top:28px;display:flex;gap:14px;align-items:flex-start;border-left:2px solid var(--flame);
  padding:14px 0 14px 18px}
.gate p{font-size:14px;color:var(--dim);max-width:60ch}
.gate strong{color:var(--white);font-weight:500}

/* contact */
.end{background:#070707;border-top:1px solid var(--line)}
.end .wrap{padding-top:var(--stack);padding-bottom:var(--stack)}
.end h2{font-size:clamp(28px,5vw,50px);max-width:16ch;margin-bottom:18px}
.end p{color:var(--dim);max-width:48ch;margin-bottom:30px}
.form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.form input,.form textarea,input.field,textarea.field,select.field{
  background:#111;border:1px solid var(--line-hi);color:var(--white);
  font:inherit;font-size:15px;padding:12px 16px;border-radius:4px;width:100%}
/* Only the inline contact form lays its fields out in a row; a stacked
   .fields label is a column, where a flex-basis would become height. */
.form input,.form textarea,.form .field{flex:1 1 240px}
.form textarea,textarea.field{flex-basis:100%;min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select.field:focus{border-color:var(--flame);outline:none}
input:disabled{color:var(--dim)}
.form button{font:inherit;border:0;cursor:pointer}
.note{font-size:13px;color:var(--faint);margin-top:16px;min-height:1.2em}
.note.bad{color:var(--flame)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:28px;padding-bottom:28px;font-size:13px;color:var(--faint)}
footer a:hover{color:var(--white)}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .reveal:nth-child(2){animation-delay:.09s}
  .reveal:nth-child(3){animation-delay:.18s}
  .reveal:nth-child(4){animation-delay:.27s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---- shared bits: chips, avatars, the live line ---------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);
  border:1px solid var(--line-hi);border-radius:4px;padding:4px 9px;line-height:1;white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--flame);display:inline-block}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--flame);display:inline-block}
.live.stale i{background:var(--faint)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--flame-deep);color:var(--flame);
  font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  flex:none;letter-spacing:0;overflow:hidden;box-shadow:0 0 0 1px var(--line-hi)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar.lg{width:40px;height:40px;font-size:13px}
/* A key agent wears the flame as a ring, where the landing page used to colour its number. */
.avatar.key{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--flame)}
.avatars{display:flex;align-items:center}
.avatars .avatar{border:2px solid var(--ink)}
.avatars .avatar+.avatar{margin-left:-6px}
.avatars .count{font-size:12.5px;color:var(--faint);margin-left:14px}

/* ---- auth cards ---------------------------------------------------------- */
.card{max-width:400px;margin:clamp(48px,10vh,96px) auto;padding:0 var(--gut);
  display:flex;flex-direction:column;gap:14px}
.card h1{font-size:clamp(28px,5vw,34px)}
.card h1 em{font-style:normal;color:var(--flame)}
.card .lede{font-size:15px;margin-bottom:10px}
.card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}
.card label small{font-size:12px;color:var(--faint)}
.card .btn{text-align:center;margin-top:6px;padding:14px 20px}
.card .btn+.btn-ghost{margin-top:0}
.links{font-size:13px;color:var(--faint);display:flex;flex-direction:column;gap:6px;margin-top:6px}
.links a,.linklike{color:var(--dim);text-decoration:underline;background:none;border:0;
  padding:0;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.links a:hover,.linklike:hover{color:var(--white)}
.error{font-size:13px;color:var(--flame)}
.card strong{color:var(--white);font-weight:500}
.card p{font-size:15px;color:var(--dim)}
.card .gate{margin-top:4px}
/* the sign-in page: no bar, no footer; the mark is the heading */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--gut)}
.auth-min{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:28px}
.auth-min .mark{font-size:28px;letter-spacing:-0.035em;line-height:1}
.auth-min form{width:100%}
.auth-min .fields{gap:12px;max-width:none}
.joined{display:flex;flex-direction:column;background:#111;border:1px solid var(--line-hi);border-radius:4px;overflow:hidden}
.joined:focus-within{border-color:var(--flame)}
.joined .field{border:0;border-radius:0;background:transparent}
.joined .field+.field{border-top:1px solid var(--line-hi)}
.joined .field:focus{border-color:var(--line-hi)}
.auth-min .btn{margin-top:0;text-align:center;padding:14px 20px}
.auth-min .error,.auth-min .ok,.auth-min #resend-row{text-align:center}
.links-row{display:flex;justify-content:center;gap:8px;font-size:13px;color:var(--faint)}
.links-row i{font-style:normal;color:var(--line-hi)}
.links-row a{color:var(--faint)}
.links-row a:hover{color:var(--white)}

/* ---- signed-in pages ------------------------------------------------------ */
.acct{display:inline-flex;align-items:center;gap:10px;color:var(--white);font-size:14px}
.head{padding-top:var(--stack)}
.head h1{font-size:clamp(34px,5.5vw,56px);max-width:16ch;margin-bottom:16px}
.head h1 em{font-style:normal;color:var(--flame)}
.head p{font-size:17px;color:var(--dim);max-width:56ch}
.head .meta{margin-top:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sec.tight{padding-top:48px}

.thead,.row{display:grid;grid-template-columns:40px 200px 1fr 220px 120px;gap:24px;align-items:center}
.thead{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding-bottom:10px}
.thead .r,.row .last{text-align:right}
.row{padding:20px 0;border-top:1px solid var(--line)}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row h4{font-size:15px;font-weight:600}
.row .role{font-size:12.5px;color:var(--dim)}
.row .does{font-size:13px;color:var(--faint);line-height:1.5}
.row .spaces{display:flex;gap:6px;flex-wrap:wrap}
.chip.own{color:var(--ink);border-color:var(--flame)}
.job.mine .client{font-weight:600}
.row .last{font-size:12px;color:var(--faint)}
@media(max-width:860px){
  .thead{display:none}
  .row{grid-template-columns:40px 1fr;gap:10px 16px}
  .row .does,.row .spaces,.row .last{grid-column:2}
  .row .last{text-align:left}
}

.block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;padding:40px 0;border-top:1px solid var(--line)}
.block:last-of-type{border-bottom:1px solid var(--line)}
.block h3{font-size:20px;font-weight:600;letter-spacing:-0.02em}
.block .why{font-size:13.5px;color:var(--faint);margin-top:8px;line-height:1.55}
.fields{display:flex;flex-direction:column;gap:14px;max-width:460px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}
.fields .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.block{grid-template-columns:1fr;gap:20px}}

.th,.tok{display:grid;grid-template-columns:1fr 120px 120px 80px;gap:16px;font-size:13px;align-items:center}
.th{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding-bottom:8px}
.tok{padding:12px 0;border-top:1px solid var(--line)}
.tok .m{color:var(--faint)}
.tok .act{text-align:right}
.tok .act button{background:none;border:0;color:var(--dim);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer}
.tok .act button:hover{color:var(--white)}
.secret{background:#111;border:1px solid var(--line-hi);color:var(--white);padding:14px 16px;border-radius:4px;
  font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:13px;white-space:pre-wrap;word-break:break-all;margin-top:14px}
.empty{color:var(--faint);font-size:14px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ok{font-size:13px;color:var(--dim)}

/* ---- the console ------------------------------------------------------------ */
.cons .thead,.cons .row{grid-template-columns:minmax(0,1fr) 130px minmax(0,1.3fr) minmax(0,1fr)}
.cons .row{align-items:start}
.cons .row h4{font-size:15px;font-weight:600}
.cons .row .key{font-size:13px;color:var(--flame);margin-top:2px}
.cons .row .key.off{color:var(--faint)}
.cons .row .m{font-size:12.5px;color:var(--faint);margin-top:4px}
.cons .links-cell{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cons .chips{display:flex;gap:6px;flex-wrap:wrap}
.chip button{background:none;border:0;color:var(--faint);font:inherit;font-size:14px;line-height:1;
  padding:0 0 0 2px;cursor:pointer}
.chip button:hover{color:var(--white)}
.cons .form{max-width:none;gap:8px}
.cons .form select{flex:1 1 160px;background:#111;border:1px solid var(--line-hi);color:var(--white);
  font:inherit;font-size:14px;padding:9px 12px;border-radius:4px}
.cons .form .btn{padding:10px 16px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;color:var(--dim);user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:36px;height:20px;border-radius:10px;background:var(--line-hi);position:relative;
  flex:none;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--white);transition:transform .15s}
.switch input:checked+i{background:var(--flame)}
.switch input:checked+i::after{transform:translateX(16px)}
.switch input:focus-visible+i{outline:2px solid var(--flame);outline-offset:3px}
@media(max-width:860px){
  .cons .row{grid-template-columns:1fr;gap:12px}
  .cons .row>*{grid-column:1}
}

/* --- the studio floor (VERY-1) ---------------------------------------------
   The section under the hero: every step the agents take, live. Built on the
   vocabulary already here - .live for the dot, .avatar for the initials, .gate
   for the note - so it reads as part of the page rather than beside it.

   The name used to be a column of its own, so a stream of the same ten agents
   could be scanned down the names. Name, verb and key now share one line
   (VERY-3), and the name still leads it - first, and the first to give way. */
.floor{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:3px;
  align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.step .avatar{grid-row:1 / span 3;margin-top:1px}
/* One line: who, what, which task. Not `.head`: that is the page header's class,
   with padding-top:var(--stack), and the first cut of VERY-3 used it here - every
   row opened on an empty band until a screenshot showed it.
   When the width runs out the name is cut
   first - an ellipsis on a name costs less than one on a verb or a key. */
.step .step-line{grid-column:2;display:flex;align-items:baseline;gap:0 6px;min-width:0;
  white-space:nowrap;font-size:15px;line-height:1.4}
.step .who{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;letter-spacing:-0.01em}
/* The verb carries the row: three actions on one ticket are otherwise the
   same line three times. Brighter than the title, not louder than the name. */
.step .act{flex:none;color:var(--white);font-weight:500}
/* The key is a link and looks like one, quietly: underlined in the line colour,
   not in flame - flame is what marks the newest row, and a feed that flashes is
   a feed nobody can read. */
.step .key{flex:none;color:var(--white);font-variant-numeric:tabular-nums;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.step .key:hover,.step .key:focus-visible{text-decoration-color:currentColor}
/* The title, underneath, wrapped over as many lines as it needs. */
.step .what{grid-column:2;grid-row:3;min-width:0;font-size:14px;line-height:1.45;
  color:var(--dim);overflow-wrap:anywhere}
/* When, and what changed, on the line under who-what-which. On every width since
   VERY-4: the time used to sit at the right of the first line on a desktop, but a
   change belongs beside its time, and the first line keeps its whole width. */
.step .meta{grid-column:2;grid-row:2;min-width:0;font-size:12.5px;line-height:1.5;
  color:var(--faint);overflow-wrap:anywhere}
.step .at{font-variant-numeric:tabular-nums;white-space:nowrap}
.step .change{color:var(--dim)}
/* The newest row, and the only thing that marks it: the time in flame. Restraint
   rather than a highlight, because a feed that flashes is a feed nobody can read. */
.step.new .at{color:var(--flame)}
.floor .idle{padding:44px 0;border-bottom:1px solid var(--line)}
.floor .idle p{font-size:15px;color:var(--dim);max-width:46ch}
.floor .idle strong{color:var(--white);font-weight:500}
@media(prefers-reduced-motion:no-preference){
  .step.new{animation:rise .7s cubic-bezier(.2,.7,.3,1)}
}
/* A run: its steps as one row, open while it is going on (floor.entries). The
   list is a thread down the left with a dot per step - grey when done, flame
   when it failed - and the summary carries a flame dot while the run is live. */
.step .run-steps{grid-column:2;margin-top:6px}
.run-steps summary{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);
  cursor:pointer;list-style:none;user-select:none}
.run-steps summary::-webkit-details-marker{display:none}
.run-steps summary::before{content:"";border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s}
.run-steps[open] summary::before{transform:rotate(90deg)}
.run-steps summary:hover{color:var(--white)}
.step.run.live .run-steps summary{color:var(--dim)}
.step.run.live .run-steps summary::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame)}
.run-steps ol{list-style:none;margin:10px 0 2px 3px;padding-left:16px;border-left:1px solid var(--line-hi);
  display:flex;flex-direction:column;gap:5px}
.run-steps li{position:relative;display:flex;gap:12px;align-items:baseline;font-size:13px;line-height:1.5;color:var(--dim)}
.run-steps li::before{content:"";position:absolute;left:-20px;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--line-hi);box-shadow:0 0 0 2px var(--ink)}
.run-steps li.done::before{background:var(--faint)}
.run-steps li.failed::before{background:var(--flame)}
/* `.step` first, so the newest row's flame time (.step.new .at) stays on the row's own time. */
.step .run-steps li .at{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.run-steps li .st{font-size:12px;color:var(--faint)}
.run-steps li.failed .st{color:var(--flame)}
@media(prefers-reduced-motion:no-preference){
  .step.run.live .run-steps summary::after{animation:beat 1.6s ease-in-out infinite}
  @keyframes beat{50%{opacity:.25}}
}
@media(max-width:720px){
  /* The same three lines as on a desktop, a little tighter. The first line has
     the whole width everywhere now - at 390px the clock and "Marcel commented on
     WORK-429" could not share it, which is how the time came to its own line. */
  .step{column-gap:12px;row-gap:2px}
  .step .step-line{font-size:14.5px}
  .step .meta{font-size:12px}
  .step .what{font-size:13.5px}
}

/* --- projects: the home page's carousel, and a project's own page ----------
   Both drawn from each space's wiki (app/core/projects.py). The carousel is a
   scroll-snap track that starts on the wrap's content edge and runs out to the
   right edge of the screen, so the next card is always partly in view. It
   scrolls with a finger, a wheel or the keyboard on its own; app.js adds the
   arrows, the counter and the bar. */
.car-head{align-items:flex-end}
.car-intro{display:flex;flex-direction:column;gap:14px}
.car-intro p{font-size:14px;color:var(--faint);max-width:46ch}
.car-ctl{display:flex;align-items:center;gap:8px}
.car-count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-right:6px}
.car-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--line-hi);border-radius:4px;color:var(--white);cursor:pointer}
.car-btn:hover{background:#141414}
.car-btn:disabled{border-color:var(--line);color:var(--faint);background:transparent;cursor:default}
.car-track{--edge:max(var(--gut),calc((100% - 1080px) / 2 + var(--gut)));
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding-left:var(--edge);padding-right:var(--gut);scroll-padding-left:var(--edge);scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--flame);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}
/* `.pcard`, not `.card`: that one is the auth pages' form column. */
.pcard{flex:0 0 min(440px,78vw);scroll-snap-align:start;display:flex;flex-direction:column}
.shot{display:block;aspect-ratio:16/10;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--raise)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.pcard:hover .shot{border-color:var(--line-hi)}
.shot.none{display:flex;align-items:center;justify-content:center}
.shot.none span{font-weight:700;font-size:40px;letter-spacing:-0.03em;color:var(--line-hi)}
.pcard-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;min-height:32px}
.pcard-key{font-size:13px;color:var(--flame)}
.pcard.mine .pcard-key{font-weight:600}
.pcard-body{flex:1;padding-bottom:20px}
.pcard h3{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;margin-top:6px}
.pcard p{font-size:15px;color:var(--dim);margin-top:10px;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.pcard-open{display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:14px;font-weight:500}
.pcard-open svg{color:var(--flame)}
.pcard-foot>span{font-size:12px;color:var(--faint);white-space:nowrap}
.car-foot{display:flex;align-items:center;gap:24px;margin-top:40px}
.car-bar{flex:1;max-width:560px;height:2px;background:var(--line);position:relative;overflow:hidden}
.car-bar i{position:absolute;top:0;left:0;height:2px;width:0;background:var(--flame)}
.car-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--dim);margin-left:auto}
.car-all:hover{color:var(--white)}
@media(max-width:760px){
  .car-btn{display:none}
  .car-track{gap:16px}
}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);margin-bottom:22px}
.crumb a{color:var(--dim);padding:10px 0;margin:-10px 0}
.crumb a:hover{color:var(--white)}
/* "In collaboration with ...": a project both studios' consoles show. */
.chip.collab{color:var(--white);border-color:var(--line-hi)}
.cover{margin:48px 0 0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--raise)}
.cover img{display:block;width:100%;height:auto}
.tabs-bar{position:sticky;top:70px;z-index:10;margin-top:64px;background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tabs-row{display:flex;align-items:stretch;justify-content:space-between;gap:24px}
.tabs{display:flex;gap:36px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:10px;min-height:56px;font-size:15px;font-weight:500;
  color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a small{font-size:11px;color:var(--faint);letter-spacing:.04em}
.tabs a:hover{color:var(--white)}
.tabs a.on{color:var(--white);border-bottom-color:var(--flame)}
.tabs a.on small{color:var(--flame)}
.tabs-row .out{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--faint);white-space:nowrap}
.tabs-row .out:hover{color:var(--white)}
@media(max-width:720px){.tabs{gap:26px}.tabs-row .out{display:none}}

.proj-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.proj-aside{display:flex;flex-direction:column;gap:30px}
.lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.proj-aside .v{font-size:14px}
.seat{display:flex;gap:12px;align-items:center}
.seat+.seat{margin-top:14px}
.seat b{display:block;font-size:14px;font-weight:500;line-height:1.3}
.seat small{display:block;font-size:12.5px;color:var(--dim);line-height:1.4}
.proj-aside .more{display:inline-block;margin-top:14px;font-size:13px;color:var(--dim)}
.proj-aside .more:hover{color:var(--white)}
@media(max-width:760px){
  .proj-body{grid-template-columns:1fr;gap:30px}
  .proj-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;
    padding-bottom:26px;border-bottom:1px solid var(--line)}
  .proj-aside .seated{grid-column:1 / -1}
}

/* A wiki page as written, sanitised at sync time: the site's prose, never the
   wiki's own look. */
.wiki{min-width:0}
/* The page's own blocks only (`>`): the stack's rows sit inside .wiki too, and
   an h4 there is a row's label, not a heading with room above it. */
.wiki>*+*{margin-top:14px}
.wiki>h1,.wiki>h2{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.3;margin-top:40px}
.wiki>h3,.wiki>h4,.wiki>h5,.wiki>h6{font-size:16px;font-weight:600;line-height:1.4;margin-top:28px}
.wiki>:first-child{margin-top:0}
.wiki>h1+*,.wiki>h2+*,.wiki>h3+*,.wiki>h4+*{margin-top:10px}
.wiki p,.wiki li{font-size:15px;color:var(--dim);line-height:1.7;max-width:62ch}
.wiki strong{color:var(--white);font-weight:500}
.wiki a{color:var(--white);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.wiki a:hover{text-decoration-color:currentColor}
.wiki ul{list-style:none}
.wiki ul>li{position:relative;padding-left:20px}
.wiki ul>li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--faint)}
.wiki ol{padding-left:22px}
.wiki li+li{margin-top:8px}
.wiki img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.wiki code{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;font-size:13px;background:#111;
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--white)}
.wiki pre{background:var(--raise);border:1px solid var(--line);border-radius:4px;padding:14px 16px;overflow-x:auto}
.wiki pre code{background:none;border:0;padding:0;line-height:1.6}
.wiki pre.mermaid{text-align:center;font-size:13px;color:var(--dim);white-space:pre-wrap}
.wiki blockquote{border-left:1px solid var(--line-hi);padding-left:16px}
.wiki table{display:block;overflow-x:auto;border-collapse:collapse;font-size:14px}
.wiki th,.wiki td{border-top:1px solid var(--line);padding:10px 16px 10px 0;text-align:left;vertical-align:top;color:var(--dim)}
.wiki th{font-size:11px;font-weight:400;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.wiki hr{border:0;border-top:1px solid var(--line);margin-top:32px}
.wiki .gate{margin-top:48px}

/* The Tech stack tab: the page's first table, drawn as the stack. */
.stack{margin-top:36px}
.stack-head,.srow{display:grid;grid-template-columns:170px minmax(0,1.1fr) minmax(0,1.3fr);gap:32px}
.stack-head{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding-bottom:10px}
.srow{padding:24px 0;border-top:1px solid var(--line);align-items:start}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow h4{font-size:15px;font-weight:600;letter-spacing:-0.01em;line-height:1.5}
.srow .t{display:flex;flex-wrap:wrap;gap:6px}
.srow p{font-size:14px;color:var(--dim);line-height:1.6;max-width:none}
.tech{display:inline-flex;align-items:center;font-size:13px;color:var(--white);border:1px solid var(--line-hi);
  border-radius:4px;padding:6px 10px;line-height:1;white-space:nowrap}
@media(max-width:760px){
  .stack-head{display:none}
  .srow{grid-template-columns:1fr;gap:10px}
}

/* The console's project-page column (templates/console.html). */
.cons .pages-cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cons .st{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chip.lit{color:var(--white);border-color:var(--flame)}
.cons .m-link{font-size:13px;color:var(--dim);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:3px}
.cons .m-link:hover{color:var(--white)}
.cons .pg{display:flex;flex-wrap:wrap;gap:6px 14px}
.cons .pg span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);white-space:nowrap}
.cons .pg span.no{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line-hi)}
.cons .pg span.has svg{color:var(--flame)}