/* What the boards never needed: sidebar links and states, the tooltip, form bits, phone layout. kit.css is the storyboard's own. */
html, body { background: #fff; }
.ob { min-height: 100vh; }
.shell { min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; }
.nav-a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 4px; font-size: 13px; letter-spacing: -.006em; color: var(--mfg); text-decoration: none; }
.nav-a:hover { color: #000; background: rgba(255,255,255,.55); }
.nav-a[aria-current="page"] { background: #fff; color: #000; font-weight: 500; box-shadow: 0 1px 2px rgba(20,20,25,.05); }
.main { outline: none; min-width: 0; }
a { color: inherit; }
a.btn { text-decoration: none; }
button.tab { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
button.tab:hover:not(.on) { background: var(--muted-2); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-mono:hover { background: #2a2a2a; }
.btn-outline:hover, .btn-muted:hover { background: #e3e7e9; }
:focus-visible { outline: 2px solid #3B73FF; outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tip { position: fixed; z-index: 40; pointer-events: none; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font: 12px/1.5 "Instrument Sans", "Pretendard", sans-serif; min-width: 220px; box-shadow: 0 8px 24px rgba(20,20,25,.12); }
.tip table { border-collapse: collapse; margin-top: 6px; font-family: "GeistMono", monospace; font-variant-numeric: tabular-nums; }
.tip td { padding: 1px 10px 1px 0; color: #4d5353; }
.tip tr.on td { color: #000; font-weight: 600; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 48px; text-align: center; color: var(--mfg); font-size: 14px; }
.err { color: #b00010; font-size: 13px; }
.errbox { border: 1px solid rgba(228,0,20,.25); background: rgba(228,0,20,.04); border-radius: 6px; padding: 14px 16px; color: #8a000f; font-size: 14px; }
[data-drop].over { border-color: #0F766E !important; background: rgba(15,118,110,.06) !important; }
.list-btn { all: unset; box-sizing: border-box; cursor: pointer; }
.list-btn:hover, .list-btn.on { background: var(--muted-2) !important; }
.list-btn:focus-visible { outline: 2px solid #3B73FF; outline-offset: -2px; }
@media (max-width: 1100px) {
  .main section[style*="grid-template-columns:minmax(0,1.55fr)"], .main section[style*="grid-template-columns:minmax(0,1.6fr)"],
  .main section[style*="grid-template-columns:minmax(0,1.3fr)"], .main section[style*="grid-template-columns:minmax(0,1.4fr)"],
  .main section[style*="grid-template-columns:minmax(0,1.35fr)"], .main section[style*="grid-template-columns:minmax(0,1fr) minmax(360px,1fr)"] { grid-template-columns: 1fr !important; }
  .main section[style*="grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .side { position: static; width: auto !important; height: auto; min-height: 0 !important; }
  .side nav { flex-direction: row !important; flex-wrap: wrap; }
  .side > div:last-child { display: none !important; }
  .main { padding: 16px !important; }
  .main [style*="grid-template-columns:repeat(4"], .main [style*="grid-template-columns:repeat(2"], .main [style*="grid-template-columns:168px"],
  .main [style*="grid-template-columns:1fr 1fr"], .main [style*="minmax(420px"], .main [style*="minmax(380px"] { grid-template-columns: 1fr !important; }
  .main [style*="grid-template-columns:minmax(0,340px)"] { grid-template-columns: 1fr !important; }
  .main [style*="grid-template-columns:repeat(3"], .main [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
  .main .ag-step { grid-template-columns: 22px 26px minmax(0,1fr); }
  .main .ag-step .ag-d { grid-column: 2 / -1; }
  .main [style*="display:grid"] > * { min-width: 0; }
  .main .tbl { overflow-x: auto; }
  .main .hdr, .main .tabs { flex-wrap: wrap; }
}
.tab { white-space: nowrap; }
/* One gradient for every decorative surface: the endpoints card's (mint · lavender · blue, soft white flow). */
.grad { background:
  linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.03)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 450' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='f' x='-45%25' y='-45%25' width='190%25' height='190%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .008' numOctaves='2' seed='71' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='13' xChannelSelector='R' yChannelSelector='B'/%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='41'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .08 0'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='.8'%3E%3Cg transform='rotate(-4 300 225)' fill='none' stroke='%23f5ffff' stroke-linecap='round' opacity='.72' filter='url(%23f)'%3E%3Cpath d='M-120 540 C110 80 330 510 735-90' stroke-width='168'/%3E%3Cpath d='M155 550 C300 285 455 315 710 20' stroke-width='62' opacity='.32'/%3E%3C/g%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.12'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
  radial-gradient(ellipse at 12% 18%, color-mix(in oklab, #66d9c2 94%, white) 0%, transparent 72%),
  radial-gradient(ellipse at 8% 52%, color-mix(in oklab, #645dde 95%, white) 0%, transparent 74%),
  radial-gradient(ellipse at 12% 18%, color-mix(in oklab, #302b75 78%, black) 0%, transparent 76%),
  linear-gradient(140deg, #302b75, #645dde 52%, #66d9c2); }
/* text on it is ink, except inside a dark glass panel */
.grad.ink { color: #101114 !important; }
.grad.ink :not(.glass-dark, .glass-dark *)[style*="color:#fff"] { color: #101114 !important; }
.grad.ink :not(.glass-dark, .glass-dark *)[style*="color:rgba(255,255,255"] { color: rgba(16,17,20,.62) !important; }
.grad.ink :not(.glass-dark, .glass-dark *)[style*="solid rgba(255,255,255"] { border-color: rgba(16,17,20,.14) !important; }
.grad.ink [style*="text-shadow"] { text-shadow: none !important; }
.grad.ink [style*="color:#a99bf5"] { color: #4b3fc0 !important; }
.grad.ink [style*="color:#5eead4"] { color: #0F766E !important; }
.grad.ink .glass-step { background: rgba(255,255,255,.4); border-color: rgba(255,255,255,.7) !important; }
.grad.ink .glass-step > span:first-child { background: rgba(255,255,255,.6) !important; color: #101114 !important; }
.d3.grad { border-color: rgba(255,255,255,.55); box-shadow: 0 3px 10px -4px rgba(48,43,117,.3); }

.au.grad { box-shadow: 0 28px 80px -34px rgba(48,43,117,.5); }
/* Start: agent steps and map recommendations */
.ag-step { display: grid; grid-template-columns: 22px 26px 104px minmax(0,1fr); gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.ag-step:first-child { border-top: 0; }
.ag-step b { font-weight: 500; }
.ag-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(0,0,0,.05); }
.ag-dot .spin { width: 10px; height: 10px; }
.ag-done .ag-dot { background: #0F766E; color: #fff; }
.ag-ask .ag-dot { background: #3B73FF; color: #fff; }
.ag-skip { opacity: .5; }
.ag-n { font-size: 10px; color: var(--mfg); }
.ag-d { font-size: 13px; line-height: 1.5; }
.rec { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.rec img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #e9ecec; }
.rec:hover { border-color: rgba(0,0,0,.3); }
.rec.on { border-color: #171717; box-shadow: 0 0 0 1px #171717; }
.rec:focus-visible, .chip:focus-visible { outline: 2px solid #3B73FF; outline-offset: 2px; }
button.chip { cursor: pointer; background: transparent; }
img[data-shot]:not([src]) { color: transparent; background: linear-gradient(100deg, #eceeed 40%, #f6f7f7 50%, #eceeed 60%) 0 0 / 300% 100% #eceeed !important; animation: shot-wait 1.4s linear infinite; }
@keyframes shot-wait { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .spin, img[data-shot] { animation: none; } }
[data-more]:not([hidden]) { display: contents; }
/* 3D hover card (after 21st.dev contribution-skyline's tooltip) */
.s3-tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; max-width: 280px; display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px; border-radius: 6px; background: #171717; color: #fff; font-size: 12px; line-height: 1.45; box-shadow: 0 10px 28px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .15s ease; }
.s3-tip.on { opacity: 1; }
.s3-tip b { font-size: 13px; font-weight: 600; }
.s3-tip span { color: rgba(255,255,255,.72); }
.s3-tip em { font-style: normal; color: #7ee2c8; margin-top: 2px; }
.s3-tip::after { content: ''; position: absolute; top: 100%; left: var(--arrow, 50%); margin-left: -5px; border: 5px solid transparent; border-top-color: #171717; }
@media (prefers-reduced-motion: reduce) { .s3-tip { transition: none; } }
/* 3D labels: the hover card's look, smaller */
.s3-lab { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 9px 4px 8px; border-radius: 999px; background: rgba(23,23,23,.82); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .2s ease; }
.s3-lab i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); flex: none; }
.s3-lab-booth { background: rgba(23,23,23,.62); font-weight: 400; color: rgba(255,255,255,.92); }
.s3-lab-new i { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.s3-lab-promo i { background: #7aa2ff; box-shadow: 0 0 0 3px rgba(122,162,255,.25); }
.s3-lab-new, .s3-lab-promo { background: #171717; font-size: 12px; padding: 5px 11px 5px 9px; }
.s3-lab.off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .s3-lab { transition: none; } }
/* Start: the landing chat */
.chat-hero { transition: padding .35s ease; }
.chatting .chat-hero { padding: 26px 24px 22px !important; flex-direction: row !important; gap: 14px; text-align: left !important; align-items: center !important; }
.chatting .chat-hero .hero-logo { width: 36px !important; height: 36px !important; padding-bottom: 9px !important; border-radius: 9px !important; flex: none; }
.chatting .chat-hero .hero-logo span { transform: scale(.66); transform-origin: bottom; }
.chatting .chat-hero .hero-sub, .chatting .chat-hero .hero-kicker { display: none; }
.chatting .chat-hero .hero-title { margin-top: 0 !important; font-size: 20px !important; }
.thread { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 980px; margin: 0 auto; }
.chatting .composer { position: sticky; bottom: 12px; z-index: 8; max-width: 980px !important; margin: 0 auto !important; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bub { max-width: min(640px, 85%); padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #171717; color: #fff; font-size: 15px; line-height: 1.6; }
.msg.ai { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; }
.msg.ai .ava { width: 32px; height: 32px; border-radius: 9px; background: #000; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 8px; }
.msg.ai .ava i { width: 3px; background: #fff; border-radius: 1px; }
.msg.ai .ava i:nth-child(1) { height: 6px; } .msg.ai .ava i:nth-child(2) { height: 10px; } .msg.ai .ava i:nth-child(3) { height: 14px; }
.msg.ai .body { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.75; min-width: 0; }
.msg.ai .body p { margin: 0; text-wrap: pretty; }
.msg.ai .tools { font-size: 10px; letter-spacing: .4px; }
.typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3a6; animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.art { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.recs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.rec .rec-on { display: none; align-self: flex-start; }
.rec .rec-cta { font-size: 11px; }
.rec.on .rec-on { display: inline-flex; } .rec.on .rec-cta { display: none; }
.stage { height: 520px; background: #e9ecec; }
.world-cols { padding: 16px 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
@media (max-width: 760px) {
  .recs, .world-cols { grid-template-columns: 1fr; }
  .stage { height: 380px; }
  .chat-hero { padding: 48px 16px 40px !important; }
  .chat-hero .hero-title { font-size: 28px !important; }
  .msg.ai { grid-template-columns: 1fr; } .msg.ai .ava { display: none; }
}
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } .chat-hero { transition: none; } }
.msg.ai .body ul { margin: 0; padding-left: 18px; } .msg.ai .body li { margin: 2px 0; }
.chatting .composer > div:first-child { padding: 10px 14px 6px !important; }
.chatting .composer > div:first-child .lbl, .chatting .composer [data-k="by"], .chatting .composer [data-slot="examples"] { display: none !important; }
.chatting .composer textarea { margin-top: 0 !important; }
.chatting .composer > div:nth-child(2) { border-top: 0 !important; padding-top: 0 !important; justify-content: flex-end !important; }
/* gradient surfaces are square-cornered, everywhere */
.grad, .grad::before, .grad::after, .au.grad .au-ring, .gcard.grad { border-radius: 0 !important; }
/* Final layout: the whole decision on one screen — 3D left, the summary and the list right */
.fit-screen { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; height: calc(100vh - 230px); min-height: 440px; }
.fit-stage { min-height: 0; }
.fit-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.fit-list { flex: 1; min-height: 120px; overflow: auto; }
.stats4 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.stats4 > div { padding: 10px 0 !important; gap: 4px !important; }
.stats4 .stat { font-size: 22px !important; }
@media (max-width: 1100px) { .fit-screen { grid-template-columns: 1fr; height: auto; } .fit-stage { height: 62vh; } .fit-list { max-height: 50vh; } }
/* composer: decision model picker and attach */
.mpick-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: transparent; color: rgba(255,255,255,.9); font: inherit; font-size: 12px; cursor: pointer; }
.mpick-btn:hover { border-color: rgba(255,255,255,.4); }
.mpick-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.mpick-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: min(440px, 86vw); max-height: 60vh; overflow: auto; padding: 6px; background: #17181a; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 18px 48px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; }
.mpick-menu[hidden] { display: none; }
.mpick-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 6px; color: #fff; }
.mpick-item:hover, .mpick-item:focus-visible { background: rgba(255,255,255,.07); }
.mpick-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mpick-row b { font-weight: 600; }
.mpick-tag { font-size: 10px; letter-spacing: .4px; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.mpick-check { margin-left: auto; color: #34d399; visibility: hidden; }
.mpick-item.on .mpick-check { visibility: visible; }
.mpick-what { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.72); }
.mpick-data { font-size: 11px; color: rgba(255,255,255,.5); }
.mpick-src { font-size: 12px; color: rgba(255,255,255,.55); }
.mpick-src a { color: #8fd8ff; text-decoration: none; }
.mpick-src a:hover { text-decoration: underline; }
.attach-ic { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border-radius: 4px; color: rgba(255,255,255,.75); cursor: pointer; }
.attach-ic:hover { color: #fff; background: rgba(255,255,255,.08); }
.chatting .composer > div:nth-child(2) { justify-content: space-between !important; }
.chat-hero { overflow: visible !important; }
.mpick-menu { top: calc(100% + 8px); bottom: auto; }
.chatting .mpick-menu { top: auto; bottom: calc(100% + 8px); }
/* Run: progress while the simulation runs, then the best plan stands out */
.gauge { display: flex; align-items: center; gap: 14px; margin-top: -8px; }
.gauge[hidden] { display: none; }
.gauge-bar { flex: 1; height: 6px; background: rgba(0,0,0,.08); overflow: hidden; }
.gauge-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0F766E, #34d399); transition: width .12s linear; }
.gauge-txt { font-size: 11px; color: var(--mfg); white-space: nowrap; min-width: 300px; text-align: right; }
.run-card { position: relative; transition: opacity .5s ease, filter .5s ease, box-shadow .3s ease; }
.run-card.dim { opacity: .5; filter: saturate(.55); }
.run-card.best { border-color: #171717 !important; box-shadow: 0 0 0 2px #171717 !important; }
.best-badge { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 3px 9px; background: #171717; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .run-card, .gauge-bar i { transition: none; } }
/* sidebar: the steps in order, with a track behind the icons that fills from the top down to where you are */
.flow { position: relative; display: flex; flex-direction: column; gap: 2px; }
.flow-track { position: absolute; left: 18px; top: 16px; bottom: 16px; width: 2px; background: rgba(0,0,0,.08); }
.flow-track i { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0%); background: #171717; transition: height .6s cubic-bezier(.65,0,.35,1); }
.flow-step { position: relative; }
.nav-n { position: relative; z-index: 1; width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sidebar); border: 1px solid rgba(0,0,0,.14); color: rgba(0,0,0,.4); transition: background .3s, color .3s, border-color .3s; }
.nav-n svg { width: 12px; height: 12px; }
.flow-step.done .nav-n { background: #171717; border-color: #171717; color: #fff; }
.flow-step[aria-current="page"] .nav-n { background: #171717; border-color: #171717; color: #fff; box-shadow: 0 0 0 4px rgba(23,23,23,.12); }
.flow-step:not(.done):not([aria-current="page"]) .nav-t { color: rgba(0,0,0,.45); }
.nav-sep { height: 1px; background: var(--border); margin: 12px 8px; }
.nav-quiet { font-size: 12px; }
@media (max-width: 760px) { .nav-sep, .flow-track { display: none; } .flow { flex-direction: row; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .flow-track i, .nav-n { transition: none; } }
/* one project through the flow */
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.plan-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); background: #fff; font-size: 13px; }
.plan-chip i { width: 9px; height: 9px; display: inline-block; }
/* project plans */
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.plan-card { overflow: hidden; padding: 0; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr; } }
/* every step ends the same way: what it settled, and the next step */
.step-foot { padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.step-foot p { max-width: 720px; font-size: 15px; line-height: 28px; color: var(--mfg); margin: 0; }
.step-foot b { color: #000; font-weight: 600; }
.step-foot .btn { height: 44px; padding: 0 20px; }
/* landing: how it works, below the hero until the conversation starts */
.landing-info { padding: 8px 4px 0; }
.chatting .landing-info { display: none; }
.how { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.how > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.how-ic { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; }
.how b { font-size: 16px; font-weight: 600; margin-top: 6px; }
.how p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--mfg); }
@media (max-width: 1100px) { .how { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } }
/* nine plans: display across, flyer down */
.grid9 { display: grid; grid-template-columns: 96px repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; }
.grid9-h { font-size: 12px; font-weight: 600; padding: 0 2px 2px; align-self: end; }
.grid9-r { font-size: 12px; font-weight: 600; color: var(--mfg); align-self: center; }
@media (max-width: 760px) { .grid9 { grid-template-columns: 1fr; } .grid9-h, .grid9 > span:first-child { display: none; } }
/* Model check: three questions, one model per row */
.vq-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.vq { padding: 14px 18px; display: flex; flex-direction: column; }
.vq h3 { margin: 8px 0 0; font-size: 18px; font-weight: 600; }
.vq > p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; min-height: 42px; }
.vq-real { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 8px 0; border-top: 1px solid #171717; border-bottom: 1px solid var(--border); }
.vq-real span { font-size: 13px; } .vq-real b { font-size: 20px; font-weight: 600; }
.vq-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.vq-m { display: flex; align-items: center; gap: 8px; }
.vq-v { font-family: "GeistMono", monospace; font-size: 13px; }
.vq-bar { width: 70px; height: 6px; background: rgba(0,0,0,.07); } .vq-bar i { display: block; height: 100%; }
.vq-bottom { display: grid; grid-template-columns: minmax(380px, 430px) minmax(0,1.3fr) minmax(0,1fr); gap: 28px; align-items: start; }
.vq-bottom > .card { padding: 14px 16px !important; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 16px; align-items: end; }
.vq-bottom > .card > .lbl { grid-column: 1 / -1; }
.vq-bottom > .card > p { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0 !important; font-size: 12px !important; line-height: 1.6; }
.main.stepv:not(:has(> .step-foot)) { padding-bottom: 20px; }
.vq-bottom > .card > div[style*="width:260px"] { zoom: .7; grid-column: 1; margin-left: 0 !important; margin-right: 0 !important; }
.vq-bottom > .card > div[style*="height:260px"] { margin-top: 16px !important; }
.vq-list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }
@media (max-width: 1100px) { .vq-grid, .vq-bottom { grid-template-columns: 1fr; } }
/* step pages fit one screen: tighter rhythm, the footer pinned to the bottom edge so the next step is always in view */
.main.stepv { min-height: 100vh; gap: 18px; padding-bottom: 0; }
.main.stepv > .step-foot { margin-top: auto; position: sticky; bottom: 0; z-index: 6; background: var(--bg); padding: 12px 0 16px; gap: 16px; }
.step-foot p { font-size: 14px; line-height: 22px; }
.step-acts { display: flex; gap: 8px; align-items: center; }
.step-foot .btn { height: 40px; }
@media (min-width: 1101px) { .main.stepv .fit-screen { height: calc(100vh - 186px); } }
.main.stepv .d3 { padding: 16px 18px; }
.main.stepv .d3 > .mono[style*="margin-top:22px"] { margin-top: 14px !important; }
.main.stepv .d3 > div[style*="margin-top:18px"] { margin-top: 12px !important; padding-top: 10px !important; }
/* nine plans: the 3D shot takes what the screen has left after the text, three rows of it */
.g9-shot { height: clamp(56px, calc((100vh - 430px) / 3), 180px); }
.grid9.nonum .g9-shot { height: clamp(56px, calc((100vh - 415px) / 3), 190px); }
.g9-txt { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.g9-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.grid9 { gap: 10px; }
.main.stepv .tbl .th { padding: 8px 16px; }
.main.stepv .tbl .tr { padding: 8px 16px; }
/* Connect records: the space built in the chat on the left, its records on the right */
.cn-screen { grid-template-columns: minmax(0,1.15fr) minmax(420px,1fr); gap: 24px; }
.cn-side { gap: 14px; }
.cn-drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed rgba(0,0,0,.25); background: var(--card); cursor: pointer; }
.cn-drop.over { border-color: #171717; background: #fff; }
.cn-map { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cn-map .fit-list { flex: 0 1 auto; min-height: 0; }
.cn-job { padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; }
@media (max-width: 1100px) { .cn-screen { grid-template-columns: 1fr; } }
.chat-new { display: none; }
.chatting .chat-new { display: inline-flex; margin-left: auto; background: rgba(255,255,255,.7); }
/* Try the model: input on the left, SimOff-1's answer on the right */
.pg { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
@media (min-width: 1101px) { .main.stepv .pg { height: calc(100vh - 100px); } .pg > .card { overflow: auto; } }
@media (max-width: 1100px) { .pg { grid-template-columns: 1fr; } }
.pg > .card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pg-head h2 { margin: 6px 0 0; font-size: 18px; font-weight: 600; }
.pg-model { background: #171717; color: #fff; }
.pg-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-presets button, .pg-seg button, .pg-tabs button { height: 28px; padding: 0 10px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 12px; cursor: pointer; color: var(--mfg); }
.pg-presets button.on, .pg-seg button.on, .pg-tabs button.on { background: #171717; border-color: #171717; color: #fff; }
.pg-sec { border-top: 1px solid var(--border); padding-top: 12px; }
.pg-f { display: grid; grid-template-columns: 150px minmax(0,1fr) 64px; gap: 12px; align-items: center; height: 32px; font-size: 13px; }
.pg-f input[type=range] { width: 100%; accent-color: #171717; }
.pg-f output { font-family: "GeistMono", monospace; font-size: 12px; text-align: right; }
.pg-select { margin-top: 8px; width: 100%; height: 36px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13px; padding: 0 10px; }
.pg-seg-l { font-size: 12px; color: var(--mfg); margin: 10px 0 6px; }
.pg-seg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
.pg-seg button { height: 34px; margin-left: -1px; }
.pg-tabs { display: flex; } .pg-tabs button { margin-left: -1px; }
.pg-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pg-big > span:first-child { font-size: 56px; font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-big-s { font-size: 14px; color: var(--mfg); }
.pg-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.pg-stats > div { border-top: 1px solid #171717; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-stats b { font-size: 20px; font-weight: 500; }
.pg-grid { margin-top: 8px; display: grid; grid-template-columns: 92px repeat(3, minmax(0,1fr)); gap: 4px; font-size: 12px; }
.pg-grid > span { color: var(--mfg); align-self: center; }
.pg-cell { padding: 8px 10px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; cursor: pointer; text-align: left; font: inherit; }
.pg-cell b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-cell.on { border-color: #171717; box-shadow: 0 0 0 1px #171717; }
.pg-json { margin: 0; padding: 14px; background: #f6f7f8; border: 1px solid var(--border); font: 12px/1.55 "GeistMono", monospace; white-space: pre-wrap; word-break: break-all; }
/* Try the model · chat in, model out */
.pg-in { overflow: hidden !important; }
.pg-thread { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px; }
.pg-empty p { margin: 0 0 10px; font-size: 13px; color: var(--mfg); }
.pg-ex { display: flex; flex-direction: column; gap: 8px; }
.pg-ex button { text-align: left; padding: 10px 12px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer; }
.pg-ex button:hover { border-color: #171717; }
.pg-thread .msg.user .bub { font-size: 14px; }
.pg-thread .msg.ai .body { font-size: 14px; line-height: 1.7; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chip { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.pg-chip.on { border-color: #171717; box-shadow: 0 0 0 1px #171717; }
.pg-chip b { font-weight: 600; }
.pg-compose { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--border); background: #fff; padding: 10px 10px 10px 14px; }
.pg-compose textarea { flex: 1; border: 0; outline: none; resize: none; font: inherit; font-size: 14px; line-height: 1.5; background: transparent; }
.pg-compose button { width: 32px; height: 32px; flex: none; background: #171717; color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }
.pg-compose button:disabled { opacity: .5; cursor: progress; }
.pg-reset { height: 28px; padding: 0 10px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.pg-wait { padding: 28px 0; color: var(--mfg); font-size: 14px; line-height: 1.7; }
.pg-cases { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-in-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pg-in-row span { padding: 3px 8px; background: var(--muted-2); font-size: 12px; }
.pg-drv { display: grid; grid-template-columns: 120px minmax(0,1fr) 120px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pg-drv .trk { position: relative; height: 8px; background: rgba(0,0,0,.05); }
.pg-drv .trk i { position: absolute; top: 0; height: 100%; background: #0F766E; opacity: .35; }
.pg-drv .trk em { position: absolute; top: -3px; width: 2px; height: 14px; background: #171717; }
.pg-drv .v { font-family: "GeistMono", monospace; font-size: 11px; text-align: right; color: var(--mfg); }