:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6ecdf;--panel:#fff9f2;--ink:#2d241d;--muted:#6f6154;--line:#d8c7b5;--accent:#b55f34;--accent-2:#8f4321;--tile-0:#f0e2d2}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 10%, #f7cd9059, transparent 28%), radial-gradient(circle at 80% 12%, #b55f342e, transparent 32%), linear-gradient(180deg, #fbf1e3 0%, var(--bg) 100%);color:var(--ink);margin:0;font-family:IBM Plex Sans,Avenir Next,sans-serif}#root{place-items:center;min-height:100vh;padding:24px;display:grid}.twenty48-shell{background:color-mix(in srgb, var(--panel) 94%, white);border:1px solid var(--line);border-radius:24px;width:min(1460px,100%);padding:22px;box-shadow:0 18px 44px #2d241d1f}.twenty48-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;gap:16px;margin-bottom:20px;padding-bottom:20px;display:flex}.twenty48-body{grid-template-columns:minmax(0,1fr) 600px;align-items:start;gap:20px;display:grid}.twenty48-main{min-width:0}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:.82rem;font-weight:700}.twenty48-header h1{letter-spacing:-.05em;margin:0;font-size:clamp(1.8rem,1.35rem + 1.2vw,2.5rem)}.subtitle{color:var(--muted);max-width:60ch;margin:8px 0 0}button{border:1px solid var(--line);color:var(--ink);cursor:pointer;font:inherit;background:#fff;border-radius:12px}.restart{padding:10px 14px;font-weight:700}.twenty48-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:20px 0 16px;display:flex}.score-stack{flex-wrap:wrap;gap:10px;display:flex}.score-card{border:1px solid var(--line);background:#fff;border-radius:16px;gap:4px;min-width:120px;padding:10px 14px;display:grid}.score-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}.score-card strong{font-size:1.4rem}.score-card.muted strong{text-transform:capitalize}.status-copy{color:var(--muted);max-width:32ch;margin:0}.twenty48-board{border:1px solid var(--line);background:linear-gradient(#e5cfb8,#d6b99c);border-radius:14px;gap:6px;max-width:280px;padding:8px;display:grid}.tile{aspect-ratio:1;background:var(--tile-0);color:#816f5e;-webkit-user-select:none;user-select:none;border-radius:8px;place-items:center;font-size:clamp(.75rem,.6rem + .7vw,1.1rem);font-weight:800;display:grid}.tile[data-tone=v-2]{color:#6a5847;background:#f8efe4}.tile[data-tone=v-4]{color:#664d39;background:#f5dfc2}.tile[data-tone=v-8]{color:#fff8f1;background:#efb36b}.tile[data-tone=v-16]{color:#fff8f1;background:#ea9a55}.tile[data-tone=v-32]{color:#fffaf4;background:#dd7f4d}.tile[data-tone=v-64]{color:#fffaf4;background:#cf6240}.tile[data-tone=v-128]{color:#584614;background:#f1ce62}.tile[data-tone=v-256]{color:#584614;background:#e8bb47}.tile[data-tone=v-512]{color:#fff8e6;background:#db9c38}.tile[data-tone=v-1024]{color:#fff8e6;background:#c87f2f}.tile[data-tone=v-2048]{color:#fff7ef;background:#b55f34}.twenty48-controls{justify-items:center;gap:10px;margin-top:16px;display:grid}.twenty48-controls button{min-width:100px;padding:10px 14px;font-weight:700}.row-controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.twenty48-banner{border:1px solid var(--line);background:#fff;border-radius:14px;margin:14px 0 0;padding:12px 14px}.twenty48-banner.muted{color:var(--muted)}.twenty48-banner.error{color:#9f2f21;background:#fff2ef}.trace-panel{border:1px solid var(--line);background:#fff;border-radius:18px;flex-direction:column;height:560px;display:flex;overflow:hidden}.trace-header{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--panel) 80%, white);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex}.trace-title{letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-size:.8rem;font-weight:700}.trace-pill{background:var(--tile-0);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;border-radius:20px;max-width:180px;padding:2px 8px;font-family:SF Mono,Fira Code,ui-monospace,monospace;font-size:.72rem;font-weight:600;transition:background .1s,color .1s;overflow:hidden}.trace-pill.trace-pill-active{background:var(--accent);color:#fff}.trace-follow-btn{border:1px solid var(--line);color:var(--muted);cursor:pointer;letter-spacing:.03em;background:#fff;border-radius:20px;padding:2px 8px;font-size:.7rem;font-weight:600;transition:background .15s,color .15s,border-color .15s}.trace-follow-btn:hover{border-color:var(--accent);color:var(--accent)}.trace-follow-btn.trace-follow-btn-on{background:var(--accent);border-color:var(--accent);color:#fff}.code-view{flex:1;padding:6px 0;font-family:SF Mono,Fira Code,Cascadia Code,ui-monospace,monospace;font-size:.7rem;line-height:1.55;overflow:auto}.code-line{white-space:pre;gap:0;padding:0 10px 0 0;transition:background-color .12s;display:flex}@keyframes line-flash{0%{background-color:#b55f3473}to{background-color:#b55f3429}}.code-line-active{background-color:#b55f3429;animation:.9s ease-out line-flash}.code-lnum{width:32px;min-width:32px;color:var(--line);text-align:right;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;padding:0 8px 0 10px;display:inline-block}.code-line-active .code-lnum{color:var(--accent)}.code-text{color:var(--ink);flex:1}.st-sigil{color:var(--accent);font-weight:700}.st-kw{color:#7a5c9e}.st-type{color:#3b7abc}.st-bool{color:#b55f34;font-weight:600}.st-string{color:#4a8c45}.st-num{color:#c07030}.st-op{color:var(--muted)}.st-punct{color:#8f8074}.st-comment{color:#a09080;font-style:italic}.st-ident{color:var(--ink)}@media (width<=900px){.twenty48-body{grid-template-columns:1fr}.trace-panel{height:400px}}@media (width<=640px){.twenty48-shell{padding:18px}.twenty48-header{flex-direction:column}.score-card{min-width:0}.row-controls button,.twenty48-controls>button{flex:1;width:100%}.row-controls{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}}
