/* The lens: five questions drawn in one 1280 x 720 SVG (app/pages/lens.py). The markup rests on chapter 1,
   finished. State is classes on #lens: c1..c5 the chapter, b1..b6 the beats reached, seq for a chapter entered
   in order (it carries the previous one's shape across). home.js only decides when; all motion lives here. */
.lens{--ink:#15161a;--paper:#ece8df;--mute:#8f8e88;--amber:#e9a64c;--ease:cubic-bezier(.2,0,0,1);--swing:cubic-bezier(.65,0,.25,1)}
.lens.cut *,.lens.cut *::before,.lens.cut *::after{transition:none!important;animation:none!important}

/* Layout: figure and notes side by side on wide screens; narrow screens crop the figure to its middle square. */
.lens-main{display:grid;gap:24px}
@media(min-width:1024px){.lens-main{grid-template-columns:minmax(0,1fr) 288px;gap:36px;align-items:start}}
.lens-fig{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
@media(min-width:640px){.lens-fig{aspect-ratio:16/9}}
.lens-svg{display:block;width:100%;height:100%;--k:2.1}
@media(min-width:640px){.lens-svg{--k:2}}
@media(min-width:1024px){.lens-svg{--k:1.72}}
.lens-tick{position:absolute;width:14px;height:14px;border:0 solid #ece8df59;pointer-events:none}
.lens-tick.tl{top:10px;left:10px;border-top-width:1.5px;border-left-width:1.5px}
.lens-tick.tr{top:10px;right:10px;border-top-width:1.5px;border-right-width:1.5px}
.lens-tick.bl{bottom:10px;left:10px;border-bottom-width:1.5px;border-left-width:1.5px}
.lens-tick.br{right:10px;bottom:10px;border-right-width:1.5px;border-bottom-width:1.5px}

/* Corner readouts: what is on screen, and whether it is real. */
.lens-osd .osd{display:none}
.lens.c1 .o1,.lens.c2 .o2,.lens.c3 .o3,.lens.c4 .o4,.lens.c5 .o5{display:block}
.osd span{position:absolute;padding:3px 7px;background:#15161ad9;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#c9c5bb;white-space:nowrap}
.osd .osd-l{top:10px;left:25px}
.osd .osd-r{top:10px;right:25px;color:var(--mute)}
.osd .osd-r.real{color:var(--amber)}
.osd .osd-r.real::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:currentColor}
.osd .osd-n{right:25px;bottom:10px;color:var(--mute)}
.osd .clock{left:25px;bottom:10px;height:20px;padding:0;background:none}
.osd .clock span{left:0;bottom:0;background:var(--ink);opacity:0;transition:opacity 0s}
.lens.c4.b1 .clock span:first-child{opacity:1}
.lens.c4.b4 .clock span{opacity:1;transition-delay:calc(var(--i)*350ms)}
/* Narrow screens: the crop drops the side annotations (the notes carry them) and the provenance moves down. */
@media(max-width:639px){.lens-svg .side{display:none}.osd .osd-n{display:none}.osd .osd-r{top:auto;bottom:10px}}

/* Shared drawing */
.lens-svg .t{font:500 calc(11px*var(--k))/1 var(--font-mono);fill:#c9c5bb;letter-spacing:.01em}
.lens-svg .t.dim{fill:var(--mute)}
.lens-svg .t.bright{fill:var(--amber)}
.lens-svg :is(.p5-chip,.p4-zl) .t{paint-order:stroke;stroke:var(--ink);stroke-width:calc(3.5px*var(--k));stroke-linejoin:round} /* a halo over photos */
.lens-svg :is(.axis,.frame-line,.lead,.dim-line,.p1-edge,.p2-g,.rule,.p4-grid path,.border,.fence,.p4-box,.p4-plume,.p5-person,.p5-ghost,.p3-boxes rect){vector-effect:non-scaling-stroke}
.lens-svg :is(.axis,.lead,.dim-line){fill:none;stroke:#ece8df59;stroke-width:1}
.lens-svg .frame-line{fill:none;stroke:#ece8df40;stroke-width:1}
.lens-svg .pin{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}

/* Visibility per chapter: outgoing fades first, incoming follows. */
.lens :is(.v1,.v2,.v3,.v4,.v5){transition:opacity .4s var(--ease),visibility 0s .4s}
.lens.c1 .v1,.lens.c2 .v2,.lens.c3 .v3,.lens.c4 .v4,.lens.c5 .v5{transition:opacity .55s var(--ease) .2s,visibility 0s}
.lens:not(.c1) .v1,.lens:not(.c2) .v2,.lens:not(.c3) .v3,.lens:not(.c4) .v4,.lens:not(.c5) .v5{opacity:0;visibility:hidden}

/* 01 · The forward pass lights each stage, the 7 x 7 grid lands on the photo, fills with the real map, then
   the map is smoothed back over the image. */
.p1-stage{opacity:.4;transition:opacity .35s var(--ease)}
.p1-stage rect{fill:#222328;stroke:#ece8df80;stroke-width:1;vector-effect:non-scaling-stroke}
.lens.c1.b1 .p1-stage{opacity:1;transition-delay:calc(var(--i)*190ms)}
.lens.c1.b1 .p1-stage rect{animation:lens-flash .8s calc(var(--i)*190ms) both}
@keyframes lens-flash{30%{stroke:var(--amber);fill:#e9a64c40}}
.p1-dot{fill:var(--amber);opacity:0}
.lens.c1.b1 .p1-dot{animation:lens-travel 1.25s var(--swing) both}
@keyframes lens-travel{0%{opacity:0;transform:none}12%,88%{opacity:1}100%{opacity:0;transform:translateY(300px)}}
.cells{transition:transform 1.1s var(--swing),opacity .4s,visibility 0s .4s}
.lens:not(.c1):not(.c2) .cells{opacity:0;visibility:hidden}
.lens.c2 .cells{transform:var(--plate);transition:transform 1.1s var(--swing),opacity .4s,visibility 0s}
.cells .cell{fill:var(--v);opacity:0;transition:opacity .45s var(--ease),fill .8s var(--ease)}
.lens.c1.b3:not(.b4) .cells .cell{opacity:.86;transition-delay:calc(var(--r)*16ms)}
.lens.c2 .cells .cell{opacity:1}
.lens.c2.b1 .cells .cell{fill:var(--l);transition-delay:calc(var(--s)*45ms)}
.lens.c2.b2 .cells .cell{opacity:0;transition-delay:.8s}
.p1-grid{fill:none;stroke:#ece8df8c;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease),stroke .6s,opacity .4s}
.lens.c1.b2 .p1-grid,.lens.c2 .p1-grid{stroke-dashoffset:0}
.lens.c2.b1 .p1-grid{stroke:var(--ink)}
.lens.c2.b2 .p1-grid{opacity:0}
.p1-edge{fill:none;stroke:#ece8df59;stroke-width:1;opacity:0;transition:opacity .4s}
.lens.c1.b2 .p1-edge{opacity:1}
.p1-raw .rc{opacity:0;transition:opacity .4s var(--ease)}
.lens.c1.b3 .p1-raw .rc{opacity:1;transition-delay:calc(var(--r)*16ms)}
.p1-smooth{opacity:0;transition:opacity 1s var(--ease)}
.lens.c1.b4 .p1-smooth{opacity:1}
.p1-proj{fill:none;stroke:#ece8df4d;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.lens.c1.b4 .p1-proj{stroke-dashoffset:0}

/* 02 · The 7 x 7 cells travel onto the plate and take its labels; finer grids sweep in, down to the tomatoes. */
.p2-lv{clip-path:inset(0 0 100% 0);image-rendering:pixelated;transition:clip-path .8s var(--ease),opacity .3s .8s}
.lens.c2.b2 .p2-lv14,.lens.c2.b3 .p2-lv28,.lens.c2.b4 .p2-lv56{clip-path:inset(0)}
.lens.c2.b3 .p2-lv14,.lens.c2.b4 .p2-lv28{opacity:0} /* each coarser map leaves once the finer one has swept in */
.p2-g{fill:none;stroke:var(--ink);stroke-width:1;opacity:0;transition:opacity .5s}
.lens.c2.b2:not(.b3) .p2-g14,.lens.c2.b3:not(.b4) .p2-g28,.lens.c2.b4 .p2-g56{opacity:.85}
.p2-rung{fill:var(--mute);transition:fill .3s}
.lens.c2:not(.b1) .r1,.lens.c2.b1:not(.b2) .r2,.lens.c2.b2:not(.b3) .r3,.lens.c2.b3:not(.b4) .r4,.lens.c2.b4 .r5{fill:var(--amber)}
.p2-item{opacity:0;transition:opacity .45s var(--ease)}
.lens.c2.b5 .p2-item{opacity:1;transition-delay:calc(var(--i)*120ms)}

/* 03 · The page is scanned in, its text found, every box drawn; three dates, one due, decoded and normalised. */
.inv{transform:var(--at);transition:transform 1s var(--swing),opacity .4s,visibility 0s .4s}
.lens:not(.c3) .inv{opacity:0;visibility:hidden}
.lens.c3 .inv{transition:transform 1s var(--swing),opacity .55s var(--ease) .2s,visibility 0s}
.lens.c4.seq .inv{transform:var(--shrink);opacity:0;visibility:hidden;transition:transform 1s var(--swing),opacity .25s .95s,visibility 0s 1.2s}
.inv-sheet{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s linear}
.lens.c3.b1 .inv-sheet,.lens.c4.seq .inv-sheet{clip-path:inset(0)}
.paper{fill:#f4f1ea}
.rule{fill:none;stroke:#15161a33;stroke-width:1}
.inv text{font-family:var(--font-sans);fill:#15161a}
.inv .mute{fill:#6a6c72}
.inv .strong{font-weight:600}
.inv .wide{letter-spacing:.14em}
.scanbar{fill:none;stroke:var(--amber);stroke-width:2.5;opacity:0}
.lens.c3.b1 .scanbar{animation:lens-scan 1.2s linear both}
@keyframes lens-scan{0%,92%{opacity:1}0%{transform:none}100%{opacity:0;transform:translateY(640px)}}
.p3-map rect{fill:var(--amber);opacity:0;transition:opacity .35s var(--ease)}
.lens.c3.b2 .p3-map rect{opacity:.5;transition-delay:calc(var(--i)*1ms)}
.p3-boxes rect{fill:none;stroke:#c7771f;stroke-width:1;opacity:0;transition:opacity .3s,stroke .3s}
.lens.c3.b3 .p3-boxes rect{opacity:1;transition-delay:calc(var(--i)*1ms)}
.lens.c3.b4 .p3-boxes rect:not(.d){opacity:.25;transition-delay:0s}
.lens.c3.b4 .p3-boxes rect.d3{stroke:#cf3f12;stroke-width:2}
.p3-item{opacity:0;transition:opacity .4s var(--ease)}
.lens.c3.b4 .p3-item{opacity:1;transition-delay:calc(var(--i)*110ms)}
.p3-item.due .t{fill:var(--amber)}
.p3-lead{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease)}
.lens.c3.b5 .p3-lead{stroke-dashoffset:0}
.p3-char{opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .9s var(--swing)}
.p3-char rect{fill:#ece8df0d;stroke:#ece8df40;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s}
.p3-char text{font:500 22px var(--font-mono);fill:var(--paper)}
.lens.c3.b5 .p3-char{opacity:1;transform:none;transition-delay:calc(var(--i)*70ms)}
.lens.c3.b6 .p3-char{transform:translateX(var(--dx));transition-delay:calc(var(--i)*35ms)}
.lens.c3.b6 .p3-char rect{stroke:var(--amber)}
.p3-sep text{transition:opacity .3s .45s}
.p3-sep .dash,.lens.c3.b6 .p3-sep text:not(.dash){opacity:0}
.lens.c3.b6 .p3-sep .dash{opacity:1}
.p3-read,.p3-norm{opacity:0;transition:opacity .4s}
.lens.c3.b5:not(.b6) .p3-read,.lens.c3.b6 .p3-norm{opacity:1}

/* 04 · The page shrinks into the first smoke label on a real Pyronear frame; the 32-pixel grid spreads from it.
   Zoom in, pixels and all: smaller than one cell. Zoom out: ninety seconds on, the same smoke, traced from
   its source. */
.frame{transition:transform 1.1s var(--swing),opacity .4s,visibility 0s .4s}
.lens:not(.c4):not(.c5) .frame{opacity:0;visibility:hidden}
.lens:is(.c4,.c5) .frame{transition:transform 1.1s var(--swing),opacity .4s,visibility 0s}
.lens.c5 .frame{transform:var(--tilt)}
.zoom{transition:transform 1.2s var(--swing)}
.lens.c4.b2:not(.b3) .zoom{transform:var(--zoom)}
.p4-photo,.p5-photo{opacity:0;transition:opacity .6s var(--ease)}
.lens.c4 .p4-photo.a{opacity:1}
.lens.c4.b4 .p4-photo.b{opacity:1;transition:opacity 2.4s linear}
.lens.c4.b2:not(.b3) .p4-photo{image-rendering:pixelated}
.lens.c5 .p5-photo{opacity:1;transition:opacity 1s var(--ease) .15s}
.p4-grid path{fill:none;stroke:var(--paper);stroke-width:1;opacity:0;transition:opacity .5s var(--ease)}
.lens.c4 .p4-grid path{opacity:.14;transition-delay:calc(var(--d)*1ms + .35s)}
.p4-box{fill:none;stroke:var(--amber);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s var(--ease)}
.lens.c4.b1 .p4-box{opacity:1;animation:lens-lock .7s var(--ease) both}
.lens.c4.b4 .p4-box{opacity:.55;transition:opacity 1s var(--ease) .6s}
@keyframes lens-lock{from{opacity:0;transform:scale(2.6)}}
.p4-plume{fill:#e9a64c38;fill-rule:evenodd;stroke:var(--amber);stroke-width:1;stroke-linejoin:round;opacity:0;clip-path:circle(0 at 20% 100%);transition:opacity .4s var(--ease),clip-path 0s .4s}
.lens.c4.b4 .p4-plume{opacity:1;clip-path:circle(135% at 20% 100%);transition:opacity .3s var(--ease),clip-path 2.4s cubic-bezier(.45,0,.25,1)}
.p4-zl{opacity:0;transition:opacity .3s}
.lens.c4.b2:not(.b3) .p4-zl{opacity:1;transition-delay:1.15s}

/* 05 · The frame tilts back into a stack of earlier frames and becomes the night-vision camera; earlier
   positions appear oldest first, the track joins them, the person is locked, and the crossing raises the alert. */
.lens-svg .border{fill:none;stroke:#ece8df66;stroke-width:1}
.lens-svg .fence{fill:none;stroke:#ece8df8c;stroke-width:1.5;transition:stroke .4s}
.p5-back .border{stroke:#ece8df47}
.alert-zone{fill:var(--amber);opacity:0;transition:opacity .5s}
.p5-back{transform:var(--from);opacity:0;transition:transform .9s var(--swing),opacity .4s}
.lens.c5.b1 .p5-back{transform:var(--to);opacity:1;transition-delay:calc(var(--j)*90ms)}
.p5-time{opacity:0;transition:opacity .35s}
.lens.c5.b1 .p5-time{opacity:1;transition-delay:calc(.3s + var(--j)*90ms)}
.p5-ghost{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 3;opacity:0;transition:opacity .35s var(--ease)}
.lens.c5.b2 .p5-ghost{opacity:calc(1.05 - var(--j)*.22);transition-delay:calc((3 - var(--j))*220ms)}
.p5-track{fill:none;stroke:var(--amber);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.lens.c5.b3 .p5-track{stroke-dashoffset:0}
.p5-foot{fill:var(--amber);opacity:0;transition:opacity .3s}
.lens.c5.b3 .p5-foot{opacity:1;transition-delay:calc((3 - var(--j))*250ms)}
.p5-person{fill:none;stroke:var(--amber);stroke-width:1.8;opacity:0;transform-box:fill-box;transform-origin:center}
.lens.c5.b3 .p5-person{opacity:1;animation:lens-lock .7s var(--ease) .75s both}
.p5-chip{opacity:0;transition:opacity .4s}
.lens.c5.b4 .p5-chip{opacity:1}
.lens.c5.b4 .p5-front .fence{stroke:var(--amber)}
.lens.c5.b4 .alert-zone{opacity:.16}

/* Chapter 5's last beat: the stack zooms out to make room for the site map. */
.p5-over{transition:transform 1.1s var(--swing)}
.lens.c5.b5 .frame{transform:var(--tilt-out)}
.lens.c5.b5 .p5-back{transform:var(--out);transition-delay:0s}
.lens.c5.b5 .p5-over{transform:var(--out)}

/* Result cards: what each product hands back, in the bottom-right corner once its chapter has played. */
.lens-cards .card{position:absolute;right:25px;bottom:38px;width:190px;padding:9px 11px 10px;border:1px solid #ece8df2e;background:#15161ae6;font:500 10px/1.5 var(--font-mono);color:#c9c5bb;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .45s}
.lens.c2.b6 .card.k2,.lens.c4.b5 .card.k4,.lens.c5.b5 .card.k5{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s}
.lens.c5.b5 .card.k5{transition-delay:.55s}
.card-h{margin:0 0 6px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.card-l{margin:0;color:var(--paper)}
.card-f{margin:4px 0 0;color:var(--mute)}
.card table{width:100%;border-collapse:collapse}
.card td{padding:1px 0;white-space:nowrap}
.card td+td{padding-left:10px;text-align:right}
.card tr{opacity:0;transition:opacity .3s var(--ease)}
.lens.c2.b6 .card tr{opacity:1;transition-delay:calc(.25s + var(--i)*120ms)}
.card tr.total td{padding-top:5px;border-top:1px solid #ece8df2e;color:var(--paper)}
.card-map{display:block;width:100%;height:auto;margin:2px 0 7px;overflow:visible}
.card-map .m-line{fill:none;stroke:#ece8df73;stroke-width:1;vector-effect:non-scaling-stroke}
.card-map .m-rows rect{fill:#ece8df1a}
.card-map :is(.m-fov,.m-cone){fill:#ece8df12}
.card-map :is(.m-fov,.m-cone.on){fill:#e9a64c2e}
.card-map .m-cam{fill:var(--paper)}
.card-map .m-cam.on{fill:var(--amber)}
.card-map .m-gate{stroke:var(--ink);stroke-width:3}
.card-map .m-path{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:2 2}
.card-map .m-ray{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.card-map .m-fix{fill:none;stroke:var(--amber);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.card-map .m-fix circle+circle{fill:var(--amber);stroke:none}
.card-map .m-t{font:500 7.5px var(--font-mono);fill:var(--mute)}
.card-map .m-t.on{fill:var(--amber)}
.lens.c4.b5 .k4 .m-ray{stroke-dashoffset:0;transition-delay:.35s}
.lens.c4.b5 .k4 .m-fix{opacity:1;animation:lens-lock .6s var(--ease) 1.2s both}
.lens.c5.b5 .k5 .m-fix{opacity:1;animation:lens-lock .6s var(--ease) 1.2s both}
.p2-move{transition:transform 1s var(--swing)}
@media(max-width:639px){
  .lens-cards .card{right:12px;bottom:34px;width:178px;padding:8px 9px;font-size:9px}
  .lens.c2.b6 .p2-move{transform:var(--move-m)}
  .lens.c5.b5 .frame{transform:var(--tilt-out-m)}
  .lens.c5.b5 :is(.p5-back,.p5-over){transform:var(--out-m)}
}

/* Notes beside the figure: one chapter at a time with JS; without it, all five under the figure. */
.lens:not(.js) .lens-main{grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.lens:not(.js) .lens-svg{--k:1.2}}
.lens:not(.js) .lens-notes{display:grid;gap:36px}
@media(min-width:768px){.lens:not(.js) .lens-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lens:not(.js) .lens-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lens.js .note{display:none;margin:0}
.lens.js.c1 .n1,.lens.js.c2 .n2,.lens.js.c3 .n3,.lens.js.c4 .n4,.lens.js.c5 .n5{display:block;animation:lens-note .5s var(--ease) both}
@keyframes lens-note{from{opacity:0}}
.note-k{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#a15c1e}
.note-q{margin-top:10px;font-size:27px;line-height:1.12;letter-spacing:-.025em;color:#15161a;text-wrap:balance}
.note-b{margin-top:14px;font-size:15px;line-height:1.6;color:#3d3f44;text-wrap:pretty}
.note-s{margin-top:16px;font-size:12px;line-height:1.5;color:#6a6c72}

/* Controls: play/pause and the five questions, each with its progress rule. */
.lens-controls{display:grid;gap:16px;margin-top:26px}
@media(min-width:1024px){.lens-controls{grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}}
.lens-play{display:inline-flex;align-items:center;justify-self:start;gap:9px;min-width:96px;min-height:36px;margin-top:9px;padding:0 13px;border:1px solid #15161a3d;font:500 12px var(--font-mono);letter-spacing:.04em;color:#15161a;cursor:pointer;transition:color .2s,border-color .2s}
.lens-play:hover{color:#a15c1e;border-color:#a15c1e}
.lens-play[hidden]{display:none}
.lens-play::before{content:"";flex:none;width:9px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.lens-play[data-icon=pause]::before{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.lens-play[data-icon=replay]::before{width:10px;height:10px;background:none;border:1.6px solid currentColor;border-top-color:transparent;border-radius:50%;clip-path:none}
.lens-rail{display:grid;margin:0;padding:0;list-style:none}
@media(min-width:1024px){.lens-rail{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:18px}}
.lens-rail li{position:relative;border-top:1px solid #15161a24}
.lens-rail button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;width:100%;padding:12px 0 14px;text-align:left;cursor:pointer}
.rail-n{grid-row:span 2;font:500 11px/1.8 var(--font-mono);letter-spacing:.06em;color:#6a6c72}
.rail-q{font-size:16px;line-height:1.3;letter-spacing:-.01em;color:#15161a;transition:color .2s}
.rail-who{margin-top:5px;font:500 10.5px/1.45 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:#6a6c72}
.lens-rail [aria-pressed=false] .rail-q{color:#4b4d52}
.lens-rail button:hover .rail-q{color:#a15c1e}
.lens-rail button:focus-visible,.lens-play:focus-visible{outline:2px solid #a15c1e;outline-offset:3px}
.rail-bar{position:absolute;top:-1px;left:0;width:100%;height:2px;background:#a15c1e;transform:scaleX(0);transform-origin:left}
.lens-rail [aria-pressed=true] .rail-bar{transform:none}
.lens:is([data-run=playing],[data-run=paused]) .lens-rail [aria-pressed=true] .rail-bar{animation:lens-fill var(--hold) linear both}
@keyframes lens-fill{from{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){.lens *{transition-delay:0s!important;animation-delay:0s!important}}

/* Selected work: a static card per project, one diagram of what it does and one line under it. */
.spec{margin:22px 0 0;padding:13px 14px 12px;border:1px solid #15161a1f;background:#f7f6f2}
.spec-k{font:500 10.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#6a6c72}
.spec svg{display:block;width:100%;height:auto;margin:14px 0 12px}
.spec svg text{font:500 9px var(--font-mono);fill:#6a6c72}
.spec svg .mid{text-anchor:middle}
.spec svg .end{text-anchor:end}
.spec svg .small{font-size:7px}
.spec svg .ink{fill:#15161a}
.spec svg .on{fill:#a15c1e}
.spec svg .hair{fill:none;stroke:#15161a26;stroke-width:1}
.spec svg :is(.track,.mark,.sight,.box,.ko){fill:none;stroke:#a15c1e;stroke-width:1}
.spec svg .track{stroke-width:1.4;stroke-linecap:round}
.spec svg .map{fill:#edeee8;stroke:#15161a1f;stroke-width:.8}
.spec svg .field{stroke:#15161a33;stroke-width:.6}
.spec svg .hatch{stroke:#15161a40;stroke-width:.7}
.spec svg :is(.fence,.cross){fill:none;stroke:#15161a99;stroke-width:1}
.spec svg .cross{stroke-width:.7}
.spec svg .view{fill:#15161a2e}
.spec svg .north{fill:none;stroke:#15161a;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.spec svg .scale{fill:#15161a;stroke:#15161a;stroke-width:.6}
.spec svg .scale.w{fill:#fff}
.spec svg .track.off{stroke:#15161aa6;stroke-dasharray:2.5 2.5}
.spec svg .step{fill:#15161a}
.spec svg .step.on,.spec svg .seen.on{fill:#a15c1e}
.spec svg .seen{fill:#15161a4d}
.spec svg .entry{fill:#f7f6f2;stroke:#a15c1e;stroke-width:1.2}
.spec svg .cam-dot{fill:#15161a}
.spec svg .num{fill:#fff;stroke:#15161a66;stroke-width:.8}
.spec svg .num-t{font-size:7px;fill:#15161a;text-anchor:middle}
.spec svg .pill{fill:#fff;stroke:#a15c1e;stroke-width:1}
.spec svg .l1{fill:#e9ece5}
.spec svg .l2{fill:#d8e0cf}
.spec svg .l3{fill:#becab4}
.spec svg .smoke{opacity:.24}
.spec svg .mast{stroke:#15161a;stroke-width:1.2}
.spec svg .cam{fill:#15161a}
.spec svg .sight{stroke-dasharray:3 3}
.spec svg .box{stroke-width:1.2}
.spec svg .hills{fill:#d8e1e6}
.spec svg .glint{fill:none;stroke:#15161a1a;stroke-width:1.4;stroke-linecap:round}
.spec svg .wave{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round}
.spec svg .hull{fill:#2a2c31}
.spec svg .flag{fill:#15161a99}
.spec svg .conf-bg{fill:#15161a1a}
.spec svg .conf{fill:#15161a}
.spec svg .sail{fill:#fff;stroke:#15161a66;stroke-width:.8;stroke-linejoin:round}
.spec svg .chip{fill:#fff;stroke:#15161a33;stroke-width:.8}
.spec svg :is(.ok,.ko){stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.spec svg .ok{fill:none;stroke:#15161a}
.spec-f{margin:0;padding-top:9px;border-top:1px solid #15161a17;font:500 11.5px/1.4 var(--font-mono);color:#15161a}