:root{
  --paper:#F3F5F8;--surface:#FFFFFF;--ink:#0E1626;--muted:#566175;--line:#D8DEE7;
  --accent:#2D3BDB;--accent-hover:#2230BE;--accent-ink:#FFFFFF;--accent-soft:#E8EAFC;
  --ok:#0B7F5F;--bad:#B3261E;--bad-soft:#FCE9E7;
  --check-a:#FFFFFF;--check-b:#E3E7ED;
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:20px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0C111B;--surface:#141B29;--ink:#EEF1F6;--muted:#9AA6BA;--line:#27314A;
    --accent:#7A86FF;--accent-hover:#95A0FF;--accent-ink:#0C111B;--accent-soft:#1D2542;
    --ok:#4FD1A5;--bad:#FF8A80;--bad-soft:#3A1C1A;
    --check-a:#1A2233;--check-b:#242E45;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55}
h1,h2,h3{line-height:1.12;letter-spacing:-.022em;margin:0;font-weight:700}
p{margin:0}
a{color:var(--accent)}
img,canvas,svg{max-width:100%}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.03em}
.brand svg{width:30px;height:30px;flex:none}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:var(--r-sm)}
.nav a:hover{color:var(--ink);background:var(--paper)}

/* intro */
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:72px 0 64px}
.intro h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.035em;max-width:13ch}
.intro .lead{margin-top:20px;color:var(--muted);font-size:1.12rem;max-width:44ch}
.facts{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.facts li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.facts svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--ok)}

/* dropzone with a cut-line border */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:380px;padding:32px;text-align:center;background:var(--surface);border-radius:var(--r-lg);cursor:pointer;isolation:isolate}
.drop::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 18px) top/100% 2px no-repeat,
             repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 18px) bottom/100% 2px no-repeat,
             repeating-linear-gradient(0deg,var(--accent) 0 10px,transparent 10px 18px) left/2px 100% no-repeat,
             repeating-linear-gradient(0deg,var(--accent) 0 10px,transparent 10px 18px) right/2px 100% no-repeat;
  opacity:.55;transition:opacity .15s}
.drop:hover::before,.drop:focus-within::before,.drop.over::before{opacity:1}
.drop.over{background:var(--accent-soft)}
.drop-icon{width:64px;height:64px;color:var(--accent)}
.drop strong{font-size:1.45rem;letter-spacing:-.02em}
.drop span.sub{color:var(--muted)}
.drop .pick{margin-top:6px}
.err{margin-top:12px;padding:10px 14px;border-radius:var(--r-sm);background:var(--bad-soft);color:var(--bad);font-weight:500}

/* buttons & controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--paper)}
.btn.secondary[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:7px 12px;font-size:.9rem}
.btn.block{width:100%}
select,input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
input[type=range]{width:100%;accent-color:var(--accent)}
label.row{display:flex;align-items:center;gap:8px;font-weight:500}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg label{display:block;text-align:center;padding:8px 10px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--muted)}
.seg label+label{border-left:1px solid var(--line)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:var(--accent)}
.seg label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.seg label:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-3px}

/* editor */
.editor{padding:28px 0 56px}
.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.file-meta{display:flex;flex-direction:column;min-width:0}
.file-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.file-meta small{color:var(--muted)}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.stage-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.stage-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.stage-tools .seg{width:min(100%,240px)}
.stage-hint{color:var(--muted);font-size:.9rem}
.stage-frame{display:flex;justify-content:center}
.stage{--ratio:1;position:relative;width:min(100%,calc(66vh * var(--ratio)));aspect-ratio:var(--ratio);border-radius:6px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background-color:var(--check-a);background-image:linear-gradient(45deg,var(--check-b) 25%,transparent 25%,transparent 75%,var(--check-b) 75%),linear-gradient(45deg,var(--check-b) 25%,transparent 25%,transparent 75%,var(--check-b) 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.stage[data-view="refine"],.stage[data-view="pick"]{touch-action:none}
.stage[data-view="pick"]{cursor:crosshair}
.stage[data-view="refine"]{cursor:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.handle{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;cursor:ew-resize;display:flex;justify-content:center;outline-offset:-4px}
.handle::before{content:"";width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.handle::after{content:"";position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3BDB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-size:22px;background-position:center;background-repeat:no-repeat}
.tag{position:absolute;top:10px;padding:3px 10px;border-radius:999px;background:rgba(14,22,38,.72);color:#fff;font-size:.8rem;font-weight:600;pointer-events:none}
.tag.l{left:10px}.tag.r{right:10px}
.brush-cursor{position:absolute;left:0;top:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6);pointer-events:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:rgba(12,17,27,.74);color:#fff}
.overlay b{font-size:1.1rem}
.bar{width:min(320px,80%);height:6px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.bar i{display:block;height:100%;width:30%;background:#fff;border-radius:99px}
.bar.indet i{animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.overlay small{opacity:.8;max-width:34ch}

.panel{display:grid;gap:16px}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;gap:12px}
.group h2{font-size:1.02rem}
.group .note{color:var(--muted);font-size:.88rem}
.field{display:grid;gap:6px}
.field>span,.field>label{font-weight:600;font-size:.9rem}
.sw-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;position:relative;background-clip:padding-box}
.sw[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}
.sw.checker{background-color:var(--check-a);background-image:linear-gradient(45deg,var(--check-b) 25%,transparent 25%,transparent 75%,var(--check-b) 75%),linear-gradient(45deg,var(--check-b) 25%,transparent 25%,transparent 75%,var(--check-b) 75%);background-size:12px 12px;background-position:0 0,6px 6px}
.sw.blur{background:linear-gradient(135deg,#7aa2ff,#f0a6ca 55%,#ffd29a);filter:saturate(.9)}
input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer}
.chip{display:inline-block;width:20px;height:20px;border-radius:5px;border:1px solid var(--line);vertical-align:middle;background:var(--paper)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 18px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:20}

/* content sections */
.section{padding:64px 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(1.6rem,3vw,2.2rem);max-width:22ch}
.section .sub{margin-top:12px;color:var(--muted);max-width:60ch}
.steps{list-style:none;counter-reset:s;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.steps li{counter-increment:s;padding-top:16px;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);display:block;font-weight:800;font-size:1.1rem;color:var(--accent);margin-bottom:6px}
.steps h3{font-size:1.15rem;margin-bottom:6px}
.steps p{color:var(--muted)}
.uses{margin:32px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.uses div{padding:18px 0;border-bottom:1px solid var(--line)}
.uses dt{font-weight:700;font-size:1.05rem}
.uses dd{margin:4px 0 0;color:var(--muted)}
.faq{margin-top:28px;max-width:760px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:1.05rem;list-style-position:outside}
details p{padding:0 0 18px;color:var(--muted)}
.prose{max-width:720px;padding:56px 0}
.prose h1{font-size:2.4rem;margin-bottom:8px}
.prose h2{font-size:1.3rem;margin:32px 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose .upd{font-size:.92rem}
.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:28px 0;color:var(--muted);font-size:.92rem}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-inner a{color:var(--muted);margin-left:16px}
.footer-inner a:first-child{margin-left:0}

@media (max-width:980px){
  .intro{grid-template-columns:1fr;gap:32px;padding:44px 0 40px}
  .intro h1{max-width:none}
  .editor-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:24px}
  .uses{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav a{padding:8px}
  .drop{min-height:300px}
  .stage{width:100%}
}
@media (prefers-reduced-motion:reduce){.bar.indet i{animation:none;width:100%}*{transition:none!important}}

.rule{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.cta{margin-top:20px}