:root{--paper:#f3eee3;--paper2:#ebe4d4;--ink:#16130f;--ink2:#221e19;--mute:#6b6255;--ox:#8f1d14;--ox2:#e0675a;--rule:#cfc4ae;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--serif);text-rendering:optimizeLegibility}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:20}
a{color:var(--ox)}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.lab :focus-visible,.finale :focus-visible{outline-color:var(--ox2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.running,.no,small,.toc,.pp-cap,.meter span,output,.field,.eg,.how,button,dt,.tag,.legend,.space-hud,.zoom-hud,.gauges,.pdx-meter span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.toolbar{position:fixed;right:.8rem;bottom:.8rem;z-index:10;display:flex;gap:.4rem}
.toolbar button{background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:.45rem .7rem;font-size:.65rem;box-shadow:2px 2px 0 var(--ink)}
.toolbar button[aria-pressed=true]{background:var(--ox);color:var(--paper);border-color:var(--ox)}
.masthead{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem 1rem;text-align:center;border-bottom:3px double var(--ink)}
.running{color:var(--mute);border-bottom:1px solid var(--rule);padding-bottom:.6rem}
h1{font-weight:400;font-size:clamp(2.1rem,6vw,4.6rem);line-height:1.02;margin:1.4rem auto .4rem;max-width:16ch;letter-spacing:-.02em}
h1 em{color:var(--ox)}
.sub{font-style:italic;color:var(--mute);margin:0}
.hero{margin:1.2rem auto .4rem;max-width:960px}
.hero canvas{width:100%;height:min(52vw,400px);display:block;touch-action:pan-y;cursor:crosshair}
figcaption{font-size:.85rem;color:var(--mute);text-align:left;border-top:1px solid var(--rule);padding-top:.4rem}
figcaption .no{display:inline;margin-right:.5rem}
.lede{font-size:clamp(1.15rem,2.4vw,1.5rem);max-width:36ch;margin:1.2rem auto 1.2rem;font-style:italic}
.toc{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.2rem;padding:.8rem 0}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;display:inline-block;padding:.35rem 0}
.readme{font-size:.85rem;color:var(--mute);max-width:60ch;margin:.4rem auto 1rem}
.tag{display:inline-block;font-size:.6rem;border:1px dashed currentColor;padding:0 .35rem;color:var(--ox);margin-right:.3rem;vertical-align:.1em}
main{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.chap{max-width:68ch;margin:0 auto;padding:3.5rem 0;border-bottom:1px solid var(--rule)}
.chap.wide{max-width:1100px}
.intro{max-width:68ch}
h2{font-weight:400;font-size:clamp(1.6rem,3.5vw,2.3rem);line-height:1.15;margin:0 0 1.2rem}
.no{display:block;color:var(--ox);margin-bottom:.3rem}
h3{font-weight:600;font-size:1.1rem;margin:0 0 .4rem}
blockquote{margin:1.1rem 0;padding-left:1.1rem;border-left:3px solid var(--ox);font-style:italic;font-size:1.06em}
q{quotes:"“" "”";font-style:italic}
.tagged{font-size:.8rem;color:var(--mute)}
.chain{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);margin:2rem 0}
.chain li{padding:.8rem;border-top:3px solid var(--ink)}
.chain li+li{border-left:1px solid var(--rule)}
.chain b{display:block;font-weight:400;font-size:1.25rem}.chain li:last-child b{color:var(--ox)}
.chain span{font-size:.85rem;color:var(--mute)}
/* scrolly */
.scrolly{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;border-bottom:1px solid var(--rule);padding:2rem 0}
.sticky{position:sticky;top:0;height:100vh;margin:0;display:flex;align-items:center}
.sticky canvas{width:100%;height:min(78vh,640px);display:block}
.space-hud{clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden;position:absolute;left:0;top:calc(50% - min(39vh,320px));display:flex;gap:.8rem;align-items:baseline}
#space-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.space-hud .no{display:inline;margin:0}
#space-n{font-size:1rem;color:var(--ink)}
.steps{padding:30vh 0 40vh}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .4s}
.step.on{opacity:1}
.step>*{background:var(--paper)}
/* lab */
.lab{margin:3rem -1.5rem;padding:2.5rem 1.5rem;background:var(--ink);color:var(--paper)}
.lab-head{max-width:1100px;margin:0 auto 1.2rem;display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:end}
.lab-head h2{margin:0}.lab .no{color:var(--ox2)}
.note{color:#cfc6b4;font-size:.85rem;line-height:1.55;border:1px dashed #5a5246;padding:.7rem .9rem}
.note .tag,.lab .tag{color:var(--ox2)}
.note code{font-family:var(--mono);font-size:.8rem;color:var(--paper);background:#2c2721;padding:0 .3rem;white-space:nowrap}
.lab-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.45fr 1fr;gap:1.5rem;align-items:start}
.pp-wrap{position:relative;background:var(--paper);aspect-ratio:1/1}
#pp{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#pp:active{cursor:grabbing}
.pp-cap{position:absolute;left:3.2rem;top:.6rem;color:var(--ox);background:var(--paper);padding:.15rem .3rem}
.panel{display:flex;flex-direction:column;gap:.9rem}
#signview{width:100%;aspect-ratio:16/9;background:var(--paper);display:block}
.field{display:flex;flex-direction:column;gap:.4rem;color:#bfb5a2}
select,input[type=range]{width:100%;accent-color:var(--ox2)}
select{font:1rem var(--serif);padding:.45rem;background:var(--ink2);color:var(--paper);border:1px solid #4a433a}
.meters{display:grid;gap:.5rem}
.meter{display:grid;grid-template-columns:1fr 3.2rem;gap:.15rem .6rem;align-items:center}
.meter span{grid-column:1/-1;color:#bfb5a2;text-transform:none;letter-spacing:0}
.meter i,.field i{font-family:var(--serif);font-size:1rem}
output{text-align:right;color:var(--paper)}
.bar{height:.55rem;background:#2c2721;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--paper)}
#mP i{background:var(--ox2)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.krange{position:relative;display:block;padding-bottom:1.1rem}
.crit{position:absolute;left:40%;right:0;bottom:0;border-top:1px solid var(--ox2);color:var(--ox2);font-size:.6rem;padding-top:.1rem;text-align:center}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
button{cursor:pointer;padding:.7rem .8rem;background:var(--paper);color:var(--ink);border:1px solid var(--paper);transition:background .15s,color .15s}
button[aria-pressed=true]{background:var(--ox2);border-color:var(--ox2)}
button.ghost{background:transparent;color:var(--paper)}
button:disabled{opacity:.4;cursor:not-allowed}
.hint{font-size:.9rem;color:#cfc6b4;margin:0;min-height:4.5em}
.legend{max-width:1100px;margin:1rem auto 0;color:#bfb5a2;text-transform:none;letter-spacing:0;font-size:.75rem}
.sw{display:inline-block;width:1.4rem;height:.6rem;vertical-align:middle;margin-right:.2rem}
.sw-sep{border-top:2px dashed var(--ox2)}.sw-zone{background:repeating-linear-gradient(45deg,#8f1d14 0 2px,transparent 2px 5px)}.sw-null{border-top:1px solid #bfb5a2}
/* probes */
.chap button,.probe button{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.ghost-ink{background:transparent!important;color:var(--ink)!important}
.probes{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 2rem;margin-top:2rem}
.probe{border-top:3px solid var(--ink);padding-top:.8rem;font-size:.95rem;display:flex;flex-direction:column;gap:.6rem}
.probe header .no{margin:0}
.probe blockquote{font-size:.98rem;margin:.2rem 0}
.probe .btns.two{grid-template-columns:1fr 1fr}
.out{font-family:var(--mono);font-size:.78rem;min-height:3.2em;margin:0}
.zoom-wrap{position:relative}
#zoom{width:100%;aspect-ratio:3/2;display:block;background:var(--ink);cursor:zoom-in}
.zoom-hud{position:absolute;left:0;right:0;bottom:0;background:rgba(22,19,15,.85);color:var(--paper);padding:.3rem .5rem;font-size:.62rem}
.seg{display:flex}.seg button{flex:1;background:transparent!important;color:var(--ink)!important;border:1px solid var(--ink)}
.seg button[aria-checked=true]{background:var(--ink)!important;color:var(--paper)!important}
.contemplate{position:relative;aspect-ratio:3/2;background:var(--paper2);overflow:hidden}
#psy{position:absolute;inset:0;width:100%;height:100%}
.square{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;background:var(--ink);transform:translate(-50%,-50%);transition:transform 2s}
.contemplate.on .square{transform:translate(-50%,-50%) scale(1.12) rotate(.6deg)}
.gauges{display:flex;gap:.8rem;text-transform:none;letter-spacing:0}
.gauges span{flex:1}.gauges i{display:block;height:.4rem;background:var(--ox);width:0;margin-top:.2rem}
.pdx-q{font-size:1.2rem;margin:.2rem 0}
.pdx-meter{position:relative;height:1.4rem;background:var(--paper2)}
.pdx-meter i{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--ink);transition:width .6s}
.pdx-meter span{position:absolute;right:.4rem;top:.2rem;color:var(--mute)}
.wideprobe{margin-top:3rem}
.net-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5rem;align-items:start;margin-top:1rem}
#net{width:100%;aspect-ratio:16/8.5;background:var(--paper2);display:block;cursor:pointer}
#curve{width:100%;height:220px;display:block;background:var(--paper2)}
.small{font-size:.85rem}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cases article{background:var(--paper2);padding:1.2rem;display:flex;flex-direction:column}
.cases blockquote{font-size:.95rem}
.eg{color:var(--mute);text-transform:none;letter-spacing:0}
.how{text-transform:none;letter-spacing:0;font-size:.78rem;flex:1}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
/* finale */
.finale{height:340vh;position:relative;background:var(--ink);color:var(--paper);margin:0 -1.5rem}
.fin-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#fin{position:absolute;inset:0;width:100%;height:100%}
.fin-text{position:absolute;left:1.5rem;top:1.2rem;max-width:30ch;font-size:.95rem}
.fin-text .no{color:var(--ox2)}
.fin-end{position:absolute;left:50%;top:31vh;transform:translateX(-50%);width:min(92%,640px);text-align:center;opacity:0;pointer-events:none;transition:opacity .8s}
.fin-end.on{opacity:1;pointer-events:auto}
.coda{border:0;padding:0;margin:0 0 .8rem;font-size:clamp(1.35rem,3.3vw,2.25rem);line-height:1.35;font-style:italic;color:var(--paper)}
.coda span{display:inline-block;opacity:0;will-change:opacity,transform}
.coda-src{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ox2);margin:0 0 1.4rem}
.fin-end #b-resil,.fin-end .tagged,.coda-src{opacity:0;transition:opacity .8s}
.fin-end.done #b-resil,.fin-end.done .tagged,.fin-end.done .coda-src{opacity:1}
.fin-end.res .coda{opacity:.25}
.finale{height:460vh}
dl.method dd code{font-family:var(--mono);font-size:.8em;background:var(--paper2);padding:0 .25rem}
button.inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tagged.light{color:#bfb5a2}.tagged.light .tag{color:var(--ox2)}
dl{display:grid;grid-template-columns:12rem 1fr;gap:.6rem 1.2rem}
dt{color:var(--ox);padding-top:.25rem}dd{margin:0}
footer{max-width:68ch;margin:0 auto;padding:2rem 1.5rem 5rem;font-size:.85rem;color:var(--mute)}
@media (hover:hover){
  .toc a:hover{border-color:var(--ox)}
  .lab button:not(:disabled):hover{background:var(--ox2);border-color:var(--ox2);color:var(--ink)}
  .chap button:not(:disabled):hover,.probe button:not(:disabled):hover{background:var(--ox);border-color:var(--ox)}
  .toolbar button:hover{background:var(--ink);color:var(--paper)}
}
@media (max-width:820px){
  body{font-size:17px}
  .lab-head,.lab-grid,.probes,.cases,.twin,.net-grid{grid-template-columns:1fr}
  .chain{grid-template-columns:1fr 1fr}.chain li:nth-child(3){border-left:0}
  dl{grid-template-columns:1fr}dt{padding:0}
  .scrolly{grid-template-columns:1fr;gap:0}
  .sticky{height:62vh;top:0;z-index:1;background:var(--paper)}
  .sticky canvas{height:56vh}
  .space-hud{top:.6rem}
  .steps{padding:10vh 0 30vh;position:relative;z-index:2}
  .step{min-height:80vh}
  .step>*{box-shadow:0 0 0 .8rem var(--paper)}
  #signview{display:none}
  .toolbar{right:.5rem;bottom:.5rem;left:auto}.toolbar button{padding:.35rem .5rem;font-size:.58rem;box-shadow:1px 1px 0 var(--ink)}
  .pp-cap{left:.5rem}
  .pp-wrap{position:sticky;top:0;z-index:3;width:min(100%,52vh);margin:0 auto;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  #net{aspect-ratio:4/5}
  #curve{height:190px}
  .fin-end{top:27vh}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.gauges span::after{content:attr(data-v);font-family:var(--mono);font-size:.65rem;color:var(--mute);float:right;margin-top:-1rem}

.own{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 .6rem}
.own-row{display:flex;gap:.4rem}
.own input{flex:1;min-width:0;font:1rem var(--serif);background:transparent;color:inherit;border:1px solid #6b6255;padding:.4rem .5rem}
.own input:focus{outline:2px solid var(--ox2);outline-offset:1px}
.own .tagged{margin:0}
.mapfig{max-width:1100px;margin:1.5rem auto 0}
#mmap{width:100%;aspect-ratio:16/9;background:var(--paper);display:block}
.mapfig figcaption{font-size:.85rem;margin-top:.5rem;color:var(--paper);opacity:.9}
.mapfig .no{color:var(--ox2);margin-right:.3em}
@media (max-width:700px){#mmap{aspect-ratio:1/1}}
#paraSel,#paraSrc{width:100%;font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);padding:.35rem .5rem;margin:.2rem 0}
#paraSrc{resize:vertical;font-style:italic}
#paraForm{margin:.3rem 0 .5rem}
#paraMap{width:100%;aspect-ratio:4/3;background:var(--paper2);display:block}
.para-list{margin:.5rem 0;padding-left:1.4rem;font-size:.85rem}
.para-list b{font-family:ui-monospace,Menlo,monospace;color:var(--ox)}
.para-bars{display:grid;gap:3px;font:11px ui-monospace,Menlo,monospace;margin:.4rem 0}
.para-bars div{display:grid;grid-template-columns:7.5em 1fr 3em;align-items:center;gap:.4em}
.para-bars i{display:block;height:9px;background:var(--rule)}.para-bars i>i{background:var(--ink)}.para-bars .you i>i{background:var(--ox)}
/* narration player */
.listen{font-size:.85rem;color:var(--mute);max-width:60ch;margin:.2rem auto 1rem}
.listen button{background:var(--ink);color:var(--paper);border:0;padding:.5rem .8rem;cursor:pointer;margin:0 .3rem .3rem 0}
.listen button:hover{background:var(--ox)}
.nar{position:fixed;z-index:11;right:.55rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;opacity:0;pointer-events:none;transition:opacity .4s}
.nar.ready{opacity:1;pointer-events:auto}
.nar button{background:var(--paper);color:var(--ink);border:1px solid var(--ink);cursor:pointer;padding:0}
.nar-play{width:2.1rem;height:2.1rem;border-radius:50%;font-size:.75rem!important;letter-spacing:0!important;box-shadow:2px 2px 0 var(--ink)}
.nar.playing .nar-play{background:var(--ox);color:var(--paper);border-color:var(--ox)}
.nar-track{position:relative;width:2.6rem;height:60vh;cursor:pointer;touch-action:none;background:linear-gradient(var(--rule),var(--rule)) center/1px 100% no-repeat}
.nar-track canvas{width:100%;height:100%;display:block}
.nar-tip{position:absolute;right:2.6rem;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font:.65rem var(--mono);letter-spacing:.05em;padding:.2rem .45rem;pointer-events:none}
.nar-time{font:.62rem var(--mono);color:var(--mute)}
.nar .ico{display:none}.nar-fold{display:none}
.nar-tip{border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.nar-opt{font-size:.6rem!important;padding:.2rem .3rem!important;width:3.4rem;min-height:1.6rem}
.nar-opt[aria-pressed=true]{background:var(--ink)!important;color:var(--paper)!important}
.nar-here{position:absolute;right:2.8rem;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ox)!important;color:var(--paper)!important;border-color:var(--ox)!important;padding:.45rem .7rem!important;font-size:.62rem!important;box-shadow:2px 2px 0 var(--ink)}
.nar-caps{position:fixed;z-index:11;left:50%;bottom:4.2rem;transform:translateX(-50%);max-width:min(46rem,86vw);background:rgba(22,19,15,.88);color:rgba(243,238,227,.62);padding:.5rem .9rem;font-size:1rem;line-height:1.45;text-align:center}
.nar-caps span.on{color:var(--paper)}
.w{transition:color .25s,background-color .25s}
.reading .w.said{color:var(--ox)}
.lab .reading .w.said,.finale .reading .w.said{color:var(--ox2)}
blockquote.reading{border-left-color:var(--ink)}
@media (max-width:820px),(pointer:coarse){
  .nar{right:max(.2rem,env(safe-area-inset-right));top:52%;gap:.3rem;padding:.35rem .15rem;background:rgba(243,238,227,.94);border:1px solid var(--rule);border-radius:1.2rem;overscroll-behavior:contain;touch-action:none;-webkit-user-select:none;user-select:none}
  .nar-play{width:2rem;height:2rem;box-shadow:1px 1px 0 var(--ink)}
  .nar-track{width:2rem;height:46vh;height:46svh;touch-action:none;overscroll-behavior:contain}
  .nar-tip{right:2.5rem;font-size:.7rem;padding:.3rem .5rem;box-shadow:2px 2px 0 var(--ox)}
  .nar-time{font-size:.55rem}
  .nar-opt{width:2rem;height:2rem;font-size:.66rem!important;letter-spacing:0!important;padding:0!important}
  .nar .lbl{display:none}.nar .ico{display:inline;font-size:1rem;line-height:1}
  .nar-fold{display:block;width:2rem;height:2rem;border-radius:.8rem!important;border-color:var(--rule)!important;color:var(--mute)!important;font-size:1rem!important;line-height:1}
  .nar.folded{background:transparent;border-color:transparent}
  .nar-play,.nar-opt,.nar-fold{position:relative}.nar-play::after,.nar-opt::after,.nar-fold::after{content:"";position:absolute;inset:-.4rem -.45rem}
  .nar-here{right:2.6rem}
  .nar.ready.folded .nar-track,.nar.ready.folded .nar-time,.nar.ready.folded .nar-opt{display:none}
  #ownForm,#ownWord{scroll-margin-top:56vh}
  body:has(.lab input:focus) .pp-wrap,body:has(#ownForm:focus-within) .pp-wrap{position:relative}
  body:has(.nar.ready:not(.folded)){padding-right:2.7rem}
  .nar-caps{bottom:1rem;max-width:calc(100vw - 4rem);left:calc(50% - 1.3rem);font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){.w,.nar{transition:none}}
@media (min-width:821px) and (pointer:fine){body:has(.nar.ready){padding-right:3.6rem}}
.probe .field{color:var(--mute)}
/* touch polish: no selection, callouts, tap flashes or double-tap zoom on interactives (page pinch-zoom stays on) */
button,canvas,select,label,[role=slider],.nar,.btns,.contemplate,#contemplate,.hero,.pp-wrap,.fin-sticky,.gauges{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button,select,a,label{touch-action:manipulation}
#b-psy,#nar-play{touch-action:none}
#mmap,#net,#paraMap,#fin{touch-action:manipulation}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
#b-psy{position:relative;overflow:hidden}
#b-psy::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ox2);transition:width .25s}
#b-psy.holding::after{width:100%;transition:width 6s linear}
@media (pointer:coarse){main button,main select,main input:not([type=range]),main textarea{min-height:44px}main input[type=range]{height:44px}}
@media (max-width:820px),(pointer:coarse){.nar-track::after{content:"";position:absolute;inset:0 -.45rem}}
/* Film: Watch Part 1 */
.film{max-width:960px;margin:2rem auto 1.5rem;text-align:left}
.film-h{font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 .6rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.film-h .no{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:#7a1f1f}
.film-len{font-size:1rem;color:#4a4540;font-style:italic}
.film-frame{position:relative;aspect-ratio:16/9;background:#f3eee3;border:1px solid #2b2724;box-shadow:0 10px 30px rgba(43,39,36,.18)}
.film-frame iframe{display:block;width:100%;height:100%;border:0}
.film-play{display:block;width:100%;height:100%;padding:0;border:0;background:#f3eee3;cursor:pointer;position:relative}
.film-play img{display:block;width:100%;height:100%;object-fit:contain}
.film-pbtn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(43,39,36,.85);box-shadow:0 4px 18px rgba(0,0,0,.3)}
.film-pbtn::after{content:"";position:absolute;left:34px;top:24px;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent #f3eee3}
.film-play:hover .film-pbtn{background:#7a1f1f}
.film-d{font-size:1.05rem;line-height:1.5;color:#3a3531;margin:.6rem 0 0}
@media (max-width:600px){.film{margin:1.25rem -1rem 1rem}.film-frame{border-left:0;border-right:0}.film-h,.film-d{padding:0 1rem}}
.film-play:focus-visible{outline:3px solid #7a1f1f;outline-offset:3px}
.film-pick{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem}
.film-b{font:inherit;font-size:1.05rem;padding:.55rem 1rem;min-height:44px;border:1px solid #2b2724;background:#f3eee3;color:#2b2724;cursor:pointer;border-radius:2px}
.film-b[aria-pressed="true"]{background:#2b2724;color:#f3eee3}
.film-b[aria-pressed="true"] .film-len{color:#e8dfcf}
.film-b:focus-visible{outline:3px solid #7a1f1f;outline-offset:2px}
@media (max-width:600px){.film-pick{padding:0 1rem}}