@font-face{font-family:Tektur;src:url(/fonts/tektur.woff2) format("woff2");font-weight:400 900;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Frag;src:url(/fonts/fragment.woff2) format("woff2");font-display:swap}
:root{--bg:#121316;--pn:#1c1e23;--pn2:#23262c;--ln:#2e3239;--tx:#e9e6df;--mu:#8d929c;--clip:#2aa36b;--clip2:#3fd18b;--ph:#ff3d3d;--vid:#4b6bdc;--paper:#f4f1ea;--mono:Frag,ui-monospace,Menlo,monospace;--head:Tektur,system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:84px}
a{color:var(--clip2)}a:hover{color:#fff}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:#000;padding:6px 10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--clip2);outline-offset:2px}
.menubar{display:flex;align-items:center;gap:18px;height:42px;padding:0 14px;background:#0c0d0f;border-bottom:1px solid var(--ln);font:12px var(--mono);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;font:600 14px var(--head);letter-spacing:.02em}.brand i{font-style:normal;color:var(--mu)}
.menubar nav{display:flex;gap:2px;overflow-x:auto}.menubar nav a{color:var(--mu);text-decoration:none;padding:6px 10px;border-radius:4px;white-space:nowrap}
.menubar nav a:hover,.menubar nav a[aria-current]{background:var(--pn2);color:var(--tx)}
.rec{margin-left:auto;color:var(--mu);white-space:nowrap}.playing .rec{color:var(--ph)}
main{display:block;outline:0}
.kick{font:12px var(--mono);color:var(--clip2);text-transform:uppercase;letter-spacing:.12em;margin:0 0 8px}
h1,h2{font-family:var(--head);font-weight:700;letter-spacing:.01em;line-height:1.08}
h1{font-size:clamp(34px,5.4vw,72px);margin:0 0 14px}h1 span{color:var(--mu);font-weight:500}
h2{font-size:22px;margin:28px 0 10px}
.lede{max-width:62ch;color:#c9c6bf;font-size:17px}
/* slate */
.slate{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;padding:34px 22px 26px;position:relative;border-bottom:1px solid var(--ln)}
.slate:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(-45deg,var(--paper) 0 18px,#0c0d0f 18px 36px)}
.sl-r{display:grid;grid-template-columns:1fr 1fr;margin:0;align-self:end;border:2px solid var(--paper);border-radius:4px}
.sl-r div{padding:10px 14px;border:1px solid #555}.sl-r dt{font:11px var(--mono);color:var(--mu);text-transform:uppercase;letter-spacing:.1em}.sl-r dd{margin:2px 0 0;font:700 26px var(--head);color:var(--paper)}
/* editor */
.bay{display:grid;grid-template-columns:230px 1fr 300px;grid-template-areas:"p m e" "t t t";gap:4px;padding:4px;background:#0c0d0f}
.panel{background:var(--pn);border:1px solid var(--ln);border-radius:3px;min-width:0}
.ph{margin:0;padding:6px 10px;font:12px var(--mono);color:var(--mu);border-bottom:1px solid var(--ln);background:var(--pn2);letter-spacing:.04em;font-weight:400}
.ph span{color:var(--tx)}
.proj{grid-area:p}.mon{grid-area:m}.exp{grid-area:e;display:flex;flex-direction:column}.tl{grid-area:t}
.bins{list-style:none;margin:0;padding:6px}.bin{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:3px;color:var(--tx);text-decoration:none;font-size:13px}
.bin em{margin-left:auto;font:11px var(--mono);color:var(--mu);font-style:normal}.bin:hover{background:var(--pn2);color:#fff}.bin.on{background:#20402f;color:#fff}
.fold{width:14px;height:10px;background:#c9a64a;border-radius:1px 3px 1px 1px;flex:none;position:relative}.fold:before{content:"";position:absolute;left:0;top:-3px;width:6px;height:3px;background:#c9a64a;border-radius:2px 2px 0 0}
.more{display:block;padding:6px 14px 10px;font:12px var(--mono)}
.screen{position:relative;aspect-ratio:16/9;background:#000;margin:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.screen img{height:100%;width:auto;aspect-ratio:1}
.safe{position:absolute;inset:5% 5%;border:1px dashed rgba(255,255,255,.22);pointer-events:none}.safe:after{content:"";position:absolute;inset:5% 5%;border:1px dashed rgba(255,255,255,.12)}
.lower{position:absolute;left:7%;bottom:10%;background:rgba(12,13,15,.86);border-left:4px solid var(--ph);padding:8px 14px;display:flex;flex-direction:column;max-width:70%}
.lower b{font:600 18px var(--head)}.lower span{font:11px var(--mono);color:var(--mu)}
.mtc{position:absolute;right:3%;top:4%;font:13px var(--mono);background:rgba(0,0,0,.6);padding:2px 6px;color:var(--paper)}
.monbar{display:flex;align-items:center;gap:12px;padding:0 10px 10px;flex-wrap:wrap}.hint{font:11px var(--mono);color:var(--mu)}
.mbtn{font:600 13px var(--mono);background:var(--clip);color:#04120b;border:0;border-radius:3px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-block}
.mbtn:hover{background:var(--clip2);color:#04120b}.mbtn.ghost{background:transparent;color:var(--tx);border:1px solid var(--ln)}.mbtn.ghost:hover{border-color:var(--clip2);color:#fff}
.exp .fl{display:flex;justify-content:space-between;align-items:center;padding:10px;font:12px var(--mono);color:var(--mu)}
select{background:var(--pn2);color:var(--tx);border:1px solid var(--ln);border-radius:3px;padding:5px;font:12px var(--mono)}
#desc{flex:1;margin:0 10px;min-height:170px;background:#0f1013;color:#cfe9da;border:1px solid var(--ln);border-radius:3px;font:12px/1.5 var(--mono);padding:8px;resize:vertical}
.exp .row{display:flex;gap:6px;padding:10px}.m3u{margin:0 10px 10px;text-align:center}
.tlh{display:flex;justify-content:space-between}
.ruler{height:20px;margin-left:44px;position:relative;overflow:hidden;border-bottom:1px solid var(--ln);font:10px var(--mono);color:var(--mu)}
.ruler i{position:absolute;top:0;height:100%;border-left:1px solid #3a3e46;padding-left:3px;font-style:normal}
.tracks{position:relative;padding:4px 0 8px}
.lane{display:flex;align-items:stretch;height:46px;margin:3px 0}.lab{width:40px;flex:none;display:flex;align-items:center;justify-content:center;font:11px var(--mono);color:var(--mu);background:var(--pn2);margin-right:4px}
.vclip{flex:1;background:repeating-linear-gradient(90deg,#33457f 0 60px,#2c3c70 60px 62px);border-radius:3px;font:11px var(--mono);color:#b9c6f2;padding:4px 8px}
.strip{flex:1;display:flex;gap:2px;min-width:0}
.tclip{position:relative;min-width:6px;background:var(--clip);border:0;border-radius:3px;color:#04120b;text-align:left;padding:3px 6px;overflow:hidden;cursor:pointer;font:600 11px var(--mono);white-space:nowrap;text-overflow:ellipsis}
.tclip:nth-child(even){background:#24915f}.tclip:hover{filter:brightness(1.15)}
.tclip.on{background:var(--clip2);box-shadow:inset 0 0 0 2px #fff}
.tclip:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:16px;opacity:.35;background:repeating-linear-gradient(90deg,#04120b 0 1px,transparent 1px 3px);mask:linear-gradient(transparent 30%,#000 30% 70%,transparent 70%)}
.playhead{position:absolute;top:0;bottom:0;left:44px;width:2px;background:var(--ph);pointer-events:none;transition:left .25s linear}
.playhead:before{content:"";position:absolute;left:-5px;top:-6px;border:6px solid transparent;border-top:8px solid var(--ph)}
/* sections */
.steps,.rules,.faqs,.page{padding:10px 22px 24px;max-width:1200px;margin:0 auto}.narrow{max-width:900px}
.steps ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;counter-reset:s}
.steps li{background:var(--pn);border:1px solid var(--ln);padding:14px;counter-increment:s;display:flex;flex-direction:column;gap:4px}
.steps li:before{content:"CUT " counter(s,decimal-leading-zero);font:11px var(--mono);color:var(--ph)}.steps b{font:600 18px var(--head)}.steps span{color:#bdbab3}
.rules{border:1px solid var(--ln);background:linear-gradient(90deg,#1b1416,var(--pn));border-left:4px solid var(--ph);margin:10px auto 0}
.faq details{border-bottom:1px solid var(--ln);padding:10px 0}.faq summary{cursor:pointer;font:600 16px var(--head)}.faq p{color:#c9c6bf;margin:8px 0 0}
.bingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.bincard{background:var(--pn);border:1px solid var(--ln);padding:12px;text-decoration:none;color:var(--tx);display:flex;flex-direction:column;gap:4px;border-radius:3px}
.bincard:hover{border-color:var(--clip2)}.bincard b{font:600 18px var(--head)}.bincard span{color:#bdbab3;font-size:14px}.bincard em{font:11px var(--mono);color:var(--clip2);font-style:normal}
.covers{display:flex;gap:4px}.covers img{width:33%;height:auto;aspect-ratio:1;border-radius:2px}
.clips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.clips li{display:flex;gap:2px}.clip{flex:1;display:grid;grid-template-columns:40px 1fr auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:var(--pn);border:1px solid var(--ln);color:var(--tx);padding:5px 8px;border-radius:3px;cursor:pointer;font:inherit;min-width:0}
.clip img{grid-row:span 2;border-radius:2px}.ct{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca{font-size:12px;color:var(--mu);grid-column:2}.cd,.co{font:12px var(--mono);color:var(--mu);grid-row:span 2}.co{color:var(--clip2)}
.clip:hover{border-color:var(--clip)}.clip.on{border-color:var(--clip2);background:#1d3428}
.dl{display:flex;align-items:center;padding:0 10px;background:var(--pn2);border:1px solid var(--ln);border-radius:3px;font:11px var(--mono);text-decoration:none}
.reel{margin:18px 0}.rh{display:flex;gap:14px;align-items:center;margin-bottom:8px}.rh img{border-radius:3px}.rh h2{margin:0 0 4px}.rh p{margin:0 0 8px;color:var(--mu);font:12px var(--mono)}
.credit{display:flex;gap:6px;align-items:stretch;margin:10px 0}.credit code{flex:1;background:#0f1013;border:1px solid var(--ln);padding:10px;font:13px var(--mono);color:#cfe9da;border-radius:3px}
.small{font-size:12px;color:var(--mu)}
.foot{padding:26px 22px;border-top:1px solid var(--ln);color:var(--mu);font-size:14px;display:flex;flex-direction:column;gap:8px}.foot .links{display:flex;gap:14px;flex-wrap:wrap}
/* transport */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0c0d0f;border-top:2px solid var(--ph);height:72px}
.pb-tc{font:600 15px var(--mono);color:var(--ph);background:#000;padding:4px 8px;border-radius:2px;min-width:118px;text-align:center}
.pb-cv{border-radius:2px}.pb-meta{display:flex;flex-direction:column;min-width:0;width:220px}.pb-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pb-meta span{font:11px var(--mono);color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-ctl{display:flex;gap:4px}.pb-ctl button{background:var(--pn2);color:var(--tx);border:1px solid var(--ln);width:36px;height:36px;border-radius:3px;cursor:pointer;font-size:14px}
.pb-ctl .pp{background:var(--paper);color:#000;width:44px}
#pb-seek{flex:1;accent-color:var(--ph);min-width:60px}.pb-dur{font:12px var(--mono);color:var(--mu);white-space:nowrap}
.pb-dl{font:12px var(--mono);border:1px solid var(--ln);padding:6px 8px;border-radius:3px;text-decoration:none;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--paper);color:#000;padding:8px 14px;border-radius:3px;font:13px var(--mono);opacity:0;pointer-events:none;transition:.2s;z-index:40}.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:980px){.bay{grid-template-columns:1fr 1fr;grid-template-areas:"m m" "t t" "p e"}}
@media (max-width:640px){
 .rec{display:none}.menubar{gap:8px;padding:0 8px}.brand span{display:none}
 .slate{grid-template-columns:1fr;padding:26px 14px 18px}.sl-r dd{font-size:20px}
 .bay{grid-template-columns:1fr;grid-template-areas:"m" "t" "e" "p"}
 .steps ol{grid-template-columns:1fr}.steps,.rules,.faqs,.page{padding-left:14px;padding-right:14px}
 .lower b{font-size:14px}.lower{padding:5px 9px}
 .pbar{gap:8px;padding:8px;height:auto;flex-wrap:wrap}.pb-tc,.pb-dur{display:none}.pb-meta{flex:1;width:auto}#pb-seek{order:9;flex-basis:100%;margin:0}
 body{padding-bottom:110px}.clip{grid-template-columns:40px 1fr auto}.co{display:none}
 .credit{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.tl{overflow:hidden}html,body{overflow-x:hidden}
@media (max-width:640px){.ruler{font-size:9.5px}}
.foot a{display:inline-block;padding:4px 0;min-height:24px}.foot .links{row-gap:4px}