:root {
  --ink:#14213D; --paper:#F3F5F9; --card:#FFFFFF; --mark:#FFD400; --rec:#E5383B; --slate:#5C677D; --line:#D9DEE8;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font:16px/1.5 "Avenir Next","Segoe UI Variable","Segoe UI",system-ui,sans-serif; color:var(--ink); background:var(--paper); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
button, input, textarea { font:inherit; color:inherit; }
button { border:1px solid var(--line); background:var(--card); border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; }
button:hover { border-color:var(--ink); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
button.ghost { background:transparent; }
button.ghost.dark, .top button.ghost { color:#fff; border-color:rgba(255,255,255,.35); }
button.danger { color:var(--rec); margin-left:auto; }
:focus-visible { outline:3px solid var(--mark); outline-offset:2px; }

.top { background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.brand { font-size:20px; font-weight:700; letter-spacing:-.01em; }
.brand span { box-shadow: inset 0 -0.45em 0 rgba(255,212,0,.55); }

.layout { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - 64px); }
.library { border-right:1px solid var(--line); padding:24px 16px; }
.library h2 { font-size:14px; font-weight:700; color:var(--slate); margin:0 8px 8px; }
#guideList { list-style:none; margin:0; padding:0; }
#guideList button { width:100%; text-align:left; border:0; background:transparent; padding:10px 8px; border-radius:6px; font-weight:500; }
#guideList button small { display:block; color:var(--slate); font-weight:400; }
#guideList button[aria-current="true"] { background:var(--card); box-shadow: inset 4px 0 0 var(--mark); font-weight:700; }

main { padding:32px clamp(16px,4vw,56px) 80px; max-width:1040px; }
#empty h1 { font-size:28px; margin:0 0 8px; letter-spacing:-.02em; }
#empty p { max-width:60ch; color:var(--slate); }

.title { width:100%; border:0; border-bottom:2px solid transparent; background:transparent; font-size:32px; font-weight:700; letter-spacing:-.02em; padding:4px 0; }
.title:hover, .title:focus { border-bottom-color:var(--line); outline:none; }
.meta { color:var(--slate); margin:4px 0 20px; font-size:14px; }

.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; position:sticky; top:0; background:var(--paper); padding:10px 0; z-index:2; border-bottom:1px solid var(--line); }
.sep { width:1px; height:24px; background:var(--line); margin:0 4px; }
#notice { min-height:24px; margin:10px 0 0; color:var(--slate); font-size:14px; }
#notice.err { color:var(--rec); }

/* The steps are a real sequence, so they are drawn as a numbered strip. */
#steps { list-style:none; margin:16px 0 0; padding:0; counter-reset:step; }
#steps > li { counter-increment:step; position:relative; padding:0 0 36px 56px; }
#steps > li::before { content:counter(step); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; display:grid; place-items:center; }
#steps > li::after { content:""; position:absolute; left:17px; top:40px; bottom:4px; width:2px; background:var(--line); }
#steps > li:last-child::after { display:none; }
.stepHead { display:flex; gap:8px; align-items:center; }
.stepHead input { flex:1; min-width:0; border:1px solid transparent; background:transparent; border-radius:6px; padding:5px 8px; font-size:19px; font-weight:700; }
.stepHead input:hover, .stepHead input:focus { border-color:var(--line); background:var(--card); }
.stepHead button { padding:4px 10px; font-size:14px; }
.shot { position:relative; margin:10px 0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; line-height:0; }
.shot img { width:100%; height:auto; display:block; }
.hl { position:absolute; border:3px solid var(--mark); border-radius:6px; box-shadow:0 0 0 3px rgba(20,33,61,.55), 0 0 0 9999px rgba(20,33,61,.12); pointer-events:none; }
.narr { display:block; font-size:13px; font-weight:600; color:var(--slate); }
.narr textarea { display:block; width:100%; margin-top:4px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--card); font-size:15px; font-weight:400; color:var(--ink); resize:vertical; line-height:1.45; }
.voiceTag { font-size:12px; color:var(--slate); margin-top:4px; }

dialog { border:0; border-radius:12px; padding:0; max-width:min(92vw,1100px); box-shadow:0 24px 60px rgba(20,33,61,.35); }
dialog::backdrop { background:rgba(20,33,61,.6); }
#playerDlg { background:var(--ink); color:#fff; width:min(92vw,1100px); }
.dlgHead { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
#stage { display:block; width:100%; height:auto; background:#0c1630; }
#playerStatus { margin:0; padding:10px 16px 14px; font-size:14px; color:#c9d1e3; min-height:44px; }
#settingsDlg form, #embedDlg form { padding:24px; width:min(92vw,520px); }
dialog h2 { margin:0 0 8px; font-size:22px; letter-spacing:-.01em; }
dialog p { color:var(--slate); font-size:14px; margin:0 0 14px; }
dialog label { display:block; font-size:13px; font-weight:600; margin-bottom:12px; }
dialog label input, dialog label textarea { display:block; width:100%; margin-top:4px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-weight:400; font-size:15px; }
dialog textarea { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }
.fine { font-size:12px; }
.row { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

@media (max-width:760px) {
  .layout { grid-template-columns:1fr; }
  .library { border-right:0; border-bottom:1px solid var(--line); }
  #steps > li { padding-left:46px; }
}

select { font:inherit; font-weight:600; color:inherit; border:1px solid var(--line); background:var(--card); border-radius:8px; padding:8px 10px; }
.lead { margin:0 0 16px; }
#steps + .lead { margin-top:8px; }
.shot.blurring { cursor:crosshair; outline:3px solid var(--mark); touch-action:none; }
.shot.blurring img { pointer-events:none; user-select:none; }
.blurBox { position:absolute; background:rgba(20,33,61,.55); border:2px dashed #fff; pointer-events:none; }

[hidden] { display:none !important; }
.videoOpts { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:0 0 14px; font-size:13px; font-weight:600; color:var(--slate); }
.videoOpts label { display:flex; gap:8px; align-items:center; }
.videoOpts select, .videoOpts button { padding:6px 10px; font-size:14px; color:var(--ink); }
#musicInfo { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
#musicName { color:var(--ink); }
.stepHead { flex-wrap:wrap; }
.stepHead input { flex-basis:240px; }
.hold { display:flex; gap:8px; align-items:center; margin-top:8px; font-size:13px; font-weight:600; color:var(--slate); }
.hold input { width:76px; border:1px solid var(--line); border-radius:6px; padding:5px 8px; background:var(--card); color:var(--ink); font-weight:400; }

#pasteDlg form { padding:24px; width:min(92vw,620px); }
#pasteErr { color:var(--rec); min-height:18px; }

/* ---------- web app additions ---------- */
a { color:var(--ink); }
.err { color:var(--rec) !important; }
.brand { color:#fff; text-decoration:none; }
.topNav { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:flex-end; font-size:14px; }
.topNav button { padding:6px 12px; }
.navLink { color:#fff; font-weight:600; }
.chip { border:1px solid rgba(255,212,0,.7); color:var(--mark); border-radius:999px; padding:3px 10px; font-weight:600; font-size:13px; }
#account { display:flex; gap:10px; align-items:center; color:#c9d1e3; }
.banner { margin:0; padding:10px 24px; background:#FFF6C7; border-bottom:1px solid #E9D98A; font-size:14px; }
.importMsg { margin:0 0 20px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--mark); border-radius:6px; font-weight:600; }
.importMsg.err { border-left-color:var(--rec); }
#saveState { color:var(--slate); }

.auth { max-width:420px; margin:8vh auto; padding:0 20px; }
.auth h1 { font-size:28px; letter-spacing:-.02em; margin:0 0 6px; }
.auth p { color:var(--slate); margin:0 0 18px; }
.auth label { display:block; font-size:13px; font-weight:600; margin-bottom:12px; }
.auth input { display:block; width:100%; margin-top:4px; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--card); font-weight:400; font-size:16px; }
#authMsg { min-height:22px; font-size:14px; margin:0 0 10px; color:var(--ink); }

#shareDlg form { padding:24px; width:min(92vw,560px); }
#shareDlg input[readonly] { background:var(--paper); }
#shareDlg .danger { margin-left:0; margin-right:auto; }
#shareMsg { min-height:18px; }

/* ---------- shared guide page ---------- */
.viewer { max-width:900px; margin:0 auto; padding:32px 20px 80px; }
.viewer h1 { font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:0 0 10px; }
.viewer .lede { color:var(--slate); font-size:18px; margin:0 0 20px; max-width:65ch; }
.playerBox { position:relative; border-radius:10px; overflow:hidden; background:#0c1630; line-height:0; }
.playerBox canvas { width:100%; height:auto; display:block; }
.playerBox .bigPlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--mark); color:var(--ink); border:0; border-radius:999px; padding:14px 26px; font-size:18px; font-weight:700; line-height:1.2; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.playerBar { display:flex; gap:12px; align-items:center; margin:10px 0 0; min-height:40px; }
.playerBar p { margin:0; flex:1; color:var(--slate); font-size:15px; }
.viewer ol { list-style:none; margin:36px 0 0; padding:0; counter-reset:step; }
.viewer ol > li { counter-increment:step; position:relative; padding:0 0 40px 56px; }
.viewer ol > li::before { content:counter(step); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; display:grid; place-items:center; }
.viewer ol > li::after { content:""; position:absolute; left:17px; top:40px; bottom:4px; width:2px; background:var(--line); }
.viewer ol > li:last-child::after { display:none; }
.viewer h2 { font-size:21px; margin:3px 0 4px; }
.viewer li p { margin:0 0 4px; color:var(--slate); max-width:70ch; }
.viewer li button { padding:4px 10px; font-size:13px; margin-top:4px; }
.viewer .outro { color:var(--slate); font-size:18px; }
.viewer .made { margin-top:48px; font-size:13px; color:var(--slate); }
body.embed .top { display:none; }
body.embed .viewer { padding-top:16px; }
@media (max-width:760px) {
  .viewer ol > li { padding-left:46px; }
  .top { padding:12px 16px; }
  .banner { padding:10px 16px; }
}
@media print { .playerBox, .playerBar, .viewer li button, .top { display:none !important; } .viewer ol > li { break-inside:avoid; } }

button.google { display:inline-flex; align-items:center; gap:10px; padding:12px 20px; font-size:16px; background:var(--card); border-color:var(--line); box-shadow:0 1px 2px rgba(20,33,61,.08); }
button.google:hover { border-color:var(--ink); }
.auth .fine { font-size:13px; margin-top:18px; }
#adminDlg form { padding:24px; width:min(94vw,980px); }
#adminDlg h3 { font-size:16px; margin:20px 0 8px; }
.row.between { justify-content:space-between; align-items:center; margin:0 0 6px; }
.tableWrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--card); }
#adminDlg table { width:100%; border-collapse:collapse; font-size:14px; }
#adminDlg th, #adminDlg td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
#adminDlg th { font-weight:600; color:var(--slate); background:var(--paper); }
#adminDlg td.num, #adminDlg th.num { text-align:right; font-variant-numeric:tabular-nums; }
#adminDlg tbody tr:last-child td { border-bottom:0; }
#adminDlg td a { font-weight:600; }