/* TeamTime Make It Real.
   Two surfaces that have to read as different things at a glance: the chat is
   paper, the server is a console. Their red is used because it is theirs, and
   for nothing decorative. */
:root{
  --paper:#FFFFFF; --panel:#F5F6F7; --sunk:#ECEEF0;
  --ink:#131314; --mid:#5A6069; --faint:#8B9199; --line:#E1E4E8;
  --red:#C31818; --ok:#146B3A; --warm:#A8560B;
  --dark:#101216; --dline:#252A31; --dtx:#C3CAD3; --dgn:#7FD6A6; --dye:#E8C07A;
  --ui:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,3.2vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;
  line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2{font-weight:700;letter-spacing:-.03em;line-height:1.05;font-stretch:105%}
.lab{display:block;font-size:12.5px;font-weight:600;color:var(--faint)}
code{font-family:var(--mono);font-size:.92em}

/* ── top ────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--ink);padding:11px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:9px}
.mark b{font-size:17px;font-weight:800;letter-spacing:-.03em;font-stretch:108%}
.mark i{font-style:normal;font-size:13px;color:var(--red);font-weight:600}
.tmeta{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--mid);flex-wrap:wrap}
.tmeta b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tmeta__g b{color:var(--ok)}

/* ── hero ───────────────────────────────────────── */
.hero{padding:clamp(26px,3.8vw,54px) var(--pad) clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(22px,4vw,64px);align-items:end}
.hero h1{font-size:clamp(29px,4.2vw,54px);max-width:17ch}
.sub{font-size:clamp(15.5px,1.5vw,18px);line-height:1.5;color:var(--mid);
  margin-top:15px;max-width:60ch}
.hero__r{border-left:1px solid var(--line);padding-left:clamp(16px,2vw,26px)}
.tl{list-style:none;margin-top:10px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.tl li{background:var(--paper);padding:7px 11px;font-family:var(--mono);font-size:12px;
  color:var(--mid)}
.hero__n{font-size:12px;line-height:1.6;color:var(--faint);margin-top:12px}

/* ── stage ──────────────────────────────────────── */
.stage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  border-bottom:1px solid var(--ink)}
.pane{min-width:0;display:flex;flex-direction:column}
.pane--chat{border-right:1px solid var(--ink);background:var(--paper)}
.pane--log{background:var(--dark)}
.pane__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px var(--pad);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--mid)}
.pane__hd b{font-size:13.5px;color:var(--ink);font-weight:700}
.pane__hd--d{border-color:var(--dline);color:#79818C;font-family:var(--mono);font-size:11.5px}
.pane__hd--d b{color:var(--dtx);font-family:var(--ui)}

.thread{padding:20px var(--pad);display:grid;gap:15px;align-content:start;
  min-height:520px}
.msg{opacity:0;transform:translateY(5px);transition:opacity .22s,transform .22s}
.msg.in{opacity:1;transform:none}
.msg p{font-size:16px;line-height:1.5}
.msg--u{justify-self:end;max-width:min(94%,560px);background:var(--panel);
  border:1px solid var(--line);padding:12px 15px}
.msg--b{max-width:min(94%,620px)}
.msg--b p{padding-left:15px;border-left:2px solid var(--ink)}
.msg--warn p{border-color:var(--red)}
.msg--card{width:100%}
.cc{display:grid;grid-template-columns:132px minmax(0,1fr);gap:15px;align-items:center;
  margin-bottom:10px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.cc svg{width:132px;height:auto}
.cc__t{font-size:11.5px;color:var(--faint);display:grid;gap:4px}
.cc__t em{font-style:normal;color:var(--mid);font-size:13px;line-height:1.4}

/* the inline card */
.tc{border:1px solid var(--ink);background:var(--paper)}
.tc__hd{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--ink);background:var(--ink);color:#fff}
.tc__b{font-weight:800;font-size:13.5px;letter-spacing:-.02em}
.tc__ok{font-size:11.5px;font-weight:600;color:#8FE0AE}
.tc__sk{margin-left:auto;font-family:var(--mono);font-size:11px;color:#8B9199}
.tc__vis{padding:14px 14px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.jz{width:100%;height:auto;display:block}
.jz__nm{font-family:var(--ui);font-size:30px;font-weight:800;fill:#fff;
  paint-order:stroke;stroke:#131314;stroke-width:4px}
.jz__num{font-family:var(--ui);font-size:132px;font-weight:800;fill:#fff;
  paint-order:stroke;stroke:#131314;stroke-width:7px}
.jz__num--b{font-size:150px}
.jz__lb{font-family:var(--ui);font-size:15px;font-weight:600;fill:#8B9199;
  text-anchor:middle;letter-spacing:.14em}
.jz__sw{font-family:var(--mono);font-size:13px;fill:#5A6069}
.tc__cap{display:block;font-size:11.5px;color:var(--faint);margin-top:8px;line-height:1.5}

.tc__cfg{padding:13px 14px;display:grid;gap:10px}
.tc__row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center}
.tc__k{font-size:12.5px;color:var(--mid)}
.tc__cfg select{width:100%;border:1px solid var(--line);background:var(--paper);
  padding:9px 10px;font-size:13.5px;min-height:40px}
.seg{display:flex;border:1px solid var(--line)}
.seg button{flex:1;background:var(--paper);border:0;padding:9px 8px;cursor:pointer;
  font-size:12.5px;color:var(--mid);min-height:40px}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.qty{display:flex;align-items:center;gap:9px}
.qty button{width:40px;height:40px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;font-size:16px}
.qty b{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.qty__n{font-size:11.5px;color:var(--faint)}
.pers{display:flex;gap:8px;min-width:0}
.pers input{flex:1 1 0;min-width:0;border:1px solid var(--line);padding:9px 10px;
  font-size:13.5px;min-height:40px;background:var(--paper)}
.pers input:last-child{flex:0 0 64px;text-align:center}

.tc__pay{padding:13px 14px;border-top:1px solid var(--line);display:grid;gap:11px}
.pz{display:grid;gap:6px}
.pz__r{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;
  color:var(--mid)}
.pz__r b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;font-size:16px}
.pz__s{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:5px}
.tc__wait{font-size:13px;color:var(--faint)}
.tc__done{padding:12px 14px;border-top:1px solid var(--ink);background:var(--panel);
  display:grid;gap:6px}
.tc__done b{font-size:13px}
.tc__done a{font-family:var(--mono);font-size:12px;word-break:break-all;color:var(--red);
  text-decoration:underline;text-underline-offset:2px}
.tc__done span{font-size:11.5px;color:var(--faint)}

.btn{border:1px solid var(--ink);background:var(--paper);padding:11px 18px;cursor:pointer;
  font-size:13.5px;font-weight:600;min-height:44px}
.btn--go{background:var(--ink);color:#fff}
.btn:hover{background:var(--panel)}
.btn--go:hover{background:#000;color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.say{margin-top:auto;padding:13px var(--pad);border-top:1px solid var(--line);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.say__n{font-size:11.5px;color:var(--faint);flex:1 1 190px;line-height:1.45}

/* the console */
.log{padding:14px var(--pad);font-family:var(--mono);font-size:12px;
  overflow-y:auto;max-height:min(78vh,760px);color:var(--dtx)}
.log__idle{color:#79818C;line-height:1.6;font-size:11.5px;max-width:52ch}
.lg{border-top:1px solid var(--dline);padding:11px 0;opacity:0;
  transform:translateY(4px);transition:opacity .2s,transform .2s}
.lg:first-child{border-top:0;padding-top:0}
.lg.in{opacity:1;transform:none}
.lg__h{display:flex;align-items:baseline;gap:8px;font-size:12px}
.lg__h b{color:#fff;font-weight:500}
.lg__h em{font-style:normal;color:#79818C}
.lg__h--b{margin-top:8px}
.lg__d{color:var(--dye)}
.lg__h--b .lg__d{color:var(--dgn)}
.lg__t{margin-left:auto;color:#5C6570}
.lg__p{margin-top:5px;white-space:pre;overflow-x:auto;color:#9AA3AD;line-height:1.5;
  font-size:11.5px;padding-bottom:2px}
.lg__p--o{color:var(--dgn)}
.lg--bad .lg__p--o{color:#F0846E}
.lg--bad .lg__h--b .lg__d{color:#F0846E}
.lg__n{margin-top:8px;font-family:var(--ui);font-size:12px;line-height:1.5;
  color:#79818C;max-width:56ch}

/* ── real catalog ───────────────────────────────── */
.cat{padding:clamp(28px,3.6vw,52px) var(--pad);border-bottom:1px solid var(--ink)}
.cat__hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:clamp(18px,3vw,44px);align-items:end}
.cat h2{font-size:clamp(23px,2.9vw,38px);margin-top:8px;max-width:20ch}
.cat__n{font-size:14px;line-height:1.55;color:var(--mid)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:24px}
.pc{background:var(--paper)}
.pc img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;
  padding:6px}
.pc figcaption{padding:13px 15px 15px;border-top:1px solid var(--line);display:grid;gap:5px}
.pc b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.pc__s{font-size:12px;color:var(--faint)}
.pc__p{display:flex;gap:18px;margin-top:5px}
.pc__p i{font-style:normal;font-size:11.5px;color:var(--mid);display:grid;gap:2px}
.pc__p b{font-size:17px;font-variant-numeric:tabular-nums}

/* ── the two things worth saying ────────────────── */
.truth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border-bottom:1px solid var(--ink)}
.tr{background:var(--paper);padding:clamp(24px,3vw,44px) var(--pad)}
.tr h2{font-size:clamp(21px,2.4vw,31px);margin-top:9px;max-width:24ch}
.tr__q{font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--mid);
  border-left:3px solid var(--red);padding:2px 0 2px 15px;margin-top:18px}
.tr__w{font-size:14.5px;line-height:1.6;margin-top:14px;max-width:56ch}
.tr__b{font-size:15px;line-height:1.62;color:var(--mid);margin-top:12px;max-width:58ch}
.tr__b:first-of-type{margin-top:14px}
.tr__src{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:10px}
.tr__n{font-size:12.5px;line-height:1.6;color:var(--faint);margin-top:14px;max-width:60ch}
.steps{list-style:none;margin-top:20px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.steps li{background:var(--paper);padding:11px 14px;display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.steps b{font-family:var(--mono);font-size:13px;font-weight:500}
.steps span{font-size:13px;color:var(--mid)}
.tr--fix{background:var(--panel)}
.ht{width:100%;border-collapse:collapse;margin-top:20px;font-size:12.5px}
.ht td{border-top:1px solid var(--line);padding:8px 0;vertical-align:top}
.ht td:first-child{font-family:var(--mono);color:var(--mid);width:44%;padding-right:12px}
.ht tr:first-child td{border-top:0}

/* ── open ───────────────────────────────────────── */
.open{padding:clamp(26px,3.4vw,50px) var(--pad);border-bottom:1px solid var(--line)}
.ok{display:grid;margin-top:14px}
.ok > div{padding:17px 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,230px);gap:7px clamp(18px,2.6vw,40px);
  align-items:baseline}
.ok > div:first-child{border-top:0;padding-top:2px}
.ok b{font-size:17.5px;font-weight:700;letter-spacing:-.02em;grid-column:1;line-height:1.25}
.ok p{font-size:14px;line-height:1.6;color:var(--mid);grid-column:1;margin-top:2px}
.ok em{font-style:normal;font-size:13.5px;color:var(--red);font-weight:600;
  grid-column:2;grid-row:1 / span 2;border-left:2px solid var(--red);padding-left:13px;
  line-height:1.4}

/* ── foot ───────────────────────────────────────── */
.foot{padding:22px var(--pad) 46px;display:grid;
  grid-template-columns:180px minmax(0,1fr);gap:14px 30px}
.foot p{font-size:13.5px;line-height:1.75;color:var(--mid);max-width:76ch}
.foot p + p{margin-top:12px}

/* ── responsive ─────────────────────────────────── */
@media (max-width:1060px){
  .hero,.stage,.truth,.cat__hd,.foot{grid-template-columns:minmax(0,1fr)}
  .hero__r{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
  .tl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pane--chat{border-right:0;border-bottom:1px solid var(--ink)}
  .log{max-height:440px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ok > div{grid-template-columns:minmax(0,1fr)}
  .ok em{grid-column:1;grid-row:auto;margin-top:9px}
}
@media (max-width:640px){
  .thread{min-height:0;padding-top:16px;gap:13px}
  .msg p{font-size:15.5px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .tl{grid-template-columns:minmax(0,1fr)}
  .tc__row{grid-template-columns:minmax(0,1fr);gap:6px}
  .tc__k{font-size:11.5px;color:var(--faint)}
  .cc{grid-template-columns:72px minmax(0,1fr);gap:11px}
  .cc svg{width:72px}
  .btn{flex:1 1 auto;text-align:center}
  .say__n{flex:1 1 100%}
  .log{font-size:11px;max-height:360px}
  .lg__p{font-size:10.5px}
  .jz__nm{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.msg,.lg{transition:none}}