/* GENERATED by tools/css_split.py from style.css - do not edit; edit style.css and run `python -m tools.css_split build`. */
* { box-sizing: border-box; }
body { overflow-wrap: break-word; }
fieldset { min-width: 0; }
a { color: var(--accent-ink, var(--accent)); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[type="radio"]:focus-visible + span, label:not(:has(> input[type="radio"] + span)):has(> input[type="radio"]:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
html.no-has label > input[type="radio"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 60; }
.skip:focus { left: 8px; }
.sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.8rem; line-height: 1.2; margin: .3em 0; }
h2 { font-size: 1.2rem; margin: 0 0 .6em; }
h3 { margin: 0 0 .3em; }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.narrow { max-width: 560px; margin: 32px auto; }
.muted, .help { color: var(--muted); }
.help { font-size: .9375rem; margin: 6px 0 10px; }
.small { font-size: .9375rem; }
.notice { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 12px; font-size: .9375rem; }
.hero { padding: 16px 0 4px; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 60ch; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--accent-fill); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost, label.button.ghost { background: transparent; color: var(--text); border-color: var(--line); }
button.link { background: none; color: var(--muted); text-decoration: underline; font-weight: 400; padding: 8px; }
input[type=text], input[type=email], select, textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit; }
label { display: block; font-weight: 600; font-size: .9rem; }
label > select, label > input { margin-top: 4px; font-weight: 400; }
input[type=range] { width: 100%; accent-color: var(--accent); min-height: 44px; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: normal; max-width: 100%; border: 1px solid currentColor; }
.player { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-top: 12px; background: var(--bg); }
.player-main { display: flex; align-items: center; gap: 12px; }
.player .pp { width: 64px; height: 64px; border-radius: 50%; font-size: 1.6rem; flex: none; }
.player-info { flex: 1; min-width: 0; }
.player-title { font-weight: 600; overflow-wrap: anywhere; }
.player-chapter { font-size: .9rem; color: var(--muted); }
.player-time { font-variant-numeric: tabular-nums; font-size: .875rem; }
.player audio { width: 100%; margin-top: 10px; }
.chapters { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 0; }
.chapters:empty { display: none; }
@media (prefers-reduced-motion: no-preference){button { transition: background-color .15s, opacity .15s; }
}.stack { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.stack button, .stack .button { align-self: flex-start; }
input[type=email] { min-height: 44px; }
.footer-links a { color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
label.check input { margin-top: 4px; width: 20px; height: 20px; }
.prose li { margin: 6px 0; }
progress { width: 100%; height: 10px; }
picture img { display: block; max-width: 100%; height: auto; }
.back-link { margin: 4px 0 0; }
.back-link a { display: inline-flex; align-items: center; min-height: 44px; }
.srows { list-style: none; padding: 0; margin: 4px 0; }
.srow { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line); border-radius: 6px; }
.srow:last-child { border-bottom: 0; }
.srow:hover { background: var(--bg); }
.srow-n { color: var(--muted); font-size: .875rem; text-align: right; }
.srow-title { font-weight: 600; }
.srow-meta { color: var(--muted); font-size: .875rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: .875rem; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5rem; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--brand); color: var(--accent-ink); background: transparent; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-outline:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
@media (max-width: 560px){.srow { grid-template-columns: 1.5rem 1fr; }
}h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.19rem; }
.measure, .lead { max-width: 68ch; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid var(--accent); }
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn-primary:active { background: var(--accent-fill-active); border-color: var(--accent-fill-active); }
.btn-outline { background: transparent; color: var(--accent-ink); }
.btn-text { color: var(--accent-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.btn-big { font-size: 1.05rem; padding: 12px 24px; }
.home-hero { padding: 24px 0 8px; }
.jgrid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; grid-auto-flow: row dense; }
.jcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.jcard-wide { grid-column: 1 / -1; }
.jcard-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
a.jcard-link:hover .jcard-name { color: var(--accent-ink); }
.jcard-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jcard-wide .jcard-art img { aspect-ratio: 21 / 8; }
.jcard-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.jcard-name { font-size: 1.19rem; font-weight: 700; }
.jcard-promise { color: var(--muted); }
.jhero { position: relative; border-radius: 12px; overflow: hidden; margin: 8px 0 16px; }
.jhero.has-art .jhero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(transparent, rgba(8, 12, 22, .82)); color: #fff; }
.jhero.has-art .lead { color: #e9eef4; }
.jhero-art img { width: 100%; height: clamp(200px, 32vw, 360px); object-fit: cover; }
.cta { margin: 8px 0 20px; }
.progress-card { margin: 0 0 16px; }
.progress-card progress { width: 100%; height: 8px; accent-color: var(--accent); }
.stages .stage { padding: 0; }
.stage > summary { cursor: pointer; padding: 16px 20px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.stage > summary::-webkit-details-marker { display: none; }
.stage-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.stage .art-stage, .stage .stage-buy, .stage .srows { margin: 0 20px 12px; display: block; }
.icon { vertical-align: middle; flex: none; }
.srows { list-style: none; padding: 0; }
.srow { display: block; padding: 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow-title { font-weight: 600; }
.srow-meta { color: var(--muted); font-size: .875rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill-next { color: var(--accent-ink); border-color: var(--accent); }
.need { margin-top: 24px; }
p.need { display: block; }
@media (max-width: 560px){.srow-meta { grid-column: 2; justify-content: flex-start; }
.jhero.has-art .jhero-text { padding: 16px; }
h1 { font-size: 1.6rem; }
}.article { max-width: 820px; margin: 16px auto; padding: 24px clamp(16px, 4vw, 40px); }
.article table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.article th, .article td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.article th { background: var(--bg); }
.article h2, .article h3 { scroll-margin-top: 16px; }
[hidden] { display: none !important; }
@media (max-width: 560px){.jhero.has-art .jhero-text { position: static; background: none; color: var(--text); padding: 16px 0 0; }
.jhero.has-art .lead { color: var(--muted); }
.jhero { border-radius: 0; overflow: visible; }
.jhero-art img { border-radius: 12px; height: 180px; }
}@media (min-width: 561px){.jhero.has-art .jhero-text h1, .jhero.has-art .jhero-text .lead { color: #f6f3ec; }
}.site-header-inner { justify-content: flex-start; }
.site-header-inner > .brand { margin-right: auto; }
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: .9rem; color: var(--text); }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.lang-list a { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.lang-list a:hover { background: var(--surface-2, var(--bg)); }
.lang-list a[aria-current] { font-weight: 600; }
.lang-code { font-weight: 600; font-size: .875rem; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 600px){.lang-menu .lang-name { display: none; }
}.srow-summary { font-weight: 400; }
.guide-grid { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.guide-card { position: relative; display: flex; }
.guide-pick { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 10px 14px; background: var(--surface); color: inherit; border: 1px solid var(--line); border-radius: var(--radius-card, 14px); cursor: pointer; min-height: 44px; font: inherit; }
.guide-pick:hover { border-color: var(--accent); }
.guide-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.guide-pick img { width: 72px; height: 72px; border-radius: 50%; display: block; }
.guide-name { font-weight: 600; }
.guide-tagline { line-height: 1.3; }
.guide-best { margin-top: 4px; background: var(--accent-soft, #dcebe4); color: var(--accent-ink, #2f6656); }
.guide-sample { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 420px){.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}.site-nav { min-width: 0; }
.player-info, .srow-text, .srow-main, .guide-pick, .guide-card, .keep-options, .keep-options > form, .actions > *, .preview-form > label, .plan, .buy-course, .stage-head, .site-header-inner > * { min-width: 0; }
.player-title, .guide-tagline, .guide-name, .srow-title, .srow-summary, .line-text, .card, .notice, .article, .jcard-body, .stage > summary, .buy-course, .evidence-box { overflow-wrap: break-word; }
.article code, .article a, .toc a, code.copy { overflow-wrap: anywhere; }
.player-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.player-info { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.player-info .player-title { flex: 1 1 100%; }
.player-time { white-space: nowrap; }
.player-chapter:empty { display: none; }
.guide-pick { padding-bottom: 56px; }
.guide-sample { top: auto; bottom: 6px; right: 6px; width: 44px; height: 44px; min-height: 44px; }
.guide-best { white-space: normal; text-align: center; }
.site-header-inner > .brand { flex: none; min-height: 44px; }
.lang-menu > summary { min-width: 44px; justify-content: center; }
.lang-list a { min-height: 44px; }
.lang-list { max-width: calc(100vw - 2 * var(--gutter, 16px)); }
main details > summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
label.check { display: block; position: relative; padding: 10px 0 10px 34px; min-height: 44px; box-sizing: border-box; }
label.check input { position: absolute; left: 0; top: 10px; margin: 0; width: 24px; height: 24px; }
button.btn-text { background: transparent; border-color: transparent; color: var(--accent-ink); min-height: 44px; }
.guide-best { line-height: 1.25; padding: 3px 8px; height: auto; min-height: 22px; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.site-footer { padding-bottom: calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px){input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { font-size: .875rem; }
.prose th, .prose td { min-width: 5.5em; padding-inline: 4px; }
.prose tr:has(> :nth-child(5)) > * { min-width: 7.5em; }
html.no-has .prose tr.x-wide > * { min-width: 7.5em; }
}@media (max-width: 1280px){.site-header-inner { flex-wrap: wrap; row-gap: 0; }
}@media (max-width: 560px){.btn, button, .button, .btn-outline { white-space: normal; text-wrap: balance; text-align: center; max-width: 100%; }
.card .actions > .btn, .card .actions > form, .keep-options > form, .keep-options .btn:not(.btn-text), .preview-form > .btn, .tier-buttons > .btn, .plan-buy > form, .plan-buy .btn, .plan > .btn, .buy-course form, .buy-course .btn, .cta .btn, .stack > .btn, .stack > button, .name-actions, .name-actions > button { width: 100%; }
.card, .buy-course { padding-left: 16px; padding-right: 16px; }
.footer-links a, .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.footer-links { align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs ol { row-gap: 0; }
.site-header-inner { gap: 8px; }
.player .pp { width: 56px; height: 56px; }
.player-main { grid-template-columns: auto minmax(0, 1fr); }
.srow-meta { white-space: normal; }
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}@media (max-width: 340px){.guide-grid { grid-template-columns: minmax(0, 1fr); }
}form.start-form { display: inline; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.jcard-art { background: linear-gradient(135deg, #1b2a3a 0%, #20624f 100%); }
.need a { white-space: nowrap; }
@media (max-width: 360px){.need a { white-space: normal; }
}.jcard-live .jcard-art { position: relative; display: block; }
.jcard-live .jcard-art img { display: block; }
:root { --live-fill: #c0392b; --on-live: #fff; }
.live-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 6px; background: var(--live-fill); color: var(--on-live); font-size: .875rem; font-weight: 700; letter-spacing: .04em; }
.jcard-together .jcard-art { position: relative; display: block; }
.together-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(15, 20, 32, .78); color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .04em; }
.together-countdown { font-weight: 600; font-variant-numeric: tabular-nums; min-height: 1.4em; }
@media (prefers-reduced-motion: no-preference){.jcard-together.is-live .together-badge, .jcard-live .live-badge { animation: twh-pulse 2.4s ease-in-out infinite; }
}@keyframes twh-pulse { 50% { opacity: .72; } }
.together-night { color: var(--muted); }
.seek { margin-top: 6px; }
.seek-box { position: relative; height: 44px; }
.seek-rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); overflow: hidden; pointer-events: none; }
.seek-buf, .seek-played { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 0; }
.seek-buf { background: var(--muted); opacity: .35; }
.seek-played { background: var(--accent-fill, var(--accent)); }
.seek-ticks { position: absolute; inset: 0; }
.seek-input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; touch-action: none; cursor: pointer; }
.seek-input[aria-disabled=true] { cursor: default; opacity: .5; pointer-events: none; }
.seek-input::-webkit-slider-runnable-track { height: 44px; background: none; border: 0; box-shadow: none; }
.seek-input::-moz-range-track { height: 44px; background: transparent; border: 0; }
.seek-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: 12px; border-radius: 50%; background: var(--accent-fill, var(--accent)); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent-fill, var(--accent)); }
.seek-input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-fill, var(--accent)); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent-fill, var(--accent)); }
.seek-input::-webkit-slider-container { background: none; border: 0; box-shadow: none; }
.seek-input:focus-visible { outline: none; }
.seek-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.seek-input:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.seek-times { display: flex; justify-content: space-between; font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -4px; }
.player:has(.seek:not([hidden])) .player-time { display: none; }
html.no-has .player.x-seek .player-time { display: none; }
.player audio { width: 100%; margin-top: 10px; }
.player audio:not([controls]) { display: none; }
.player-tools { display: flex; justify-content: flex-end; margin-top: 4px; }
.player-tools[hidden], .mixer[hidden], .mixer-controls[hidden], [data-mix-vol-row][hidden] { display: none; }
.mix-toggle { min-height: 44px; }
.mixer { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.mixer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mixer-head h3 { margin: 0; font-size: 1rem; }
.mixer-status { margin: 6px 0; color: var(--muted); }
.mixer-status:empty { display: none; }
.mixer-row { display: block; margin-top: 10px; }
.mixer-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.mixer-label output { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--muted); }
.mixer-ends { display: flex; justify-content: space-between; margin-top: -6px; }
.mixer .actions { margin-top: 8px; }
.cmp .cmp-notaff { margin: 8px 0 16px; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0 16px; background: var(--surface); }
.cmp-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cmp-wrap .cmp-table { display: table; overflow: visible; max-width: none; border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: .88rem; }
.cmp .cmp-table th, .cmp .cmp-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface); min-width: 150px; }
.cmp .cmp-table thead th { font-size: .875rem; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); position: sticky; top: 0; }
.cmp .cmp-table tbody th[scope=row] { position: sticky; left: 0; z-index: 1; min-width: 120px; max-width: 140px; background: var(--surface-2); color: var(--text); font-weight: 600; border-right: 1px solid var(--line); }
.cmp .cmp-table thead th:first-child { position: sticky; left: 0; z-index: 2; min-width: 120px; }
.cmp .cmp-table tr:last-child th, .cmp .cmp-table tr:last-child td { border-bottom: 0; }
.cmp .cmp-table .cmp-me, .cmp .cmp-table tr.cmp-me th, .cmp .cmp-table tr.cmp-me td { background: var(--accent-soft); }
.cmp .cmp-table thead th.cmp-me { color: var(--text); }
.cmp-maker { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }
.cmp-meta { display: inline-block; margin-top: 4px; font-size: .875rem; color: var(--muted); }
.cmp-meta a { color: var(--muted); text-decoration: underline; }
.cmp-wrap .cmp-hubtable { min-width: 1500px; }
.cmp-hubtable td.cmp-srcs { min-width: 200px; }
.cmp-swipe { margin: 4px 0 0; }
@media (min-width: 900px){.cmp-swipe { display: none; }
}.cmp-prefer h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.cmp-prefer ul, .cmp-links { margin-top: 4px; }
.cmp-links { padding-left: 1.1em; }
.cmp-links li { margin: 8px 0; }
@media (max-width: 560px){.cmp.article { padding-left: 12px; padding-right: 12px; }
}@media (max-width: 560px){.cmp .cmp-table tbody th[scope=row], .cmp .cmp-table thead th:first-child { min-width: 106px; max-width: 110px; font-size: .875rem; padding-left: 8px; padding-right: 4px; overflow-wrap: normal; }
.cmp .cmp-table th, .cmp .cmp-table td { min-width: 140px; }
}:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(zh-CN) { line-break: strict; word-break: normal; overflow-wrap: anywhere; text-spacing-trim: trim-start; font-kerning: normal; }
.jcard-media { position: relative; display: block; }
.jcard-media .jcard-art, .jcard-media .jcard-art img { display: block; }
.jcard-phases { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 28px 10px 10px; background: linear-gradient(to top, rgba(8, 12, 20, .82) 0%, rgba(8, 12, 20, .55) 55%, rgba(8, 12, 20, 0) 100%); pointer-events: none; }
.jphase { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; color: #fff; background: rgba(8, 12, 20, .78); border: 1px solid rgba(255, 255, 255, .35); }
.jphase .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.jphase.state-alpha .dot { background: #6fe0c0; }
.jphase.state-beta .dot { background: #ffd27a; }
a.jcard-link:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
a:is(.btn-primary, .button:not(.ghost), .btn:not(.btn-outline, .btn-secondary, .btn-text, .btn-tertiary, .btn-quiet, .ghost, .btn-icon)):is(:link, :visited, :hover, :focus, :focus-visible, :active) { color: var(--on-accent); text-decoration: none; }
a.button:not(.ghost):hover { background: var(--accent-fill-hover); }
a.button:not(.ghost):active { background: var(--accent-fill-active); }
a:is(.btn-outline, .btn-secondary, .btn-text, .btn-tertiary):is(:link, :visited, :focus, :focus-visible, :active) { color: var(--accent-ink); }
a.btn-outline:hover { color: var(--on-accent); }
a:is(.btn-secondary, .btn-text, .btn-tertiary):hover { color: var(--accent-ink); }
.player .pp:disabled { opacity: 1; background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.mixer-grab { display: none; justify-content: center; padding: 2px 0 8px; touch-action: none; }
.mixer-grab i { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.mixer-head { touch-action: pan-x; }
.mixer-min { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 1.4rem; line-height: 1; }
.player { position: relative; }
.mini-toggle { position: absolute; top: 6px; right: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 1.3rem; line-height: 1; z-index: 1; }
.mini-toggle[hidden], .mini-progress[hidden] { display: none; }
.jplayer .player:not(.mini) .player-main { padding-right: 52px; }
.mini-progress { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--accent-fill, var(--accent)); border-top-left-radius: var(--radius); pointer-events: none; }
.theme-toggle { min-height: 44px; padding: 8px 14px; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .9rem; font-weight: 500; }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-toggle .i-moon { display: none; }
html[data-theme-eff="dark"] .theme-toggle .i-moon { display: inline; }
html[data-theme-eff="dark"] .theme-toggle .i-sun { display: none; }
.nav-menu > nav .theme-toggle { margin: var(--space-2) var(--space-2) var(--space-1); align-self: flex-start; }
.site-footer .theme-toggle-footer { justify-self: start; }
@media (max-width: 680px){.theme-toggle-footer { display: none; }
}.seek-phases { position: absolute; inset: 0; pointer-events: none; }
.seek-tip { position: absolute; bottom: calc(100% - 4px); left: 0; padding: 2px 8px; border-radius: 6px; white-space: nowrap; font-size: .875rem; background: var(--surface); color: var(--text); border: 1px solid var(--line); pointer-events: none; z-index: 2; }
.seek-tip[hidden] { display: none; }
.jcard-phases { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.jplayer .player .mini-toggle { right: 54px; }
.jplayer .player:not(.mini) .player-main { padding-right: 100px; }
picture.jcard-art, picture.jhero-art { display: block; overflow: hidden; }
picture.jcard-art img, picture.jhero-art img { transform-origin: 50% 55%; will-change: transform; }
@keyframes twh-drift { from { transform: scale(1.0) translate3d(0, 0, 0); } to { transform: scale(1.10) translate3d(var(--twh-drift-x, 3%), -1.5%, 0); } }
picture.jcard-art img { animation: twh-drift var(--twh-drift-t, 26s) ease-in-out var(--twh-drift-d, 0s) infinite alternate paused; }
picture.jcard-art.is-moving img { animation-play-state: running; }
picture.jhero-art img { animation: twh-drift 24s ease-in-out .25s infinite alternate paused; }
picture.jhero-art img.is-in { animation-play-state: running; }
@media (prefers-reduced-motion: reduce){picture.jcard-art img, picture.jhero-art img { animation: none !important; transform: none !important; }
}picture.artpic { display: block; }
@media (scripting: enabled){picture.artfade > img { opacity: 0; transition: opacity .2s ease-out; }
picture.artfade > img.is-in { opacity: 1; }
picture.artfade > img.is-instant { transition: none; }
}@media (prefers-reduced-motion: reduce){picture.artfade > img { transition: none; }
}.seek-pending { position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, var(--surface) 0 4px, transparent 4px 8px); opacity: .85; }
.seek-pending[hidden] { display: none; }
.control-grid > label { min-width: 0; }
.control-grid input[type=range] { margin-left: 0; margin-right: 0; box-sizing: border-box; }
.bottom-bar { display: none; }
@media (max-width: 560px), (display-mode: standalone) and (max-width: 900px){html { scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.bottom-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; background: var(--surface); border-top: 1px solid var(--line); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.bottom-bar a { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 3px; font-size: min(.875rem, 3.4vw, 15px); text-align: center; text-decoration: none; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; word-break: keep-all; hyphens: none; line-height: 1.2; }
.bottom-bar:has(a:nth-child(5)) a { font-size: min(.8125rem, 2.9vw, 13px); }
html.no-has .bottom-bar a { font-size: min(.8125rem, 2.9vw, 13px); }
.bottom-bar a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; box-shadow: inset 0 3px 0 var(--accent-ink); }
.bottom-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
body .jplayer { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
body .jplayer .player, body .jplayer .player.mini { padding-bottom: 10px; }
body .pwa-prompt { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}#player-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; pointer-events: none; }
#player-dock[hidden] { display: none; }
@media (max-width: 560px), (display-mode: standalone) and (max-width: 900px){#player-dock { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}#main:focus { outline: none; }
.intro-note { margin: .4rem 0 0; }
.player-live .live-typed { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
.player-live .live-typed input { flex: 1 1 auto; min-width: 0; }
.player-live .live-talk { display: flex; flex-wrap: wrap; gap: .5rem; }
.mixer-ambience { border: none; padding: 0; margin: .75rem 0 0; }
.audio-tap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.audio-tap[hidden], .pwa-tip[hidden] { display: none; }
.battery-help { margin: .25rem 0 0; }
.battery-help:has(> [hidden]) { display: none; }
html.no-has .battery-help.x-empty { display: none; }
.pwa-tip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.live-screen { margin: 0 0 .4rem; }
.lang-menu-v2 .lang-groups { max-height: 70vh; overflow: auto; min-width: 16rem; }
.lang-menu-v2 .lang-group { margin: .6rem .8rem .2rem; }
.lang-menu-v2 ul { margin: 0; padding: 0; list-style: none; }
.lang-menu-v2 li { display: flex; align-items: center; gap: .5rem; padding: 0; }
.lang-menu-v2 li > a:first-child { flex: 1 1 auto; min-width: 0; }
.lang-menu-v2 .lang-badge { flex: 0 0 auto; min-height: 44px; padding: 0 10px 0 0; white-space: nowrap; }
.lang-badge { opacity: .8; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.lang-more { margin: .6rem .8rem; }
.lang-more input[type=search] { width: 100%; }
.player-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.player-actions .player-tools { margin: 0; }
.player-actions .mix-toggle, .player-actions .mini-toggle { position: static; margin: 0; min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 1rem; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.player-nav { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.player-nav[hidden], .player-nav .player-nav-btn[hidden] { display: none; }
.player-nav .player-nav-btn { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.player-safety-link { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; font-size: .9375rem; }
.jplayer .player:not(.mini) .player-main { padding-right: 0; }
.safety-first { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.safety-first[hidden] { display: none; }
.safety-first h3 { margin: 0 0 4px; font-size: 1.05rem; }
.safety-first p { margin: 4px 0; font-size: 1rem; }
.mixer { max-height: min(62vh, 560px); overflow-y: auto; }
.mixer-min { min-width: 44px; padding: 0 14px; font-size: 1rem; }
.mixer-ends { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: -2px; font-size: .9375rem; }
.mixer-ends span:last-child { text-align: right; }
.mixer-ends .mixer-mid { text-align: center; }
.mixer .actions .ghost, .mixer-more > summary { min-height: 44px; }
.mixer-more { margin-top: 10px; border-top: 1px solid var(--line); }
.mixer-more > summary { display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.jset-more, .jset-change-guide { margin: 10px 0 0; }
.jset-more > summary, .jset-change-guide > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
:where(details > summary) { padding-block: 10px; cursor: pointer; }
select { min-height: 44px; }
.btn-text, button.link { min-width: 44px; min-height: 44px; }
.footer-links, .footer-safety, .footer-legal { font-size: .9375rem; }
.footer-journeys ul { list-style: none; margin: 4px 0 0; padding: 0; }
.footer-journeys li a { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 700px){.footer-journeys ul { columns: 2; column-gap: 24px; }
.footer-journeys li { break-inside: avoid; }
}.make-yours { margin: 16px 0; }
main label:has(> input[type=checkbox]), main label:has(> input[type=radio]) { min-height: 44px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; }
html.no-has main label.x-ctl, html.no-has main label.x-ctl { min-height: 44px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; }
main label:has(> input[type=checkbox]) > input, main label:has(> input[type=radio]) > input { flex: none; width: 24px; height: 24px; margin: 0; }
html.no-has main label.x-ctl > input, html.no-has main label.x-ctl > input { flex: none; width: 24px; height: 24px; margin: 0; }
.footer-links a, .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.footer-links { align-items: center; }
.try-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; }
.try-settings .btn { min-height: 44px; }
.footer-social { margin: 0; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); }
.footer-social-link:hover, .footer-social-link:focus-visible { color: var(--text, inherit); }
.free-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 4px 8px 4px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent-fill); border-radius: var(--radius); background: var(--surface); font-size: .9375rem; }
.free-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 12px; color: var(--muted, inherit); }
.free-signup .btn { min-height: 44px; display: inline-flex; align-items: center; }
.free-banner { overflow-wrap: anywhere; }
.free-banner a { overflow-wrap: normal; }
.free-banner { flex-wrap: wrap; }
.free-banner a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.free-banner-x { min-width: 44px; min-height: 44px; background: none; border: 0; color: inherit; font-size: 1.25rem; cursor: pointer; }
.jplayer .player > .mini-toggle, .jplayer .player .player-main > .mini-toggle { position: absolute; top: 6px; right: 6px; margin: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; }
.jplayer .player:not(.mini) .player-main { padding-right: 52px; }
@media (max-height: 480px) and (orientation: landscape){.site-header { position: static; }
.site-header-inner { min-height: 48px; }
.free-banner, .notice, .lang-banner { margin-top: 6px; margin-bottom: 6px; padding: 6px 12px; font-size: .875rem; line-height: 1.3; }
#player-dock .jplayer .player:not(.mini), .jplayer .player:not(.mini) { max-height: 55vh; overflow-y: auto; }
}html { font-size: calc(100% * var(--twh-text-scale, 1)); }
.consent-banner, .pwa-prompt { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.jplayer .player:not(.mini), #player-dock .jplayer .player:not(.mini) { max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; }
main label.check:has(> input[type=checkbox]), main label.check:has(> input[type=radio]) { display: block; }
html.no-has main label.check.x-ctl { display: block; }
main label.check:has(> input[type=checkbox]) > input, main label.check:has(> input[type=radio]) > input { position: absolute; left: 0; top: 10px; margin: 0; }
html.no-has main label.check.x-ctl > input { position: absolute; left: 0; top: 10px; margin: 0; }
.admin-menu { position: relative; }
.admin-menu > summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: .9rem; color: var(--text); }
.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu > summary:focus-visible, .admin-list a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.admin-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 200px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.admin-list a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.admin-list a:hover { background: var(--surface-2, var(--bg)); }
@media (max-width: 680px){.admin-menu { display: none; }
}.admin-group { display: contents; }
.focus-prompt { margin: .5rem 0; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.focus-prompt[hidden] { display: none; }
.focus-prompt .focus-line { margin: 0 0 .5rem; }
.focus-prompt .focus-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.focus-set { margin: .4rem 0 0; }
.focus-set p { margin: .15rem 0 0 1.6rem; }
.btn, .btn-outline, .btn-text, li strong, a.small, .small a, .jphase, .pill, .ch-wave-chip, .ch-wave-chip-lang, .card h1, .card h2, .card h3 { overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }
.jphase { white-space: normal; }
.jcard-phases { flex-wrap: wrap; overflow: hidden; max-height: 70%; -webkit-mask-image: none; mask-image: none; }
.motion-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; color: inherit; font: inherit; font-size: .875rem; min-height: 44px; padding: 6px 14px; cursor: pointer; }
.jcard-phases > .sr-only { left: 0; top: 0; width: 100%; white-space: normal; }
picture.ab-0 { background-color: #374143; }
picture.ab-1 { background-color: #4e513f; }
picture.ab-2 { background-color: #3d3356; }
picture.ab-3 { background-color: #433132; }
picture.ab-5 { background-color: #d5cec8; }
picture.ab-6 { background-color: #222f31; }
picture.ab-9 { background-color: #4c3d39; }
picture.ab-10 { background-color: #132739; }
picture.ab-11 { background-color: #3e4a5f; }
picture.ab-13 { background-color: #595555; }
picture.ab-14 { background-color: #626773; }
picture.ab-15 { background-color: #28241d; }
picture.ab-16 { background-color: #282f49; }
picture.ab-21 { background-color: #18282c; }
picture.ab-22 { background-color: #231f30; }
.ai-voice { margin: 2px 0 0; font-size: .875rem; }
.ai-voice-chip { display: inline-flex; align-items: center; cursor: pointer; padding: 2px 12px; min-height: 44px; border: 1px solid var(--border, currentColor); border-radius: 999px; line-height: 1.5; list-style: none; opacity: .85; }
.ai-voice-chip::-webkit-details-marker { display: none; }
.ai-voice-chip:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.ai-voice-note { margin: 4px 0 0; max-width: 34em; }
.help-q{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;vertical-align:middle;font-weight:700;text-decoration:none;color:inherit}
.help-q::after{content:"";position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;transform:translate(-50%,-50%);border:2px solid currentColor;border-radius:50%}
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:8px 0}
.store-badge{display:inline-flex;min-height:44px;align-items:center}
.store-badge img{display:block;height:auto;max-width:100%}
.store-badge-play img{width:162px;aspect-ratio:646/250}
@media (max-width: 520px){.home-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 4px; }
.home-hero > * { order: 2; }
.home-hero > h1 { order: 0; margin-top: 0; hyphens: auto; overflow-wrap: break-word; }
.home-hero > :is(.start-form, .sample-wrap, .simple-offer, .first-visit, .free-hours-hero) { order: 1; }
.home-hero > :is(.free-until, .eyebrow) { order: 3; }
.free-banner { position: relative; padding-right: 52px; }
.free-banner .free-banner-x { position: absolute; top: 0; right: 0; }
}:is(h2, h3) > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
html[data-quiet] :is(.quiet-hide, .as-panel, .ms-panel, .ru-line, .jcard-challenge, [data-act-goal-line], [data-act-progress], [data-act-done]) { display: none !important; }
.quiet-set label { display: flex; gap: .6rem; align-items: flex-start; }