/* GENERATED — do not edit. Source: vendor/scrub-engine.js injectCSS().
   Regenerate with: python3 private/scroll-world/extract-css.py

   CARRIES HAND EDITS. The film's chrome was redesigned in place on 10 Aug 2026: the route rail
   became a bay index, the copy tags and buttons lost their pills and their synthesised 600
   weight. Regenerating this file reverts all of it. Either re-apply the blocks marked with a
   comment below, or move them into styles.css under #world, which is unlayered and therefore
   beats @layer sw regardless of specificity.

   Served as a file rather than injected so the site keeps style-src 'self' with no
   'unsafe-inline'. The <link> in index.html carries id="sw-css", which is exactly what the
   engine's own guard looks for, so injectCSS() returns early and never builds its <style>. */
@layer sw {

  .sw-root{--sw-bg:#F5EDE0;--sw-ink:#241d2b;--sw-ink-soft:#6a6072;--sw-accent:#8a7bb5;
    --sw-font-display:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
    --sw-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
    color:var(--sw-ink);font-family:var(--sw-font-body);}
  /* PATCHED at extraction: was `html,body{margin:0;background:…;overflow-x:hidden}`.
     overflow-x on <html> breaks position:sticky for the whole document, and the page
     below the film depends on a sticky topbar. The clip is scoped to the stage. */
  .sw-root{margin:0;}
  .sw-stage{overflow-x:hidden;}
  .sw-sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--sw-bg);}
  .sw-sky__grad{position:absolute;inset:-10%;background:linear-gradient(178deg,color-mix(in srgb,var(--sw-accent) 12%,var(--sw-bg)) 0%,var(--sw-bg) 55%,color-mix(in srgb,var(--sw-accent) 6%,var(--sw-bg)) 100%);}
  .sw-sky__glow{position:absolute;inset:0;background:radial-gradient(60% 42% at 74% 16%,color-mix(in srgb,var(--sw-accent) 22%,transparent),transparent 70%),radial-gradient(46% 34% at 50% 50%,color-mix(in srgb,#fff 45%,transparent),transparent 70%);}
  .sw-particles{position:absolute;inset:-6% -2%;will-change:transform;}
  .sw-pt{position:absolute;width:13px;height:13px;transform:scale(var(--sw-sc,1));opacity:0;animation:sw-drift linear infinite;}
  .sw-pt::before{content:"";position:absolute;inset:0;border-radius:50%;}
  .sw-pt--dot::before{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--sw-accent) 60%,#000),#000 82%);}
  .sw-pt--ring::before{background:transparent;border:2px solid color-mix(in srgb,var(--sw-accent) 55%,transparent);}
  @keyframes sw-drift{0%{opacity:0;transform:scale(var(--sw-sc)) translate(0,12vh) rotate(0)}12%{opacity:.5}88%{opacity:.45}100%{opacity:0;transform:scale(var(--sw-sc)) translate(4vw,-22vh) rotate(210deg)}}
  .sw-scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:color-mix(in srgb,var(--sw-accent) 14%,transparent);}
  .sw-scrollbar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--sw-accent);}
  .sw-topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,2.4vw,26px) clamp(18px,5vw,64px);}
  .sw-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sw-ink);}
  .sw-brand__mark{width:24px;height:28px;border-radius:7px 7px 10px 10px;background:linear-gradient(160deg,var(--sw-accent),color-mix(in srgb,var(--sw-accent) 60%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--sw-accent) 40%,transparent);}
  .sw-brand__name{font-family:var(--sw-font-display);font-weight:700;font-size:1.1rem;}
  .sw-nav{display:flex;gap:4px;padding:5px;background:color-mix(in srgb,#fff 55%,transparent);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--sw-accent) 16%,transparent);border-radius:0;}
  .sw-nav__item{font:inherit;font-size:.82rem;color:var(--sw-ink-soft);border:0;background:transparent;cursor:pointer;padding:7px 14px;border-radius:0;transition:color .25s,background .25s;}
  .sw-nav__item:hover{color:var(--sw-ink);} .sw-nav__item.is-active{color:#fff;background:var(--sw-accent);}
  .sw-topcta{text-decoration:none;font-weight:600;font-size:.9rem;color:#fff;background:var(--sw-ink);padding:10px 20px;border-radius:0;white-space:nowrap;}
  .sw-stage{position:fixed;inset:0;z-index:10;pointer-events:none;}
  .sw-scene{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:opacity;}
  .sw-scene__video,.sw-scene__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
  .sw-scene__still{will-change:transform;} .sw-scene.has-clip .sw-scene__still{opacity:0;} .sw-scene__video{z-index:1;}
  .sw-copylayer{position:fixed;inset:0;z-index:20;pointer-events:none;}
  .sw-copylayer::before{content:"";position:absolute;inset:0;width:min(58vw,780px);background:linear-gradient(90deg,var(--sw-bg) 0%,color-mix(in srgb,var(--sw-bg) 82%,transparent) 34%,color-mix(in srgb,var(--sw-bg) 40%,transparent) 62%,transparent 100%);}
  .sw-copy{position:absolute;left:clamp(18px,5vw,64px);top:50%;transform:translateY(-50%);width:min(42vw,460px);opacity:0;will-change:opacity,transform;}
  .sw-copy__num{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;letter-spacing:.12em;color:var(--sw-ink-soft);}
  .sw-copy__eyebrow{display:block;margin-top:18px;font-family:var(--sw-font-display);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sw-accent);}
  .sw-copy__title{font-family:var(--sw-font-display);font-weight:700;color:var(--sw-ink);font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.03;margin:12px 0 0;letter-spacing:-.01em;text-shadow:0 2px 20px color-mix(in srgb,var(--sw-bg) 70%,transparent);}
  .sw-copy__body{margin-top:18px;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.55;color:color-mix(in srgb,var(--sw-ink) 78%,var(--sw-ink-soft));max-width:40ch;text-shadow:0 1px 12px color-mix(in srgb,var(--sw-bg) 90%,transparent);}
  /* The same legend line the page uses under a work entry. These were tinted pills at weight
     600, which is a weight the family does not ship, so the browser synthesised it: a fat,
     rounded, filled tag floating over a flat cardboard drawing. */
  .sw-copy__tags{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;margin:24px 0 0;padding:0;}
  .sw-copy__tags li{font:400 .74rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--sw-ink) 62%,transparent);padding:0;border:0;background:none;}
  .sw-copy__tags li + li::before{content:"/";margin:0 .6rem;opacity:.4;}
  .sw-copy__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;pointer-events:auto;}
  /* Square, and weight 500 rather than 600: Plex Mono ships 400 and 500 here, and asking for 600
     was synthesising a bold the family does not have. That faux weight is a large part of why the
     film's chrome read as machine-made. */
  .sw-btn{text-decoration:none;font:500 .82rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;border-radius:0;transition:background .2s,color .2s,border-color .2s;}
  .sw-btn--primary{color:var(--sw-bg);background:var(--sw-ink);} .sw-btn--primary:hover{background:var(--sw-accent);}
  .sw-btn--ghost{color:var(--sw-ink);border:1px solid color-mix(in srgb,var(--sw-ink) 32%,transparent);} .sw-btn--ghost:hover{border-color:var(--sw-ink);}
  /* The bay index.
     Rebuilt from round dots and floating pills into the index that runs down the edge of a
     shelf drawing: a hairline fixture line, a square tick per position, and the position number
     always legible beside it.
     The old version put the line at left:50% of a padded flex column and the ticks at the column's
     start, so the two were only accidentally aligned and drifted apart the moment the touch query
     changed the dot size. Here every row is right-aligned, so every tick shares the container's
     right edge, and the line is anchored to that same edge by the same variable. They cannot
     separate. */
  .sw-route{--tick:10px;position:fixed;right:clamp(18px,2.8vw,38px);top:50%;z-index:40;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:26px;padding:6px 0;counter-reset:bay;}
  .sw-route::before{content:"";position:absolute;right:calc(var(--tick)/2 - .5px);top:0;bottom:0;width:1px;background:var(--sw-ink);opacity:.22;}
  .sw-route__dot{position:relative;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;counter-increment:bay;}
  /* A drawing index numbers its positions, and the number stays readable whether or not you are
     pointing at it. Leading zero because there are more than nine bays in the general case. */
  .sw-route__dot::after{content:counter(bay,decimal-leading-zero);order:1;font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--sw-ink);opacity:.38;transition:opacity .25s;}
  .sw-route__dot:hover::after,.sw-route__dot.is-active::after{opacity:1;}
  .sw-route__dot i{order:2;width:var(--tick);height:var(--tick);border-radius:0;background:var(--sw-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw-ink) 45%,transparent);transition:background .25s,box-shadow .25s;}
  .sw-route__dot:hover i{box-shadow:inset 0 0 0 1px var(--sw-ink);}
  .sw-route__dot.is-active i{background:var(--sw-accent);box-shadow:inset 0 0 0 1px var(--sw-accent);}
  /* Plain type on the sheet. No pill, no blur, no border: a callout on a drawing is written on
     the drawing. */
  .sw-route__label{order:0;white-space:nowrap;font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sw-ink);opacity:0;pointer-events:none;transition:opacity .25s;}
  .sw-route__dot:hover .sw-route__label,.sw-route__dot.is-active .sw-route__label{opacity:.72;}
  .sw-hint{position:fixed;left:50%;bottom:26px;z-index:30;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sw-ink-soft);transition:opacity .3s;}
  .sw-hint i{width:22px;height:34px;border-radius:12px;border:2px solid color-mix(in srgb,var(--sw-ink) 28%,transparent);position:relative;}
  .sw-hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:var(--sw-accent);transform:translateX(-50%);animation:sw-wheel 1.7s ease-in-out infinite;}
  @keyframes sw-wheel{0%{opacity:0;top:6px}40%{opacity:1}100%{opacity:0;top:17px}}
  .sw-track{position:relative;z-index:1;width:100%;pointer-events:none;}
  @media (max-width:860px){
    .sw-nav{display:none;}
    .sw-copylayer::before{width:100%;height:60%;top:auto;bottom:0;background:linear-gradient(0deg,var(--sw-bg) 8%,color-mix(in srgb,var(--sw-bg) 70%,transparent) 46%,transparent 100%);}
    /* Anchor copy to the bottom, clear of the home indicator / collapsing URL bar.
       dvh + env() are progressive: browsers that lack them keep the vh fallback line. */
    .sw-copy{left:clamp(18px,5vw,64px);right:clamp(18px,5vw,64px);top:auto;bottom:clamp(64px,14vh,120px);transform:none;width:auto;max-width:560px;}
    .sw-copy{bottom:calc(clamp(56px,12dvh,110px) + env(safe-area-inset-bottom));}
    .sw-copy__title{font-size:clamp(1.9rem,7.5vw,2.7rem);}
    .sw-copy__body{max-width:none;font-size:clamp(.98rem,3.6vw,1.1rem);} .sw-scene__video,.sw-scene__render canvas,.sw-scene__still{object-position:center 46%;}
    .sw-hint{bottom:calc(20px + env(safe-area-inset-bottom));}
    /* Narrow: the index keeps its numbers and loses only the written callouts. */
    .sw-route{gap:18px;right:10px;} .sw-route__label{display:none;}
  }
  /* Portrait phones crop a 16:9 clip hard; keep the framing centred so the focal
     subject (which the camera dives toward) stays in view. */
  @media (max-width:860px) and (orientation:portrait){
    .sw-scene__video,.sw-scene__render canvas,.sw-scene__still{object-position:center 44%;}
  }
  /* Touch: give the route dots a finger-sized hit area without growing the visible dot. */
  @media (hover:none) and (pointer:coarse){
    /* A finger-sized target without resizing the tick. Setting a width here is what used to
       throw the line and the ticks out of alignment, so the hit area grows by padding instead. */
    .sw-route__dot{padding:9px 0;margin:-9px 0;}
    .sw-btn{padding:15px 26px;}
  }
  @media (prefers-reduced-motion:reduce){ .sw-hint i::after{animation:none;} .sw-pt{display:none;} }
  
}

/* LOCAL PATCH (ghostavo): surface for a live-drawn scene. Sits exactly where the video
   would, so a rendered scene crossfades against its filmed neighbours like any other. */
@layer sw {
  .sw-scene__render { position: absolute; inset: 0; z-index: 1; }
  /* The still holds until the drawn scene has something to show. This used to drop the still the
     moment a render surface existed, which was fine for an SVG that paints synchronously and wrong
     for a frame sequence, where the first image arrives over the network: the scene flashed empty
     between mount and that frame. `seq-ready` is added by the first successful draw. */
  .sw-scene.has-render.seq-ready .sw-scene__still { opacity: 0; }
  .sw-scene__render svg { width: 100%; height: 100%; display: block; }
  /* The frame-sequence canvas is framed exactly like the clip it replaces — same box, same crop,
     same focal offset — so every layout rule already written for .sw-scene__video applies to it
     without being written twice. It is listed alongside the video wherever that is overridden. */
  .sw-scene__render canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center 42%;
  }
}
