/* Type scale: section 28, subsection 20, reading 16, controls 14, metadata 12. */
:root { --type-section:28px; --type-subsection:20px; --type-body:16px; --type-label:14px; --type-meta:12px; --reading-width:908px; --listening-width:1166px; }
/* Visible cards shrink by 10%; reading and listening have independent caps. */
.page { width:min(1336.8px,calc(90% + 4.8px)); }
.card { padding-inline:max(24px,calc((100% - 1166px)/2)); }
.card > * { max-width:var(--reading-width); margin-left:auto; margin-right:auto; }
.card > .sample-list,.card > #first-glance-content { max-width:var(--listening-width); }
.card > .reference-results { max-width:var(--reading-width); }
.card-heading h2 { font-size:var(--type-section); }
h3,.radar-chart h3 { font-size:var(--type-subsection); line-height:1.4; font-weight:600; }
.section-intro,.benchmark-heading p,.card-heading p,.abstract { font-size:var(--type-body); line-height:1.7; }
.paper-emails { font-size:var(--type-body); }
.paper-emails a,.author-link { color:inherit; text-decoration:none; }
.paper-emails a:hover,.author-link:hover { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.author-link .link-arrow { display:inline-block; font-size:.7em; vertical-align:super; line-height:1; margin-left:2px; }
.card-heading { margin-bottom:24px; }
.benchmark-heading p { color:var(--fg-soft); }
.evaluation-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:40px; align-items:start; margin:28px auto 44px; }
.evaluation-overview h3 { margin:0 0 20px; }
.evaluation-overview .distribution-chart { margin:0; max-width:none; }
.distribution-chart h3 { text-align:left; }
.evaluation-overview .metric-summary { padding:0; background:none; }
.metric-summary p { margin:0 0 16px; font-size:var(--type-body); line-height:1.65; color:var(--fg-soft); }
.metric-summary p:last-child { margin-bottom:0; }
.metric-summary strong { color:var(--heading); }
.radar-chart { margin:36px auto; }
.radar-chart p { margin:8px 0 16px; color:var(--fg-soft); }
.radar-chart figcaption { text-align:center; }
.reference-results { max-width:var(--reading-width); margin:40px auto 0; }
.reference-results h3 { text-align:left; margin:0 0 12px; }
.reference-results > p { font-size:var(--type-body); line-height:1.65; margin:0 0 14px; }
.reference-results > .figure-note { max-width:var(--reading-width); font-size:var(--type-label); text-align:left; margin:14px auto 0; }
#benchmark-results { max-width:var(--reading-width); margin-inline:auto; }
.reference-results > .listening-protocol { margin-top:24px; }
.results-table sup { margin-left:3px; font-size:.7em; }
.results-table sup a { color:inherit; }
.results-table { min-width:760px; font-size:var(--type-body); text-align:center; font-variant-numeric:tabular-nums; }
.results-table caption { font-size:var(--type-label); text-align:left; color:var(--fg-mute); padding:0 0 16px; }
.results-table th,.results-table td { padding:14px 10px; border-bottom:1px solid var(--border-soft); }
.results-table thead th { font-size:var(--type-label); font-weight:500; color:var(--fg-soft); line-height:1.5; background:#f7f8fa; }
.results-table thead th:first-child[rowspan] { text-align:left; }
.results-table thead tr:last-child th:nth-child(3) { border-left:1px solid var(--border); }
.results-table tbody td:nth-child(4) { border-left:1px solid var(--border); }
.results-table tbody th { font-weight:400; white-space:nowrap; }
.results-table .ours { background:#f6f4fc; color:#51467f; font-weight:400; }
.results-table .ours th,.results-table strong { font-weight:700; }
.result-definitions { color:var(--fg-mute); font-size:var(--type-label); line-height:1.65; margin:14px 0 0; }
@media(max-width:1100px) {
  .page { width:96%; padding-inline:16px; }
  .card { padding-inline:32px; }
  .evaluation-overview { gap:24px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
}
@media(max-width:760px) {
  .page { width:100%; padding:14px 10px 30px; }
  .card { padding:28px 16px; }
  .evaluation-overview { grid-template-columns:minmax(0,1fr); gap:24px; }
  .evaluation-overview .distribution-chart { max-width:420px; margin:auto; }
  .reference-results { margin-top:32px; }
}

/* Shared listening blocks: compact comparison first, focused detail on demand. */
:root { --listen-accent:#6556aa; --listen-ink:#263447; }
.radar-chart .chart-scroll { width:70%; margin:18px auto; }
.radar-chart img { min-width:0; width:100%; max-width:none; height:auto; }
.radar-chart h3 { font-size:20px; margin-bottom:4px; }
.radar-chart p,.radar-chart figcaption { font-size:var(--type-body); line-height:1.65; }
.sample-block { border:1px solid #e0e5ed; border-radius:12px; padding:20px; margin:0 0 22px; background:#fff; transition:box-shadow .25s,border-color .25s; min-width:0; }
.sample-block:hover { border-color:#cbd3e2; }
.sample-block.expanded { border-color:#b8b0d7; box-shadow:0 7px 24px #493a7a0d; }
.sample-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.sample-number { font-size:11px; letter-spacing:.09em; font-weight:700; color:#7c8799; padding-top:5px; font-variant-numeric:tabular-nums; }
.sample-block .sample-focus { flex:1; font-size:var(--type-body); font-weight:500; line-height:1.6; margin:0; color:#344054; }
.detail-toggle { display:flex; align-items:center; gap:6px; flex-shrink:0; background:#f5f4fb; color:#5f518e; border:1px solid #e1ddeb; min-height:40px; padding:8px 16px; border-radius:7px; font-size:var(--type-label); font-weight:600; cursor:pointer; }
.detail-toggle svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .25s; }
.expanded .detail-toggle svg { transform:rotate(90deg); }
.transcript-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; color:#727e90; font-size:var(--type-label); font-weight:600; letter-spacing:0; }
.source-transcript { padding:14px 16px; background:#f7f8fa; border:1px solid #eceef3; border-radius:8px; margin-bottom:15px; }
.transcript-text { font-size:var(--type-body); line-height:2.05; color:#2f3b4c; overflow-wrap:anywhere; }
.transcript-word { appearance:none; display:inline; font:inherit; line-height:inherit; border:0; background:none; padding:1px 0; color:inherit; border-radius:3px; cursor:default; }
button.transcript-word { cursor:pointer; }
button.transcript-word:hover { background:#34405414; box-shadow:inset 0 -2px #8e99ac; }
.transcript-word.current-word { background:#e3def6; box-shadow:inset 0 -2px #6556aa; }
.instruction-operation,.target-operation { border-radius:4px; padding:2px 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; background:var(--op-bg); }
.op-text { --op-bg:#f8e2df; --op-fg:#a04e48; }
.op-emotion { --op-bg:#eee4f7; --op-fg:#765396; }
.op-pitch { --op-bg:#e2eff9; --op-fg:#3c7497; }
.op-rate { --op-bg:#e5f2e7; --op-fg:#4f7955; }
.op-pause { --op-bg:#f1e9dc; --op-fg:#8b6a40; }
.edit-label { appearance:none; display:inline; font:inherit; font-size:var(--type-label); font-weight:600; background:transparent; color:var(--op-fg); border:0; border-left:1px solid color-mix(in srgb,var(--op-fg) 28%,transparent); margin:0 2px 0 6px; padding:0 3px 0 6px; cursor:pointer; border-radius:0; }
.edit-label[aria-disabled=true],.xml-tag[aria-disabled=true] { cursor:default; }
.edit-label:hover,.edit-label.selected { text-decoration:underline; text-underline-offset:3px; }
.xml-mode,.xml-mode .transcript-word,.xml-tag { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:var(--type-body); line-height:2; font-weight:400; }
.edit-label,.xml-tag { white-space:normal; overflow-wrap:anywhere; }
.edit-label[data-wrap=keep] { white-space:nowrap; }
.xml-tag { appearance:none; display:inline; padding:0; margin:0; background:none; border:0; color:var(--op-fg); cursor:pointer; }
.xml-tag:hover { text-decoration:underline; }
.mode-switch { display:none; flex-shrink:0; background:#e9ecf1; padding:3px; border-radius:6px; }
.mode-switch button { border:0; border-radius:4px; min-height:40px; min-width:72px; padding:8px 16px; background:none; color:#596577; font-size:var(--type-label); font-weight:600; cursor:pointer; }
.mode-switch [aria-pressed=true] { color:#000000; background:white; box-shadow:0 1px 3px #0000000d; }
.audio-comparison { display:grid; grid-template-columns:repeat(var(--streams),minmax(0,1fr)); gap:10px; }
.listen-player { min-width:0; padding:11px 10px 8px; border:1px solid #e5e9ef; border-radius:8px; background:#fbfcfe; transition:background .2s,border-color .2s; }
.listen-player.source { --source-wave:#b8b38c; --source-accent:#696741; background:#f7f6ed; border-color:#e2dfcc; order:0; }
.source .player-heading strong,.source .play-toggle { color:var(--source-accent); }
.source .play-toggle { border-color:#dcd8be; }
.listen-player.source.is-playing { background:#f0eedc; border-color:#b8b18b; }
.listen-player.ours { background:#f6f4fc; border-color:#dcd6ef; }
.listen-player.baseline,.listen-player.ours { order:2; }
.listen-player.is-playing { border-color:#a99acb; background:#f3f0fc; }
.player-heading { display:flex; align-items:center; justify-content:space-between; min-height:20px; gap:5px; }
.player-heading strong { font-size:11px; font-weight:650; color:#536174; line-height:1.4; }
.ours .player-heading strong { color:#65568d; }
.player-role { font-size:8px; letter-spacing:.08em; color:#8b83a1; white-space:nowrap; }
.player-main { display:flex; align-items:center; gap:8px; padding:5px 0; }
.play-toggle { display:grid; place-items:center; flex-shrink:0; width:27px; height:27px; border-radius:50%; border:1px solid #dbe0e9; background:white; color:#63718a; cursor:pointer; padding:5px; transition:transform .15s,background .15s; }
.play-toggle:hover { transform:scale(1.08); background:#eeebf8; }
.ours .play-toggle { background:#6556aa; border-color:#6556aa; color:#fff; }
.play-toggle svg { width:15px; height:15px; fill:currentColor; }
.wave-wrap { flex:1; min-width:0; position:relative; }
.wave { width:100%; min-height:44px; border-radius:4px; cursor:crosshair; outline-offset:3px; touch-action:pan-y; }
.wave:empty { background:linear-gradient(90deg,#e8eaf0 1px,transparent 1px) center/4px 12px repeat-x; }
.player-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.clock { font-size:10px; font-variant-numeric:tabular-nums; color:#8791a0; }
.extra-controls { display:none; align-items:center; gap:5px; }
.extra-controls button,.extra-controls select { font-family:inherit; font-size:var(--type-meta); color:#68758a; border:1px solid #e1e5ed; border-radius:4px; background:transparent; padding:2px 5px; cursor:pointer; }
.listen-player audio { display:none; }
.player-error { font-size:11px; color:#a74c48; }
.target-transcript { display:none; order:1; }
.timing-note { color:#6b7785; font-size:var(--type-label); margin:8px 0 0; }
.timing-note:empty { display:none; }
.seek-hint { font-size:11px; text-transform:none; letter-spacing:0; font-weight:400; }
.interaction-note { display:none; font-size:var(--type-label); color:#6b7785; margin-top:15px; }
.operation-markers { position:absolute; inset:0; pointer-events:none; }
.wave-marker { display:none; position:absolute; top:-4px; width:9px; height:9px; padding:0; border:1px solid var(--op-fg); background:var(--op-bg); border-radius:3px; transform:translateX(-50%) rotate(45deg); cursor:pointer; pointer-events:auto; z-index:2; }
.expanded .wave-marker { display:block; }
.expanded .mode-switch { display:inline-flex; }
.expanded .audio-comparison { grid-template-columns:minmax(0,1fr); gap:12px; }
.expanded .target-transcript { display:block; margin:10px 0 2px; padding:15px 16px; background:#faf9fd; border-radius:8px; border:1px solid #eeebf5; }
.expanded .listen-player { padding:12px 16px; }
.expanded .player-heading strong { font-size:var(--type-label); }
.expanded .player-role { font-size:9px; }
.expanded .player-main { gap:14px; }
.expanded .play-toggle { width:32px; height:32px; }
.expanded .extra-controls { display:flex; }
.expanded .clock { font-size:var(--type-meta); }
.expanded .edit-label { font-size:14px; }
.expanded .interaction-note { display:block; }
.sr-only { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
button:focus-visible,[role=button]:focus-visible,select:focus-visible,[role=slider]:focus-visible { outline:2px solid #8a77bc; outline-offset:3px; }
@media(min-width:900px) { .expanded { animation:detail-in .25s ease-out; } }
@keyframes detail-in { from { box-shadow:0 0 0 transparent; } to { box-shadow:0 7px 24px #493a7a0d; } }
@media(max-width:1100px) { .player-role { display:none; } .audio-comparison { gap:7px; } .listen-player { padding:9px 7px; } }
@media(max-width:760px) { .radar-chart .chart-scroll { width:100%; } .radar-chart img { min-width:650px; } .sample-block { padding:14px; } .audio-comparison { grid-template-columns:repeat(min(2,calc(var(--streams) - 1)),minmax(0,1fr)); } .listen-player.source { grid-column:1/-1; } .player-heading strong { font-size:var(--type-meta); } .player-role { display:inline; } .transcript-heading { flex-wrap:wrap; } .sample-top { gap:8px; } .sample-block .sample-focus { font-size:var(--type-body); } .sample-number { display:none; } .detail-toggle { min-height:40px; padding:8px 16px; } .transcript-text { font-size:var(--type-body); line-height:2; } .source-transcript { padding:12px; } .expanded .listen-player { padding:10px 12px; } .seek-hint { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.presentation-action { border:0; font-family:inherit; cursor:pointer; color:#586e8c; font-size:var(--type-label); font-weight:600; padding:3px 7px; background:#e8eef7; border-radius:4px; }
.sample-list { border:0; border-radius:0; overflow:visible; }
.player-heading strong { font-size:var(--type-meta); }
.clock { font-size:var(--type-meta); }
@media(max-width:760px) {
  .play-toggle { width:34px; height:34px; }
  .extra-controls button,.extra-controls select { min-height:26px; }
}

.wave-preview { position:absolute; inset:0; pointer-events:none; color:#ccd3df; }
.wave-preview svg { width:100%; height:44px; display:block; }
.source .wave-preview { color:var(--source-wave); }
.ours .wave-preview { color:#b8b5e4; }

/* The title's original margin shorthand must not override the shared width cap. */
.hero h1 { margin-inline:auto; }
.hero h1 { display:flex; justify-content:center; align-items:flex-start; gap:.22em; width:max-content; max-width:100%; transform:translateX(.12em); }
.hero h1 .model-name { white-space:nowrap; }
.hero h1 .version-stamp { flex:none; margin-top:1.56em; padding:.18em .43em .22em; border:1px solid #245e68; border-radius:.25em; background:#245e68; color:#fff; font-family:"Roboto",Arial,sans-serif; font-size:.27em; font-weight:700; line-height:1.1; letter-spacing:.01em; }

.playground-invitation { text-align:left; font-size:var(--type-body); line-height:1.7; margin-block:0 22px; }
.playground-invitation a:first-of-type { white-space:nowrap; }
.playground-invitation img { display:inline-block; width:20px; height:20px; vertical-align:-4px; margin-left:3px; }
.promotion-video { position:relative; overflow:hidden; border:1px solid #dce1eb; border-radius:10px; background:#142c31; aspect-ratio:16/9; }
.promotion-video video { display:block; width:100%; height:100%; object-fit:contain; }
.video-start { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:clamp(48px,6vw,72px); aspect-ratio:1; padding:12px; border:1px solid #ffffff80; border-radius:50%; background:#245e68ee; color:#fff; cursor:pointer; box-shadow:0 3px 16px #0003; }
.video-start svg { width:100%; fill:currentColor; }
.video-start:hover { background:#194751; }
.video-start:focus-visible { outline:3px solid white; outline-offset:4px; }
.video-start[hidden] { display:none; }

/* Each example opens from its surrounding surface and summary text. */
.sample-block:not(.expanded) { cursor:pointer; }
.sample-block .source-transcript,.sample-block .audio-comparison { cursor:default; }
.sample-block .detail-toggle[hidden] { display:none!important; }
.sample-block .sample-expand { appearance:none; border:0; border-radius:3px; background:none; padding:0; font-family:inherit; text-align:left; color:inherit; cursor:inherit; text-decoration:none; }
.sample-block .sample-expand:hover { text-decoration:none; background:none; }

/* Highlight only the surface that opens a sample, not its media controls. */
.sample-block { transition:background-color .55s ease,border-color .55s ease,box-shadow .25s ease; }
@media(hover:hover) {
  .sample-block:not(.expanded):hover:not(:has(.source-transcript:hover,.audio-comparison:hover,.detail-toggle:hover,a:hover,input:hover,select:hover)) {
    background-color:#f0f1f3;
    border-color:#bdc5d0;
  }
}
.sample-block:not(.expanded):has(.sample-expand:focus-visible) {
  background-color:#f0f1f3;
  border-color:#bdc5d0;
}

/* Centered project signature and author contact. */
.hero .brand-signature { display:flex; align-items:center; justify-content:center; gap:24px; margin:0 auto 20px; }
.hero .brand-signature img { display:block; height:auto; flex-shrink:0; }
.hero .brand-xiaohongshu { width:76px; }
.hero .brand-studio { width:166px; }
.hero .paper-emails { margin-top:14px; margin-bottom:24px; }

/* Reading paragraphs share justification; the last line keeps natural spacing. */
.abstract,.playground-invitation,.section-intro,.metric-summary p,
.reference-results > p:not(.figure-note),.radar-chart p {
  text-align:justify;
  text-align-last:start;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:7 3 3;
}

:root { --model-accent:#369da8; --model-tint:#edf7f8; --listen-accent:var(--model-accent); }
.listen-player.ours,.results-table .ours,.research-table tr.research-ours { background:var(--model-tint); border-color:#b6dce0; }
.ours .player-heading strong,.results-table .ours { color:#267985; }
.research-table tr.research-ours th { color:#000000; }
.ours .play-toggle { background:var(--model-accent); border-color:var(--model-accent); color:white; }
.ours .wave-preview { color:#a7d7dd; }
.listen-player.ours.is-playing { border-color:var(--model-accent); background:#e4f3f5; }
.transcript-word.current-word { background:#dceff2; box-shadow:inset 0 -2px var(--model-accent); }