:root{
    --void:#0b0b0d; --dusk:#100f12; --surface:#151418; --surface-2:#1c1b20; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.32); --dots:rgba(255,255,255,.07); --glass:rgba(11,11,13,.92); --code-bg:#09090b; --code-ink:#c9c6bf; --on-ember:#170d04;
    --bone:#ece9e2; --ash:#a3a19a; --ash-dim:#6f6d68; --ember:#e0883e; --ember-hi:#f4a35e; --moon:#c9d6de;
    --display:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-padding-top:24px}
  body{margin:0;background:var(--void);color:var(--bone);font:400 15px/1.6 var(--sans)}
  a{color:inherit}
  button,input{font:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--ember);outline-offset:3px}
  .mono,.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
  [hidden]{display:none!important}

  .layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}

  /* ---- sidebar ---- */
  .side{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);padding:26px 18px;display:flex;flex-direction:column;gap:26px;background:linear-gradient(180deg,var(--dusk),var(--void))}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:0 6px}
  .brand img{width:28px;height:28px}
  .brand b{font:500 17px/1 var(--display);letter-spacing:-.01em}
  .brand small{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
  .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:12px;padding:9px 12px;background:var(--surface)}
  .search:focus-within{border-color:var(--ember)}
  .search input{all:unset;flex:1;min-width:0;font-size:14px}
  .search kbd{font:500 11px/1 var(--mono);color:var(--ash-dim);border:1px solid var(--line-2);border-radius:5px;padding:3px 6px}
  .nav{display:grid;gap:2px}
  .nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ash);font-size:14px;transition:color .2s,background .2s}
  .nav a:hover{color:var(--bone);background:var(--surface)}
  .nav a.on{color:var(--bone);background:var(--surface-2)}
  .nav a.on span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin-right:9px;vertical-align:2px}
  .nav a em{font:400 11px/1 var(--mono);font-style:normal;color:var(--ash-dim)}
  .nav a.dim{opacity:.3}
  .side__foot{margin-top:auto;font-size:12.5px;color:var(--ash-dim);line-height:1.6;padding:0 6px}
  .side__foot a{color:var(--ash)}

  /* ---- hero ---- */
  main{min-width:0;padding:0 clamp(18px,4vw,56px) 96px}
  .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:clamp(48px,7vw,96px) 0 56px;border-bottom:1px solid var(--line)}
  .hero h1{font:400 clamp(44px,6vw,84px)/.98 var(--display);letter-spacing:-.025em;margin:16px 0 20px}
  .hero h1 em{font-style:italic;color:var(--ember)}
  .hero p.lede{font-size:17px;color:var(--ash);max-width:48ch;margin:0 0 28px}
  .stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:30px}
  .stats div b{display:block;font:400 34px/1 var(--display);color:var(--bone)}
  .stats div span{font-size:13px;color:var(--ash)}
  .hero__acts{display:flex;gap:10px;flex-wrap:wrap}
  .pbtn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
  .pbtn:hover{border-color:var(--ember)}
  .pbtn--ember{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
  .pbtn--ember:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
  .showcase{position:relative;border-radius:24px;border:1px solid var(--line);padding:34px;display:grid;gap:22px;justify-items:center;background:
     radial-gradient(400px 260px at 70% 0%,rgba(224,136,62,.14),transparent 70%),
     radial-gradient(1px 1px at 1px 1px,var(--dots) 1px,transparent 0) 0 0/18px 18px,var(--dusk)}
  .showcase__row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
  .showcase .mono{position:absolute;top:14px;left:18px;font-size:10px}
  .licence{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--ash)}
  .licence i{width:7px;height:7px;border-radius:50%;background:#1fb238;box-shadow:0 0 0 4px rgba(31,178,56,.15)}

  /* ---- how to use ---- */
  .howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:40px 0 8px}
  .howto div{background:var(--void);padding:22px}
  .howto b{display:block;font:500 17px/1.3 var(--display);margin:8px 0 6px}
  .howto p{margin:0;color:var(--ash);font-size:14px}
  .howto code{font-family:var(--mono);font-size:12.5px;color:var(--ember-hi)}

  /* ---- effect sections ---- */
  .fx-section{padding:72px 0 8px;scroll-margin-top:8px}
  .fx-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:26px}
  .fx-head h2{font:400 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:-.02em;margin:10px 0 12px}
  .fx-head .blurb{margin:0;color:var(--ash);max-width:56ch;font-size:15.5px}
  .orig{display:inline-block;margin-right:12px;padding:4px 8px 3px;border-radius:999px;background:rgba(224,136,62,.14);border:1px solid rgba(224,136,62,.4);color:var(--ember-hi);letter-spacing:.12em}
  .orig-dot{color:var(--ember);font-weight:400;font-size:11px;margin-left:4px}
  .best{display:grid;grid-template-columns:auto auto;gap:6px 16px;margin:0;font-size:13px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .best dt{color:var(--ash-dim)}
  .best dd{margin:0}
  .best code{font-family:var(--mono);color:var(--ember-hi)}

  .strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:18px}
  .strip__cell{display:grid;place-items:center;padding:30px 8px;background:var(--stage);border-left:1px solid var(--line)}
  .strip__cell:first-child{border-left:0}
  .strip__cell .CCButton{font-size:13px;padding:.85em 1.2em}

  .cw-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 18px}
  .cw-chips{display:flex;gap:6px;flex-wrap:wrap}
  .cw-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:6px 12px 6px 7px;font-size:13px;color:var(--ash);cursor:pointer;transition:.2s}
  .cw-chip i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
  .cw-chip:hover{color:var(--bone);border-color:var(--line-3)}
  .cw-chip[aria-checked="true"]{color:var(--bone);background:var(--surface-2);border-color:var(--line-3)}

  .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
  .tile{margin:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);display:flex;flex-direction:column;min-width:0}
  .stage{position:relative;min-height:230px;display:grid;place-items:center;padding:34px 22px;border-radius:17px 17px 0 0;background:
     radial-gradient(1px 1px at 1px 1px,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 0) 0 0/16px 16px,var(--stage);
     transition:background-color .3s;color:var(--ink)}
  .tile figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 12px 18px;border-top:1px solid var(--line);font-size:14px;font-weight:500}
  .tile__acts{display:flex;gap:6px}
  .act{border:1px solid var(--line-2);background:transparent;border-radius:8px;padding:6px 11px;font:500 12.5px/1 var(--sans);color:var(--ash);cursor:pointer;transition:.2s}
  .act:hover{color:var(--bone);border-color:var(--line-3)}
  .act--copy{color:var(--bone);background:var(--surface-2)}
  .act.ok{color:#7fd98f;border-color:rgba(127,217,143,.4)}
  
  .t-tag{color:#f4a35e}.t-attr{color:#c9d6de}.t-var{color:#9fd8b8}.t-com{color:#6f6d68}

  .empty{padding:80px 0;text-align:center;color:var(--ash)}
  .foot{margin-top:96px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ash-dim);font-size:13px}

  .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);opacity:0;visibility:hidden;background:var(--surface-2);border:1px solid var(--line-2);padding:12px 18px;border-radius:999px;font-size:14px;z-index:50;transition:transform .4s var(--ease),opacity .3s;box-shadow:0 18px 40px -18px #000}
  .toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}

  @media (max-width:1100px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}.strip__cell:nth-child(5){border-left:0}.strip__cell:nth-child(n+5){border-top:1px solid var(--line)}}
  @media (max-width:960px){
    .layout{grid-template-columns:1fr}
    .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px)}
    .brand small,.side__foot{display:none}
    .search{flex:1;min-width:160px}
    .nav{order:3;width:100%;min-width:0;max-width:100%;flex:1 1 100%;display:flex;overflow-x:auto;scrollbar-width:none}
    .nav a{white-space:nowrap;flex:none;gap:8px}
    .nav a em{display:none}
    .hero{grid-template-columns:1fr}
    .howto{grid-template-columns:1fr}
    .fx-section{scroll-margin-top:120px}
  }
  @media (max-width:560px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip__cell{border-left:0!important;border-top:1px solid var(--line)}.strip__cell:nth-child(-n+2){border-top:0}.strip__cell:nth-child(even){border-left:1px solid var(--line)!important}.tiles{grid-template-columns:1fr}}
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ---- additions: badges, customiser, code tabs, small print, hosted, changelog ---- */
.new{display:inline-block;margin-right:12px;padding:4px 8px 3px;border-radius:999px;background:rgba(94,230,192,.12);border:1px solid rgba(94,230,192,.4);color:#8ff0d3;letter-spacing:.12em}
.newdot{font:600 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#8ff0d3;border:1px solid rgba(94,230,192,.4);border-radius:999px;padding:3px 6px}
.fx-head h2 a{text-decoration:none}
.fx-head h2 a:hover{color:var(--ember-hi)}
.strip__cell{background:transparent}
.cw-bar{justify-content:space-between}
.cw-tools{display:flex;gap:6px}
.cw-chip i.rainbow{background:conic-gradient(#ff6f91,#ffc58a,#5ee6c0,#7aa2ff,#c9a0ff,#ff6f91)}
.act--tune[aria-expanded="true"]{color:var(--bone);border-color:var(--ember)}
.custom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 16px;margin:-6px 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.swatch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ash);cursor:pointer}
.swatch input{appearance:none;-webkit-appearance:none;width:28px;height:28px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:none;cursor:pointer}
.swatch input::-webkit-color-swatch-wrapper{padding:2px}
.swatch input::-webkit-color-swatch{border:0;border-radius:6px}
.swatch input::-moz-color-swatch{border:0;border-radius:6px}
.slider{display:grid;gap:4px;font-size:13px;color:var(--ash);min-width:150px}
.slider output{color:var(--bone);font-family:var(--mono);font-size:12px;margin-left:4px}
.slider input{accent-color:var(--ember);width:100%}
.stage{background:radial-gradient(1px 1px at 1px 1px,color-mix(in srgb,var(--cc-ink) 9%,transparent) 1px,transparent 0) 0 0/16px 16px,var(--stage);color:var(--cc-ink)}
.code{border-top:1px solid var(--line);background:var(--code-bg);border-radius:0 0 17px 17px;overflow:hidden}
.code__tabs{display:flex;align-items:center;gap:2px;padding:8px 10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.code__tabs button{all:unset;padding:6px 10px;border-radius:7px;font:500 12px/1 var(--sans);color:var(--ash);cursor:pointer;white-space:nowrap}
.code__tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--bone)}
.code__tabs button:focus-visible{outline:2px solid var(--ember)}
.code__tabs .code__copy{margin-left:auto;color:var(--ember-hi)}
.code pre{margin:0;max-height:360px;overflow:auto;padding:14px 16px;font:400 12px/1.65 var(--mono);color:var(--code-ink);tab-size:2}
.t-cls{color:#ffc58a}
.fineprint{margin:16px 0 0;font-size:12px;line-height:1.7;color:var(--ash-dim);max-width:110ch}
.fineprint span{margin-right:6px}
.fineprint b{font-weight:500;color:var(--ash)}
.fineprint a{color:var(--ash);white-space:nowrap}
.fineprint a:hover{color:var(--ember-hi)}
.hosted{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:center;margin:16px 0 8px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.hosted h3{margin:6px 0 6px;font:500 20px/1.2 var(--display)}
.hosted p{margin:0;font-size:14px;color:var(--ash)}
.hosted pre{margin:0;padding:14px 16px;border-radius:12px;background:var(--code-bg);border:1px solid var(--line);font:400 12.5px/1.7 var(--mono);color:var(--code-ink);overflow-x:auto}
.hosted .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.changelog{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.changelog li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.changelog time{font-family:var(--mono);font-size:12px;color:var(--ash-dim)}
.log-wrap{margin-top:96px}
.log-wrap h2{font:400 28px/1 var(--display);margin:0 0 18px}
@media (max-width:960px){.hosted{grid-template-columns:minmax(0,1fr)}}

/* ---- effect detail pages ---- */
.d-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.d-top a{text-decoration:none;color:var(--ash);font-size:14px}
.d-top a:hover{color:var(--bone)}
.d-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center;padding:56px 0 40px}
.d-hero h1{font:400 clamp(44px,6vw,80px)/1 var(--display);letter-spacing:-.025em;margin:12px 0 16px}
.d-hero .lede{font-size:17px;color:var(--ash);max-width:48ch;margin:0 0 26px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.facts div{background:var(--void);padding:12px 14px}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.facts dd{margin:4px 0 0;font-size:14px}
.facts code{font-family:var(--mono);color:var(--ember-hi)}
.d-stage{min-height:380px;border-radius:22px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px}
.d-block{padding:48px 0 8px}
.d-block h2{font:400 30px/1.1 var(--display);margin:0 0 8px}
.muted{color:var(--ash);margin:0 0 18px;font-size:14.5px}
.d-how ol{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.d-how li{counter-increment:s;position:relative;padding:44px 18px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:14.5px;color:var(--ash);line-height:1.6}
.d-how li::before{content:counter(s);position:absolute;top:14px;left:18px;font:500 13px/1 var(--mono);color:var(--ember)}
.d-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 44px}
.d-grid h2{font-size:22px;margin-bottom:14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips a{display:inline-block;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;text-decoration:none;color:var(--bone)}
.chips a:hover{border-color:var(--ember)}
.support{border-collapse:collapse;width:100%;max-width:340px;font-size:14px}
.support th,.support td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.support td{text-align:right;font-family:var(--mono);color:var(--ember-hi)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--ash)}
.ticks li{padding-left:24px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;color:#7fd98f}
.d-pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:72px;padding-top:24px;border-top:1px solid var(--line)}
.d-pager a{text-decoration:none;color:var(--ash);font-size:15px}
.d-pager a:hover{color:var(--ember-hi)}
@media (max-width:960px){.d-hero,.d-grid{grid-template-columns:1fr}.d-stage{min-height:300px}}

/* ---- dawn: the same page in daylight ---- */
:root[data-theme="dawn"]{
  color-scheme:light;
  --void:#f6f1e7; --dusk:#efe8da; --surface:#fffdf8; --surface-2:#ebe3d3;
  --line:rgba(23,19,16,.1); --line-2:rgba(23,19,16,.18); --line-3:rgba(23,19,16,.38); --dots:rgba(23,19,16,.09); --glass:rgba(246,241,231,.92);
  --bone:#17140f; --ash:#5a554c; --ash-dim:#857f72; --ember:#c2611f; --ember-hi:#a24f16; --moon:#3d5361;
  --code-bg:#1a1714; --code-ink:#e6e1d6; --on-ember:#fff8f0;
}
:root[data-theme="dawn"] .side{background:linear-gradient(180deg,var(--dusk),var(--void))}
:root[data-theme="dawn"] .showcase{background:radial-gradient(400px 260px at 70% 0%,rgba(194,97,31,.12),transparent 70%),radial-gradient(1px 1px at 1px 1px,var(--dots) 1px,transparent 0) 0 0/18px 18px,var(--dusk)}
:root[data-theme="dawn"] .toast{box-shadow:0 18px 40px -18px rgba(23,19,16,.35)}
:root[data-theme="dawn"] .t-tag{color:#f4a35e}

/* ---- dusk / dawn switch ---- */
.theme-toggle{display:inline-flex;justify-self:start;width:max-content;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.theme-toggle button{all:unset;padding:5px 11px;border-radius:999px;font:500 12.5px/1 var(--sans);color:var(--ash);cursor:pointer;transition:background .2s,color .2s}
.theme-toggle button.is-active{background:var(--ember);color:var(--on-ember)}
.theme-toggle button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ---- sidebar always fits the screen, never scrolls ---- */
@media (min-width:961px){
  .side{box-sizing:border-box;height:100vh;height:100dvh;overflow:hidden;padding:clamp(14px,2.6vh,26px) 18px;gap:clamp(10px,2.4vh,26px)}
  .nav{gap:0;min-height:0}
  .nav a{padding:clamp(4px,1.05vh,9px) 10px;font-size:clamp(13px,1.75vh,14px)}
  .side__foot{display:grid;gap:10px;font-size:12px}
  .side__foot p{margin:0}
}
@media (min-width:961px) and (max-height:700px){.side__foot p{display:none}.brand small{display:none}}

/* ---- server-rendered extras: FAQ, crumbs, steps ---- */
.hosted h2.h3{margin:6px 0 6px;font:500 20px/1.2 var(--display)}
.faq-wrap{margin-top:96px}
.faq-wrap h2{font:400 28px/1 var(--display);margin:0 0 18px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-weight:500;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ember);font:400 20px/1 var(--mono);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 16px;color:var(--ash);max-width:75ch;font-size:15px}
.d-page{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px) 80px}
.d-top__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.crumbs{font-size:13.5px;color:var(--ash-dim)}
.crumbs a{color:var(--ash);text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.d-steps{margin:16px 0 0;padding-left:1.3em;display:grid;gap:10px;color:var(--ash);font-size:15px;max-width:80ch}
.d-steps b{color:var(--bone);font-weight:500}
.d-steps code{font-family:var(--mono);font-size:13px;color:var(--ember-hi);word-break:break-all}
.foot a{color:inherit}
@media (max-width:640px){.crumbs{display:none}}
:root[data-theme="dawn"] .new,:root[data-theme="dawn"] .newdot{color:#0f6b51;background:rgba(15,107,81,.08);border-color:rgba(15,107,81,.35)}