@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

#cutting-room{
  --bg:#EEF0F2;--panel:#FFFFFF;--ink:#1A1D21;--mute:#5F6670;--line:#D8DCE1;
  --accent:#3F6B5A;--accent-ink:#FFFFFF;--warn:#A85A17;--bad:#B3261E;--ok:#2B7550;--stage:#15171A;
  --soft:#F5F6F7;
  box-sizing:border-box;font:15px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);display:block;width:100%;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  #cutting-room:not([data-theme="light"]){
    --bg:#16181B;--panel:#1E2125;--ink:#E9ECEF;--mute:#9AA1AA;--line:#2F343A;
    --accent:#8FB8A4;--accent-ink:#11201A;--warn:#E3A15C;--bad:#EF8A80;--ok:#7CC49A;--stage:#0B0C0E;--soft:#25292E;color-scheme:dark;
  }
}
#cutting-room[data-theme="dark"]{
  --bg:#16181B;--panel:#1E2125;--ink:#E9ECEF;--mute:#9AA1AA;--line:#2F343A;
  --accent:#8FB8A4;--accent-ink:#11201A;--warn:#E3A15C;--bad:#EF8A80;--ok:#7CC49A;--stage:#0B0C0E;--soft:#25292E;color-scheme:dark;
}
#cutting-room *,#cutting-room *::before,#cutting-room *::after{box-sizing:inherit}

#cutting-room{margin:0;border-radius:10px;overflow:hidden}
#cutting-room button,#cutting-room input,#cutting-room textarea{font:inherit;color:inherit}
#cutting-room button{cursor:pointer}
#cutting-room :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#cutting-room .title-face{font-family:Newsreader,Georgia,"Times New Roman",serif;font-style:italic;font-weight:400}

#cutting-room .top{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;padding:22px 24px 6px}
#cutting-room .top h1{margin:0;font-size:32px;line-height:1.1}
#cutting-room .top p{margin:0;color:var(--mute);font-size:14px;max-width:60ch}
#cutting-room .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:14px 24px 32px;align-items:start}
#cutting-room .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-width:0}
#cutting-room .chd{padding:14px 16px 10px;display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
#cutting-room .chd h2{margin:0;font-size:22px;line-height:1.2;overflow-wrap:anywhere}
#cutting-room .chd .meta{color:var(--mute);font-size:13px;margin-top:3px}
#cutting-room .vtag{display:inline-block;font-weight:700;color:var(--accent);margin-right:6px}
#cutting-room .slotno{flex:none;font-size:12.5px;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:1px 9px}
#cutting-room .stage{background:var(--stage);position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
#cutting-room .stage video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
#cutting-room .stage .msg{color:#cfd3d8;font-size:14px;text-align:center;padding:16px}
#cutting-room .drop{width:100%;height:100%;border:2px dashed var(--line);background:var(--soft);color:var(--mute);border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px}
#cutting-room .drop b{color:var(--ink);font-size:16px}
#cutting-room .drop.over{border-color:var(--accent);color:var(--accent)}
#cutting-room .bar{padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
#cutting-room .bar select{font:inherit;font-size:13.5px;padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:100%}
#cutting-room .pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
#cutting-room .pill.ok{color:var(--ok)}#cutting-room .pill.warn{color:var(--warn)}#cutting-room .pill.bad{color:var(--bad)}#cutting-room .pill.wait{color:var(--mute)}
#cutting-room .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#cutting-room .verdict{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 16px 4px}
#cutting-room .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-weight:600;font-size:13.5px}
#cutting-room .btn:hover{border-color:var(--mute)}
#cutting-room .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#cutting-room .btn.ghost{background:none}
#cutting-room .btn:disabled{opacity:.5;cursor:not-allowed}
#cutting-room .v-ok[aria-pressed="true"]{background:var(--ok)!important;border-color:var(--ok)!important;color:var(--panel)!important}
#cutting-room .v-rw[aria-pressed="true"]{background:var(--warn)!important;border-color:var(--warn)!important;color:var(--panel)!important}
#cutting-room .v-no[aria-pressed="true"]{background:var(--bad)!important;border-color:var(--bad)!important;color:var(--panel)!important}
#cutting-room .who-list{padding:4px 16px 8px;display:flex;flex-wrap:wrap;gap:6px}
#cutting-room .vnote{margin:0 16px 8px;font-size:13.5px;color:var(--mute);white-space:pre-wrap;overflow-wrap:anywhere}
#cutting-room .fb{border-top:1px solid var(--line);display:flex;flex-direction:column}
#cutting-room .fb h3{margin:0;padding:10px 16px 4px;font-size:14px;display:flex;justify-content:space-between}
#cutting-room .fb h3 span{font-weight:400;color:var(--mute)}
#cutting-room .clist{list-style:none;margin:0;padding:0 10px;max-height:260px;overflow:auto}
#cutting-room .c{padding:8px 6px;border-top:1px solid var(--line)}
#cutting-room .c:first-child{border-top:0}
#cutting-room .c.res .ctext{color:var(--mute);text-decoration:line-through}
#cutting-room .chead{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
#cutting-room .chead .who{font-weight:600}
#cutting-room .chead .when{color:var(--mute);margin-left:auto}
#cutting-room .ts{border:0;background:var(--soft);color:var(--accent);font-weight:700;font-size:12px;padding:1px 6px;border-radius:5px}
#cutting-room .ctext{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
#cutting-room .cacts{display:flex;gap:10px;margin-top:3px}
#cutting-room .link{border:0;background:none;padding:0;color:var(--mute);font-size:12px;text-decoration:underline;text-underline-offset:2px}
#cutting-room .none{color:var(--mute);font-size:13.5px;padding:6px 6px 10px}
#cutting-room .composer{padding:10px 16px 14px}
#cutting-room .composer textarea{width:100%;min-height:62px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--soft)}
#cutting-room .crow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--mute)}
#cutting-room .crow label{display:flex;gap:5px;align-items:center}
#cutting-room .cfoot{padding:0 16px 14px;display:flex;gap:10px;flex-wrap:wrap}
#cutting-room dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:22px;width:min(460px,calc(100vw - 32px))}
#cutting-room dialog::backdrop{background:rgba(10,12,14,.55)}
#cutting-room dialog h3{margin:0 0 4px;font-size:24px}
#cutting-room dialog p.hint{margin:0 0 14px;color:var(--mute);font-size:13.5px}
#cutting-room .field{display:block;margin-bottom:12px;font-size:14px;font-weight:600}
#cutting-room .field input[type=text],#cutting-room .field textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-weight:400}
#cutting-room .field input[type=file]{display:block;margin-top:6px;font-weight:400;max-width:100%}
#cutting-room .two{display:grid;grid-template-columns:2fr 1fr;gap:10px}
#cutting-room .drow{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#cutting-room .err{color:var(--warn);font-size:13.5px;min-height:1.2em;margin:4px 0 0}
#cutting-room .srcpick{display:flex;gap:16px;margin:0 0 14px;font-size:14px}
#cutting-room .srcpick label{display:flex;gap:6px;align-items:center;cursor:pointer}
#cutting-room .fine{display:block;margin-top:5px;font-weight:400;font-size:12.5px;color:var(--mute)}
#cutting-room .linkstage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:18px;color:#cfd3d8}
#cutting-room .watch{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;padding:11px 20px;border-radius:8px;font-size:15px}
#cutting-room .linkstage small{font-size:12.5px;opacity:.75;overflow-wrap:anywhere;max-width:90%}
#cutting-room .tsin{width:58px;border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px}
#cutting-room progress{width:100%;height:8px;accent-color:var(--accent)}
#cutting-room .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:9px 16px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
#cutting-room .toast.show{opacity:1}
@media (max-width:1120px){#cutting-room .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:740px){#cutting-room .grid{grid-template-columns:1fr;padding:12px 14px 28px}#cutting-room .top{padding:18px 14px 4px}}
@container vrr (max-width:1080px){#cutting-room .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container vrr (max-width:700px){#cutting-room .grid{grid-template-columns:1fr;padding:12px 14px 28px}#cutting-room .top{padding:18px 14px 4px}}
@media (prefers-reduced-motion:reduce){#cutting-room .toast{transition:none}}
#cutting-room .gate{max-width:640px;margin:8vh auto;padding:0 20px}
#cutting-room .gate h2{font-size:30px;margin:0 0 8px}
#cutting-room .gate p{color:var(--mute)}
#cutting-room .gate pre{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;font-size:12.5px;line-height:1.5;max-height:320px}
#cutting-room .gate ol{padding-left:20px}#cutting-room .gate li{margin-bottom:10px}
#cutting-room .gate input[type=text],#cutting-room .gate input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);margin-top:6px}
#cutting-room .gate label.remember{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px}
#cutting-room .gate .fineprint{font-size:13px;color:var(--mute);margin-top:6px}
#cutting-room .who-badge{font-size:13px;color:var(--mute)}
#cutting-room .who-badge button{border:0;background:none;color:var(--accent);text-decoration:underline;font:inherit;padding:0;cursor:pointer}
#cutting-room .stage iframe{width:100%;height:100%;border:0;background:#000}
#cutting-room .linkfall{position:absolute;bottom:8px;right:8px}
#cutting-room .linkfall a{color:#cfd3d8;font-size:12px}

#cutting-room *{box-sizing:border-box}
#cutting-room p,#cutting-room h1,#cutting-room h2,#cutting-room h3,#cutting-room ul,#cutting-room ol,#cutting-room li,#cutting-room b,#cutting-room small,#cutting-room label,#cutting-room span{margin:0;padding:0;list-style:none;letter-spacing:normal;text-transform:none;color:inherit;font-family:inherit}
#cutting-room .gate h2{color:var(--ink)}
#cutting-room .gate ol{padding-left:22px;list-style:decimal outside}
#cutting-room .gate li{list-style:decimal outside;margin-bottom:10px;color:var(--ink)}
#cutting-room .gate pre{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#cutting-room button{margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;line-height:1.4;width:auto}
#cutting-room a{box-shadow:none}
#cutting-room input,#cutting-room textarea,#cutting-room select{margin:0;max-width:100%;box-shadow:none;min-height:0}
#cutting-room input[type=checkbox],#cutting-room input[type=radio]{width:auto;min-width:0;flex:0 0 auto;border:0;padding:0;appearance:auto;-webkit-appearance:auto;accent-color:var(--accent);height:auto}
#cutting-room .srcpick label,#cutting-room .crow label,#cutting-room .gate label.remember{cursor:pointer}
#cutting-room .tsin{width:58px}
#cutting-room .gate input[type=password],#cutting-room .gate input[type=text]{border:1px solid var(--line);padding:10px 12px}
#cutting-room .top h1{font-size:32px}
#cutting-room dialog{margin:auto}
#cutting-room [hidden]{display:none!important}
#cutting-room .field input[type=file]{border:0;padding:0;background:none}
#cutting-room .field input[type=text],#cutting-room .field textarea,#cutting-room .gate input{border:1px solid var(--line)}

/* Break out of narrow theme content columns and adapt to the space the page gives us */
#cutting-room.alignfull{width:auto;max-width:1440px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
#cutting-room{container-type:inline-size;container-name:vrr}
@media (max-width:1480px){#cutting-room.alignfull{margin-left:16px!important;margin-right:16px!important}}
#cutting-room .verdict{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
#cutting-room .crow{flex-wrap:wrap}
#cutting-room .bar select{min-width:0}
#cutting-room .c-head,#cutting-room .c-body{display:block;min-width:0}

/* ---- Mac and iPhone polish ---- */
#cutting-room{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#cutting-room button,#cutting-room a,#cutting-room select,#cutting-room label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#cutting-room .title-face{text-wrap:balance}
#cutting-room dialog{max-height:calc(100dvh - 32px);max-height:calc(100vh - 32px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@supports (height:100dvh){#cutting-room dialog{max-height:calc(100dvh - 32px)}}
#cutting-room dialog.vrr-shim{position:fixed;inset:0;margin:auto;height:max-content;z-index:100000;box-shadow:0 0 0 100vmax rgba(10,12,14,.55)}
#cutting-room .stage video{background:#000}
#cutting-room .stage iframe{display:block}
#cutting-room .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px);text-align:center}

/* Phones and tablets: 16px fields stop iPhone zooming in, and controls get finger-sized */
@media (pointer:coarse),(max-width:740px){
  #cutting-room input[type=text],#cutting-room input[type=password],#cutting-room textarea,#cutting-room select,#cutting-room .tsin{font-size:16px}
  #cutting-room .tsin{width:72px;padding:6px 8px}
  #cutting-room .btn{min-height:44px;padding:10px 14px}
  #cutting-room .link,#cutting-room .who-badge button{min-height:36px;padding:8px 4px;display:inline-flex;align-items:center}
  #cutting-room .ts{min-height:32px;padding:6px 10px}
  #cutting-room .cacts{gap:14px}
  #cutting-room .crow label{min-height:36px}
  #cutting-room input[type=checkbox],#cutting-room input[type=radio]{width:20px;height:20px}
  #cutting-room .gate{margin:40px auto}
}
@media (max-width:740px){
  #cutting-room .top{flex-direction:column;align-items:flex-start;gap:6px}
  #cutting-room .top h1{font-size:28px}
  #cutting-room .who-badge{line-height:1.2}
  #cutting-room .two{grid-template-columns:1fr}
  #cutting-room dialog{padding:18px}
  #cutting-room .gate h2{font-size:26px}
  #cutting-room .verdict .btn{padding:10px 6px;font-size:14px;line-height:1.2}
}
@media (hover:hover){#cutting-room .btn:hover{border-color:var(--mute)}#cutting-room .btn.primary:hover{filter:brightness(1.06)}}
@media (hover:none){#cutting-room .btn:hover{border-color:var(--line)}#cutting-room .btn.primary:hover{border-color:var(--accent)}}

/* ---- Film frame follows the video's shape (vertical 9:16 by default) ---- */
#cutting-room .stage.has-film{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 12px 8px;--maxh:min(70vh,640px)}
#cutting-room .frame{position:relative;width:min(100%,calc(var(--maxh) * var(--arn,.5625)));aspect-ratio:var(--ar,9 / 16);background:#000;border-radius:6px;overflow:hidden}
#cutting-room .frame iframe,#cutting-room .frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
#cutting-room .linknote{margin:8px 4px 0;font-size:12px;line-height:1.4;color:#aab0b8;text-align:center;max-width:44ch}
#cutting-room .linknote a{color:#e3e6ea;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
#cutting-room .linkfall{display:none}
#cutting-room .fine.bad{color:var(--warn)}
#cutting-room .fine.good{color:var(--ok)}
#cutting-room .field select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);font:inherit;font-weight:400}
#cutting-room .field input[type=url]{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-weight:400}
@media (pointer:coarse),(max-width:740px){#cutting-room input[type=url]{font-size:16px}#cutting-room .stage.has-film{--maxh:min(72vh,560px)}}

/* ---- "Who are you?" sign-in ---- */
#cutting-room .gate.signin{max-width:520px}
#cutting-room .people{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:18px 0 20px}
#cutting-room .person{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
#cutting-room .person b{font-size:17px;font-weight:600}
#cutting-room .person span{font-size:12.5px;color:var(--mute)}
#cutting-room .person.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--soft)}
#cutting-room .person:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){#cutting-room .person:hover{border-color:var(--mute)}}
#cutting-room .gate.signin form .field{margin:0 0 6px;font-weight:600;color:var(--ink)}
#cutting-room .gate .swap{margin-top:22px;font-size:14px;color:var(--mute)}
#cutting-room .gate .swap .link{font-size:14px;color:var(--accent)}
@media (max-width:740px){#cutting-room .people{grid-template-columns:1fr 1fr}#cutting-room .person{min-height:60px}}

/* ---- Drive films: a clean still frame until play is pressed ---- */
#cutting-room .frame{box-shadow:0 1px 0 rgba(255,255,255,.04),0 8px 28px rgba(0,0,0,.35)}
#cutting-room .poster{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;background:#0d0f11;cursor:pointer;display:block;overflow:hidden;min-height:0}
#cutting-room .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s ease}
#cutting-room .poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
#cutting-room .playbtn{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:1;transition:transform .2s ease,background .2s ease}
#cutting-room .playbtn::before{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #15171A}
@media (hover:hover){#cutting-room .poster:hover img{transform:scale(1.02);filter:brightness(1.05)}#cutting-room .poster:hover .playbtn{transform:scale(1.06);background:#fff}}
#cutting-room .poster:focus-visible .playbtn{outline:3px solid var(--accent);outline-offset:3px}
#cutting-room .linknote{font-size:12px}
@media (prefers-reduced-motion:reduce){#cutting-room .poster img,#cutting-room .playbtn{transition:none}}

/* Buttons answer the touch straight away */
#cutting-room .btn,#cutting-room .person,#cutting-room .link{transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .08s ease}
#cutting-room .btn:active,#cutting-room .person:active{transform:scale(.97)}
#cutting-room .c.pending{opacity:.6}

/* Drive films: automatic timestamp when the clean player runs, typed timestamp with Drive's player */
#cutting-room .card.link-film:not(.direct) .auto-ts{display:none}
#cutting-room .card.link-film.direct .manual-ts{display:none}
#cutting-room .vload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e3e6ea;font-size:13px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:99px;pointer-events:none}
/* Drive's own player on phones */
#cutting-room .frame.drive iframe{background:#000}
#cutting-room .frame.drive .dcover{position:absolute;top:0;right:0;width:64px;height:64px;z-index:2;background:transparent}
#cutting-room .frame.drive iframe{inset:auto;top:0;left:0;right:auto;bottom:auto;transform-origin:0 0;max-width:none}