/* Only integration affordances. The product's stylesheet is unchanged. */ [hidden] { display:none !important; } #pipeline-dialog { width:min(1100px,calc(100vw - 48px)); max-height:90vh; overflow:auto; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:16px; } #pipeline-dialog::backdrop { background:var(--ov); } #s-screenplay .readbook-controls { display:flex; flex-direction:column; align-items:flex-start; gap:8px; } #s-screenplay .read-prologue-option { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); } /* Captions and marks on the dark stage. --ink-mute reads 2.6:1 against --ink, which is unreadable; this is 6.9:1. */ :root { --stage-bg:#15181C; --on-stage:#ECEDE9; --on-stage-mute:#9AA0A6; } #st-easy .epnow .epwait{ color:var(--warn-ink); font-weight:600; } #st-easy .btn.line{ background:var(--card); color:var(--acc); border:1px solid var(--acc); font-weight:600; padding:6px 14px; border-radius:7px; } #st-easy .btn.line:hover{ background:var(--acc-soft); } /* One shot has one state, and the dot says who is holding it: amber waits on the author, blue is the machine working, green is done. "No picture yet" is none of those, so its dot is a hairline rather than the blue it used to borrow. */ .pill.voice { border-color:var(--line-strong); color:var(--ink-soft); } .pill.voice:before, #st-easy .pill.voice:before { background:var(--voice); } .pill.quiet:before, #st-easy .pill.quiet:before { background:var(--line-strong); } nav .brand { border:0; background:none; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:8px; } nav .brand:hover b { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); } nav .brand:focus-visible { outline:2px solid var(--ink); outline-offset:3px; } #pipeline-dialog .asset-full { display:block; max-width:100%; max-height:75vh; margin:16px auto; object-fit:contain; } /* Bringing a book by pasting it: the words come first and the name second, because the name is taken from them. */ #paste-book-form { display:flex; flex-direction:column; gap:14px; max-width:720px; } #paste-book-form label { display:flex; flex-direction:column; gap:6px; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); } #paste-book-form textarea, #paste-book-form input { font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px; letter-spacing:normal; text-transform:none; } #paste-book-form textarea { resize:vertical; min-height:160px; line-height:1.6; } #paste-book-form :focus-visible { outline:2px solid var(--acc); outline-offset:1px; } #paste-book-form button { align-self:flex-start; } .saved-text { white-space:pre-wrap; overflow-wrap:anywhere; } .design-details { margin-top:16px; } .design-details details { border-top:1px solid var(--line); padding:12px 0; } .design-details summary { cursor:pointer; font-weight:600; } .design-field { padding:12px 0; border-bottom:1px solid var(--line); } .design-field p { margin:6px 0; } #reference-designs .ephead { flex-wrap:wrap; } #reference-designs .grow { min-width:0; } #pipeline-notice { margin:12px 0; } .pipeline-error { color:var(--ember); white-space:pre-wrap; } #new-book-form input { width:100%; padding:12px; margin:12px 0; background:var(--card-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:inherit; } [data-ui][role=button] { cursor:pointer; } [data-ui][role=button]:focus-visible { outline:2px solid var(--acc); outline-offset:2px; } [data-ui=asset] { cursor:zoom-in; } button:disabled { opacity:.55; cursor:wait; } .preview > video { width:100%; height:100%; object-fit:cover; } /* The episode player follows the delivered footage: portrait by default, landscape when the media says so. */ .player-card .preview.player { max-width:208px; margin:0 auto; } .player-card .preview.player.wide { aspect-ratio:16/9; max-width:100%; } .player-card .preview.player.wide img, .player-card video.preview.player.wide { object-fit:contain; background:#111; } /* Real manuscript URLs and IDs must not overlap adjacent columns. */ .screen { min-width:0; overflow-wrap:anywhere; } .ck-h { overflow-wrap:normal; } .setrow { flex-wrap:wrap; } .setrow .rgt { min-width:0; max-width:100%; } .setrow .pill { max-width:100%; white-space:normal; } .bgrid textarea { min-width:0; box-sizing:border-box; } @media (max-width:900px) { .bcols { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Use the supplied stacked layout before the fixed Studio columns collide. */ @media (max-width:1200px) { #st-easy .deskwrap { grid-template-columns:minmax(0,1fr); } #st-easy .railcol { position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; } #st-easy .railscenes { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } #st-easy .rsc { width:auto; } #st-easy .rsc b { display:inline; margin-right:6px; font-size:15px; } #st-easy .railcol .fchips { flex-direction:row; border:0; padding:0; } } @media (max-width:700px) { .bcols, .bgrid { grid-template-columns:minmax(0,1fr); } nav { flex-wrap:wrap; } nav > .seg { flex-basis:100%; justify-content:center; } .bookpick { max-width:100%; } .bpmenu { min-width:0; width:280px; max-width:calc(100vw - 52px); overflow-wrap:anywhere; } .ephead > .grow { flex-basis:100%; min-width:0; } .ccards, .cvoice { grid-template-columns:1fr; } #deskBeats .srow { grid-template-columns:22px minmax(0,1fr) 44px; } #deskBeats .srow .c { grid-column:2; } #deskBeats .srow .d { grid-column:3; grid-row:1; } #deskBeats .srow .st { grid-column:2 / 4; justify-self:start; text-align:left; } #st-easy .bh .sof { white-space:normal; } .gview .vbody { grid-template-columns:minmax(0,1fr); } .gview .vpic { max-width:196px; } } /* Episode picker. One chip per episode, so a long book overflows the strip. Flex items default to min-width:auto, which stopped the strip and its row shrinking: the row grew past the panel and the overflow was clipped rather than scrolled, and the chips squeezed until "Episode 1" wrapped into a column of single letters. */ #st-easy .waybar > .row { min-width: 0; } #st-easy .eptabs { display: flex; min-width: 0; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } #st-easy .eptabs .chipb { flex: 0 0 auto; white-space: nowrap; } /* The selected shot opens beneath its own row, inside the list, so the rows above stay put. The card's left rule continues the selected row's accent edge, tying the open shot to the row that owns it rather than decorating it. */ #deskBeats .srows .scenebox { margin: 0 0 6px 0; border-left: 1.5px solid var(--acc); padding: 0 0 0 14px; background: var(--card); } #deskBeats .srows .scenebox .beatrow { border-top: none; padding-top: 12px; } /* A shot row is an index line: one line per shot, so eleven of them stay scannable and the open shot never pushes its neighbours out of reach. Camera direction is a whole sentence, so it is clipped here and read in full on the open shot or on hover. */ #deskBeats .srow .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Screenplay, Casting and Studio are the order the work is done in, and the filled pill says where you are in it. Production settings is not a fourth step, it is the cabinet you open during any of them, so it sits apart from the group rather than inside it. The gap is the information. */ nav .navutils { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); } /* Quiet, and clearly pressable. The stage tabs beside them carry the weight; these are places you leave for, so they read lighter but never like inert labels. */ nav .navutil { font: inherit; font-size: 12.5px; background: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 2px; color: var(--ink-mute); white-space: nowrap; } nav .navutil:hover { color: var(--ink); background: var(--sunk); } nav .navutil[aria-current="page"] { color: var(--ink); background: var(--sunk); font-weight: 600; } nav .navutil:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .app > nav { flex-wrap: wrap; row-gap: 8px; } nav .navr { flex-wrap: wrap; min-width: 0; } @media (max-width: 900px) { nav .navutils { margin-left: 0; padding-left: 0; border-left: 0; } } /* The look register is the one text every picture and take is generated from, so it is edited as the three fields it actually has, and the composed result is shown verbatim underneath: what you send is what you read. */ #s-setup .setform { display: grid; gap: 14px; max-width: 62ch; } #s-setup .setform label { display: grid; gap: 5px; font-size: 13px; } #s-setup .setform label > span:first-child { font-weight: 600; color: var(--ink); } #s-setup .setform input, #s-setup .setform textarea { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 7px; padding: 8px 10px; resize: vertical; } #s-setup .setform input:focus-visible, #s-setup .setform textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } #s-setup .setform .row { align-items: center; gap: 12px; } #s-setup .setused { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 72ch; } #s-setup .setused .saved-text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; } /* A standing direction on one entity. Same shape as the look register's note, one level down. */ #s-setup .noteform { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } #s-setup .noteform label { display: grid; gap: 5px; font-size: 13px; } #s-setup .noteform label > span:first-child { font-weight: 600; color: var(--ink); } #s-setup .noteform textarea { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 7px; padding: 8px 10px; resize: vertical; } #s-setup .noteform textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } #s-setup .noteform .row { align-items: center; gap: 10px; flex-wrap: wrap; } /* Read the standing direction beside the face it applies to. */ .ccard .cnote-standing { display: block; margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--acc); font-size: 12px; color: var(--ink-soft); line-height: 1.45; } /* The inspector is where an entity's note is written, so it has to stay usable on a narrow screen. The mock intended to hide it under 1080px, but that rule is declared before .libinsp's own display:flex and loses to it, leaving the panel wrapped into the 190px rail column where its text breaks one word per line. Give it the full width under the rail and the cards instead: readable, and the note stays reachable. */ @media (max-width: 1080px) { #s-setup .libinsp { grid-column: 1 / -1; display: block; border-left: 0; border-top: 1px solid var(--line); } #s-setup .libinsp .kv { max-width: 78ch; } #s-setup .noteform { max-width: 62ch; } } /* An entity's description is a hundred-odd words of production lock. In the inspector it sat beside a fixed 92px label inside a 282px column, leaving the text about 135px wide — three words a line, running nearly 900px down the page and pushing the note out of sight. Give the column more room, put each label above its value so the text gets the full width, and let a long value scroll in place instead of growing without end. */ @media (min-width: 1081px) { #s-setup .libwrap { grid-template-columns: 206px minmax(0, 1fr) 360px; } } #s-setup .libinsp .kv div { display: block; } #s-setup .libinsp .kv .k { width: auto; margin-bottom: 4px; } #s-setup .libinsp .kv .v { display: block; max-height: 15em; overflow-y: auto; line-height: 1.5; overscroll-behavior: contain; } /* The author's own picture for an entity. Sits above the standing note: a picture outranks a written direction, and the layout should say so. */ #s-setup .ownref { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; max-width: 62ch; } #s-setup .ownref .sheetstrip { display: flex; gap: 6px; flex-wrap: wrap; } #s-setup .ownref .sheetstrip .c { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--sunk); } #s-setup .ownref .sheetstrip .c img { width: 100%; height: 100%; object-fit: cover; display: block; } #s-setup .ownref .row { align-items: center; gap: 8px; flex-wrap: wrap; } #s-setup .ownref .hint { margin: 0; } /* The shot plan reads top to bottom: what happens, then the frame it starts from with the control that makes it, then the fixed facts. What comes next is context, not part of the plan, so it sits under a rule in quieter type. */ #deskBeats .composer .nextup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; } #deskBeats .composer .nextup b { color: var(--ink-soft); font-weight: 600; } #deskBeats .composer .kv.adjusted { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); } #deskBeats .composer .chipb[disabled] { opacity: .45; cursor: default; } /* One panel per shot. The plan above never changes; this zone is the only part that moves as the shot progresses, so what you judge a take against stays on screen while you judge it. Its own ground separates it from the plan without making it a second card. */ #deskBeats .nowzone { margin-top: 16px; padding: 14px 14px 4px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; } #deskBeats .nowzone .zonetag { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } #deskBeats .nowzone .zonetag b { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } #deskBeats .nowzone .zonetag .nowstate { font-size: 11.5px; font-weight: 600; color: var(--acc); } #deskBeats .nowzone .zonetag i { flex: 1; height: 1px; background: var(--line); } #deskBeats .nowzone .nowside { display: flex; flex-direction: column; gap: 9px; min-width: 0; } #deskBeats .nowzone .frame-lg .hint { font-size: 11.5px; } /* Shot rows are an accordion: a caret in the gutter shows open/closed, and clicking the open row closes it. The caret sits in the 12px gap after the shot number, so it costs the grid no column and survives the narrow-screen layout. */ #deskBeats .srow .n { position: relative; } #deskBeats .srow .n::after { content: ""; position: absolute; left: 100%; top: .34em; margin-left: 3px; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; opacity: .32; transition: transform .12s ease, opacity .12s ease; } #deskBeats .srow:hover .n::after { opacity: .6; } #deskBeats .srow[aria-expanded="true"] .n::after { transform: rotate(90deg); opacity: .75; } @media (prefers-reduced-motion: reduce) { #deskBeats .srow .n::after { transition: none; } } /* ---- The second read: review notes attached to the shots they concern ---- The findings sit in the shot list rather than in a panel of their own, so a note cannot be scrolled past without meeting the shot it is about. */ #deskBeats .planGate { margin:0 0 12px 8px; border:1px solid var(--line); background:var(--card); } #deskBeats .planGate.ok { background:var(--card-2); } #deskBeats .pgOk { margin:0; font-size:12.5px; color:var(--good); } #deskBeats .noteWrap { margin:0 0 6px 0; } #deskBeats .planNote { border-left:1px dashed var(--line-strong); background:transparent; padding:11px 14px 12px 15px; margin:2px 0 0; } #deskBeats .planNote.must { border-left:2px solid var(--acc); background:var(--card-2); } #deskBeats .planNote.settled { opacity:.6; } #deskBeats .planNote .nhead { display:flex; flex-wrap:wrap; gap:3px 12px; align-items:baseline; } #deskBeats .planNote .sev { font-size:11.5px; font-weight:500; color:var(--ink-mute); } #deskBeats .planNote.must .sev { color:var(--acc); font-weight:600; } #deskBeats .planNote .cat { font-size:11.5px; color:var(--ink-mute); } #deskBeats .planNote .nbody { font-family:Newsreader,Georgia,serif; font-size:14.5px; line-height:1.55; color:var(--ink); margin:6px 0 0; max-width:62ch; } #deskBeats .planNote .nfix { font-size:12.5px; color:var(--ink-soft); margin:6px 0 0; max-width:62ch; } #deskBeats .planNote .nfix b { font-weight:600; color:var(--ink); } #deskBeats .planNote .nstale { font-size:12.5px; color:var(--warn-ink); margin:8px 0 0; max-width:62ch; } #deskBeats .planNote .nact { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; } #deskBeats .srow .qmark { font-style:normal; color:var(--acc); margin-right:7px; font-size:13px; } .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* Your own instruction for a shot, offered on every shot rather than only the ones the second read happened to flag. */ #deskBeats .changeform { margin:10px 0 0; padding:12px 14px; border:1px solid var(--line-strong); background:var(--card-2); display:flex; flex-direction:column; gap:10px; } #deskBeats .changeform label { display:flex; flex-direction:column; gap:5px; } #deskBeats .changeform label span { font-size:12.5px; font-weight:600; color:var(--ink); } #deskBeats .changeform textarea { font:inherit; font-size:13.5px; line-height:1.5; padding:8px 10px; border:1px solid var(--line-strong); border-radius:2px; background:var(--card); color:var(--ink); resize:vertical; min-height:62px; } #deskBeats .changeform .row { display:flex; flex-wrap:wrap; gap:9px; align-items:center; } #deskBeats .changeform .hint { flex:1 1 220px; min-width:0; font-size:12px; color:var(--ink-mute); } #deskBeats .composer .phead { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; } #deskBeats .composer .phead .hint { flex:1 1 auto; min-width:0; } /* The plan and its controls live inside the open shot, so the list says so once instead of leaving the author to find out by opening every row. */ #deskBeats .srowhint { margin:0 0 4px 8px; padding:0 6px; font-size:12px; color:var(--ink-mute); } /* One row per state rather than one chip per shot, so the band stays readable when a whole scene shares a state. */ #deskBeats .sceneband .grp { align-items: baseline; } #deskBeats .sceneband .tk { display:inline-flex; gap:8px; align-items:baseline; } #deskBeats .sceneband .tk b { font-weight:600; color:var(--ink); } #deskBeats .sceneband .tk.quiet b { font-weight:500; color:var(--ink-soft); } /* ---- Episode picker ---- Replaces a row of numbered chips that overflowed the bar and hid the titles. */ .eppick { position: relative; display: inline-flex; min-width: 0; } .eppick > .btn { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eplist { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 320px; max-width: min(460px, 90vw); max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--sh-3); padding: 4px; display: flex; flex-direction: column; } .eplist .eprow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 2px; background: none; font: inherit; color: inherit; cursor: pointer; } .eplist .eprow:hover { background: var(--sunk); } .eplist .eprow[aria-selected="true"] { background: var(--acc-soft); box-shadow: inset 2px 0 0 var(--acc); } .eplist .epn { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-size: 13px; } .eplist .ept { font-family: Newsreader, Georgia, serif; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eplist .eps { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; } @media (max-width: 640px) { .eplist { min-width: 260px; } } /* ---- Storyboard ---- The sheet is a wide multi-panel strip (about 2.34:1) carrying shot numbers, each shot's length, and red/blue arrows for camera and character. It used to be cropped into a 15x26 portrait chip and desaturated, which hid the panels and killed the arrow legend outright. */ #deskBeats .board { margin: 0 0 12px 8px; padding: 12px 14px; border: 1px solid var(--line); background: var(--card); } #deskBeats .board .bhd { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; margin: 0 0 10px; } #deskBeats .board .bhd b { font-size: 13.5px; font-weight: 600; } #deskBeats .board .bhd span { font-size: 12px; color: var(--ink-mute); } #deskBeats .bsheets { display: flex; flex-wrap: wrap; gap: 12px; } #deskBeats .bsheet { flex: 1 1 380px; min-width: 0; max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: 5px; } #deskBeats .bsheet .bopen { display: block; width: 100%; padding: 0; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--sunk); cursor: zoom-in; overflow: hidden; } #deskBeats .bsheet .bopen:hover { border-color: var(--acc); } #deskBeats .bsheet img { display: block; width: 100%; height: auto; } #deskBeats .bsheet figcaption { font-size: 11.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; } @media (max-width: 720px) { #deskBeats .board { margin-left: 0; padding: 10px; } } /* ================= Episode desk ================= One episode row, three panes that scroll on their own, and a transport strip. Replaces a back bar, an episode heading and three stacked columns whose middle one carried every band in sequence. */ #st-easy .deskpage{ display:flex; flex-direction:column; height:calc(100vh - 150px); min-height:520px; border:1px solid var(--line-strong); background:var(--card); } #st-easy .deskpage > .epbar{ flex:0 0 auto; } #st-easy .deskpage > .panes, #st-easy .deskpage > .vox{ flex:1 1 auto; min-height:0; } #st-easy .deskpage{ position:relative; } #st-easy .epbar{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:9px 13px; border-bottom:1px solid var(--line); } /* Four slots, two rows: identity over its facts on the left, the question over its answer on the right. Nothing competes with the one primary action. */ #st-easy .epbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; align-items:center; } #st-easy .epbar .epid{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } #st-easy .epbar .epnow{ grid-column:1; grid-row:2; display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; min-width:0; } #st-easy .epbar .epask{ grid-column:2; grid-row:1; justify-self:end; text-align:right; } #st-easy .epbar .epask span{ font-size:12.5px; color:var(--ink-soft); } #st-easy .epbar .epdo{ grid-column:2; grid-row:2; justify-self:end; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } #st-easy .epbar .epnow b{ color:var(--ink); font-weight:600; font-size:13.5px; } #st-easy .epbar .epdo{ max-width:480px; } #st-easy .studio-label{ font-size:10px; font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em; } #st-easy #deskNextHelp{ flex-basis:100%; max-width:58ch; margin:0; font-size:11.5px; line-height:1.5; color:var(--ink-mute); text-align:right; } #st-easy .studio-views{ grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding-top:12px; margin-top:4px; border-top:1px solid var(--line); } #st-easy .studio-view-buttons{ display:flex; gap:4px; flex-wrap:wrap; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--sunk); } #st-easy .studio-view-buttons .btn{ border-color:transparent; } #st-easy .studio-view-buttons [aria-pressed="true"]{ background:var(--card); color:var(--ink); border-color:var(--line-strong); font-weight:600; } #st-easy .studio-view-help{ margin:0; flex:1 1 320px; color:var(--ink-soft); font-size:12px; line-height:1.5; } /* Which book this is. Quiet, because it rarely changes, but never absent. */ /* Sketched controls. The product carries a good many of these — "Ask Sam", "Propose again", "Read it again" — and each one swallowed its click while looking exactly like a control that works. Saying so costs a line and stops the product overstating itself. */ [data-future]{ opacity:.55; cursor:default; } [data-future]:hover{ background:inherit; } [data-future] .soon{ margin-left:6px; font-size:10.5px; letter-spacing:.02em; text-transform:none; opacity:.85; } [data-future] .soon::before{ content:"· "; } /* The design plan sits at the top of Casting, because it describes what Casting holds. */ #castRoot .dplan .lab{ font-size:13px; font-weight:600; } #castRoot .dplan .hint{ margin:8px 0 0; font-size:12.5px; color:var(--ink-mute); line-height:1.6; max-width:78ch; } #castRoot .dplan.done{ background:var(--card-2); } #st-easy .epbar .epbook{ font-family:Newsreader,Georgia,serif; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26ch; } #st-easy .epbar .epmeta{ font-size:12.5px; color:var(--ink-mute); font-variant-numeric:tabular-nums; } #st-easy .epbar .grow{ display:none; } #st-easy .epbar .row{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; } #st-easy .epbar .row .hint{ font-size:12px; color:var(--ink-mute); } @media (max-width:900px){ #st-easy .epbar{ grid-template-columns:minmax(0,1fr); } #st-easy .epbar .epid{ grid-row:1; } #st-easy .epbar .epnow{ grid-row:2; } #st-easy .epbar .epask{ grid-column:1; grid-row:3; justify-self:start; text-align:left; } #st-easy .epbar .epdo{ grid-column:1; grid-row:4; justify-self:start; justify-content:flex-start; } #st-easy .studio-views{ grid-row:5; } #st-easy #deskNextHelp{ text-align:left; } } #st-easy .panes{ display:grid; grid-template-columns:264px minmax(0,1fr) 396px; min-height:0; } /* The stage. The still you are approving and the cut it lands in share one rectangle, so moving between them is a tab rather than a drawer that buries the screen. The ground is ink because a picture judged against paper is judged against a colour. */ #st-easy .stage{ display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; overflow:hidden; background:var(--stage-bg); padding:16px 24px; border-right:1px solid var(--line); } #st-easy .stabs{ display:flex; align-items:center; gap:4px; flex:none; height:26px; } #st-easy .stab{ font:inherit; font-size:12px; border:0; cursor:pointer; border-radius:5px; padding:4px 11px; background:rgba(255,255,255,.08); color:var(--on-stage-mute); } #st-easy .stab[aria-selected="true"]{ background:var(--on-stage); color:var(--stage-bg); font-weight:600; } #st-easy .stab:disabled{ opacity:.45; cursor:not-allowed; } #st-easy .stab:focus-visible{ outline:2px solid var(--on-stage); outline-offset:2px; } #st-easy .smeta{ margin-left:auto; font-size:11.5px; color:var(--on-stage-mute); font-variant-numeric:tabular-nums; } #st-easy .picture-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; flex:none; } #st-easy .picture-actions span{ font-size:11.5px; color:var(--on-stage-mute); } #st-easy .sframe{ flex:1 1 auto; min-height:0; min-width:0; display:grid; place-items:center; grid-template-rows:minmax(0,1fr); overflow:hidden; } #st-easy .spic{ display:block; max-width:min(732px,100%); max-height:100%; width:auto; height:auto; min-width:0; min-height:0; aspect-ratio:16/9; object-fit:contain; border-radius:2px; box-shadow:0 18px 44px rgba(0,0,0,.45); background:#000; } /* Keep room for both the picture and the expanded filmstrip on shorter screens. */ @media (min-width:901px){ #st-easy .deskpage:has(> .panes){ height:auto; } #st-easy .deskpage > .panes{ flex:none; height:max(820px,calc(100dvh - 220px)); } #st-easy .sframe .spic{ width:100%; height:100%; } } @media (min-width:1201px){ #st-easy .panes{ grid-template-columns:220px minmax(0,1fr) 360px; } } #st-easy .sempty{ display:flex; flex-direction:column; align-items:center; gap:12px; } #st-easy .sempty p{ margin:0; color:var(--on-stage-mute); font-size:14px; } /* A filmstrip with a readable minimum hit target, never compressed to fit. */ #st-easy .episode-timeline{ --tl-ink:var(--ink); --tl-muted:var(--ink-mute); --tl-line:var(--line); --tl-bg:var(--card); display:flex; flex-direction:column; gap:8px; flex:none; min-width:0; width:100%; color:var(--tl-ink); } #st-easy .stage .episode-timeline{ --tl-ink:var(--on-stage); --tl-muted:var(--on-stage-mute); --tl-line:#ffffff26; --tl-bg:#ffffff08; } #st-easy .timeline-heading{ display:flex; align-items:center; gap:10px; font-size:11px; } #st-easy .timeline-heading strong{ font-weight:600; } #st-easy .timeline-heading>span{ color:var(--tl-muted); font-variant-numeric:tabular-nums; } #st-easy .timeline-scroll-buttons{ display:flex; gap:5px; margin-left:auto; } #st-easy .timeline-scroll-buttons button{ width:30px; height:28px; border:1px solid var(--tl-line); border-radius:6px; background:var(--tl-bg); color:var(--tl-ink); font:inherit; font-size:20px; cursor:pointer; } #st-easy .timeline-viewport{ overflow-x:auto; overflow-y:hidden; min-width:0; padding:3px 1px 10px; overscroll-behavior-x:contain; scrollbar-color:#82918a var(--tl-bg); scrollbar-width:thin; } #st-easy .timeline-viewport:focus-visible{ outline:2px solid #428f84; outline-offset:2px; border-radius:5px; } #st-easy .timeline-content{ display:flex; gap:18px; width:max-content; min-width:100%; } #st-easy .timeline-scene{ --scene-accent:#669d96; display:flex; flex-direction:column; gap:9px; min-width:132px; padding:10px; border:1px solid color-mix(in srgb,var(--scene-accent) 48%,var(--tl-line)); border-left:3px solid var(--scene-accent); border-radius:10px; background:color-mix(in srgb,var(--scene-accent) 8%,var(--tl-bg)); } #st-easy .timeline-scene:nth-child(even){ --scene-accent:#929bbd; } #st-easy .timeline-scene:has(.tseg[aria-current="true"]){ border-color:var(--scene-accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--scene-accent) 25%,transparent); } #st-easy .timeline-scene-heading{ display:flex; flex-direction:column; gap:6px; padding-bottom:8px; border-bottom:1px solid color-mix(in srgb,var(--scene-accent) 25%,var(--tl-line)); } #st-easy .timeline-scene-top{ display:flex; align-items:center; gap:10px; justify-content:space-between; } #st-easy .scene-badge{ font-size:11px; font-weight:650; color:var(--tl-ink); padding:4px 7px; border-radius:5px; background:color-mix(in srgb,var(--scene-accent) 24%,var(--tl-bg)); white-space:nowrap; } #st-easy .timeline-scene-top>span{ font-size:9px; color:var(--tl-muted); white-space:nowrap; } #st-easy .timeline-scene-time{ font-size:10px; font-variant-numeric:tabular-nums; color:var(--tl-muted); } #st-easy .tname{ width:0; min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--tl-muted); } #st-easy .tbar{ display:flex; gap:4px; align-items:stretch; } #st-easy .tseg{ --clip-color:#497e75; position:relative; flex:none; display:flex; flex-direction:column; min-width:88px; flex-grow:1; padding:0; text-align:left; font:inherit; color:var(--tl-ink); cursor:pointer; background:var(--tl-bg); border:1px solid var(--tl-line); border-radius:7px; overflow:hidden; } #st-easy .tseg.image{ --clip-color:#b58a36; } #st-easy .tseg.missing{ --clip-color:#888e96; border-style:dashed; } #st-easy .tseg-time{ padding:4px 7px; font-size:10px; font-variant-numeric:tabular-nums; color:var(--tl-muted); } #st-easy .tseg-image{ height:42px; overflow:hidden; display:grid; place-items:center; background:#20282c; color:#abb5b7; } #st-easy .tseg-image img{ width:100%; height:100%; object-fit:cover; } #st-easy .tseg-label{ display:flex; flex-direction:column; gap:3px; padding:6px 7px 8px; border-bottom:3px solid var(--clip-color); } #st-easy .tseg-label b{ font-size:11px; font-weight:600; } #st-easy .tseg-label small{ font-size:9px; color:var(--tl-muted); } #st-easy .tseg:hover{ border-color:var(--clip-color); box-shadow:0 0 0 1px var(--clip-color); } #st-easy .tseg[aria-current="true"]{ border-color:#50a798; box-shadow:0 0 0 1px #50a798; background:#428f8420; } #st-easy .tseg:focus-visible{ outline:2px solid #50a798; outline-offset:2px; } #st-easy .tseg-progress{ position:absolute; bottom:0; left:0; width:0; height:3px; background:#d9f9f0; } #st-easy .timeline-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 13px; font-size:9px; color:var(--tl-muted); } #st-easy .timeline-legend>span:not(.timeline-help)::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:2px; margin-right:5px; background:#497e75; } #st-easy .timeline-legend>.image::before{ background:#b58a36; } #st-easy .timeline-legend>.missing::before{ background:#888e96; } #st-easy .timeline-help{ margin-left:auto; } #st-easy .stransport{ flex:none; display:flex; align-items:center; gap:12px; } #st-easy .stransport .grow{ flex:1 1 auto; } #st-easy .scirc{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:var(--on-stage); font:inherit; font-size:13px; cursor:pointer; display:grid; place-items:center; flex:none; padding:0; } #st-easy .scirc.big{ width:38px; height:38px; font-size:14px; background:var(--on-stage); color:var(--stage-bg); border-color:var(--on-stage); } #st-easy .scirc:hover{ background:rgba(255,255,255,.16); } #st-easy .scirc.big:hover{ background:#fff; } #st-easy .scirc:disabled{ opacity:.4; cursor:not-allowed; } #st-easy .scirc:focus-visible{ outline:2px solid var(--on-stage); outline-offset:2px; } #st-easy .stime{ font-size:12px; color:var(--on-stage-mute); font-variant-numeric:tabular-nums; flex:none; white-space:nowrap; } #st-easy .stage .pbar{ flex:1 1 auto; height:4px; border-radius:2px; background:rgba(255,255,255,.16); cursor:pointer; position:relative; overflow:hidden; } #st-easy .stage .pbar .play-progress{ display:block; height:100%; width:0; background:var(--on-stage); } #st-easy .stake{ font-size:12px; color:var(--on-stage-mute); flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; } #st-easy .shint{ margin:0; flex:none; font-size:12px; color:var(--on-stage-mute); line-height:1.5; } #st-easy .pane{ display:block; min-height:0; overflow-y:auto; border-right:1px solid var(--line); } #st-easy .pane:last-child{ border-right:0; } #st-easy .pane h2{ margin:0; padding:10px 13px 6px; font-size:11.5px; font-weight:600; color:var(--ink-mute); position:sticky; top:0; background:var(--card); z-index:2; } /* The rail: which scene, how to narrow it, then the shots. The scene is a line you open rather than a column you keep, because it changes rarely and a column cost the shot list the width that lets a whole scene sit on screen. */ #st-easy .railpane{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; row-gap:0; padding:0; overflow:hidden; min-width:0; } #st-easy .railrows{ min-width:0; } #st-easy .shotrow{ min-width:0; } #st-easy .railhead{ position:relative; flex:none; padding:10px 9px 9px; border-bottom:1px solid var(--line); background:var(--card); } #st-easy .railscene{ display:flex; width:100%; align-items:center; gap:8px; font:inherit; font-size:12.5px; font-weight:600; text-align:left; color:var(--ink); cursor:pointer; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:7px 9px; } #st-easy .railscene .rsfull{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #st-easy .railscene .rsnum{ display:none; } #st-easy .railscene i{ font-style:normal; color:var(--ink-mute); } #st-easy .railscene:hover{ background:var(--card-2); } #st-easy .railmenu{ position:absolute; left:9px; right:9px; top:44px; z-index:6; background:var(--card); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--sh-2); padding:4px; max-height:320px; overflow-y:auto; } #st-easy .scn{ display:block; width:100%; text-align:left; border:0; background:none; color:inherit; padding:7px 9px; border-radius:5px; cursor:pointer; font:inherit; } #st-easy .scn:hover{ background:var(--card-2); } #st-easy .scn[aria-selected="true"]{ background:var(--acc-soft); } #st-easy .scn b{ display:block; font-family:Newsreader,Georgia,serif; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #st-easy .scn span{ font-size:11.5px; color:var(--ink-mute); } #st-easy .filters{ display:flex; gap:5px; align-items:center; margin-top:9px; padding:0; border:0; position:static; background:none; } #st-easy .fchip{ border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft); border-radius:999px; padding:4px 10px; font:inherit; font-size:11.5px; cursor:pointer; } #st-easy .fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); } #st-easy .slice{ position:relative; margin-left:auto; } #st-easy .slicemenu{ position:absolute; right:0; top:28px; z-index:6; display:flex; flex-direction:column; gap:4px; align-items:stretch; background:var(--card); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--sh-2); padding:6px; min-width:150px; } #st-easy .slicemenu .fchip{ text-align:left; border-radius:5px; } #st-easy .railrows{ flex:1 1 auto; min-height:0; overflow-y:auto; } /* 60px fixed: every shot of a scene on screen at once. At the old height the shots carrying notes were the ones below the fold. */ #st-easy .shotrow{ display:flex; align-items:center; gap:10px; width:100%; height:60px; padding:5px 10px 5px 6px; text-align:left; border:0; border-bottom:1px solid var(--line); border-left:3px solid transparent; background:none; color:inherit; cursor:pointer; font:inherit; } #st-easy .shotrow:hover{ background:var(--card-2); } #st-easy .shotrow[aria-current="true"]{ background:var(--acc-soft); border-left-color:var(--acc); } #st-easy .shotrow .thumb{ position:relative; flex:none; width:88px; height:50px; border-radius:3px; overflow:hidden; background:var(--sunk); display:block; } #st-easy .shotrow .thumb img{ width:100%; height:100%; object-fit:cover; display:block; } #st-easy .shotrow .tn{ position:absolute; left:0; bottom:0; padding:1px 5px; font-size:10px; color:#fff; background:rgba(21,24,28,.82); border-radius:0 3px 0 0; font-variant-numeric:tabular-nums; } #st-easy .shotrow .tt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } #st-easy .shotrow .d{ font-size:11px; color:var(--ink-mute); font-variant-numeric:tabular-nums; } #st-easy .sstate{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #st-easy .sstate i{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--line-strong); } #st-easy .sstate.ok i{ background:var(--good); } #st-easy .sstate.warn i{ background:var(--warn); } #st-easy .sstate.voice i{ background:var(--voice); } #st-easy .shotrow .qmark{ flex:none; font-style:normal; font-size:10.5px; color:var(--warn-ink); background:#F7EFDC; border-radius:999px; padding:2px 7px; } #st-easy .railnone{ margin:0; padding:16px 12px; font-size:12.5px; color:var(--ink-mute); line-height:1.6; } /* Below this the stage is narrower than the picture it exists to show. The rail gives up its width first, because the pane holds the decision. */ @media (max-width:1300px){ #st-easy .panes{ grid-template-columns:72px minmax(0,1fr) 340px; } #st-easy .railhead{ padding:8px 6px; } #st-easy .railscene{ justify-content:center; gap:3px; padding:6px 4px; } #st-easy .railscene .rsfull{ display:none; } #st-easy .railscene .rsnum{ display:block; font-family:Newsreader,Georgia,serif; font-size:15px; } #st-easy .railhead .filters{ display:none; } #st-easy .railmenu{ left:6px; width:250px; right:auto; } #st-easy .shotrow{ flex-direction:column; height:auto; gap:3px; padding:6px 4px; align-items:stretch; } #st-easy .shotrow .thumb{ width:100%; min-width:0; height:38px; } #st-easy .shotrow .tt{ min-width:0; } #st-easy .railrows{ overflow-x:hidden; } #st-easy .shotrow .tt .sstate{ font-size:0; gap:0; } #st-easy .shotrow .tt .sstate i{ width:7px; height:7px; } #st-easy .shotrow .d{ font-size:10px; } #st-easy .shotrow .qmark{ display:none; } } #st-easy .wbody > *{ margin:0; border:0; border-radius:0; background:none; padding:14px 20px 16px; } #st-easy .wbody > * + *{ border-top:1px solid var(--line); } #st-easy .wbody .sceneband{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:12.5px; } #st-easy .wbody .sceneband .grp{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; } #st-easy .wbody .sceneband > .grp > b{ font-size:11.5px; font-weight:600; color:var(--ink-mute); } #st-easy .wbody .board > summary{ display:flex; flex-direction:column; gap:3px; cursor:pointer; list-style:none; } #st-easy .wbody .board > summary::-webkit-details-marker{ display:none; } /* The summary is a column, so a ::before on it becomes its own row and the mark floats above the heading, reading as decoration rather than as the control that opens the section. On the heading it sits where a reader looks for it, and a folded section can be told from a missing one. */ #st-easy .wbody .board > summary::before{ content:none; } #st-easy .wbody .board > summary b::before{ content:"\25b8\00a0\00a0"; color:var(--ink-mute); font-weight:400; } #st-easy .wbody .board[open] > summary b::before{ content:"\25be\00a0\00a0"; } #st-easy .wbody .board > summary b{ display:inline; font-size:12.5px; font-weight:600; } #st-easy .wbody .board > summary span{ font-size:11.5px; color:var(--ink-mute); line-height:1.5; } #st-easy .wbody .bsheets{ margin-top:10px; gap:10px; } /* A scene with no sheets used to render as nothing at all, so a storyboard that failed left no trace and no way to ask for it again. */ #st-easy .wbody .bempty{ margin-top:10px; padding:16px 14px; border:1px dashed var(--line-strong); border-radius:6px; background:var(--card); } #st-easy .wbody .bempty p{ margin:0 0 10px; font-size:12.5px; color:var(--ink-mute); line-height:1.6; max-width:52ch; } #st-easy .wbody .bempty p:last-child{ margin-bottom:0; } #st-easy .wbody .board .bdo{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:8px; } #st-easy .wbody .board .bhint{ margin:0; flex:1 1 20ch; font-size:11.5px; color:var(--ink-mute); line-height:1.55; } #st-easy .wbody .bempty .bnote{ margin:10px 0 0; font-size:11.5px; color:var(--warn-ink); line-height:1.55; max-width:52ch; } #st-easy .wbody .bsheet{ flex:1 1 100%; } /* The read-through. The scorecard says which of the seven criteria slipped and where; each flag is a card short enough to act on without reading it twice, with the reasoning folded behind it. It replaced a lead sentence, a row of chips and every note at full length, which meant reading all of it to find the three that mattered. */ #st-easy .readthru{ display:flex; flex-direction:column; gap:10px; } #st-easy .rtHead{ display:flex; align-items:baseline; gap:12px; } #st-easy .rtHead h4{ margin:0; font-family:Newsreader,Georgia,serif; font-weight:500; font-size:18px; letter-spacing:-.01em; } #st-easy .rtHead .btn.text{ margin-left:auto; } #st-easy .readthru .pgLead{ margin:0; font-size:12.5px; line-height:19px; color:var(--ink); } #st-easy .rtWhere{ margin:0; font-size:11.5px; color:var(--ink-mute); } #st-easy .rtTally{ margin:0; font-size:12px; line-height:18px; color:var(--ink-mute); } #st-easy .readthru .pgChecks{ display:flex; flex-direction:column; gap:0; } #st-easy .readthru .ck{ display:flex; align-items:center; gap:8px; height:21px; font-size:12px; color:var(--ink-mute); } #st-easy .readthru .ck > i{ width:12px; height:10px; flex:none; position:relative; } /* pass: a check, drawn rather than shipped as a glyph that a font may not have */ #st-easy .readthru .ck > i:after{ content:""; position:absolute; left:1px; top:0; width:4px; height:8px; border:solid var(--good); border-width:0 1.8px 1.8px 0; transform:rotate(43deg); } #st-easy .readthru .ck.flag > i:after{ content:""; left:2px; top:2px; width:7px; height:7px; border:0; border-radius:50%; background:var(--warn); transform:none; } #st-easy .readthru .ck.flag .cklab{ color:var(--ink); } #st-easy .readthru .ckwhere{ margin-left:auto; font-size:11px; color:var(--warn-ink); } #st-easy .rtCards{ display:flex; flex-direction:column; gap:8px; } #st-easy .planNote.card{ border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:0 8px 8px 0; padding:10px 12px; display:flex; flex-direction:column; gap:6px; background:var(--card); } #st-easy .planNote.card.must{ border-left-color:var(--acc); } #st-easy .planNote.card .nhead{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } #st-easy .planNote.card .sev{ font-size:12.5px; font-weight:600; color:var(--ink); } #st-easy .planNote.card .cat{ font-size:11px; color:var(--ink-mute); } #st-easy .planNote.card .cat.crit{ color:var(--acc); font-weight:600; } #st-easy .planNote.card .nbody{ margin:0; font-size:12.5px; line-height:19px; color:var(--ink-soft); } #st-easy .planNote.card .nact{ display:flex; gap:10px; align-items:center; } #st-easy .planNote.card .btn.line.sm{ min-height:28px; padding:4px 11px; font-size:12.5px; } #st-easy .nmore summary, #st-easy .rtSettled summary{ font-size:11.5px; color:var(--ink-mute); cursor:pointer; } #st-easy .nmore p{ margin:6px 0 0; font-size:12px; line-height:18px; color:var(--ink-mute); } #st-easy .rtSettled{ border-top:1px solid var(--line); padding-top:10px; } /* The pane scrolls; its footer does not, so the one decision is always a glance from the picture beside it. */ #st-easy .workpane{ display:flex; flex-direction:column; overflow:hidden; } #st-easy .workpane .wbody{ flex:1 1 auto; min-height:0; overflow-y:auto; } #st-easy .wfoot{ flex:none; background:var(--card-2); border-top:1px solid var(--line); padding:14px 20px 16px; display:flex; flex-direction:column; gap:10px; } #st-easy .wfoot p{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.5; } #st-easy .wfoot .acts{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; } #st-easy .btn.big{ min-height:40px; border-radius:7px; padding:9px 18px; font-size:14px; } #st-easy .wfoot .btn.text{ height:40px; padding:0 2px; } #st-easy :is(.scene-actions,.take-actions){ flex:none; border-top:1px solid var(--line); background:var(--card-2); } #st-easy :is(.scene-actions,.take-actions)>summary{ padding:13px 17px; cursor:pointer; font-size:12px; font-weight:600; color:var(--ink); } #st-easy :is(.scene-actions,.take-actions)>summary span{ margin-left:8px; font-size:11px; font-weight:400; color:var(--ink-mute); } #st-easy :is(.scene-actions,.take-actions)>summary:focus-visible{ outline:2px solid var(--acc); outline-offset:-3px; } #st-easy :is(.scene-actions,.take-actions) .wfoot{ border:0; padding-top:2px; } /* The sheet: what this shot is, in reading order. */ #st-easy .shotsheet{ padding:14px 20px 18px; display:flex; flex-direction:column; gap:12px; } #st-easy .ssline{ font-size:11.5px; color:var(--ink-mute); } #st-easy .ssaid{ display:flex; flex-direction:column; gap:3px; } #st-easy .ssaid .who{ font-size:11.5px; color:var(--ink-mute); } #st-easy .ssaid p{ margin:0; font-family:Newsreader,Georgia,serif; font-size:17px; line-height:26px; } #st-easy .ssnone{ margin:0; font-size:12.5px; color:var(--ink-mute); } #st-easy .sshead{ display:flex; align-items:baseline; gap:12px; } #st-easy .sshead h4, #st-easy .shotsheet h4{ margin:0; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-mute); } #st-easy .sshead .grow{ flex:1 1 auto; } #st-easy .sshead .btn.text{ margin-left:auto; } #st-easy .sspara{ margin:0; font-size:12.5px; line-height:19px; color:var(--ink-soft); } /* The shot's own picture, at the head of its own sheet. The stage beside the pane is the episode player and follows the playhead, so this is the only copy that always belongs to the shot being read. Its caption is the plan's sentence for the opening, set quiet beneath it so the words and the image are read as one thing. */ #st-easy .sspic{ margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card-2); } #st-easy .sspic img{ display:block; width:100%; height:auto; cursor:zoom-in; } #st-easy .sspic.none{ display:grid; place-items:center; aspect-ratio:16/9; border-style:dashed; border-color:var(--line-strong); } #st-easy .sspic.none p{ margin:0; font-size:12.5px; color:var(--ink-mute); } #st-easy .sspic.stale{ border-color:var(--warn); } #st-easy .sscap{ margin:-4px 0 0; font-size:11.5px; line-height:17px; color:var(--ink-mute); } #st-easy .sscap b{ color:var(--ink-soft); font-weight:600; } /* What was made, as opposed to what was decided. It sits on the recessed ground so it reads as a report rather than another thing to answer. */ #st-easy .ssnow{ background:var(--card-2); border-radius:8px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; } #st-easy .sstools{ display:flex; flex-direction:column; gap:5px; padding:10px; background:var(--card-2); border-radius:8px; } /* A scene that stopped. Amber is the product's colour for work owed, and this is owed to the author rather than to the machine: nothing here retries its way out. */ #st-easy .spstop{ margin:0 0 12px; padding:13px 16px; background:var(--warn-soft); border:1px solid var(--warn); border-left-width:3px; border-radius:8px; } #st-easy .spstop b{ display:block; font-size:13px; color:var(--warn-ink); margin-bottom:7px; } #st-easy .spstop ul{ margin:0; padding:0; list-style:none; } #st-easy .spstop li{ font-size:12.5px; line-height:1.5; color:var(--warn-ink); padding-left:11px; border-left:2px solid var(--warn); margin-bottom:6px; } #st-easy .spstop p{ margin:9px 0 0; font-size:12.5px; color:var(--warn-ink); } #st-easy .spstop .row{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; } /* The whole scene, in columns. The picture column read straight down is the scene, and the joins are interleaved with it, so a cut sits where a cut belongs. */ #st-easy .scwhole{ display:flex; flex-direction:column; gap:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; } #st-easy .schead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 18px; border-bottom:1px solid var(--line); } #st-easy .schead b{ font-size:14px; } #st-easy .schead span{ display:block; font-size:12px; color:var(--ink-mute); font-variant-numeric:tabular-nums; } #st-easy .schead > .btn:first-of-type{ margin-left:auto; } #st-easy .scthrough{ margin:0; padding:11px 18px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); } #st-easy .scthrough b{ color:var(--ink); } /* The table may scroll sideways inside its own box; the page never does. */ #st-easy .scscroll{ overflow-x:auto; } #st-easy .sctable{ border-collapse:collapse; width:100%; min-width:760px; } #st-easy .sctable th{ text-align:left; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--ink-mute); padding:9px 12px; border-bottom:1px solid var(--ink); white-space:nowrap; } #st-easy .sctable td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:12.5px; line-height:1.45; color:var(--ink-soft); } #st-easy .scrow{ cursor:pointer; } #st-easy .scrow:hover{ background:var(--card-2); } #st-easy .schead .scrow-help{ margin-left:auto; max-width:42ch; line-height:1.5; } #st-easy .scpic{ width:134px; padding:9px 0 9px 12px; } #st-easy .scpic figure{ margin:0; position:relative; width:120px; line-height:0; } #st-easy .scpic img{ width:100%; height:auto; display:block; border-radius:4px; } #st-easy .scpic figcaption{ position:absolute; left:0; top:0; background:rgba(21,24,28,.72); color:#fff; font-size:10px; padding:1px 5px; border-radius:4px 0 4px 0; font-variant-numeric:tabular-nums; line-height:1.5; } #st-easy .scblank{ display:block; width:120px; height:68px; background:var(--card-2); border:1px dashed var(--line-strong); border-radius:4px; font-size:10px; color:var(--ink-mute); line-height:68px; text-align:center; } #st-easy .scmove{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11.5px; color:var(--ink-mute); margin-top:2px; } /* Two lines of it. The plan's own wording runs far longer than a cell holds. */ #st-easy .scwhat{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #st-easy .scwho{ display:block; font-size:10.5px; color:var(--ink-mute); } #st-easy .scsaid{ display:block; font-family:Newsreader,Georgia,serif; font-size:13.5px; color:var(--ink); line-height:1.4; margin-bottom:5px; } #st-easy .scnone{ color:var(--ink-mute); } #st-easy .sclen{ width:88px; white-space:nowrap; font-variant-numeric:tabular-nums; } #st-easy .sclen span{ display:block; font-size:11.5px; } #st-easy .sclen i{ display:block; height:4px; background:var(--ink-mute); margin-top:4px; border-radius:2px; } #st-easy .scjoin td{ background:var(--card-2); padding:8px 12px; } #st-easy .scjoinin{ display:flex; align-items:center; gap:13px; } #st-easy .sccut{ display:flex; width:120px; flex:none; border-radius:4px; overflow:hidden; } #st-easy .sccut img{ width:50%; height:auto; display:block; } #st-easy .scjoinsay{ font-size:12px; color:var(--ink-mute); } #st-easy .scjoinsay b{ color:var(--ink-soft); font-weight:500; margin-right:8px; } /* A join worth looking at. Oxblood is the only mark on the table, so it means one thing. */ /* What the shot must do. The ending is the plan's words until a take exists, and the panel it sits in is the shape the take's last frame will take once one does. */ #st-easy .ssmust{ display:flex; flex-direction:column; gap:12px; } #st-easy .ssmust .k{ display:block; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--ink-mute); margin-bottom:5px; } #st-easy .ssends p{ margin:0; padding:11px 12px; background:var(--card-2); border:1px dashed var(--line-strong); border-radius:6px; font-size:12.5px; line-height:19px; color:var(--ink-soft); } #st-easy .ssends .ssword{ display:block; margin-top:5px; font-size:11px; color:var(--ink-mute); } /* Once a take exists the ending is a picture, in the footprint the words held. */ #st-easy .ssframe{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--card-2); line-height:0; } #st-easy .ssframe img{ width:100%; height:auto; display:block; cursor:zoom-in; } #st-easy .ssnever{ padding-left:11px; border-left:2px solid var(--ember); } #st-easy .ssnever ul{ margin:0; padding:0; list-style:none; } #st-easy .ssnever li{ font-size:12.5px; line-height:18px; color:var(--ink-soft); margin-bottom:4px; } #st-easy .ssnever li:last-child{ margin-bottom:0; } #st-easy .ssfold summary{ cursor:pointer; list-style:none; font-size:11.5px; color:var(--ink-soft); } #st-easy .ssfold summary::-webkit-details-marker{ display:none; } #st-easy .ssfold summary::before{ content:"\25b8\00a0\00a0"; color:var(--ink-mute); } #st-easy .ssfold[open] summary::before{ content:"\25be\00a0\00a0"; } #st-easy .ssfold p{ margin:8px 0 0; font-size:12.5px; line-height:18px; color:var(--ink-soft); } #st-easy .ssfold p b{ color:var(--ink-mute); font-weight:600; } /* The way out of one shot and into the whole scene. A door, not a second ask: the question this pane puts stays in the footer that never scrolls. */ #st-easy .ssdoor{ padding-top:10px; border-top:1px solid var(--line); } #st-easy .ssdoor span{ display:block; font-size:11px; color:var(--ink-mute); margin-top:1px; } /* Where the next shot starts, under where this one ends. Butted together the two of them are the cut, which is what a join reading looks at. */ #st-easy .ssjoinin{ display:flex; gap:10px; align-items:flex-start; } #st-easy .ssjoin p{ margin:0; font-size:12.5px; line-height:18px; color:var(--ink-mute); } #st-easy .ssjoinpic{ flex:none; width:84px; } #st-easy .ssjoinpic img{ display:block; width:100%; height:auto; border-radius:5px; border:1px solid var(--line); cursor:zoom-in; } /* Who is heard in this shot, and where that voice is cast. Every way out leads to a surface that exists, so no line here describes an action it cannot offer. */ #st-easy .vrow{ display:flex; gap:10px; align-items:baseline; } #st-easy .vwho{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-mute); } #st-easy .vwho b{ color:var(--ink-soft); font-weight:600; } #st-easy .vgo{ padding:0; border:0; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--acc); cursor:pointer; text-decoration:underline; text-underline-offset:2px; } #st-easy .wtop{ display:flex; flex-direction:column; gap:3px; padding:10px 17px 11px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:3; } #st-easy .wtop .crumb{ display:flex; gap:10px; align-items:baseline; min-height:17px; } #st-easy .wtop .wtitle{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; } #st-easy .wtop .wtitle .grow{ flex:1 1 auto; } #st-easy .wtop .crumb.sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } #st-easy .wtop h3{ margin:0; font-family:Newsreader,Georgia,serif; font-weight:500; font-size:18.5px; } #st-easy .wtop .sub{ font-size:12px; color:var(--ink-mute); } #st-easy .wtop .back{ border:0; background:none; color:var(--acc); padding:0; font:inherit; font-size:12.5px; cursor:pointer; } #st-easy .wbody{ padding:15px 17px 26px; display:flex; flex-direction:column; gap:16px; } #st-easy .blk{ border:1px solid var(--line); background:var(--card); } #st-easy .blk > .h{ display:flex; flex-wrap:wrap; gap:3px 12px; align-items:baseline; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--card-2); } #st-easy .blk > .h b{ font-size:12.5px; font-weight:600; } #st-easy .blk > .h span{ font-size:11.5px; color:var(--ink-mute); } #st-easy .blk .c{ padding:12px; } /* The player becomes a strip you can reach from any pane. */ #st-easy .transport-bar{ border-top:1px solid var(--line); background:var(--card-2); } #st-easy .transport-bar{ display:flex; flex-direction:column; align-items:stretch; } #st-easy .transport-bar .player-card{ border:0; background:none; padding:8px 13px; margin:0; } #st-easy .transport-bar .watchtoggle{ align-self:flex-end; margin:6px 13px -4px; } /* Closed, the strip is a control. Open, it is tall enough to actually watch. */ #st-easy .transport-bar .player-card .preview.player{ display:none; } #st-easy .transport-bar.open{ position:absolute; left:0; right:0; bottom:0; z-index:45; background:var(--card); border-top:1px solid var(--line-strong); box-shadow:var(--sh-3); } #st-easy .transport-bar.open .player-card .preview.player{ display:block; width:100%; max-height:46vh; margin:0 auto 8px; background:#000; border-radius:2px; } /* The blocks the desk inherits sit inside the work pane now. */ #deskBeats .board, #deskBeats .planGate, #deskBeats .sceneband{ margin-left:0; } #deskBeats .srowhint{ display:none; } @media (max-width:900px){ #st-easy .deskpage{ height:auto; min-height:0; } #st-easy .panes{ grid-template-columns:1fr; } #st-easy .pane{ border-right:0; border-bottom:1px solid var(--line); max-height:none; } #st-easy .pane h2, #st-easy .filters, #st-easy .wtop{ position:static; } #st-easy .railhead{ padding:10px 9px 9px; } #st-easy .railscene{ justify-content:flex-start; gap:8px; padding:7px 9px; } #st-easy .railscene .rsfull{ display:block; } #st-easy .railscene .rsnum{ display:none; } #st-easy .railhead .filters{ display:flex; } #st-easy .railmenu{ left:9px; right:9px; width:auto; } #st-easy .shotrow{ flex-direction:row; align-items:center; height:60px; gap:10px; padding:5px 10px 5px 6px; } #st-easy .shotrow .thumb{ width:88px; height:50px; } #st-easy .shotrow .tt .sstate{ font-size:12px; gap:6px; } #st-easy .shotrow .tt .sstate i{ width:6px; height:6px; } #st-easy .shotrow .d{ font-size:11px; } #st-easy .shotrow .qmark{ display:inline; } } #st-easy .music-card{ position:fixed; right:18px; bottom:18px; width:min(420px,92vw); z-index:60; box-shadow:var(--sh-3); margin:0; } /* How the book gets cut into episodes. The choice existed in the pipeline and in the stored project, but nothing in the product could set it, so every book got the quick pass whether or not that suited it. */ .spbook .readmode { display: inline-flex; gap: 3px; margin-right: 6px; } .spbook .readmode .fchip { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); border-radius: 2px; padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer; } .spbook .readmode .fchip[aria-pressed="true"] { background: var(--acc-soft); border-color: var(--acc); color: var(--ink); font-weight: 600; } .spbook .readrow { display:flex; gap:16px; align-items:flex-start; margin-bottom:10px; flex-wrap:wrap; } .spbook .readnote { margin: 0; font-size: 12px; color: var(--ink-mute); max-width: 68ch; } .spbook .epcount { display:flex; flex-direction:column; gap:4px; flex:none; } .spbook .epcount > span { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); } .spbook .epcount input { width:24ch; padding:6px 8px; font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--line-strong); border-radius:6px; font-variant-numeric:tabular-nums; } .spbook .epcount input::placeholder { color:var(--ink-mute); font-size:12px; } .spbook .epcount input:focus-visible { outline:2px solid var(--acc); outline-offset:1px; } /* ---- Watch as a reader ---- One episode, full width, no editing chrome. */ .rwatch { max-width: 1100px; margin: 0 auto; padding: 18px 20px 48px; display: flex; flex-direction: column; gap: 16px; } .rwatch .rtop { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .rwatch .rtop .rbook { font-family: Newsreader, Georgia, serif; font-size: 16px; } .rwatch .rtop .grow { flex: 1 1 auto; } .rwatch .rtop .rwhere { font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .rwatch .rstage { background: #000; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; } .rwatch .rstage .player-card { border: 0; background: none; margin: 0; padding: 0; } .rwatch .rstage .preview.player { display: block; width: 100%; max-height: 72vh; background: #000; } /* The studio's own labels and shot stepper belong to the desk, not to watching. */ .rwatch .rstage .player-card > .row { display: none; } .rwatch .rstage .transport { padding: 8px 12px; background: var(--card); } .rwatch .rstage .player-card > .hint { display: none; } .rwatch .rstage.empty { background: var(--sunk); border-style: dashed; padding: 40px 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .rwatch .rstage.empty .hint { margin: 0; font-size: 13.5px; color: var(--ink-soft); } .rwatch .rmeta h1 { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 26px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; letter-spacing: -.01em; } .rwatch .rmeta h1 span { font-size: 20px; color: var(--ink-soft); } .rwatch .rmeta p { margin: 8px 0 0; color: var(--ink-soft); max-width: 72ch; font-size: 14px; line-height: 1.6; } .rwatch .rsteps { display: flex; gap: 8px; } .rwatch .rempty { padding: 60px 0; text-align: center; color: var(--ink-mute); } .rwatch .rempty h1 { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 24px; margin: 0 0 6px; color: var(--ink); } /* ---- What runs next ---- The Models panel was only a receipt of what had already run. This is the choice. */ .models { border: 1px solid var(--line); background: var(--card); margin: 0 0 16px; } .models .mhead { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--card-2); } .models .mhead b { font-size: 13px; font-weight: 600; } .models .mhead span { font-size: 11.5px; color: var(--ink-mute); } .models .mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 12px 13px; border-bottom: 1px solid var(--line); } .models .mrow:last-child { border-bottom: 0; } .models .mrow label { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .models .mrow .mlab { font-size: 13px; font-weight: 600; } .models .mrow .mcovers { font-size: 11.5px; color: var(--ink-mute); } .models .mrow input, .models .mrow select { font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); min-width: 0; } .models .mchips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; } .models .mchips .fchip { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); border-radius: 2px; padding: 3px 8px; font: inherit; font-size: 11.5px; cursor: pointer; } .models .mchips .fchip:hover { background: var(--sunk); color: var(--ink); } @media (max-width: 720px) { .models .mrow { grid-template-columns: 1fr; align-items: stretch; } } /* ================= Home ================= Built on space and scale rather than boxes and hairlines: the book's name, one true sentence about where it stands, the work itself at full width, then what wants you. */ #s-home .hm{ --hs1:8px; --hs2:14px; --hs3:22px; --hs4:36px; --hs5:56px; --hs6:88px; max-width:1160px; margin:0 auto; padding:0 0 var(--hs6); } #s-home .hmhero{ margin:var(--hs5) 0 0; } #s-home .hmhero h1{ font-family:Newsreader,Georgia,serif; font-weight:500; margin:0; max-width:18ch; font-size:clamp(38px,5vw,66px); line-height:1.02; letter-spacing:-.025em; } #s-home .hmhero .truth{ font-family:Newsreader,Georgia,serif; margin:var(--hs3) 0 0; color:var(--ink-soft); font-size:clamp(19px,1.7vw,24px); line-height:1.5; max-width:34ch; } #s-home .hmhero .truth b{ font-weight:500; color:var(--ink); } #s-home .hmhero .acts{ display:flex; flex-wrap:wrap; gap:var(--hs2); margin:var(--hs4) 0 0; } #s-home .plate{ position:relative; margin:var(--hs4) 0 0; border:0; padding:0; width:100%; border-radius:18px; overflow:hidden; background:var(--sunk); aspect-ratio:16/9; cursor:pointer; box-shadow:0 1px 2px rgba(21,24,28,.05), 0 8px 24px -12px rgba(21,24,28,.22); } #s-home .plate img{ width:100%; height:100%; object-fit:cover; display:block; } #s-home .plate .play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(250,250,247,.92); color:#15181C; font-size:19px; display:grid; place-items:center; transition:transform .16s ease; } #s-home .plate:hover .play{ transform:scale(1.06); } #s-home .plate .veil{ position:absolute; inset:auto 0 0 0; padding:var(--hs4) var(--hs3) var(--hs3); background:linear-gradient(to top, rgba(10,11,13,.86), rgba(10,11,13,0)); color:#fff; text-align:left; } #s-home .plate .veil b{ display:block; font-family:Newsreader,Georgia,serif; font-weight:500; font-size:clamp(21px,2.2vw,29px); letter-spacing:-.015em; } #s-home .plate .veil span{ font-size:14px; opacity:.82; } #s-home .hmband{ margin:var(--hs6) 0 0; } #s-home .hmband > h2{ font-family:Newsreader,Georgia,serif; font-weight:500; margin:0 0 var(--hs3); font-size:clamp(23px,2.3vw,30px); letter-spacing:-.015em; } #s-home .hmtask{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--hs3) var(--hs4); align-items:center; background:var(--card); border-radius:16px; padding:var(--hs4); box-shadow:0 1px 2px rgba(21,24,28,.05), 0 8px 24px -12px rgba(21,24,28,.22); } #s-home .hmtask h3{ font-family:Newsreader,Georgia,serif; font-weight:500; font-size:23px; margin:0; letter-spacing:-.01em; } #s-home .hmtask p{ margin:var(--hs1) 0 0; color:var(--ink-soft); max-width:58ch; font-size:15px; line-height:1.6; } #s-home .hmtask .acts{ display:flex; flex-wrap:wrap; gap:var(--hs2); } #s-home .hmeps{ display:flex; flex-direction:column; } #s-home .hmep{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--hs1) var(--hs3); align-items:baseline; width:100%; text-align:left; border:0; background:none; color:inherit; padding:var(--hs3) var(--hs2); border-radius:12px; cursor:pointer; font:inherit; transition:background .14s ease; } #s-home .hmep + .hmep{ box-shadow:inset 0 1px 0 var(--line); } #s-home .hmep:hover{ background:var(--card); } #s-home .hmep .n{ font-family:Newsreader,Georgia,serif; font-size:19px; color:var(--ink-mute); font-variant-numeric:tabular-nums; width:1.5em; } #s-home .hmep .t{ font-family:Newsreader,Georgia,serif; font-size:23px; letter-spacing:-.012em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #s-home .hmep .r{ font-size:14px; color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; } #s-home .hmep .d{ grid-column:2 / -1; font-size:14px; color:var(--ink-mute); display:flex; align-items:center; gap:9px; } #s-home .hmep .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; } #s-home .hmep .dot.part{ background:var(--acc); } #s-home .hmep .dot.plan{ background:var(--acc); opacity:.45; } #s-home .hmep .dot.words{ background:var(--warn); } #s-home .hmrest{ display:flex; flex-wrap:wrap; gap:var(--hs2) var(--hs4); align-items:center; margin:var(--hs4) 0 0; padding:0 var(--hs2); } #s-home .hmrest p{ margin:0; font-family:Newsreader,Georgia,serif; font-size:19px; color:var(--ink-soft); flex:1 1 300px; } /* Home is the advertisement and the intake: what Bound made, then the next book in. The frame is the one place in the product that shows what it produces, so it is the largest thing on the page and carries the watch action itself. */ #s-home .reel{ position:relative; display:block; width:100%; margin:var(--hs5) 0 0; border:0; padding:0; border-radius:18px; overflow:hidden; background:var(--sunk); aspect-ratio:16/9; cursor:pointer; box-shadow:0 1px 2px rgba(21,24,28,.05), 0 8px 24px -12px rgba(21,24,28,.22); } #s-home .reel img{ width:100%; height:100%; object-fit:cover; display:block; } #s-home .reel .play{ position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; background:rgba(250,250,247,.93); color:#15181C; font-size:23px; display:grid; place-items:center; transition:transform .16s ease; } #s-home .reel:hover .play{ transform:scale(1.06); } #s-home .reel .veil{ position:absolute; inset:auto 0 0 0; padding:var(--hs6) var(--hs4) var(--hs4); background:linear-gradient(to top, rgba(10,11,13,.88), rgba(10,11,13,0)); color:#fff; text-align:left; } #s-home .reel .veil b{ display:block; font-family:Newsreader,Georgia,serif; font-weight:500; font-size:clamp(28px,3.6vw,50px); letter-spacing:-.02em; line-height:1.05; } #s-home .reel .veil span{ display:block; margin-top:10px; font-size:15px; opacity:.85; } /* A book with nothing shot has no advertisement to run, and says so rather than showing an empty grey rectangle where a frame would be. */ #s-home .reel.bare{ cursor:default; display:grid; place-content:center; text-align:center; gap:10px; padding:var(--hs4); background:var(--card-2); border:1px solid var(--line-strong); box-shadow:none; } #s-home .reel.bare b{ font-family:Newsreader,Georgia,serif; font-weight:500; font-size:clamp(28px,3.4vw,46px); letter-spacing:-.02em; } #s-home .reel.bare span{ font-size:15px; color:var(--ink-mute); } #s-home .under{ display:flex; flex-wrap:wrap; gap:var(--hs3) var(--hs4); align-items:center; margin:var(--hs3) 0 0; padding:0 2px; } #s-home .under .truth{ margin:0; font-family:Newsreader,Georgia,serif; color:var(--ink-soft); font-size:clamp(18px,1.6vw,22px); line-height:1.5; flex:1 1 380px; max-width:44ch; } #s-home .under .acts{ display:flex; flex-wrap:wrap; gap:var(--hs2); } /* The frame is the advertisement and bringing a book is the intake, so both belong in the first screenful. A full-width 16:9 frame took all of it on a laptop, so the books stand beside the frame rather than under it. */ #s-home .hm{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:var(--hs4); align-items:start; } #s-home .hm.first{ display:block; } #s-home .hmnow{ min-width:0; } #s-home .hmbooks{ margin:var(--hs5) 0 0; min-width:0; } #s-home .hmbooks > h2{ font-family:Newsreader,Georgia,serif; font-weight:500; margin:0 0 var(--hs2); font-size:20px; letter-spacing:-.015em; } #s-home .books{ display:grid; grid-template-columns:1fr; gap:2px; align-items:stretch; } /* In the rail a book is a row: the cover is a thumbnail, and the words do the work. */ #s-home .bookwrap{ position:relative; display:flex; min-width:0; } #s-home .bookwrap .book{ flex:1 1 auto; } #s-home .bookdrop{ position:absolute; top:4px; right:4px; z-index:2; border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft); border-radius:999px; padding:3px 9px; font:inherit; font-size:11px; cursor:pointer; opacity:0; } #s-home .bookwrap:hover .bookdrop, #s-home .bookdrop:focus-visible{ opacity:1; } #s-home .bookdrop:hover{ border-color:var(--acc); color:var(--acc); } #s-home .bookdrop:focus-visible{ outline:2px solid var(--acc); outline-offset:1px; } @media (hover:none){ #s-home .bookdrop{ opacity:1; } } #s-home .book{ display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; align-content:center; border:0; background:none; padding:8px; border-radius:10px; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background .14s ease; } #s-home .book .bkface{ grid-row:1 / 3; align-self:center; } #s-home .book h3{ grid-column:2; align-self:end; } #s-home .book p{ grid-column:2; align-self:start; } #s-home .book:hover{ background:var(--card); } #s-home .book .bkface{ aspect-ratio:16/10; border-radius:7px; overflow:hidden; background:var(--sunk); display:grid; place-items:center; box-shadow:0 1px 2px rgba(21,24,28,.08); } #s-home .book .bkface img{ width:100%; height:100%; object-fit:cover; display:block; } /* nothing shot yet: a bound cover, which is what the book still is */ #s-home .book .bkface.bare{ background:var(--card-2); border:1px solid var(--line-strong); padding:4px; text-align:center; box-shadow:none; } #s-home .book .bkface.bare em{ font-style:normal; font-family:Newsreader,Georgia,serif; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--ink-mute); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } #s-home .book h3{ font-family:Newsreader,Georgia,serif; font-weight:500; font-size:17px; letter-spacing:-.012em; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #s-home .book[aria-current="true"] h3{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--acc); } #s-home .book p{ margin:2px 0 0; font-size:12.5px; color:var(--ink-mute); line-height:1.45; } /* Bringing a book is the other half of what this page is for, so it is the one thing in the rail that carries the accent, and it sits above the fold beside the frame. */ #s-home .intake{ display:flex; flex-direction:column; gap:8px; margin-top:10px; border-radius:10px; border:1px dashed var(--line-strong); padding:var(--hs3) 14px; } #s-home .intake b{ font-family:Newsreader,Georgia,serif; font-weight:500; font-size:19px; letter-spacing:-.015em; } #s-home .intake > span{ font-size:12.5px; color:var(--ink-mute); line-height:1.5; } #s-home .intake .acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } @media (max-width:900px){ #s-home .hm{ grid-template-columns:1fr; } #s-home .hmbooks{ margin-top:var(--hs5); } #s-home .books{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--hs2); } #s-home .intake{ margin-top:var(--hs2); } } #s-home .btn.sm{ padding:8px 14px; font-size:14px; border-radius:8px; } #s-home .hm.first{ margin:clamp(50px,11vh,130px) auto var(--hs6); } #s-home .hm.first h1{ font-family:Newsreader,Georgia,serif; font-weight:500; margin:0; max-width:11ch; font-size:clamp(42px,5.8vw,74px); line-height:1; letter-spacing:-.03em; } #s-home .hm.first p{ font-family:Newsreader,Georgia,serif; font-size:clamp(19px,1.8vw,23px); line-height:1.5; color:var(--ink-soft); margin:var(--hs3) 0 0; max-width:32ch; } #s-home .hm.first .acts{ display:flex; flex-wrap:wrap; gap:var(--hs2); margin:var(--hs4) 0 0; } #s-home .hm.first .fine{ font-family:inherit; font-size:14px; color:var(--ink-mute); margin:var(--hs3) 0 0; max-width:none; } /* Buttons on this screen are larger and filled: it is the one page that is all decision. */ #s-home .btn{ border:0; border-radius:10px; padding:11px 19px; font-size:15px; font-weight:500; background:var(--sunk); color:var(--ink); transition:background .14s ease, opacity .14s ease, transform .12s ease; } #s-home .btn:hover{ background:var(--line-strong); } #s-home .btn:active{ transform:translateY(1px); } #s-home .btn.primary{ background:var(--acc); color:var(--paper); } #s-home .btn.primary:hover{ background:var(--acc); opacity:.9; } #s-home .btn.big{ padding:14px 25px; font-size:16px; border-radius:12px; } @media (max-width:820px){ #s-home .hmtask{ grid-template-columns:1fr; } #s-home .plate{ aspect-ratio:16/10; } } /* --------------------------------------------------------------------------- One person, one sheet. A character used to be spread over two boards here and three rail items under Production settings; they are one person, so the sheet holds their face, their looks and their voice in that order. Surface weight carries the meaning: Face and Looks sit on the card, because a shoot waits on them. Voice sits on the sunk surface, because nothing does. --------------------------------------------------------------------------- */ .psheet { display:flex; flex-direction:column; gap:16px; } .psheet .ephead .sub.hon { font-size:15px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-soft); line-height:1.55; max-width:62ch; } .psheet .ephead .sub.hon b { font-weight:600; color:var(--ink); } .psheet .ephead .sub.hon .where { color:var(--ink-mute); } .pblock .ptop { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; } .pblock .plate { background:var(--sunk); border:1px solid var(--line); border-radius:8px; overflow:hidden; } .pblock .plate img { width:100%; height:auto; display:block; cursor:zoom-in; } .pblock .pfoot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; } .pblock .pfoot p { margin:0; flex:1 1 300px; font-size:13px; line-height:1.5; color:var(--ink-mute); } /* A look is a dated entry because a look really does have a span and a diff. */ .lookrec { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); } .lookrec + .lookrec { margin-top:12px; } .lookrec .lhead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:11px 14px; background:var(--card-2); border-bottom:1px solid var(--line); } .lookrec .lhead b { font-family:Newsreader,Georgia,serif; font-weight:600; font-size:17px; } .lookrec .lhead .span { font-size:12.5px; color:var(--ink-mute); } .lookrec .lbody { padding:14px; } .ldiff { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:14px; } .ldiff h4 { margin:0 0 7px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.17em; color:var(--ink-mute); } .ldiff ul { margin:0; padding:0; list-style:none; } .ldiff li { position:relative; padding:4px 0 4px 14px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); } .ldiff li::before { content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--line-strong); } .ldiff .holds li::before { background:var(--good); } /* Voice is present and legible and plainly not a gate: no card, no green. */ .pblock.novoice { background:var(--card-2); } .vread { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; } .vread blockquote { margin:0; font-family:Newsreader,Georgia,serif; font-size:19px; line-height:1.55; color:var(--ink); max-width:46ch; } .vread .said { margin:10px 0 0; font-size:12.5px; color:var(--ink-mute); max-width:52ch; } .vread .vside { display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .vread .vside .hint { max-width:24ch; } /* The two states the product has never had. Every selector below is scoped under .novoice on purpose: .player, .who, .where and .bar are all owned elsewhere, and an unscoped short name in this file has silently rearranged another screen before. */ /* Auditioning. A job that outlives the page, so the block says so and offers nothing to press: the state is the answer. */ .novoice .vcwait { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:start; } .novoice .vcwait .vside { display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .novoice .vcwait .vside .hint { max-width:26ch; } .novoice .vcfrom { margin:0; font-size:12.5px; color:var(--ink-mute); } .novoice .vcdesc { margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-soft); max-width:60ch; } .novoice .vcrail { margin-top:14px; height:3px; border-radius:2px; background:var(--sunk); overflow:hidden; max-width:60ch; } .novoice .vcrail i { display:block; height:100%; width:38%; background:var(--voice); border-radius:2px; } @media (prefers-reduced-motion:no-preference) { .novoice .vcrail i { animation:vcslide 2.4s ease-in-out infinite; } @keyframes vcslide { 0% { transform:translateX(-100%); } 100% { transform:translateX(264%); } } } /* Three to hear. The only state that is a decision rather than a report, so it drops the two-column reading grid entirely: the line at full width, then readings that share an exact left edge because the whole point is comparing them. */ .novoice .vcsides { margin:0 0 4px; font-family:Newsreader,Georgia,serif; font-size:21px; line-height:1.4; color:var(--ink); max-width:52ch; } .novoice .vcwhere { margin:0 0 18px; font-size:12.5px; color:var(--ink-mute); } .novoice .vcread { display:grid; grid-template-columns:19ch minmax(0,1fr) auto; gap:14px 18px; align-items:center; padding:11px 0; border-top:1px solid var(--line); } .novoice .vcapart .vcread, .novoice .vcread:first-of-type { border-top:0; } .novoice .vcwho { font-family:Newsreader,Georgia,serif; font-size:16px; color:var(--ink); } .novoice .vcwho small { display:block; font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:11.5px; color:var(--ink-mute); margin-top:1px; } .novoice .vcread.orig .vcwho { color:var(--ink-mute); } .novoice .vcplay { width:100%; max-width:34ch; height:34px; } .novoice .vcplay:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:17px; } /* The incumbent, not a candidate: it is what the take already sounds like. */ /* Set apart because it is the incumbent, not a candidate — but pulled back out by the same padding, so its player sits on the candidates' exact left edge. Comparing them by ear is the whole job of this state, and a 14px stagger fights it. */ .novoice .vcapart { border:1px solid var(--line); border-radius:6px; background:var(--card); padding:4px 14px; margin:0 -14px 14px; } /* The constraint, with the voices it names inside it rather than only mentioned. The oxblood rule runs the height of the group, so the rule itself says everything within is what the choice above steers away from. */ .novoice .vcavoid { margin:14px 0 0; padding:9px 14px 10px; border-left:2px solid var(--acc); background:var(--acc-soft); border-radius:0 4px 4px 0; } .novoice .vcavoid > p { margin:0 0 2px; font-size:12.5px; color:var(--acc); max-width:60ch; } /* Two columns, not three: there is no choice to make here, so there is no column for one. The name sits on the candidates' 19ch measure so the group reads as the same kind of list, indented by its own rule to say it is not part of the choosing. */ .novoice .vcread.vctaken { grid-template-columns:19ch minmax(0,1fr); border-top:0; padding:5px 0; } .novoice .vcread.vctaken .vcwho { font-size:15px; } /* No opacity: it composites the text toward its own ground and quietly takes the contrast below AA, which a measurement of the declared colour does not show. */ .novoice .vcunheard { font-size:12.5px; color:var(--acc); } /* Two things the author said now disagree. Amber, not oxblood: oxblood is the declaration's own colour, and amber is what this product already uses for work owed. It states the fact and never refuses — nothing here can declare a likeness intended. */ .novoice .vcclash { margin:10px 0 0; padding:8px 11px; border-left:2px solid var(--bronze); background:var(--warn-soft); border-radius:0 4px 4px 0; font-size:12.5px; color:var(--warn-ink); max-width:52ch; } .novoice .vcfoot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .novoice .vcfoot .hint { flex:1 1 280px; margin:0; } @media (max-width:820px) { .novoice .vcwait { grid-template-columns:1fr; } .novoice .vcread { grid-template-columns:1fr; gap:8px; align-items:start; } .novoice .vcplay { max-width:none; } } .psheet .standingnote { margin:0; padding-left:10px; border-left:2px solid var(--acc); font-family:Newsreader,Georgia,serif; font-size:17px; color:var(--ink-soft); } @media (max-width:820px) { .vread { grid-template-columns:1fr; } } /* A place's own description (interior and exterior for a split location) used to be visible only in the Production settings inspector. Locations are cast in Casting now, so the card carries it, clamped so a long one cannot stretch the row. */ .ccard .b .cdesc { font-size:12px; color:var(--ink-mute); line-height:1.45; white-space:pre-line; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* --------------------------------------------------------------------------- Receipts. Produce was a second view of the Studio behind a Direct/Produce switch: five tabs holding exactly one control that changed anything. Two of its tabs answered a real question — what did the machine actually do — and they became this. A run is the unit, because a run is what the machine did. Files hang off the run that made them instead of sitting in one flat list of hundreds. Every selector below is scoped under .rcpt on purpose. The product already owns .ledger, .att, .ct, .nm, .tools and .who for other components, and an unscoped .ledger (a horizontal flex row elsewhere) laid every stage out as a one-character column. Scoping wins on specificity and cannot collide again. --------------------------------------------------------------------------- */ .rcpt { display:flex; flex-direction:column; gap:14px; } .rcpt .truth { font-family:Newsreader,Georgia,serif; font-size:18px; line-height:1.5; color:var(--ink-soft); margin:0; max-width:58ch; } .rcpt .truth b { font-weight:600; color:var(--ink); } .rcpt .tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; padding:0; border:0; } .rcpt .rcptrows { display:block; } /* each row draws its own disclosure mark, so the browser's is hidden */ .rcpt .stagehead, .rcpt .runhead { list-style:none; } .rcpt .stagehead::-webkit-details-marker, .rcpt .runhead::-webkit-details-marker { display:none; } .rcpt .stagehead::marker, .rcpt .runhead::marker { content:""; } .rcpt .stagerow { display:block; border:1px solid var(--line); border-radius:8px; background:var(--card); overflow:hidden; } .rcpt .stagerow + .stagerow { margin-top:8px; } .rcpt .stagehead { display:grid; grid-template-columns:16px minmax(0,1fr) auto auto; gap:14px; align-items:baseline; padding:12px 14px; cursor:pointer; } .rcpt .stagehead:hover { background:var(--card-2); } .rcpt .stagehead .tw { color:var(--line-strong); font-size:13px; line-height:1; align-self:center; transition:transform .15s ease, color .15s ease; } .rcpt .stagehead:hover .tw { color:var(--ink-mute); } .rcpt .stagerow[open] > .stagehead .tw { transform:rotate(90deg); } .rcpt .stagehead .nm { font-family:Newsreader,Georgia,serif; font-size:18px; font-weight:500; letter-spacing:-.01em; color:var(--ink); min-width:0; } .rcpt .stagehead .nm span { font-family:inherit; font-size:12px; font-weight:400; color:var(--ink-mute); margin-left:9px; letter-spacing:0; } .rcpt .stagehead .ct { margin:0; font-size:12.5px; color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; } .rcpt .stagebody { display:block; padding:0 14px 10px 44px; border-top:1px solid var(--line); } .rcpt .runrow { display:block; border-bottom:1px solid var(--line); } .rcpt .runrow:last-child { border-bottom:0; } .rcpt .runhead { display:grid; grid-template-columns:16px minmax(0,1fr) auto auto auto; gap:12px; align-items:baseline; padding:10px 0; cursor:pointer; } .rcpt .runhead:hover .what { text-decoration:underline; } .rcpt .runhead .tw { color:var(--line-strong); font-size:11px; line-height:1; align-self:center; transition:transform .15s ease, color .15s ease; } .rcpt .runhead:hover .tw { color:var(--ink-mute); } .rcpt .runrow[open] > .runhead .tw { transform:rotate(90deg); } .rcpt .runhead .what { font-size:14px; color:var(--ink); min-width:0; } .rcpt .runhead .who { margin:0; font-size:12px; color:var(--ink-mute); white-space:nowrap; } .rcpt .att { display:inline-flex; gap:3px; align-items:center; } .rcpt .att i { width:6px; height:6px; border-radius:50%; background:var(--good); } .rcpt .att i.retry { background:var(--warn); } .rcpt .runbody { display:block; padding:2px 0 12px 28px; } .rcpt .filelist { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .rcpt .filechip { font:inherit; font-size:11.5px; border:1px solid var(--line); background:var(--card-2); border-radius:6px; padding:4px 9px; cursor:pointer; color:var(--ink-soft); } .rcpt .filechip:hover { border-color:var(--line-strong); color:var(--ink); } .rcpt .filechip .n { margin-left:6px; padding-left:6px; border-left:1px solid var(--line-strong); color:var(--ink-mute); font-variant-numeric:tabular-nums; } .rcpt .unres { margin:8px 0 10px; padding:9px 11px; background:var(--warn-soft); border-radius:6px; font-size:13px; color:var(--warn-ink); line-height:1.5; } .rcpt .unres b { display:block; font-weight:600; margin-bottom:3px; } .rcpt .unres div + div { margin-top:4px; } .rcpt .norun { font-size:13px; color:var(--ink-mute); padding:10px 0; line-height:1.5; margin:0; max-width:62ch; } @media (max-width:820px) { .rcpt .stagehead, .rcpt .runhead { grid-template-columns:16px minmax(0,1fr); row-gap:4px; } .rcpt .stagehead .ct, .rcpt .stagehead .pill, .rcpt .runhead .who, .rcpt .runhead .att, .rcpt .runhead .pill { grid-column:2; } } /* The gate's verdict on one shot. The roll-up in the episode bar says how many need a look; this says which and why, on the shot itself. It appears only when there is something to say — a passing frame is silent. */ .gaten { border-radius:8px; padding:11px 13px; margin:0 0 12px; font-size:13px; line-height:1.5; } .gaten.fail { background:var(--acc-soft); color:var(--acc); } .gaten.warn { background:var(--warn-soft); color:var(--warn-ink); } .gaten b { display:block; font-weight:600; margin-bottom:3px; } .gaten span { display:block; color:inherit; opacity:.85; } .gaten .row { margin-top:9px; gap:8px; } /* --------------------------------------------------------------------------- Sound. The episode's other half, opened from the episode bar because it is a place you go rather than an action you run. It replaced "Music plan", a panel offering "Add music here" on one row per scene — a name for the part furthest from working and none of the voice-over part that is closest. The shot list is the timeline. A novelist already reads shots, and a waveform ruler would hide the one thing that matters: where the words outlast the picture. Every selector is scoped under .vox; the product owns .vhead, and .bar, .cue, .lane, .said and .who elsewhere. --------------------------------------------------------------------------- */ #st-easy .vox { position:relative; display:flex; flex-direction:column; gap:14px; min-height:0; overflow:auto; } #st-easy .vox .vhead { position:sticky; top:0; z-index:2; background:var(--card); display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding:0 2px; } #st-easy .vox .vtruth { font-family:Newsreader,Georgia,serif; font-size:16px; line-height:1.55; color:var(--ink-soft); margin:0; flex:1 1 420px; max-width:70ch; } #st-easy .vox .vtruth b { font-weight:600; color:var(--ink); } #st-easy .vox .vtruth i { font-style:normal; color:var(--acc); font-weight:600; } /* one grid: the cut on the left, the score in its own lane, because a cue spans shots and a line sits inside one */ #st-easy .vox .vlanes { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:0 18px; } #st-easy .vox .vlanehead { font-size:10.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-mute); padding:0 0 8px; } #st-easy .vox .vcut { grid-column:1; } #st-easy .vox .vscore { grid-column:2; } #st-easy .vox .vscene { padding:16px 0 7px; border-bottom:1px solid var(--line); } #st-easy .vox .vscene b { font-family:Newsreader,Georgia,serif; font-weight:500; font-size:18px; } #st-easy .vox .vscene span { display:block; font-size:12px; color:var(--ink-mute); margin-top:2px; } #st-easy .vox .vshot { display:grid; grid-template-columns:62px minmax(0,1fr); gap:0 16px; padding:10px 0 10px 12px; border-bottom:1px solid var(--line); } #st-easy .vox .vshot.over { box-shadow:inset 3px 0 0 var(--acc); } #st-easy .vox .vn { display:flex; flex-direction:column; gap:1px; padding-top:2px; } #st-easy .vox .vn b { color:var(--ink); font-weight:600; font-size:13px; line-height:1.2; } #st-easy .vox .vn span { font-size:11.5px; color:var(--ink-mute); font-variant-numeric:tabular-nums; } #st-easy .vox .vshot.over .vn b { color:var(--acc); } #st-easy .vox .vnone { margin:3px 0; font-size:13px; color:var(--ink-mute); } /* The quote is prose from a novel, so it keeps a readable measure. The meter sits with the attribution rather than at the far margin: at full desk width a right-pinned bar ended up 200px from the line it was measuring, which made it read as decoration. */ #st-easy .vox .vline { padding:4px 0; } #st-easy .vox .vline + .vline { margin-top:4px; } #st-easy .vox .vsaid { margin:0; font-family:Newsreader,Georgia,serif; font-size:16px; line-height:1.45; color:var(--ink); max-width:58ch; } #st-easy .vox .vwho { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:3px 0 0; font-size:11.5px; color:var(--voice); font-weight:500; } #st-easy .vox .vwho em { font-style:normal; color:var(--ink-mute); font-weight:400; } #st-easy .vox .vmeter { display:inline-flex; align-items:center; gap:9px; } /* grey is how long the picture runs, blue the speech inside it, oxblood the speech past it */ #st-easy .vox .vbar { position:relative; height:7px; flex:none; } #st-easy .vox .vbar i { position:absolute; top:0; height:7px; border-radius:2px; } #st-easy .vox .vbar .trk { left:0; background:var(--sunk); } #st-easy .vox .vbar .sd { left:0; background:var(--voice); } #st-easy .vox .vbar .ov { background:var(--acc); } #st-easy .vox .vfit { font-size:11px; color:var(--ink-mute); font-variant-numeric:tabular-nums; white-space:nowrap; } #st-easy .vox .vfit.over { color:var(--acc); font-weight:600; } #st-easy .vox .vfix { margin:8px 0 3px; padding:10px 12px; background:var(--acc-soft); border-radius:6px; font-size:12.5px; line-height:1.5; color:var(--acc); max-width:62ch; } #st-easy .vox .vfix b { display:block; font-weight:600; } #st-easy .vox .vfix span { display:block; margin-top:3px; opacity:.85; } #st-easy .vox .vfix .row { gap:8px; margin-top:8px; } #st-easy .vox .vnoscore { border:1px dashed var(--line-strong); border-radius:8px; padding:13px; font-size:12.5px; line-height:1.55; color:var(--ink-mute); } #st-easy .vox .vnoscore b { display:block; color:var(--ink); font-weight:600; font-size:13px; margin-bottom:5px; } @media (max-width:980px) { #st-easy .vox .vlanes { grid-template-columns:minmax(0,1fr); } #st-easy .vox .vscore, #st-easy .vox .vlanehead.vright { grid-column:1; } #st-easy .vox .vline { grid-template-columns:minmax(0,1fr); } #st-easy .vox .vmeter { grid-column:1; grid-row:3; justify-content:flex-start; } } /* The score, written before it can be played. A cue is a description and a span of shots; that is the spotting pass, and it is what a composer or a generator is handed. Nothing here makes a sound, and the lane says so rather than implying otherwise. */ #st-easy .vox .vcue { border:1px solid var(--good); border-left-width:3px; border-radius:6px; background:var(--good-soft); padding:10px 12px; margin-bottom:8px; } #st-easy .vox .vcue.lost { border-color:var(--warn); background:var(--warn-soft); } #st-easy .vox .vcue b { display:block; font-family:Newsreader,Georgia,serif; font-weight:500; font-size:15px; color:var(--ink); } #st-easy .vox .vcue > span { display:block; font-size:11.5px; color:var(--ink-mute); line-height:1.5; margin-top:3px; } #st-easy .vox .vcue .vunder { color:var(--good); font-weight:500; margin-top:6px; } #st-easy .vox .vcue.lost .vunder { color:var(--warn-ink); } #st-easy .vox .vcue .vlost { color:var(--warn-ink); } #st-easy .vox .vcue .row { margin-top:8px; } #st-easy .vox .vcueform { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line-strong); border-radius:6px; background:var(--card); padding:12px; } #st-easy .vox .vcueform label { display:flex; flex-direction:column; gap:4px; min-width:0; } #st-easy .vox .vcueform label > span { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); } #st-easy .vox .vcueform input[type=text], #st-easy .vox .vcueform input:not([type]), #st-easy .vox .vcueform textarea, #st-easy .vox .vcueform select { font:inherit; font-size:13px; padding:6px 8px; border-radius:6px; min-width:0; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); } #st-easy .vox .vcueform textarea { resize:vertical; font-family:Newsreader,Georgia,serif; font-size:14px; } #st-easy .vox .vcuespan { display:grid; grid-template-columns:1fr 1fr; gap:8px; } #st-easy .vox .vduck { flex-direction:row !important; align-items:center; gap:7px; } #st-easy .vox .vduck span { font-size:12px; color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:400; } #st-easy .vox .vcueform .hint { font-size:11.5px; line-height:1.5; } #st-easy .vox .vnomusic { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.55; color:var(--ink-mute); } /* --------------------------------------------------------------------------- Where an episode begins and ends. The first automated guess used to be the only one: nothing could move a boundary, and the single operation that touched one replaced every episode in the book. Move, split and merge are local. The editor says what each will throw away before it happens, because all three destroy the work of the episodes they name — and none of them touches the rest of the book. --------------------------------------------------------------------------- */ #spChaps .chapwrap + .chapwrap { margin-top:2px; } #spChaps .chap .extent { display:block; font-size:11.5px; color:var(--ink-mute); margin-top:3px; font-variant-numeric:tabular-nums; } .cutform { border:1px solid var(--line-strong); border-top:0; border-radius:0 0 8px 8px; background:var(--card-2); padding:14px; display:flex; flex-direction:column; gap:12px; } .cutform .cutways { display:flex; flex-wrap:wrap; gap:3px; padding:3px; border-radius:7px; background:var(--sunk); align-self:flex-start; } .cutform .cutway { border:0; background:transparent; border-radius:5px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--ink-soft); padding:6px 11px; } .cutform .cutway.on { background:var(--card); color:var(--ink); font-weight:600; } .cutform .cutway:focus-visible { outline:2px solid var(--acc); outline-offset:1px; } .cutform .cutrow { display:flex; flex-direction:column; gap:6px; } .cutform label { display:flex; flex-direction:column; gap:6px; } .cutform label > span { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); } .cutform input[type=range] { width:100%; accent-color:var(--acc); } .cutform input[type=range]:disabled { opacity:.4; } .cutform .cutat { font-size:12px; color:var(--ink-mute); line-height:1.5; } .cutform .cutacts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } /* the cost is the point of the panel, so it is the one thing carrying colour */ .cutform .cutcost { margin:0; padding:9px 11px; border-radius:6px; background:var(--acc-soft); color:var(--acc); font-size:12.5px; line-height:1.5; } /* The design — the words every picture is drawn from. Every selector is scoped to .dsgn: index.html's pinned