/* Layout: a one-screen app. Header strip, the reading window filling the middle (the text panel docks beside it on wide
   screens and slides up as a sheet on phones), transport dock at the bottom. Settings, help and drops slide over; the page never scrolls.
   The user's focus-letter color doubles as the app's only accent. */
:root {
  --bg: #0b0b0a;
  --fg: #f3f2ee;
  --dim: #8d8c87;
  --line: #2f2e2b;
  --soft: #1b1b19;
  --raise: #141413;
  --focus: #e5484d;
  --ok: #2fa36b;
  --bad: #e5484d;
  --font-word: "Times New Roman", Tinos, Times, serif;
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-data: "Inter", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.45 var(--font-ui); overflow: hidden; transition: background-color .4s, color .4s; -webkit-tap-highlight-color: transparent; }
@media (max-height: 430px) { body { overflow: auto; } }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { height: 100%; min-height: 420px; max-width: 1480px; margin: 0 auto; padding-inline: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.app:fullscreen { max-width: none; background: var(--bg); padding-inline: 24px; }

/* Header */
.top { position: relative; display: flex; align-items: center; gap: 14px; padding-block: 10px 8px; transition: opacity .6s; }
.spacer { flex: 1; }
.stats { display: flex; gap: 14px; font: 13px var(--font-ui); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats b { color: var(--fg); font-weight: 500; }
.stats span { display: inline-flex; align-items: center; gap: 5px; }
.stats svg { width: 13px; height: 13px; fill: var(--focus); }
.stats .pop { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.25); } }
.tools { display: flex; gap: 2px; }
.icon { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: background-color .15s, transform .1s; }
.icon:hover { background: var(--soft); }
.icon:active { transform: scale(.94); }
.icon[aria-pressed="true"] { background: var(--soft); color: var(--focus); }
#btnAcct.in svg circle { fill: currentColor; }
.icon svg, .tbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Main area */
.main { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.splitter, .sgrip { display: none; }
@media (min-width: 1000px) {
  .app.panel-open .main { grid-template-columns: minmax(0, 1fr) 16px minmax(260px, var(--panel-w, 380px)); }
  .app.panel-open .splitter { display: block; }
}
/* Drag handles: a short bar that grows and takes the focus color when grabbed */
.splitter { position: relative; cursor: col-resize; touch-action: none; outline: none; }
.splitter::before, .dgrip::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 40px; margin: -20px 0 0 -2px; border-radius: 2px; background: var(--line); transition: background-color .15s, height .25s var(--ease), margin .25s var(--ease); }
.splitter:hover::before, .splitter:focus-visible::before, .app.resizing-x .splitter::before,
.dgrip:hover::before, .app.resizing-x .dgrip::before { background: var(--focus); height: 76px; margin-top: -38px; }
.app.resizing-x, .app.resizing-x * { cursor: col-resize !important; user-select: none; }
.app.resizing-y, .app.resizing-y * { cursor: row-resize !important; user-select: none; }
.app.resizing-x .drawer, .app.resizing-y .panel { transition: none; }

/* Stage */
.stage { position: relative; min-height: 0; overflow: hidden; border-radius: 18px; background: var(--raise); border: 1px solid var(--line); outline: none; user-select: none; cursor: pointer; touch-action: none; transition: background-color .4s, border-color .4s; }
.app.idle .stage { cursor: none; }
.corner { position: absolute; width: 14px; height: 14px; border-color: var(--line); border-style: solid; border-width: 0; pointer-events: none; }
.corner.tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.corner.tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.corner.bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.corner.br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.guide { position: absolute; left: 7%; right: 7%; height: 1px; background: var(--line); pointer-events: none; }
.guide.gt { top: calc(50% - var(--gap, 60px)); }
.guide.gb { top: calc(50% + var(--gap, 60px)); }
.guide i { position: absolute; left: calc((var(--anchor, 50%) - 7%) / .86); width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--focus); transition: background-color .3s; }
.guide.gt i { top: 0; }
.guide.gb i { bottom: 0; }
.word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr auto 1fr; font-family: var(--font-word); white-space: pre; line-height: 1.12; pointer-events: none; }
.word .pre { text-align: right; }
.word .mid { color: var(--focus); transition: color .3s; }
.app.bold-focus .word .mid { font-weight: 700; }
.word.plain { display: block; text-align: center; }
.badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 13px var(--font-ui); color: var(--dim); display: flex; align-items: center; gap: 7px; pointer-events: none; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.app.playing .badge::before { background: var(--focus); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; } }
.dots { position: absolute; left: 50%; top: calc(50% + var(--gap, 60px) + 20px); transform: translateX(-50%); display: flex; gap: 9px; pointer-events: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color .12s, transform .12s; }
.dots i.on { background: var(--focus); transform: scale(1.2); }
.context { position: absolute; left: 9%; right: 9%; top: calc(50% + var(--gap, 60px) + 16px); text-align: center; font: 15px/1.6 var(--font-ui); color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: default; }
.context span { display: inline-block; cursor: pointer; border-radius: 4px; padding: 0 1px; transition: color .12s; }
.context span:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--focus); text-underline-offset: 3px; }
.context span.now { color: var(--fg); background: color-mix(in srgb, var(--focus) 20%, transparent); padding: 1px 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* Scrub strip: a tick tape on the top guide, one tick per word, centered on the focus notch. It follows the swipe and
   shows how far you've moved. Only visible while scrubbing. */
.bezel { position: absolute; left: var(--anchor, 50%); top: calc(50% - var(--gap, 60px) - 46px); width: min(300px, 64%); transform: translate(-50%, 5px); display: grid; justify-items: center; gap: 8px; pointer-events: none; opacity: 0; transition: opacity .35s, transform .35s var(--ease); }
.bezel.show { opacity: 1; transform: translate(-50%, 0); transition-duration: .14s, .25s; }
.bezel b { font: 500 16px/1 var(--font-data); color: var(--fg); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.tape { position: relative; width: 100%; height: 12px;
  background-image: linear-gradient(to right, var(--dim) 1.5px, transparent 1.5px), linear-gradient(to right, var(--line) 1.5px, transparent 1.5px);
  background-size: 70px 12px, 14px 6px; background-repeat: repeat-x; background-position-y: bottom;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent); }
.tape.settle { transition: background-position .32s var(--ease); }
.tape::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--focus); }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 24px; cursor: default; }
.empty h2 { margin: 0; font: 700 clamp(22px, 3.4vw, 34px)/1.15 var(--font-ui); text-wrap: balance; }
.empty h2 em { font-style: normal; color: var(--focus); }
.empty .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.empty kbd, .help kbd { font: 12px var(--font-ui); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; background: var(--bg); color: var(--fg); }
.empty p { margin: 0; color: var(--dim); font-size: 13px; }
.done { position: absolute; left: 6%; right: 6%; top: calc(50% + var(--gap, 60px) + 16px); display: grid; justify-items: center; gap: 10px; text-align: center; cursor: default; animation: rise .35s var(--ease); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; font-size: 15px; color: var(--dim); }
.facts > span + span::before { content: "·"; margin-inline: 10px; }
.facts b { font: 500 15px var(--font-data); color: var(--fg); font-variant-numeric: tabular-nums; }
.done p { margin: 0; color: var(--dim); font-size: 14px; }
.done .row { display: flex; gap: 8px; margin-top: 2px; }
.toast { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -8px); background: var(--fg); color: var(--bg); padding: 6px 14px; border-radius: 999px; font-size: 13px; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); z-index: 2; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Jusku Daily: the pill in the header with its one-time offer, and the cards laid over the reading window */
.pill { font-size: 13px; color: var(--dim); border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 3px 11px; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.pill:hover { background: var(--soft); }
.pill[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }
.offer { position: absolute; top: 100%; left: 0; z-index: 25; width: max-content; max-width: min(290px, 100%); background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: grid; gap: 12px; font-size: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
.offer::before { content: ""; position: absolute; left: var(--arrow, 22px); top: -6px; width: 10px; height: 10px; background: var(--soft); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.offer p { margin: 0; }
.offer .row { display: flex; gap: 8px; }
.offer .btn { padding: 6px 13px; font-size: 13px; }
.card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 22px 20px; display: grid; gap: 14px; text-align: center; cursor: default; animation: cardIn .3s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
.card .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.card .facts svg { width: 13px; height: 13px; fill: var(--focus); vertical-align: -2px; margin-right: 2px; }
.eyebrow { font-size: 13px; color: var(--dim); }
.card h2 { margin: 0; font: 700 clamp(22px, 3vw, 30px)/1.15 var(--font-ui); text-wrap: balance; }
.q { margin: 0; font: 400 19px/1.35 var(--font-ui); text-wrap: balance; }
.opts { display: grid; gap: 8px; }
.opt { border: 1px solid var(--line); background: var(--raise); border-radius: var(--r-md); padding: 10px 14px; cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s, color .15s; }
.opt:hover:not([disabled]) { background: var(--soft); }
.opt.right { border-color: var(--ok); color: var(--ok); }
.opt.wrong { border-color: var(--bad); color: var(--bad); }
.opt[disabled] { cursor: default; }
.big { font: 500 46px/1.2 var(--font-data); font-variant-numeric: tabular-nums; }
.big small { font: 400 14px var(--font-ui); color: var(--dim); margin-left: 6px; }
.squares { font-size: 22px; letter-spacing: 3px; min-height: 1.3em; }
.squares span { display: inline-block; }
.qdots { display: flex; gap: 6px; justify-content: center; }
.qdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.qdots i.on { background: var(--fg); }
.qdots i.ok { background: var(--ok); }
.qdots i.no { background: var(--bad); }

/* Text buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--raise); padding: 7px 13px; border-radius: 10px; cursor: pointer; font-size: 14px; position: relative; transition: background-color .15s, border-color .15s, transform .1s; white-space: nowrap; }
.btn:hover { background: var(--soft); border-color: var(--dim); }
.btn:active { transform: scale(.97); }
.btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.solid:hover { opacity: .88; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Text panel */
.panel { min-height: 0; display: none; flex-direction: column; background: var(--raise); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: background-color .4s, border-color .4s, opacity .6s; }
.app.panel-open .panel { display: flex; }
.phead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--line); }
.tabs { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; }
.tabs button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--dim); }
.tabs button[aria-selected="true"] { background: var(--raise); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tabs .count { font: 12px var(--font-ui); color: var(--dim); margin-left: 3px; }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ptools { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; align-items: center; }
.meta { margin-left: auto; font: 13px var(--font-ui); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
textarea { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg); font: 16px/1.65 var(--font-ui); padding: 14px 16px; outline: none; }
textarea::selection { background: color-mix(in srgb, var(--focus) 30%, transparent); }
textarea::placeholder { color: var(--dim); }
textarea:focus-visible { outline: none; }
/* Hovering the text faintly marks where a jump would land; right-click opens a small menu (Copy, Paste, Cut, Jump).
   The mirror is an invisible twin of the textarea (same text, font, padding and width) used to find the character
   under the pointer. */
.tbox { position: relative; flex: 1; min-height: 0; display: flex; }
.tbox textarea { position: relative; z-index: 1; }
.mirror { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; overflow: hidden; padding: 14px 16px; border-top: 1px solid transparent; font: 16px/1.65 var(--font-ui); white-space: pre-wrap; overflow-wrap: break-word; color: transparent; user-select: none; }
.land { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.land i { position: absolute; background: color-mix(in srgb, var(--focus) 13%, transparent); border-radius: 3px; }
.menu { position: fixed; z-index: 32; min-width: 150px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; display: grid; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.menu button { text-align: left; border: 0; background: none; color: var(--fg); font: 14px var(--font-ui); padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer; }
.menu button:hover:not([disabled]), .menu button:focus-visible { background: var(--raise); outline: none; }
.menu button[disabled] { color: var(--dim); cursor: default; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.recent { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.recent li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; position: relative; }
.recent li:hover, .recent li:focus-visible { background: var(--soft); }
.recent li.cur::before { content: ""; position: absolute; left: 3px; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: var(--focus); }
.recent .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.recent .m { grid-column: 1; font: 13px var(--font-ui); color: var(--dim); }
.recent .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; }
.recent .bar i { display: block; height: 100%; background: var(--focus); }
.recent .x { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; opacity: 0; font-size: 18px; line-height: 1; }
.recent li:hover .x, .recent .x:focus-visible { opacity: 1; }
.recent .x:hover { background: var(--line); color: var(--fg); }
.none { color: var(--dim); text-align: center; padding: 30px 16px; font-size: 14px; }
/* Contents: chapters and bookmarks */
.contents { overflow-y: auto; flex: 1; min-height: 0; padding: 6px 6px 14px; }
.csec + .csec { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.csec h4 { margin: 0; padding: 8px 12px 6px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.csec h4 span { font-weight: 400; color: var(--dim); font-size: 13px; }
.btn.small { padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.clist { list-style: none; margin: 0; padding: 0; }
.clist li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; padding: 8px 12px; border-radius: 12px; cursor: pointer; position: relative; }
.clist li:hover, .clist li:focus-visible { background: var(--soft); }
.clist .n { font: 12px var(--font-data); color: var(--dim); font-variant-numeric: tabular-nums; }
.clist .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clist .m { font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clist li.read .t { color: var(--dim); }
.clist li.cur .t { font-weight: 700; }
.clist li.cur .n { color: var(--focus); }
.clist li .bar { grid-column: 2 / -1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.clist li .bar i { display: block; height: 100%; background: var(--focus); }
.clist li .x { position: absolute; right: 6px; top: 50%; margin-top: -14px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--soft); color: var(--dim); cursor: pointer; opacity: 0; font-size: 18px; line-height: 1; }
.clist li:hover .x, .clist .x:focus-visible { opacity: 1; }
.clist li:has(.x):hover .m, .clist li:has(.x:focus-visible) .m { visibility: hidden; }
.clist .x:hover { background: var(--line); color: var(--fg); }
.clist .bm { color: var(--focus); }
.clist .bm svg { width: 13px; height: 13px; fill: currentColor; }
.cnone { color: var(--dim); font-size: 13px; padding: 2px 12px 8px; margin: 0; }
/* Chapter ticks and bookmark dots on the progress track */
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks i { position: absolute; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; background: var(--bg); }
.marks b { position: absolute; top: 50%; width: 7px; height: 7px; margin: -11px 0 0 -3.5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--focus); }
/* Usage log for testing analytics locally (press `) */
.devlog { position: fixed; left: 12px; bottom: 12px; z-index: 45; width: min(420px, calc(100% - 24px)); max-height: 46%; overflow: auto; background: var(--raise); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: 12px/1.5 var(--font-data); box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .5); }
.devlog h5 { margin: 0 0 6px; font: 700 13px var(--font-ui); display: flex; justify-content: space-between; gap: 8px; }
.devlog h5 span { font-weight: 400; color: var(--dim); }
.devlog .counts { color: var(--dim); margin-bottom: 6px; }
.devlog ol { margin: 0; padding: 0; list-style: none; }
.devlog li { border-top: 1px solid var(--line); padding: 3px 0; overflow-wrap: anywhere; }
.devlog li b { color: var(--fg); font-weight: 500; }
.devlog li span { color: var(--dim); }

/* Dock */
.dock { padding-block: 10px 12px; display: grid; gap: 8px; transition: opacity .6s; }
.scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font: 12px var(--font-data); color: var(--dim); font-variant-numeric: tabular-nums; }
.scrub .num { min-width: 7ch; }
.scrub .num.r { text-align: right; }
.track { position: relative; height: 22px; cursor: pointer; touch-action: none; outline: none; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
.fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--fg); }
.thumb { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 3px var(--bg); transform: scale(.5); transition: transform .15s var(--ease); }
.track:hover .thumb, .track:focus-visible .thumb, .app.scrubbing .thumb { transform: scale(1); }
.tip { position: absolute; bottom: 26px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 4px 9px; border-radius: 8px; font: 14px var(--font-ui); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; }
.tip small { font: 12px var(--font-ui); opacity: .65; margin-left: 6px; }
.track:hover .tip, .app.scrubbing .tip { opacity: 1; }
.drow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.speed { display: flex; align-items: center; gap: 6px; min-width: 0; }
.speed .val { display: grid; line-height: 1.05; min-width: 70px; margin-left: 4px; }
.speed .val b { font: 500 21px/1.2 var(--font-data); font-variant-numeric: tabular-nums; }
.speed .val > span { font-size: 13px; color: var(--dim); }
.step { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--raise); cursor: pointer; display: grid; place-items: center; font: 500 17px var(--font-data); line-height: 1; transition: background-color .15s, transform .1s; touch-action: manipulation; }
.step:hover { background: var(--soft); }
.step:active { transform: scale(.9); }
.range { -webkit-appearance: none; appearance: none; width: 130px; min-width: 60px; height: 22px; background: transparent; cursor: pointer; flex-shrink: 1; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--fg), var(--fg)) 0 / var(--p, 50%) 100% no-repeat, var(--line); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fg); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--raise); border: 2px solid var(--fg); transition: transform .12s; }
.range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--raise); border: 2px solid var(--fg); }
.range:active::-webkit-slider-thumb { transform: scale(1.2); }
/* Rolling number: one column per digit, each a stack of 0–9 plus a trailing 0 for the wrap */
.odo { display: inline-flex; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.col { width: 1ch; height: 1.2em; overflow: hidden; transition: width .34s var(--ease), opacity .25s; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.col.off { width: 0; opacity: 0; }
.stack { display: flex; flex-direction: column; will-change: transform; }
.stack span { display: block; height: 1.2em; line-height: 1.2; text-align: center; }
/* Speed-up: while a text ramps up, the slider's thumb hides and a look-alike (.live) shows the live speed heading for a
   teal twin a tenth bigger (.goal) at the chosen speed. The goal's halo swells as the thumb closes in (--near); on arrival
   the goal folds onto the thumb, the thumb gives one soft teal pulse, and the real thumb takes over.
   --f is the live speed as a fraction of the track. */
.strack { position: relative; display: flex; align-items: center; min-width: 0; --f: .1818; }
.strack.ramping .range::-webkit-slider-thumb { opacity: 0; }
.strack.ramping .range::-moz-range-thumb { opacity: 0; }
.goal, .live { position: absolute; top: 50%; border-radius: var(--sq); pointer-events: none; transform: translate(-50%, -50%); display: none; }
.strack.ramping .goal, .strack.ramping .live { display: block; }
.goal { left: calc(8px + (100% - 16px) * var(--g, 1)); width: 17.6px; height: 17.6px; background: rgb(45 212 191 / .14); border: 1.5px solid rgb(45 212 191 / .9);
  box-shadow: 0 0 0 calc(var(--near, 0) * 5px) rgb(45 212 191 / .16); transition: box-shadow .2s linear; }
.live { left: calc(8px + (100% - 16px) * var(--f)); width: 16px; height: 16px; background: var(--raise); border: 2px solid var(--fg); }
.transport { display: flex; align-items: center; gap: 4px; }
.tbtn { width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; color: var(--fg); transition: background-color .15s, transform .1s; touch-action: manipulation; }
.tbtn:hover { background: var(--soft); }
.tbtn:active { transform: scale(.9); }
.play { width: 60px; height: 60px; margin-inline: 6px; background: var(--fg); color: var(--bg); position: relative; }
.play:hover { background: var(--fg); transform: scale(1.04); }
.play::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--focus); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .3s var(--ease); }
.app.playing .play::after { opacity: 1; transform: scale(1); }
.play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.play .i-pause, .app.playing .play .i-play { display: none; }
.app.playing .play .i-pause { display: block; }
.docinfo { justify-self: end; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 13px; color: var(--dim); }
.docinfo .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 260px; cursor: pointer; }
.docinfo .t:hover { color: var(--fg); }
.docinfo .tbtn { width: 34px; height: 34px; color: var(--dim); }
.docinfo .tbtn svg { width: 18px; height: 18px; }

/* Idle fade while reading */
.app.idle .top, .app.idle .dock, .app.idle .panel { opacity: .06; }
.app.idle .stage { border-color: transparent; }
.app.idle .corner, .app.idle .badge { opacity: 0; }

/* Overlays */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 20; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w, 390px), 100%); z-index: 30; background: var(--raise); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .32s var(--ease), background-color .4s, visibility 0s .32s; }
.drawer.open { transform: none; visibility: visible; box-shadow: -20px 0 50px -30px rgba(0, 0, 0, .4); transition: transform .32s var(--ease), background-color .4s; }
.dgrip { position: absolute; left: -7px; top: 0; bottom: 0; width: 14px; cursor: col-resize; touch-action: none; z-index: 1; }
.dgrip::before { background: transparent; }
.dhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 20px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.dhead h2 { margin: 0; font-size: 17px; }
.dbody { overflow-y: auto; padding: 4px 20px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 20px; align-content: start; }
.sec { display: grid; gap: 10px; }
.sec > h3 { margin: 0; font: 700 14px var(--font-ui); color: var(--fg); display: flex; justify-content: space-between; align-items: baseline; }
.sec > h3 output { font-weight: 400; font-size: 13px; color: var(--dim); }
.colors { display: flex; flex-wrap: wrap; gap: 9px; }
.cdot { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; position: relative; transition: transform .15s var(--ease); padding: 0; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .3); }
.cdot:hover { transform: scale(1.12); }
.cdot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--raise), 0 0 0 4px var(--fg); }
.cdot.text { background: var(--fg); }
.cdot.custom { background: conic-gradient(#e5484d, #e8a317, #2fa36b, #12a594, #3e8ed0, #9b5de5, #e93d82, #e5484d); overflow: hidden; }
.cdot.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cdot.custom.set::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 2px var(--raise); }
.fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fontbtn { border: 1px solid var(--line); background: var(--raise); border-radius: 12px; padding: 8px 4px 6px; cursor: pointer; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--dim); transition: border-color .15s; }
.fontbtn b { font-size: 22px; color: var(--fg); line-height: 1.1; }
.fontbtn[aria-pressed="true"] { border-color: var(--focus); color: var(--fg); box-shadow: inset 0 0 0 1px var(--focus); }
.seg { display: flex; background: var(--soft); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 6px 4px; border-radius: 8px; cursor: pointer; font: 14px var(--font-ui); color: var(--dim); transition: background-color .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--raise); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sec .range { width: 100%; }
.toggles { display: grid; gap: 2px; }
.toggles label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.switch { -webkit-appearance: none; appearance: none; width: 36px; height: 21px; border-radius: 11px; background: var(--line); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background-color .2s; }
.switch::before { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--raise); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.switch:checked { background: var(--focus); }
.switch:checked::before { transform: translateX(15px); }
.help.acctbox { width: min(380px, calc(100% - 32px)); display: grid; gap: 10px; }
.acctbox h2 { margin: 0; }
.acctbox .st { display: flex; align-items: center; gap: 6px; }
.acctbox output { font: 400 13px var(--font-ui); color: var(--dim); }
.acct .view { display: grid; gap: 8px; }
.acct .alt { justify-content: space-between; align-items: center; }
.acct .alt .btn svg { fill: currentColor; stroke: none; }
.acct .rows { display: grid; }
.acct a.btn { text-decoration: none; color: inherit; }
.acct .rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.acct .rows span { display: grid; }
.acct .rows small { font-size: 12px; color: var(--dim); }
.acct .mono { font: 13px "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--fg); user-select: all; word-break: break-all; }
.acct .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.acct .qr { justify-self: center; width: 180px; height: 180px; background: #fff; border-radius: var(--r-md); padding: 8px; box-sizing: border-box; }
.acct .qr svg { width: 100%; height: 100%; display: block; }
.acct .devices { list-style: none; margin: 0; padding: 0; display: grid; }
.acct .devices li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.acct .devices small { color: var(--dim); white-space: nowrap; }
.acct .devices b { font-weight: 500; color: var(--focus); }
.acct p { margin: 0; font-size: 13px; color: var(--dim); }
.acct p.err { color: var(--bad); }
.acct p.fine { font-size: 12px; }
.acct p.fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.acct input { width: 100%; border: 1px solid var(--line); background: var(--soft); color: var(--fg); font: 15px var(--font-ui); padding: 8px 11px; border-radius: var(--r-md); outline: none; }
.acct input:focus { border-color: var(--dim); }
.acct .row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct .reset.bad { color: var(--bad); }
.reset { justify-self: start; border: 0; background: none; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; font-size: 13px; }
.reset:hover { color: var(--fg); }

.help { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; background: var(--raise); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5); animation: rise .25s var(--ease); }
.help h2 { margin: 0 0 12px; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.help dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px 22px; margin: 0; }
.help dl div { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
.help dd { margin: 0; display: flex; gap: 4px; flex-shrink: 0; }
.help dt { color: var(--dim); }
.dropzone { position: absolute; inset: 10px; z-index: 3; border: 2px dashed var(--line); border-radius: 14px; background: color-mix(in srgb, var(--raise) 96%, transparent); backdrop-filter: blur(6px); display: grid; place-content: center; justify-items: center; pointer-events: none; animation: fade .15s; transition: border-color .15s, background-color .15s; }
.dropzone b { font: 700 clamp(24px, 4vw, 44px) var(--font-ui); color: var(--dim); transition: color .15s, transform .2s var(--ease); }
.dropzone b i { font-style: normal; color: var(--focus); }
.dropzone.over { border-color: var(--focus); background: color-mix(in srgb, var(--raise) 93%, transparent); }
.dropzone.over b { color: var(--fg); transform: scale(1.06); }
.probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Phones and narrow windows: the text panel becomes a bottom sheet */
@media (max-width: 999px) {
  .panel { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: min(80%, 680px); z-index: 30; border-radius: 20px 20px 0 0; border-bottom: 0; transform: translateY(103%); transition: transform .32s var(--ease), background-color .4s; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .4); }
  .app.panel-open .panel { transform: none; }
  .panel { height: var(--sheet-h, min(80%, 680px)); }
  .sgrip { display: block; flex-shrink: 0; height: 22px; margin-bottom: -10px; position: relative; cursor: row-resize; touch-action: none; }
  .sgrip::before { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); transition: background-color .15s, width .2s var(--ease), margin .2s var(--ease); }
  .sgrip:hover::before, .app.resizing-y .sgrip::before { background: var(--focus); width: 64px; margin-left: -32px; }
}
@media (max-width: 720px) {
  .stats, #btnHelp { display: none; }
  .top { gap: 10px; }
  .drow { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .transport { order: -1; }
  .docinfo { justify-self: end; margin-top: -4px; }
  .docinfo > :not(.legal) { display: none; }
  .legal { margin: 0; }
  .range { width: 110px; }
  .stage { border-radius: 14px; }
  .corner { display: none; }
}
@media (max-height: 560px) { .play { width: 50px; height: 50px; } .tbtn { width: 36px; height: 36px; } .top { padding-block: 6px 4px; } }
/* Short screens (phones on their side): what sits under the word moves to the bottom edge instead of running off the stage */
@media (max-height: 520px) {
  .done, .context, .dots { top: auto; bottom: 10px; }
  .done { gap: 4px; } .done p { display: none; }
  .context { -webkit-line-clamp: 2; }
  .bezel { top: max(4px, calc(50% - var(--gap, 60px) - 46px)); }
}
@media (max-height: 380px) { .stage:has(#done:not([hidden])) .word { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Shape: every control is a squircle, from the play button down to the switch knobs.
   Browsers that know corner-shape draw a true superellipse; the rest get a matching rounded square. */
:root { --sq: 30%; --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-sw: 7px; }
@supports (corner-shape: squircle) {
  :root { --sq: 50%; --r-xs: 9px; --r-sm: 12px; --r-md: 15px; --r-lg: 18px; --r-xl: 28px; --r-sw: 10.5px; }
  .icon, .tbtn, .step, .cdot, .cdot.custom.set::after, .play::after, .x, .thumb, .switch, .switch::before, .btn, .tabs, .tabs button,
  .seg, .seg button, .fontbtn, .toast, .tip, kbd, .recent li, .clist li, .stage, .panel, .help, .devlog, .dropzone, .card, .offer, .opt, .goal, .live, .menu, .menu button { corner-shape: squircle; }
  .range::-webkit-slider-thumb { corner-shape: squircle; }
}
.icon, .tbtn, .step, .cdot, .recent .x, .clist li .x, .cdot.custom.set::after, .play::after, .thumb, .switch::before { border-radius: var(--sq); }
.range::-webkit-slider-thumb { border-radius: var(--sq); }
.range::-moz-range-thumb { border-radius: var(--sq); }
.btn, .tabs, .seg, .toast { border-radius: var(--r-md); }
.btn.small, .tabs button, .seg button, .tip { border-radius: var(--r-sm); }
.fontbtn, .recent li, .clist li, .devlog, .dropzone { border-radius: var(--r-lg); }
.empty kbd, .help kbd { border-radius: var(--r-xs); }
.stage, .panel, .help { border-radius: var(--r-xl); }
.switch { border-radius: var(--r-sw); }
.switch::before { background: var(--dim); box-shadow: none; }
.switch:checked::before { background: var(--fg); }
.app.mono-focus .switch:checked::before { background: var(--bg); }
@media (max-width: 999px) { .panel { border-radius: var(--r-xl) var(--r-xl) 0 0; } }
.legal { display: flex; gap: 12px; font-size: 12px; white-space: nowrap; margin-left: 8px; }
.legal a { color: var(--dim); text-decoration: none; }
.legal a:hover { color: var(--fg); }