/* Keycurio v22 — original hardware-inspired product workspace. */
:root {
  color-scheme: light;
  --ink: #171719;
  --muted: #6c6c6e;
  --quiet: #666668;
  --paper: #ffffff;
  --panel: #ffffff;
  --soft: #f1f1f3;
  --line: #e0e0e2;
  --line-strong: #c3c3c5;
  --accent: #df1648;
  --accent-hover: #b90d38;
  --accent-soft: #fff0f4;
  --warning: #855317;
  --warning-soft: #fbf3e5;
  --danger: #a33d36;
  --glow: .5;
  --radius: 14px;
  --content: 1320px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select, summary, [tabindex] { outline-offset: 4px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #68686a; }
button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1.4; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:hover:not(:disabled) { background: #f5f5f7; border-color: #99999b; }
button:disabled { cursor: not-allowed; color: #919193; border-color: #e3e3e5; background: #f2f2f4; }
button.primary { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:disabled { color: #838385; background: #e6e6e8; border-color: #e6e6e8; }
button.text { min-height: 36px; padding: 7px 2px; border-color: transparent; background: transparent; color: var(--muted); font-size: 12px; }
button.text:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--accent); }
button.text:disabled { color: #909092; background: transparent; }
button.compact { white-space: nowrap; }
button.full-width { width: 100%; }
button svg, .workspace-tabs svg, .device-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button.icon-button { width: 40px; min-width: 40px; padding: 9px; }
input:not([type=checkbox]):not([type=range]):not([type=file]), select { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid #c5c5c7; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.4; }
select { padding-right: 30px; }
input:disabled, select:disabled { color: #8c8c8e; background: #f4f4f6; border-color: #e1e1e3; cursor: not-allowed; }
input::placeholder { color: #737375; opacity: 1; }
input[type=checkbox] { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
input[type=range] { display: block; width: 100%; min-height: 24px; margin: 10px 0 0; accent-color: var(--accent); }
label { display: block; margin: 17px 0 8px; color: #525254; font-size: 12px; font-weight: 600; line-height: 1.6; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; font-weight: 650; letter-spacing: -.6px; line-height: 1.25; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.25px; line-height: 1.4; }
h3 { font-size: 14px; font-weight: 600; line-height: 1.5; }
p { color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
:lang(zh-CN) h1, :lang(zh-CN) h2 { letter-spacing: .02em; }
:lang(zh-CN) p { line-height: 1.8; }
a { color: inherit; }
small, .small { display: block; color: var(--quiet); font-size: 12px; line-height: 1.7; }
svg { flex-shrink: 0; }
.app-shell { min-height: 100dvh; padding: 0 32px; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: 100%; max-width: var(--content); min-height: 66px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.brand-mark { font-size: 25px; font-weight: 720; letter-spacing: -1.1px; line-height: 1; }
.brand-mark > span { font-weight: 450; }
.brand-symbol { display: grid; grid-template-columns: 10px 10px; gap: 3px; transform: rotate(-7deg); }
.brand-symbol i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); box-shadow: inset 0 -2px 0 #0002; }
.brand-symbol i:last-child { grid-column: 1 / -1; width: 23px; background: #afafb1; }
.brand-descriptor { border-left: 1px solid var(--line-strong); padding-left: 16px; font-size: 12px; color: var(--muted); }
.language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; background: #ededef; }
.language-switch a { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 12px; border-radius: 5px; text-decoration: none; font-size: 12px; color: #606062; }
.language-switch a[aria-current=true] { background: #fff; color: #343436; box-shadow: 0 1px 3px #26332b13; font-weight: 600; }
.language-switch a:hover { color: var(--accent); }
#languageSuggestion { flex-basis: 100%; margin: -6px 0 10px; text-align: right; font-size: 11px; }
.page-heading, .connection-card, .experience-bar, .workspace, #message, .statusbar { width: 100%; max-width: var(--content); margin-left: auto; margin-right: auto; min-width: 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 0 18px; }
.site-intro { min-width: 0; }
.site-intro p { margin-top: 7px; font-size: 12px; letter-spacing: .015em; }
.independent-note { font-size: 11px; padding-bottom: 1px; }
.connection-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.topbar { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 13px 18px; }
.device-symbol { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; color: #58585a; background: #f0f0f2; border: 1px solid #e4e4e6; border-radius: 10px; }
.device-symbol svg { width: 27px; height: 27px; }
.device-identity { min-width: 0; }
.device-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.device-heading h2 { font-size: 14px; font-weight: 600; }
#status { display: inline-flex; align-items: center; gap: 6px; color: #6c6c6e; background: #f1f1f3; border: 1px solid #e5e5e7; border-radius: 20px; padding: 3px 8px; white-space: nowrap; font-size: 10px; line-height: 1.3; }
#status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #979799; }
#status.connected { color: #525254; background: #f1f1f3; border-color: #e5e5e7; }
#status.connected::before { background: #6f6f71; }
#deviceInfo { margin-top: 6px; font-size: 11px; line-height: 1.5; }
.connection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.connection-actions > .text { margin-right: 4px; font-size: 11px; }
body.device-connected #connect, body:not(.device-connected) #disconnect { display: none; }
.initialization-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 18px; border-top: 1px solid #e9e9eb; background: #fafafc; color: var(--muted); font-size: 11px; }
.connection-indicator { width: 5px; height: 5px; background: #929294; border-radius: 50%; flex-shrink: 0; }
#initStatus { line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
#initProgress { order: 5; flex-basis: 100%; appearance: none; height: 3px; border: 0; margin-top: 5px; background: #e5e5e7; }
#initProgress::-webkit-progress-bar { background: #e5e5e7; border-radius: 2px; }
#initProgress::-webkit-progress-value { background: var(--accent); border-radius: 2px; }
#initProgress::-moz-progress-bar { background: var(--accent); }
#cancelInit { margin-left: auto; min-height: 24px; padding: 2px 8px; font-size: 11px; color: var(--accent); }
.local-label { margin-left: auto; font-size: 10px; white-space: nowrap; }
.local-label span { padding: 0 7px; }
#message:empty, #message[data-tone=quiet] { display: none; }
#message { margin-top: 12px; padding: 10px 15px; border: 1px solid #e1e1e3; border-radius: 8px; background: #f0f0f2; color: #58585a; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
#message[data-tone=error] { color: #873b31; background: #fbefeb; border-color: #eed7ce; }
.experience-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0 14px; }
.experience-bar h2 { font-size: 15px; }
#nextStep { margin-top: 4px; font-size: 12px; }
.experience-switch { flex-shrink: 0; display: flex; gap: 2px; padding: 4px; border: 1px solid #dddddf; border-radius: 9px; background: #ededef; }
.experience-switch > button { min-width: 98px; min-height: 34px; padding: 7px 15px; border: 0; border-radius: 6px; background: transparent; color: #626264; font-size: 12px; }
.experience-switch > button[aria-pressed=true] { color: #38383a; background: #fff; box-shadow: 0 1px 4px #23392b12; font-weight: 650; }
.experience-switch > button:hover:not(:disabled) { background: #f8f8fa; }
.workspace { display: grid; grid-template-columns: minmax(0,1fr) 396px; align-items: start; gap: 20px; padding-bottom: 32px; }
.workspace-navigation { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; min-width: 0; }
.workspace-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: 1; min-width: 0; border-bottom: 1px solid var(--line-strong); }
.workspace-tabs.advanced-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
.workspace-tabs > button { position: relative; display: flex; justify-content: flex-start; min-width: 0; min-height: 45px; padding: 11px 14px 13px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: #676769; font-size: 13px; font-weight: 500; white-space: normal; text-align: left; }
.workspace-tabs > button:hover:not(:disabled) { background: #eeeef0; border: 0; }
.workspace-tabs > button[aria-selected=true] { color: #474749; background: #eeeef0; font-weight: 650; }
.workspace-tabs > button[aria-selected=true]::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--accent); }
.workspace-tabs svg { width: 17px; height: 17px; }
.skip-settings { margin-left: auto; white-space: nowrap; }
.inspector { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 3px 8px #26332b03; }
.inspector-body { min-width: 0; }
.workspace-panel { outline-offset: -4px; min-width: 0; }
.property-section { min-width: 0; padding: 25px; border-bottom: 1px solid var(--line); }
.property-section:last-child { border-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.section-intro { margin: 6px 0 14px; font-size: 12px; }
.verified, .subtle-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 450; color: #666668; white-space: nowrap; }
.verified::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #747476; }
.subtle-tag { color: var(--muted); }
.state-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 6px; font-size: 10px; color: #676769; background: #f1f1f3; }
.state-pill[data-state=editing] { color: #865115; background: #fcf0d7; }
.state-pill[data-state=applied], .state-pill[data-state=read] { color: #525254; background: #f0f0f2; }
.state-line { margin: 12px 0 17px; padding: 8px 12px; border: 1px solid #e4e4e6; border-radius: 8px; background: #f6f6f8; font-size: 12px; line-height: 1.7; }
.result { margin-top: 11px; font-size: 12px; line-height: 1.7; }
.result:empty { display: none; }
.lighting-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.lighting-controls { min-width: 0; }
.lighting-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.lighting-fields label { margin-top: 0; }
.brightness-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.brightness-steps > button { display: flex; flex-direction: column; gap: 5px; min-height: 60px; padding: 8px 4px; border-color: #dbdbdd; background: #fbfbfd; }
.brightness-steps b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.brightness-steps span { font-size: 10px; font-weight: 450; }
.brightness-steps button[aria-pressed=true] { color: #444446; border-color: #8a8a8c; background: #efeff1; box-shadow: inset 0 0 0 1px #8a8a8c; }
.brightness-steps button:disabled { color: #8e8e90; background: #f3f3f5; border-color: #e4e4e6; box-shadow: none; }
body:not(.simple-mode) [data-simple-only] { display: none; }
.consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: 12px; font-weight: 450; line-height: 1.7; }
.speed-editor { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 2px; }
.range-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.range-heading label { margin: 0; }
.range-heading output { padding: 2px 8px; border-radius: 5px; background: var(--soft); color: #5e5e60; font-size: 12px; }
.range-labels { display: flex; justify-content: space-between; margin-top: 3px; color: #707072; font-size: 11px; }
.mode-preview { display: flex; flex-direction: column; justify-content: space-between; gap: 15px; min-width: 0; padding: 16px 18px; border-radius: 10px; background: #353537; color: #f3f3f5; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .07em; color: #d5d5d7; }
.preview-led { width: 5px; height: 5px; border-radius: 50%; background: #e2e2e4; }
.preview-keys { display: flex; align-items: center; justify-content: center; gap: 6px; opacity: var(--preview-light,.8); padding: 4px 0; }
.preview-keys > i { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #fff; border-bottom: 4px solid #bababc; border-radius: 6px; background: #f9f9fb; color: #4f4f51; font: 500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow: 0 4px 6px #15201530,0 0 12px #e8f5d817; }
.mode-preview b { display: block; font-size: 12px; font-weight: 550; line-height: 1.5; color: #f3f3f5; }
.mode-preview small { margin-top: 4px; font-size: 10px; line-height: 1.5; color: #ceced0; }
.mode-preview.breathing .preview-keys { animation: preview-breath var(--preview-period,4s) ease-in-out infinite; }
@keyframes preview-breath { 50% { opacity: calc(var(--preview-light,.8)*.35); } }
.lighting-apply-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.draft-notice { min-width: 0; padding: 11px 12px; border-radius: 7px; background: #f4f4f6; color: #636365; font-size: 12px; line-height: 1.6; }
.draft-notice[data-dirty=true] { background: #fcf2dd; color: #845217; }
#applyLightingChanges { justify-content: space-between; gap: 20px; }
#lightingApplyResult { font-size: 11px; color: #6b6b6d; }
.context-details { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
summary { cursor: pointer; color: #5c5c5e; font-size: 12px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
summary::marker { color: #88888a; font-size: 10px; }
details p { margin: 10px 0; font-size: 12px; line-height: 1.8; }
.preset-grid, .file-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.preset-grid > button, .file-actions > button { padding: 10px 8px; font-size: 12px; }
.per-key-editor > .text { margin: 5px 0 8px; }
.inline-notice { margin: 14px 0; padding: 12px 14px; border: 1px solid #ebddc3; border-radius: 8px; background: var(--warning-soft); color: var(--warning); font-size: 12px; line-height: 1.8; }
.inline-notice p { color: inherit; font-size: inherit; }
.inline-notice button { margin-top: 7px; }
#startRemapPlan, #setRemap { margin-top: 12px; }
.remap-edit { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }
.field-connector { width: 26px; margin: 8px auto -7px; text-align: center; color: #727274; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.split-actions { justify-content: space-between; margin-top: 7px; }
.split-actions > .text { font-size: 11px; }
.layout-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0 16px; }
.layout-option { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 17px 16px; border-radius: 10px; background: #fbfbfd; border-color: #d2d2d4; text-align: left; }
.layout-option strong { font-size: 16px; font-weight: 600; }
.layout-option > span:last-child { font-size: 10px; font-weight: 450; line-height: 1.5; color: #6f6f71; }
.layout-option:not(:disabled):hover { background: #f3f3f5; border-color: #838385; }
.layout-mini-keys { display: flex; gap: 5px; padding-bottom: 6px; }
.layout-mini-keys kbd { display: grid; place-items: center; width: 36px; height: 33px; border: 1px solid #d8d8da; border-bottom: 3px solid #ccccce; border-radius: 5px; background: #fff; color: #606062; font: 500 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#applyMacSwap .layout-mini-keys kbd { font-size: 18px; }
.layout-option:disabled .layout-mini-keys { opacity: .6; }
#macPlanNotice, #macApplyResult { font-size: 11px; }
.modifier-test { background: #f9f9fb; }
.modifier-test .small { margin-top: 10px; font-size: 11px; }
#modifierTest { min-height: 58px; background: #fff; border-style: dashed; text-align: center; font-size: 13px; }
#modifierTest:focus { border-style: solid; border-color: #848486; }
.effect-confirmation { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: 16px; }
.effect-confirmation > button { font-size: 11px; }
.event-composer { padding: 16px; border: 1px solid var(--line); border-radius: 10px; margin: 20px 0; background: #f9f9fb; }
.event-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.event-composer .subtle-tag { font-size: 9px; }
#appendMacroEvent { margin-top: 12px; }
.event-heading { margin: 16px 0 8px; }
#macroEvents { counter-reset: macro-event; margin: 0; padding: 0; min-height: 76px; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: #fcfcfe; overflow: hidden; }
#macroEvents:empty::after { content: "—"; display: block; padding: 24px 12px; text-align: center; color: #707072; }
#macroEvents > li { counter-increment: macro-event; padding: 11px 12px; border-bottom: 1px solid var(--line); color: #5d5d5f; font: 11px/1.7 ui-monospace,"SFMono-Regular",Consolas,monospace; overflow-wrap: anywhere; }
#macroEvents > li:last-child { border-bottom: 0; }
#macroEvents > li::before { content: counter(macro-event,decimal-leading-zero); display: inline-block; width: 26px; color: #7e7e80; font-size: 10px; }
#removeMacroAssignment { margin-top: 7px; }
.file-actions { margin: 12px 0; }
.label-note { font-size: 10px; font-weight: 400; color: var(--muted); }
.danger-details > summary { color: #8c4336; }
/* A continuous keyboard specimen and its selected-key / draft context. */
.canvas-pane { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.keyboard-stage { padding: 24px 22px 18px; background: #f0f0f2; }
.canvas-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.eyebrow { color: #5d5d5f; font-size: 10px; font-weight: 500; letter-spacing: .09em; }
.canvas-heading h2 { margin-top: 6px; color: #363638; font-size: 18px; font-weight: 600; letter-spacing: -.25px; }
.canvas-heading h2 > span { display: inline-block; margin-left: 7px; padding: 2px 5px; border: 1px solid #c2c2c4; border-radius: 4px; color: #68686a; font-size: 9px; font-weight: 450; letter-spacing: .06em; vertical-align: 2px; }
.keyboard-center { display: flex; flex-direction: column; min-width: 0; padding: 18px 0 12px; }
.keyboard-scroll { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 19px; scrollbar-width: thin; scrollbar-color: #9c9c9e #e8e8ea; }
.keyboard-shell { width: 100%; min-width: 704px; max-width: 1080px; margin: auto; padding: 13px 14px 9px; border: 1px solid #c8c8ca; border-bottom: 6px solid #aaaaac; border-radius: 10px; background: linear-gradient(130deg,#e4e4e6,#efeff1 48%,#dadadc); box-shadow: 0 2px 0 #98989a,0 12px 20px -10px #2d422638,inset 0 1px 0 #fff; }
.keyboard-top { display: flex; justify-content: space-between; align-items: center; padding: 0 3px 11px; color: #58585a; font-size: 7px; letter-spacing: .1em; }
.keyboard-top b { font-size: 8px; font-weight: 650; color: #676769; }
.keyboard-top > span { display: flex; align-items: center; gap: 6px; }
.keyboard-top i { width: 3px; height: 3px; border-radius: 50%; background: #6d6d6f; }
#keyboard { display: flex; flex-direction: column; gap: 5px; }
.key-row { display: flex; gap: 4px; }
.key-row:first-child { margin-bottom: 7px; }
.key { position: relative; flex: var(--w); display: grid; place-items: center; min-width: 0; min-height: 0; height: clamp(33px,2.8vw,41px); padding: 0 1px 3px; border: 1px solid #bdbdbf; border-bottom: 4px solid #c2c2c4; border-radius: 4px; background: linear-gradient(165deg,#fff,#f2f2f4); color: #515153; font-size: 10px; font-weight: 550; line-height: 1; box-shadow: 0 1px 1px #4e63422b,inset 0 1px 0 #fff; user-select: none; }
.key:disabled { opacity: 1; background: #f6f6f8; border-color: #c4c4c6; border-bottom-color: #c0c0c2; color: #737375; }
.key-gap { flex: var(--w); min-width: 0; pointer-events: none; }
.key.editable { cursor: pointer; }
.key.editable:hover:not(:disabled) { border-color: #8c8c8e; background: #fff; color: #404042; }
.key.led-on { background: #fff; color: #434345; box-shadow: 0 1px 1px #526f3d30,0 0 calc(2px + var(--glow)*5px) #fff9,inset 0 1px 0 #fff; }
.key.led-off { background: #ceced0; color: #4b4b4d; border-color: #aaaaac; border-bottom-color: #a3a3a5; box-shadow: 0 1px 1px #526f3d30; }
.key.selected { color: #4c4c4e; border: 1px solid #6c6c6e; border-bottom: 4px solid #6c6c6e; background: #f3f3f5; box-shadow: 0 0 0 1px #767678,inset 0 1px 0 #fff; }
.key.remapped::after { content: ""; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; background: #606062; border-radius: 50%; }
.keyboard-bottom { display: flex; align-items: center; justify-content: space-between; margin: 9px 3px 0; color: #58585a; font-size: 6px; letter-spacing: .09em; }
.keyboard-bottom > span:first-child { font-size: 7px; font-weight: 600; }
.canvas-caption { display: flex; justify-content: space-between; gap: 12px; color: #6c6c6e; font-size: 11px; line-height: 1.6; }
.canvas-caption-side { flex-shrink: 0; white-space: nowrap; font-size: 10px; }
.canvas-bottom { border-top: 1px solid #dddddf; padding-top: 11px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#workspaceHint { font-size: 11px; color: #69696b; }
.canvas-coordinate { white-space: nowrap; font: 9px/1.5 ui-monospace,monospace; color: #5d5d5f; }
.keyboard-scroll-hint { display: none; font-size: 11px; color: #5c5c5e; margin: 0 0 12px; }
.canvas-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px; padding: 18px 22px; border-top: 1px solid var(--line); }
.selected-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.context-label { color: #6e6e70; font-size: 10px; }
#selectedKeyLabel { font: 600 12px/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace; color: #454547; padding: 3px 7px; background: #f2f2f4; border-radius: 5px; }
.mapping-arrow { color: #767678; }
#selectedKeyTarget { color: #68686a; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.canvas-legend { display: flex; flex-wrap: wrap; gap: 11px; color: #717173; font-size: 9px; }
.canvas-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.canvas-legend i { width: 7px; height: 7px; border: 1px solid #9d9d9f; border-radius: 2px; background: #fff; }
.canvas-legend .legend-off { background: #b0b0b2; }
.canvas-legend .legend-draft { width: 5px; height: 5px; border-radius: 50%; background: #676769; border-color: #676769; }
.draft-overview { padding: 17px 22px; border-top: 1px solid var(--line); }
.draft-overview h2 { font-size: 12px; }
.draft-lines { margin-top: 8px; font-size: 11px; color: #676769; line-height: 1.8; overflow-wrap: anywhere; }
.draft-lines > div { display: inline-block; margin: 6px 6px 0 0; padding: 3px 7px; border: 1px solid #e0e0e2; border-radius: 5px; background: #f9f9fb; font: 10px/1.6 ui-monospace,"SFMono-Regular",Consolas,monospace; }
.device-readback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px; border-top: 1px solid var(--line); padding: 14px 22px; background: #fbfbfd; }
#deviceSummary { flex: 1 1 240px; font-size: 10px; color: #6f6f71; }
.readback-note { font-size: 9px; line-height: 1.6; color: #717173; }
.mapping-apply-bar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 32px; align-items: start; padding: 23px 25px; border: 1px solid #d4d4d6; border-radius: var(--radius); background: #f3f3f5; }
.write-preparation h2 { font-size: 15px; }
.write-preparation .result { font-size: 11px; margin-top: 7px; }
#remapGate { margin-top: 7px; font-size: 11px; }
.write-confirmation > p { margin-bottom: 11px; font-size: 12px; }
.write-confirmation > small { margin-top: 8px; font-size: 10px; }
#applyRemap { justify-content: space-between; }
/* Daily controls share one compact panel; advanced work keeps its full editor. */
.simple-mode .page-heading, .simple-mode .connection-card, .simple-mode .experience-bar,
.simple-mode .workspace, .simple-mode #message, .simple-mode .statusbar { max-width: 1160px; }
.simple-mode .canvas-pane, .simple-mode .skip-settings, .simple-mode #deviceInfo,
.simple-mode #refreshDevice, .simple-mode #reconnect, .simple-mode .initialization-bar .local-label,
.simple-mode .support-content .diagnostics { display: none; }
.simple-mode .workspace { display: block; }
.simple-mode .workspace-navigation { margin-bottom: 20px; }
.simple-mode .workspace-tabs { width: 100%; }
.simple-mode .property-section { padding: 24px 28px; }
.simple-mode .lighting-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 28px; }
.simple-mode .lighting-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
.simple-mode #brightnessLevel { display: none; }
.simple-mode .lighting-apply-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; }
.simple-mode #applyLightingChanges { width: auto; min-width: 170px; }
.simple-mode .draft-notice { background: transparent; padding: 2px 0; }
.simple-mode .draft-notice[data-dirty=true] { color: #855218; }
.simple-mode .context-details { display: none; }
.simple-mode #panelMac { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.simple-mode #panelMac > .property-section { border-bottom: 0; }
.simple-mode #panelMac > .modifier-test { border-left: 1px solid var(--line); }
.simple-mode .mode-preview { padding: 18px 22px; }
.simple-mode .preview-keys { padding: 12px 0; }
.simple-mode .preview-keys > i { width: 49px; height: 49px; }
/* Help and disclosures expand in normal page flow, never over the editor. */
.statusbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; padding: 17px 0 25px; border-top: 1px solid var(--line); color: #6f6f71; }
.statusbar-note { margin-right: auto; font-size: 10px; }
.version { white-space: nowrap; font: 10px/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace; color: #707072; }
.version > span { padding: 0 4px; }
.statusbar > details > summary { display: flex; align-items: center; gap: 7px; min-height: 34px; list-style: none; color: #646466; font-size: 11px; }
.statusbar > details > summary::-webkit-details-marker { display: none; }
.statusbar > details > summary::before { content: "+"; color: #737375; font: 15px/1 ui-monospace,monospace; }
.statusbar > details[open] > summary::before { content: "−"; }
.statusbar > details > summary svg { display: none; }
.statusbar > details[open] { flex-basis: 100%; order: 4; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); }
.privacy-content, .support-content { max-width: 1160px; padding: 15px 0; color: var(--ink); }
.privacy-content p, .support-content p { font-size: 12px; line-height: 1.85; }
.privacy-content h2, .support-content h2 { font-size: 15px; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.privacy-content a, .support-content a { color: #4e4e50; text-underline-offset: 3px; }
.support-content .section-heading > a { font-size: 11px; }
.support-content details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.support-content details > summary { font-size: 12px; }
#browserSupport { margin: 10px 0 16px; }
.diagnostics summary > span { display: inline-block; font-size: 10px; font-weight: 400; margin-left: 7px; }
.diagnostics .actions { margin: 14px 0; }
pre { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f0f0f2; color: #5d5d5f; font: 11px/1.7 ui-monospace,"SFMono-Regular",Consolas,monospace; }
#keymapRows { max-height: 220px; overflow: auto; padding-top: 10px; color: #5c5c5e; font: 11px/1.8 ui-monospace,monospace; }
.usage-guide ol { padding-left: 22px; }
.usage-guide li { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.faq h3 { font-size: 13px; margin: 19px 0 6px; }
@media (max-width: 1120px) {
 .workspace { grid-template-columns: minmax(0,1fr); }
 .workspace-panel:not(#panelMac) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 #panelKeys, #panelMacros { display: block; }
 .workspace-panel > .property-section + .property-section { border-left: 1px solid var(--line); }
 .workspace-panel > .property-section { border-bottom: 0; }
 .workspace-tabs > button { justify-content: center; }
 .simple-mode .workspace-panel { display: block; }
 .simple-mode #panelMac { display: grid; }
}
@media (max-width: 900px) {
 .app-shell { padding: 0 24px; }
 .brand-descriptor { display: none; }
 .page-heading { align-items: flex-start; }
 .connection-actions > .text { flex-basis: 100%; justify-content: flex-end; order: 2; margin: 0; }
 .keyboard-scroll-hint { display: block; }
 .workspace-navigation { gap: 8px; }
 .workspace-navigation > .workspace-tabs { flex-basis: 100%; }
 .skip-settings { font-size: 11px; }
 .simple-mode .lighting-grid { gap: 22px; }
 .simple-mode .property-section { padding: 25px; }
 .layout-option { padding: 15px 12px; }
 .mapping-apply-bar { gap: 24px; }
}
@media (max-width: 640px) {
 .app-shell { padding: 0 16px; }
 .masthead { min-height: 65px; gap: 10px; }
 .brand { gap: 7px; }
 .brand-mark { font-size: 23px; }
 .language-switch a { min-height: 30px; padding: 4px 10px; }
 #languageSuggestion { font-size: 10px; margin: -1px 0 10px; text-align: left; }
 .page-heading { flex-direction: column; gap: 7px; padding: 22px 0 17px; }
 h1 { font-size: 24px; }
 .site-intro p { margin-top: 6px; font-size: 11px; }
 .independent-note { font-size: 10px; }
 .topbar { flex-wrap: nowrap; gap: 12px; padding: 14px; }
 .device-symbol { display: none; }
 .device-symbol svg { width: 24px; height: 24px; }
 .device-identity { flex: 1; }
 .device-heading { gap: 5px 8px; }
 .device-heading h2 { font-size: 13px; }
 #status { font-size: 9px; padding: 3px 7px; }
 .connection-actions { flex-basis: auto; flex-shrink: 0; margin-left: auto; gap: 6px; max-width: 45%; }
 .connection-actions > .primary { width: auto; padding: 10px 12px; font-size: 12px; gap: 6px; }
 .connection-actions > .primary svg { width: 16px; height: 16px; }
 body:not(.device-connected) #refreshDevice { display: none; }
 .connection-actions > .text { flex-basis: auto; justify-content: flex-start; margin-right: auto; order: 0; }
 .connection-actions #disconnect { margin-left: auto; font-size: 12px; }
 .device-connected .topbar { flex-wrap: nowrap; }
 .device-connected .device-symbol { display: none; }
 .device-connected .connection-actions { flex-basis: auto; flex-shrink: 0; }
 .device-connected .connection-actions #reconnect { display: none; }
 .device-connected #deviceInfo { display: none; }
 .initialization-bar { padding: 9px 15px; font-size: 10px; }
 .local-label { display: none; }
 #initStatus { flex: 1; }
 #message { margin-top: 10px; padding: 10px 12px; font-size: 11px; }
 .experience-bar { flex-wrap: wrap; gap: 12px; padding: 20px 0 14px; }
 .experience-bar > div:first-child { display: none; }
 .experience-bar h2 { font-size: 14px; }
 #nextStep { font-size: 11px; }
 .experience-switch { width: 100%; }
 .experience-switch > button { flex: 1; min-width: 0; min-height: 35px; font-size: 12px; }
 .workspace { gap: 14px; padding-bottom: 24px; }
 .workspace-tabs > button { min-height: 44px; justify-content: center; gap: 7px; padding: 10px 6px 12px; font-size: 12px; }
 .workspace-tabs svg { width: 16px; height: 16px; }
 .workspace-tabs.advanced-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 3px; }
 .simple-mode .workspace-navigation { margin-bottom: 15px; }
 .property-section, .simple-mode .property-section { padding: 22px 19px; }
 h2 { font-size: 16px; }
 .section-intro { font-size: 12px; margin-bottom: 17px; }
 .simple-mode .lighting-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .simple-mode .lighting-fields { gap: 17px; }
 .simple-mode .mode-preview, .mode-preview { padding: 14px; gap: 12px; }
 .simple-mode .mode-preview { display: grid; grid-template-columns: 106px minmax(0,1fr); align-items: center; }
 .simple-mode .preview-heading { display: none; }
 .simple-mode .preview-keys { padding: 4px 0; }
 .simple-mode .preview-keys { gap: 3px; }
 .simple-mode .preview-keys > i { width: 24px; height: 29px; border-bottom-width: 3px; border-radius: 4px; font-size: 9px; }
 .preview-heading { font-size: 9px; }
 .mode-preview b { font-size: 11px; }
 .mode-preview small { font-size: 9px; }
 .simple-mode .lighting-apply-row { grid-template-columns: minmax(0,1fr); gap: 13px; margin-top: 19px; }
 .simple-mode #applyLightingChanges { width: 100%; min-width: 0; }
 button { min-height: 43px; }
 input:not([type=checkbox]):not([type=range]):not([type=file]), select { min-height: 44px; font-size: 16px; }
 .state-line { font-size: 11px; }
 .simple-mode #panelMac, .workspace-panel:not(#panelMac) { display: block; }
 .workspace-panel > .property-section { border-bottom: 1px solid var(--line); }
 .workspace-panel > .property-section:last-child { border-bottom: 0; }
 .workspace-panel > .property-section + .property-section, .simple-mode #panelMac > .modifier-test { border-left: 0; border-top: 1px solid var(--line); }
 .layout-options { gap: 9px; }
 .layout-option { padding: 15px 12px; min-height: 140px; }
 .layout-option strong { font-size: 16px; }
 .layout-option > span:last-child { font-size: 9px; }
 .layout-mini-keys kbd { width: 32px; height: 31px; }
 #modifierTest { font-size: 12px; }
 .effect-confirmation { align-items: stretch; flex-direction: column; gap: 1px; }
 .effect-confirmation > button { font-size: 11px; }
 .keyboard-stage { padding: 19px 14px 16px; }
 .canvas-heading h2 { font-size: 17px; }
 .keyboard-center { padding-top: 12px; }
 .canvas-caption { font-size: 10px; }
 .canvas-caption-side, .canvas-coordinate { display: none; }
 .canvas-context { padding: 15px; gap: 12px; }
 .selected-key .context-label { flex-basis: 100%; }
 .canvas-legend { gap: 12px; }
 .draft-overview { padding: 16px 15px; }
 .device-readback { padding: 13px 15px; }
 .mapping-apply-bar { grid-template-columns: minmax(0,1fr); padding: 21px 19px; gap: 18px; }
 .write-confirmation { padding-top: 17px; border-top: 1px solid #d7d7d9; }
 .statusbar { gap: 2px 16px; padding: 15px 0 22px; }
 .statusbar-note { flex-basis: 100%; font-size: 9px; margin-bottom: 7px; }
 .statusbar > details > summary { font-size: 10px; }
 .version { margin-left: auto; font-size: 9px; }
 .support-content .section-heading { align-items: flex-start; }
}
@media (max-width: 360px) {
 .app-shell { padding: 0 12px; }
 .brand-symbol { display: none; }
 .brand-mark { font-size: 22px; }
 .language-switch a { padding-left: 10px; padding-right: 10px; }
 .site-intro p { font-size: 10px; }
 .property-section, .simple-mode .property-section { padding-left: 16px; padding-right: 16px; }
 .lighting-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .layout-option { padding-left: 10px; padding-right: 10px; }
 .layout-mini-keys { gap: 4px; }
 .layout-mini-keys kbd { width: 29px; }
 .section-heading .subtle-tag { white-space: normal; }
 .version { flex-basis: 100%; margin: 5px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Product composition: white / ink / cherry. No fixed navigation or overlays. */
:root { --line: #e5e5e9; --line-strong: #c5c5cc; --muted: #5d5d68; --quiet: #62626d; --soft: #f5f5f7; --radius: 18px; --content: 1320px; }
body { background: #fff; }
button { border-radius: 7px; font-weight: 600; transition: color .18s,background-color .18s,border-color .18s,transform .18s,box-shadow .18s; }
button:hover:not(:disabled) { border-color: #95959e; background: #f7f7f9; }
button.primary { box-shadow: 0 4px 12px #df164818; }
button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px #df16482b; }
button.primary:disabled { box-shadow: none; color: #777780; background: #ebebef; border-color: #ebebef; }
:focus-visible { outline-color: #ca1745; }
input:not([type=checkbox]):not([type=range]):not([type=file]), select { border-color: #ccccd3; background: #fff; border-radius: 7px; }
input:disabled, select:disabled { color: #898990; background: #f6f6f8; border-color: #e4e4e9; }
input::placeholder { color: #686874; }
h1,h2,h3 { color: #171719; }
h2 { font-weight: 650; }
label { color: #35353f; }
.masthead { min-height: 74px; border-bottom: 1px solid #ededf0; gap: 18px; }
.brand-mark { color: #111114; font-size: 28px; font-weight: 780; letter-spacing: -1.5px; }
.brand-mark > span { font-weight: 500; }
.brand-symbol { transform: rotate(-10deg); grid-template-columns: 9px 9px; gap: 3px; }
.brand-symbol i { width: 9px; height: 9px; background: #df1648; box-shadow: none; }
.brand-symbol i:last-child { width: 21px; background: #df1648; }
.brand-descriptor { color: #686871; font-size: 11px; border-left: 1px solid #dddde2; }
.masthead-index { margin-left: auto; color: #6d6d76; font: 10px/1.5 ui-monospace,"SFMono-Regular",monospace; letter-spacing: .09em; }
.language-switch { margin-left: 12px; background: #fff; border-color: #e2e2e7; border-radius: 30px; padding: 3px; }
.language-switch a { border-radius: 25px; color: #686871; font-size: 11px; padding: 5px 12px; }
.language-switch a[aria-current=true] { background: #171719; color: #fff; box-shadow: none; }
.language-switch a:hover:not([aria-current=true]) { color: #c31640; }
.page-heading { align-items: center; padding: 25px 0 24px; gap: 30px; }
.site-intro .product-eyebrow { font: 10px/1.5 ui-monospace,"SFMono-Regular",monospace; font-weight: 550; letter-spacing: .1em; color: #686871; margin: 0 0 9px; }
h1 { font-size: clamp(30px,3.4vw,48px); font-weight: 700; letter-spacing: -1.8px; line-height: 1.1; }
h1 em { display: inline-block; font-style: normal; color: #df1648; margin-left: .15em; }
:lang(zh-CN) h1 { letter-spacing: -.04em; font-weight: 650; }
.site-intro .model-caption { margin-top: 11px; color: #5e5e68; font-size: 11px; letter-spacing: .015em; }
.heading-aside { text-align: right; flex-shrink: 0; }
.edition-mark { color: #171719; font: 500 47px/.9 ui-monospace,"SFMono-Regular",monospace; letter-spacing: -4px; }
.edition-mark > span { display: block; margin: 7px 0 12px; font-size: 8px; letter-spacing: .18em; }
.independent-note { font-size: 10px; color: #696973; }
.connection-card { background: #171719; border: 0; border-radius: 11px; color: #fff; }
.topbar { min-height: 67px; padding: 14px 20px; gap: 13px; }
.device-symbol { background: #29292e; color: #fff; border: 1px solid #45454f; border-radius: 8px; width: 37px; height: 37px; }
.device-symbol svg { width: 24px; height: 24px; }
.device-heading h2 { color: #fff; font-size: 14px; }
#status { background: #29292f; color: #c9c9d2; border-color: #45454f; font-size: 9px; }
#status::before { background: #a9a9b5; }
#status.connected { background: #3c2630; color: #ffcfdd; border-color: #805063; }
#status.connected::before { background: #ff7096; }
#deviceInfo { color: #c2c2cc; font-size: 10px; }
.connection-actions > button:not(.primary) { color: #eeeeF3; background: transparent; border-color: #51515b; }
.connection-actions > button.text { border-color: transparent; color: #c5c5d0; }
.connection-actions > button:not(.primary):hover:not(:disabled) { background: #303037; border-color: #858591; }
.connection-actions > button:disabled { color: #858590; border-color: #35353d; }
.connection-actions > .primary { padding-left: 19px; padding-right: 19px; border-radius: 6px; }
.initialization-bar { background: #232327; border-color: #38383e; color: #c5c5cf; padding: 7px 20px; font-size: 10px; }
.connection-indicator { background: #ff7096; }
#cancelInit { color: #ffb9ce; }
.experience-bar { padding: 20px 0 13px; }
.experience-bar h2 { font-size: 12px; font-weight: 650; }
#nextStep { font-size: 10px; margin-top: 4px; }
.experience-switch { background: #f4f4f7; border: 1px solid #e5e5ea; padding: 3px; border-radius: 6px; }
.experience-switch > button { color: #666671; font-size: 11px; min-width: 89px; min-height: 30px; border-radius: 4px; }
.experience-switch > button[aria-pressed=true] { background: #171719; color: #fff; box-shadow: none; }
.experience-switch > button:hover:not(:disabled):not([aria-pressed=true]) { background: #e9e9ee; }
.workspace-navigation { gap: 18px; }
.workspace-tabs { display: flex; gap: 25px; border-color: #dedee4; }
.workspace-tabs.advanced-tabs { display: flex; }
.workspace-tabs > button { flex: 0 1 auto; min-height: 44px; padding: 10px 3px 14px; color: #676773; background: transparent; border-radius: 0; gap: 8px; }
.workspace-tabs > button:hover:not(:disabled) { color: #171719; background: transparent; }
.workspace-tabs > button[aria-selected=true] { color: #cf123e; background: transparent; font-weight: 650; }
.workspace-tabs > button[aria-selected=true]::after { height: 3px; bottom: -1px; background: #df1648; }
.workspace-tabs svg { width: 16px; height: 16px; }
.skip-settings { color: #55555f; }
.inspector { border-color: #e1e1e7; box-shadow: none; border-radius: 13px; }
.section-heading h2 { font-size: 20px; letter-spacing: -.6px; }
.state-pill { border: 1px solid #e1e1e7; border-radius: 4px; color: #5b5b67; background: #f5f5f8; font: 9px/1.4 ui-monospace,"SFMono-Regular",monospace; }
.state-pill[data-state=editing] { color: #a62041; background: #fff0f4; border-color: #f3c4d0; }
.state-pill[data-state=applied],.state-pill[data-state=read] { color: #3e4955; background: #edf1f5; border-color: #d8e0e7; }
.state-line { border: 0; border-left: 2px solid #bfc1ca; border-radius: 0; background: #f6f6f8; color: #555561; padding: 8px 11px; }
.section-intro { color: #666670; }
.brightness-steps { gap: 8px; }
.brightness-steps > button { min-height: 64px; border: 1px solid #dadae1; border-bottom: 3px solid #c7c7d0; background: #fff; border-radius: 6px; gap: 6px; }
.brightness-steps b { font-size: 23px; font-weight: 550; }
.brightness-steps span { color: #62626f; font-size: 9px; }
.brightness-steps button:hover:not(:disabled) { transform: translateY(-2px); background: #fff8fa; border-color: #e999ad; }
.brightness-steps button[aria-pressed=true] { color: #ce1643; border-color: #df1648; background: #fff1f5; box-shadow: none; }
.brightness-steps button[aria-pressed=true] span { color: #ad1a3e; }
.brightness-steps button:disabled { color: #909099; background: #fafafb; border-color: #e2e2e8; }
.brightness-steps button:disabled span { color: #91919c; }
.mode-preview { position: relative; isolation: isolate; overflow: hidden; background: #fce9ef; color: #262027; border-radius: 8px; min-height: 230px; padding: 22px; }
.mode-preview::after { content: ""; position: absolute; z-index: -1; width: 270px; height: 270px; border: 1px solid #d7144230; border-radius: 50%; left: 25%; top: 8%; box-shadow: 0 0 0 30px #d7144205,0 0 0 60px #d7144204; }
.preview-heading { color: #9d2542; font: 10px/1.4 ui-monospace,"SFMono-Regular",monospace; letter-spacing: .07em; z-index: 1; }
.preview-led { background: #cf1947; }
.preview-product-mark { color: #bd1b43; display: block; font: 600 32px/.86 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -2px; opacity: .85; }
.preview-product-mark > span { display: block; font-size: 70px; letter-spacing: -6px; }
.preview-keys { position: relative; display: flex; justify-content: center; gap: 6px; padding: 12px 0 20px; transform: perspective(700px) rotateX(18deg) rotateZ(-11deg); transform-style: preserve-3d; filter: drop-shadow(0 24px 13px #6f203a26); opacity: calc(.68 + var(--preview-light,.8)*.32); }
.preview-keys > i { position: relative; display: grid; place-items: center; width: 50px; height: 53px; font: 500 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #484851; border: 1px solid #fff; border-bottom: 9px solid #b9b6be; border-radius: 7px; background: linear-gradient(145deg,#fff 15%,#f6f4f7 70%,#e1dfe6); box-shadow: inset 0 0 0 3px #fafafa,inset 0 -9px 14px #b4adb338,0 3px 0 #938d99,0 8px 0 #c1bac8; }
.preview-keys > i:first-child { transform: translateY(-8px); }
.preview-keys > i:last-child { transform: translateY(8px); }
.preview-spec { color: #9d2542; font: 8px/1.5 ui-monospace,"SFMono-Regular",monospace; letter-spacing: .12em; }
.mode-preview b { color: #38212c; font-size: 11px; font-weight: 600; }
.mode-preview small { color: #775360; font-size: 9px; }
.mode-preview.breathing .preview-keys { animation: preview-breath var(--preview-period,4s) ease-in-out infinite; }
@keyframes preview-breath { 50% { opacity: .48; } }
.draft-notice { color: #535361; background: #f5f5f8; }
.draft-notice[data-dirty=true] { color: #a31b3e; background: #fff0f4; }
#lightingApplyResult { color: #686872; }
.simple-mode .workspace-navigation { margin-bottom: 20px; }
.simple-mode #lighting { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); grid-template-rows: auto auto auto auto auto auto; column-gap: 32px; padding: 0; }
.simple-mode #lighting > .section-heading { grid-column: 2; grid-row: 1; margin: 29px 30px 0 0; }
.simple-mode #lighting > .section-intro { grid-column: 2; grid-row: 2; margin: 7px 30px 17px 0; font-size: 12px; }
.simple-mode #lighting > .state-line { grid-column: 2; grid-row: 3; margin: 0 30px 18px 0; }
.simple-mode .lighting-grid { display: contents; }
.simple-mode .lighting-controls { grid-column: 2; grid-row: 4; margin-right: 30px; }
.simple-mode .lighting-fields { gap: 16px; }
.simple-mode .mode-preview { grid-column: 1; grid-row: 1 / 7; border-radius: 0; padding: 29px 30px; display: flex; justify-content: flex-start; gap: 17px; min-height: 455px; }
.simple-mode .preview-product-mark { font-size: 60px; margin-top: 10px; }
.simple-mode .preview-product-mark > span { font-size: 122px; letter-spacing: -10px; }
.simple-mode .preview-keys { padding: 12px 0 24px; gap: 9px; margin: -35px -2px 0; }
.simple-mode .preview-keys > i { width: clamp(52px,5.3vw,76px); height: clamp(57px,5.5vw,82px); border-bottom-width: 12px; border-radius: 9px; font-size: 20px; }
.simple-mode .preview-spec { margin-top: 15px; }
.simple-mode .preview-copy { margin-top: auto; padding-top: 13px; border-top: 1px solid #dfb9c4; }
.simple-mode .mode-preview b { font-size: 12px; }
.simple-mode .mode-preview small { font-size: 10px; margin-top: 5px; }
.simple-mode .lighting-apply-row { grid-column: 2; grid-row: 5; margin: 20px 30px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 17px; }
.simple-mode .draft-notice { flex: 1 1 150px; font-size: 11px; color: #555560; }
.simple-mode .draft-notice[data-dirty=true] { color: #b11a40; background: transparent; }
.simple-mode #applyLightingChanges { min-width: 162px; }
.simple-mode #lightingApplyResult { grid-column: 2; grid-row: 6; margin: 12px 30px 25px 0; font-size: 10px; }
.simple-mode #panelMac { grid-template-columns: 1.15fr 1fr; }
.simple-mode #panelMac > .property-section:first-child { background: #fff; padding: 30px; }
.simple-mode #panelMac > .modifier-test { background: #f6f6f8; padding: 30px; }
.layout-options { gap: 14px; margin: 24px 0 20px; }
.layout-option { position: relative; min-height: 183px; padding: 20px; border: 1px solid #dcdce3; border-radius: 9px; background: #fff; overflow: hidden; }
.layout-option::after { content: "↗"; position: absolute; right: 16px; top: 14px; color: #555562; font-size: 20px; }
.layout-option strong { font-size: 20px; letter-spacing: -.5px; }
.layout-option > span:last-child { color: #5d5d6b; }
.layout-mini-keys { padding: 7px 0 14px; gap: 6px; transform: rotate(-5deg); }
.layout-mini-keys kbd { width: 40px; height: 39px; color: #3c3c46; border-color: #d9d6df; border-bottom: 5px solid #c5c2cc; background: #fafafb; box-shadow: 0 4px 5px #17171912; }
#applyMacSwap { color: #b81941; border-color: #efafbf; background: #fff3f6; }
#applyMacSwap .layout-mini-keys kbd { color: #bd1540; background: #fff; }
.layout-option:not(:disabled):hover { transform: translateY(-3px); border-color: #df1648; background: #fff6f8; box-shadow: 0 8px 18px #4020300a; }
.layout-option:disabled { background: #f7f7f9; border-color: #e2e2e7; color: #8e8e98; }
.layout-option:disabled::after { color: #9e9ea7; }
.layout-option:disabled > span:last-child { color: #909099; }
#applyMacSwap:disabled { color: #a18b94; border-color: #eadde2; background: #faf3f5; }
#modifierTest { border-style: solid; border-color: #bfbfc9; border-radius: 7px; background: #fff; }
#modifierTest:focus { border-color: #df1648; background: #fff; }
.modifier-output { border: 0; border-left: 2px solid #c7c7d0; border-radius: 0; background: #eeeef2; color: #50505f; }
.keyboard-stage { background: #171719; padding: 27px 24px 21px; }
.canvas-pane { border-color: #dddde3; border-radius: 13px; }
.eyebrow { color: #bbbcc8; font: 9px/1.5 ui-monospace,"SFMono-Regular",monospace; letter-spacing: .1em; }
.canvas-heading h2 { color: #fff; font-size: 23px; margin-top: 8px; letter-spacing: -.7px; }
.canvas-heading h2 > span { color: #ffbacd; border-color: #704151; background: #3c2630; }
.keyboard-center { padding-top: 23px; }
.keyboard-scroll { scrollbar-color: #80808f #33333c; }
.keyboard-shell { background-color: #c8c7ce; border-color: #eeedf0; border-bottom-color: #86838b; background: linear-gradient(145deg,#dedde2,#fcfbfd 46%,#c8c7ce); background-color: #c8c7ce; box-shadow: 0 3px 0 #57545f,0 18px 20px -8px #0008,inset 0 1px 0 #fff; }
.keyboard-top,.keyboard-bottom,.keyboard-top b { color: #4b4955; }
.keyboard-top i { background: #df1648; }
.key { background-color: #eeecf2; color: #393743; border-color: #ceccd5; border-bottom-color: #b5b1bf; background: linear-gradient(150deg,#fff,#eeecf2); background-color: #eeecf2; box-shadow: 0 1px 1px #25203333,inset 0 1px 0 #fff; }
.key:disabled { color: #77727f; background: #f7f5fa; border-color: #d4d0dc; border-bottom-color: #bdb8c7; }
.key.editable:hover:not(:disabled) { color: #b3153b; background: #fff3f6; border-color: #df1648; }
.key.led-on { color: #403648; background: #fff; box-shadow: 0 0 8px #fff8,inset 0 1px 0 #fff; }
.key.led-off { color: #4c4557; background: #c8c4d3; border-color: #a9a1b8; border-bottom-color: #9c93ad; }
.key.selected { color: #fff; border-color: #c61743; border-bottom-color: #9d1036; background: #df1648; box-shadow: 0 0 0 1px #ff8aac,0 4px 10px #9a153633; }
.key.remapped::after { background: #df1648; }
.canvas-caption,.canvas-bottom p,#workspaceHint,.canvas-coordinate,.keyboard-scroll-hint { color: #c5c3d0; }
.canvas-bottom { border-color: #42404c; }
.canvas-caption-side { color: #b5b1c3; }
.canvas-context { background: #fafafd; border-color: #e1dfe7; }
.context-label,#selectedKeyTarget,.canvas-legend,.draft-lines,#deviceSummary,.readback-note { color: #5b5867; }
.selected-key strong { color: #b71940; background: #fff0f4; }
.mapping-arrow { color: #c21a45; }
.canvas-legend .legend-draft { background: #df1648; border-color: #df1648; }
.canvas-legend .legend-off { background: #aca5b9; }
.device-readback { background: #f7f7fa; }
.mapping-apply-bar { border-color: #dcd9e3; background: #f6f5f9; border-radius: 12px; }
summary,.statusbar > details > summary,.statusbar > details > summary::before { color: #54505f; }
summary:hover { color: #bc163f; }
.privacy-content a,.support-content a { color: #b9153e; }
pre { background: #f4f3f7; color: #4d475b; }
.statusbar { border-top: 1px solid #e4e2e8; padding-top: 21px; }
@media (max-width:1120px) {
 .simple-mode #lighting { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); column-gap: 25px; }
 .simple-mode .mode-preview { padding: 28px 24px; }
 .simple-mode .preview-keys { gap: 6px; margin-left: -6px; margin-right: -6px; }
 .simple-mode #lighting > .section-heading,.simple-mode #lighting > .section-intro,.simple-mode #lighting > .state-line,.simple-mode .lighting-controls,.simple-mode .lighting-apply-row,.simple-mode #lightingApplyResult { margin-right: 25px; }
 .simple-mode .lighting-apply-row { display: block; }
 .simple-mode #applyLightingChanges { margin-top: 13px; width: 100%; }
 .simple-mode .preview-keys > i { width: 48px; height: 56px; }
}
@media (max-width:900px) {
 .masthead-index { display: none; }
 .language-switch { margin-left: auto; }
 .heading-aside .edition-mark { display: none; }
 .heading-aside { max-width: 160px; }
 .workspace-tabs { gap: 25px; }
 .simple-mode .workspace-navigation > .workspace-tabs { flex-basis: auto; }
 .simple-mode #panelMac > .property-section:first-child,.simple-mode #panelMac > .modifier-test { padding: 25px; }
 .layout-option { padding: 15px; min-height: 173px; }
 .layout-mini-keys kbd { width: 33px; height: 36px; }
}
@media (max-width:640px) {
 .app-shell { padding: 0 18px; }
 .masthead { min-height: 68px; gap: 10px; }
 .brand-mark { font-size: 25px; }
 .brand-symbol { grid-template-columns: 8px 8px; gap: 2px; }
 .brand-symbol i { width: 8px; height: 8px; }
 .brand-symbol i:last-child { width: 18px; }
 .language-switch { padding: 2px; }
 .language-switch a { min-height: 28px; font-size: 10px; padding: 4px 9px; }
 .page-heading { padding: 23px 0 20px; gap: 9px; align-items: flex-start; }
 .site-intro .product-eyebrow { font-size: 8px; margin-bottom: 9px; }
 h1 { font-size: 36px; letter-spacing: -1.5px; line-height: 1.03; }
 h1 em { display: block; margin: 2px 0 0; }
 :lang(zh-CN) h1 { font-size: 33px; line-height: 1.15; letter-spacing: -.05em; }
 .site-intro .model-caption { margin-top: 12px; font-size: 9px; letter-spacing: 0; }
 .heading-aside { max-width: none; text-align: left; }
 .independent-note { font-size: 9px; }
 .topbar { padding: 15px; min-height: 72px; gap: 10px; }
 .device-heading h2 { font-size: 12px; }
 #status { font-size: 8px; }
 .connection-actions { max-width: 40%; }
 .connection-actions > .primary { padding: 10px 12px; font-size: 11px; }
 .connection-actions #disconnect { font-size: 11px; }
 .initialization-bar { padding: 8px 15px; font-size: 9px; }
 .experience-bar { padding: 18px 0 10px; }
 .experience-switch { width: 100%; border-radius: 6px; padding: 3px; }
 .experience-switch > button { min-height: 30px; font-size: 11px; }
 .workspace-tabs,.workspace-tabs.advanced-tabs { display: flex; flex-wrap: wrap; gap: 0 20px; }
 .workspace-tabs > button { flex: 0 1 auto; min-height: 42px; font-size: 11px; padding: 10px 0 12px; gap: 6px; }
 .workspace-tabs.advanced-tabs > button { flex-basis: calc(50% - 10px); justify-content: flex-start; }
 .workspace-tabs svg { width: 15px; height: 15px; }
 .simple-mode .workspace-navigation { margin-bottom: 17px; }
 .simple-mode #lighting { display: flex; flex-direction: column; padding: 22px 20px 20px; gap: 0; }
 .simple-mode #lighting > .section-heading { margin: 0; order: 0; }
 .section-heading h2 { font-size: 21px; }
 .simple-mode #lighting > .section-intro { margin: 7px 0 17px; order: 1; font-size: 11px; }
 .simple-mode #lighting > .state-line { margin: 0 0 18px; order: 2; font-size: 10px; }
 .simple-mode .lighting-controls { margin: 0; order: 3; }
 .simple-mode .lighting-fields { gap: 17px; }
 .simple-mode .mode-preview { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-height: 165px; margin: 23px -20px 0; padding: 17px 20px; gap: 10px 15px; order: 4; }
 .simple-mode .mode-preview::after { width: 160px; height: 160px; top: -30px; left: 12%; }
 .simple-mode .preview-heading { display: none; }
 .simple-mode .preview-product-mark { position: absolute; top: 17px; left: 19px; margin: 0; font-size: 21px; letter-spacing: -1px; }
 .simple-mode .preview-product-mark > span { font-size: 51px; letter-spacing: -4px; }
 .simple-mode .preview-keys { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 160px; margin: 20px -8px 0; padding: 18px 0; gap: 4px; }
 .simple-mode .preview-keys > i { flex: 0 0 33px; width: 33px; height: 40px; border-bottom-width: 6px; border-radius: 5px; font-size: 11px; box-shadow: inset 0 0 0 1px #fff,0 3px 0 #a39ca9,0 5px 0 #c1bac8; }
 .simple-mode .preview-copy { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; padding: 0; border: 0; }
 .simple-mode .mode-preview b { font-size: 10px; }
 .simple-mode .mode-preview small { font-size: 9px; line-height: 1.55; }
 .simple-mode .preview-spec { display: none; }
 .simple-mode .lighting-apply-row { margin: 18px 0 0; order: 5; padding-top: 0; border-top: 0; }
 .simple-mode .draft-notice { font-size: 11px; }
 .simple-mode #applyLightingChanges { margin-top: 12px; min-height: 45px; border-radius: 6px; }
 .simple-mode #lightingApplyResult { margin: 12px 0 0; order: 6; font-size: 9px; }
 .brightness-steps > button { min-height: 66px; }
 .brightness-steps b { font-size: 24px; }
 .brightness-steps span { font-size: 9px; }
 .simple-mode #panelMac { display: block; }
 .simple-mode #panelMac > .property-section:first-child,.simple-mode #panelMac > .modifier-test { padding: 23px 20px; }
 .layout-options { gap: 10px; margin-top: 23px; }
 .layout-option { min-height: 173px; padding: 15px 13px; }
 .layout-option strong { font-size: 19px; }
 .layout-option::after { top: 10px; right: 10px; font-size: 17px; }
 .layout-option > span:last-child { font-size: 9px; }
 .keyboard-stage { padding: 22px 14px 18px; }
 .canvas-heading h2 { font-size: 21px; }
 .canvas-caption { font-size: 10px; }
 .keyboard-scroll-hint { font-size: 10px; }
 .property-section { padding: 23px 20px; }
 .mode-preview:not(.simple-mode .mode-preview) { min-height: 250px; }
 .statusbar { padding-top: 18px; }
 .statusbar-note { font-size: 9px; }
}
@media (max-width:360px) {
 .app-shell { padding: 0 13px; }
 .brand-symbol { display: grid; }
 .brand-mark { font-size: 24px; }
 h1 { font-size: 32px; }
 :lang(zh-CN) h1 { font-size: 31px; }
 .site-intro .model-caption { font-size: 8px; }
 .topbar { padding: 13px; gap: 8px; }
 .connection-actions > .primary { padding: 9px 10px; }
 .device-heading h2 { font-size: 11px; }
 .simple-mode #lighting { padding-left: 16px; padding-right: 16px; }
 .simple-mode .mode-preview { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; grid-template-columns: 1.05fr 1fr; gap: 10px; }
 .simple-mode .preview-keys { width: 137px; gap: 3px; }
 .simple-mode .preview-keys > i { flex-basis: 29px; width: 29px; height: 37px; }
 .state-pill { font-size: 8px; }
 .section-heading h2 { font-size: 19px; }
 .layout-mini-keys kbd { width: 29px; height: 34px; }
 .layout-option { padding: 15px 10px; }
}