/* THE DESKTOP EDITOR'S BASE STYLES (docs/28-desktop-editor.md). Owner: the shell.
   Ported from the design library's kit (Encore-Product-Plan/prototype/assets/kit.css) and the editor mockup's own
   styles (prototype/assets/screens-editor.js, 'editor-desk'). The TOKENS keep the kit's names exactly, so every region's
   stylesheet (css/timeline.css, css/panels.css) writes var(--mint), var(--l0), var(--hard-a) … as the mockup does.
   Sections: 1 tokens · 2 base elements · 3 the kit's components (type, game buttons, glass, chips, tiers, toggles,
   segmented, fields, bars) · 4 shared editor furniture (panels, headings, notes, selects, inputs, scroll fades, dialogs,
   toasts) · 5 the page grid (#editor: header, banner row, three columns, transport) and the narrow-window note ·
   6 the shell's regions: header, banners, left column (parts, guide layers), code entry, version history, share. */

/* ============================================================== 1. tokens (kit.css :root, names unchanged) */
:root {
  color-scheme: dark;
  /* stage */
  --stage: #07070A; --ob: #090D16; --surf: #131C2B; --surf2: #1A2436; --plate: rgba(14,9,24,.9);
  --white: #FFF7EC; --ink: #F4F6FA; --ink2: #A2AEC1; --dim: rgba(255,247,236,.62); --dim2: rgba(255,247,236,.56); --dim3: rgba(255,247,236,.22);
  --line: rgba(255,255,255,.12); --line2: rgba(255,255,255,.2);
  /* accents */
  --rose: #FF3B5F; --rose-deep: #B8142F; --blue: #3D8BFF; --blue-deep: #1B4FB8; --gold: #FFC65E; --amber: #FFB347;
  --mint: #70F5CB; --violet: #C98BFF; --coral: #FF6A4D; --ice: #BFF0FF; --cyan: #7FF3FF; --hud-violet: #D9A5FF;
  /* lanes (Cocos LANES) */
  --l0: #FF6B6B; --l1: #FFB84D; --l2: #3FE3FF; --l3: #B48CFF;
  /* tiers (THUMB) */
  --easy-a: #4DDCFF; --easy-b: #1B4FB8; --easy-lip: #0B2666;
  --normal-a: #FFD98A; --normal-b: #E08A12; --normal-lip: #6B3A02;
  --hard-a: #FF5C7A; --hard-b: #C4102F; --hard-lip: #5E0818;
  --expert-a: #C98BFF; --expert-b: #6A2BD6; --expert-lip: #2B0E5E;
  /* type */
  --f-disp: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-hud: 'Exo 2', 'Archivo', system-ui, sans-serif;
  --f-ui: 'Inter', 'Archivo', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --r-card: 18px; --r-btn: 16px;
  --app-w: 390px; --app-h: 844px;
  /* the editor's own (screens-editor.js): lane and tier colours as the mockup's LANE_C / TIER_C, the page grid */
  --tier-easy: #4DDCFF; --tier-normal: #FFD98A; --tier-hard: #FF5C7A; --tier-expert: #C98BFF;
  --ed-left-w: 214px; --ed-right-w: 294px; --ed-gap: 8px; --ed-head-h: 52px; --ed-trans-h: 54px;
  --ed-panel-bg: linear-gradient(180deg, rgba(30,24,42,.9), rgba(12,9,20,.92));
  --ed-panel-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
}

/* ============================================================== 2. base elements */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { overflow: hidden; }
body { margin: 0; overflow: hidden; background: #07070A; color: var(--white); font-family: var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ============================================================== 3. the kit's components */
/* type */
.disp { font-family: var(--f-disp); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: .98; margin: 0; }
/* the YourBeats wordmark (logo-web, 12 Oct 2026): YOUR in the kit's white, BEATS in the share links' coral-to-amber ramp
   (app/worker/share.js `.wm`), with the hard drop of the phone's Home header (EncoreCocos ui/kit/Wordmark.ts HEAD_MARK).
   Markup: js/shell-ui.js wordmark(), `YOUR<b>BEATS</b>` (superseded: the whole word in a cream-to-pink ramp with a rose glow) */
.wordmark { font-family: var(--f-disp); font-size: 40px; line-height: 1; letter-spacing: .02em; color: var(--white); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); white-space: nowrap; }
.wordmark b { font-weight: 400; background: linear-gradient(90deg, var(--coral), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.eyebrow.amber { color: var(--amber); } .eyebrow.mint { color: var(--mint); } .eyebrow.gold { color: var(--gold); } .eyebrow.rose { color: #ff8aa0; } .eyebrow.violet { color: var(--hud-violet); } .eyebrow.ice { color: var(--ice); }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--dim); }
.hud { font-family: var(--f-hud); font-style: italic; font-weight: 900; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--dim); } .muted2 { color: var(--dim2); }
.h2 { font-family: var(--f-disp); font-size: 22px; letter-spacing: .03em; text-transform: uppercase; margin: 0; line-height: 1; }
.h3 { font-family: var(--f-body); font-weight: 800; font-size: 15px; margin: 0; }
.small { font-size: 12px; } .tiny { font-size: 10.5px; }
.row { display: flex; gap: 8px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* game buttons (styles-v5 .gb): rose = the one primary action; mint = accept/keep; gold = share; cool = open; violet = create */
.gb { --a: #FF5C7A; --b: #C4102F; --lip: #5E0818; --glow: 255,59,95; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 20px; border-radius: var(--r-btn); border: 2px solid rgba(255,255,255,.22); background: linear-gradient(180deg, var(--a), var(--b)); color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.28), 0 5px 0 var(--lip), 0 7px 0 rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.45), 0 0 22px rgba(var(--glow), .5); transition: transform .06s ease-out, box-shadow .06s ease-out; }
.gb::before { content: ''; position: absolute; left: 3px; right: 3px; top: 2px; height: 46%; pointer-events: none; border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.03)); }
.gb > * { position: relative; }
.gb .lbl { font-family: var(--f-disp); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.25); white-space: nowrap; }
.gb .sub { font-stretch: 75%; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.gb svg { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gb:active, .gb.down { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 0 var(--lip), 0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.45), 0 0 14px rgba(var(--glow), .4); }
.gb.cool { --a: #4DDCFF; --b: #1B4FB8; --lip: #0B2666; --glow: 61,139,255; }
.gb.gold { --a: #FFD98A; --b: #E08A12; --lip: #6B3A02; --glow: 255,198,94; color: #2A1400; }
.gb.gold .lbl { text-shadow: 0 1px 0 rgba(255,255,255,.45); } .gb.gold .sub { color: rgba(42,20,0,.75); }
.gb.mint { --a: #8ff7dc; --b: #3fbf9f; --lip: #0f4a3a; --glow: 112,245,203; color: #062A20; }
.gb.mint .lbl { text-shadow: 0 1px 0 rgba(255,255,255,.45); } .gb.mint .sub { color: rgba(6,42,32,.75); }
.gb.violet { --a: #C98BFF; --b: #6A2BD6; --lip: #2B0E5E; --glow: 180,140,255; }
.gb.cta::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.36) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.gb.sm { min-height: 42px; border-radius: 13px; padding: 0 14px; gap: 7px; } .gb.sm .lbl { font-size: 15px; } .gb.sm svg { width: 16px; height: 16px; }
.gb.round { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; } .gb.round::before { border-radius: 50%; height: 48%; }
.gb.round.lg { width: 58px; min-height: 58px; }
.gb[disabled], .gb.off { --a: #3a3542; --b: #232029; --lip: #0f0d12; --glow: 0,0,0; color: rgba(255,247,236,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 var(--lip), 0 8px 16px rgba(0,0,0,.4); cursor: default; }
.gb[disabled]::after, .gb.off::after { display: none; }
.gb[disabled]:active, .gb.off:active { transform: none; }
.gb[disabled] .lbl, .gb.off .lbl { text-shadow: none; }

/* glass secondaries */
.glass { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), rgba(12,10,20,.6); color: var(--white); font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .06s; }
.glass svg { width: 15px; height: 15px; flex: none; }
.glass:active { transform: translateY(3px); }
.glass.sm { min-height: 34px; padding: 0 11px; font-size: 10px; border-radius: 11px; } .glass.sm svg { width: 13px; height: 13px; }
.glass.on { border-color: var(--mint); color: var(--mint); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 rgba(0,0,0,.4), 0 0 16px rgba(112,245,203,.35); }
.glass.icon { width: 42px; padding: 0; } .glass.icon.sm { width: 34px; }
.glass.icon.sm::after { content: ''; position: absolute; inset: -4px; }
.glass[disabled] { opacity: .45; cursor: default; }
.glass[disabled]:active { transform: none; }
.glass.danger { color: #ff8aa0; border-color: rgba(255,92,122,.5); }

/* plates, chips, tiers */
.plate { position: relative; border-radius: var(--r-card); border: 1.5px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(28,24,38,.92), rgba(12,9,20,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.5); }
.plate.pad { padding: 14px; }
.plate.lit { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 0 rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--glowc, #ff4d8d) 35%, transparent); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--line2); background: rgba(0,0,0,.35); font-stretch: 75%; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,236,.82); white-space: nowrap; }
.chip svg { width: 11px; height: 11px; flex: none; }
.chip.mint { border-color: rgba(112,245,203,.55); color: var(--mint); background: rgba(112,245,203,.1); }
.chip.gold { border-color: rgba(255,207,90,.6); color: var(--gold); background: rgba(255,198,94,.1); }
.chip.rose { border-color: rgba(255,92,122,.6); color: #ff8aa0; background: rgba(255,59,95,.1); }
.chip.violet { border-color: rgba(201,139,255,.6); color: var(--violet); background: rgba(201,139,255,.1); }
.chip.ice { border-color: rgba(127,243,255,.5); color: var(--ice); background: rgba(61,139,255,.1); }
.chip.solid-gold { background: linear-gradient(180deg,#FFD98A,#E08A12); color: #2a1400; border-color: transparent; }
.chip.solid-mint { background: linear-gradient(180deg,#8ff7dc,#3fbf9f); color: #062A20; border-color: transparent; }
.chip.solid-rose { background: linear-gradient(180deg,#FF5C7A,#C4102F); color: #fff; border-color: transparent; }
.chip.solid-violet { background: linear-gradient(180deg,#C98BFF,#6A2BD6); color: #fff; border-color: transparent; }
.tier { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 7px; font-stretch: 75%; font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid; background: rgba(0,0,0,.35); white-space: nowrap; }
.tier.easy { border-color: rgba(77,220,255,.6); color: #8fe9ff; } .tier.normal { border-color: rgba(255,198,94,.65); color: #ffd98a; } .tier.hard { border-color: rgba(255,92,122,.65); color: #ff9aae; } .tier.expert { border-color: rgba(201,139,255,.7); color: #dcb8ff; }
.tier.fill.easy { background: linear-gradient(180deg,var(--easy-a),var(--easy-b)); color: #fff; border-color: transparent; }
.tier.fill.normal { background: linear-gradient(180deg,var(--normal-a),var(--normal-b)); color: #2a1400; border-color: transparent; }
.tier.fill.hard { background: linear-gradient(180deg,var(--hard-a),var(--hard-b)); color: #fff; border-color: transparent; }
.tier.fill.expert { background: linear-gradient(180deg,var(--expert-a),var(--expert-b)); color: #fff; border-color: transparent; }
.sample-tag { font-family: var(--f-body); font-stretch: 75%; font-weight: 800; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #2a1400; background: var(--gold); border-radius: 4px; padding: 2px 5px; }

/* segmented picker with a lit sliding thumb (styles-v5 .tiers-select.seg) */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.14); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 11px; background: linear-gradient(180deg, var(--ta, #FFD98A), var(--tb, #E08A12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 var(--tl, #6B3A02), 0 6px 12px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--tb, #E08A12) 60%, transparent); transition: transform .26s cubic-bezier(.34,1.56,.64,1), background .3s; pointer-events: none; }
.seg button { position: relative; z-index: 1; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255,247,236,.72); }
.seg button b { font-family: var(--f-disp); font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.seg button small { font-stretch: 75%; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.seg button.on { color: #1a0a12; } .seg button.on.light { color: #fff; }

/* inputs and toggles */
.field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 13px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(0,0,0,.4); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.field input { flex: 1; background: none; border: 0; outline: 0; font-size: 14px; min-width: 0; }
.field svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.toggle { position: relative; display: inline-block; width: 44px; height: 26px; border-radius: 26px; background: rgba(255,255,255,.14); flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.toggle.on { background: var(--mint); } .toggle.on::after { transform: translateX(18px); }

/* progress bars */
.bar { position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #6ff5e0, #3fe3ff); box-shadow: 0 0 10px rgba(111,245,224,.6); }
.bar.gold i { background: linear-gradient(90deg, #ffd98a, #ff8e56); box-shadow: 0 0 10px rgba(255,198,94,.6); }
.bar.violet i { background: linear-gradient(90deg, #d9a5ff, #7b2cff); box-shadow: 0 0 10px rgba(201,139,255,.6); }

/* ============================================================== 4. shared editor furniture (the mockup's .ed-*) */
/* the mockup's desktop sizes: small print is 11 px on a computer (screens-editor.js .ed-root rules) */
#app .eyebrow, #app .sample-tag, #app .glass.sm { font-size: 11px; }
#app .chip { font-size: 11px; height: 24px; }
#app .tier { font-size: 11px; height: 22px; }
/* a panel, its heading and its small print */
.ed-pan { position: relative; flex: none; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12); background: var(--ed-panel-bg); box-shadow: var(--ed-panel-shadow); padding: 10px 11px; }
.ed-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ed-ph h3 { margin: 1px 0 0; font-family: var(--f-disp); font-weight: 400; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.ed-ph.stacked { align-items: flex-start; }
.ed-ph.stacked .chip { margin-top: 7px; }
.ed-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
.ed-note b { color: rgba(255,247,236,.9); }
.ed-sub { margin: 10px 0 6px; font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); }
.ed-tbsep { width: 1px; height: 22px; background: rgba(255,255,255,.12); margin: 0 2px; flex: none; }
/* small form controls */
.ed-in { height: 28px; width: 86px; padding: 0 8px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(0,0,0,.45); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); font-family: var(--f-hud); font-style: italic; font-weight: 800; font-size: 13px; color: var(--white); outline: none; }
.ed-sel { height: 28px; padding: 0 6px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.16); background: #120e1b; font-size: 12px; font-weight: 700; color: var(--white); outline: none; }
.ed-in:focus, .ed-sel:focus { border-color: var(--mint); }
.ed-in:disabled, .ed-sel:disabled { opacity: .35; }
kbd { font-family: var(--f-ui); font-weight: 700; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.28); border-bottom-width: 2px; background: rgba(255,255,255,.07); color: var(--white); }
/* scroll areas: thin bars, and a soft fade at whichever edge still has more (toggle .ft / .fb from script) */
.ed-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.ed-scroll::-webkit-scrollbar { width: 6px; } .ed-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; } .ed-scroll::-webkit-scrollbar-track { background: transparent; }
.ed-fade.fb { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent); }
.ed-fade.ft { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30px); mask-image: linear-gradient(180deg, transparent, #000 30px); }
.ed-fade.ft.fb { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(180deg, transparent, #000 30px, #000 calc(100% - 46px), transparent); }
/* a popover under a header control, and a dialog over the page (never over the video: see .ed-drawer) */
.ed-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 290px; padding: 6px; border-radius: 13px; background: #171226; border: 1.5px solid rgba(255,255,255,.18); box-shadow: 0 18px 44px rgba(0,0,0,.65); cursor: default; text-align: left; }
.ed-dialog-back { position: fixed; inset: 0; z-index: 140; background: rgba(4,6,14,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .18s ease-out; }
.ed-dialog { position: fixed; z-index: 141; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 18px 20px 20px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #171226, #0c0a14); box-shadow: 0 30px 70px rgba(0,0,0,.65); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
/* toasts (js/banners.js toast(); anyone may store.emit('toast', { text })) */
#ed-toasts { position: fixed; left: 50%; bottom: calc(var(--ed-trans-h) + 38px); z-index: 300; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.ed-toast { max-width: min(620px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; background: rgba(14,20,32,.97); border: 1px solid rgba(112,245,203,.5); color: var(--white); font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(112,245,203,.15); animation: rise .2s ease-out; pointer-events: auto; }
.ed-toast.warn { border-color: rgba(255,198,94,.6); box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(255,198,94,.15); }
.ed-toast.bad { border-color: rgba(255,92,122,.6); box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(255,59,95,.18); }
.ed-toast.out { opacity: 0; transition: opacity .25s; }

/* ============================================================== 5. the page grid */
/* The window is the app: no page scroll. #app holds one screen at a time (code entry | editor), the overlay and the
   toasts. #editor: the header (52), the banner row (as tall as its banner, none when empty), the three columns
   (left 214 · centre flexible · right 294, 8 px apart and 8 px in from the edges, as the mockup's .ed-body), and the
   transport bar (54) along the bottom. Regions style their own insides: #ed-centre css/timeline.css; #ed-right and
   #ed-transport css/panels.css; the rest here. */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 45% at 8% -5%, rgba(123,44,255,.24), transparent 70%), radial-gradient(45% 40% at 96% 4%, rgba(255,77,141,.18), transparent 70%), radial-gradient(60% 45% at 50% 112%, rgba(61,139,255,.18), transparent 70%), radial-gradient(40% 40% at 70% 55%, rgba(255,179,71,.06), transparent 70%), #07070A; }
#editor { position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: var(--ed-head-h) auto minmax(0, 1fr) var(--ed-trans-h); grid-template-columns: minmax(0, 1fr); }
#code-entry { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* every region pinned to its row: an empty banner row is display:none, and auto-placement would otherwise move the
   columns into its `auto` row and squash the transport */
#ed-head { grid-row: 1; } #ed-banner { grid-row: 2; } #ed-main { grid-row: 3; } #ed-transport { grid-row: 4; }
#ed-head { position: relative; z-index: 20; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(22,15,32,.92), rgba(12,9,20,.55)); }
#ed-banner { position: relative; z-index: 15; min-width: 0; }
#ed-banner:empty { display: none; }
#ed-main { position: relative; min-height: 0; display: grid; grid-template-columns: var(--ed-left-w) minmax(0, 1fr) var(--ed-right-w); gap: var(--ed-gap); padding: var(--ed-gap); }
#ed-left { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
#ed-left::-webkit-scrollbar { width: 6px; } #ed-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; }
#ed-centre { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#ed-timeline { flex: 1; min-height: 0; }
#ed-right { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#ed-panel { flex: 1; min-height: 0; }
#ed-transport { position: relative; z-index: 10; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(12,9,20,.75), rgba(22,15,32,.96)); }
/* the overlay: dialogs and drawers (version history: js/versions.js; test play: js/testplay). Only its children take
   the pointer. --ed-main-top / --ed-main-bottom are set by js/app.js so a drawer can sit inside the three columns. */
#ed-overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#ed-overlay > * { pointer-events: auto; }
/* while loading */
#app[data-screen="loading"]::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--mint); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* below 1180 px the editor does not fit: a plain note instead (js/app.js adds #ed-narrow). The code entry works at any
   width, so it stays: only the editor gives way */
#ed-narrow { display: none; }
@media (max-width: 1179.98px) {
  #app[data-screen="editor"] > #editor, #app[data-screen="editor"] > #ed-overlay { display: none !important; }
  #app[data-screen="editor"] > #ed-narrow { display: grid; flex: 1; place-items: center; padding: 24px; text-align: center; }
}
@media (max-width: 560px) {
  .ed-code-top .chip { display: none; }
  .ed-card { padding: 20px 14px 18px; }
  .ed-card h2 { font-size: 24px; }
  .ed-digits { gap: 5px; }
  .ed-digit { width: 42px; height: 54px; font-size: 26px; }
  .ed-skel { display: none; }
}
/* a question in the page (shell-ui.js ask) */
.ed-ask-title { margin: 0 0 8px; font-family: var(--f-disp); font-weight: 400; font-size: 22px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.ed-ask-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.ed-narrow-card { max-width: 420px; padding: 24px 26px; }
.ed-narrow-card .wordmark { font-size: 30px; }
.ed-narrow-card h2 { margin: 12px 0 8px; font-family: var(--f-disp); font-weight: 400; font-size: 24px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.ed-narrow-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.ed-narrow-card p + p { margin-top: 8px; }

/* ============================================================== 6a. the header (js/header.js) */
.ed-top-wm { font-size: 25px; flex: none; }
.ed-sep { width: 1px; height: 30px; background: rgba(255,255,255,.12); flex: none; }
.ed-draft { min-width: 0; flex: 0 1 auto; max-width: 320px; display: flex; flex-direction: column; gap: 3px; }
.ed-draft > span, .ed-draft > .ed-draftline { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-draft .eyebrow { font-size: 11px; }
.ed-draft b, .ed-draft .ed-name { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.ed-name { max-width: 100%; text-align: left; padding: 0; border-radius: 4px; cursor: text; }
.ed-name:hover { text-decoration: underline dotted rgba(255,255,255,.4); text-underline-offset: 4px; }
.ed-name-in { width: 260px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1.5px solid var(--mint); background: rgba(0,0,0,.55); font-family: var(--f-disp); font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: var(--white); outline: none; }
.ed-guestline { font-style: normal; font-weight: 800; color: var(--gold); }
.ed-stline { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 800; color: var(--violet); }
.ed-stline svg { width: 12px; height: 12px; }
.ed-target { position: relative; flex: none; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px 0 10px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(0,0,0,.35); cursor: pointer; }
.ed-target:hover { border-color: rgba(255,255,255,.3); }
.ed-target > svg { width: 12px; height: 12px; color: var(--dim); }
.ed-target .ed-pop button { width: 100%; display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 9px; text-align: left; font-size: 11.5px; color: var(--dim); }
.ed-target .ed-pop button:hover, .ed-target .ed-pop button.on { background: rgba(255,255,255,.07); color: var(--white); }
.ed-status { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-save { flex: none; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.ed-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); flex: none; }
.ed-save.saving i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.ed-save.offline i, .ed-save.error i { background: #ff5c7a; box-shadow: 0 0 8px #ff5c7a; }
.ed-save.fixture i { background: rgba(255,255,255,.35); box-shadow: none; }
.ed-save.offline, .ed-save.error { color: #ff9aae; }
.ed-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--mint); white-space: nowrap; text-align: left; }
.ed-link svg { width: 13px; height: 13px; flex: none; }
.ed-link i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); flex: none; }
.ed-link.ended { color: #ff9aae; } .ed-link.ended i { background: #ff5c7a; box-shadow: 0 0 8px #ff5c7a; }
.ed-link.fixture { color: var(--dim); } .ed-link.fixture i { background: rgba(255,255,255,.35); box-shadow: none; }
#ed-head .glass.sm { min-height: 34px; }
#ed-head .gb.sm { width: auto; min-height: 36px; padding: 0 16px; }
#ed-head .gb.sm .lbl { font-size: 15px; }
.ed-menu { position: relative; flex: none; }
/* the share and menu popovers open from the header's right end, which is above the video column: they dock against the
   centre column's right edge instead, so nothing is ever drawn over the video (YouTube's rules; the mockup's drawer) */
.ed-menu .ed-pop, .ed-share-wrap .ed-pop { position: fixed; top: calc(var(--ed-head-h) + 6px); left: auto; right: calc(var(--ed-right-w) + var(--ed-gap) * 2); max-height: calc(100vh - var(--ed-head-h) - var(--ed-trans-h) - 20px); overflow-y: auto; }
.ed-menu .ed-pop { width: 280px; }
.ed-menu .ed-pop button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--white); text-align: left; }
.ed-menu .ed-pop button:hover { background: rgba(255,255,255,.07); }
.ed-menu .ed-pop button svg { width: 15px; height: 15px; color: #ff8aa0; flex: none; }
.ed-menu .ed-pop p { margin: 4px 10px 6px; font-size: 11px; line-height: 1.45; color: var(--dim); }
/* DISCONNECT's list of what it would remove (header.js) */
.ed-menu .ed-pop .ed-lose { list-style: none; margin: 2px 8px 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-menu .ed-pop .ed-lose li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 7px; padding: 6px 8px; border-radius: 8px; background: rgba(255,59,95,.1); border: 1px solid rgba(255,92,122,.45); font-size: 11.5px; line-height: 1.4; color: #ffd3dc; }
.ed-menu .ed-pop .ed-lose li svg { width: 14px; height: 14px; margin-top: 1px; color: #ff8aa0; }
.ed-share-wrap { position: relative; flex: none; }
.ed-share-wrap .ed-pop { width: 340px; padding: 14px 16px 16px; }
.ed-sh-eye { font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ed-share h3 { margin: 4px 0 10px; font-family: var(--f-disp); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.ed-sh-line { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 11px; font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.ed-sh-line svg { width: 16px; height: 16px; flex: none; }
.ed-sh-line.ok { background: rgba(112,245,203,.12); border: 1px solid rgba(112,245,203,.45); color: var(--mint); }
.ed-sh-line.no { background: rgba(255,59,95,.1); border: 1px solid rgba(255,92,122,.5); color: #ff8aa0; }
.ed-sh-line.info { background: rgba(61,139,255,.1); border: 1px solid rgba(127,243,255,.4); color: var(--ice); }
.ed-share ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ed-share li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; font-size: 12.5px; line-height: 1.4; }
.ed-share li svg { width: 15px; height: 15px; margin-top: 2px; }
.ed-share li.ok svg { color: var(--mint); } .ed-share li.no svg { color: #ff8aa0; } .ed-share li.info svg { color: var(--ice); }
.ed-share li b { display: block; font-weight: 800; color: var(--white); }
.ed-share li span { color: var(--dim); }
.ed-share > p { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.ed-sh-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
@media (max-width: 1360px) { #ed-head .glass.sm.ed-shrink { font-size: 0; gap: 0; padding: 0 9px; } #ed-head .glass.sm.ed-shrink svg { width: 15px; height: 15px; } }
/* TEST PLAY keeps a word at every width (header.js): "Test" below 1360 px, never the play icon alone */
#ed-head .ed-test .sh { display: none; }
@media (max-width: 1360px) { #ed-head .ed-test .lg { display: none; } #ed-head .ed-test .sh { display: inline; } #ed-head .ed-test { padding: 0 11px 0 9px; } }

/* ============================================================== 6b. banners (js/banners.js) */
.ed-banner { display: flex; align-items: center; gap: 12px; padding: 5px 14px; border-bottom: 1px solid; }
.ed-banner .glass.sm { min-height: 32px; }
.ed-banner > .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ed-banner > .ic svg { width: 17px; height: 17px; }
.ed-banner .tx { min-width: 0; flex: 1; }
.ed-banner .tx b { display: block; font-weight: 800; font-size: 13px; }
.ed-banner .tx span { display: block; font-size: 11.5px; color: var(--dim); margin-top: 1px; }
.ed-banner .gb.sm { width: auto; min-height: 32px; padding: 0 14px; flex: none; }
.ed-banner .gb.sm .lbl { font-size: 14px; }
.ed-banner .glass { flex: none; }
.ed-banner.conflict { background: linear-gradient(90deg, rgba(255,198,94,.2), rgba(255,59,95,.1)); border-color: rgba(255,198,94,.45); }
.ed-banner.conflict > .ic { background: linear-gradient(180deg, #FFD98A, #E08A12); color: #2a1400; box-shadow: 0 2px 0 #6B3A02; }
.ed-banner.recovered { background: linear-gradient(90deg, rgba(112,245,203,.18), rgba(61,139,255,.1)); border-color: rgba(112,245,203,.45); }
.ed-banner.recovered > .ic { background: linear-gradient(180deg, #8ff7dc, #3fbf9f); color: #062A20; box-shadow: 0 2px 0 #0f4a3a; }
.ed-banner.ended { background: linear-gradient(90deg, rgba(255,59,95,.2), rgba(123,44,255,.1)); border-color: rgba(255,92,122,.5); }
.ed-banner.ended > .ic { background: linear-gradient(180deg, #FF5C7A, #C4102F); color: #fff; box-shadow: 0 2px 0 #5E0818; }
.ed-banner.offline { background: linear-gradient(90deg, rgba(255,179,71,.16), rgba(61,139,255,.08)); border-color: rgba(255,179,71,.45); }
.ed-banner.offline > .ic { background: linear-gradient(180deg, #FFD98A, #E08A12); color: #2a1400; box-shadow: 0 2px 0 #6B3A02; }
.ed-banner.frozen { background: linear-gradient(90deg, rgba(201,139,255,.2), rgba(61,139,255,.1)); border-color: rgba(201,139,255,.5); }
.ed-banner.frozen > .ic { background: linear-gradient(180deg, #C98BFF, #6A2BD6); color: #fff; box-shadow: 0 2px 0 #2B0E5E; }
.ed-banner.busy { opacity: .7; pointer-events: none; }

/* ============================================================== 6c. the left column (js/parts.js) */
.ed-part { display: grid; grid-template-columns: 5px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 5px 6px 5px 5px; border-radius: 10px; cursor: pointer; }
.ed-part:hover { background: rgba(255,255,255,.05); }
.ed-part.cur { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 22%, transparent), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent); }
.ed-part .sw { align-self: stretch; border-radius: 4px; background: var(--gc); box-shadow: 0 0 8px var(--gc); }
.ed-part .nm { min-width: 0; }
.ed-part b { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.ed-part small { display: block; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-part .prop { font-size: 11px; font-weight: 600; color: var(--dim); border-bottom: 1px dotted rgba(255,255,255,.35); }
.ed-part .rep { font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 1px 5px; border-radius: 5px; color: #0b0712; background: var(--gc); }
/* Follow (2026-10-07): a part that follows one of the song's melody settings, and the difficulty strip over the list */
.ed-part .fol { font-stretch: 75%; font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; color: #062A20; background: var(--mint); }
/* it sits in the header's bottom margin (-7px + 6px + 1px = the 8px it had), so the parts list keeps every row it had */
.ed-pstrip { display: flex; flex: none; gap: 2px; height: 6px; margin: -7px 2px 1px; }
.ed-pstrip[hidden] { display: none; }
.ed-pstrip .sg { flex: 1 1 0; min-width: 3px; height: 100%; padding: 0; border-radius: 2px; opacity: .85; cursor: pointer; }
.ed-pstrip .sg:hover { opacity: 1; }
.ed-pstrip .sg.off { box-shadow: 0 0 6px currentColor; }
.ed-pstrip .sg.chg { opacity: 1; box-shadow: 0 0 0 1.5px #70F5CB, 0 0 8px rgba(112,245,203,.6); }
.ed-part .phone-dot { font-stretch: 75%; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 1px 5px; border-radius: 5px; color: #2a1400; background: var(--gold); }
.ed-part .lp { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--dim); border: 1px solid rgba(255,255,255,.12); }
.ed-part .lp svg { width: 13px; height: 13px; }
.ed-part .lp:hover, .ed-part .lp.on { color: var(--gold); border-color: rgba(255,198,94,.6); background: rgba(255,198,94,.1); }
.ed-parts-list { display: flex; flex-direction: column; gap: 2px; }
/* the parts panel gives way (its list scrolls inside it) so GUIDE LAYERS below is always in view; the column itself
   scrolls only on a window too short for both */
/* PARTS and GUIDE LAYERS fill the column's visible height together (.ed-fit; parts.js): the list takes every row the
   layers leave it and scrolls inside its panel; "where this chart came from" is below them, a scroll of the column away.
   A window too short for both gives the list at least its header and three rows, and the column scrolls */
#ed-left > .ed-fit { flex: none; height: 100%; min-height: min-content; display: flex; flex-direction: column; gap: 8px; }
#ed-left .ed-fit > .ed-parts { flex: 1 1 0; min-height: 250px; display: flex; flex-direction: column; }
#ed-left .ed-fit > .ed-parts > .ed-ph, #ed-left .ed-fit > .ed-parts > .ed-note { flex: none; }
#ed-left .ed-fit > .ed-parts > .ed-parts-list { flex: 1 1 auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
#ed-left .ed-fit > .ed-layers, #ed-left > .ed-origin { flex: none; }
.ed-part .phone-dot.other { color: #1a0a2e; background: var(--violet); }
.ed-layer { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 5px 0; width: 100%; text-align: left; cursor: pointer; }
.ed-layer .gl { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 50%, transparent); }
.ed-layer .gl svg { width: 16px; height: 16px; }
.ed-layer b { display: block; font-weight: 800; font-size: 12px; }
.ed-layer small { display: block; font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-layer .toggle { transform: scale(.78); transform-origin: right center; }
.ed-layer.off b, .ed-layer.off .gl { opacity: .45; }
.ed-layer[disabled], .ed-layer.na { cursor: default; }
.ed-layer.na b, .ed-layer.na .gl, .ed-layer.na .toggle { opacity: .35; }
.ed-layer.na small { color: var(--gold); white-space: normal; }
.ed-line { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; }
.ed-line .cover { width: 42px; height: 28px; border-radius: 7px; overflow: hidden; background: #111; }
.ed-line .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-line b { font-weight: 800; font-size: 11.5px; }
.ed-line span { display: block; font-size: 11px; color: var(--dim); line-height: 1.35; }

/* ============================================================== 6d. the code entry (js/code-entry.js) */
.ed-code-top { flex: none; height: var(--ed-head-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(22,15,32,.92), rgba(12,9,20,.55)); }
.ed-codewrap { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.ed-skel { position: absolute; inset: 8px; display: grid; grid-template-columns: var(--ed-left-w) 1fr var(--ed-right-w); gap: 8px; filter: blur(3px); opacity: .75; pointer-events: none; }
.ed-skel > div { border-radius: 14px; border: 1.5px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(30,24,42,.7), rgba(12,9,20,.7)); }
.ed-skel .mid { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 96px), linear-gradient(180deg, rgba(255,107,107,.16) 0 25%, rgba(255,184,77,.13) 25% 50%, rgba(63,227,255,.13) 50% 75%, rgba(180,140,255,.16) 75%); }
.ed-card { position: relative; width: 470px; max-width: calc(100vw - 48px); padding: 24px 28px 22px; text-align: center; --glowc: #3fe3ff; }
.ed-card .wordmark { font-size: 34px; }
.ed-card h2 { margin: 12px 0 6px; font-family: var(--f-disp); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.ed-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.ed-card p b { color: var(--white); }
.ed-digits { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 16px; }
.ed-digits .dash { width: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.ed-digit { width: 52px; height: 64px; padding: 0; border-radius: 13px; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); text-align: center; font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 32px; color: var(--white); outline: none; caret-color: var(--cyan); }
.ed-digit:focus { border-color: var(--cyan); box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 0 3px rgba(63,227,255,.2), 0 0 18px rgba(63,227,255,.35); }
.ed-digit.full { border-color: rgba(112,245,203,.75); color: var(--mint); }
.ed-digits.bad .ed-digit { border-color: rgba(255,92,122,.75); color: #ff9aae; }
.ed-digits.busy .ed-digit { opacity: .6; }
.ed-code-err { min-height: 0; margin: -6px 0 14px; padding: 8px 11px; border-radius: 11px; background: rgba(255,59,95,.1); border: 1px solid rgba(255,92,122,.5); color: #ff9aae; font-weight: 700; font-size: 12.5px; line-height: 1.4; text-align: left; display: flex; gap: 8px; align-items: flex-start; }
.ed-code-err svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ed-code-err:empty { display: none; }
.ed-card ul { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 7px; text-align: left; }
.ed-card li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.4; color: rgba(255,247,236,.82); }
.ed-card li svg { width: 15px; height: 15px; color: var(--mint); margin-top: 1px; }
.ed-card .foot { margin-top: 12px; display: flex; justify-content: center; gap: 8px; align-items: center; font-size: 11px; color: var(--dim2); }

/* ============================================================== 6e. version history (js/versions.js): docked beside the video column, never over it */
.ed-drawer { position: fixed; top: calc(var(--ed-main-top, 60px) + var(--ed-gap)); bottom: calc(var(--ed-main-bottom, 62px) + var(--ed-gap)); right: calc(var(--ed-right-w) + var(--ed-gap) * 2); width: 400px; max-width: calc(100vw - var(--ed-right-w) - var(--ed-left-w) - 40px); z-index: 30; display: flex; flex-direction: column; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.2); background: linear-gradient(180deg, #1b1429, #0e0b16); box-shadow: -18px 10px 50px rgba(0,0,0,.65); animation: edSlide .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes edSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ed-drawer .hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ed-drawer .hd > svg { width: 18px; height: 18px; color: var(--ice); flex: none; }
.ed-drawer .hd h3 { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; }
.ed-drawer .hd .glass { margin-left: auto; }
.ed-drawer .ex { flex: none; margin: 0; padding: 8px 12px; font-size: 11px; line-height: 1.45; color: var(--dim); border-bottom: 1px solid rgba(255,255,255,.06); }
.ed-vers { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.ed-vers::-webkit-scrollbar { width: 6px; } .ed-vers::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; }
.ed-vers .empty { padding: 16px 12px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.ed-ver { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ed-ver.now { background: linear-gradient(90deg, rgba(112,245,203,.1), transparent); }
.ed-ver.cmp { background: linear-gradient(90deg, rgba(61,139,255,.14), transparent); }
.ed-ver .vb { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ed-ver.now .vb { background: linear-gradient(180deg, #8ff7dc, #3fbf9f); color: #062A20; border-color: transparent; }
.ed-ver .mt { min-width: 0; }
.ed-ver .mt b { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.ed-ver .mt b svg { width: 13px; height: 13px; color: var(--dim); flex: none; }
.ed-ver .mt b em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--dim); }
.ed-ver .mt span { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.ed-ver .bt { display: flex; gap: 5px; }
.ed-ver .bt .glass.sm { min-height: 28px; padding: 0 8px; font-size: 11px; }
.ed-diff { grid-column: 1 / -1; margin-top: 2px; padding: 8px 10px; border-radius: 9px; background: rgba(61,139,255,.1); border: 1px solid rgba(127,243,255,.35); font-size: 11px; line-height: 1.45; }
.ed-diff b { font-weight: 800; }
.ed-diff .pm { font-family: var(--f-hud); font-style: italic; font-weight: 800; }
.ed-diff .pm.a { color: var(--mint); } .ed-diff .pm.r { color: #ff8aa0; } .ed-diff .pm.m { color: var(--amber); }
.ed-diff.err { background: rgba(255,59,95,.1); border-color: rgba(255,92,122,.5); color: #ff9aae; }
/* what a version changed from the one before it (versions.js) */
.ed-ver .mt .chg { color: rgba(255,247,236,.82); }
.ed-ver .pm { font-style: italic; font-family: var(--f-hud); font-weight: 800; }
.ed-ver .pm.a { color: var(--mint); } .ed-ver .pm.r { color: #ff8aa0; } .ed-ver .pm.m { color: var(--amber); }