/* Related videos card for every simulation (Learn tab, or the controls panel when a tool has no Learn tab).
   Reads the tools' own tokens (--ink, --edge-soft, --input-wash ...), so light, dark and the in-app theme all follow. */
.sv{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem;padding:.875rem;border:1px solid var(--edge-soft,rgba(128,128,128,.28));border-radius:20px;background:var(--input-wash,rgba(128,128,128,.08));color:var(--ink,inherit);font-family:var(--font,inherit)}
.sv__title{margin:0;font:600 .9375rem/1.2 var(--font,inherit);letter-spacing:-.01em;color:var(--ink,inherit)}
.sv__player{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#101114}
.sv__face{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#101114;cursor:pointer;color:#fff}
.sv__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sv__face:hover img{transform:scale(1.04)}
.sv__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;border-radius:9999px;background:rgb(0 0 0/.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s ease,background .2s ease}
.sv__play svg{width:1.25rem;height:1.25rem;margin-left:.1rem;fill:currentColor}
.sv__face:hover .sv__play{transform:scale(1.08);background:rgb(0 0 0/.78)}
.sv__face:focus-visible,.sv__row:focus-visible,.sv__big:focus-visible{outline:2px solid var(--accent,#0071e3);outline-offset:2px}
.sv__len{position:absolute;right:.5rem;bottom:.5rem;padding:.125rem .375rem;border-radius:6px;background:rgb(0 0 0/.75);color:#fff;font:500 .6875rem/1.3 var(--font,inherit);font-variant-numeric:tabular-nums}
.sv__player iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.sv__meta{display:flex;align-items:flex-start;gap:.5rem}
.sv__now{flex:1;min-width:0;margin:0;font:500 .875rem/1.35 var(--font,inherit);color:var(--ink,inherit)}
.sv__big{flex:none;display:inline-flex;align-items:center;gap:.375rem;min-height:2rem;padding:0 .75rem;border:1px solid var(--edge-soft,rgba(128,128,128,.28));border-radius:9999px;background:transparent;color:var(--ink,inherit);font:500 .8125rem/1 var(--font,inherit);cursor:pointer;transition:background .15s ease}
.sv__big:hover{background:var(--hover,rgba(128,128,128,.14))}
.sv__big svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv__list{display:flex;flex-direction:column;gap:.25rem;margin:0;padding:.5rem 0 0;list-style:none;border-top:1px solid var(--edge-soft,rgba(128,128,128,.28))}
.sv__row{display:flex;align-items:center;gap:.625rem;width:100%;padding:.375rem;border:0;border-radius:12px;background:transparent;color:var(--ink,inherit);font:400 .8125rem/1.3 var(--font,inherit);text-align:left;cursor:pointer;transition:background .15s ease}
.sv__row:hover{background:var(--hover,rgba(128,128,128,.14))}
.sv__row[aria-current="true"]{background:var(--hover,rgba(128,128,128,.14));font-weight:600}
.sv__row img,.sv__row i{flex:none;width:4.75rem;aspect-ratio:16/9;border-radius:8px;object-fit:cover;background:#101114}
.sv__row span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* larger player */
.sv-dlg{margin:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;background:#000;color:#f5f5f7;font-family:var(--font,system-ui,sans-serif)}
.sv-dlg[open]{display:flex;flex-direction:column}
.sv-dlg::backdrop{background:#000}
.sv-dlg__bar{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:max(.5rem,env(safe-area-inset-top)) .75rem .5rem 1rem}
.sv-dlg__title{flex:1;min-width:0;margin:0;font:600 .9375rem/1.3 var(--font,system-ui,sans-serif);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-dlg__close{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:9999px;background:rgb(255 255 255/.14);color:#fff;cursor:pointer}
.sv-dlg__close:hover{background:rgb(255 255 255/.24)}
.sv-dlg__close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sv-dlg__close svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sv-dlg__stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 0 .5rem}
.sv-dlg__frame{width:min(100%,calc((100dvh - 8rem)*16/9));aspect-ratio:16/9;background:#000}
.sv-dlg__frame iframe{display:block;width:100%;height:100%;border:0}
.sv-dlg__foot{padding:.5rem 1rem max(1rem,env(safe-area-inset-bottom));text-align:center}
.sv-dlg__foot a{color:#a1a1a6;font-size:.875rem;font-weight:500;text-decoration:none}
.sv-dlg__foot a:hover{color:#fff}
@media (max-width:767px) and (orientation:portrait){.sv-dlg__stage{place-items:start center;padding:0}.sv-dlg__frame{width:100%}.sv-dlg__foot{text-align:left}}
@media (max-height:500px) and (orientation:landscape){.sv-dlg__bar{position:absolute;inset:0 0 auto 0;z-index:2;min-height:0;padding:.5rem .75rem;justify-content:flex-end;pointer-events:none}.sv-dlg__bar>*{pointer-events:auto}.sv-dlg__title{display:none}.sv-dlg__stage{padding:0}.sv-dlg__frame{width:min(100vw,calc(100dvh*16/9))}.sv-dlg__foot{display:none}}
@media (prefers-reduced-motion:reduce){.sv__face img,.sv__play{transition:none}.sv__face:hover img{transform:none}}