/* INK.CREATIVE STUDIO — theme tokens and component styles (layout utilities come from Tailwind). */
:root {
  --bg: #F6F5F0; --surface: #FFFFFF; --soft: #EFEEE7; --line: #E5E4DD;
  --ink: #111111; --muted: #666560; --accent: #FF5E20; --accent-ink: #C2410C;
  --grid: rgba(17, 17, 17, .045);
  color-scheme: light;
}
html.dark {
  --bg: #0D0D0D; --surface: #161616; --soft: #1C1C1C; --line: #262626;
  --ink: #F4F3EE; --muted: #8E8D87; --accent: #FF5E20; --accent-ink: #FF7A45;
  --grid: rgba(244, 243, 238, .035);
  color-scheme: dark;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  transition: background-color .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }
section[id] { scroll-margin-top: 96px; }

.eyebrow { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 500; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; transition: background-color .35s ease, border-color .35s ease, transform .3s ease; }
/* App icons arrive pre-rounded with transparent corners, so they get a shadow that follows their shape. */
.app-icon { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.pill { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.chip { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); background: var(--soft); border-radius: 8px; padding: 4px 8px; }
.glass { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }

h1 em, .serif-em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--accent); }
.quote { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }

.btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; padding: 11px 18px; transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #EA580C; }
.btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.store { display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 9px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); transition: border-color .2s ease, background-color .2s ease; }
.store:hover { border-color: var(--accent); }
.store svg { opacity: .6; }
.store[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.store[aria-disabled="true"]:hover { border-color: var(--line); }

.navlink { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); padding: 6px 8px; border-radius: 8px; transition: color .2s ease, background-color .2s ease; white-space: nowrap; }
.navlink:hover, .navlink.is-active { color: var(--ink); background: var(--soft); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg button { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; color: var(--muted); transition: all .2s ease; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:active { transform: scale(.92); }
/* Language toggle: a thumb slides under the active button (equal-width buttons; app.js sets data-active). */
.seg-slide { position: relative; }
.seg-slide button { position: relative; z-index: 1; width: 32px; padding-left: 0; padding-right: 0; text-align: center; }
.seg-slide button[aria-pressed="true"] { background: transparent; }
.seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 32px; border-radius: 999px; background: var(--ink); transition: transform .4s cubic-bezier(.34, 1.3, .64, 1), background-color .35s ease; }
.seg-slide[data-active="tr"] .seg-thumb { transform: translateX(32px); }
.seg-slide[data-active="es"] .seg-thumb { transform: translateX(64px); }
/* Theme toggle: sun and moon swap with a turn; the label fades between STUDIO and SILENT STAGE. */
.theme-toggle { transition: transform .15s ease, border-color .2s ease; }
.theme-toggle:active { transform: scale(.96); }
.theme-icons { position: relative; width: 14px; height: 14px; flex: none; }
.theme-icons svg { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease; }
.theme-icons .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
html.dark .theme-icons .icon-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html.dark .theme-icons .icon-moon { opacity: 1; transform: none; }
#theme-label { transition: opacity .16s ease, transform .16s ease; }
#theme-label.is-swapping { opacity: 0; transform: translateY(-4px); }


.num { font-family: 'JetBrains Mono', monospace; color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.rule { height: 1px; background: var(--line); }
.dotline { flex: 1; border-bottom: 1px dashed var(--line); margin: 0 10px; transform: translateY(-4px); }

/* ---------- Metronome widget (always rendered as a dark device) ---------- */
.metro { background: #0D0D0D; color: #F4F3EE; border: 1px solid #262626; border-radius: 28px; position: relative; overflow: hidden; isolation: isolate; }
.metro .m-mono { font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.metro .m-key { border: 1px solid #2E2E2E; background: #161616; color: #F4F3EE; border-radius: 16px; transition: background-color .15s ease, border-color .15s ease, transform .08s ease; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.metro .m-key:hover { border-color: #444; }
.metro .m-key:active, .metro .m-key.is-hit { background: #222; transform: scale(.96); }
.metro .m-key[aria-pressed="true"] { border-color: rgba(255, 94, 32, .6); color: #FF5E20; }
/* Beat lamps, drawn the way TACT draws them: an orange ring for a strong beat, a heavy ring for an accent,
   a hairline for a plain beat and a dashed ring when muted. A lamp fills only while its beat sounds. */
.m-lamp { width: 36px; height: 40px; display: grid; place-items: center; border-radius: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.m-lamp::before { content: ''; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #4A4A47; transition: background-color .06s linear, border-color .15s ease, border-width .15s ease, transform .08s ease, box-shadow .08s ease; }
.m-lamp[data-accent="strong"]::before { border-color: #FF5E20; }
.m-lamp[data-accent="accent"]::before { border-width: 3px; border-color: #F4F3EE; }
.m-lamp[data-accent="mute"]::before { border-style: dashed; }
.m-lamp:hover::before { box-shadow: 0 0 0 4px rgba(244, 243, 238, .06); }
.m-lamp:active::before { transform: scale(.86); }
.m-lamp.on::before { background: #F4F3EE; border-color: #F4F3EE; transform: scale(1.18); box-shadow: 0 0 18px rgba(255, 255, 255, .5); }
.m-lamp.on[data-accent="strong"]::before { background: #FF5E20; border-color: #FF5E20; box-shadow: 0 0 22px 2px rgba(255, 94, 32, .75); }
.m-lamp.on[data-accent="mute"]::before { background: transparent; border-color: #8E8D87; transform: none; box-shadow: none; }
/* Meter and subdivision pickers */
.m-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid #2A2A2A; background: #141414; border-radius: 14px; }
.m-seg button { height: 36px; border-radius: 11px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #8E8D87; border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease; touch-action: manipulation; }
.m-seg-glyph button { font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Music', system-ui, sans-serif; font-size: 21px; font-weight: 400; line-height: 1; }
.m-seg-glyph sup { font-family: 'JetBrains Mono', monospace; font-size: 9px; }
.m-seg button:hover { color: #F4F3EE; }
.m-seg button:active { transform: scale(.94); }
.m-seg button[aria-pressed="true"] { background: #262626; border-color: rgba(255, 94, 32, .55); color: #FF5E20; }
.m-flash { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 94, 32, 0), inset 0 0 40px rgba(255, 94, 32, 0); z-index: 2; }
.m-flash.go { animation: edge .22s ease-out; }
.m-flash.go.mid { animation-name: edge-mid; }
.m-flash.go.soft { animation-name: edge-soft; }
@keyframes edge { 0% { box-shadow: inset 0 0 0 3px rgba(255, 94, 32, .95), inset 0 0 60px rgba(255, 94, 32, .35); } 100% { box-shadow: inset 0 0 0 2px rgba(255, 94, 32, 0), inset 0 0 40px rgba(255, 94, 32, 0); } }
@keyframes edge-mid { 0% { box-shadow: inset 0 0 0 2px rgba(255, 94, 32, .55), inset 0 0 44px rgba(255, 94, 32, .18); } 100% { box-shadow: inset 0 0 0 2px rgba(255, 94, 32, 0), inset 0 0 40px rgba(255, 94, 32, 0); } }
@keyframes edge-soft { 0% { box-shadow: inset 0 0 0 2px rgba(244, 243, 238, .45), inset 0 0 40px rgba(244, 243, 238, .08); } 100% { box-shadow: inset 0 0 0 2px rgba(244, 243, 238, 0), inset 0 0 40px rgba(244, 243, 238, 0); } }
.m-play { background: #FF5E20; color: #fff; border-radius: 999px; transition: transform .1s ease, background-color .2s ease, box-shadow .2s ease; box-shadow: 0 10px 30px -8px rgba(255, 94, 32, .6); touch-action: manipulation; }
.m-play:hover { background: #EA580C; }
.m-play:active { transform: scale(.96); }
.m-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(to right, #FF5E20 var(--p, 17%), #2A2A2A var(--p, 17%)); outline-offset: 6px; }
.m-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #F4F3EE; border: 4px solid #0D0D0D; box-shadow: 0 0 0 1px #3A3A3A; cursor: pointer; }
.m-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #F4F3EE; border: 4px solid #0D0D0D; box-shadow: 0 0 0 1px #3A3A3A; cursor: pointer; }
.bpm-digits { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.04em; line-height: .9; }

/* ---------- CRATE format matrix (inside a .metro device panel) ---------- */
.cm-table { border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cm-table th, .cm-table td { padding: 11px 6px; border-bottom: 1px dashed #262626; text-align: center; vertical-align: middle; }
.cm-table thead th { padding-top: 0; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; color: #5E5D58; border-bottom: 1px solid #2A2A2A; }
.cm-table th:first-child { text-align: left; padding-left: 0; }
.cm-table tbody th { font-weight: 600; color: #F4F3EE; }
.cm-table tbody tr:last-child > * { border-bottom: 0; }
.cm-yes { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF5E20; box-shadow: 0 0 8px rgba(255, 94, 32, .6); }
.cm-no { color: #3A3A3A; }
.cm-val { color: #B8B7B0; font-size: 10px; }

/* ---------- INK suite ----------
   From md up the cards share the grid's rows (subgrid), so the quote, "Inside the editor", the preview, the list,
   the note and the store links each start at the same height in every card, whatever the text length.
   The gap lives here, not in a Tailwind class, so the row-gap below can switch it off between shared rows. */
.suite-grid { gap: 20px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .suite-grid { row-gap: 0; }
    .suite-grid > .suite-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
    .suite-grid > .suite-card:nth-child(3) { margin-top: 20px; }
  }
  @media (min-width: 1024px) { .suite-grid > .suite-card:nth-child(3) { margin-top: 0; } }
}

/* Editor previews, each drawn after its app's own editor. They stretch to the tallest preview in the row, and the
   page sheet takes up the extra height. Book and lyrics text use the reader's system book serif, the screenplay
   uses Courier: no extra downloads. */
.ed { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg); border-radius: 18px; padding: 12px; transition: background-color .35s ease, border-color .35s ease; }
.ed-head { padding: 4px 4px 12px; }
.ed-kind { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.ed-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; line-height: 1.1; margin-top: 3px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.ed-paper { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .5); transition: background-color .35s ease, border-color .35s ease; }
.ed-crumb, .ed-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ed-label { font-size: 8.5px; margin: 14px 0 6px; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 2px 10px; }
.ed-chip { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: background-color .35s ease, border-color .35s ease; }
.ed-chip.is-on { border-color: var(--accent); color: var(--accent-ink); }
.ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 4px 2px; }
.ed-foot .ed-chip { color: var(--ink); }
.ed-saved { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; color: var(--muted); }
.ed-saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.ed-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--accent); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* INK.BOOK: a scene set in a book serif; the text fills whatever height the sheet gets and fades out. */
.bk-title, .bk-text, .ly-line { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; color: var(--ink); }
.bk-title { font-size: 17px; line-height: 1.25; margin-top: 8px; }
.bk-text { flex: 1 1 0; min-height: calc(1.65em * 6); font-size: 13.5px; line-height: 1.65; margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 3.3em), transparent); mask-image: linear-gradient(#000 calc(100% - 3.3em), transparent); }
.bk-count { display: flex; align-items: center; gap: 10px; padding-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk-count b { color: var(--ink); font-weight: 600; }
.bk-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.bk-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* INK.SCRIPT: a screenplay page in Courier, scene numbers in both margins. */
.sp { font-family: 'Courier Prime', 'Courier New', Courier, monospace; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.sp p + p { margin-top: 10px; }
.sp-h { display: flex; gap: 6px; font-weight: 700; text-transform: uppercase; }
.sp-h > span:nth-child(2) { flex: 1; }
.sp-n { flex: none; width: 10px; font-weight: 400; color: var(--muted); }
.sp-n:last-child { text-align: right; }
.sp-a { padding: 0 16px; }
.sp-c { padding-left: 44%; }
.sp p.sp-d { margin-top: 0; padding: 0 16% 0 26%; }

/* INK.LYRICS: the editor's three blocks: lyrics with chords, staff, tab. */
.ly-sec { align-self: flex-start; display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.ly-line { font-size: 15px; line-height: 1.3; padding-top: 1.05em; }
.ly-w { position: relative; display: inline-block; }
.ly-w::before { content: attr(data-ch); position: absolute; left: 0; bottom: 100%; font-family: Georgia, serif; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--accent-ink); }
/* Drawn at a fixed scale from the left; the lines run on to the page edge, so wide cards never blow the notes up. */
.ly-svg { display: block; width: 100%; color: var(--ink); }
.ly-staff { height: 70px; }
.ly-tab { height: 98px; }
.ly-svg .ln { fill: none; stroke: currentColor; stroke-opacity: .3; stroke-width: .8; }
.ly-svg .nt { fill: currentColor; }
.ly-svg .st { stroke: currentColor; stroke-width: 1; }
.ly-svg .ts { font-family: Georgia, serif; font-size: 13px; font-weight: 700; fill: currentColor; }
.ly-svg .lb { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: .06em; fill: var(--muted); }
.ly-svg .ch { font-family: Georgia, serif; font-size: 10px; font-weight: 700; fill: var(--accent-ink); }
.ly-svg .fr { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; fill: currentColor; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }

/* "Coming soon" labels hide, and "Live" labels show, once an app's store link is set in js/config.js. */
[data-soon][hidden], [data-when-live][hidden] { display: none !important; }

/* ---------- Modals (hash routes #privacy and #support) ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.modal.is-open { display: flex; }
html:not(.js) .modal:target { display: flex; }   /* works even with JavaScript disabled */
.modal-backdrop { position: fixed; inset: 0; background: rgba(13, 13, 13, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-panel { position: relative; width: 100%; max-width: 860px; margin: 4vh auto; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .45); animation: rise .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.legal h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; margin-top: 28px; margin-bottom: 8px; color: var(--ink); }
.legal p + p { margin-top: 12px; }
.legal p, .legal li { color: var(--muted); line-height: 1.7; font-size: 15px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

details.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: border-color .2s ease; }
details.faq[open] { border-color: var(--ink); }
details.faq summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .plus { font-family: 'JetBrains Mono', monospace; color: var(--accent-ink); transition: transform .2s ease; flex: none; }
details.faq[open] summary .plus { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 18px 18px; color: var(--muted); line-height: 1.7; font-size: 15px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[data-i18n] { transition: opacity .18s ease; }
html.i18n-swap [data-i18n] { opacity: 0; }

/* Release notes: app list (horizontal strip on phones, sidebar from lg) and a changelog sheet per app. */
.cl-tabs { display: flex; gap: 6px; padding: 12px; overflow-x: auto; scrollbar-width: none; background: var(--soft); border-bottom: 1px solid var(--line); transition: background-color .35s ease, border-color .35s ease; }
.cl-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .cl-tabs { flex-direction: column; overflow: visible; padding: 16px; border-bottom: 0; border-right: 1px solid var(--line); } }
.cl-tab { display: flex; align-items: center; gap: 12px; flex: none; text-align: left; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid transparent; color: var(--muted); transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.cl-tab:hover { color: var(--ink); }
.cl-tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .35); }
.cl-name { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.cl-ver { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; margin-top: 3px; color: var(--muted); }
.cl-tab[aria-selected="true"] .cl-ver { color: var(--accent-ink); }
.cl-panel { padding: 24px; }
@media (min-width: 640px) { .cl-panel { padding: 40px 44px; } }
.cl-panel.is-entering { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.cl-version { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(64px, 10vw, 112px); letter-spacing: -.045em; line-height: .9; }
.cl-version .cl-v { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--accent); margin-right: .04em; }
.cl-list { margin-top: 32px; border-top: 1px dashed var(--line); }
.cl-list li { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--line); font-size: 16px; line-height: 1.6; }
.cl-num { flex: none; padding-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); }