/* Prepared, isolated demonstrations of CueDive's actual component anatomy. */
.product-ui {
  --prod-paper:#fffcf8;
  --prod-card:#fffefd;
  --prod-low:#fffaf5;
  --prod-ink:#302b27;
  --prod-muted:#72695e;
  --prod-line:#eae3d9;
  --prod-accent:#746657;
  --prod-selected:#f8f3ec;
  --prod-selected-line:#c5b8a6;
  color:var(--prod-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans",sans-serif;
  font-size:13px;
  text-align:left;
  letter-spacing:normal;
  line-height:1.55;
}
.product-ui *, .product-ui *::before, .product-ui *::after {box-sizing:border-box}
.product-ui .prod-icon {display:block;width:17px;height:17px;flex:0 0 auto;pointer-events:none}
.product-ui .prod-tool {display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:var(--prod-muted);flex:0 0 auto}
.product-ui .prod-tool-separator {height:16px;width:1px;background:var(--prod-line);margin:0 4px;flex:0 0 auto}
.product-ui .prod-tools {display:inline-flex;align-items:center;gap:1px;white-space:nowrap;color:var(--prod-muted)}
.product-ui .prod-panel-brand {display:flex;align-items:center;gap:11px;min-height:34px;padding-bottom:13px;border-bottom:1px solid var(--prod-line);font-size:16px}
.product-ui .prod-panel-brand>strong {font-weight:650;letter-spacing:-.6px}
.product-ui .prod-brand-mode {display:inline-flex;align-items:center;gap:4px;border-left:1px solid var(--prod-line);padding-left:10px;color:var(--prod-muted)}
.product-ui .prod-brand-mode>.prod-icon:last-child {width:11px;height:11px}
.product-ui .prod-panel-tools {display:flex;margin-left:auto;gap:3px}
.product-ui .prod-source-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:17px 1px 12px;min-width:0}
.product-ui .prod-source-heading>strong {font-size:12px;font-weight:600;line-height:1.5;min-width:0}
.product-ui .prod-source-heading>small {color:var(--prod-muted);font-size:9px;line-height:1.5;text-align:right}
.product-ui .prod-picker-visual {display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:5px 7px;border:1px solid var(--prod-line);border-radius:8px;color:var(--prod-ink);font-size:10px;line-height:1.4;background:var(--prod-low)}
.product-ui .prod-picker-visual>.prod-icon:first-child {width:14px;height:14px}
.product-ui .prod-picker-visual>.prod-icon:last-child {width:10px;height:10px}
.product-ui .prod-sentence-card {background:var(--prod-card);border:1px solid var(--prod-line);border-radius:20px;padding:8px 18px 12px;min-width:0;box-shadow:0 8px 25px #2a241d08}
.product-ui .prod-sentence-card.is-current {border-color:var(--prod-selected-line)}
.product-ui .prod-sentence-head {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:29px;margin-bottom:7px;color:var(--prod-muted)}
.product-ui .prod-sentence-label {display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.035em}
.product-ui .prod-sentence-label>.prod-icon {width:15px;height:15px}
.product-ui .prod-time {font-size:9px;white-space:nowrap}
.product-ui .prod-original {margin:0;color:var(--prod-ink);font-family:"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",system-ui,sans-serif;font-size:23px;font-weight:550;letter-spacing:.012em;line-height:1.85}
.product-ui .prod-original ruby {ruby-position:over}
.product-ui .prod-original rt {font-size:.46em;font-weight:450;line-height:1;color:var(--prod-muted);letter-spacing:normal}
.product-ui .prod-phone-break {display:none}
.product-ui .prod-translation {margin:8px 0 0;color:var(--prod-muted);font-size:12px;line-height:1.7}
.product-ui .prod-sentence-footer {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 6px;margin-top:10px}
.product-ui .prod-sentence-footer>small {font-size:9px;color:var(--prod-muted);line-height:1.5}
.product-ui .prod-sentence-footer>.prod-tools {margin-left:auto}
.product-ui .prod-transport {display:flex;align-items:center;justify-content:space-between;gap:3px;padding:8px 0;color:var(--prod-muted)}
.product-ui .prod-transport>.prod-tool {width:30px;height:34px}
.product-ui .prod-transport>.is-muted {opacity:.35}
.product-ui .prod-transport>.is-play {width:40px;height:40px;border-radius:50%;background:var(--prod-selected);border:1px solid var(--prod-line);color:var(--prod-ink)}
.product-ui .prod-transport>.is-play>.prod-icon {width:19px;height:19px}

/* Phone picture scales the real app anatomy together, including its type. */
.showcase-phone:has(>.product-ui) {container-type:inline-size;background:#fffcf8;color:#302b27;border-color:#c8c1b7;box-shadow:0 0 0 1px #fff8,inset 0 0 0 1px #eae3d9,0 30px 65px #35291d33}
.product-ui.product-phone {height:100%;display:flex;flex-direction:column;background:var(--prod-paper);font-size:3cqw;overflow:hidden}
.product-ui.product-phone .prod-icon {width:4.3cqw;height:4.3cqw}
.product-ui.product-phone .prod-phone-status {height:15cqw;min-height:15cqw;display:flex;align-items:center;justify-content:space-between;padding:0 7cqw;position:relative;font-size:3.2cqw;font-weight:650}
.product-ui.product-phone .prod-phone-status>i {position:absolute;left:50%;top:3cqw;transform:translateX(-50%);width:29cqw;height:6.8cqw;border-radius:6cqw;background:#191817}
.product-ui.product-phone .prod-battery {width:6.1cqw;height:2.8cqw;border:1px solid currentColor;border-radius:.8cqw;box-shadow:inset 0 0 0 .5cqw var(--prod-paper);background:currentColor}
.product-ui.product-phone .prod-app-brand {display:flex;align-items:center;justify-content:space-between;padding:0 5cqw 3.8cqw;border-bottom:1px solid var(--prod-line);font-size:5.4cqw;letter-spacing:-.3cqw}
.product-ui.product-phone .prod-app-brand>.prod-tool {width:7cqw;height:7cqw}
.product-ui.product-phone .prod-device-row {display:flex;justify-content:space-between;gap:2cqw;padding:4.4cqw 5cqw 0;color:var(--prod-muted);font-size:2.9cqw;line-height:1.5}
.product-ui.product-phone .prod-source-heading {margin:2.7cqw 5cqw 3.3cqw;gap:2cqw}
.product-ui.product-phone .prod-source-heading>strong {font-size:3.7cqw}
.product-ui.product-phone .prod-picker-visual {font-size:2.9cqw;gap:1cqw;padding:1.1cqw 1.8cqw;border-radius:2cqw}
.product-ui.product-phone .prod-picker-visual>.prod-icon {width:3.6cqw;height:3.6cqw}
.product-ui.product-phone .prod-picker-visual>.prod-icon:last-child {width:2.4cqw;height:2.4cqw}
.product-ui.product-phone .prod-phone-cards {display:flex;flex-direction:column;gap:3.5cqw;padding:0 4cqw;min-height:0;overflow:hidden}
.product-ui.product-phone .prod-sentence-card {padding:2cqw 3.7cqw 2.5cqw;border-radius:5.3cqw;box-shadow:none}
.product-ui.product-phone .prod-sentence-head {min-height:6.5cqw;margin-bottom:2.4cqw;gap:2cqw}
.product-ui.product-phone .prod-sentence-label {font-size:2.8cqw;gap:1.4cqw;letter-spacing:0}
.product-ui.product-phone .prod-time {font-size:2.6cqw}
.product-ui.product-phone .prod-original {font-size:5.1cqw;line-height:1.85;letter-spacing:.025em}
.product-ui.product-phone .prod-phone-break {display:block}
.product-ui.product-phone .prod-translation {font-size:3.1cqw;line-height:1.65;margin-top:1.6cqw}
.product-ui.product-phone .prod-sentence-footer {gap:1cqw;margin-top:2cqw;flex-wrap:nowrap}
.product-ui.product-phone .prod-sentence-footer>small {font-size:2cqw;max-width:20cqw;line-height:1.5}
.product-ui.product-phone .prod-tools {gap:.5cqw}
.product-ui.product-phone .prod-tool {width:6.1cqw;height:6.3cqw}
.product-ui.product-phone .prod-tool>.prod-icon {width:3.9cqw;height:3.9cqw}
.product-ui.product-phone .prod-tool-separator {height:4cqw;margin:0 .8cqw}
.product-ui.product-phone .prod-phone-bottom {margin-top:auto;position:relative;padding-top:2cqw;background:var(--prod-low);border-top:1px solid var(--prod-line);box-shadow:0 -4cqw 5cqw #fffcf8}
.product-ui.product-phone .prod-timing {display:flex;justify-content:space-between;gap:1cqw;padding:0 4.5cqw;font-size:2.5cqw;color:var(--prod-muted);line-height:1.6}
.product-ui.product-phone .prod-progress {height:.65cqw;margin:5cqw 4.5cqw 2.2cqw;border-radius:2cqw;background:var(--prod-line);position:relative}
.product-ui.product-phone .prod-progress:before {content:"";display:block;width:35%;height:100%;background:var(--prod-accent)}
.product-ui.product-phone .prod-progress>i {position:absolute;left:35%;top:50%;transform:translate(-50%,-50%);width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--prod-accent)}
.product-ui.product-phone .prod-transport {padding:1.5cqw 3.4cqw 3.5cqw;gap:1cqw}
.product-ui.product-phone .prod-transport>.prod-tool {width:10cqw;height:10cqw}
.product-ui.product-phone .prod-transport>.prod-tool>.prod-icon {width:4.7cqw;height:4.7cqw}
.product-ui.product-phone .prod-transport>.is-play {width:12cqw;height:12cqw}
.product-ui.product-phone .prod-tabbar {display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:2.6cqw 3.5cqw 4.2cqw;border-top:1px solid var(--prod-line);background:var(--prod-card)}
.product-ui.product-phone .prod-tabbar>span {display:flex;flex-direction:column;align-items:center;gap:1.4cqw;padding:2cqw 1cqw;border:1px solid transparent;border-radius:3cqw;color:var(--prod-muted);font-size:2.5cqw}
.product-ui.product-phone .prod-tabbar>.is-active {border-color:var(--prod-selected-line);background:var(--prod-selected);color:var(--prod-ink)}

/* The browser panel shares its palette with the surrounding six-theme preview. */
.product-ui.product-workspace-panel {
 --prod-paper:var(--preview-bg,#fffcf8);--prod-card:var(--preview-panel,#fffefd);--prod-low:var(--preview-bg,#fffaf5);--prod-ink:var(--preview-text,#302b27);--prod-muted:var(--preview-muted,#72695e);--prod-line:var(--preview-line,#eae3d9);--prod-accent:var(--preview-accent,#746657);--prod-selected:var(--preview-highlight,#f8f3ec);--prod-selected-line:var(--preview-accent,#c5b8a6);
 display:flex;flex-direction:column;min-height:100%;min-width:0;
}
.product-ui.product-workspace-panel .prod-sentence-card {padding-inline:13px;border-radius:15px}
.product-ui.product-workspace-panel .prod-original {font-size:21px}
.product-ui.product-workspace-panel .prod-sentence-footer {gap:4px}
.product-ui.product-workspace-panel .prod-sentence-footer>small {font-size:8px}
.product-ui.product-workspace-panel .prod-tool {width:24px;height:28px}
.product-ui.product-workspace-panel .prod-tools>.prod-tool>.prod-icon {width:14px;height:14px}
.product-ui.product-workspace-panel .prod-tool-separator {margin:0 2px}
.product-ui.product-workspace-panel .prod-workspace-transport {margin-top:auto;padding-top:17px}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(140px,.7fr);gap:10px 20px;width:100%}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-panel-brand {grid-column:1/-1;padding-bottom:8px}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-source-heading {grid-column:1/-1;margin:0}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-sentence-card {grid-column:1;margin:0}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-workspace-transport {grid-column:2;align-self:end;padding:0}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-transport {display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}

/* Main sentence demo: only word selection, mode, save and copy are interactive. */
.product-ui.product-lesson {padding:25px 26px 22px;background:var(--prod-paper);min-width:0;display:block}
.product-ui .prod-demo-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0}
.product-ui .prod-sample-switch {display:flex;gap:3px;background:var(--prod-low);border:1px solid var(--prod-line);border-radius:9px;padding:3px}
.product-ui .prod-sample-switch button {min-height:32px;padding:5px 10px;border:1px solid transparent;border-radius:6px;background:none;color:var(--prod-muted);font:inherit;font-size:11px;cursor:pointer}
.product-ui .prod-sample-switch button.active {border-color:var(--prod-selected-line);background:var(--prod-card);color:var(--prod-ink);box-shadow:0 1px 3px #302b2708}
.product-ui .prod-mode-menu {position:relative;z-index:4;font-size:11px}
.product-ui .prod-mode-menu summary {list-style:none;display:flex;align-items:center;gap:6px;min-height:38px;border:1px solid var(--prod-line);border-radius:9px;padding:5px 9px;background:var(--prod-low);cursor:pointer;color:var(--prod-ink)}
.product-ui .prod-mode-menu summary::-webkit-details-marker {display:none}
.product-ui .prod-mode-menu summary>.prod-icon:last-child {width:10px;height:10px}
.product-ui .prod-mode-options {position:absolute;right:0;top:calc(100% + 6px);width:min(260px,calc(100vw - 68px));padding:5px;border:1px solid var(--prod-line);border-radius:12px;background:var(--prod-card);box-shadow:0 8px 24px #302b2725}
.product-ui .prod-mode-options button {width:100%;display:block;padding:10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--prod-ink);text-align:left;cursor:pointer}
.product-ui .prod-mode-options button strong {display:block;font-size:12px;font-weight:550;line-height:1.5}
.product-ui .prod-mode-options button small {display:block;margin-top:3px;font-size:10px;line-height:1.5;color:var(--prod-muted)}
.product-ui .prod-mode-options button.active {background:var(--prod-selected);border-color:var(--prod-selected-line)}
.product-ui .prod-mode-options button:hover {background:var(--prod-selected)}
.product-ui .prod-demo-heading {margin:16px 1px 11px}
.product-ui .prod-demo-card {padding:9px 17px 17px}
.product-ui .prod-demo-card>.prod-original {font-size:23px;line-height:2;margin-top:5px;padding:0;background:none;letter-spacing:0}
.product-ui .prod-demo-card .word-button {appearance:none;display:inline;border:1px solid transparent;border-radius:6px;padding:2px 3px;margin:0;background:none;color:var(--prod-ink);font:inherit;line-height:inherit;letter-spacing:inherit;cursor:pointer;box-shadow:none;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.product-ui .prod-demo-card .word-button.selected {border-color:var(--prod-selected-line);background:var(--prod-selected);color:var(--prod-ink);box-shadow:none}
.product-ui .prod-demo-card .word-button:hover {background:var(--prod-selected)}
.product-ui .prod-demo-card .translation {font-size:13px;line-height:1.7;margin-top:8px;color:var(--prod-muted)}
.product-ui .prod-demo-card .lesson-hint {font-size:9px;line-height:1.6;color:var(--prod-muted);margin:0;max-width:155px}
.product-ui .prod-interactive-footer {gap:6px;margin-top:11px;padding-bottom:7px}
.product-ui .prod-interactive-footer .prod-tool {width:25px;height:30px}
.product-ui .prod-interactive-footer .prod-tool>.prod-icon {width:15px;height:15px}
.product-ui .prod-interactive-footer .prod-tool-separator {margin:0 2px}
.product-ui .prod-icon-button {display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:34px;min-height:34px;border:0;border-radius:6px;padding:7px;background:transparent;color:var(--prod-muted);cursor:pointer}
.product-ui .prod-icon-button[aria-pressed=true] {color:var(--prod-accent);background:var(--prod-selected)}
.product-ui .prod-icon-button[aria-pressed=true] .prod-icon {fill:var(--prod-selected-line)}
.product-ui .prod-icon-button:hover {background:var(--prod-selected)}
.product-ui button:focus-visible,.product-ui summary:focus-visible {outline:2px solid var(--prod-accent);outline-offset:3px}
.product-ui .prod-inline-explanation {border-top:1px solid var(--prod-line);margin-top:8px;padding-top:16px}
.product-ui .prod-explanation-head {display:flex;align-items:center;justify-content:space-between;gap:8px}
.product-ui .prod-breadcrumb {font-size:16px;font-weight:550;line-height:1.7;color:var(--prod-accent)}
.product-ui .word-type {color:var(--prod-muted);font-size:9px;border:1px solid var(--prod-line);border-radius:6px;padding:3px 5px;white-space:normal;text-align:right;background:none;flex:0 1 auto;line-height:1.4}
.product-ui .word-reading {margin:4px 0 0;color:var(--prod-muted);font-size:10px;line-height:1.7}
.product-ui .word-definition {color:var(--prod-ink);font-size:15px;font-weight:550;line-height:1.7;margin-top:12px}
.product-ui .word-context {color:var(--prod-muted);font-size:13px;line-height:1.8;margin-top:9px}
.product-ui .prod-example {background:var(--prod-low);border:1px solid var(--prod-line);border-radius:10px;padding:13px;margin-top:17px}
.product-ui .prod-example .example-label {font-size:8px;letter-spacing:.08em;color:var(--prod-muted);line-height:1.7}
.product-ui .prod-example>p {color:var(--prod-ink);font-size:15px;line-height:1.8;margin-top:8px}
.product-ui .prod-example>span:last-child {display:block;color:var(--prod-muted);font-size:11px;line-height:1.7;margin-top:6px}
.product-ui .prod-prepared-note {font-size:10px;line-height:1.7;color:var(--prod-muted);margin:14px 1px 0}
.product-ui .demo-feedback {color:var(--prod-muted);font-size:10px;line-height:1.6;min-height:16px;margin:7px 1px 0}

/* Product settings are visual samples, not active audio controls. */
.product-ui.product-voice-settings,.product-ui.product-shadow-settings {padding:29px 25px;min-height:405px;background:linear-gradient(140deg,#fffdf9,#f4f0e9);display:flex;justify-content:center;align-items:center;overflow:hidden;border-bottom:1px solid #eae3d9}
.product-ui .prod-settings-window,.product-ui .prod-shadow-window {width:100%;max-width:354px;background:var(--prod-card);border:1px solid var(--prod-selected-line);border-radius:14px;box-shadow:0 14px 45px #657b8712;overflow:hidden}
.product-ui .prod-settings-head {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;min-height:42px;border-bottom:1px solid var(--prod-line)}
.product-ui .prod-settings-head>strong {font-size:15px;font-weight:600}
.product-ui .prod-settings-head>.prod-tool {width:24px;height:24px}
.product-ui .prod-setting-row {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:14px 16px 0;font-size:12px}
.product-ui .prod-setting-row>span:last-child {display:flex;align-items:center;gap:8px;color:var(--prod-muted)}
.product-ui .prod-setting-row .prod-icon {width:12px;height:12px}
.product-ui .prod-setting-help {color:var(--prod-muted);font-size:10px;line-height:1.65;margin:6px 16px 0}
.product-ui .prod-setting-section {margin:16px}
.product-ui .prod-setting-section h4 {font-size:11px;font-weight:550;color:var(--prod-muted);margin:0 0 8px;line-height:1.4}
.product-ui .prod-provider-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.product-ui .prod-provider-grid>span {display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:6px 8px;font-size:10px;border:1px solid var(--prod-line);border-radius:8px;line-height:1.3}
.product-ui .prod-provider-grid>span.is-selected {border-color:var(--prod-selected-line);background:var(--prod-selected);color:var(--prod-accent)}
.product-ui .prod-provider-grid .prod-icon {width:12px;height:12px}
.product-ui .prod-setting-title {display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.product-ui .prod-setting-title>small {color:var(--prod-muted);font-size:9px}
.product-ui .prod-voice-choice {display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--prod-line);border-radius:8px;margin-top:6px;font-size:11px}
.product-ui .prod-voice-choice>span {flex:1}
.product-ui .prod-voice-choice strong {display:block;font-size:11px;font-weight:550}
.product-ui .prod-voice-choice small {display:block;font-size:9px;margin-top:2px;color:var(--prod-muted)}
.product-ui .prod-voice-choice>.prod-icon {width:14px;height:14px;color:var(--prod-muted)}
.product-ui .prod-voice-choice.is-selected {border-color:var(--prod-selected-line);background:var(--prod-selected)}
.product-ui .prod-setting-note {margin:10px 14px 13px;color:var(--prod-muted);font-size:9px;line-height:1.6;text-align:center}
.product-ui .prod-shadow-body {padding:13px 14px}
.product-ui .prod-shadow-count {font-size:12px;font-weight:550;margin:0 0 6px;line-height:1.5}
.product-ui .prod-shadow-body>.prod-setting-help {margin:0;font-size:10px}
.product-ui .prod-shadow-body>.prod-setting-section {margin:13px 0 11px}
.product-ui .prod-audio-source {display:grid;grid-template-columns:1fr 1fr;gap:6px}
.product-ui .prod-audio-source>span {display:flex;justify-content:center;align-items:center;gap:6px;padding:6px;border:1px solid var(--prod-line);border-radius:7px;font-size:10px;line-height:1.4}
.product-ui .prod-audio-source .prod-icon {width:13px;height:13px}
.product-ui .prod-audio-source>.is-selected {background:var(--prod-selected);border-color:var(--prod-selected-line)}
.product-ui .prod-rounds {display:grid;gap:5px}
.product-ui .prod-round {display:grid;grid-template-columns:36px minmax(0,1fr) 17px;align-items:center;gap:5px;padding:3px 0 5px;font-size:10px}
.product-ui .prod-round>.prod-icon {width:12px;height:12px;justify-self:center;color:var(--prod-muted)}
.product-ui .prod-speeds {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.product-ui .prod-speeds>span {display:flex;justify-content:center;align-items:center;min-height:30px;padding:3px 0;border:1px solid var(--prod-line);border-radius:6px;font-size:10px;line-height:1.4;color:var(--prod-muted)}
.product-ui .prod-speeds>.is-selected {border-color:var(--prod-selected-line);background:var(--prod-selected);color:var(--prod-ink)}
.product-ui .prod-add-play {display:flex;align-items:center;gap:6px;min-height:30px;margin-top:7px;color:var(--prod-muted);font-size:11px}
.product-ui .prod-add-play>.prod-icon {width:14px;height:14px}
.product-ui .prod-shadow-footer {border-top:1px solid var(--prod-line);padding:10px 14px 0}
.product-ui .prod-shadow-footer>span {display:block;background:var(--prod-ink);color:var(--prod-card);border:1px solid var(--prod-ink);border-radius:8px;min-height:32px;padding:7px 12px;text-align:center;font-size:11px;line-height:1.5}

@media(max-width:1000px) {
 .product-ui.product-workspace-panel .prod-original {font-size:18px}
 .product-ui.product-workspace-panel .prod-tool {width:20px;height:25px}
 .product-ui.product-workspace-panel .prod-tools>.prod-tool>.prod-icon {width:13px;height:13px}
 .product-ui.product-workspace-panel .prod-sentence-footer>small {flex-basis:100%}
 .product-ui.product-workspace-panel .prod-source-heading>strong {font-size:10px}
 .product-ui.product-workspace-panel .prod-picker-visual {font-size:9px;padding:4px;gap:3px}
 .product-ui.product-lesson {padding:22px 20px}
 .product-ui .prod-demo-card {padding-inline:14px}
 .product-ui .prod-demo-card>.prod-original {font-size:21px}
 .product-ui .prod-interactive-footer .lesson-hint {max-width:none;flex-basis:100%}
}
@media(max-width:700px) {
 .product-ui.product-lesson {padding:21px 18px 20px}
 .product-ui.product-lesson .prod-panel-brand {font-size:15px}
 .product-ui .prod-demo-card>.prod-original {font-size:21px;line-height:2.15}
 .product-ui .prod-demo-card .word-button {padding:2px}
 .product-ui .prod-sample-switch button {font-size:11px;padding:5px 9px;min-height:34px}
 .product-ui .prod-mode-menu summary {font-size:11px;min-height:42px}
 .product-ui .prod-demo-heading>strong {font-size:11px}
 .product-ui .prod-demo-heading>small {font-size:8px;max-width:94px}
 .product-ui .prod-demo-card .translation {font-size:12px}
 .product-ui .prod-icon-button {width:34px;height:36px;flex-basis:34px;min-height:36px}
 .product-ui .word-context {font-size:13px;line-height:1.85}
 .product-ui .prod-example>p {font-size:14px}
 .product-ui .prod-prepared-note,.product-ui .demo-feedback {font-size:10px}
 .product-ui.product-voice-settings,.product-ui.product-shadow-settings {padding:25px 20px;min-height:390px}
 .product-ui.product-workspace-panel .prod-panel-brand {font-size:10px;gap:5px;min-height:22px;padding-bottom:7px}
 .product-ui.product-workspace-panel .prod-brand-mode {padding-left:5px;gap:1px}
 .product-ui.product-workspace-panel .prod-panel-brand .prod-icon {width:11px;height:11px}
 .product-ui.product-workspace-panel .prod-panel-brand .prod-tool {width:18px;height:20px}
 .product-ui.product-workspace-panel .prod-brand-mode>.prod-icon:last-child {width:7px;height:7px}
 .product-ui.product-workspace-panel .prod-panel-tools {gap:0}
 .product-ui.product-workspace-panel .prod-source-heading {margin:10px 0 9px;gap:4px;flex-wrap:wrap}
 .product-ui.product-workspace-panel .prod-source-heading>strong {font-size:8px}
 .product-ui.product-workspace-panel .prod-picker-visual {font-size:7px;padding:3px 4px;border-radius:5px}
 .product-ui.product-workspace-panel .prod-picker-visual>.prod-icon:first-child {width:10px;height:10px}
 .product-ui.product-workspace-panel .prod-picker-visual>.prod-icon:last-child {width:7px;height:7px}
 .product-ui.product-workspace-panel .prod-sentence-card {padding:5px 8px 7px;border-radius:10px}
 .product-ui.product-workspace-panel .prod-sentence-head {min-height:19px;margin-bottom:5px;gap:3px}
 .product-ui.product-workspace-panel .prod-sentence-label {font-size:6px;gap:3px;letter-spacing:0}
 .product-ui.product-workspace-panel .prod-sentence-label>.prod-icon {width:10px;height:10px}
 .product-ui.product-workspace-panel .prod-time {font-size:6px}
 .product-ui.product-workspace-panel .prod-original {font-size:13px;line-height:1.9}
 .product-ui.product-workspace-panel .prod-translation {font-size:8px;line-height:1.6;margin-top:5px}
 .product-ui.product-workspace-panel .prod-sentence-footer {gap:2px;margin-top:6px}
 .product-ui.product-workspace-panel .prod-sentence-footer>small {font-size:6px}
 .product-ui.product-workspace-panel .prod-tools {gap:0}
 .product-ui.product-workspace-panel .prod-tools>.prod-tool {width:14px;height:20px}
 .product-ui.product-workspace-panel .prod-tools>.prod-tool>.prod-icon {width:10px;height:10px}
 .product-ui.product-workspace-panel .prod-tool-separator {height:11px;margin:0 1px}
 .product-ui.product-workspace-panel .prod-workspace-transport {padding-top:8px}
 .product-ui.product-workspace-panel .prod-transport {gap:0;padding:4px 0}
 .product-ui.product-workspace-panel .prod-transport>.prod-tool {width:18px;height:24px}
 .product-ui.product-workspace-panel .prod-transport>.prod-tool>.prod-icon {width:12px;height:12px}
 .product-ui.product-workspace-panel .prod-transport>.is-play {width:26px;height:26px}
 .custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel {grid-template-columns:minmax(0,1fr) 100px;gap:7px 10px}
 .custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-source-heading {margin:0;flex-wrap:nowrap}
 .custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-original {font-size:14px}
 .custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-panel-brand {padding-bottom:6px}
 .custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-transport {grid-template-columns:repeat(3,1fr)}
}
@media(max-width:370px) {
 .product-ui.product-lesson {padding:18px 14px}
 .product-ui .prod-demo-card {padding-inline:12px}
 .product-ui .prod-demo-card>.prod-original {font-size:19px}
 .product-ui .prod-interactive-footer .prod-tool {width:23px}
 .product-ui .prod-interactive-footer .prod-icon-button {width:32px;flex-basis:32px}
 .product-ui.product-voice-settings,.product-ui.product-shadow-settings {padding:21px 13px}
 .product-ui .prod-round {grid-template-columns:32px minmax(0,1fr) 13px;gap:3px;font-size:9px}
 .product-ui .prod-speeds {gap:2px}
 .product-ui .prod-speeds>span {font-size:9px}
 .product-ui .prod-audio-source>span {font-size:9px;gap:4px}
 .product-ui.product-workspace-panel .prod-tools>.prod-tool {width:12px}
 .product-ui.product-workspace-panel .prod-tools>.prod-tool>.prod-icon {width:9px;height:9px}
}
@media(prefers-reduced-transparency:reduce) {.product-ui .prod-settings-window,.product-ui .prod-shadow-window {backdrop-filter:none;background:var(--prod-card)}}
@media(prefers-contrast:more) {.product-ui {--prod-muted:#554a40;--prod-line:#b8aa99;--prod-selected-line:#89725f}}
/* The outer site preview owns placement; its inner product panel owns layout. */
.workspace-panel:has(>.product-ui) {display:block;min-width:0}
.custom-workspace[data-layout=bottom] .workspace-panel:has(>.product-ui) {display:block;grid-template-columns:none}

/* The product component owns its internal bottom-panel grid. */
.custom-workspace[data-layout=bottom] .workspace-panel{display:block}
.product-ui .demo-feedback:empty{display:none}

.product-ui.product-workspace-panel .prod-phone-break{display:block}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-sentence-card,
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-workspace-transport{grid-column:1/-1}
.custom-workspace[data-layout=bottom] .product-ui.product-workspace-panel .prod-transport{display:flex;width:100%;max-width:340px;margin-inline:auto}
@media(min-width:701px){.product-ui.product-voice-settings,.product-ui.product-shadow-settings{min-height:550px}}
/* Same-screen illustration: compact native sentence card. */
.landscape-lesson{padding:10px 8px;container-type:inline-size}
.landscape-lesson .same-native{display:flex;flex-direction:column;gap:5cqw;color:#302b27;font-family:var(--font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
.landscape-lesson .same-native-header{display:flex;align-items:center;justify-content:space-between;gap:4cqw;font-size:7cqw;font-weight:650;line-height:1.3}
.landscape-lesson .same-native-mode{display:flex;align-items:center;gap:3cqw;color:#72695e;font-size:6cqw;font-weight:500}
.landscape-lesson .same-native svg{display:block;width:8cqw;height:8cqw;flex:none}
.landscape-lesson .same-native-mode svg{width:7cqw;height:7cqw}
.landscape-lesson .same-native-card{padding:6cqw;border:1px solid #eae3d9;border-radius:9cqw;background:#fffefd;box-shadow:0 2px 6px #74665706}
.landscape-lesson .same-native-meta{display:flex;justify-content:space-between;align-items:center;gap:3cqw;color:#72695e;font-size:5.7cqw;line-height:1.4}
.landscape-lesson .same-native-index{display:flex;align-items:center;gap:3cqw}
.landscape-lesson .same-native-meta svg{width:6.5cqw;height:6.5cqw}
.landscape-lesson .same-native-original{margin-top:5cqw;font-size:9.5cqw;font-weight:540;line-height:1.85;letter-spacing:.015em}
.landscape-lesson .same-native-original mark{padding:1cqw 1.5cqw;border-radius:2cqw;background:#f3eadb;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.landscape-lesson .same-native-original rt{font-size:.48em;color:#8b7964;font-weight:400}
.landscape-lesson .same-native-translation{margin-top:4cqw;color:#72695e;font-size:6.6cqw;line-height:1.5}
.landscape-lesson .same-native-actions{display:flex;align-items:center;justify-content:flex-end;gap:6cqw;margin-top:5cqw;padding-top:4cqw;border-top:1px solid #eae3d9;color:#81766b}
.landscape-lesson .same-native-actions>span{display:flex;align-items:center;justify-content:center}

.landscape-lesson .same-native-card{padding:6cqw}
.landscape-lesson .same-native-original{margin-top:5cqw;font-size:8cqw;line-height:1.7}
.landscape-lesson .same-native-translation{margin-top:4cqw;font-size:5.5cqw;line-height:1.4}
.landscape-lesson .same-native-actions{margin-top:5cqw;padding-top:4cqw}
.landscape-lesson .same-native-actions svg{width:6.5cqw;height:6.5cqw}