/* Online multi-model settings experience. */
[hidden] { display: none !important; }
.page-intro { margin-bottom: 21px; }
.model-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-bottom: 21px; }
.model-picker { display: flex; flex-shrink: 0; gap: 6px; padding: 5px; background: #080e14; border: 1px solid #36414b; border-radius: 9px; }
.model-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 17px; border: 1px solid transparent; border-radius: 5px; color: #9ca8b5; transition: background .15s,color .15s; }
.model-option:hover { color: #fff; background: #1e2933; }
.model-option.selected { color: #f5eee7; border-color: #9d673b; background: #34261b; }
.model-code { font-size: 18px; font-weight: 600; letter-spacing: .5px; }
.model-type { font-size: 12px; }
.model-new { color: #ffc78f; font-size: 9px; background: #ff97291c; border: 1px solid #7b5430; border-radius: 3px; padding: 2px 5px; }
#model-description { color: #a3adb8; font-size: 12px; margin: 0; }
.model-memory { margin-left: auto; color: #7d8c9b; font-size: 11px; }
.guide-heading h2 { white-space: normal; font-size: 18px; }
.guide-heading .text-button { flex-shrink: 0; }
.demo-notes p { font-size: 12px; line-height: 1.9; margin: 0 0 10px; }
.temperature-control { min-width: 115px; }
.temperature-control > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.temperature-control label { color: #aab2bc; font-size: 12px; }
.temperature-control output { font-size: 16px; color: #d5e9ed; font-variant-numeric: tabular-nums; white-space: nowrap; }
.temperature-control small { font-size: 11px; color: #aab2bc; }
.temperature-control input { accent-color: #7bb9bb; }
body[data-model="ykd"] .simulation-bar { display: grid; grid-template-columns: minmax(260px,1fr) 150px 132px 170px; gap: 24px; }
body[data-model="ykd"] .simulation-bar h2, body[data-model="ykd"] .simulation-bar > p { display: none; }
body[data-model="ykd"] .output-reading { padding-left: 18px; }
/* Transparent product photo; LCD and hit areas match the original pixel positions. */
body[data-model="ykd"] .device { width: clamp(230px,18.8vw,278px); aspect-ratio: 505 / 1306; overflow: hidden; background: transparent; border-radius: 15px; box-shadow: none; }
body[data-model="ykd"] .device-photo { width: 215.0495%; height: 110.8729%; left: -56.6337%; top: -4.9005%; filter: none; }
body[data-model="ykd"] .screen { left: 22.3762%; top: 32.6187%; width: 55.6436%; height: 21.4395%; border-radius: 1.5%; }
body[data-model="ykd"] .hardware-key { top: 58.9587%; width: 15.8416%; }
body[data-model="ykd"] .key-ok { left: 15.4455%; }
body[data-model="ykd"] .key-up { left: 33.0693%; }
body[data-model="ykd"] .key-down { left: 50.6931%; }
body[data-model="ykd"] .key-back { left: 68.5149%; }
.hardware-key.suggested { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent), 0 0 18px color-mix(in srgb, var(--green) 35%, transparent); animation-name: key-glow-green; }
.hardware-key.suggested:hover, .hardware-key.suggested.pressed { background: color-mix(in srgb, var(--green) 12%, transparent); }
@keyframes key-glow-green { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 10%, transparent), 0 0 24px color-mix(in srgb, var(--green) 55%, transparent); } }
.temperature-label { position: absolute; top: 2.5%; left: 17%; font-size: 6.7cqw; color: #e4f2ed; line-height: 1; }
body[data-model="ykd"] .screen-body .alarm-label { font-size: 6.5cqw; top: 2.5%; }
@media(min-width:1600px) { body[data-model="ykd"] .device { width: 288px; } }
@media(max-width:1250px) {
  .model-memory { display: none; }
  body[data-model="ykd"] .device { width: 245px; }
  body[data-model="ykd"] .simulation-bar { grid-template-columns: minmax(200px,1fr) 125px 125px 155px; gap: 15px; }
}
@media(max-width:950px) {
  body[data-model="ykd"] .device { width: 250px; }
  body[data-model="ykd"] .simulation-bar { grid-template-columns: 1fr 150px; gap: 18px; }
  body[data-model="ykd"] .output-reading { border-left: 0; padding-left: 0; }
  body[data-model="ykd"] .pause-button { min-height: 42px; }
  .model-bar { gap: 12px; }
  #model-description { flex-basis: 100%; }
}
@media(max-width:600px) {
  .page-intro { margin-bottom: 16px; }
  .page-intro p { font-size: 12px; line-height: 1.7; }
  .model-bar { padding-bottom: 15px; gap: 10px; }
  .model-picker { width: 100%; }
  .model-option { flex: 1; justify-content: center; padding: 8px 7px; gap: 7px; min-height: 42px; }
  .model-code { font-size: 17px; }.model-type { font-size: 11px; }.model-new { font-size: 8px; padding: 2px 3px; }
  #model-description { font-size: 10px; }
  body[data-model="ykd"] .primary-panel .device { width: 105px; height: 105px; aspect-ratio: 1; background: #020605; border-radius: 8px; box-shadow: none; }
  body[data-model="ykd"] .primary-panel .screen { inset: 0; width: 100%; height: 100%; border-radius: 8px; }
  body[data-model="ykd"] .settings-panel .device { width: 290px; max-width: 100%; }
  body[data-model="ykd"] .simulation-bar { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  body[data-model="ykd"] .flow-range { grid-column: 1 / -1; width: 100%; }
  body[data-model="ykd"] .temperature-control { grid-column: 1; }
  body[data-model="ykd"] .pause-button { grid-column: 2; width: 100%; padding: 9px; min-width: 0; }
  body[data-model="ykd"] .output-reading { grid-column: 1 / -1; padding: 11px 0 0; }
}

/* English uses longer labels; preserve readable device and guide layouts. */
html[lang="en"] body[data-page="experience"] .panel-heading { flex-wrap: wrap; align-items: flex-start; }
html[lang="en"] body[data-page="experience"] .panel-heading h2 { font-size: clamp(12px, 1.05vw, 16px); white-space: normal; line-height: 1.4; }
html[lang="en"] body[data-page="experience"] .guide-heading { align-items: flex-start; }
html[lang="en"] body[data-page="experience"] .guide-heading h2 { font-size: 17px; line-height: 1.35; }
html[lang="en"] body[data-page="experience"] .guide-heading .text-button { white-space: normal; max-width: 76px; text-align: right; }
html[lang="en"] body[data-page="experience"] .exercise strong { font-size: 13px; line-height: 1.4; }
html[lang="en"] body[data-page="experience"] .exercise small { font-size: 10px; line-height: 1.5; }
html[lang="en"] body[data-page="experience"] .saved-strip > div { flex-wrap: wrap; gap: 4px 10px; }
html[lang="en"] body[data-page="experience"] .device-caption { line-height: 1.5; }
html[lang="en"] body[data-page="experience"] .reference-notes summary { line-height: 1.5; }
.screen-body.english .lcd-info .muted { font-size: 5.9cqw; line-height: 1.6; }
@media (max-width:600px) {
  html[lang="en"] body[data-page="experience"] .page-intro { align-items: flex-start; gap: 12px; }
  html[lang="en"] body[data-page="experience"] .page-intro .quiet-button { flex-shrink: 0; max-width: 95px; white-space: normal; font-size: 11px; }
  html[lang="en"] body[data-page="experience"] .model-option { flex-wrap: wrap; gap: 3px 7px; }
  html[lang="en"] body[data-page="experience"] .model-type { font-size: 10px; }
  html[lang="en"] body[data-page="experience"] .exercise strong { font-size: 10px; }
  html[lang="en"] body[data-page="experience"] .exercise small { font-size: 9px; }
  html[lang="en"] body[data-page="experience"] .primary-panel .panel-heading { max-width: 165px; }
  html[lang="en"] body[data-page="experience"] .settings-panel .panel-heading h2 { font-size: 13px; }
  html[lang="en"] body[data-page="experience"] .guide-heading h2 { font-size: 15px; }
}