:root{color-scheme:light;font:16px/1.6 system-ui,sans-serif;--bg:#fff9ed;--field:#ffffff;--ink:#233c2e;--muted:#4d6254;--line:#a1b29e;--soft:#eaf4df;--accent:#216b43;--green:#35b869;--gold:#e5a91f;--coral:#e86643;--blue:#3b9eff;--error:#ac392b;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#252b33;--field:#303a43;--ink:#faf1df;--muted:#c6d3c9;--line:#79928d;--soft:#3b4b44;--accent:#b9ed9e;--error:#ffb298}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);overflow-anchor:none}a{color:var(--accent);text-underline-offset:.2em}header,main,footer{max-width:1180px;margin:auto;padding:.85rem 2rem}header,footer,nav,.toolbar,.workspace,.actions,.cta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}header{border-bottom:1px solid var(--soft)}nav{margin-left:auto;gap:1.2rem;font-size:.92rem;font-weight:500}header a{color:var(--ink);text-decoration:none}header nav a:hover{color:var(--accent)}.brand{display:flex;align-items:center;font:700 1rem var(--mono)}.brand:after{content:"";width:24px;height:10px;margin-left:.55rem;border:1px solid var(--ink);border-radius:2px;background:linear-gradient(90deg,var(--green) 25%,var(--gold) 0 50%,var(--coral) 0 75%,var(--blue) 0)}h1{font-size:2.2rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 .85rem}h2,label,.tabs button,header h1{font:600 .74rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0}header h1:before{content:"/ "}h2{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.45rem}.home>h2{font:600 1.1rem/1.4 system-ui,sans-serif;text-transform:none;letter-spacing:-.015em;color:var(--ink);margin-top:1.75rem;padding-bottom:.4rem;border-bottom:1px solid var(--soft)}p{margin:.5rem 0 1rem}.lead{max-width:58ch;font-size:1.15rem;font-weight:600;line-height:1.55;margin:0 0 .75rem}.hero-copy{display:flex;flex-direction:column;gap:1rem;min-width:0}.hero-details{margin:0;font-size:.93rem;line-height:1.65;color:var(--muted)}.home .editors h2{padding-inline:1rem}.home>h2{padding-inline:1.1rem}.cta{margin:0}.hint,footer{font-size:.8rem;color:var(--muted)}.hint{margin:.4rem 0}
button,.button,select,textarea,.home pre,.card{font:inherit;color:inherit;background:var(--field);border:1px solid var(--line);border-radius:4px}button,.button,select{display:inline-block;min-height:2.35rem;padding:.45rem .85rem;font-size:.88rem;cursor:pointer;text-decoration:none}:is(button,select):enabled:hover,.button:hover{border-color:var(--ink)}.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}select{appearance:none;max-width:100%;padding-right:1.8rem;background:linear-gradient(45deg,#0000 50%,var(--muted) 50%) calc(100% - 14px) 52%/5px 5px no-repeat,linear-gradient(135deg,var(--muted) 50%,#0000 50%) calc(100% - 9px) 52%/5px 5px no-repeat var(--field)}
textarea,pre,code,.home pre{font:13px/1.6 var(--mono);tab-size:2}textarea,.home pre{padding:.85rem 1rem}textarea{display:block;width:100%;resize:vertical}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}:not(pre)>code{font-size:.9em}
.hero,.editors,.split,.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem;margin:1.25rem 0}.hero{grid-template-columns:1.15fr .85fr;align-items:start;gap:2rem;margin:.5rem 0 1.25rem}.home .editors{margin:1.5rem 0 1.75rem}.home .editors>*{display:grid;grid-template-rows:auto 1fr}.editors>*,.split>*,.cards>*{min-width:0}#source,#wit{height:16rem}.editors select{margin-bottom:.4rem}#function{width:100%;margin-bottom:.75rem}.note{text-transform:none;letter-spacing:0;font-weight:400}.workspace select{min-width:200px}.actions{justify-content:flex-end}.toolbar{justify-content:space-between;margin:.75rem 0}#run-controls{display:grid;grid-template-columns:minmax(0,1fr) auto}#status{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#cancel[hidden]{display:inline-block!important;visibility:hidden}[data-state=error]{color:var(--error)}
.card{--card-color:var(--green);padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:space-between;border-top:4px solid var(--card-color);background:color-mix(in srgb,var(--card-color) 18%,var(--field))}.card:nth-child(2){--card-color:var(--gold)}.card:nth-child(3){--card-color:var(--coral)}.card:nth-child(4){--card-color:var(--blue)}h3{font-size:1.05rem;margin:0 0 .4rem}.card p{font-size:.92rem;color:var(--ink);margin:0 0 .85rem}.card a{font-size:.85rem;font-weight:600;text-decoration:none}.card a:hover{text-decoration:underline}
.tabs{display:flex;gap:1.25rem;border-bottom:1px solid var(--line)}.tabs button{min-height:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0;background:none;padding:.45rem 0}.tabs [aria-selected=true]{color:var(--ink);border-color:var(--accent)}#results{display:flex;flex-direction:column}#output-panel{flex:1 1 0;min-height:16rem;overflow:auto;padding:.75rem;background:var(--soft)}
footer{margin-top:2rem;border-top:1px solid var(--soft)}[hidden]{display:none!important}
@media(max-width:960px){#run-controls{grid-template-columns:1fr}}
@media(max-width:720px){.hero{grid-template-columns:1fr;gap:.75rem}.hero .component-art{max-width:256px}.hero .cta .button{width:100%;gap:.75rem;padding:.85rem .9rem}header,main,footer{padding:.65rem 1rem}.editors,.split,.cards{grid-template-columns:1fr}.workspace select{flex:1}button,select{min-height:40px}h1{font-size:1.65rem}}
.artifacts{padding-left:1.2rem;margin:1rem 0 2.5rem}.artifacts li{margin:.7rem 0}.artifacts pre{margin-top:.4rem}
.component-art{width:100%;max-width:320px;margin:0;justify-self:center;align-self:center;text-align:center}
.component-art svg{display:block;width:100%;height:auto}
.component-art figcaption{font-size:.85rem}.component-art strong{display:block;font-size:1rem}.component-art figcaption span{display:block;color:var(--muted);font-size:.75rem}
.editors code span{color:var(--shiki-light,inherit)}


.cta .button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.1rem;width:20rem;max-width:100%;background:#b9ed9e;color:#244c35;border:2px solid #244c35;border-radius:6px;box-shadow:4px 4px 0 #244c35;padding:.85rem 1.1rem;font-size:1rem;font-weight:750;user-select:none}
.cta .start-key{font:700 .7rem/1 var(--mono);letter-spacing:.05em;padding:.5rem .65rem;border:1px solid #244c35;border-radius:3px;background:#dcf7c4;box-shadow:0 2px 0 #244c35;transition:transform .12s,box-shadow .12s,border-radius .12s}
.cta .button:hover .start-key,.cta .button:focus-visible .start-key{border-radius:0}.cta .button:active .start-key{transform:translateY(2px);box-shadow:inset 0 2px 2px #16342190}
@media(prefers-reduced-motion:reduce){.cta .start-key{transition:none}}
.code-editor{position:relative;height:16rem;resize:vertical;overflow:auto;overscroll-behavior:none;scroll-behavior:auto;scrollbar-gutter:stable;scrollbar-color:var(--line) var(--field);min-height:8rem;border:1px solid var(--line);border-radius:4px;background:var(--field)}
.code-layer{position:relative;width:max-content;min-width:100%;min-height:100%;margin:0;padding:.85rem 1rem;border:0;border-radius:0;background:var(--field);white-space:pre;overflow:visible;overflow-wrap:normal;pointer-events:none}
.code-layer code{font:inherit}
.code-editor textarea{position:absolute;top:0;left:0;margin:0;border:0;resize:none;overflow:hidden;caret-color:var(--ink)}
.code-editor textarea[data-highlighted]{background:transparent;color:transparent;-webkit-text-fill-color:transparent}
.code-editor textarea::selection{background:#b4d9f0a0;color:transparent}
.code-editor:focus-within{outline:2px solid var(--accent);outline-offset:1px}.code-editor textarea:focus-visible{outline:0}

.code-editor::-webkit-scrollbar{width:12px;height:12px}.code-editor::-webkit-scrollbar-track,.code-editor::-webkit-scrollbar-corner{background:var(--field)}.code-editor::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--field);border-radius:6px}.code-editor::-webkit-scrollbar-thumb:hover{background:var(--accent)}

@media(prefers-color-scheme:dark){.editors code span{color:var(--shiki-dark,inherit)}}