@font-face{font-family:yuyu;src:url('../fonts/Yuyu-Regular.ttf') format('truetype');font-display:swap}
:root{--paper:#F2EBDD;--ink:#1A1A1A;--rule:color-mix(in srgb,var(--ink) 18%,transparent);--space:1.5rem;--small:.8rem;--border:1px;--control-radius:.3rem}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-monospace,monospace}main{max-width:1120px;margin:auto;padding:var(--space)}header{display:flex;justify-content:space-between;align-items:center;border-bottom:var(--border) solid var(--rule);padding-bottom:var(--space);font-size:var(--small)}header a{font-family:yuyu;font-size:1.65rem;text-decoration:none;color:inherit}.stage{width:100%;overflow:hidden}#film{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain}.transport{display:flex;gap:1rem;align-items:center;border-top:var(--border) solid var(--rule);padding-top:var(--space)}button{font:inherit;font-size:var(--small);border:var(--border) solid var(--rule);border-radius:var(--control-radius);background:transparent;color:inherit;padding:.65rem .85rem;cursor:pointer}button:hover,button[aria-current=true]{background:var(--ink);color:var(--paper)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}#scrub{flex:1;min-width:30px;accent-color:var(--ink)}output{font-size:var(--small);white-space:nowrap}.beats{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-top:var(--space)}.beats button{text-align:left;line-height:1.6;border:0;border-top:1px solid var(--rule);border-radius:0}footer{font-size:.7rem;line-height:1.7;margin-top:var(--space);padding-bottom:var(--space)}#reduced-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:var(--space) 0}#reduced-sheet[hidden]{display:none}#reduced-sheet figure{margin:0}#reduced-sheet canvas{width:100%;border:1px solid var(--rule)}#reduced-sheet figcaption{font-size:.7rem;padding:.5rem 0}body.embed main{padding:0;max-width:none}body.embed header,body.embed .transport,body.embed .beats,body.embed footer{display:none}@media(max-width:600px){main{padding:1rem}.transport{gap:.5rem;flex-wrap:wrap}.beats{grid-template-columns:repeat(3,1fr)}header{font-size:.65rem}#reduced-sheet{grid-template-columns:repeat(2,1fr)}.transport output{font-size:.65rem}}@media(prefers-reduced-motion:reduce){#film,.transport,.beats{display:none}#reduced-sheet{display:grid}}

/* site embed: the iframe is already sized to the canvas aspect, so the
   review viewport cap would letterbox it. scoped to .embed only. */
body.embed #film{max-height:none}
body.embed .stage{height:100%}