.app-shell{--app-code-font: Monaco, "Cascadia Code", Consolas, "Courier New", monospace;--app-panel: rgb(255 255 255 / 32%);--app-line: rgb(194 192 182 / 70%);color:var(--color-charcoal);font-family:PingFang SC,-apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,sans-serif}html.dark .app-shell{--app-panel: rgb(30 30 28 / 46%);--app-line: #333;color:var(--color-cream)}.app-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:end;border-bottom:1px solid var(--app-line);padding:.18rem 0 .5rem}.app-kicker,.app-section-kicker{margin:0 0 .28rem;color:var(--color-terracotta);font-family:var(--font-mono);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.app-hero h1{margin:0;font-size:clamp(1.15rem,2vw,1.65rem);line-height:1.1}.app-hero p:not(.app-kicker){max-width:60rem;margin:.35rem 0 0;color:var(--color-secondary);font-size:.76rem;line-height:1.45}.app-actions,.app-toolbar,.app-toolbar>div,.app-step-actions,.app-playback,.app-playback>div{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}.app-actions{justify-content:flex-end}.app-actions a,.app-toolbar button,.app-step-actions button,.app-playback button,.app-suffixes button,.app-rail button{border:1px solid var(--app-line);border-radius:.4rem;background:transparent;color:var(--color-secondary);cursor:pointer;font:inherit;font-size:.66rem;font-weight:700;padding:.24rem .42rem;text-decoration:none}.app-actions a:hover,.app-toolbar button:hover,.app-step-actions button:hover,.app-playback button:hover,.app-playback button.is-active,.app-playback button.is-playing,.app-suffixes button:hover,.app-suffixes button.is-active,.app-rail button:hover,.app-rail button.is-active{border-color:var(--color-terracotta);color:var(--color-terracotta)}.app-workbench{display:grid;gap:.48rem;margin:.6rem 0 1.4rem}.app-toolbar,.app-stepper,.app-panel,.app-code-section{border:1px solid var(--app-line);border-radius:.52rem;background:var(--app-panel);padding:.64rem}.app-toolbar label,.app-playback label span,.app-playback label em{color:var(--color-muted);font-size:.62rem;font-style:normal;font-weight:800;white-space:nowrap}.app-toolbar input,.app-playback input{border:1px solid var(--app-line);border-radius:.4rem;background:#ffffff85;color:var(--color-charcoal);font-family:var(--app-code-font);font-size:.74rem;padding:.28rem .42rem}.app-toolbar input{min-width:9rem;flex:1 1 14rem}.app-stepper{display:grid;gap:.5rem}.app-step-head,.app-step-body,.app-code-section{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem;align-items:start}.app-stepper h2,.app-panel h2,.app-code-section h2{margin:0;color:var(--color-charcoal);font-size:1rem;line-height:1.2}.app-step-actions span{font-family:var(--app-code-font);font-size:.68rem;font-weight:800}.app-playback label{display:flex;align-items:center;gap:.25rem;margin-left:auto}.app-playback input{width:5rem}.app-step-body{grid-template-columns:minmax(0,1fr) minmax(12rem,.8fr)}.app-step-body>p,.app-step-body>div{min-width:0;margin:0;border:1px solid rgb(194 192 182 / 42%);border-radius:.44rem;background:#ffffff47;color:var(--color-secondary);font-size:.78rem;line-height:1.52;padding:.54rem}.app-step-body strong{display:block;margin-bottom:.2rem;color:var(--color-muted);font-size:.58rem;text-transform:uppercase}.app-step-body p{margin:0}.app-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.24rem}.app-rail button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.24rem;min-height:2.8rem;text-align:left;white-space:normal}.app-rail button.is-complete:not(.is-active){border-color:#2f7d4f4d;background:#2f7d4f12}.app-rail span{color:var(--color-terracotta);font-family:var(--app-code-font)}.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.48rem}.app-wide{grid-column:span 2}.app-suffixes{display:grid;gap:.24rem}.app-suffixes button{display:grid;grid-template-columns:2rem 2rem minmax(0,1fr) 2rem;align-items:center;text-align:left}.app-suffixes span{color:var(--color-muted);font-family:var(--app-code-font);font-size:.56rem}.app-suffixes code,.app-table code{font-family:var(--app-code-font);font-size:.72rem}.app-suffixes b{color:var(--color-terracotta);font-family:var(--app-code-font);font-size:.7rem}.app-result{color:var(--color-charcoal);font-family:var(--app-code-font);font-size:.86rem;font-weight:800;line-height:1.5}.app-table-wrap{overflow:auto}.app-table{width:100%;border-collapse:collapse;color:var(--color-secondary);font-size:.7rem}.app-table th,.app-table td{border-bottom:1px solid rgb(194 192 182 / 42%);padding:.34rem .28rem;text-align:left;white-space:nowrap}.app-table th{color:var(--color-muted);font-size:.58rem;text-transform:uppercase}.app-table tr.is-active{background:#d977571a;color:var(--color-charcoal)}.app-table tr.is-best{color:#2f7d4f;font-weight:800}.app-code-section{grid-template-columns:minmax(12rem,.72fr) minmax(0,1.28fr)}.app-code-section p{margin:.4rem 0 0;color:var(--color-secondary);font-size:.78rem;line-height:1.52}.app-code{overflow:auto;margin:0;border-radius:.44rem;background:#141413f0;color:#f6efe2;font-family:var(--app-code-font);font-size:.72rem;line-height:1.44;padding:.58rem 0}.app-code-line{display:block;min-height:1em;padding:0 .7rem;white-space:pre}.app-code-keyword{color:#f4a261;font-weight:800}.app-code-number{color:#f7d36a}html.dark .app-hero p:not(.app-kicker),html.dark .app-step-body>p,html.dark .app-step-body>div,html.dark .app-table,html.dark .app-code-section p{color:var(--color-muted)}html.dark .app-toolbar input,html.dark .app-playback input{background:#1e1e1c61;color:var(--color-cream)}html.dark .app-stepper h2,html.dark .app-panel h2,html.dark .app-code-section h2,html.dark .app-result,html.dark .app-table tr.is-active{color:var(--color-cream)}@media(max-width:900px){.app-hero,.app-step-head,.app-step-body,.app-grid,.app-code-section{grid-template-columns:1fr}.app-actions{justify-content:flex-start}.app-wide{grid-column:auto}.app-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.app-playback label{margin-left:0}}@media(max-width:520px){.app-rail{grid-template-columns:1fr}}