:root{color-scheme:dark;--bg: #0a0d10;--bg-elev: #11161b;--bg-pane: #0d1116;--border: #1d242c;--border-soft: #161c22;--text: #e7eaef;--text-dim: #7d8592;--text-faint: #4f5763;--teal: #2dd4bf;--teal-deep: #0d9488;--teal-glow: rgba(45, 212, 191, .18);--amber: #f5b14a;--amber-glow: rgba(245, 177, 74, .14);--err: #f87171;--err-glow: rgba(248, 113, 113, .12);--ok: #4ade80;--ok-glow: rgba(74, 222, 128, .14);--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(1200px 800px at 80% -10%,rgba(13,148,136,.1),transparent 60%),radial-gradient(1000px 700px at -10% 90%,rgba(13,148,136,.06),transparent 60%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;padding:32px clamp(20px,4vw,56px) 24px;gap:22px}.header{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:16px}.brand-text h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;font-family:var(--mono);color:var(--text)}.brand-text p{margin:2px 0 0;color:var(--text-dim);font-size:13px}.header-right{display:flex;align-items:center;gap:14px}.modes{display:inline-flex;background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:3px}.mode{font:inherit;font-family:var(--mono);font-size:12px;background:transparent;color:var(--text-dim);border:0;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .12s ease;letter-spacing:.01em}.mode:hover{color:var(--text)}.mode-active{background:var(--teal-glow);color:var(--teal)}.ghlink{color:var(--text-dim);text-decoration:none;border:1px solid var(--border);background:var(--bg-elev);padding:8px 14px;border-radius:8px;font-family:var(--mono);font-size:12px;transition:all .12s ease}.ghlink:hover{color:var(--teal);border-color:var(--teal-deep)}.intro{display:flex;flex-direction:column;gap:10px;padding:18px 22px;background:linear-gradient(180deg,#0d94880f,#0d948805);border:1px solid var(--border);border-radius:12px}.intro-lead{margin:0;color:var(--text);font-size:14.5px;line-height:1.55;max-width:78ch}.intro-lead code{font-family:var(--mono);font-size:13px;color:var(--teal);background:var(--teal-glow);padding:1px 6px;border-radius:4px}.intro-links{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--text-faint)}.intro-links a{color:var(--text-dim);text-decoration:none;transition:color .12s ease}.intro-links a:hover{color:var(--teal)}.intro-links code{font-family:var(--mono);font-size:12px;color:inherit}.intro-links .dot{color:var(--text-faint)}.receipts{display:flex;flex-direction:column;gap:14px;padding:22px clamp(20px,3vw,30px) 24px;background:linear-gradient(180deg,rgba(245,177,74,.045) 0%,rgba(13,148,136,.03) 60%,transparent 100%),var(--bg-pane);border:1px solid var(--border);border-radius:14px;position:relative;overflow:hidden}.receipts:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(800px 220px at 100% 0%,rgba(245,177,74,.08),transparent 60%);pointer-events:none}.receipts-head{display:flex;flex-direction:column;gap:6px;position:relative}.receipts-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);width:max-content;padding:3px 9px;border-radius:999px;background:var(--amber-glow);border:1px solid rgba(245,177,74,.4)}.receipts-title{margin:4px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.35}.receipts-title code{font-family:var(--mono);font-size:15px;color:var(--teal);background:var(--teal-glow);padding:1px 6px;border-radius:4px}.receipts-sub{margin:4px 0 0;color:var(--text-dim);font-size:13px;line-height:1.55;max-width:80ch}.receipts-sub em{font-style:normal;color:var(--text);background:#f5b14a1a;padding:0 4px;border-radius:3px}.receipts-list{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px;position:relative;counter-reset:receipt}.receipt-card{position:relative;background:var(--bg);border:1px solid var(--border-soft);border-radius:12px;padding:16px 18px 16px 56px;display:flex;flex-direction:column;gap:8px;transition:border-color .14s ease,transform .14s ease;counter-increment:receipt}.receipt-card:before{content:counter(receipt,decimal-leading-zero);position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-faint);background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:6px;padding:3px 6px;line-height:1}.receipt-card:hover{border-color:var(--border)}.receipt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px}.receipt-project{color:var(--text-dim);letter-spacing:.02em}.receipt-pr{color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border:1px solid rgba(13,148,136,.35);background:var(--teal-glow);border-radius:999px;transition:all .12s ease}.receipt-pr:hover{border-color:var(--teal);background:#2dd4bf2e}.receipt-pr-arrow{font-size:10px;opacity:.75}.receipt-class{margin-left:auto;color:var(--amber);background:var(--amber-glow);border:1px solid rgba(245,177,74,.35);border-radius:999px;padding:2px 9px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}.receipt-title{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text);line-height:1.4}.receipt-summary{margin:0;color:var(--text-dim);font-size:13px;line-height:1.55}.receipt-bs{margin:4px 0 0;display:flex;gap:10px;padding:10px 12px;background:#0d94880f;border-left:2px solid var(--teal-deep);border-radius:0 6px 6px 0;font-size:12.75px;line-height:1.55;color:var(--text)}.receipt-bs-mark{color:var(--teal);font-family:var(--mono);font-size:14px;line-height:1.4;flex-shrink:0}@media (min-width: 1100px){.receipts-list{grid-template-columns:1fr 1fr}.receipt-card:nth-child(5){grid-column:1 / -1}}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{font:inherit;font-family:var(--mono);font-size:12px;background:transparent;color:var(--text-dim);border:1px solid var(--border-soft);padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .12s ease}.tab:hover{color:var(--text);border-color:var(--border)}.tab-active{background:var(--teal-glow);color:var(--teal);border-color:var(--teal-deep)}.problem-head{background:linear-gradient(180deg,#0d94880f,#0d948800);border:1px solid var(--border-soft);border-radius:14px;padding:18px 22px 16px;display:flex;flex-direction:column;gap:8px}.problem-meta{display:flex;align-items:center;gap:10px}.outcome{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid}.outcome-rejects{color:var(--amber);background:var(--amber-glow);border-color:#f5b14a80}.outcome-structural{color:var(--teal);background:var(--teal-glow);border-color:var(--teal-deep)}.problem-title{margin:4px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text)}.problem-blurb{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.55;max-width:92ch}.problem-hint{margin:4px 0 0;color:var(--text-faint);font-size:12.5px;font-family:var(--mono);font-style:normal}.problem-lint-note{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--border-soft);color:var(--text-dim);font-size:12.5px;line-height:1.5;max-width:88ch}.problem-lint-note code{font-family:var(--mono);font-size:12px;color:var(--teal);background:var(--teal-glow);padding:1px 5px;border-radius:4px}.problem-panes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(360px,1fr) minmax(220px,auto);gap:16px;flex:1;min-height:0}.pane-ts{grid-column:1;grid-row:1}.pane-bs{grid-column:2;grid-row:1}.problem-panes .pane-output{grid-column:1 / -1;grid-row:2}.panes{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}.pane{background:var(--bg-pane);border:1px solid var(--border);border-radius:14px;display:grid;grid-template-rows:auto 1fr;overflow:hidden;min-height:360px}.panes .pane{min-height:460px}.problem-panes .pane-output{min-height:220px}.pane-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:10px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between}.fmt-button{font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:transparent;border:1px solid var(--border-soft);padding:3px 10px;border-radius:999px;cursor:pointer;transition:all .12s ease}.fmt-button:hover{color:var(--teal);border-color:var(--teal-deep);background:var(--teal-glow)}.status-tag{text-transform:uppercase;font-size:10px;padding:2px 8px;border-radius:999px;letter-spacing:.1em;border:1px solid}.status-ts{color:var(--text-dim);border-color:var(--border);background:var(--bg-elev)}.status-ok{color:var(--ok);border-color:var(--ok);background:var(--ok-glow)}.status-err{color:var(--err);border-color:var(--err);background:var(--err-glow)}.status-by-design{color:var(--teal);border-color:var(--teal-deep);background:var(--teal-glow)}.err-tag{text-transform:uppercase;font-size:10px;background:var(--err-glow);color:var(--err);border:1px solid var(--err);padding:2px 8px;border-radius:999px;letter-spacing:.1em}.editor,.output{margin:0;border:0;outline:none;resize:none;background:transparent;color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.55;padding:16px 18px;overflow:auto;width:100%;height:100%;white-space:pre}.editor{caret-color:var(--teal)}.editor:focus{outline:none;box-shadow:inset 0 0 0 1px var(--teal-deep)}.output code{font-family:inherit}.output-err{color:var(--err)}.footer{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--text-faint);padding-top:4px}.footer a{color:var(--text-dim);text-decoration:none}.footer a:hover{color:var(--teal)}.dot{color:var(--text-faint)}@media (max-width: 900px){.header{flex-direction:column;align-items:flex-start;gap:16px}.header-right{width:100%;justify-content:space-between}.panes{grid-template-columns:1fr}.problem-panes{grid-template-columns:1fr;grid-template-rows:auto auto auto}.pane-ts{grid-column:1;grid-row:1}.pane-bs{grid-column:1;grid-row:2}.problem-panes .pane-output{grid-column:1;grid-row:3}.pane,.panes .pane{min-height:320px}}