:root { --bg:#070b12; --bg-soft:#0c111b; --panel:rgba(14,20,32,.86); --line:rgba(194,211,233,.13); --line-strong:rgba(194,211,233,.24); --text:#edf4fa; --muted:#9aa8ba; --faint:#637185; --teal:#63e6d6; --teal-dim:rgba(99,230,214,.13); --indigo:#8c9bff; --violet:#c29bff; --shadow:0 26px 80px rgba(0,0,0,.28); }
* { box-sizing:border-box; } html { background:var(--bg); color:var(--text); font-family:"DM Sans",system-ui,sans-serif; } body { margin:0; min-width:320px; background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(46,77,108,.2),transparent 72%),var(--bg); min-height:100vh; overflow-x:hidden; } body.light { --bg:#f5f8fb;--bg-soft:#eef3f7;--panel:rgba(255,255,255,.88);--text:#122033;--muted:#5e7084;--faint:#7f8da0;--teal:#118e82;--teal-dim:rgba(17,142,130,.1);--indigo:#5869d9;--violet:#9965dd;--line:rgba(21,43,67,.14);--line-strong:rgba(21,43,67,.23);--shadow:0 26px 80px rgba(29,55,83,.12); } button,textarea { font:inherit; } button { cursor:pointer; } .aurora { position:fixed;pointer-events:none;filter:blur(35px);opacity:.35;border-radius:50%;z-index:-1; } .aurora-a { width:34vw;height:34vw;top:4%;left:-16vw;background:rgba(65,190,179,.13); } .aurora-b { width:29vw;height:29vw;top:38%;right:-13vw;background:rgba(115,96,236,.15); }
.topbar { height:72px;padding:0 max(24px,calc((100vw - 1220px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(7,11,18,.72);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10; } .light .topbar { background:rgba(245,248,251,.78); } .brand { color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:.12em;font:600 14px "Space Grotesk",sans-serif; } .brand em { color:var(--teal);font-style:normal; } .brand-logo { width:25px;height:25px;display:block;flex:none;overflow:hidden;border-radius:8px; } .brand-logo img { display:block;width:100%;height:100%;object-fit:cover; } .brand-logo .logo-light { display:none; } .light .brand-logo .logo-dark { display:none; } .light .brand-logo .logo-light { display:block; } .topbar-meta { color:var(--faint);font:500 10px "JetBrains Mono",monospace;letter-spacing:.08em;display:flex;gap:10px;align-items:center; } .live-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal); } .theme-chip { border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:7px 10px;font-size:12px;margin-left:12px; } .theme-chip:hover { color:var(--text);border-color:var(--teal); }
.language-chip { min-width: 39px; }
.shell { max-width:1220px;margin:0 auto;padding:0 28px 50px; } .hero { text-align:center;padding:100px 0 70px; } .eyebrow,.section-kicker { color:var(--teal);font:500 10px "JetBrains Mono",monospace;letter-spacing:.16em; } .eyebrow { display:flex;align-items:center;justify-content:center;gap:12px; } .eyebrow-line { width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--teal));opacity:.65; } .eyebrow-line:last-child { transform:rotate(180deg); } h1,h2,p { margin-top:0; } h1 { margin:25px 0 19px;font:600 clamp(43px,6.6vw,80px)/1.05 "Space Grotesk",sans-serif;letter-spacing:-.055em; } h1 span { background:linear-gradient(105deg,var(--teal) 10%,#76c6ec 48%,var(--violet) 94%);-webkit-background-clip:text;background-clip:text;color:transparent; } .hero-copy { color:var(--muted);font-size:16px;line-height:1.7;max-width:560px;margin:0 auto; } .input-stage { max-width:930px;margin:51px auto 0;text-align:left; } .stage-label { display:flex;align-items:center;gap:11px;color:var(--text);font-size:13px;margin:0 10px 11px; } .stage-index { color:var(--teal);font:500 11px "JetBrains Mono",monospace; } .stage-hint { color:var(--faint);font-size:12px;margin-left:auto; } .question-box { border:1px solid var(--line-strong);background:linear-gradient(140deg,rgba(19,30,47,.8),rgba(10,16,27,.9));border-radius:19px;box-shadow:var(--shadow),0 0 0 1px rgba(99,230,214,.03);overflow:hidden;transition:border-color .2s,box-shadow .2s; } .light .question-box { background:var(--panel); } .question-box:focus-within { border-color:rgba(99,230,214,.55);box-shadow:var(--shadow),0 0 0 4px rgba(99,230,214,.07); } textarea { display:block;width:100%;min-height:154px;resize:vertical;border:0;outline:0;padding:22px 23px 13px;color:var(--text);background:transparent;font-size:16px;line-height:1.6; } textarea::placeholder { color:var(--faint); } .question-toolbar { display:flex;justify-content:space-between;align-items:center;padding:10px 13px 13px 18px;border-top:1px solid var(--line); } .mode-pill { color:var(--muted);font-size:12px; } .mode-spark { color:var(--teal);margin-right:7px; } .chevron { color:var(--faint);margin-left:5px; } .toolbar-actions { display:flex;align-items:center;gap:13px; } .shortcut { color:var(--faint);font:10px "JetBrains Mono",monospace; } .next-button { border:0;border-radius:999px;padding:10px 17px;color:#061112;background:linear-gradient(110deg,var(--teal),#9ce6ed);font-weight:700;font-size:13px;box-shadow:0 5px 20px rgba(99,230,214,.16);transition:transform .18s,box-shadow .18s; } .next-button:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(99,230,214,.3); } .next-button span { margin-left:5px; } .input-note { color:var(--faint);font-size:11px;margin:12px 7px; } .note-icon { color:var(--teal);margin-right:5px; }
.question-library { padding:29px 0 80px;border-top:1px solid var(--line); } .section-heading { display:flex;justify-content:space-between;align-items:end;margin-bottom:21px; } .section-heading h2,.trace-intro h2 { font:600 30px "Space Grotesk",sans-serif;letter-spacing:-.035em;margin:8px 0 0; } .library-count { color:var(--faint);font:11px "JetBrains Mono",monospace; } .library-count strong { color:var(--text);font-size:19px; } .question-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:11px; } .question-card { min-height:201px;padding:17px 16px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(150deg,rgba(18,27,42,.74),rgba(12,18,29,.9));display:flex;flex-direction:column;text-align:left;color:var(--text);transition:transform .2s,border-color .2s,background .2s; } .light .question-card { background:var(--panel); } .question-card:hover { transform:translateY(-3px);border-color:var(--line-strong); } .question-card.selected { border-color:var(--teal);background:linear-gradient(150deg,rgba(30,55,63,.7),rgba(12,28,38,.95));box-shadow:0 0 0 3px var(--teal-dim); } .card-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; } .category { color:var(--teal);font:10px "JetBrains Mono",monospace; } .task-id { color:var(--faint);font:10px "JetBrains Mono",monospace; } .card-question { color:var(--text);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; } .card-bottom { margin-top:auto;display:flex;justify-content:space-between;align-items:end;padding-top:14px;border-top:1px solid var(--line); } .answer-label { color:var(--faint);font-size:10px; } .answer { display:block;color:var(--text);font-weight:600;margin-top:2px; } .card-arrow { color:var(--muted);font-size:18px; }
.trace-view { padding:32px 0 80px; } .trace-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:68px; } .back-button { border:0;background:transparent;color:var(--muted);padding:0;font-size:12px; } .back-button:hover { color:var(--teal); } .trace-header-status { color:var(--teal);font:10px "JetBrains Mono",monospace;letter-spacing:.12em;display:flex;align-items:center;gap:8px; } .trace-intro { max-width:920px;margin-bottom:38px; } .trace-intro h2 { font-size:clamp(28px,4vw,49px);margin:13px 0 18px; } .trace-intro p { color:var(--muted);line-height:1.7;max-width:920px; } .trace-grid { display:grid;grid-template-columns:245px minmax(0,1fr);gap:25px;align-items:start; } .trace-summary { position:sticky;top:97px;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden; } .summary-item { padding:14px 16px;border-bottom:1px solid var(--line); } .summary-item:last-child { border-bottom:0; } .summary-label { display:block;color:var(--faint);font:10px "JetBrains Mono",monospace;letter-spacing:.05em;margin-bottom:6px; } .summary-value { color:var(--text);font-size:13px;line-height:1.4;word-break:break-word; } .summary-value.good { color:var(--teal); } .trace-timeline-wrap { border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden; } .timeline-heading { display:flex;justify-content:space-between;padding:16px 19px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600; } .timeline-heading span:last-child { color:var(--faint);font:10px "JetBrains Mono",monospace; } .timeline { padding:8px 17px 18px; } .timeline-event { display:grid;grid-template-columns:25px 90px minmax(0,1fr);gap:12px;padding:14px 4px;border-bottom:1px solid var(--line); } .timeline-event:last-child { border-bottom:0; } .event-marker { width:22px;height:22px;border:1px solid var(--line-strong);border-radius:7px;display:grid;place-items:center;color:var(--teal);font-size:11px; } .event-type { color:var(--faint);font:10px/1.4 "JetBrains Mono",monospace;text-transform:uppercase;padding-top:3px; } .event-body { min-width:0; } .event-title { color:var(--text);font-size:13px;font-weight:600;margin-bottom:4px; } .event-detail { color:var(--muted);font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word; } .event-assistant .event-marker { border-color:rgba(140,155,255,.45);color:var(--indigo); } .event-tool .event-marker { border-color:rgba(99,230,214,.45); } .event-final .event-marker { background:var(--teal);color:#071314;border-color:var(--teal); }
.footer { max-width:1220px;margin:0 auto;padding:21px 28px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--faint);font:10px "JetBrains Mono",monospace;letter-spacing:.04em; } @media (max-width:940px) { .question-grid { grid-template-columns:repeat(2,1fr); } .trace-grid { grid-template-columns:1fr; } .trace-summary { position:static;display:grid;grid-template-columns:repeat(3,1fr); } .summary-item { border-right:1px solid var(--line); } } @media (max-width:640px) { .topbar { height:60px;padding:0 17px; } .topbar-meta>span:not(.live-dot) { display:none; } .shell { padding:0 17px 40px; } .hero { padding:74px 0 56px; } .eyebrow { font-size:9px; } .eyebrow-line { width:16px; } .hero-copy { font-size:14px; } .input-stage { margin-top:35px; } .stage-hint,.shortcut { display:none; } .question-grid { grid-template-columns:1fr; } .question-card { min-height:161px; } .section-heading { align-items:start; } .trace-header { margin-bottom:45px; } .trace-summary { grid-template-columns:1fr 1fr; } .summary-item:last-child { grid-column:1/-1; } .timeline-event { grid-template-columns:25px 1fr; } .event-type { grid-column:2;grid-row:1; } .event-body { grid-column:2; } .footer { padding:19px 17px 26px;flex-direction:column;gap:7px; } }

/* MiroThinker-inspired conversational replay */
.conversation-shell { max-width: 900px; margin: 0 auto; }
.user-bubble { max-width: 78%; margin: 0 0 17px auto; padding: 15px 19px; border-radius: 18px 18px 4px 18px; background: linear-gradient(120deg, rgba(99,230,214,.22), rgba(104,142,255,.2)); border: 1px solid rgba(99,230,214,.22); color: var(--text); font-size: 15px; line-height: 1.55; }
.thought-toggle { width: auto; border: 0; border-radius: 0; padding: 9px 0 7px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; transition: color .2s; }
.thought-toggle:hover { background: transparent; border-color: transparent; color: var(--text); }
.thought-icon { color: var(--teal); font-size: 15px; line-height: 1; } .toggle-chevron { color: var(--faint); margin-left: 1px; }
.loading-strip { display: flex; align-items: center; gap: 9px; margin: 17px 0 10px; padding: 11px 14px; border-radius: 9px; background: var(--teal-dim); color: var(--teal); font-size: 12px; }
.loading-strip[hidden] { display: none; }
.loading-spinner { width: 13px; height: 13px; border: 2px solid rgba(99,230,214,.25); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.thought-panel { padding: 17px 20px 5px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: rgba(9,15,25,.42); } .light .thought-panel { background: rgba(255,255,255,.42); }
.prompt-card { padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 1.55; margin-bottom: 16px; }
.prompt-card::before { content: '›'; color: var(--teal); font-size: 18px; vertical-align: -2px; margin-right: 8px; }
.event-feed { display: flex; flex-direction: column; gap: 2px; }
.replay-event { padding: 10px 0 11px 34px; position: relative; animation: event-in .3s ease both; } .replay-event::before { content: ''; position: absolute; left: 8px; top: 14px; width: 11px; height: 11px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-soft); } .replay-event::after { content: ''; position: absolute; left: 13px; top: 27px; bottom: -6px; width: 1px; background: var(--line); } .replay-event:last-child::after { display: none; } @keyframes event-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.replay-event .event-line { display: flex; align-items: baseline; gap: 9px; color: var(--text); font-size: 13px; line-height: 1.5; } .replay-event .event-line::before { color: var(--teal); font-size: 17px; } .replay-event.event-tool .event-line::before { content: '⌕'; } .replay-event.event-tool-call .event-line::before { content: '↗'; color: var(--indigo); } .replay-event.event-assistant .event-line::before { content: '·'; color: var(--violet); } .replay-event.event-final .event-line::before { content: '✓'; color: var(--teal); }
.replay-event .event-kind { color: var(--faint); font: 10px "JetBrains Mono",monospace; text-transform: uppercase; } .replay-event .event-detail { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 4px; max-width: 760px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .replay-event.event-tool .event-detail { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(170,196,218,.11); color: var(--muted); margin-top: 6px; }
.replay-event.event-ellipsis { color: var(--faint); padding-top: 12px; padding-bottom: 12px; } .replay-event.event-ellipsis .event-line { color: var(--faint); }
.conclusion-card { border: 1px solid rgba(99,230,214,.28); border-radius: 0 0 12px 12px; padding: 18px 22px 21px; background: linear-gradient(135deg, rgba(99,230,214,.13), rgba(87,108,220,.1)); } .conclusion-head { display: flex; align-items: center; gap: 9px; color: var(--teal); font-size: 13px; font-weight: 600; } .conclusion-check { width: 19px; height: 19px; border: 1px solid var(--teal); border-radius: 50%; display: grid; place-items: center; font-size: 11px; } .conclusion-rule { height: 1px; flex: 1; background: rgba(99,230,214,.22); margin-left: 5px; } .conclusion-answer { color: var(--text); font: 600 clamp(24px,3vw,34px) "Space Grotesk",sans-serif; margin-top: 17px; letter-spacing: -.025em; } .conclusion-meta { color: var(--muted); font-size: 11px; margin-top: 8px; line-height: 1.5; }
.conversation-shell.is-loading .conclusion-card { opacity: .4; filter: saturate(.5); } .conversation-shell.is-compressed .thought-panel { display: block; } .conversation-shell.is-compressed .prompt-card { display: none; } .conversation-shell.is-compressed .thought-toggle { border-radius: 10px; margin-bottom: 10px; } .conversation-shell.is-compressed .conclusion-card { border-radius: 0 0 12px 12px; }
@media (max-width:640px) { .user-bubble { max-width: 94%; font-size: 14px; } .thought-panel { padding: 13px 13px 4px; } .replay-event { padding-left: 26px; } }

/* GPT / Claude-inspired progressive disclosure */
.conversation-shell { max-width: 820px; }
.user-bubble { max-width: 86%; padding: 15px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px 18px 5px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.thought-toggle { justify-content: flex-start; gap: 8px; padding: 9px 0 7px; border-radius: 0; background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; }
.thought-toggle:hover { background: transparent; border-color: transparent; color: var(--text); }
.thought-icon { width: auto; height: auto; display: inline; border-radius: 0; background: transparent; font-size: 15px; }
.toggle-chevron { width: auto; height: auto; display: inline; border-radius: 0; background: transparent; }
.loading-strip { margin: 10px 0 4px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--muted); }
.loading-spinner { width: 12px; height: 12px; }
.loading-pulse { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.loading-pulse i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); opacity: .25; animation: loading-pulse 1.2s infinite ease-in-out; }
.loading-pulse i:nth-child(2) { animation-delay: .16s; }
.loading-pulse i:nth-child(3) { animation-delay: .32s; }
@keyframes loading-pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.thought-panel { padding: 10px 0 5px; border: 0; background: transparent; }
.light .thought-panel { background: transparent; }
.prompt-card { margin: 0 0 8px; padding: 12px 14px; border: 0; border-left: 2px solid var(--teal); border-radius: 0 10px 10px 0; background: rgba(170,196,218,.055); font-size: 12px; }
.prompt-card::before { content: '已理解问题'; display: block; color: var(--text); font-size: 12px; font-weight: 600; margin: 0 0 3px; }
.event-feed { gap: 5px; }
.replay-event { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 11px 13px; border: 1px solid transparent; border-radius: 12px; background: transparent; transition: background .2s,border-color .2s; }
.replay-event::before,.replay-event::after { display: none; }
.replay-event:hover { background: rgba(170,196,218,.045); border-color: var(--line); }
.step-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(170,196,218,.075); border: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.event-assistant .step-icon { color: var(--violet); background: rgba(194,155,255,.08); border-color: rgba(194,155,255,.15); }
.event-tool-call .step-icon { color: var(--teal); background: var(--teal-dim); border-color: rgba(99,230,214,.15); }
.event-tool .step-icon { color: var(--indigo); background: rgba(140,155,255,.08); border-color: rgba(140,155,255,.15); }
.step-content { min-width: 0; }
.replay-event .event-line { justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.replay-event .event-line::before { display: none; }
.replay-event .event-kind { flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(170,196,218,.07); font-size: 9px; letter-spacing: .04em; }
.replay-event .event-kind { padding: 0; border-radius: 0; background: transparent; color: var(--faint); font-size: 10px; font-weight: 400; letter-spacing: .06em; }
.replay-event .event-kind::before { content: '·'; color: var(--teal); margin-right: 5px; }
.replay-event .event-detail { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.replay-event.event-tool .event-detail { display: -webkit-box; margin-top: 4px; padding: 0; background: transparent; border-radius: 0; }
.replay-event.event-ellipsis { opacity: .65; }
.conclusion-card { margin-top: 10px; padding: 22px 22px 24px; border-radius: 15px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.conclusion-head { color: var(--text); }
.conclusion-check { background: var(--teal-dim); border-color: rgba(99,230,214,.45); color: var(--teal); }
.conclusion-rule { background: var(--line); }
.conversation-shell.is-compressed .thought-toggle { margin-bottom: 10px; border-radius: 0; }
.conversation-shell.is-compressed .thought-panel { margin: -2px 0 4px; padding: 4px 0 0; }
.conversation-shell.is-compressed.is-loading .replay-event:nth-child(n+5) { display: none; }
.conversation-shell.is-compressed .replay-event { opacity: .82; }
.conversation-shell.is-compressed .conclusion-card { border-radius: 15px; }
@media (max-width:640px) { .replay-event { padding:10px 6px; } .user-bubble { max-width:96%; } }

.examples-actions { display: flex; justify-content: center; padding-top: 22px; }
.more-examples { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; transition: color .2s,border-color .2s,transform .2s; }
.more-examples:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.more-examples strong { color: var(--teal); font: 500 10px "JetBrains Mono",monospace; }
.more-chevron { color: var(--faint); }
.question-grid.is-expanded { grid-template-columns: repeat(3,1fr); }
.question-grid.is-expanded .question-card { min-height: 178px; }
.question-grid { display:block; }
.question-group { margin-top:24px; }
.question-group:first-child { margin-top:0; }
.question-group-title { display:flex; align-items:center; gap:8px; margin:0 0 11px; color:var(--muted); font:500 11px "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.question-group-title span { color:var(--teal); font-size:10px; }
.question-group-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.question-grid.is-expanded .question-group-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.question-group-grid .question-card { min-width:0; }
.question-group-grid .card-top > * { min-width:0; }
.question-group-grid .task-id { overflow-wrap:anywhere; text-align:right; }
.candidate-card .card-arrow { color: var(--faint); }
.candidate-card .answer-label { color: var(--faint); }
@media (max-width:940px) { .question-group-grid,.question-grid.is-expanded .question-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .question-group-grid,.question-grid.is-expanded .question-group-grid { grid-template-columns:minmax(0,1fr); } }

/* Visual refinement: make the selection hierarchy and replay focus clearer. */
.question-group-title { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.question-grid.is-expanded .question-group:nth-child(n+3) { margin-top: 34px; opacity: .86; }
.question-grid.is-expanded .question-group:nth-child(n+3) .question-group-title { color: var(--faint); }
.question-card { min-height: 184px; }
.card-question { -webkit-line-clamp: 4; }
.candidate-card { background: rgba(12,18,29,.52); }
.featured-card .answer-label { color: var(--teal); }
.featured-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.conversation-shell { max-width: 780px; }
.replay-event.is-current { background: var(--teal-dim); border-color: rgba(99,230,214,.22); }
.replay-event.is-current .step-icon { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(99,230,214,.08); }
.conclusion-card { border-color: rgba(99,230,214,.38); box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.conclusion-meta { font-family: "JetBrains Mono", monospace; font-size: 10px; }
html[data-lang="en"] .prompt-card::before { content: 'Question understood'; }
.question-group-grid .task-id { display: none; }
body.light .candidate-card { background: rgba(255,255,255,.62); }
body.light .replay-event.is-current { background: rgba(17,142,130,.08); border-color: rgba(17,142,130,.3); }

/* Keep the five featured examples within the first desktop viewport. */
@media (min-width: 941px) {
  .hero { padding: 58px 0 36px; }
  h1 { font-size: clamp(42px, 5vw, 62px); margin: 18px 0 14px; }
  .hero-copy { font-size: 14px; line-height: 1.55; max-width: 650px; }
  .input-stage { margin-top: 28px; }
  textarea { min-height: 106px; }
  .question-toolbar { padding-top: 8px; padding-bottom: 10px; }
  .input-note { margin-top: 9px; }
  .question-library { padding-top: 25px; }
  .question-card { min-height: 174px; }
}

/* Higher contrast for the light presentation mode. */
body.light { --text: #122033; --muted: #4d6076; --faint: #53657a; --line: rgba(21,43,67,.18); --line-strong: rgba(21,43,67,.3); }
body.light { background-color: #fbfcfe; background-image: radial-gradient(ellipse 75% 42% at 50% 0%, rgba(120,180,199,.07), transparent 72%); }
body.light .aurora { opacity: .08; filter: blur(58px); }
body.light .topbar { background: rgba(255,255,255,.94); }
body.light .question-box { background: #ffffff; box-shadow: 0 18px 50px rgba(42,70,98,.08); }
body.light .question-card { background: #ffffff; box-shadow: 0 8px 24px rgba(42,70,98,.045); }
body.light .question-card.candidate-card { background: #f8fafc; box-shadow: none; }
body.light .more-examples { background: #ffffff; }
body.light .loading-strip { background: #ffffff; box-shadow: 0 8px 24px rgba(42,70,98,.05); }
body.light .conclusion-card { background: linear-gradient(135deg,#ffffff,#f3fbfa); }
body.light h1, body.light h2, body.light .stage-label, body.light .card-question, body.light .brand { color: #122033; }
body.light .section-kicker, body.light .eyebrow, body.light .stage-index, body.light .category { color: #087d75; }
body.light h1 span { background: linear-gradient(105deg, #087d75 10%, #287bb9 48%, #7650b5 94%); -webkit-background-clip: text; background-clip: text; }
body.light .hero-copy, body.light .input-note, body.light .library-count, body.light .stage-hint { color: #53657a; }
body.light .question-card, body.light .question-box, body.light .thought-toggle, body.light .loading-strip, body.light .conclusion-card { border-color: rgba(21,43,67,.22); }
body.light .question-card:hover, body.light .more-examples:hover { border-color: rgba(21,43,67,.38); }
body.light .question-card.selected { background: linear-gradient(150deg, #e3f5f2, #f1f7fb); border-color: #0b8e82; box-shadow: 0 0 0 3px rgba(11,142,130,.14); }
body.light .question-card.selected .card-question,
body.light .question-card.selected .answer { color: #122033; }
body.light .answer-label, body.light .task-id, body.light .card-arrow { color: #40566d; }
.answer-table-wrap{overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.answer-table{width:100%;min-width:720px;border-collapse:collapse;font-size:13px;line-height:1.5}
.answer-table th,.answer-table td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.answer-table th{font-weight:650;color:var(--ink);background:var(--surface-strong)}
.answer-table td{color:var(--muted)}
.answer-table tr:last-child td{border-bottom:0}