:root{color-scheme:light dark;
--n1:#FAFAFB;--n2:#F3F4F6;--n3:#E9EBEE;--n4:#DCDFE4;--n5:#C5C9D0;--n6:#9AA0AA;--n7:#6B717C;--n8:#4A505A;--n9:#2A2E36;--n10:#12141A;
--accent:#0F766E;--accent-hover:#0B5F58;--accent-press:#094E49;--accent-fg:#fff;
--success:#1A7F4B;--warning:#8A5A00;--danger:#C62828;--danger-bg:#FDF1F0;--warning-bg:#FFF6E5;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
--r-sm:6px;--r-md:10px;--ctl:36px;--hit:44px;--measure:720px;--col:160px;
--t-xs:12px;--t-sm:14px;--t-md:15px;--t-lg:18px;--t-xl:28px;
--font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--ease:cubic-bezier(.2,.6,.2,1);--dur:150ms;
--bg:var(--n1);--line:var(--n3);--line-strong:var(--n5);--text:var(--n10);--text-2:var(--n8);--text-3:var(--n7);--hover:var(--n2);--press:var(--n3)}
@media(prefers-color-scheme:dark){:root{
--n1:#0E1013;--n2:#15181C;--n3:#1C2025;--n4:#272C33;--n5:#363C45;--n6:#565D69;--n7:#8A919D;--n8:#AEB4BE;--n9:#D5D9DF;--n10:#F1F3F5;
--accent:#4FB8AB;--accent-hover:#6CC9BD;--accent-press:#86D6CC;--accent-fg:#06201D;
--success:#4CC38A;--warning:#E0A526;--danger:#F2766D;--danger-bg:#2A1715;--warning-bg:#2A2011}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-md)/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,p,ol,ul,fieldset{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{border-bottom:1px solid var(--line)}
.top-in,.wrap{max-width:calc(var(--measure) + var(--s5)*2);margin:0 auto;padding-inline:var(--s5)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;min-height:calc(var(--s7) + var(--s2));padding-block:var(--s2)}
.brand{font-weight:600;letter-spacing:-.01em}
.tools{display:flex;align-items:center;gap:var(--s4)}
.status{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--text-2)}
.dot{width:var(--s2);height:var(--s2);border-radius:50%;background:var(--n6)}
.status[data-ok=true] .dot{background:var(--success)}
.status[data-ok=false] .dot{background:var(--danger)}
select{height:var(--ctl);max-width:200px;padding:0 var(--s2);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;font-size:var(--t-sm)}
select:disabled{color:var(--text-3);background:var(--hover)}

.wrap{padding-block:var(--s6) var(--s8)}
h1{font-size:var(--t-xl);line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s2)}
.lead{color:var(--text-2);margin-bottom:var(--s5)}
.notice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);margin-bottom:var(--s5);border:1px solid var(--danger);border-radius:var(--r-md);background:var(--danger-bg);font-size:var(--t-sm)}
.notice .ic{color:var(--danger);margin-top:2px}

.field-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s2)}
label,legend{font-size:var(--t-sm);font-weight:500;padding:0}
.count{font-size:var(--t-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
textarea{display:block;width:100%;min-height:calc(var(--s8) + var(--s7));padding:var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;resize:vertical;transition:border-color var(--dur) var(--ease)}
textarea::placeholder{color:var(--text-3)}
textarea:hover{border-color:var(--n6)}
textarea:focus-visible{border-color:var(--accent);outline-offset:0}
textarea[aria-invalid=true]{border-color:var(--danger)}
.helper{font-size:var(--t-sm);color:var(--text-3);margin-top:var(--s2)}
.field-err{font-size:var(--t-sm);color:var(--danger);margin-top:var(--s2)}
.examples{display:flex;gap:var(--s3);align-items:baseline;margin-top:var(--s2);flex-wrap:wrap}
.examples .helper{margin:0}
#examples{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.trad{border:0;padding:0;margin-top:var(--s5)}
.trad legend{margin-bottom:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative;font-weight:400}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:var(--s1);height:var(--ctl);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text-2);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.chip .ic{display:none}
.chip:hover span{background:var(--hover)}
.chip input:checked+span{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chip input:checked+span .ic{display:block;color:var(--accent)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.ic{width:16px;height:16px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--ctl);padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r-sm);font:500 var(--t-sm) var(--font);cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-press)}
.btn.secondary{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn.secondary:hover{background:var(--hover)}
.btn.secondary:active{background:var(--press)}
.btn.ghost{background:transparent;color:var(--text-2);padding:0 var(--s2);min-height:var(--s6)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .8s linear infinite}
.btn[aria-busy=true] .spin{display:block}
.btn[aria-busy=true]{cursor:progress}
@keyframes rot{to{transform:rotate(360deg)}}
.progress{min-height:var(--s5);margin-top:var(--s3);font-size:var(--t-sm);color:var(--text-3)}

.empty{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.empty h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s1)}
.empty>p{color:var(--text-2);margin-bottom:var(--s4)}
.rows .row:first-child{border-top:0}
.row{display:grid;grid-template-columns:var(--col) minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0}
.row+.row,.rows .row{border-top:1px solid var(--line)}
.row.solo{grid-template-columns:minmax(0,1fr)}
.row-h{font-size:var(--t-sm);font-weight:600}
.row-c p{color:var(--text-2)}
.row-c ul{margin-top:var(--s2);padding-left:var(--s4);color:var(--text-2)}
.row-c li+li{margin-top:var(--s1)}
.row-c p+ul{margin-top:var(--s2)}
.empty .row-c p{font-size:var(--t-sm)}

.layers{list-style:none;padding:0;margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.layer+.layer{border-top:1px solid var(--line)}
.layer-h{margin:0;font:inherit}
.layer-btn{display:grid;grid-template-columns:var(--s5) minmax(0,1fr) auto var(--s4);align-items:center;gap:var(--s3);width:100%;min-height:var(--hit);padding:var(--s2) var(--s4);border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--dur) var(--ease)}
.layer-btn:hover{background:var(--hover)}
.layer-btn:active{background:var(--press)}
.layer-btn:focus-visible{outline-offset:-2px}
.num{font-size:var(--t-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.ttl{font-weight:500}
.meta{font-size:var(--t-sm);color:var(--text-3)}
.layer[data-state=running] .meta{color:var(--accent)}
.layer[data-state=error] .meta{color:var(--danger)}
.chev{transition:transform var(--dur) var(--ease);color:var(--text-3)}
.layer-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.layer-body{padding:0 var(--s4) var(--s4) calc(var(--s4) + var(--s5) + var(--s3))}
.skel{display:grid;gap:var(--s2);padding:var(--s2) 0}
.skel i{display:block;height:var(--s3);border-radius:var(--s1);background:var(--n3);animation:fade 1.4s ease-in-out infinite}
.skel i:nth-child(2){width:85%}.skel i:nth-child(3){width:60%}
@keyframes fade{50%{opacity:.5}}
.err{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s2) 0}
.err p{display:flex;gap:var(--s2);color:var(--danger);font-size:var(--t-sm)}
.err .ic{margin-top:2px}

@media(pointer:coarse){.btn,select,.chip span{min-height:var(--hit)}.btn.ghost{min-height:var(--hit)}}
@media(max-width:600px){
.top-in,.wrap{padding-inline:var(--s4)}
.row{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.layer-body{padding-left:var(--s4)}
.actions .btn{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}