/* base reset */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Fonts: Nunito 700/800 for headings, Open Sans 400/600 for text. Self-hosted (SIL Open Font License, see fonts/), Latin and Latin Extended only. */
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:700 800;src:url(fonts/nunito-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/nunito-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:700 800;src:url(fonts/nunito-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/nunito-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-display:swap;font-weight:400 600;src:url(fonts/open-sans-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/open-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-display:swap;font-weight:400 600;src:url(fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Style: a calm, gallery-like look. Warm off-white page, near-black type, white rounded cards with hairline borders,
     black buttons, and one soft gradient made from the palette for highlights. Nunito headings, Open Sans text. */

  /* ===== PALETTE ===== */
  --lavender-grey:#8d9cb7;
  --silver:#aaacae;
  --dusk-blue:#515e7e;
  --linen:#f0e7d9;
  --pale-oak:#d5c1a0;
  --ink:#17181c;                     /* near-black for headings and main buttons */
  /* not in the palette; needed for the status dot and delete buttons */
  --sage:#5f8f72;
  --brick:#b0524a;

  /* ===== ROLES: which color does what (light mode; dark mode is below) ===== */
  --primary:var(--ink);              /* main buttons, selected chips, toggles */
  --on-primary:#ffffff;
  --accent:var(--lavender-grey);     /* charts, schedule strip, progress */
  --on-accent:#1e2331;
  --link:var(--dusk-blue);           /* links */
  --warning:var(--pale-oak);         /* last seconds of a pose */
  --success:var(--sage);
  --danger:var(--brick);
  --on-danger:#ffffff;
  /* the highlight gradient, from the palette */
  --grad:linear-gradient(125deg,var(--dusk-blue) 0%,var(--lavender-grey) 48%,var(--pale-oak) 100%);
  --glow:radial-gradient(60% 70% at 25% 60%,color-mix(in srgb,var(--lavender-grey) 55%,transparent),transparent 70%),radial-gradient(55% 70% at 75% 55%,color-mix(in srgb,var(--pale-oak) 65%,transparent),transparent 70%);

  /* Neutrals */
  --bg:#f8f6f1;
  --surface:#ffffff;
  --soft:color-mix(in srgb,var(--linen) 45%,#fbf9f5);   /* tinted cards and hover fills */
  --sunk:color-mix(in srgb,var(--linen) 70%,#ffffff);   /* tracks, empty bars */
  --border:rgba(23,24,28,.10);
  --border-hover:rgba(23,24,28,.24);
  --toggle-off:#d6d3cc;
  --text:#3b3e47;
  --text-strong:var(--ink);
  --text-weak:#5f6270;              /* 5.6:1 on the page */

  /* Derived */
  --primary-soft:color-mix(in srgb,var(--lavender-grey) 16%,#ffffff);
  --primary-text:var(--dusk-blue);
  --focus:color-mix(in srgb,var(--lavender-grey) 55%,transparent);
  --info-soft:color-mix(in srgb,var(--lavender-grey) 14%,#ffffff);
  --info-text:var(--text);
  --toast-bg:var(--ink);
  --toast-ink:#ffffff;
  --scrim:rgba(15,16,19,.6);
  --on-scrim:#ffffff;

  /* Stage: the session player and reference viewer are always dark */
  --stage:#0f1013;
  --stage-ink:#f4f1ea;
  --stage-2:#9a9ca4;
  --stage-line:#26282e;
  --stage-btn:rgba(244,241,234,.08);
  --stage-btn-h:rgba(244,241,234,.16);
  --stage-fade:rgba(15,16,19,.88);
  --stage-accent:#f4f1ea;
  --stage-on-accent:#0f1013;
  --stage-warn:var(--pale-oak);
  --gridline:color-mix(in srgb,var(--lavender-grey) 80%,transparent);

  /* Type */
  --font-head:"Nunito",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --size-1:56px;
  --size-2:44px;
  --size-3:32px;
  --size-4:24px;
  --size-5:19px;
  --size-6:16px;
  --size-small:14px;
  --size-tiny:12px;

  /* Spacing: 4px base */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:48px;
  --s7:96px;

  /* Corners: soft and generous */
  --r-sm:6px;
  --r:10px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:9999px;

  /* Elevation: flat, with hairlines */
  --shadow-card:0 0 0 1px rgba(23,24,28,.07),0 1px 2px rgba(23,24,28,.04);
  --shadow-pop:0 0 0 1px rgba(23,24,28,.07),0 16px 40px -12px rgba(23,24,28,.22);
  --shadow-input:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --primary:#f4f1ea;
    --on-primary:#111215;
    --accent:var(--dusk-blue);
    --on-accent:#f4f1ea;
    --link:color-mix(in srgb,var(--lavender-grey) 70%,#fff);
    --bg:#111215;
    --surface:#191a1f;
    --soft:#1f2026;
    --sunk:#25272e;
    --border:rgba(255,255,255,.09);
    --border-hover:rgba(255,255,255,.22);
    --toggle-off:#3a3c44;
    --text:#c9cbd2;
    --text-strong:#f4f1ea;
    --text-weak:#8f929b;
    --primary-soft:color-mix(in srgb,var(--dusk-blue) 30%,#191a1f);
    --primary-text:color-mix(in srgb,var(--lavender-grey) 75%,#fff);
    --info-soft:color-mix(in srgb,var(--dusk-blue) 26%,#191a1f);
    --toast-bg:#f4f1ea;
    --toast-ink:#111215;
    --shadow-card:0 0 0 1px rgba(255,255,255,.07);
    --shadow-pop:0 0 0 1px rgba(255,255,255,.08),0 16px 40px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --primary:#f4f1ea;
  --on-primary:#111215;
  --accent:var(--dusk-blue);
  --on-accent:#f4f1ea;
  --link:color-mix(in srgb,var(--lavender-grey) 70%,#fff);
  --bg:#111215;
  --surface:#191a1f;
  --soft:#1f2026;
  --sunk:#25272e;
  --border:rgba(255,255,255,.09);
  --border-hover:rgba(255,255,255,.22);
  --toggle-off:#3a3c44;
  --text:#c9cbd2;
  --text-strong:#f4f1ea;
  --text-weak:#8f929b;
  --primary-soft:color-mix(in srgb,var(--dusk-blue) 30%,#191a1f);
  --primary-text:color-mix(in srgb,var(--lavender-grey) 75%,#fff);
  --info-soft:color-mix(in srgb,var(--dusk-blue) 26%,#191a1f);
  --toast-bg:#f4f1ea;
  --toast-ink:#111215;
  --shadow-card:0 0 0 1px rgba(255,255,255,.07);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.08),0 16px 40px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--size-6);font-weight:400;line-height:1.5;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 var(--s6);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
body.locked{overflow:hidden}
h1,h2,h3{margin:0;color:var(--text-strong);font-family:var(--font-head);font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:var(--size-4);line-height:1.2}
h3{font-size:var(--size-5);font-weight:700;line-height:1.3}
b,strong{font-weight:600}
p{margin:0}
a{color:var(--link);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.muted{color:var(--text-weak)}
.mono{font-family:var(--font-mono)}
.lbl{font-family:var(--font-head);font-size:var(--size-tiny);font-weight:800;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--text-weak)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- top bar (Bulma navbar + tabs) ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border);margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:var(--s5);min-height:64px}
.brand{display:flex;align-items:center;gap:var(--s2);color:var(--text-strong);text-decoration:none}
.brand svg{width:28px;height:28px}
.brand span{font-family:var(--font-head);font-size:var(--size-5);font-weight:800;letter-spacing:-.02em;line-height:1}
.tabs{display:flex;align-items:center;gap:2px}
.tab{display:flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill);color:var(--text);font-size:var(--size-small);font-weight:600;text-decoration:none;transition:background-color .15s,color .15s}
.tab:hover{color:var(--text-strong);background:var(--soft)}
.tab[aria-current="page"]{color:var(--text-strong);background:var(--surface);box-shadow:var(--shadow-card)}
.status{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-card);font-size:var(--size-tiny);line-height:1.5;color:var(--text);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--text-weak)}
.status[data-kind="ok"] i{background:var(--success)}
.status[data-kind="warn"] i{background:var(--warning);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.status[data-kind="err"] i{background:var(--danger)}
.status[data-kind="busy"] i{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media (max-width:760px){
  .top-in{display:grid;grid-template-columns:1fr auto;column-gap:var(--s3);min-height:0}
  .brand{padding-block:var(--s2)}
  .status{grid-column:2;grid-row:1}
  .tabs{grid-column:1/-1;grid-row:2;justify-content:space-between;min-width:0;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs{padding-bottom:var(--s2)}
  .tab{padding:0 var(--s3);height:34px;flex:none}
}
@media (max-width:420px){
  .tab{padding:0 6px;font-size:var(--size-small)}
}

main{max-width:1240px;margin:0 auto;padding-top:var(--s6)}

/* ---------- shared controls ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-card);min-width:0}
@media (max-width:640px){.card{padding:var(--s5)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:40px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-strong);font-size:var(--size-small);font-weight:600;line-height:1.5;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .1s}
.btn:hover{border-color:var(--border-hover);color:var(--text-strong)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:transparent;color:var(--on-primary)}
.btn.primary:hover{background:color-mix(in srgb,var(--primary) 84%,var(--lavender-grey));color:var(--on-primary)}
.btn.danger{background:var(--danger);border-color:transparent;color:var(--on-danger);font-weight:600}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 90%,#000);color:var(--on-danger)}
.btn.big{height:48px;padding:0 22px;font-size:var(--size-6);border-radius:12px}
.btn.sm{height:32px;padding:0 12px;font-size:var(--size-tiny);border-radius:var(--r-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .i{width:1.125em;height:1.125em}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:var(--s2);height:34px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text-strong);font-size:var(--size-small);font-weight:400;line-height:1.5;cursor:pointer;transition:background-color .15s,border-color .15s}
.chip:hover{border-color:var(--border-hover)}
.chip[aria-pressed="true"]{background:var(--primary);border-color:transparent;color:var(--on-primary);font-weight:600}
.chip .ct{font-size:var(--size-tiny);font-weight:400;font-variant-numeric:tabular-nums;opacity:.75}
.chip.add{border-style:dashed;color:var(--text-weak);background:transparent}
input[type="text"],input[type="url"],input[type="number"],input[type="search"],select,textarea{font-family:inherit;font-size:var(--size-6);line-height:1.5;color:var(--text-strong);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-input);padding:calc(.5em - 1px) calc(.8em - 1px);min-width:0;text-transform:none;letter-spacing:normal}
input[type="text"]:hover,input[type="url"]:hover,input[type="number"]:hover,input[type="search"]:hover,select:hover,textarea:hover{border-color:var(--border-hover)}
input[type="text"]:focus,input[type="url"]:focus,input[type="number"]:focus,input[type="search"]:focus,select:focus,textarea:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px var(--focus)}
input::placeholder,textarea::placeholder{color:var(--text-weak);opacity:.85}
.f{display:grid;gap:var(--s2);min-width:0}
.f > span{font-size:var(--size-small);font-weight:600;color:var(--text-strong)}
.f > .t-time{font-weight:400}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.tg{display:flex;align-items:center;gap:var(--s3);cursor:pointer;user-select:none;color:var(--text-strong)}
.tg input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:var(--r-pill);background:var(--toggle-off);border:0;position:relative;margin:0;flex:none;cursor:pointer;transition:background .15s}
.tg input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(10,10,10,.3);transition:transform .15s}
.tg input:checked{background:var(--primary)}
.tg input:checked::after{transform:translateX(16px)}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--soft);box-shadow:inset 0 0 0 1px var(--border)}
.seg button{height:32px;padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text);font-size:var(--size-small);font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.seg button:hover{color:var(--text-strong)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text-strong);box-shadow:0 0 0 1px var(--border),0 1px 3px rgba(23,24,28,.12)}

/* ---------- practice ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s5);align-items:start}
@media (max-width:900px){.bench{grid-template-columns:minmax(0,1fr)}}
.setup{display:grid;gap:var(--s5)}
.setup-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.field{display:grid;gap:var(--s3);min-width:0}
.dur-custom{display:inline-flex;align-items:center;gap:var(--s2);color:var(--text-weak);font-size:var(--size-small)}
.dur-custom input{width:88px;height:32px;padding-block:0;font-size:var(--size-small)}
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.preset{text-align:left;border:1px solid var(--border);border-radius:14px;padding:var(--s3) var(--s4);background:var(--surface);display:grid;gap:var(--s1);cursor:pointer;min-width:0}
.preset:hover{border-color:var(--border-hover)}
.preset[aria-pressed="true"]{border-color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--text-strong);background:var(--soft)}
.preset b{font-family:var(--font-head);font-size:var(--size-5);font-weight:800;line-height:1.2;color:var(--text-strong)}
.preset b em{font-style:normal;font-weight:400;font-size:var(--size-6);color:var(--text-weak)}
.preset small{font-size:var(--size-tiny);color:var(--text-weak);font-variant-numeric:tabular-nums}
.strip{display:flex;gap:3px;height:34px;border-radius:var(--r);overflow:hidden}
.blk{flex-basis:0;min-width:3px;display:flex;align-items:center;justify-content:center;font-size:var(--size-tiny);font-weight:600;white-space:nowrap;overflow:hidden;color:var(--text-strong)}
.blk.l1{background:color-mix(in srgb,var(--accent) 25%,var(--surface))}
.blk.l2{background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.blk.l3{background:var(--accent);color:var(--on-accent)}
.blk.l4{background:var(--dusk-blue);color:#fff}
.blk.brk{background:repeating-linear-gradient(135deg,var(--sunk) 0 4px,var(--surface) 4px 8px);color:var(--text-weak);font-size:0}
.strip-meta{font-size:var(--size-small);color:var(--text-weak);font-variant-numeric:tabular-nums}
.toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s3) var(--s5)}
.go{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s1)}
.go .hint{color:var(--text-weak);font-size:var(--size-small)}

.log{display:grid;gap:var(--s5)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.kpi{display:grid;gap:var(--s1)}
.kpi b{font-family:var(--font-head);font-size:var(--size-3);font-weight:800;line-height:1.1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);height:128px}
.wk{display:grid;grid-template-rows:16px 1fr 20px;text-align:center;min-width:0}
.wk .v{font-size:var(--size-tiny);line-height:16px;color:var(--text-weak);font-variant-numeric:tabular-nums}
.wk .col{position:relative;border-bottom:1px solid var(--border)}
.wk .bar{position:absolute;left:16%;right:16%;bottom:0;background:color-mix(in srgb,var(--accent) 60%,var(--surface));border-radius:var(--r-sm) var(--r-sm) 0 0}
.wk.today .bar{background:var(--dusk-blue)}
.wk .d{font-size:var(--size-tiny);line-height:20px;color:var(--text-weak)}
.wk.today .d{color:var(--text-strong);font-weight:600}
.recent{list-style:none;margin:0;padding:0;display:grid}
.recent li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s3);padding:var(--s3) 0;border-top:1px solid var(--border)}
.recent li:first-child{border-top:0;padding-top:0}
.recent .w{font-weight:600;color:var(--text-strong)}
.recent .d{color:var(--text-weak);font-size:var(--size-small);grid-column:1}
.recent time{font-size:var(--size-tiny);color:var(--text-weak);grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--text-weak);font-size:var(--size-small)}

/* ---------- library ---------- */
.lib-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.lib-head .chips{flex:1 1 420px;min-width:0}
.lib-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.board-tools{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4);min-height:24px;color:var(--text-weak);font-size:var(--size-small)}
.linkish{background:none;border:0;padding:0;color:var(--link);font-size:var(--size-small);cursor:pointer;text-decoration:underline;text-decoration-color:var(--border-hover);text-underline-offset:3px}
.linkish:hover{color:var(--text-strong)}
.board-form{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.board-form input{flex:1 1 220px}
.drop{border:1px dashed var(--border-hover);border-radius:var(--r-lg);padding:var(--s4);text-align:center;color:var(--text-weak);font-size:var(--size-small);margin-bottom:var(--s4);background:var(--surface);transition:background-color .15s,border-color .15s}
.drop b{color:var(--text-strong)}
.drop.over{background:var(--primary-soft);border-color:var(--primary)}
.note-bar{background:var(--info-soft);color:var(--info-text);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:var(--size-small);margin-bottom:var(--s4)}
.grid{column-width:220px;column-gap:var(--s3)}
.ref{display:block;width:100%;margin:0 0 var(--s3);padding:0;border:0;border-radius:14px;overflow:hidden;position:relative;background:var(--sunk);cursor:zoom-in;break-inside:avoid;text-align:left;box-shadow:var(--shadow-card)}
.ref img,.ref video{display:block;width:100%;height:auto;max-width:100%}
.ref .badges{position:absolute;top:var(--s2);left:var(--s2);display:flex;gap:var(--s1)}
.badge{font-size:var(--size-tiny);font-weight:600;line-height:1.5;background:var(--scrim);color:var(--on-scrim);padding:0 var(--s2);border-radius:var(--r-sm)}
.ref .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s5) var(--s3) var(--s2);background:linear-gradient(transparent,var(--scrim));color:var(--on-scrim);font-size:var(--size-small);line-height:1.3;opacity:0;transition:opacity .15s}
.ref:hover .cap,.ref:focus-visible .cap{opacity:1}
@media (hover:none){.ref .cap{opacity:1}}
.ref.pending img,.ref.pending video{opacity:.5}
.ref.pending::after{content:"Saving…";position:absolute;right:var(--s2);top:var(--s2);font-size:var(--size-tiny);font-weight:600;line-height:1.5;background:var(--scrim);color:var(--on-scrim);padding:0 var(--s2);border-radius:var(--r-sm)}
.usage{font-size:var(--size-tiny);color:var(--text-weak);margin-top:var(--s3);font-variant-numeric:tabular-nums}

/* ---------- timer ---------- */
.timer{display:grid;gap:var(--s5);justify-items:center;padding-top:var(--s2)}
.t-face{width:min(100%,780px);text-align:center;display:grid;gap:var(--s2)}
.t-digits{font-family:var(--font-head);font-size:clamp(88px,22vw,200px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.t-digits.rest{color:var(--text-weak)}
.t-bar{height:8px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden;margin-top:var(--s2)}
.t-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;transition:transform .12s linear}
.t-ctrls{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
.t-setup{width:min(100%,780px);display:grid;gap:var(--s5)}
.t-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);align-items:end}
.t-time{display:flex;align-items:center;gap:var(--s2)}
.t-time input{width:76px}

/* ---------- sources ---------- */
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:var(--s5);align-items:start}
.src{display:grid;gap:var(--s4)}
.src-tag{font-family:var(--font-head);font-size:var(--size-tiny);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-text)}
.src header{display:grid;gap:var(--s1)}
.steps{margin:0;padding-left:var(--s5);display:grid;gap:var(--s1)}
.steps b{color:var(--text-strong)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.paste{width:100%;min-height:88px;resize:none;border:1px dashed var(--primary);border-radius:var(--r-lg);background:var(--primary-soft);color:var(--text-strong);font-size:var(--size-small);padding:var(--s4);text-align:center;box-shadow:none}
.paste:hover{border-color:var(--primary)}
.paste::placeholder{color:var(--primary-text);opacity:1}
.paste:focus{border-style:solid;border-color:var(--primary);box-shadow:0 0 0 .125em var(--focus)}
.sub{display:grid;gap:var(--s3);border-top:1px solid var(--border);padding-top:var(--s4)}
.links{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.links li{display:flex;align-items:center;gap:var(--s3);justify-content:space-between;min-width:0}
.links a{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.links a:hover{color:var(--text-strong)}
.xbtn{border:0;background:none;color:var(--text-weak);cursor:pointer;padding:var(--s1);border-radius:var(--r);display:inline-grid}
.xbtn:hover{color:var(--danger)}
.qlinks{display:flex;flex-wrap:wrap;gap:var(--s2)}
.qlinks a{font-size:var(--size-small);line-height:1.5;text-decoration:none;background:var(--sunk);border-radius:var(--r-pill);padding:var(--s1) var(--s3);color:var(--text-strong)}
.qlinks a:hover{background:var(--primary-soft);color:var(--primary-text)}
details.more{border-top:1px solid var(--border);padding-top:var(--s4)}
details.more summary{cursor:pointer;font-weight:600;color:var(--text-strong)}
details.more[open] summary{margin-bottom:var(--s3)}
#fgVid{width:100%;max-width:100%;aspect-ratio:16/9;background:var(--stage);border-radius:var(--r);display:block}
.fg-ctrl{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.fg-ctrl select{height:40px;padding-block:0}
.ibl{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);color:var(--text-strong);display:inline-grid;place-items:center;cursor:pointer}
.ibl:hover{border-color:var(--border-hover)}
.tc{font-family:var(--font-mono);font-size:var(--size-small);font-variant-numeric:tabular-nums;margin-left:auto;color:var(--text-strong)}
.thumbs{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1)}
.thumbs img{height:56px;width:auto;border-radius:var(--r);flex:none}
input[type="range"]{width:100%;accent-color:var(--primary)}
.synced{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.synced li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s3);align-items:center;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r)}
.synced .nm{font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.synced .meta{grid-column:1;font-size:var(--size-tiny);color:var(--text-weak);font-variant-numeric:tabular-nums}
.synced .acts{grid-column:2;grid-row:1/3;display:flex;gap:var(--s2);align-items:center}
.acct{display:grid;gap:var(--s3)}
.acct .row{gap:var(--s2)}

/* ---------- stage overlays (player + viewer) ---------- */
.player,.viewer{position:fixed;inset:0;z-index:100;background:var(--stage);color:var(--stage-ink);overflow:hidden;font-family:var(--font-body)}
.player{user-select:none}
.player .lbl,.viewer .lbl{color:var(--stage-2)}
.ib{width:44px;height:44px;border-radius:var(--r-pill);display:inline-grid;place-items:center;background:var(--stage-btn);color:var(--stage-ink);border:0;cursor:pointer;flex:none}
.ib:hover{background:var(--stage-btn-h)}
.ib[aria-pressed="true"]{background:var(--stage-accent);color:var(--stage-on-accent)}
.ib.big{width:56px;height:56px}
.ib.txt{width:auto;padding:0 var(--s4);font-size:var(--size-small);font-weight:600;gap:var(--s2);display:inline-flex;align-items:center}
.ib:disabled{opacity:.35;cursor:not-allowed}
.stage-in{height:32px;background:var(--stage-btn);color:var(--stage-ink);border:1px solid var(--stage-line);border-radius:var(--r);padding:0 var(--s2);font-size:var(--size-small);box-shadow:none}
.gray{filter:grayscale(1)}
.mir{transform:scaleX(-1)}
.g3{position:absolute;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);pointer-events:none}
.g3 span{border-right:1px solid var(--gridline);border-bottom:1px solid var(--gridline)}
.g3 span:nth-child(3n){border-right:0}
.g3 span:nth-child(n+7){border-bottom:0}

.pl-frame{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 68px);bottom:calc(env(safe-area-inset-bottom,0px) + 100px)}
.pl-frame img,.pl-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pl-top,.pl-bot{position:absolute;left:0;right:0;display:flex;align-items:center;gap:var(--s4);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity .25s}
.pl-top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + var(--s3));padding-bottom:var(--s3);justify-content:space-between}
.pl-bot{bottom:0;padding-top:var(--s3);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--s4))}
.pl-info{display:flex;align-items:center;gap:var(--s3);min-width:0;flex-wrap:wrap}
.pl-count{font-size:var(--size-small);font-weight:600}
.pill{font-size:var(--size-tiny);font-weight:600;line-height:1.5;padding:0 var(--s2);border-radius:var(--r-pill);background:var(--stage-btn);color:var(--stage-2)}
.pill.on{background:var(--stage-accent);color:var(--stage-on-accent)}
.pl-note{font-size:var(--size-small);color:var(--stage-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.pl-clock{font-family:var(--font-head);font-size:var(--size-1);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:132px;transition:color .2s}
.player.warn .pl-clock{color:var(--stage-warn)}
.player.paused .pl-clock{color:var(--stage-2)}
.pl-ctrls{display:flex;gap:var(--s3);align-items:center;margin-inline:auto}
.pl-opts{display:flex;gap:var(--s2);align-items:center}
.pl-keys{font-size:var(--size-tiny);line-height:1.4;color:var(--stage-2);text-align:right}
.pl-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--stage-btn)}
.pl-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;transition:transform .1s linear}
.player.warn .pl-bar i{background:var(--stage-warn)}
.player.idle{cursor:none}
.player.idle .pl-top,.player.idle .pl-ctrls,.player.idle .pl-opts{opacity:0;pointer-events:none}
.player.idle .pl-clock{opacity:.5}
.pl-break{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s3);text-align:center;padding:var(--s5)}
.pl-break-t{font-family:var(--font-head);font-size:clamp(80px,18vw,160px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-break p{color:var(--stage-2)}
.pl-end{position:absolute;inset:0;overflow:auto;background:var(--stage);padding:calc(env(safe-area-inset-top,0px) + var(--s6)) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + var(--s6)) max(16px,env(safe-area-inset-left,0px))}
.pl-end-in{max-width:960px;margin:0 auto;display:grid;gap:var(--s5)}
.pl-end h2{font-size:var(--size-1);font-weight:800;line-height:1.1;color:var(--stage-ink)}
.pl-stats{display:flex;gap:var(--s5) var(--s6);flex-wrap:wrap}
.pl-stats div{display:grid;gap:var(--s1)}
.pl-stats b{font-family:var(--font-head);font-size:var(--size-3);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.pl-stats span{font-size:var(--size-tiny);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stage-2)}
.pl-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2)}
.pl-thumbs figure{margin:0;display:grid;gap:var(--s1)}
.pl-thumbs img,.pl-thumbs video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);background:var(--stage-btn)}
.pl-thumbs figcaption{font-size:var(--size-tiny);color:var(--stage-2);font-variant-numeric:tabular-nums}
.pl-end .row{gap:var(--s3)}
.pl-end .btn{background:var(--stage-btn);border-color:var(--stage-line);color:var(--stage-ink)}
.pl-end .btn:hover{border-color:var(--stage-2)}
.pl-end .btn.primary{background:var(--stage-accent);border-color:transparent;color:var(--stage-on-accent)}
@media (max-width:640px){
  .pl-keys{display:none}
  .pl-clock{font-size:var(--size-2);min-width:0}
  .pl-bot{flex-wrap:wrap;justify-content:center;gap:var(--s3)}
  .pl-frame{bottom:calc(env(safe-area-inset-bottom,0px) + 152px)}
  .pl-ctrls{margin:0}
  .pl-note{display:none}
}

.vw-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.vw-stage:active{cursor:grabbing}
.vw-pan{position:absolute}
.vw-pan > img,.vw-pan > video,.vw-pan > canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;user-select:none}
.vw-pan .g3{inset:0}
.vw-top{position:absolute;top:0;left:0;right:0;display:flex;gap:var(--s3);align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + var(--s3)) max(16px,env(safe-area-inset-right,0px)) var(--s5) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(var(--stage-fade),transparent);pointer-events:none}
.vw-top > *{pointer-events:auto}
.vw-info{display:grid;gap:2px;min-width:0;flex:1}
.vw-info b{font-size:var(--size-small);font-weight:600;line-height:1.3}
.vw-info span{font-size:var(--size-small);color:var(--stage-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-info a{color:var(--stage-accent);font-size:var(--size-small);font-weight:600}
.vw-study{display:flex;gap:var(--s2);align-items:center}
.vw-study .t{font-family:var(--font-head);font-size:var(--size-4);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.vw-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;justify-content:center;align-items:center;padding:var(--s5) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + var(--s3)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,var(--stage-fade))}
.grp{display:flex;gap:var(--s2);align-items:center}
.zoomlbl{font-size:var(--size-tiny);font-variant-numeric:tabular-nums;min-width:52px;text-align:center;background:none;border:0;color:var(--stage-ink);cursor:pointer;padding:var(--s2) 0}
.fno{font-size:var(--size-tiny);font-variant-numeric:tabular-nums;color:var(--stage-2);min-width:60px;text-align:center}
.thr{display:flex;align-items:center;gap:var(--s2);font-size:var(--size-tiny);color:var(--stage-2)}
.thr input{width:110px;accent-color:var(--stage-accent)}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border-radius:var(--r-lg);border:0;background:var(--stage-btn);color:var(--stage-ink);display:grid;place-items:center;cursor:pointer}
.vw-nav:hover{background:var(--stage-btn-h)}
.vw-nav.prev{left:max(12px,env(safe-area-inset-left,0px))}
.vw-nav.next{right:max(12px,env(safe-area-inset-right,0px))}
.vw-edit{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 72px);width:min(340px,calc(100% - 32px));background:var(--stage);border:1px solid var(--stage-line);border-radius:var(--r-lg);padding:var(--s4);display:grid;gap:var(--s3);z-index:2}
.vw-edit .f > span{color:var(--stage-2)}
.vw-edit input,.vw-edit select{background:var(--stage-btn);color:var(--stage-ink);border-color:var(--stage-line);box-shadow:none}
.vw-edit .btn{background:var(--stage-btn);border-color:var(--stage-line);color:var(--stage-ink)}
.vw-edit .btn.primary{background:var(--stage-accent);border-color:transparent;color:var(--stage-on-accent)}
@media (max-width:640px){
  .vw-nav{display:none}
  .vw-study select{display:none}
}

/* ---------- modal + toast ---------- */
.modal{position:fixed;inset:0;z-index:300;background:var(--scrim);display:grid;place-items:center;padding:var(--s4)}
.modal-card{background:var(--surface);color:var(--text-strong);border-radius:var(--r-xl);padding:var(--s5);width:min(440px,100%);display:grid;gap:var(--s5);box-shadow:var(--shadow-pop)}
.modal-card .row{justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:400;background:var(--toast-bg);color:var(--toast-ink);padding:var(--s3) var(--s5);border-radius:var(--r-pill);font-size:var(--size-small);max-width:calc(100% - 32px);width:max-content;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow-pop)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}