/* GriffLynn Review: Paper and Pen.
   Tokens and type from grifflynn-site/css/site.css. Day is paper and walnut ink with spruce; night is the same paper
   after dark with warm orange in place of green. Torn-paper clip shapes on cards, buttons and chips. */
:root {
  --ease-out: cubic-bezier(.22,.61,.36,1); --ease-pen: cubic-bezier(.45,.05,.25,1); --d-tap: 180ms; --d-ui: 260ms;
  --paper: #F0EBDA; --paper-hi: #FBF6E6; --table: #E4DDC8;
  --ink: #2B2118; --ink-2: #5E5146; --link: #2A4B33; --spruce: #2F4D3A; --on-accent: #FBF6E6;
  --sun: #EFC86A; --laurel: #E9A79B; --dot: #B5473A;
  --line: #2b211833; --line-2: #2b211866; --shadow: #2a160840;
  --open: #9a6a00; --done: #2F4D3A;
  --stage: #0d0a07;
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --disp: Fraunces, Georgia, "Times New Roman", serif;
  --lab: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gut: clamp(16px, 4vw, 48px);
  --tear: polygon(1% 6%, 34% 0, 99% 4%, 100% 93%, 62% 100%, 0 96%);
  --tear2: polygon(0 3%, 58% 0, 100% 8%, 98% 100%, 41% 95%, 2% 100%);
  --tear-card: polygon(0 2%, 22% 0, 61% 3%, 100% 0, 99% 46%, 100% 97%, 70% 100%, 31% 97%, 1% 100%, 2% 52%);
  --tear-chip: polygon(0 8%, 96% 0, 100% 90%, 48% 100%, 3% 92%);
  --pen-r: 255px 18px 225px 16px/16px 225px 18px 255px;
  color-scheme: light;
}
/* Night: no green anywhere; warm orange carries links and actions. */
html[data-theme="night"] {
  color-scheme: dark;
  --paper: #1E1913; --paper-hi: #2B241D; --table: #15110D; --ink: #EFE8D6; --ink-2: #C2B6A3;
  --link: #E5A877; --spruce: #D4894F; --on-accent: #1E1913; --sun: #E4BE62; --laurel: #E09E92; --dot: #E06A5A;
  --line: #efe8d633; --line-2: #efe8d666; --shadow: #00000080; --open: #E4BE62; --done: #E5A877;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="day"]) {
    color-scheme: dark;
    --paper: #1E1913; --paper-hi: #2B241D; --table: #15110D; --ink: #EFE8D6; --ink-2: #C2B6A3;
    --link: #E5A877; --spruce: #D4894F; --on-accent: #1E1913; --sun: #E4BE62; --laurel: #E09E92; --dot: #E06A5A;
    --line: #efe8d633; --line-2: #efe8d666; --shadow: #00000080; --open: #E4BE62; --done: #E5A877;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--link); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--disp); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--link); }
p + p { margin-top: .8em; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px dashed var(--ink); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--paper-hi); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .86em; }
.quiet { color: var(--ink-2); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.pad { padding: 24px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px var(--gut); border-bottom: 1.5px solid var(--line); flex-wrap: wrap; }
.wm { font: 650 22px/1 var(--disp); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wm i { font-style: normal; color: var(--dot); }
.wm span { font: 700 13px/1 var(--lab); letter-spacing: .09em; text-transform: uppercase; color: var(--link); margin-left: 4px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 15px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--ink-2); font-weight: 400; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink-2); }
.who { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.who form { margin: 0; }
.theme-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.theme-btn:hover { color: var(--link); }
.theme-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .moon { display: none; }
html[data-theme="night"] .theme-btn .sun { display: none; }
html[data-theme="night"] .theme-btn .moon { display: inline; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-btn .sun { display: none; } html:not([data-theme]) .theme-btn .moon { display: inline; } }

/* ---------- type pieces ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gut) 80px; }
.wrap.narrow { max-width: 720px; }
.kick { display: block; margin: 0 0 12px; font: 700 13px/1.2 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--link); }
.hero h1 { font-size: clamp(38px, 6vw, 64px); margin-bottom: 18px; }
.h2 { font-size: clamp(32px, 4vw, 50px); margin-bottom: 22px; }
.h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 560; margin-bottom: 10px; }
.h3 a { color: inherit; text-decoration: none; }
.h3 a:hover { color: var(--link); }
.lede { font-size: clamp(18px, 1.4vw, 20px); max-width: 38em; margin-bottom: 22px; }
.plink { font-weight: 700; color: var(--link); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100%/0 1.5px no-repeat; transition: background-size var(--d-ui) var(--ease-pen); }
.plink:hover, .plink:focus-visible { background-size: 100% 1.5px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 18px; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }

/* ---------- paper buttons: torn paper that lifts, a pen outline ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; margin: 8px 0 22px; }
.btn { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px 9px; border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: none; font: 700 15.5px/1 var(--lab); font-stretch: 92%; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform var(--d-tap) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi); clip-path: var(--tear); filter: drop-shadow(1px 2px 1px var(--shadow)); }
.btn::after { content: ""; position: absolute; inset: -1px 2px 2px -2px; z-index: -1; border: 1.5px solid var(--ink); border-radius: var(--pen-r); transform: rotate(-1deg); pointer-events: none; opacity: .85; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.pri { color: var(--on-accent); }
.btn.pri::before { background: var(--spruce); clip-path: var(--tear2); }
.btn.pri::after { display: none; }
.btn.ghost::before { background: transparent; filter: none; }
.btn.ghost::after { opacity: .35; }
.btn.danger { color: var(--dot); }
.btn.danger::after { border-color: var(--dot); }
.btn.sm { min-height: 36px; padding: 7px 13px 6px; font-size: 14px; }
.btn.icon { width: 42px; padding: 0; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn[aria-pressed="true"]::before { background: var(--ink); }
.btn[aria-pressed="true"] { color: var(--paper); }
kbd { font: 600 11px/1 var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 3px 5px; opacity: .65; }

/* ---------- chips: torn scraps ---------- */
.chip { position: relative; z-index: 0; display: inline-block; padding: 6px 11px 5px; font: 700 12.5px/1.1 var(--lab); font-stretch: 92%; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi); clip-path: var(--tear-chip); }
.chip.sun::before { background: var(--sun); } .chip.sun { color: #2B2118; }
.chip.laurel::before { background: var(--laurel); } .chip.laurel { color: #2B2118; }
.chip.plain::before { background: var(--table); }
.chip.open::before { background: var(--sun); } .chip.open { color: #2B2118; }
.chip.done::before { background: var(--spruce); } .chip.done { color: var(--on-accent); }

/* ---------- paper cards ---------- */
.card { position: relative; z-index: 0; isolation: isolate; padding: 24px 24px 22px; filter: drop-shadow(2px 4px 3px var(--shadow)); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--paper-hi); clip-path: var(--tear-card); }
.card::after { content: ""; position: absolute; inset: 7px 9px 8px 7px; z-index: -1; border: 1.3px solid var(--ink); border-radius: 6px 90px 8px 70px/70px 7px 90px 6px; transform: rotate(-.5deg); pointer-events: none; opacity: .5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 26px; }
.two { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.items { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 16px; }
.item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 22px; }
.item-a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 19px; }
.item-a:hover b { color: var(--link); }
.studio-only { margin-top: 26px; }
.studio-only summary { cursor: pointer; font-weight: 700; }
.created { margin-bottom: 26px; }
.copy-row { display: flex; gap: 8px; margin-top: 10px; }
.copy-row input { flex: 1; min-width: 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; font-weight: 700; font-size: 15px; }
.form label.inline { display: flex; gap: 8px; align-items: center; font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
legend { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]), textarea, select { width: 100%; padding: 10px 12px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 4px 10px 5px 9px/9px 4px 10px 5px; font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .8; }
textarea { resize: vertical; min-height: 84px; line-height: 1.45; display: block; }
input[type=file] { font-weight: 400; font-size: 14px; }

/* tables */
.links { width: 100%; border-collapse: collapse; font-size: 15px; }
.links th { text-align: left; font: 700 12px/1.2 var(--lab); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0 8px 8px 0; }
.links td { border-top: 1px solid var(--line); padding: 10px 8px 10px 0; vertical-align: top; }
.links tr.revoked td, .links tr.expired td { color: var(--ink-2); }
@media (max-width: 640px) {
  .links thead { display: none; }
  .links tr { display: grid; padding: 10px 0; border-top: 1px solid var(--line); }
  .links td { border: 0; padding: 2px 0; }
}

/* segmented control */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1.5px solid var(--line-2); border-radius: 6px 12px 7px 11px/11px 6px 12px 7px; }
.seg button { appearance: none; flex: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-2); padding: 0 11px; min-height: 34px; font: 700 13.5px/1 var(--lab); cursor: pointer; white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* dialogs */
.veil { position: fixed; inset: 0; background: #1a100899; display: grid; place-items: center; z-index: 50; padding: 16px; }
.dialog { width: min(440px, 100%); display: grid; gap: 12px; margin: 0; }

/* ---------- review screens: three panes ---------- */
body.player { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body.player main { flex: 1; min-height: 0; display: flex; }
.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 380px; }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.pane-h { display: flex; align-items: center; min-height: 46px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.pane-t { font: 700 12.5px/1 var(--lab); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.films { border-right: 1.5px solid var(--line); background: var(--table); overflow-y: auto; }
.scroll { padding: 10px 0 20px; }
.films .studio-only { margin: 18px 10px 0; padding: 18px; }

/* versions as a pen rail, newest at the top */
.tline { list-style: none; margin: 0; padding: 0; }
.tline li { position: relative; }
.tline li::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1.5px; background: var(--line-2); }
.tline li:first-child::before { top: 50%; } .tline li:last-child::before { bottom: 50%; } .tline li:only-child::before { display: none; }
.tl-row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 44px; padding: 9px 10px 9px 46px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.tl-row:hover { color: var(--ink); background: var(--paper); }
.tl-row .node { position: absolute; left: 20px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--table); border: 1.5px solid var(--ink-2); }
.tline li.sel .tl-row { color: var(--ink); background: var(--paper-hi); }
.tline li.sel .node { background: var(--spruce); border-color: var(--spruce); }
.tl-row .vl { font: 700 14.5px/1.2 var(--lab); color: var(--ink); }
.tl-row .latest { font: 700 10.5px/1 var(--lab); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.tl-row .vlabel { flex-basis: 100%; }
.tl-row .rel { flex-basis: 100%; font-size: 12.5px; }

/* centre */
.centre { overflow-y: auto; padding: 14px 18px 30px; gap: 12px; }
.titlebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.titlebar h1 { font-size: clamp(24px, 2.4vw, 32px); }
.tag { font: 700 14px/1 var(--lab); color: var(--ink-2); }
.approve-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.approve-bar form { margin: 0; }
.stage { position: relative; background: var(--stage); aspect-ratio: 16 / 9; max-height: 62vh; width: 100%; clip-path: polygon(0 1%, 30% 0, 70% .6%, 100% 0, 99.7% 99%, 60% 100%, 25% 99.4%, .3% 100%); }
.stage video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.loading, .fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #EFE8D6; text-align: center; padding: 20px; background: #0d0a07cc; }
.spin { width: 26px; height: 26px; border: 2.5px solid #efe8d655; border-top-color: #EFE8D6; border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } .btn { transition: none; } }
.ring { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2.5px solid var(--sun); border-radius: 50%; box-shadow: 0 0 0 2px #0008; pointer-events: none; }
.tl-wrap { padding: 4px 0; }
.tl { position: relative; height: 34px; cursor: pointer; touch-action: none; }
.tl .track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.tl .played { height: 100%; width: 0; background: var(--spruce); }
.tl .head { position: absolute; top: 6px; width: 3px; height: 22px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; pointer-events: none; }
.tl .sel { position: absolute; top: 10px; height: 14px; background: color-mix(in srgb, var(--sun) 55%, transparent); border-radius: 3px; pointer-events: none; }
#marks .dot { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--paper); background: var(--sun); cursor: pointer; }
#marks .dot.done { background: var(--spruce); }
#marks .bar { position: absolute; top: 24px; height: 4px; background: var(--sun); border-radius: 2px; opacity: .8; }
#marks .bar.done { background: var(--spruce); }
#marks .sel-note { box-shadow: 0 0 0 2.5px var(--ink); }
.tip { position: absolute; bottom: 38px; transform: translateX(-50%); max-width: 300px; padding: 6px 9px; background: var(--ink); color: var(--paper); font-size: 13px; white-space: pre-wrap; border-radius: 4px; pointer-events: none; z-index: 3; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.time { font-size: 15px; margin-left: 4px; }
.vol { width: 90px; accent-color: var(--spruce); }
.act { display: grid; gap: 10px; }
.act .line { display: flex; flex-wrap: wrap; gap: 10px; }
.stretch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hint { color: var(--ink-2); font-size: 14.5px; max-width: 70ch; }
.composer { display: grid; gap: 10px; padding: 16px; background: var(--paper-hi); border: 1.5px solid var(--line-2); border-radius: 6px 14px 8px 12px/12px 6px 14px 8px; }
.composer .ch { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.composer .as { margin-left: auto; color: var(--ink-2); font-size: 14px; }
.changes { padding-top: 12px; border-top: 1.5px solid var(--line); }
.changes h2 { font-size: 21px; margin-bottom: 6px; }
.changes ul { margin: 6px 0 0; padding-left: 1.2em; }
.ch-note { font-style: italic; color: var(--ink-2); }

/* page and site items */
.frame-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.frame-bar .url { overflow-wrap: anywhere; color: var(--ink-2); }
.frame-wrap { flex: 1; min-height: 420px; width: 100%; margin: 0 auto; background: #fff; border: 1.5px solid var(--line-2); display: flex; }
.frame-wrap iframe { flex: 1; width: 100%; min-height: 420px; border: 0; background: #fff; }
.frame-wrap.refused { opacity: .35; }
.frame-msg { padding: 12px 14px; background: color-mix(in srgb, var(--sun) 30%, var(--paper-hi)); border-left: 4px solid var(--sun); font-size: 15px; }

/* right: notes */
.notes { border-left: 1.5px solid var(--line); background: var(--paper); }
.notes-h { display: grid; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.notes-h h2 { font-size: 22px; }
.gnote { display: grid; gap: 8px; }
.gn-l { font-weight: 700; font-size: 15px; }
.gn-msg { font-size: 14px; color: var(--ink-2); min-height: 1em; }
.list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 40px; display: grid; gap: 10px; align-content: start; }
.note { padding: 12px 14px; background: var(--paper-hi); border: 1.5px solid transparent; border-radius: 4px 12px 6px 10px/10px 4px 12px 6px; cursor: pointer; }
.note:hover { border-color: var(--line-2); }
.note.selected { border-color: var(--ink); }
.note.now { box-shadow: inset 4px 0 0 var(--sun); }
.note.resolved .body { color: var(--ink-2); }
.nh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nh .by { font-weight: 700; }
.nh .chip { margin-left: auto; }
.tc { appearance: none; border: 0; background: var(--table); color: var(--ink); padding: 4px 8px; border-radius: 4px; font: 700 13px/1 var(--lab); cursor: pointer; }
.tc.gen { cursor: default; color: var(--ink-2); }
.note .body { margin: 8px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note .sub { color: var(--ink-2); font-size: 13px; }
.replies { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--line-2); display: grid; gap: 4px; }
.replies p { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.replies span { color: var(--ink-2); font-size: 12px; }
.acts { display: flex; gap: 6px; margin-top: 8px; }
.reply { display: flex; gap: 6px; margin-top: 8px; }
.reply input { flex: 1; min-width: 0; padding: 7px 10px !important; }
.empty { color: var(--ink-2); padding: 24px 4px; }
.err { color: var(--dot); }

/* ---------- small screens: stacked, the page scrolls ---------- */
@media (max-width: 1100px) { .shell { grid-template-columns: 210px minmax(0, 1fr) 330px; } }
@media (max-width: 860px) {
  body.player { height: auto; overflow: visible; display: block; }
  body.player main { display: block; }
  .shell { display: flex; flex-direction: column; }
  .films { border-right: 0; border-bottom: 1.5px solid var(--line); max-height: 40vh; }
  .centre { overflow: visible; padding: 12px var(--gut) 20px; }
  .notes { border-left: 0; border-top: 1.5px solid var(--line); }
  .list { overflow: visible; }
  .stage { max-height: none; }
  .vol { display: none; }
  .frame-wrap, .frame-wrap iframe { min-height: 70vh; }
}