/* One visual system for Explore Signs and Alphabet & Names. */
:root {
  --paper: #f7f8ff;
  --ink: #242743;
  --muted: #656a83;
  --line: #e0e3f2;
  --pine: #4455d9;
  --soft: #edf0ff;
  --accent: #dc604b;
}
.studio-page { background: radial-gradient(ellipse at 100% 0, #e4e9ff 0, transparent 42%), radial-gradient(ellipse at 0 15%, #fff0ea80 0, transparent 36%), var(--paper); color: var(--ink); font-size: 16px; }
.studio-page .site-header, .studio-page .page-shell { max-width: 1440px; padding-left: 40px; padding-right: 40px; }
.studio-page .site-header { min-height: 94px; border-bottom: 1px solid var(--line); }
.studio-brand { font-size: 29px; letter-spacing: -1.5px; }
.brand-mark { background: var(--pine); color: #ffffff; width: 42px; height: 42px; border-radius: 14px 14px 14px 4px; }
.studio-nav { gap: 6px; padding: 5px; border: 1px solid #e0e3f2; border-radius: 14px; background: #edeffd; }
.studio-nav a { padding: 11px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #626784; }
.studio-nav a[aria-current] { background: #fff; color: var(--pine); box-shadow: 0 2px 6px #414bd512; }
.studio-nav a[aria-current]::after { display: none; }
.studio-nav a:hover { background: #ffffffa8; }
.header-about { color: var(--pine); font-size: 14px; font-weight: 650; text-decoration: none; display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.header-about svg { width: 16px; height: 16px; }
.header-about:hover { color: var(--accent); }
.studio-page .workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 0 30px; }
.studio-page .workspace-heading h1 { font-size: clamp(36px, 3.3vw, 46px); letter-spacing: -1.8px; font-weight: 750; line-height: 1.16; }
.workspace-heading h1 span { color: var(--pine); }
.studio-page .workspace-heading p { display: block; font-size: 16px; margin-top: 10px; color: var(--muted); }
.studio-page .workspace-heading .workspace-kicker { color: #626eaa; font-size: 10px; font-weight: 750; letter-spacing: 2px; margin: 0 0 10px; }
.workspace-art { width: 210px; height: 112px; flex-shrink: 0; }
.workspace-art svg { width: 100%; height: 100%; overflow: visible; }
.ui-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.studio-nav a, .task-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.studio-nav a[aria-current] .ui-icon { color: var(--pine); }
.brand-mark { background: linear-gradient(135deg, #6575ef, #4051cc); box-shadow: 0 5px 14px #4455d926; }
.brand-period { color: #ec765c; }
.workspace-heading h1 span { position: relative; z-index: 0; }
.workspace-heading h1 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 9px; border-radius: 5px; background: #ffd78a; z-index: -1; transform: rotate(-1.5deg); }
.studio-page .sign-explorer { grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
.task-panel { border-radius: 20px; border-color: var(--line); background: #fff; box-shadow: 0 8px 28px #414bd509; border-top: 4px solid #6978f0; }
.task-tabs { margin: 16px; padding: 5px; background: #f0f2ff; border-radius: 12px; }
.task-tabs button { font-size: 14px; min-height: 48px; padding: 10px 8px; color: #626784; border-radius: 8px; line-height: 1.4; }
.task-tabs button[aria-pressed=true] { color: var(--pine); box-shadow: 0 2px 5px #414bd512; }
.task-tabs button:hover { background: #ffffffa8; }
.studio-page .sentence-card, .studio-page .library-panel, .alphabet-task { padding: 20px 24px 26px; }
.studio-page .sentence-heading { display: flex; margin-bottom: 24px; }
.studio-page .sentence-heading h2 { font-size: 25px; letter-spacing: -.8px; font-weight: 750; }
.studio-page .sentence-heading p { font-size: 14px; color: var(--muted); margin-top: 5px; }
.studio-page .sentence-modes { gap: 8px; margin-bottom: 22px; }
.studio-page .sentence-modes button { font-size: 13px; min-height: 46px; border-color: var(--line); color: #626784; border-radius: 9px; }
.studio-page .sentence-modes button[aria-pressed=true] { background: #eef0ff; color: #3e4ec4; border-color: #acb4f0; }
.studio-page .sentence-input-label, .alphabet-task label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 8px; color: #505673; }
.studio-page #word-input, #name-input { font-size: 16px; min-height: 54px; padding: 14px; border-radius: 10px; border: 1px solid #cdd2ec; background: #fff; color: var(--ink); }
.studio-page #word-input { padding-right: 38px; }
.studio-page .primary-button, .studio-page .play-button { background: linear-gradient(115deg, #5367e8, #4051ce); color: #fff; box-shadow: 0 3px 7px #4455d927; font-size: 15px; min-height: 48px; border-radius: 10px; }
.studio-page .primary-button:hover, .studio-page .play-button:hover { background: #3342b4; transform: translateY(-1px); }
.studio-page .compose-row .primary-button { font-size: 15px; min-height: 48px; }
.studio-page .sentence-examples button { font-size: 12px; padding: 9px 11px; border-radius: 8px; background: #fff0e9; color: #934730; }
.studio-page .sentence-examples button:hover { background: #ffe0d2; }
.studio-page .composer-hint, .studio-page .input-message, .translation-retry, .name-help, .alphabet-note { font-size: 13px; line-height: 1.7; }
.studio-page .composer-hint { color: #656a83; }
.studio-page .input-message { color: #656a83; }
.studio-page .input-message.error { color: #9b3535; }
.studio-page .translation-preview { border-color: #d4daf8; background: #f5f6ff; padding: 16px; border-radius: 12px; }
.translation-preview h3 { font-size: 16px; }.translation-preview label, .translation-caveat, .translation-notes { font-size: 13px; }
.translation-preview textarea { border-color: #cdd2ec; font-size: 16px; }
.browse-heading, .browse-heading button { font-size: 13px; }.browse-heading { margin: 0 0 18px; }
.search-box { border-color: #cdd2ec; min-height: 52px; border-radius: 10px; }.search-box input { font-size: 16px; }
.catalog-switch { border-radius: 10px; background: #f0f2ff; }.catalog-switch button { min-height: 40px; font-size: 14px; }
.collection-select select { font-size: 14px; min-height: 44px; border-radius: 8px; }
.vocabulary-heading { font-size: 12px; margin-top: 22px; }.vocabulary-heading h2 { font-size: 12px; }
.word-chip { font-size: 16px; min-height: 52px; border-radius: 10px; color: #515876; }.word-chip:hover { background: #f3f4ff; }
.word-chip.active { color: #3e4ec4; background: #edf0ff; border-color: #d0d7fa; }
.studio-page .word-list { max-height: 390px; }.load-more, .suggest-word-button, .library-suggestion { font-size: 13px; }
.studio-page .player-card { border-radius: 20px; border-color: var(--line); box-shadow: 0 10px 32px #414bd50a; }
.studio-page .player-heading { padding: 21px 26px; min-height: 104px; }
.studio-page .player-heading h2 { font-size: 32px; font-weight: 750; letter-spacing: -1px; line-height: 1.2; overflow-wrap: anywhere; }
.studio-page .player-heading p, #current-meaning { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.studio-page .stage { height: 440px; background: radial-gradient(ellipse at 48% 18%, #fafaff 0, #eef0fc 50%, #dfe4f8 100%); }
.studio-page .stage-topline { font-size: 12px; color: #656b89; top: 18px; left: 24px; }
.view-dot { background: #ec8067; }
.studio-page .transport { padding: 18px 26px; }
.timeline-row { font-size: 12px; }.timeline-row input { accent-color: var(--pine); }
.studio-page .transport-row { gap: 12px; flex-wrap: wrap; }.studio-page .speed-control, .studio-page .speed-control button, .studio-page .loop-button { font-size: 13px; }
.studio-page .speed-control button { min-width: 42px; min-height: 42px; border-radius: 8px; }
.studio-page .speed-control button.active, .studio-page .loop-button[aria-pressed=true] { color: var(--pine); background: #edf0ff; }
.studio-page .loop-button { margin-left: auto; min-height: 44px; padding: 8px; }.studio-page .icon-button { width: 44px; height: 44px; }
.studio-page .player-options { display: flex; align-items: start; gap: 10px; padding: 0 22px; background: #fafbff; border-color: var(--line); }
.studio-page .view-options { flex: 1; min-width: 0; background: transparent; }.studio-page .view-options>summary { padding: 16px 4px; background: transparent; font-size: 13px; color: #515b8b; }
.studio-page .detail-hint { font-size: 12px; color: #68708d; }
#review-shortcut { min-height: 52px; font-size: 13px; flex-shrink: 0; color: #515b8b; }.camera-controls p { font-size: 12px; }
.camera-control-row button, .camera-control-row output { font-size: 13px; }.camera-control-row button[aria-pressed=true] { background: #edf0ff; color: #3e4ec4; border-color: #bcc5f3; }
.avatar-trigger { padding: 7px 12px; border-color: #dce0f4; border-radius: 12px; background: #f8f9ff; }
.avatar-trigger:hover { background: #eef1ff; }.avatar-trigger img { width: 44px; height: 44px; background: #e8ecff; }
.avatar-trigger strong { font-size: 14px; }.avatar-trigger small { font-size: 12px; }.avatar-trigger span:last-child { color: #777fa7; }
.avatar-options button { background: #f5f6ff; }.avatar-options button:hover { background: #ecefff; }.avatar-options button[aria-pressed=true] { background: #edf0ff; border-color: #6978e7; }
.avatar-options .avatar-name { font-size: 16px; }.avatar-options .avatar-description { font-size: 12px; color: #656a83; }
.studio-dialog { border-color: var(--line); color: var(--ink); }.studio-dialog .dialog-close { background: #eff1ff; color: #545f9a; }
.phrase-segments button { font-size: 14px; }.phrase-segments button.active { background: #edf0ff; border-color: #bcc5f3; color: #3e4ec4; }
.studio-page .studio-footer { margin-top: 32px; padding: 22px 0 28px; color: #6c728d; border-color: var(--line); font-size: 12px; }
.studio-page .studio-footer summary { font-size: 12px; }.studio-page .studio-footer p { font-size: 13px; }.studio-page .studio-footer .source-details { margin-top: 12px; }
.studio-page :is(button,a,input,textarea,summary,select):focus-visible { outline-color: #8491ec; }
/* Clip the unfocused skip link as well as positioning it offscreen. */
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
@media (min-width: 1001px) { .task-panel { position: sticky; top: 24px; } }
@media (max-width: 1200px) {
  .studio-page .site-header, .studio-page .page-shell { padding-left: 28px; padding-right: 28px; }
  .studio-page .sign-explorer { grid-template-columns: 330px minmax(0,1fr); gap: 22px; }
  .studio-nav a { padding: 10px 14px; font-size: 14px; }.header-about { font-size: 13px; }
  .studio-page .player-heading { padding: 20px; }.studio-page .transport { padding: 18px 20px; }
  .studio-page .speed-control { order: 3; justify-content: center; width: 100%; }.studio-page .speed-control>span { display: inline; }
}
@media (max-width: 1000px) {
  .studio-page .sign-explorer { display: flex; flex-direction: column; gap: 22px; }
  .task-panel, .studio-page .viewer-column { width: 100%; }
  .studio-page .sentence-card, .studio-page .library-panel, .alphabet-task { padding: 16px 24px 24px; }
  .studio-page .compose-row { flex-direction: row; align-items: stretch; }.studio-page .compose-row .primary-button { width: auto; min-width: 150px; }
  .studio-page .sentence-heading { margin-bottom: 18px; }.studio-page .sentence-modes { max-width: 370px; }
  .studio-page .word-list { max-height: 280px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-page .stage { height: 440px; }.studio-page .workspace-heading { padding-top: 28px; }
  .studio-page .speed-control { order: 0; width: auto; }.studio-page .speed-control>span { display: inline; }
  .header-about { display: none; }
}
@media (max-width: 760px) {
  .studio-page .site-header, .studio-page .page-shell { padding-left: 20px; padding-right: 20px; }
  .studio-page .site-header { gap: 18px; padding-top: 20px; padding-bottom: 18px; }
  .studio-brand { font-size: 28px; }.studio-nav { order: 2; width: 100%; gap: 5px; padding: 5px; }
  .studio-nav a { flex: 1; text-align: center; font-size: 14px; padding: 10px 6px; }
  .studio-page .workspace-heading { padding: 25px 0; gap: 12px; }.studio-page .workspace-heading h1 { font-size: 35px; letter-spacing: -1.3px; }
  .studio-page .workspace-heading p { font-size: 14px; }.studio-page .workspace-heading .workspace-kicker { font-size: 9px; letter-spacing: 1.3px; }
  .workspace-art { display: none; }.task-panel { border-radius: 16px; }.task-tabs { margin: 12px; }
  .task-tabs button { font-size: 14px; gap: 6px; }.task-tabs .ui-icon { width: 16px; height: 16px; }.studio-page .sentence-card, .studio-page .library-panel, .alphabet-task { padding: 14px 18px 22px; }
  .studio-page .sentence-heading h2 { font-size: 23px; }.studio-page .sentence-heading p { font-size: 13px; }
  .studio-page .sentence-modes { max-width: none; margin-bottom: 18px; }.studio-page .compose-row { flex-direction: column; }.studio-page .compose-row .primary-button { width: 100%; }
  .studio-page .player-heading { padding: 18px; min-height: 100px; }.studio-page .player-heading h2 { font-size: 27px; }
  .studio-page .player-heading p, #current-meaning { font-size: 13px; }.avatar-trigger { padding: 6px 8px; gap: 7px; }
  .avatar-trigger img { width: 36px; height: 36px; }.avatar-trigger strong { font-size: 13px; }.avatar-trigger small { font-size: 11px; }
  .studio-page .stage { height: 360px; }.studio-page .transport { padding: 16px; }
  .studio-page .speed-control { order: 3; width: 100%; }.studio-page .speed-control button { flex: 1; }
  .studio-page .player-options { padding: 0 16px; }.studio-page .detail-hint { display: none; }.studio-page .word-list { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .studio-nav a, .task-tabs button { gap: 5px; }.studio-nav .ui-icon, .task-tabs .ui-icon { width: 15px; height: 15px; }
  .studio-page .site-header, .studio-page .page-shell { padding-left: 12px; padding-right: 12px; }.studio-page .workspace-heading h1 { font-size: 32px; }
  .studio-page .player-heading { gap: 10px; padding: 16px 12px; }.studio-page .player-heading h2 { font-size: 25px; }.avatar-trigger img { display: none; }
  .studio-page .stage { height: 320px; }.studio-page .sentence-card, .studio-page .library-panel, .alphabet-task { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; }.studio-page .primary-button:hover, .studio-page .play-button:hover { transform: none; } }