:root{--z-bg:#101010}
html,body{background:#101010}
.mono,.ed pre,.dstage pre{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.hvis{padding-bottom:0}
.ed{display:grid;grid-template-columns:44px 190px minmax(0,1fr);min-height:300px}
.ab{background:#0c0c0d;border-right:1px solid var(--z-line);display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:14px}
.ab i{width:18px;height:18px;border-radius:5px;background:#2a2a2e}.ab i.on{background:var(--z-acc)}
.side{border-right:1px solid var(--z-line);padding:14px 12px;background:#0f0f11}
.lbl{font-size:var(--z-t-11);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--z-dim);margin-bottom:8px}
.ly{font:600 var(--z-t-11)/1 var(--mono);color:var(--z-dim);margin:12px 0 6px}
.tsk{font-size:var(--z-t-12);color:var(--z-ink-2);padding:6px 8px;border-radius:8px;display:flex;align-items:center;gap:8px}
.tsk::before{content:"";width:6px;height:6px;border-radius:50%;background:#55555c;flex:none}
.tsk.ok::before{background:#6ee7a5}.tsk.on{background:rgba(255,255,255,.05);color:#fff}.tsk.on::before{background:var(--z-acc)}
.code{padding:0;min-width:0;display:flex;flex-direction:column}
.tab{font:500 var(--z-t-12)/1 var(--mono);color:#fff;padding:10px 14px;border-bottom:1px solid var(--z-line);background:#131315}
.ed pre{margin:0;padding:10px 0;font-size:var(--z-t-12);line-height:1.8;color:var(--z-body);white-space:pre-wrap;overflow-wrap:anywhere}
.ed pre span{display:block;padding:0 12px}.ed pre b{display:inline-block;width:22px;color:#55555c;font-weight:500}
.ad{background:rgba(61,220,132,.07);color:#bdf2d4}.rm{background:rgba(255,92,92,.07);color:#ffc2c2}
.nyc{margin:auto 14px 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(253,109,1,.45);background:rgba(253,109,1,.07)}
.nyc b{font-size:var(--z-t-12);color:#ffb27a;letter-spacing:.08em;text-transform:uppercase}
.nyc p{margin:6px 0 10px;font-size:var(--z-t-14);color:#fff}
.nyc div{display:flex;gap:8px}.nyc span{padding:6px 14px;border-radius:9px;font-size:var(--z-t-12);font-weight:650}
.nyc .no{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}.nyc .ok{background:var(--z-acc);color:var(--z-acc-ink)}
.sbar{display:flex;justify-content:space-between;gap:12px;padding:7px 14px;border-top:1px solid var(--z-line);background:#0c0c0d;font:500 var(--z-t-11)/1.2 var(--mono);color:var(--z-dim)}
.sbar .stp{color:#ffb27a}
/* demo */
.demo{margin-top:40px}
.dsteps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dsteps button{font:600 var(--z-t-12)/1 var(--z-font);color:var(--z-body);background:transparent;border:1px solid var(--z-line-2);border-radius:999px;padding:9px 14px;min-height:36px;cursor:pointer}
.dsteps button[aria-selected=true]{color:var(--z-acc-ink);background:var(--z-acc);border-color:var(--z-acc)}
.dsteps button.done{color:#fff}
.dstage{min-height:360px;padding:22px;display:grid;gap:14px;align-content:start}
.dstage:focus{outline:none}
.dstage h3{font-size:var(--z-t-18,18px);font-weight:650;letter-spacing:-.01em}
.dstage .sub{font-size:var(--z-t-14);color:var(--z-body)}
.msg{max-width:560px;padding:12px 14px;border-radius:12px;font-size:var(--z-t-14);line-height:1.5;background:#17171a;border:1px solid var(--z-line);color:var(--z-ink-2)}
.msg.me{margin-left:auto;background:rgba(253,109,1,.1);border-color:rgba(253,109,1,.35);color:#fff}
.msg small{display:block;font-size:var(--z-t-11);color:var(--z-dim);margin-bottom:4px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.lays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.lay{border:1px solid var(--z-line);border-radius:12px;padding:12px;background:#121214}
.lay b{display:block;font:650 var(--z-t-11)/1 var(--mono);color:var(--z-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.lay p{font-size:var(--z-t-12);color:var(--z-ink-2);padding:4px 0}
.stages{display:flex;flex-wrap:wrap;gap:8px}
.stg-p{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--z-line-2);font-size:var(--z-t-12);font-weight:600;color:var(--z-dim)}
.stg-p i{width:7px;height:7px;border-radius:50%;background:#55555c}
.stg-p.ok{color:#fff}.stg-p.ok i{background:#6ee7a5}.stg-p.now{color:#ffb27a;border-color:rgba(253,109,1,.5)}.stg-p.now i{background:var(--z-acc)}
.bar{height:6px;border-radius:6px;background:#222;overflow:hidden}.bar i{display:block;height:100%;background:var(--z-acc);width:0;transition:width .6s}
.nyc.big{margin:0;max-width:520px}.nyc.big span{cursor:pointer;border:0;font:inherit;font-weight:650;font-size:var(--z-t-14);padding:10px 18px;min-height:40px}
.ans{font-size:var(--z-t-14);color:#6ee7a5}
.tests{display:grid;gap:8px}
.tst{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--z-line);background:#121214;font-size:var(--z-t-14);color:var(--z-ink-2)}
.shot{height:44px;border-radius:6px;background:linear-gradient(#1d1d21 0 30%,#141416 30%);border:1px solid var(--z-line);position:relative}
.shot::after{content:"";position:absolute;left:8px;top:22px;width:28px;height:6px;border-radius:3px;background:var(--z-acc)}
.judges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jc{border:1px solid var(--z-line);border-radius:14px;padding:16px;background:#121214}
.jc .top{display:flex;justify-content:space-between;align-items:baseline}
.jc .sc{font-size:32px;font-weight:700;letter-spacing:-.02em;color:#fff}
.jc ul{margin-top:10px;display:grid;gap:4px;font-size:var(--z-t-12);color:var(--z-body)}
.rounds{display:flex;gap:8px}
.rounds button{font:600 var(--z-t-12)/1 var(--z-font);padding:8px 12px;border-radius:9px;border:1px solid var(--z-line-2);background:transparent;color:var(--z-body);cursor:pointer;min-height:36px}
.rounds button[aria-pressed=true]{color:#fff;border-color:#fff}
.dstage .diff{border-radius:10px;border:1px solid var(--z-line);background:#0d0d0f;overflow:hidden}
.dstage .diff .dh{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--z-line);font:500 var(--z-t-11)/1.3 var(--mono);color:var(--z-dim)}
.dstage .diff pre{margin:0;padding:6px 0;font-size:var(--z-t-12);line-height:1.7;color:var(--z-body);white-space:pre-wrap;overflow-wrap:anywhere}
.dstage .diff pre span{display:block;padding:0 12px}
.app{border:1px solid var(--z-line);border-radius:12px;overflow:hidden;max-width:560px}
.app .ub{font:500 var(--z-t-11)/1 var(--mono);color:var(--z-dim);padding:8px 12px;background:#131315;border-bottom:1px solid var(--z-line)}
.app table{width:100%;border-collapse:collapse;font-size:var(--z-t-14)}.app td{padding:10px 12px;border-bottom:1px solid var(--z-line);color:var(--z-ink-2)}
.badge{font-size:var(--z-t-11);font-weight:650;padding:3px 8px;border-radius:999px;background:rgba(253,109,1,.16);color:#ffb27a}
.dnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.dhint{font-size:var(--z-t-14);color:var(--z-body);text-align:center;flex:1}
.dnav .z-btn{min-height:44px}.dnav .z-btn[disabled]{opacity:.4;cursor:default}
.z-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.feats{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ft{border:1px solid var(--z-line);border-radius:16px;background:var(--z-surface);padding:18px}
.ft b{font-size:var(--z-t-16);font-weight:650}.ft p{margin-top:8px;font-size:var(--z-t-14);line-height:1.5;color:var(--z-body)}
.pts{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.pts li{display:flex;align-items:center;gap:10px;font-size:var(--z-t-16);color:var(--z-ink-2)}
.pts svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--z-body);stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round}
.lh2{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--z-line)}
.lh2 b{font-size:var(--z-t-14);font-weight:650}.lh2 .sample{margin-left:auto}
.flow{padding:20px;display:grid;gap:10px}
.flow li{padding:14px 16px;border-radius:12px;border:1px solid var(--z-line);background:#121214}
.flow li:first-child{border-color:rgba(253,109,1,.45)}
.flow b{display:block;font-size:var(--z-t-16);font-weight:650}.flow small{color:var(--z-dim);font-size:var(--z-t-12)}
.pr{padding:0 0 20px}
.tl{margin:20px 20px 0 26px;display:grid;border-left:1px solid var(--z-line-2)}
.tl li{position:relative;padding:0 0 16px 22px;font-size:var(--z-t-14);line-height:1.45;color:var(--z-ink-2)}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:#55555c;box-shadow:0 0 0 3px #0e0e10}
.tl li.wt::before{background:var(--z-acc)}
.tl small{display:block;color:var(--z-dim);font-size:var(--z-t-12)}
.legal .tm{font-size:var(--z-t-12);color:var(--z-dim)}
@media (max-width:1279px){.ed{grid-template-columns:44px minmax(0,1fr)}.side{display:none}.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.feats,.judges,.lays{grid-template-columns:1fr}.ab{display:none}.ed{grid-template-columns:minmax(0,1fr)}.dstage{padding:16px;min-height:420px}.tst{grid-template-columns:minmax(0,1fr) auto}.tst .shot{display:none}.dhint{display:none}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.nyc.big button{appearance:none;border:0;cursor:pointer;font:650 var(--z-t-14)/1 var(--z-font);padding:10px 18px;min-height:40px;border-radius:9px}
.nyc.big button.no{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.nyc.big button.ok{background:var(--z-acc);color:var(--z-acc-ink)}
/* r2 craft */
.dsteps button{min-height:44px;padding:0 16px}
.dsteps button[aria-selected=true]{background:rgba(253,109,1,.08);color:#e6e6e6;border-color:#fd6d01}
.dsteps button.done{color:#fff}
.nyc.big button{min-height:44px}
.nyc.big button.ok{background:transparent;color:#ffb27a;box-shadow:inset 0 0 0 1px rgba(253,109,1,.7)}
.nyc .ok{background:transparent;color:#ffb27a;box-shadow:inset 0 0 0 1px rgba(253,109,1,.7)}
.rounds button{min-height:44px;padding:0 16px}
.dnav .z-btn[aria-disabled=true]{opacity:.4;cursor:default}
.rule{margin-top:24px;max-width:760px;font-size:var(--z-t-14);line-height:1.55;color:var(--z-body)}.rule b{color:#fff}
@media (max-width:767px){
 .dsteps{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);padding-inline:12px;margin-inline:-12px}
 .dsteps::-webkit-scrollbar{display:none}
 .dsteps li{flex:none;scroll-snap-align:center}
 .dsteps button{white-space:nowrap}
 .dstage{min-height:0}
}
/* r3 */
.dstage{display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:32px 24px;overflow:hidden;transition:height .2s ease}
.dstage>*{flex:none}
.dstat{margin-top:auto;padding-top:8px;font:500 var(--z-t-12)/1.4 var(--mono);color:#9e9e9e}
@media (max-width:600px){.dstage{padding:24px 16px}}
@media (prefers-reduced-motion:reduce){.dstage{transition:none}}
.rv,.stg,.stg>*{opacity:1!important;transform:none!important}
html:not(.js) .demo{display:none}
.dfall{margin-top:32px;display:grid;gap:10px;font-size:var(--z-t-16);color:var(--z-body)}.dfall b{color:#fff;margin-right:8px}
/* r4 */
.dstage{transition:none}
.dbody{display:flex;flex-direction:column;gap:14px}
.dstat{margin-top:auto}
.nyc.big button.sel{background:rgba(253,109,1,.14);color:#fff;box-shadow:inset 0 0 0 2px #fd6d01}
.nyc.big button.no.sel{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px #fff}
.nyc.big button.dim{opacity:.45}
.teach{border-left:2px solid #fd6d01;padding-left:12px}
.tbtn{appearance:none;background:transparent;border:0;color:#ffb27a;font:600 var(--z-t-12)/1 var(--z-font);min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:0 4px}
.tdot{width:8px;height:8px;border-radius:50%;background:#fd6d01}
.tp{font-size:var(--z-t-14);line-height:1.5;color:var(--z-ink-2);max-width:680px;padding-bottom:4px}
.fx{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1fr);gap:12px}
.tree{border:1px solid var(--z-line);border-radius:12px;background:#0f0f11;padding:10px;font:500 var(--z-t-12)/1.9 var(--mono);color:var(--z-body)}
.tree .tf{color:#fff}.tree .td{color:var(--z-dim)}.tree .tl2{padding-left:14px}.tree .on{color:#fff;background:rgba(253,109,1,.12);border-radius:6px}
.mded{display:flex;flex-direction:column;border:1px solid var(--z-line);border-radius:12px;overflow:hidden}
.mdl{font:500 var(--z-t-11)/1 var(--mono);color:var(--z-dim);padding:8px 12px;background:#131315;border-bottom:1px solid var(--z-line)}
.mded textarea{flex:1;min-height:180px;resize:vertical;background:#0d0d0f;color:var(--z-ink-2);border:0;padding:12px;font:500 var(--z-t-12)/1.7 var(--mono)}
.mded textarea:focus-visible{outline:2px solid var(--z-acc);outline-offset:-2px}
.mdpv{border:1px solid var(--z-line);border-radius:12px;padding:12px 14px;background:#121214;font-size:var(--z-t-14);line-height:1.55;color:var(--z-ink-2)}
.mdpv h4{font-size:var(--z-t-16);color:#fff;margin-bottom:8px}.mdpv p{margin-bottom:8px}.mdpv ul{list-style:disc;padding-left:18px}
.meter{display:flex;height:14px;border-radius:8px;overflow:hidden;background:#222}
.meter i{display:block;height:100%;transition:width .4s}.mc{background:#fd6d01}.mt{background:#ffb27a}.mm{background:#55555c}
.leg{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--z-t-12);color:var(--z-body)}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.leg .tg{color:var(--z-dim);margin-left:auto}
.sugs{display:grid;gap:8px}
.sugs li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--z-line);border-radius:10px;background:#121214;font-size:var(--z-t-14);color:var(--z-ink-2)}
.sugs small{display:block;font-size:var(--z-t-12);color:var(--z-dim);margin-top:2px}
.ghost{appearance:none;background:transparent;color:#ffb27a;border:0;box-shadow:inset 0 0 0 1px rgba(253,109,1,.7);border-radius:9px;min-height:44px;padding:0 16px;font:650 var(--z-t-14)/1 var(--z-font);cursor:pointer;flex:none}
@media (max-width:1023px){.fx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tree{grid-column:1/-1}}
@media (max-width:600px){.fx{grid-template-columns:1fr}.leg .tg{margin-left:0}}
@media (prefers-reduced-motion:reduce){.meter i{transition:none}}
.ft.hi{border-color:rgba(253,109,1,.45)}
/* r4b guide panel */
.gbtn{appearance:none;margin-left:auto;background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--z-line-2);color:var(--z-ink-2);border-radius:9px;min-height:44px;padding:0 14px;font:600 var(--z-t-12)/1 var(--z-font);cursor:pointer}
.gbtn.on{box-shadow:inset 0 0 0 1px #fd6d01;color:#ffb27a}
.win-bar:has(.gbtn){height:auto;min-height:56px}.win-bar .gbtn+.sample{margin-left:0}
.dmain{display:flex}.dmain .dstage{flex:1;min-width:0}
.guide{flex:none;width:280px;border-left:1px solid var(--z-line);background:#0f0f11;padding:24px 18px;display:flex;flex-direction:column;gap:10px}
.guide[hidden]{display:none}
.gk{font-size:var(--z-t-11);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#ffb27a}
.gdef{font-size:var(--z-t-12);line-height:1.5;color:var(--z-dim)}
.gh{font-size:var(--z-t-14);font-weight:650;color:#fff;margin-top:6px}
.gt{font-size:var(--z-t-14);line-height:1.55;color:var(--z-ink-2)}
@media (max-width:767px){.dmain{flex-direction:column}.guide{width:auto;border-left:0;border-top:1px solid var(--z-line)}}
.mdl{display:flex;justify-content:space-between;gap:8px}.saved{color:var(--z-dim)}
.sbar{white-space:nowrap;min-height:30px;align-items:center}.sbar span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-bar .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.sbar span:last-child{display:none}}
.mdpv{height:220px;overflow:auto}.mded textarea{height:180px;resize:none;flex:none}@media (min-width:601px){.mdpv{height:auto;min-height:180px;max-height:260px}}
.gbtn{white-space:nowrap}@media (max-width:600px){.gbtn .gl{display:none}.gbtn{padding:0 12px}}
/* r5 */
.applied{font-size:var(--z-t-11);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#ffb27a;padding:6px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(253,109,1,.55);flex:none}
.gbtn{margin-right:12px}.win-bar .ttl{flex:1 1 auto}
.tree{list-style:none;padding:6px;margin:0}
.tree ul{list-style:none;padding:0;margin:0}
.ti{display:block;cursor:pointer;border-radius:8px}
.tree>.ti{min-height:44px;line-height:44px;padding:0 8px;color:var(--z-dim)}
.tree .tl2{min-height:44px;line-height:44px;padding:0 8px 0 22px;color:var(--z-body)}
.ti:focus-visible{outline:2px solid var(--z-acc);outline-offset:-2px}
.tree .tl2.on{color:#fff;background:rgba(253,109,1,.12)}
.car{display:inline-block;width:14px;color:var(--z-dim)}
.fpick,.seg{display:none}
.cpv{margin:0;white-space:pre-wrap;font:500 var(--z-t-12)/1.7 var(--mono);color:var(--z-body)}
.fpb,.seg button,.fpl button{appearance:none;min-height:44px;border-radius:10px;font:600 var(--z-t-14)/1 var(--z-font);cursor:pointer}
.fpb{width:100%;text-align:left;padding:0 14px;background:#121214;color:#fff;border:1px solid var(--z-line-2);font-family:var(--mono);font-size:var(--z-t-12)}
.fpl{list-style:none;margin:6px 0 0;padding:6px;border:1px solid var(--z-line-2);border-radius:12px;background:#121214;display:grid;gap:2px}
.fpl[hidden]{display:none}
.fpl button{width:100%;text-align:left;padding:0 12px;background:transparent;border:0;color:var(--z-ink-2);font-family:var(--mono);font-size:var(--z-t-12)}
.fpl button[aria-current=true]{color:#fff;background:rgba(253,109,1,.12)}
.seg{gap:0;border:1px solid var(--z-line-2);border-radius:12px;padding:3px}
.seg button{flex:1;background:transparent;border:0;color:var(--z-body)}
.seg button[aria-pressed=true]{color:#fff;box-shadow:inset 0 0 0 1px #fd6d01;background:rgba(253,109,1,.08)}
@media (max-width:600px){
 .tree{display:none}.fpick{display:block}.seg{display:flex}
 .v-edit .mdpv{display:none}.v-preview .mded{display:none}
 .mded textarea{height:196px}.mdpv{height:240px;max-height:240px}
}
.gbtn{flex:none}
@media (max-width:600px){.mded{height:240px}.mded textarea{height:auto;flex:1;min-height:0}.mdpv{box-sizing:border-box}}
.fpick{position:relative}.fpl{position:absolute;left:0;right:0;top:100%;z-index:5;box-shadow:0 20px 50px -10px rgba(0,0,0,.8)}
@media (max-width:600px){.dbody{gap:12px}.dstage{gap:12px}.sugs{gap:6px}.sugs li{padding:8px 10px;font-size:var(--z-t-12)}.leg{gap:6px 12px}}
/* r6 guide sheet */
.ghd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gx{display:none;appearance:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px var(--z-line-2)}
.gx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:600px){
 .guide{position:fixed;inset:auto 0 0 0;z-index:50;width:auto;max-height:60vh;overflow-y:auto;border:0;border-top:1px solid #2a2a2e;border-radius:16px 16px 0 0;background:#141416;padding:0 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -24px 60px -10px rgba(0,0,0,.85)}
 .ghd{position:sticky;top:0;background:#141416;padding:10px 0 6px;z-index:1}
 .gx{display:inline-grid;place-items:center}
}