/* Erzeugt von werkzeuge/build-film.py aus entwuerfe/blogprozess-film/netz-quelle/netz.css - nicht von Hand aendern. */
#film,#steps{--ink:#131313; --ink-soft:#5C5C5C; --ink-faint:#6E6E6E; --paper:#FFFFFF;
  --line:#E6E6E6; --line-strong:#949494; --accent:#B4124E; --accent-ink:#FFFFFF;
  --accent-glow:rgba(180,18,78,.16); --code-bg:#E6E6E6; --lamp:#949494;
  --lift:0 2px 5px rgba(18,18,18,.10), 0 1px 2px rgba(18,18,18,.06);
  --sans:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:"Space Mono", ui-monospace, SFMono-Regular, monospace;
  --ease:cubic-bezier(.2,.7,.3,1);}
.player{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
:where(#film) .svgwrap{display:block;width:100%;aspect-ratio:16/9;cursor:pointer}
:where(#film) .svgwrap svg{display:block;width:100%;height:100%}
:where(#film) .ui{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);
  background:var(--paper);transition:opacity .3s var(--ease);}
.player:fullscreen .ui,.player.pseudo-full .ui{position:absolute;left:0;right:0;bottom:0;border-top:none;background:linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,0))}
.player:fullscreen.playing:not(.show-ui) .ui,.player.pseudo-full.playing:not(.show-ui) .ui{opacity:0}
.player:fullscreen.playing:not(.show-ui):has(:focus-visible) .ui,.player.pseudo-full.playing:not(.show-ui):has(:focus-visible) .ui{opacity:1}
:where(#film) .ui button[hidden]{display:none}
.player:fullscreen:not(.playing) .cline,.player.pseudo-full:not(.playing) .cline,.player:fullscreen.show-ui .cline,.player.pseudo-full.show-ui .cline{opacity:0}
:where(#film) .ui button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
:where(#film) .pp{background:var(--accent);color:var(--accent-ink);box-shadow:var(--lift)}
:where(#film) .fs,:where(#film) .snd{background:var(--paper);color:var(--ink);border:1px solid var(--line) !important;box-shadow:var(--lift)}
:where(#film) .snd .i-off{display:none}
.player.muted .snd .i-on,.player.sound-blocked .snd .i-on{display:none}
.player.muted .snd .i-off,.player.sound-blocked .snd .i-off{display:block}
.player.sound-blocked .snd{color:var(--accent);border-color:var(--accent) !important;animation:sndpulse 1.6s var(--ease) infinite}
@keyframes sndpulse{0%,100%{box-shadow:var(--lift),0 0 0 0 var(--accent-glow)}50%{box-shadow:var(--lift),0 0 0 7px var(--accent-glow)}}
@media (prefers-reduced-motion:reduce){.player.sound-blocked .snd{animation:none}}
:where(#film) .ui svg{width:16px;height:16px}
:where(#film) .pp .i-pause{display:none}
.player.playing .pp .i-play{display:none}
.player.playing .pp .i-pause{display:block}
:where(#film) .prog{flex:1;height:30px;display:flex;align-items:center;cursor:pointer;position:relative}
:where(#film) .prog-bar{position:relative;width:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
:where(#film) .prog-fill{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
:where(#film) .ptime{font-family:var(--mono);font-size:.8125rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.player:fullscreen,.player.pseudo-full{border:none;border-radius:0;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.player.pseudo-full{position:fixed;inset:0;z-index:100}
.player:fullscreen .svgwrap,.player.pseudo-full .svgwrap{width:min(100vw, calc(100vh * 16 / 9));height:auto}
:where(#film) .bg{fill:var(--paper)}
:where(#film) .head{font-family:var(--mono);font-size:15px;letter-spacing:.1em;fill:var(--ink-faint)}
:where(#film) .sub{font-family:var(--mono);font-size:16px;fill:var(--ink-soft)}
:where(#film) .tile{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
:where(#film) .tile.used{stroke:var(--line-strong)}
:where(#film) .tile.on{stroke:var(--accent);stroke-width:2.2;fill:var(--accent-glow)}
:where(#film) .tlabel{font-family:var(--mono);font-size:15px;fill:var(--ink)}
:where(#film) .tdot.gR{fill:var(--accent)}
:where(#film) .tdot.gW{fill:var(--ink)}
:where(#film) .tdot.gH{fill:var(--paper);stroke:var(--ink-soft);stroke-width:2}
:where(#film) .tdot.gT{fill:var(--ink-soft)}
:where(#film) .tdot.gF{fill:var(--lamp)}
:where(#film) .tdot.gU{fill:var(--paper);stroke:var(--ink);stroke-width:2}
:where(#film) .frame{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:6 6}
:where(#film) .skillpill{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
:where(#film) .glow{fill:var(--accent-glow)}
:where(#film) .lampon{fill:var(--accent)}
:where(#film) .skilltext{font-family:var(--mono);font-size:20px;fill:var(--ink)}
:where(#film) .paper{fill:var(--paper);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
:where(#film) .fold{fill:var(--line);stroke:var(--ink);stroke-width:1.5}
:where(#film) .hair line{stroke:var(--line-strong);stroke-width:1}
:where(#film) .val{fill:var(--ink)}
:where(#film) .bar{fill:var(--ink)}
:where(#film) .mark{fill:var(--accent-glow);stroke:var(--accent);stroke-width:1.5}
:where(#film) .cdot{fill:var(--accent);stroke:var(--paper);stroke-width:2.5}
:where(#film) .mdtag{fill:var(--ink)}
:where(#film) .mdtext{font-family:var(--mono);font-size:15px;fill:var(--paper)}
:where(#film) .tabsym{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .beam{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
:where(#film) .chip{fill:var(--paper);stroke:var(--ink);stroke-width:1.8}
:where(#film) .chipsym path,:where(#film) .chipsym rect,:where(#film) .chipsym circle{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .chipsym .fill{fill:var(--ink);stroke:none}
:where(#film) .chipname{font-family:var(--mono);font-size:18px;fill:var(--ink)}
:where(#film) .chipknows{font-family:var(--mono);font-size:15px;fill:var(--ink-soft)}
:where(#film) .fig{fill:var(--paper);stroke:var(--ink);stroke-width:1.8}
:where(#film) .st-o{fill:var(--paper);fill-opacity:.95;stroke:var(--accent);stroke-width:2.6}
:where(#film) .st-i{fill:none;stroke:var(--accent);stroke-width:1.2}
:where(#film) .st-c path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .win{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
:where(#film) .hairl{stroke:var(--line-strong)}
:where(#film) .wdot{fill:var(--line-strong)}
:where(#film) .baton{fill:var(--accent)}
:where(#film) .edge{fill:none;stroke:var(--line-strong);stroke-width:1.4}
:where(#film) .edge.on{stroke:var(--accent);stroke-width:2.4}
:where(#film) .edge.trace{stroke:var(--ink-faint);stroke-width:1.2;stroke-opacity:.55}
:where(#film) .pulse{fill:var(--accent)}
:where(#film) .note{font-family:var(--mono);font-size:15px;fill:var(--accent);paint-order:stroke;stroke:var(--paper);stroke-width:5px}
:where(#film) .eyebrow{font-family:var(--mono);font-size:17px;letter-spacing:.1em;fill:var(--ink-soft)}
:where(#film) .title{font-family:var(--sans);font-size:30px;font-weight:600;letter-spacing:-.02em;fill:var(--ink)}
:where(#film) .lane{stroke:var(--line);stroke-width:1}
:where(#film) .lanelabel{font-family:var(--mono);font-size:17px;fill:var(--ink-soft)}
:where(#film) .lanelabel.strong{fill:var(--ink)}
:where(#film) .sbar{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.2}
:where(#film) .sbar.quiet{stroke-dasharray:4 4}
:where(#film) .sbar.past{stroke:var(--lamp);fill:var(--paper)}
:where(#film) .sbar.on{stroke:var(--accent);stroke-width:2.2;fill:var(--accent-glow)}
:where(#film) .sbartext{font-family:var(--mono);font-size:15px;fill:var(--ink-faint)}
:where(#film) .sbartext.on{fill:var(--ink)}
:where(#film) .con{stroke:var(--line-strong);stroke-width:1.2}
:where(#film) .con.on{stroke:var(--accent);stroke-width:2.2}
:where(#film) .conhead{fill:none;stroke:var(--line-strong);stroke-width:1.2}
:where(#film) .conhead.on{stroke:var(--accent);stroke-width:2.2}
:where(#film) .playhead{fill:var(--accent)}
:where(#film) .badge{font-family:var(--mono);font-size:14px;fill:var(--accent)}
:where(#film) .archtag{font-family:var(--mono);font-size:14px;fill:var(--ink-soft)}
:where(#film) .strike{stroke:var(--ink-soft);stroke-width:1.5}
:where(#film) .tile.ghost{stroke-dasharray:4 4}
:where(#film) .cline{font-family:var(--mono);font-size:15px}
:where(#film) .cnum{fill:var(--ink);font-variant-numeric:tabular-nums}
:where(#film) .clab{fill:var(--ink-faint)}
:where(#film) .pillflash{fill:var(--accent-glow);stroke:var(--accent);stroke-width:2.4}
:where(#film) .tagbox{fill:var(--paper);stroke:var(--ink-soft)}
:where(#film) .tagtext{font-family:var(--mono);font-size:14px;fill:var(--ink-soft)}
:where(#film) .edge.trace.end{stroke:var(--ink-soft);stroke-opacity:.8}
:where(#film) .edge.trace{transition:stroke .6s var(--ease),stroke-opacity .6s var(--ease)}
:where(#film) .bbody{fill:var(--accent)}
:where(#film) .bglow{fill:var(--accent-glow);stroke:var(--accent);stroke-opacity:.35;stroke-width:2}
:where(#film) .btext{font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.01em;fill:var(--accent-ink)}
:where(#film) .bcheck{fill:none;stroke:var(--accent-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .spot0{stop-color:var(--accent);stop-opacity:.32}
:where(#film) .spot1{stop-color:var(--accent);stop-opacity:0}
:where(#film) .hl{fill:var(--accent-glow);stroke:var(--accent);stroke-width:1}
:where(#film) .stub{fill:var(--ink-faint)}
:where(#film) .scribble{fill:none;stroke:var(--ink-soft);stroke-width:1.6;stroke-linecap:round}
:where(#film) .ln{fill:var(--ink-soft)}
:where(#film) .chev{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .symbox,:where(#film) .boxel,:where(#film) .faqrow{fill:none;stroke:var(--ink-soft);stroke-width:1}
:where(#film) .symline{fill:none;stroke:var(--ink-soft);stroke-width:.9}
:where(#film) .accfill{fill:var(--accent)}
:where(#film) .tick path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .faqplus{stroke:var(--accent);stroke-width:1.3}
:where(#film) .img{fill:var(--accent-glow)}
:where(#film) .imghill{fill:var(--accent);fill-opacity:.5}
:where(#film) .imgsun{fill:var(--accent)}
:where(#film) .tagel{fill:none;stroke:var(--accent);stroke-width:1.2}
:where(#film) .dotfill{fill:var(--ink)}
:where(#film) .fan{opacity:.8}
:where(#film) .docb{fill:var(--paper);stroke:var(--ink-soft);stroke-width:1.2}
:where(#film) .addr{fill:var(--code-bg)}
:where(#film) .live{fill:#1E7B4C}
:where(#film) .livering{fill:none;stroke:#1E7B4C;stroke-width:1.5}
:where(#film) .thumb{fill:var(--line);stroke:var(--ink-soft)}
:where(#film) .thumbtint{fill:var(--accent);fill-opacity:.45}
:where(#film) .bestandimg{fill:var(--line)}
:where(#film) .sieve{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
:where(#film) .choice{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:6 4}
:where(#film) .arrow{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .qbub{fill:var(--paper);stroke:var(--accent);stroke-width:1.6}
:where(#film) .qsym path{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
:where(#film) .qsym .fill{fill:var(--accent)}
:where(#film) .bubble{fill:var(--paper);stroke:var(--ink-soft);stroke-width:1.3}
:where(#film) .gear{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
:where(#film) .gearhole{fill:var(--paper);stroke:var(--ink);stroke-width:1.3}
:where(#film) .tabsym path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .tabsym .fill{fill:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}
.steps li{position:relative;padding-left:40px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.75rem;line-height:1;color:var(--accent)}
.steps strong{display:block;font-weight:600;margin-bottom:2px}
.steps p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-soft)}
.steps button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.75rem;color:var(--accent);margin-left:8px}
.steps button:hover{text-decoration:underline;text-underline-offset:3px}
.steps button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
:where(#film) .bigplay{position:absolute;left:50%;top:calc(50% - 30px);transform:translate(-50%,-50%);display:none;align-items:center;gap:18px;border:0;border-radius:48px;z-index:2;
  padding:14px 34px 14px 14px;background:var(--accent);color:var(--accent-ink);font:inherit;cursor:pointer;
  box-shadow:0 10px 30px rgba(18,18,18,.22),0 2px 6px rgba(18,18,18,.12),0 0 0 12px rgba(255,255,255,.95),0 0 0 13px var(--line);
  transition:transform .2s var(--ease)}
:where(#film) .bigplay:hover{transform:translate(-50%,-50%) scale(1.04)}
:where(#film) .bigplay:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.player.fresh .bigplay{display:flex}
.player.fresh .svgwrap::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 52% at 50% 50%, rgba(255,255,255,.88), rgba(255,255,255,.55) 60%, rgba(255,255,255,.4));pointer-events:none}
.player.fresh .svgwrap{position:relative}
.player:fullscreen .bigplay,.player.pseudo-full .bigplay{top:50%}
:where(#film) .bp-i{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--accent-ink);color:var(--accent)}
:where(#film) .bp-i svg{width:26px;height:26px;margin-left:4px}
:where(#film) .bp-l{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left}
:where(#film) .bp-t{font-family:var(--sans);font-size:1.5rem;font-weight:600}
:where(#film) .bp-s{font-family:var(--mono);font-size:.875rem;letter-spacing:.04em;opacity:.9}
:where(#film) .gate{display:none}
@media (max-width:700px){.player:not(.pseudo-full):not(:fullscreen) .ui{display:none}.player:not(.pseudo-full):not(:fullscreen) .bigplay{display:none}.player:not(.pseudo-full):not(:fullscreen) .gate{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;background:rgba(255,255,255,.86)}}
:where(#film) .gate-h{margin:0;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink)}
:where(#film) .gate-t{margin:0;max-width:30ch;font-size:.8125rem;line-height:1.4;color:var(--ink-soft)}
:where(#film) .gate-b{margin-top:6px;border:0;border-radius:20px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:.875rem;font-weight:600;padding:9px 16px;cursor:pointer;box-shadow:var(--lift)}
:where(#film) .gate-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:where(#film) .pslot{fill:none;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:4 4}
:where(#film) .pskill{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.3}
:where(#film) .pon .pskill{stroke:var(--ink);stroke-width:1.6}
:where(#film) .pglow{fill:none}
:where(#film) .pon .pglow{fill:var(--accent-glow)}
:where(#film) .plamp{fill:var(--lamp)}
:where(#film) .pon .plamp{fill:var(--accent)}
:where(#film) .ptext{font-family:var(--mono);font-size:14.5px;fill:var(--ink-soft)}
:where(#film) .pon .ptext{fill:var(--ink)}
:where(#film) .pflash{fill:var(--accent-glow);stroke:var(--accent);stroke-width:2}
:where(#film) .doclabr{fill:var(--paper);stroke:var(--ink-faint);stroke-width:1.2}
:where(#film) .doclabt{font-family:var(--mono);font-size:15px;fill:var(--ink)}
:where(#film) .dflash{fill:var(--accent);pointer-events:none}
:where(#film) .halo{fill:none;stroke:var(--accent);stroke-width:3}
:where(#film) .conf.c0{fill:var(--accent)}
:where(#film) .conf.c1{fill:var(--ink)}
:where(#film) .conf.c2{fill:#1E7B4C}
:where(#film) .conf.c3{fill:var(--lamp)}
:where(#film) .chapters{position:absolute;inset:0;pointer-events:none}
:where(#film) .chap{position:absolute;top:50%;width:14px !important;height:14px !important;padding:0;transform:translate(-50%,-50%);
  border-radius:50% !important;border:2px solid var(--line-strong) !important;background:var(--paper);cursor:pointer;pointer-events:auto;box-shadow:none}
:where(#film) .chap.done{border-color:var(--accent) !important;background:var(--accent)}
:where(#film) .chap.cur{box-shadow:0 0 0 4px var(--accent-glow)}
:where(#film) .chap::after{content:attr(data-label);position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.75rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 8px;
  opacity:0;pointer-events:none;transition:opacity .15s var(--ease)}
:where(#film) .chap:hover::after,:where(#film) .chap:focus-visible::after{opacity:1}
:where(#film) .chap:first-child::after{left:0;transform:none}
:where(#film) .steptext{font-family:var(--sans);font-size:25px;font-weight:500;letter-spacing:-.01em;fill:var(--ink)}
:where(#film) .doclabr{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
:where(#film) .actbg{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.5}
:where(#film) .actg{fill:var(--ink-faint)}
:where(#film) .acton{fill:var(--accent)}
:where(#film) .actgon{fill:var(--paper)}
:where(#film) .actlab{font-family:var(--mono);font-size:16px;fill:var(--ink)}
:where(#film) .frow{stroke:var(--line);stroke-width:.8}
:where(#film) .fnum{font-family:var(--mono);font-size:7.6px;fill:var(--ink-faint)}
:where(#film) .flab{font-family:var(--mono);font-size:9px;fill:var(--ink-soft)}
:where(#film) .gnum{font-family:var(--mono);font-size:9px;font-weight:400;fill:var(--accent)}
:where(#film) .gq{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--accent)}
:where(#film) .minipage{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
:where(#film) .okc path{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:where(#film) .newrow{fill:var(--accent-glow);stroke:var(--accent);stroke-width:1.2}
:where(#film) .scanband{fill:var(--accent-glow);stroke:var(--accent);stroke-width:1}
:where(#film) .scanlink{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;opacity:.7}
:where(#film) .revband{fill:rgba(19,19,19,.07);stroke:var(--line-strong);stroke-width:1}
:where(#film) .revlink{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
:where(#film) .revtrack{fill:none;stroke:var(--line);stroke-width:3}
:where(#film) .revarc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
:where(#film) .cardbg{fill:var(--paper)}
:where(#film) .introtext{font-family:var(--sans);font-size:64px;font-weight:600;letter-spacing:-.02em;fill:var(--ink);dominant-baseline:central}
:where(#film) .sndspk{fill:var(--accent)}
:where(#film) .sndwave{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round}
:where(#film) .sndhint{font-family:var(--mono);font-size:22px;letter-spacing:.14em;fill:var(--ink-soft);dominant-baseline:central}
:where(#film) .introsub{font-family:var(--mono);font-size:22px;letter-spacing:.14em;fill:var(--ink-faint);dominant-baseline:central}
:where(#film) .credittext{font-family:var(--sans);font-size:56px;font-weight:600;letter-spacing:-.01em;fill:var(--ink)}
:where(#film) .creditcopy{font-family:var(--mono);font-size:18px;letter-spacing:.08em;fill:var(--ink-faint)}
:where(#film) .markcircle{fill:var(--accent)}
:where(#film) .marksquare{fill:var(--ink)}
:where(#film) .sidelab{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
:where(#film) .befstrike{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:1 1}
:where(#film) .micw{fill:var(--paper)}
:where(#film) .micl{fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round}
:where(#film) .spkB{fill:var(--ink-soft)}
:where(#film) .inlab{font-family:var(--mono);font-size:14px;fill:var(--ink-soft)}
:where(#film) .cbox{fill:var(--paper);stroke:var(--accent);stroke-width:1.6}
:where(#film) .ctext{font-family:var(--sans);font-size:18px;font-weight:500;fill:var(--ink)}
:where(#film) .clead{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
:where(#film) .cadot{fill:var(--accent)}
@media (max-width:560px){:where(#film) .ui{gap:8px;padding:10px 12px}:where(#film) .ptime{display:none}}
:where(#film) .tray{fill:var(--paper);stroke:var(--line);stroke-width:1.6}
:where(#film) .traylink{stroke:var(--accent);stroke-width:1.6}
:where(#film) .traydot{fill:var(--accent)}
:where(#film) .trayhead{font-family:var(--mono);font-size:13px;letter-spacing:.1em;fill:var(--ink-faint)}
:where(#film) .tcard{fill:var(--paper);stroke:var(--ink-soft);stroke-width:1.4}
:where(#film) .tcardon{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:2}
:where(#film) .tarrow{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}