/* HK Cut: the cut desk. Dark studio look, one accent, live but quiet motion. */
:root {
  color-scheme: dark;
  --bg: #0b0a12; --bg2: #110f1c; --panel: #171426; --panel2: #1f1b31; --line: #2d2745; --line2: #3b3458;
  --text: #f1edf9; --muted: #a39cbd; --dim: #6f6887;
  --accent: #8b6cff; --accent2: #c9b8ff; --pink: #ff4fa3; --ok: #3ddc97; --warn: #ffc83d; --bad: #ff5c5c; --cyan: #5ad7ff;
  --display: "Sora", "Avenir Next", "Segoe UI", sans-serif; --body: "IBM Plex Sans", "Helvetica Neue", "Segoe UI", sans-serif; --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --r: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 20% -10%, #231c45 0%, var(--bg) 55%), var(--bg); color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid transparent; border-radius: 11px; padding: 12px 18px; background: var(--panel2); color: var(--text); font-weight: 600; transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }
button:active { transform: scale(.985); }
button.primary { background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; box-shadow: 0 8px 24px rgba(139, 108, 255, .28); }
button.primary:hover { filter: brightness(1.06); }
button.ghost { background: transparent; border-color: var(--line2); color: var(--text); }
button.small { padding: 8px 12px; font-size: 13px; border-radius: 9px; }
button:disabled { opacity: .45; cursor: default; transform: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label.pick:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; }
a { color: var(--accent2); }
.wrap { max-width: 1040px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 42px; height: 42px; border-radius: 12px; background: conic-gradient(from 210deg, var(--accent), var(--pink), var(--cyan), var(--accent)); position: relative; box-shadow: 0 6px 20px rgba(139, 108, 255, .35); animation: spin 14s linear infinite; }
.mark::after { content: ""; position: absolute; inset: 4px; border-radius: 9px; background: var(--bg2); }
.mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--text); transform: translate(-50%, -50%) rotate(-35deg); z-index: 1; border-radius: 2px; box-shadow: 0 6px 0 var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
.brand h1 { font: 700 20px/1 var(--display); margin: 0; letter-spacing: -.01em; }
.brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.pill.on i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.panel { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) , var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; min-width: 0; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel h2 { font: 700 17px/1.2 var(--display); margin: 0; display: flex; align-items: center; gap: 10px; }
.panel h2 .n { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--panel2); color: var(--accent2); font: 700 13px var(--mono); }
.panel.done h2 .n { background: rgba(61, 220, 151, .15); color: var(--ok); }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.grow { flex: 1 1 220px; min-width: 0; }
label.pick { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(139, 108, 255, .28); }
label.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.pick.ghost { background: transparent; border: 1px solid var(--line2); box-shadow: none; color: var(--text); padding: 10px 14px; font-weight: 600; font-size: 13.5px; }
label.pick[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; }
.fact { display: grid; gap: 2px; min-width: 0; }
.fact span { font-size: 12px; color: var(--muted); }
.fact b { font: 600 14px/1.3 var(--body); overflow-wrap: anywhere; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; align-items: baseline; color: var(--muted); }
.steps li .val { grid-column: 2; font: 500 12.5px/1.4 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.steps li[data-state="run"] { color: var(--text); }
.steps li[data-state="done"] { color: var(--text); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); margin-top: 6px; position: relative; }
li[data-state="run"] .dot { background: var(--warn); }
li[data-state="run"] .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--warn); opacity: .6; animation: ping 1.2s ease-out infinite; }
@keyframes ping { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
li[data-state="done"] .dot { background: var(--ok); }
li[data-state="fail"] .dot { background: var(--bad); }
.bar { height: 6px; border-radius: 99px; background: var(--panel2); overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--pink)); transition: width .25s ease; }
.bar.busy i { width: 35% !important; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.big { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--panel2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.tile .num { font: 700 26px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.tile .lbl { font-size: 12.5px; color: var(--muted); }
.status { font-size: 13px; color: var(--muted); }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); } .status.warn { color: var(--warn); }
.note { padding: 12px 14px; border-radius: 12px; background: var(--panel2); border-left: 4px solid var(--muted); font-size: 14px; }
.note.good { border-left-color: var(--ok); } .note.warn { border-left-color: var(--warn); } .note.bad { border-left-color: var(--bad); }
/* what the recheck of a finished cut says (and, after a fix, the lines it took out) */
.note.recheck b { display: block; margin-bottom: 4px; color: var(--ok); } .note.recheck div { margin-top: 3px; overflow-wrap: anywhere; }
.note.recheck .hint { margin-top: 7px; color: var(--muted); font-size: 13px; } .note.recheck .spin { display: inline-block; vertical-align: -1px; margin-right: 6px; }
input[type=text], textarea { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); }
textarea { min-height: 84px; resize: vertical; }
input.pw { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--body); padding: 7px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.chip.yes { color: var(--ok); border-color: rgba(61, 220, 151, .35); background: rgba(61, 220, 151, .08); }
.chip.no { color: var(--bad); border-color: rgba(255, 92, 92, .35); background: rgba(255, 92, 92, .07); }
.chip.hmm { color: var(--warn); border-color: rgba(255, 200, 61, .35); background: rgba(255, 200, 61, .08); }
/* the script: one card per kept line, dropped attempts folded under it */
.lines { display: grid; gap: 10px; counter-reset: line; }
.line { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; transition: border-color .15s ease, opacity .2s ease; }
.line.kept { border-color: rgba(139, 108, 255, .45); }
.line.dropped { opacity: .55; }
.line .head { display: flex; gap: 10px; align-items: flex-start; }
.line .idx { font: 700 12px/1 var(--mono); color: var(--accent2); background: rgba(139, 108, 255, .14); padding: 6px 8px; border-radius: 8px; margin-top: 2px; white-space: nowrap; }
.line .txt { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.45; }
.line .txt.dim { color: var(--muted); }
.line .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12.5px; color: var(--muted); }
.line .meta b { color: var(--text); font-weight: 600; }
.line .join { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.line .join button { border-radius: 0; padding: 5px 10px; font-size: 12px; background: transparent; color: var(--muted); border: 0; }
.line .join button.on { background: var(--accent); color: #fff; }
.line .flags { display: grid; gap: 4px; font-size: 12.5px; color: var(--warn); }
.line .alts { display: grid; gap: 6px; border-top: 1px dashed var(--line2); padding-top: 8px; }
.alt { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.alt .why { font-size: 11.5px; color: var(--dim); white-space: nowrap; margin-top: 3px; }
.alt .t { flex: 1 1 auto; min-width: 0; }
.alt.on { color: var(--text); }
.alt .use { margin-left: auto; }
.tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.tools .k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tools input[type=number] { width: 74px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.joins { display: grid; gap: 6px; font: 12.5px/1.5 var(--mono); color: var(--muted); max-height: 240px; overflow: auto; padding-right: 4px; }
.joins div { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; }
.joins .warnj { color: var(--warn); }
.ring { --p: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--panel2) 0); position: relative; transition: --p .2s linear; flex: 0 0 auto; }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--panel); }
.ring b { position: relative; font: 700 22px var(--mono); font-variant-numeric: tabular-nums; }
.ring small { position: relative; display: block; text-align: center; font-size: 11px; color: var(--muted); }
.ring .inner { position: relative; display: grid; place-items: center; }
.recent { display: grid; gap: 8px; }
.recent button { text-align: left; display: grid; gap: 2px; padding: 10px 12px; }
.recent small { color: var(--muted); font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
pre.raw { margin: 0; font: 12px/1.5 var(--mono); color: var(--muted); background: var(--bg2); border-radius: 10px; padding: 12px; overflow: auto; max-height: 220px; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); z-index: 20; max-width: calc(100vw - 32px); animation: rise .25s ease both; }
.toast.bad { border-color: rgba(255, 92, 92, .5); }
@media (max-width: 520px) { .panel { padding: 14px; } .tile .num { font-size: 22px; } .line .idx { display: none; } .joins div { grid-template-columns: 56px 1fr; } .joins div span:last-child { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .mark, li[data-state="run"] .dot::after, .bar.busy i { animation: none; } .panel { animation: none; } }

/* ---- the simple flow: pick -> work -> done (6 Oct 2026, Harsh: one video in, visible processing, the cut out) */
.stage { display: grid; gap: 16px; animation: rise .35s ease both; }
.drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 46px 24px; border-radius: 22px; border: 1.5px dashed rgba(139, 108, 255, .55); background: linear-gradient(180deg, rgba(139, 108, 255, .10), rgba(139, 108, 255, .03)); cursor: pointer; text-align: center; transition: border-color .15s ease, transform .15s ease, background .2s ease; }
.drop:hover, .drop:focus-within { border-color: var(--accent2); transform: translateY(-1px); background: linear-gradient(180deg, rgba(139, 108, 255, .16), rgba(139, 108, 255, .05)); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--accent), #6d4df0); box-shadow: 0 10px 30px rgba(139, 108, 255, .35); position: relative; margin-bottom: 6px; }
.drop-icon::before, .drop-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 3px; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); }
.drop-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.drop-title { font: 700 clamp(20px, 4.5vw, 26px)/1.2 var(--display); }
.drop-sub { color: var(--muted); font-size: 14px; max-width: 46ch; }
details.more { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
details.more summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "▸ "; color: var(--accent2); }
details.more[open] summary::before { content: "▾ "; }
.workcard { display: flex; gap: 22px; align-items: center; padding: 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--panel); border: 1px solid var(--line); flex-wrap: wrap; }
.ring.big { width: 150px; height: 150px; }
.ring.big::before { inset: 12px; }
.ring.big b { font-size: 28px; }
.ring.busy { background: conic-gradient(from var(--spin, 0deg), var(--accent) 0 30%, var(--panel2) 30% 100%); animation: turn 1.1s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes turn { to { --spin: 360deg; } }
.worktext { display: grid; gap: 6px; flex: 1 1 240px; min-width: 0; }
.doing { font: 700 clamp(22px, 4.8vw, 30px)/1.15 var(--display); letter-spacing: -.01em; }
.detail { color: var(--text); font-size: 16px; }
.eta { color: var(--muted); font-size: 14px; }
.track { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.track li { flex: 1 1 90px; text-align: center; padding: 9px 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); font-size: 13px; font-weight: 600; position: relative; overflow: hidden; }
.track li[data-state="run"] { color: var(--text); border-color: rgba(139, 108, 255, .6); }
.track li[data-state="run"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: linear-gradient(90deg, var(--accent), var(--pink)); animation: slide 1.4s ease-in-out infinite; }
.track li[data-state="done"] { color: var(--ok); border-color: rgba(61, 220, 151, .35); }
.track li[data-state="done"]::before { content: "✓ "; }
.result { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 22px; align-items: start; }
.reelcol { display: grid; gap: 12px; min-width: 0; align-content: start; }
.reel { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 16px 48px rgba(0, 0, 0, .45); isolation: isolate; }
#player { display: block; width: 100%; height: 100%; background: #000; }
.resultside { display: grid; gap: 12px; align-content: start; }
.bignum { font: 700 clamp(40px, 8vw, 56px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bigsub { color: var(--muted); font-size: 15px; }
.savebar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
button.xl, a.xl { padding: 16px 26px; font-size: 17px; border-radius: 14px; text-decoration: none; display: inline-flex; align-items: center; }
a.xl.ghost { border: 1px solid var(--line2); color: var(--text); }
.checkline { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.checkline.ok { color: var(--ok); } .checkline.warn { color: var(--warn); }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--accent); animation: rot .8s linear infinite; flex: 0 0 auto; }
@keyframes rot { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .result { grid-template-columns: 1fr; } .reelcol { max-width: 320px; width: 100%; margin: 0 auto; } .workcard { padding: 20px; } .ring.big { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .ring.busy, .spin, .track li[data-state="run"]::after { animation: none; } }

/* ---- choosing the video (6 Oct 2026). iPhone / iPad: two ways in, Files first (the original, at once), Photos second (converted first).
   One big line when nothing usable came in, the tip under it. A file can also be dropped on a card. */
.ways { display: grid; gap: 12px; }
.drop.second { padding: 26px 24px; gap: 6px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--panel); }
.drop.second:hover, .drop.second:focus-within { border-color: var(--accent2); background: var(--panel2); }
.drop.second .drop-title { font-size: clamp(18px, 4vw, 22px); }
.drop.over, .drop.second.over { border-style: solid; border-color: var(--accent2); background: linear-gradient(180deg, rgba(139, 108, 255, .28), rgba(139, 108, 255, .10)); transform: scale(1.01); }
.pickmsg { text-align: center; font: 700 clamp(22px, 4.8vw, 30px)/1.2 var(--display); letter-spacing: -.01em; color: var(--warn); padding-top: 4px; }
.tip { margin: 0; text-align: center; text-wrap: balance; color: var(--text); font-size: 16px; line-height: 1.5; }
.notes { display: grid; gap: 12px; }
.ways .drop-sub { font-size: 16px; }

/* ---- several clips chosen at once: is this the order? (6 Oct 2026). One tile per clip: its picture, a big number, the length, and
   three big buttons (earlier, later, remove; each at least 44 px). A tile stays where it is in the page and is placed by "order",
   so no picture loads again when clips change places. The bar with "Start the cut" stays in reach under a long list. */
.orderhead { margin: 0; font: 700 clamp(24px, 5.4vw, 34px)/1.15 var(--display); letter-spacing: -.01em; }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 14px; border-radius: 18px; }
.clips.over { outline: 2px dashed var(--accent2); outline-offset: 8px; background: rgba(139, 108, 255, .10); }
.clip { display: grid; gap: 8px; min-width: 0; align-content: start; }
.clipshot { position: relative; aspect-ratio: var(--shape, 9 / 16); border-radius: 16px; overflow: hidden; background: #05040a; border: 1px solid var(--line2); }
.clipshot video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clipnum { position: absolute; left: 10px; top: 10px; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; font: 700 26px/1 var(--display); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.cliplen { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 10px; background: rgba(11, 10, 18, .82); color: var(--text); font: 700 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.clipbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.clipbtns button { min-height: 50px; padding: 0; border-color: var(--line2); background: var(--panel); font-size: 24px; line-height: 1; }
.clipbtns button.out { color: var(--bad); }
.orderbar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(23, 20, 38, .95); border: 1px solid var(--line2); box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); }
.orderbar .primary { flex: 1 1 220px; justify-content: center; }
label.pick.xl { padding: 16px 26px; font-size: 17px; border-radius: 14px; justify-content: center; }
body:has(#order:not([hidden])) .toast { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }   /* a word about the clips shows above the bar, not on it */
/* a phone: two tiles side by side, stills not taller than needed to know the clip, and a lower bar (Start on its own row) so that
   the bar does not lie over the first row of tiles */
@media (max-width: 520px) {
  .clipshot { width: 100%; max-height: 240px; }
  .orderbar { gap: 8px; padding: 10px; }
  .orderbar .primary { flex: 1 1 100%; padding: 14px 20px; }
  .orderbar .ghost { flex: 1 1 0; justify-content: center; padding: 11px 12px; white-space: nowrap; }
}
@media (max-width: 400px) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }

/* ---- the Gemini bill (6 Oct 2026): one big number, four tiles, the rest behind "Where it went" */
.costcard { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 22px; border-radius: 22px; border: 1px solid var(--line2);
  background: linear-gradient(150deg, rgba(61, 220, 151, .13), rgba(139, 108, 255, .08) 55%, rgba(139, 108, 255, 0) 90%), var(--panel); }
.costcard::before { content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61, 220, 151, .30), rgba(61, 220, 151, 0) 68%); animation: costglow 7s ease-in-out infinite alternate; }
@keyframes costglow { from { transform: translate(0, 0) scale(1); opacity: .65; } to { transform: translate(-36px, 22px) scale(1.18); opacity: 1; } }
.costmain { position: relative; display: grid; gap: 2px; }
.costlabel { color: var(--muted); font: 600 16px/1.3 var(--body); }
.costbig { font: 700 clamp(44px, 10vw, 64px)/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.costsince { color: var(--muted); font-size: 16px; }
.costtiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ctile { background: var(--panel2); border-radius: 14px; padding: 14px 12px; display: grid; gap: 4px; min-width: 0; }
.ctile b { font: 700 clamp(19px, 3.6vw, 24px)/1.15 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile span { color: var(--muted); font-size: 15px; }
.costcard details.more { position: relative; background: rgba(0, 0, 0, .18); }
.costcard details.more summary { font-size: 15px; }
.costrows { display: grid; gap: 6px; margin-top: 10px; }
.costrows:empty { display: none; }
.costrows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel2); font-size: 15px; }
.costrows > div > span { min-width: 0; overflow-wrap: anywhere; }
.costrows > div b { font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
.costrows > div small { display: block; color: var(--muted); font-size: 14px; }
.costrows h3 { margin: 6px 0 0; font: 600 15px var(--body); color: var(--muted); }
.costnote { margin: 12px 0 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.jobcost { font: 600 17px/1.4 var(--body); color: var(--text); padding: 12px 14px; border-radius: 12px; background: var(--panel2); border-left: 4px solid var(--ok); }
.jobcost b { font: 700 19px var(--mono); color: var(--ok); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .costtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .costcard { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .costcard::before { animation: none; } }

/* ---- the Diamond Room (6 Oct 2026, Harsh: "3D wala, ekdum futuristic"). A live 3D room behind the page (room3d.js): the raw recording
   is a rough stone, lasers cut it while the page works, the finished cut is a brilliant. Everything here only applies once the room
   is really drawn (body.room-on); without it the page keeps the look above. One accent (laser violet); ember only for what is cut away. */
#room { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; pointer-events: none; }
.wrap { position: relative; z-index: 1; }
.roomspace, .heroline { display: none; }
.cert { display: none; }
.mark svg { display: none; }
body.room-on { background: #06050b; }
body.room-on #room { display: block; }
body.room-on .roomspace { display: block; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
body.room-on .roomspace:active { cursor: grabbing; }
body.room-on #space-pick, body.room-on #space-login { height: clamp(220px, 33vh, 440px); }
body.room-on #login { background: rgba(14, 12, 26, .66); border-color: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: 560px; width: 100%; justify-self: center; }
body.room-on #space-work { height: clamp(270px, 44vh, 560px); }
body.room-on #space-done { height: clamp(150px, 23vh, 280px); }
body.room-on .mark { background: none; box-shadow: none; animation: none; width: 46px; height: 46px; border-radius: 0; }
body.room-on .mark::before, body.room-on .mark::after { display: none; }
body.room-on .mark svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 12px rgba(139, 108, 255, .65)); }
body.room-on .brand h1 { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
body.room-on .brand small { font-size: 14px; }
body.room-on .pill { background: rgba(14, 12, 26, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .14); font-size: 13px; padding: 8px 12px; }
body.room-on .heroline { display: block; margin: -6px 0 2px; text-align: center; font: 800 clamp(30px, 6.4vw, 56px)/1.02 var(--display); letter-spacing: -.035em; color: #f4f1fb; text-shadow: 0 0 44px rgba(139, 108, 255, .45); text-wrap: balance; }
body.room-on .heroline b { font-weight: 800; background: linear-gradient(100deg, #fff 10%, #cdbfff 55%, #8b6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the page's own parts stand in the room as glass */
body.room-on .drop { background: linear-gradient(180deg, rgba(139, 108, 255, .16), rgba(14, 12, 26, .55)); border: 1px solid rgba(205, 191, 255, .38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10); padding: 34px 24px; }
body.room-on .drop:hover, body.room-on .drop:focus-within { border-color: #fff; background: linear-gradient(180deg, rgba(139, 108, 255, .26), rgba(14, 12, 26, .55)); }
body.room-on .drop.second { background: rgba(14, 12, 26, .58); border: 1px solid rgba(255, 255, 255, .16); padding: 22px 24px; }
body.room-on .drop.over, body.room-on .drop.second.over { border-color: #fff; background: linear-gradient(180deg, rgba(139, 108, 255, .42), rgba(139, 108, 255, .16)); }
body.room-on .drop-icon { box-shadow: 0 10px 40px rgba(139, 108, 255, .7); }
body.room-on details.more { background: rgba(14, 12, 26, .58); border-color: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.room-on .costcard { background: linear-gradient(150deg, rgba(139, 108, 255, .20), rgba(14, 12, 26, .66) 60%); border-color: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.room-on .costcard::before { background: radial-gradient(circle, rgba(139, 108, 255, .42), rgba(139, 108, 255, 0) 68%); }
body.room-on .ctile, body.room-on .costrows > div { background: rgba(255, 255, 255, .06); }
body.room-on .tip { text-shadow: 0 2px 18px #000; }
/* while it works: the stone and the lasers above, the words of the moment under them, nothing boxed in */
body.room-on .workcard { background: none; border: 0; padding: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
body.room-on .ring.big { width: auto; height: auto; border-radius: 0; background: none; animation: none; min-height: 0; }
body.room-on .ring.big::before { display: none; }
body.room-on .ring.big b { font: 800 clamp(58px, 13vw, 112px)/.95 var(--display); letter-spacing: -.045em; text-shadow: 0 0 44px rgba(139, 108, 255, .5); }
body.room-on .ring.big b:empty { display: none; }
body.room-on .ring.big small { font: 500 14px/1.2 var(--mono); color: var(--accent2); }
body.room-on .ring.big small:empty { display: none; }
body.room-on .worktext { flex: 0 1 auto; justify-items: center; gap: 4px; }
body.room-on .doing { font: 700 clamp(24px, 4.6vw, 36px)/1.12 var(--display); text-shadow: 0 2px 24px #000; }
body.room-on .detail { font-size: 17px; text-shadow: 0 2px 18px #000; max-width: 46ch; text-wrap: balance; }
body.room-on .eta { font: 500 15px/1.3 var(--mono); color: var(--accent2); }
body.room-on .track { justify-content: center; }
body.room-on .track li { flex: 0 1 132px; background: rgba(14, 12, 26, .58); border-color: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; font-size: 14px; }
body.room-on .track li[data-state="run"] { border-color: rgba(205, 191, 255, .8); box-shadow: 0 0 26px rgba(139, 108, 255, .4); }
body.room-on .track li[data-state="run"]::after { background: linear-gradient(90deg, var(--accent), #fff); }
body.room-on #work .row { justify-content: center; }
/* the cut is there: the brilliant above, the grading card beside the video */
body.room-on .bignum { font: 800 clamp(52px, 10vw, 84px)/.95 var(--display); letter-spacing: -.04em; text-shadow: 0 0 44px rgba(139, 108, 255, .45); }
body.room-on .bigsub { font-size: 16px; }
body.room-on .reel { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12); }
body.room-on .note, body.room-on .jobcost { background: rgba(14, 12, 26, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.room-on .cert { width: 100%; max-width: 420px; padding: 20px 22px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(160deg, rgba(60, 44, 130, .78), rgba(12, 10, 24, .86) 60%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.room-on .cert:not([hidden]) { display: block; animation: certin .9s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes certin { from { opacity: 0; transform: perspective(800px) translateY(28px) rotateX(14deg); } to { opacity: 1; transform: none; } }
.cert .k { font: 500 13px/1 var(--mono); color: var(--accent2); letter-spacing: .08em; text-transform: uppercase; }
.cert .grade { font: 800 clamp(34px, 5vw, 46px)/1.05 var(--display); letter-spacing: -.03em; color: #7df0c4; margin: 6px 0 14px; text-shadow: 0 0 30px rgba(125, 240, 196, .35); }
.cert.look .grade { color: var(--warn); text-shadow: 0 0 30px rgba(255, 200, 61, .3); }
.cert dl { margin: 0; display: grid; gap: 9px; }
.cert dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cert dt { color: var(--muted); font-size: 16px; }
.cert dd { margin: 0; font: 700 18px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
body.room-on .checkline.carded { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }      /* the card says it now */
@media (max-width: 640px) {
  body.room-on #space-pick, body.room-on #space-login { height: clamp(170px, 27vh, 260px); }
  body.room-on #space-work { height: clamp(230px, 40vh, 340px); }
  body.room-on #space-done { height: clamp(110px, 17vh, 170px); }
  body.room-on .drop { padding: 26px 18px; }
  body.room-on .drop.second { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { body.room-on .cert:not([hidden]) { animation: none; } }

/* ---- the 3D visuals (7 Oct 2026). A button; pressed, the cut plays in his reel layout: a 16:9 strip of live 3D above the speaker,
   the video a little bigger and lower so the strip never touches the head. Under it: every visual as a picture, a tap takes one out. */
.viscard { display: grid; gap: 8px; }
.visbtn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; max-width: 420px; text-align: left; padding: 16px 18px; border-radius: 20px;
  border: 1px solid rgba(201, 184, 255, .5); background: linear-gradient(125deg, rgba(139, 108, 255, .34), rgba(255, 79, 163, .16) 52%, rgba(90, 215, 255, .2)), rgba(14, 12, 26, .72);
  box-shadow: 0 14px 40px rgba(60, 40, 160, .32), inset 0 1px 0 rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.visbtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent); transform: skewX(-18deg); animation: vissweep 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes vissweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.visbtn:disabled { opacity: 1; }
.visbtn:disabled:not(.busy) { opacity: .6; }
.vistxt { display: grid; gap: 3px; min-width: 0; }
.vistxt b { font: 700 20px/1.15 var(--display); letter-spacing: -.01em; }
.vistxt small { font: 500 15px/1.3 var(--body); color: var(--accent2); }
.visico { position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin: 4px 6px 4px 4px; transform-style: preserve-3d; animation: viscube 9s linear infinite; }
.visico i { position: absolute; inset: 0; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .78); background: linear-gradient(135deg, rgba(201, 184, 255, .5), rgba(139, 108, 255, .14)); }
.visico i:nth-child(1) { transform: translateZ(22px); } .visico i:nth-child(2) { transform: rotateY(180deg) translateZ(22px); }
.visico i:nth-child(3) { transform: rotateY(90deg) translateZ(22px); } .visico i:nth-child(4) { transform: rotateY(-90deg) translateZ(22px); }
.visico i:nth-child(5) { transform: rotateX(90deg) translateZ(22px); } .visico i:nth-child(6) { transform: rotateX(-90deg) translateZ(22px); }
@keyframes viscube { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.visbtn.busy .visico { animation-duration: 1.5s; }
.visstatus { font-size: 15px; color: var(--muted); }
.visstatus.bad { color: var(--bad); }
.visstatus:empty { display: none; }
/* the reel with the strip */
.result.vis { grid-template-columns: minmax(240px, min(50vw, 500px)) 1fr; }
.result.vis .reel { width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }
.reel.vis #player { transform: translateY(var(--down, 24%)) scale(1.15); object-fit: cover; }
#vstrip { position: absolute; left: 0; top: 0; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #06050b; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: opacity .35s ease; }
.reel.prep #vstrip { opacity: 0; }
.reeltap { position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; border-radius: 0; background: transparent; }
.reeltap:active { transform: none; }
.reel.vis.paused .reeltap::after { content: ""; position: absolute; left: 50%; top: 66%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(10, 8, 20, .5) linear-gradient(90deg, #fff, #fff) no-repeat 54% 50% / 26px 30px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask: none; clip-path: none; }
.reel.vis.paused .reeltap::after { background: rgba(10, 8, 20, .5); }
.reel.vis.paused .reeltap::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 66%; margin: -15px 0 0 -9px; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; }
.reelbar { display: flex; align-items: center; gap: 10px; width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }
.reelbar .rb { position: relative; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: rgba(23, 20, 38, .8); border: 1px solid var(--line2); }
.reelbar .rb::before { content: ""; position: absolute; left: 50%; top: 50%; border-style: solid; }
.reelbar .rb.play::before { margin: -9px 0 0 -6px; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.reelbar .rb.pause::before { margin: -9px 0 0 -8px; width: 5px; height: 18px; border: 0; background: #fff; box-shadow: 11px 0 0 #fff; }
.reelbar .rb.up::before { margin: -6px 0 0 -8px; border-width: 0 8px 11px 8px; border-color: transparent transparent var(--accent2) transparent; }
.reelbar .rb.down::before { margin: -5px 0 0 -8px; border-width: 11px 8px 0 8px; border-color: var(--accent2) transparent transparent transparent; }
#vseek { flex: 1 1 auto; min-width: 0; height: 36px; margin: 0; accent-color: var(--accent); }
.vtime { flex: 0 0 auto; min-width: 4ch; font: 600 15px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
/* every visual as a picture */
.visdeck { display: grid; gap: 16px; padding: 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(160deg, rgba(46, 34, 104, .62), rgba(12, 10, 24, .84) 60%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: rise .45s ease both; }
.vishead { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.visnum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.visnum b { font: 800 46px/1 var(--display); letter-spacing: -.03em; text-shadow: 0 0 34px rgba(139, 108, 255, .5); }
.visnum span { font: 600 18px/1 var(--body); color: var(--text); }
.visnum small { flex-basis: 100%; font: 500 15px/1.3 var(--body); color: var(--accent2); }
.visdots { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.vdot { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); background: var(--c, #8b6cff); color: var(--c, #8b6cff); box-shadow: 0 0 18px currentColor; }
.vdot[aria-pressed="true"] { border-color: #fff; transform: scale(1.14); }
.vdot.outfit::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); }
.vistiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.vtile { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: #06050b; transition: box-shadow .2s ease, border-color .2s ease; }
.vtile .vshot { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.vtile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0a16; transition: filter .2s ease; }
.vtile .vfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: rgba(20, 17, 36, .9); }
.vtile .vwhen { font: 600 15px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.vtile .vx { position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .3); }
.vtile .vx::before, .vtile .vx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.vtile .vx::after { transform: rotate(-45deg); }
.vtile.off img { filter: grayscale(1) brightness(.4); }
.vtile.off .vx { background: var(--accent); border-color: #fff; }
.vtile.off .vx::before { transform: rotate(0deg); } .vtile.off .vx::after { transform: rotate(90deg); }
.vtile.now { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(139, 108, 255, .55); }
.visfoot { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.visnote { flex: 1 1 260px; font-size: 15px; color: var(--muted); }
.visnote.ok { color: var(--ok); } .visnote.bad { color: var(--bad); }
@media (max-width: 640px) { .result.vis { grid-template-columns: 1fr; } .result.vis .reelcol { max-width: 420px; } .visdots { margin-left: 0; } .vistiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .visbtn::after, .visico { animation: none; } .visico { transform: rotateX(-24deg) rotateY(38deg); } }

/* ---------------------------------------------------------------- voiceover reels (7 Oct 2026): the second way in, its tray of clips, its done screen (static/reel.js) */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px; border-radius: 22px; background: rgba(14, 12, 26, .62); border: 1px solid rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mode { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 12px; border-radius: 17px; background: transparent; border: 1px solid transparent; color: var(--muted); text-align: left; min-width: 0; }
.mode .modetxt { display: grid; gap: 2px; min-width: 0; }
.mode b { font: 700 clamp(16px, 3.6vw, 20px)/1.15 var(--display); color: inherit; }
.mode small { font: 500 13.5px/1.25 var(--body); color: var(--dim); }
.mode.on { background: linear-gradient(135deg, rgba(139, 108, 255, .42), rgba(109, 77, 240, .22)); border-color: rgba(205, 191, 255, .55); color: #fff; box-shadow: 0 10px 34px rgba(139, 108, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .16); }
.mode.on small { color: var(--accent2); }
.modeico { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); display: grid; place-items: center; }
.mode.on .modeico { background: linear-gradient(135deg, var(--accent), #6d4df0); border-color: rgba(255, 255, 255, .5); box-shadow: 0 6px 20px rgba(139, 108, 255, .6); }
.modeico.talk i { display: none; }
.modeico.talk::before { content: ""; position: absolute; left: 50%; top: 8px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; }
.modeico.talk::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 22px; height: 10px; margin-left: -11px; border-radius: 11px 11px 3px 3px; background: #fff; }
.modeico.vo { display: flex; align-items: center; justify-content: center; gap: 3px; }
.modeico.vo i { width: 4px; border-radius: 2px; background: #fff; height: 10px; }
.modeico.vo i:nth-child(2) { height: 20px; } .modeico.vo i:nth-child(3) { height: 14px; }
.mode.on .modeico.vo i { animation: eq 1.1s ease-in-out infinite; }
.mode.on .modeico.vo i:nth-child(2) { animation-delay: -.35s; } .mode.on .modeico.vo i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1.15); } }
.cutpick { display: contents; } .cutpick[hidden] { display: none; }
.reelpick { display: grid; gap: 16px; } .reelpick[hidden] { display: none; }
.reelways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reelways .drop { padding: 30px 16px; }
.reelways .drop-title { font-size: clamp(18px, 3.8vw, 24px); overflow-wrap: anywhere; }
.reelways .drop-sub { font-size: 15.5px; }
.drop-icon.wave::before, .drop-icon.wave::after, .drop-icon.stack::before, .drop-icon.stack::after { display: none; }
.drop-icon.wave { display: flex; align-items: center; justify-content: center; gap: 4px; }
.drop-icon.wave i { width: 5px; height: 14px; border-radius: 3px; background: #fff; animation: eq 1.2s ease-in-out infinite; }
.drop-icon.wave i:nth-child(2) { height: 28px; animation-delay: -.2s; } .drop-icon.wave i:nth-child(3) { height: 38px; animation-delay: -.5s; } .drop-icon.wave i:nth-child(4) { height: 24px; animation-delay: -.8s; } .drop-icon.wave i:nth-child(5) { height: 12px; animation-delay: -1s; }
.drop-icon.stack i { position: absolute; left: 50%; top: 50%; width: 22px; height: 34px; margin: -17px 0 0 -11px; border-radius: 5px; border: 2.5px solid #fff; background: rgba(109, 77, 240, .9); }
.drop-icon.stack i:nth-child(1) { transform: translateX(-11px) rotate(-12deg); opacity: .6; } .drop-icon.stack i:nth-child(2) { transform: translateX(11px) rotate(12deg); opacity: .6; } .drop-icon.stack i:nth-child(3) { transform: translateY(-1px); }
.drop.got, body.room-on .drop.got { border: 1.5px solid rgba(61, 220, 151, .7); background: linear-gradient(180deg, rgba(61, 220, 151, .16), rgba(14, 12, 26, .55)); }
.drop.got .drop-icon { background: linear-gradient(135deg, #2fbf82, #1c8f63); box-shadow: 0 10px 34px rgba(61, 220, 151, .45); }
#clipsphotos { justify-self: center; }
.rtray { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 12px; border-radius: 20px; background: rgba(14, 12, 26, .58); border: 1px solid rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rtray[hidden] { display: none; }
.rclip { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #05040a; border: 1px solid var(--line2); animation: rise .3s ease both; }
.rclip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rclip img:not([src]) { visibility: hidden; }
.rclip[data-state="reading"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(139, 108, 255, 0) 30%, rgba(139, 108, 255, .35) 50%, rgba(139, 108, 255, 0) 70%); background-size: 240% 100%; animation: sweep 1.2s linear infinite; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.rclip[data-state="bad"] { border-color: var(--bad); } .rclip[data-state="bad"] img { opacity: .25; }
.rnum, .shotnum { position: absolute; left: 7px; top: 7px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; font: 700 17px/1 var(--display); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.rlen, .shotlen { position: absolute; right: 7px; bottom: 7px; padding: 4px 8px; border-radius: 9px; background: rgba(11, 10, 18, .84); color: var(--text); font: 700 14px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.rclip[data-state="bad"] .rlen { left: 7px; right: 7px; text-align: center; color: var(--bad); font: 600 13px/1.2 var(--body); }
.rx { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: rgba(11, 10, 18, .78); border: 1px solid rgba(255, 255, 255, .35); }
.rx::before, .rx::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.rx::after { transform: rotate(-45deg); }
.rmove { display: none; position: absolute; left: 6px; right: 6px; bottom: 34px; grid-template-columns: 1fr 1fr; gap: 6px; }
.rtray.inorder .rmove { display: grid; }
.rmove button { padding: 6px 0; font-size: 18px; line-height: 1; background: rgba(11, 10, 18, .8); border-color: rgba(255, 255, 255, .3); border-radius: 9px; }
.reelbar2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .reelbar2[hidden] { display: none; }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 600 17px/1.2 var(--body); color: var(--text); -webkit-user-select: none; user-select: none; } .switch[hidden] { display: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { position: relative; flex: 0 0 auto; width: 56px; height: 32px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); transition: background .18s ease, border-color .18s ease; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.switch input:checked + i { background: linear-gradient(135deg, var(--accent), #6d4df0); border-color: rgba(255, 255, 255, .6); }
.switch input:checked + i::after { transform: translateX(24px); }
.switch input:focus-visible + i { outline: 2px solid var(--pink); outline-offset: 2px; }
.reelgo { justify-content: center; width: 100%; padding: 20px 26px; font: 700 clamp(18px, 4vw, 22px)/1.2 var(--display); border-radius: 18px; }
.reelgo:disabled { opacity: .5; box-shadow: none; }
#reelmsg { color: var(--accent2); }
body.room-on #space-reeldone { height: clamp(150px, 23vh, 280px); }
/* the done screen: every picture of the reel with its words */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 12px; }
.shot { display: grid; gap: 7px; padding: 0; background: none; border: 0; border-radius: 16px; text-align: left; color: var(--text); align-content: start; min-width: 0; }
.shot:hover:not(:disabled) { transform: translateY(-2px); }
.shotpic { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #05040a; border: 1px solid rgba(255, 255, 255, .18); transition: box-shadow .2s ease, border-color .2s ease; }
.shotpic img, .moment img, .sclip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shotwords { font: 500 15px/1.3 var(--body); color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.shotflag, .shotslow, .sused { position: absolute; right: 7px; top: 7px; padding: 4px 8px; border-radius: 9px; font: 700 13px/1.2 var(--body); background: var(--warn); color: #1b1400; }
.shotslow { top: auto; bottom: 7px; right: auto; left: 7px; background: rgba(11, 10, 18, .84); color: var(--cyan); }
.sused { background: rgba(11, 10, 18, .84); color: var(--accent2); font-weight: 600; }
.shot.doubt .shotpic { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.shot.hand .shotpic { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.shot.now .shotpic { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(139, 108, 255, .55); }
.shot.fresh .shotpic { animation: fresh 1.1s ease both; }
@keyframes fresh { 0% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(61, 220, 151, .9); } 60% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } 100% { transform: scale(1); } }
.board #remake { margin-left: auto; }
/* the sheet: every clip, to put another one under these words */
.sheetback { position: fixed; inset: 0; z-index: 30; background: rgba(4, 3, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sheetback[hidden] { display: none; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0; border: 1px solid rgba(255, 255, 255, .2); border-bottom: 0; background: linear-gradient(170deg, rgba(46, 34, 104, .97), rgba(12, 10, 24, .98) 55%); box-shadow: 0 -20px 70px rgba(0, 0, 0, .6); animation: sheetup .26s cubic-bezier(.2, .9, .2, 1) both; }
.sheet[hidden] { display: none; }
.sheet.busy { pointer-events: none; opacity: .6; }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sheetwords { font: 700 clamp(18px, 4vw, 24px)/1.25 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sheetsub { font: 600 15px/1.2 var(--body); color: var(--accent2); } .sheetsub[hidden] { display: none; }
.moments { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .moments[hidden] { display: none; }
.moment, .sclip { position: relative; flex: 0 0 auto; width: 92px; aspect-ratio: 9 / 16; padding: 0; border-radius: 13px; overflow: hidden; background: #05040a; border: 1px solid rgba(255, 255, 255, .2); }
.sheetclips { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.sclip { width: auto; }
.moment.on, .sclip.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); opacity: 1; }
.sclip.short { opacity: .35; }
.sclip.short .shotlen { color: var(--warn); font: 600 12.5px/1.2 var(--body); }
body.sheet-open { overflow: hidden; }
@media (max-width: 560px) { .reelways { grid-template-columns: 1fr; } .mode { flex-direction: column; text-align: center; gap: 8px; padding: 12px 8px; } .mode small { display: none; } .rtray { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .shots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .mode.on .modeico.vo i, .drop-icon.wave i, .rclip[data-state="reading"]::after, .shot.fresh .shotpic, .sheet, .rclip { animation: none; } }

/* the Mac's own cut: shown only when the server is a Mac that cuts the picture itself (app.js macDress) */
.macbox { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 2px; }
.maclabel { color: var(--muted); font-size: 14px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: rgba(14, 12, 26, .62); border: 1px solid var(--line2); }
.seg button { padding: 9px 14px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14px; }
.seg button.on { background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; }
.macline { text-align: center; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.macline.ok { color: var(--ok); } .macline.bad { color: var(--bad); }

/* "the Mac is on this network": the offer at the top of the page (app.js macNear) */
.macnear { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(135deg, rgba(61, 220, 151, .16), rgba(139, 108, 255, .16)); border: 1px solid rgba(61, 220, 151, .45); }
.macneartxt { font-size: 15px; flex: 1 1 260px; } .macneartxt b { color: var(--ok); }
.macnearbtns { display: inline-flex; align-items: center; gap: 8px; }
.macneargo { display: inline-block; padding: 11px 16px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), #6d4df0); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px rgba(139, 108, 255, .28); }