/* 4editz.info — "Cut room": NLE editing desk. Sage desk paper + graphite panels, clip colours, coral playhead. */
:root{
  --paper:#eceee9;--paper-2:#e1e5dd;--sheet:#f8f9f6;--ink:#121614;--ink-2:#3a4440;--ink-3:#5b6661;
  --line:rgba(18,22,20,.14);--line-2:rgba(18,22,20,.28);
  --gr:#181d1b;--gr-2:#212825;--gr-3:#2d3531;--gr-4:#3d4742;--on-gr:#e8ede9;--on-gr-2:#a7b3ad;
  --em:#0e6b47;--em-hi:#34d494;--blue:#2f5bc4;--blue-hi:#8fb0ff;--amber:#f2b53a;--coral:#c8401f;--head:#ff5a36;
  --f-d:"Funnel Display","Host Grotesk",system-ui,sans-serif;--f-b:"Host Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:"Sometype Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:6px;--stick:0px;
  /* game-core tokens */
  --primary:var(--em);--primary-contrast:#fff;--accent:var(--amber);--surface:var(--gr-2);--surface-2:var(--gr);--text:var(--on-gr);--muted:var(--on-gr-2);--border:rgba(232,237,233,.14);--font-head:var(--f-d);--font-body:var(--f-b)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--stick) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.66 var(--f-b);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--em);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--head);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--f-d);color:var(--ink);text-wrap:balance;margin:0}
h1{font-weight:800;letter-spacing:-.025em;line-height:1.02}
h2{font-weight:800;letter-spacing:-.018em;line-height:1.1;font-size:clamp(1.55rem,1.2rem + 1.4vw,2.2rem)}
h3{font-weight:600;font-size:1.22rem;line-height:1.25;margin:1.6em 0 .4em}
p{margin:0 0 1em}
.trk,.brand-tag,.tl-lab,.suite-chip,.slate-badge,.sec-tag b,.bc,.age,.monitor-lab,.clip-thumb b,.tags li{font-family:var(--f-m)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:var(--r);font:700 16px/1.15 var(--f-b);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn-rec{background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 rgba(255,255,255,.08)}
.btn-rec:hover{background:var(--gr-3)}
.btn-rec .rec{width:11px;height:11px;border-radius:50%;background:var(--head);box-shadow:0 0 0 3px rgba(255,90,54,.25);flex:0 0 auto}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{background:var(--sheet);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-bar{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;margin-right:auto}
.brand-mark{display:inline-flex;align-items:stretch;height:34px;border-radius:5px;overflow:hidden;background:var(--em);box-shadow:0 1px 0 var(--ink)}
.brand-mark i{width:6px;background:var(--amber);position:relative}
.brand-mark i::after{content:"";position:absolute;inset:9px 2px;border-inline:1px solid rgba(18,22,20,.45)}
.brand-mark b{display:grid;place-items:center;min-width:30px;padding:0 6px;color:#fff;font:800 20px/1 var(--f-d)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font:800 21px/1 var(--f-d);letter-spacing:-.02em}
.brand-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.hd-tools{display:none;align-items:center;gap:10px}
.lang{display:flex;gap:4px}
.lang a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:var(--r);text-decoration:none;color:var(--ink-2);font:600 13px/1 var(--f-m);border:1px solid var(--line)}
.lang a[aria-current]{background:var(--ink);color:#fff}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 14px 0 12px;border-radius:var(--r);border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);font:700 15px/1 var(--f-b);cursor:pointer}
.menu-ico{display:grid;gap:4px;width:18px}
.menu-ico i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-ico i:nth-child(2){width:12px}
.menu-btn[aria-expanded=true]{background:var(--ink);color:#fff}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hd-nav{display:none}
.hd-nav ul{list-style:none;margin:0;padding:0}
.hd-nav a{text-decoration:none}
.hd-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.hd-prog i{display:block;height:100%;width:100%;background:var(--head);transform-origin:0 50%;transform:scaleX(var(--p,0))}
/* mobile sheet */
@media (max-width:979.98px){
  .hd.open .hd-nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--gr);border-top:3px solid var(--head);box-shadow:0 18px 40px rgba(0,0,0,.28);max-height:calc(100dvh - 64px);overflow:auto}
  .hd-track{padding-block:14px 18px}
  .hd-track .trk{display:block;color:var(--on-gr-2);font-size:12px;letter-spacing:.14em;margin:0 0 8px}
  .hd-nav ul{display:grid;gap:6px}
  .hd-nav li a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:var(--r);background:var(--gr-2);color:var(--on-gr);font:600 17px/1.2 var(--f-b);border-left:6px solid var(--cc)}
  .hd-nav li a[aria-current]{background:var(--gr-3);box-shadow:inset 0 0 0 1.5px var(--cc)}
}
.c0{--cc:var(--em);--cc-hi:var(--em-hi);--cc-on:#fff}
.c1{--cc:var(--blue);--cc-hi:var(--blue-hi);--cc-on:#fff}
.c2{--cc:var(--amber);--cc-hi:var(--amber);--cc-on:var(--ink)}
.c3{--cc:var(--coral);--cc-hi:#ff8a6b;--cc-on:#fff}

@media (min-width:600px){.hd-tools{display:flex}.hd-tools .lang{display:none}}
@media (min-width:768px){.wrap{padding-inline:28px}}
@media (min-width:980px){
  .hd{position:relative;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .hd-bar{min-height:76px}
  .menu-btn{display:none}
  .hd-tools .lang{display:flex}
  .hd-prog{display:none}
  .hd-nav{display:block;border-top:1px solid var(--line);background:var(--paper-2)}
  .hd-track{display:flex;align-items:center;gap:14px;min-height:60px;position:relative}
  .hd-track .trk{display:grid;place-items:center;width:40px;height:40px;border-radius:5px;background:var(--gr);color:var(--on-gr);font-size:12px;flex:0 0 auto}
  .hd-nav ul{display:flex;gap:4px;flex:1;min-width:0;padding:8px 0;background:repeating-linear-gradient(90deg,transparent 0 11px,var(--line) 11px 12px) 0 50%/100% 1px no-repeat}
  .hd-nav li{flex:1 1 auto;min-width:0}
  .hd-nav li a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:5px;background:var(--sheet);border:1px solid var(--line);border-left:5px solid var(--cc);color:var(--ink);font:600 15px/1.15 var(--f-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
  .hd-nav li a:hover{background:#fff;border-color:var(--line-2);border-left-color:var(--cc)}
  .hd-nav li a[aria-current]{background:var(--cc);color:var(--cc-on);border-color:var(--cc);box-shadow:0 -4px 0 -1px var(--head) inset}
}

/* ---------- home slate ---------- */
.slate{padding:34px 0 26px}
.slate-grid{display:grid;gap:22px}
.slate-badge{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:var(--ink-2);margin:0 0 16px;padding:6px 12px 6px 10px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--sheet)}
.kf{display:inline-block;width:11px;height:11px;background:var(--head);transform:rotate(45deg);border-radius:2px;flex:0 0 auto}
.slate h1{font-size:clamp(2.1rem,1.1rem + 4.4vw,4.6rem)}
.lead p{font-size:1.14rem;line-height:1.6;color:var(--ink-2)}
.lead p:last-child{margin-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:13px;line-height:1.2;padding:8px 10px 8px 12px;border-radius:4px;background:var(--sheet);border:1px solid var(--line);border-left:5px solid var(--cc);color:var(--ink-2)}
@media (min-width:980px){
  .slate{padding:58px 0 38px}
  .slate-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
}

/* ---------- edit suite (game) ---------- */
.suite-band{padding:0 0 40px;background:linear-gradient(var(--paper) 0 50%,var(--paper-2) 50%)}
.suite{background:var(--gr);color:var(--on-gr);border-radius:10px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(18,22,20,.55),0 0 0 1px var(--ink);overflow:hidden;scroll-margin-top:16px}
.suite-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;background:var(--gr-2);border-bottom:1px solid rgba(232,237,233,.1)}
.suite-dot{width:10px;height:10px;border-radius:50%;background:var(--head);box-shadow:0 0 0 4px rgba(255,90,54,.18)}
.suite-name{font:600 15px/1.2 var(--f-b);flex:1;min-width:0}
.suite-chip{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gr);background:var(--em-hi);padding:5px 8px;border-radius:4px}
.suite-ruler{height:26px;background:var(--gr-2) repeating-linear-gradient(90deg,rgba(232,237,233,.28) 0 1px,transparent 1px 10px) 0 100%/100% 8px no-repeat;border-top:1px solid rgba(232,237,233,.1);position:relative;overflow:hidden}
.suite-ruler::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(232,237,233,.45) 0 1px,transparent 1px 50px) 0 100%/100% 15px no-repeat}
.suite-ruler i{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--head);animation:scrub 14s linear infinite}
.suite-ruler i::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top:8px solid var(--head)}
@keyframes scrub{from{left:0}to{left:calc(100% - 2px)}}
@media (max-width:599.98px){
  .suite-band .wrap{padding-inline:0}
  .suite{border-radius:0;box-shadow:0 0 0 1px var(--ink)}
}

/* ---------- inner page head ---------- */
.phead{padding:22px 0 30px}
.phead-grid{display:grid;gap:24px}
.bc ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--ink-3)}
.bc li{display:flex;align-items:center}
.bc li+li::before{content:"";width:18px;height:1px;background:var(--line-2);margin:0 8px}
.bc a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.bc span{padding:12px 0}
.phead h1{font-size:clamp(2rem,1.3rem + 3.1vw,3.7rem);margin-bottom:18px}
.monitor{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;background:var(--gr);color:var(--on-gr);border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--ink);align-self:start}
.monitor-scr{position:relative;display:grid;place-items:center;padding:12px 8px 20px;background:var(--gr-2) radial-gradient(circle at 50% 30%,rgba(52,212,148,.14),transparent 70%);border-right:1px solid rgba(232,237,233,.1)}
.mini-board{width:100%;fill:var(--on-gr-2)}
.mini-board .mb-ball{fill:var(--em-hi)}
.mini-board .mb-path{stroke:var(--em-hi);stroke-width:1;stroke-dasharray:2 2;opacity:.7}
.mb-s0{fill:#56606a}.mb-s1{fill:var(--blue-hi)}.mb-s2{fill:var(--amber)}.mb-s3{fill:var(--head)}
.monitor-lab{position:absolute;left:8px;bottom:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--em-hi)}
.monitor-txt{padding:16px 16px 18px}
.monitor-txt strong{display:block;font:800 1.15rem/1.2 var(--f-d)}
.monitor-txt p{font-size:15px;line-height:1.5;color:var(--on-gr-2);margin:6px 0 14px}
.monitor .btn-rec{background:var(--em);width:100%}
.monitor .btn-rec:hover{background:#0b5a3c}
@media (min-width:980px){
  .phead{padding:40px 0 44px}
  .phead-grid{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end}
  .monitor{grid-template-columns:1fr}
  .monitor-scr{border-right:0;border-bottom:1px solid rgba(232,237,233,.1);padding:20px 60px 26px}
}

/* ---------- timeline TOC ---------- */
.tl{background:var(--gr);color:var(--on-gr);border-block:1px solid var(--ink)}
.tl-in{padding-block:14px 16px}
.tl-lab{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-gr-2)}
.tl-lab .trk{display:grid;place-items:center;width:30px;height:26px;border-radius:4px;background:var(--gr-3);color:var(--on-gr)}
.tl-clips{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:none}
.tl-clips a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;min-height:50px;padding:8px 12px 12px;border-radius:5px;background:var(--gr-2);border-left:5px solid var(--cc);color:var(--on-gr);text-decoration:none;font:500 15.5px/1.3 var(--f-b);overflow:hidden}
.tl-clips a::after{content:"";position:absolute;left:12px;bottom:6px;height:3px;width:calc(var(--len) - 24px);min-width:18px;border-radius:2px;background:var(--cc-hi);opacity:.8}
.tl-clips b{font:600 12.5px/1 var(--f-m);color:var(--cc-hi)}
.tl-clips a:hover,.tl-clips a[aria-current]{background:var(--gr-3)}
.tl-ruler,.tl-head{display:none}
@media (min-width:980px){
  :root{--stick:92px}
  .tl{position:sticky;top:0;z-index:30;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
  .tl-in{display:flex;align-items:flex-end;gap:14px;padding-block:8px 10px}
  .tl-lab{margin:0;flex:0 0 auto;padding-bottom:2px}
  .tl-lab .trk{width:40px;height:44px;border-radius:5px}
  .tl-name{display:none}
  .tl-lane{position:relative;flex:1;min-width:0;padding-top:16px}
  .tl-ruler{display:block;position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,rgba(232,237,233,.5) 0 1px,transparent 1px 60px) 0 0/100% 12px no-repeat,repeating-linear-gradient(90deg,rgba(232,237,233,.22) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat}
  .tl-clips{display:flex;gap:3px}
  .tl-clips li{flex:var(--w) 1 0;min-width:52px}
  .tl-clips a{display:flex;gap:8px;min-height:48px;height:100%;padding:0 10px;border-left:0;background:var(--cc);color:var(--cc-on);font:600 14px/1.15 var(--f-b);box-shadow:inset 0 -14px 0 -10px rgba(0,0,0,.18);transition:filter .15s,box-shadow .15s}
  .tl-clips a::after{display:none}
  .tl-clips a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .tl-clips b{color:inherit;opacity:.82}
  .tl-clips a:hover{background:var(--cc);filter:brightness(1.12)}
  .tl-clips a[aria-current]{background:var(--cc);box-shadow:inset 0 0 0 2px var(--on-gr)}
  .tl-head{display:block;position:absolute;top:2px;bottom:-4px;left:0;width:2px;margin-left:-1px;background:var(--head);transform:translateX(var(--x,0px));transition:transform .18s ease-out;pointer-events:none;z-index:2}
  .tl-head::before{content:"";position:absolute;top:-2px;left:-6px;width:14px;height:12px;background:var(--head);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
}

/* ---------- article ---------- */
.content{max-width:860px;padding:34px 0 20px}
.content ul,.content ol{padding-left:1.3em;margin:0 0 1.1em}
.content li{margin:.35em 0;padding-left:.2em}
.content li::marker{color:var(--ink-3);font-weight:700}
.content ol li::marker{font-family:var(--f-m);font-size:.9em}
.content strong{color:var(--ink);font-weight:700}
.intro-rest{font-size:1.06rem;color:var(--ink-2);margin:0 0 20px;padding:18px 20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r)}
.intro-rest p:last-child{margin:0}
.sec{position:relative;padding:26px 0 12px}
.sec-tag{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sec-tag .kf{background:var(--cc)}
.sec-tag b{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-2)}
.sec-tag::after{content:"";flex:1;height:8px;border-radius:2px;background:linear-gradient(90deg,var(--cc) 0 72px,transparent 72px),repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 8px);opacity:.9}
.sec h2{margin-bottom:.6em}
.sec-body>:last-child{margin-bottom:0}
@media (min-width:980px){
  .content{padding:48px 0 28px 0;max-width:none;width:min(100%,960px)}
  .intro-rest{margin-left:108px;max-width:760px}
  .sec{display:grid;grid-template-columns:84px minmax(0,760px);column-gap:24px;padding:34px 0 18px}
  .sec-tag{flex-direction:column;align-items:center;gap:8px;margin:0;align-self:stretch;position:relative}
  .sec-tag::after{position:absolute;top:26px;bottom:-40px;left:50%;width:2px;height:auto;margin-left:-1px;background:linear-gradient(var(--cc),color-mix(in srgb,var(--cc) 15%,transparent));flex:none;opacity:.55}
  .sec:last-child .sec-tag::after{bottom:0}
  .sec-tag .kf{width:14px;height:14px;position:sticky;top:calc(var(--stick) + 28px);z-index:1;box-shadow:0 0 0 5px var(--paper)}
  .sec-tag b{position:sticky;top:calc(var(--stick) + 50px);font-size:14px;background:var(--paper);padding:2px 4px;z-index:1}
}
/* inspector rail */
.rail{display:none}
@media (min-width:1200px){
  .body-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start}
  .rail{display:block;position:sticky;top:calc(var(--stick) + 34px);margin-top:48px}
  .insp{background:var(--sheet);border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:var(--r);padding:16px 16px 18px}
  .insp-lab{display:flex;align-items:center;gap:8px;font:600 11.5px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
  .insp-lab .kf{width:8px;height:8px}
  .insp-cur{display:grid;gap:6px;margin:0 0 14px;min-height:5.2em}
  .insp-cur b{font:800 2.6rem/1 var(--f-d);letter-spacing:-.03em;color:var(--ink)}
  .insp-cur span{font:600 15px/1.35 var(--f-b);color:var(--ink-2)}
  .insp-bar{height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden;margin-bottom:16px}
  .insp-bar i{display:block;height:100%;background:var(--head);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform .18s ease-out}
  .insp .btn{width:100%;font-size:15px;padding-inline:12px}
}
/* FAQ as keyframes */
.kqs{display:grid;gap:8px;margin-top:6px}
.kq{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.kq[open]{border-color:var(--ink);box-shadow:4px 4px 0 var(--cc)}
.kq summary{display:grid;grid-template-columns:16px minmax(0,1fr) 22px;align-items:center;gap:14px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none;font:600 1.03rem/1.35 var(--f-b)}
.kq summary::-webkit-details-marker{display:none}
.kq-kf{width:12px;height:12px;border:2px solid var(--ink-3);transform:rotate(45deg);border-radius:2px;transition:background .2s,border-color .2s}
.kq[open] .kq-kf{background:var(--head);border-color:var(--head)}
.kq-pm{position:relative;width:22px;height:22px}
.kq-pm::before,.kq-pm::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;background:var(--ink);transition:transform .2s}
.kq-pm::after{transform:rotate(90deg)}
.kq[open] .kq-pm::after{transform:rotate(0)}
.kq-a{padding:0 18px 4px 46px;color:var(--ink-2)}

/* render CTA */
.render{background:var(--gr);color:var(--on-gr);margin-top:34px}
.render-in{display:grid;gap:16px;padding-block:28px 32px}
.render-bar{height:10px;border-radius:3px;background:var(--gr-3);overflow:hidden}
.render-bar i{display:block;height:100%;width:100%;background:repeating-linear-gradient(-45deg,var(--em-hi) 0 8px,var(--em) 8px 16px);transform-origin:0 50%;animation:render 3.4s cubic-bezier(.5,0,.3,1) infinite alternate}
@keyframes render{from{transform:scaleX(.18)}to{transform:scaleX(1)}}
.render p{font:600 clamp(1.2rem,1rem + .9vw,1.6rem)/1.3 var(--f-d);margin:0;max-width:52ch}
.render .btn-rec{background:var(--em);justify-self:start}
.render .btn-rec:hover{background:#0b5a3c}
@media (min-width:980px){.render-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px}.render-bar{grid-column:1/-1}}

/* media bin (related) */
.bin{padding:44px 0 52px;background:var(--paper-2);border-top:1px solid var(--line)}
.bin-h{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:20px}
.bin-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr))}
.clip{display:flex;flex-direction:column;height:100%;background:var(--sheet);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}
.clip:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 24px -16px rgba(18,22,20,.6)}
.clip-thumb{position:relative;height:84px;background:var(--gr);overflow:hidden}
.clip-thumb i{position:absolute;inset:14px 14px 22px;border-radius:3px;background:linear-gradient(90deg,var(--cc) 0 38%,color-mix(in srgb,var(--cc) 55%,var(--gr)) 38% 64%,var(--gr-4) 64%)}
.clip-thumb i::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:8px;background:repeating-linear-gradient(90deg,rgba(232,237,233,.55) 0 2px,transparent 2px 5px);clip-path:polygon(0 60%,8% 20%,16% 70%,24% 10%,34% 55%,44% 25%,54% 80%,64% 30%,74% 60%,84% 15%,92% 50%,100% 35%,100% 100%,0 100%)}
.clip-thumb b{position:absolute;right:8px;top:6px;font-size:11px;color:var(--on-gr-2)}
.clip-t{font:800 1.12rem/1.2 var(--f-d);padding:14px 16px 4px}
.clip-d{font-size:14.5px;line-height:1.5;color:var(--ink-3);padding:0 16px 16px}

/* footer */
.ft{background:var(--gr);color:var(--on-gr-2);padding-bottom:22px}
.ft-ruler{height:22px;background:repeating-linear-gradient(90deg,rgba(232,237,233,.35) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat,repeating-linear-gradient(90deg,rgba(232,237,233,.6) 0 1px,transparent 1px 72px) 0 0/100% 14px no-repeat;border-top:3px solid var(--head)}
.ft-grid{display:grid;gap:28px;padding-block:22px 28px}
.ft .brand{color:var(--on-gr)}
.ft .brand-tag{color:var(--on-gr-2)}
.ft-about p{font-size:15px;line-height:1.6;margin:14px 0 0;max-width:46ch}
.ft h2{font:600 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--em-hi);margin:0 0 10px}
.ft ul{list-style:none;margin:0;padding:0;display:grid}
.ft-col a{display:flex;align-items:center;min-height:44px;color:var(--on-gr);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(232,237,233,.08)}
.ft-col a:hover{color:#fff;text-decoration:underline}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(232,237,233,.12);font-size:14px}
.ft-base .lang a{color:var(--on-gr);border-color:rgba(232,237,233,.2)}
.ft-disc{flex-basis:100%;margin:0;font-size:14px}
.age{display:inline-grid;place-items:center;min-width:44px;height:32px;border-radius:4px;background:var(--head);color:var(--ink);font-weight:600;font-size:14px}
.ft :focus-visible,.tl :focus-visible,.suite :focus-visible,.monitor :focus-visible,.render :focus-visible,.hd-nav :focus-visible{outline-color:var(--amber)}
@media (min-width:768px){.ft-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}}

/* 404 */
.nf{padding:60px 0 80px}
.nf-code{font:800 clamp(5rem,20vw,11rem)/.9 var(--f-d);color:transparent;-webkit-text-stroke:2px var(--ink);margin:0 0 10px}
.nf h1{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}