:root{color:#242120;font-synthesis:none;text-rendering:optimizelegibility;letter-spacing:0;--page:#f4f1ef;--surface:#fbfaf9;--surface-strong:#fff;--text:#242120;--muted:#77706d;--line:#ded8d4;--line-strong:#c8c0bc;--accent:#d88996;--accent-soft:#f5dfe2;--accent-text:#7a3c49;--button:#f6f3f1;--shadow:#4939321f;background:#f4f1ef;font-family:Microsoft YaHei UI,PingFang SC,Noto Sans CJK SC,system-ui,sans-serif}:root[data-theme=dark]{color:#f2eeeb;--page:#171615;--surface:#201e1d;--surface-strong:#272422;--text:#f2eeeb;--muted:#a9a09b;--line:#393533;--line-strong:#504946;--accent:#e39aa6;--accent-soft:#4b2d33;--accent-text:#ffdce1;--button:#2a2725;--shadow:#00000059;background:#171615}*{box-sizing:border-box}html{background:var(--page);min-height:100%}body{min-height:100dvh;color:var(--text);background:var(--page);margin:0}button,select{color:inherit;font:inherit;letter-spacing:0}button:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, white);outline-offset:2px}.app-shell{background:var(--page);grid-template-columns:minmax(0,1fr) clamp(340px,27vw,410px);min-height:100dvh;display:grid}.preview-column{grid-template-rows:minmax(0,1fr);min-width:0;min-height:100dvh;padding:16px clamp(18px,2.4vw,36px) 20px;display:grid}.preview-stage{grid-template-rows:minmax(0,1fr);align-items:center;min-height:0;padding-top:5px;display:grid}.segmented-control{border:1px solid var(--line);background:var(--button);border-radius:999px;grid-template-columns:repeat(3,minmax(76px,1fr));width:min(100%,316px);padding:3px;display:grid}.segment-button{min-height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:650;transition:background-color .16s,color .16s}.segment-button:hover{color:var(--accent-text);background:var(--accent-soft)}.segment-button[aria-pressed=true]{color:#fff;background:var(--accent);box-shadow:0 5px 14px var(--shadow)}.keyboard-canvas{aspect-ratio:1500/938;isolation:isolate;width:min(100%,1320px);box-shadow:0 28px 80px var(--shadow);background:#efefef;margin:auto;position:relative;overflow:hidden}.canvas-controls{z-index:20;pointer-events:none;position:absolute;inset:0}.canvas-brand{z-index:20;pointer-events:none;width:clamp(136px,21vw,280px);position:absolute;top:clamp(12px,2vw,26px);left:50%;transform:translate(-50%)}.canvas-brand img{width:100%;height:auto;display:block}.canvas-controls .view-switcher{pointer-events:auto;box-shadow:0 8px 24px var(--shadow);position:absolute;bottom:clamp(12px,2vw,24px);left:50%;transform:translate(-50%)}.canvas-controls .mobile-pin-button{pointer-events:auto;top:clamp(12px,1.5vw,20px);right:clamp(12px,1.5vw,20px)}.preview-generation-overlay{z-index:30;color:var(--accent-text);background:color-mix(in srgb, var(--surface) 36%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);place-items:center;display:grid;position:absolute;inset:0}.preview-generation-overlay svg{animation:.9s linear infinite action-spin}.keyboard-layer{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;animation:.22s ease-out both layer-in;display:block;position:absolute;inset:0}.keyboard-background{z-index:-1}.preview-error-overlay{z-index:10;color:var(--text);background:color-mix(in srgb, var(--surface) 88%, transparent);text-align:center;place-content:center;justify-items:center;padding:24px;display:grid;position:absolute;inset:0}.preview-error-overlay strong{font-size:16px}.preview-error-overlay p{color:var(--muted);margin:6px 0 14px;font-size:12px}.preview-error-overlay button{border:1px solid var(--line-strong);background:var(--surface-strong);cursor:pointer;align-items:center;gap:7px;min-height:38px;padding:0 13px;display:inline-flex}.theme-control{border:1px solid var(--line);background:var(--button);border-radius:999px;grid-template-columns:repeat(2,1fr);gap:4px;padding:3px;display:grid}.theme-button{min-width:58px;min-height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;padding:0 14px;font-size:12px;font-weight:720;transition:background-color .16s,color .16s,box-shadow .16s,transform .16s}.theme-button:hover{color:var(--text)}.theme-button[aria-pressed=true]{color:#fff;background:var(--accent);box-shadow:0 5px 14px var(--shadow)}.theme-button:active{transform:translateY(1px)}.mobile-pin-button{border:1px solid var(--line);background:var(--surface-strong);width:40px;height:40px;color:var(--muted);cursor:pointer;box-shadow:0 8px 24px var(--shadow);border-radius:50%;place-items:center;padding:0;display:inline-grid;position:absolute;right:0}.mobile-pin-button[aria-pressed=true]{color:var(--accent-text);background:var(--accent-soft)}.config-panel{overscroll-behavior:contain;border-left:1px solid var(--line);background:var(--surface);min-width:0;height:100dvh;color:var(--text);scrollbar-color:var(--line-strong) transparent;flex-direction:column;padding:27px 22px 20px;display:flex;overflow-y:auto}.panel-header{border-bottom:1px solid var(--line);padding:2px 0 15px}.eyebrow{color:var(--accent-text);margin:0 0 8px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:10px;font-weight:750}h1,h2,p{margin-top:0}h1{max-width:100%;color:var(--text);margin-bottom:0;font-size:24px;font-weight:720;line-height:1.3}h2{color:var(--text);margin-bottom:14px;font-size:13px;font-weight:720}.theme-row{justify-content:space-between;align-items:center;gap:12px;margin-top:22px;display:flex}.theme-row>span{color:var(--muted);font-size:12px;font-weight:680}.selection-summary{border:1px solid color-mix(in srgb, var(--accent) 48%, var(--line));background:var(--accent-soft);border-radius:8px;margin:14px 0 0;overflow:hidden}.selection-summary>summary,.control-section>summary{cursor:pointer;list-style:none}.selection-summary>summary::-webkit-details-marker{display:none}.control-section>summary::-webkit-details-marker{display:none}.selection-summary>summary{min-height:42px;color:var(--accent-text);justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;font-size:12px;font-weight:720;display:flex}.selection-summary>summary svg{flex:none;transition:transform .16s}.selection-summary[open]>summary svg{transform:rotate(180deg)}.selection-summary .config-summary{border-top:1px solid color-mix(in srgb, var(--accent) 28%, transparent);padding:11px 12px 13px}.config-summary{grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px 16px;margin:0;display:grid}.summary-row{min-width:0}.summary-row dt{color:var(--muted);white-space:nowrap;margin-bottom:6px;font-size:11px}.summary-row dd{color:var(--text);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;font-weight:680;overflow:hidden}.control-section{border:1px solid var(--line);background:var(--surface-strong);border-radius:8px;margin:16px 0;overflow:hidden}.control-section>summary{grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px;min-height:62px;padding:12px 14px;display:grid}.section-title{min-width:0;color:var(--text);font-size:14px;font-weight:720}.section-hint{color:var(--muted);grid-column:1/-1;font-size:11px;line-height:1.5}.view-badge{border:1px solid var(--line);color:var(--accent-text);background:var(--accent-soft);flex:none;padding:4px 8px;font-size:10px;font-weight:680}.randomize-button{border:1px solid color-mix(in srgb, var(--accent) 70%, var(--line));background:var(--surface-strong);min-height:30px;color:var(--accent-text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:5px;padding:0 10px;font-size:11px;font-weight:720;transition:background-color .16s,box-shadow .16s,transform .16s;display:inline-flex}.randomize-button:hover{background:var(--accent-soft);box-shadow:0 6px 18px var(--shadow);transform:translateY(-1px)}.randomize-button:active{transform:translateY(1px)}.section-arrow{color:var(--accent-text);transition:transform .16s}.control-section[open] .section-arrow{transform:rotate(180deg)}.section-body{padding:0 14px 12px}.select-row{border-top:1px solid var(--line);grid-template-columns:90px minmax(0,1fr);align-items:center;gap:12px;min-height:64px;display:grid}.select-row:last-child{border-bottom:0}.select-label{min-width:0;color:var(--text);white-space:nowrap;align-items:center;gap:8px;font-size:12px;font-weight:680;display:flex}.selection-dot{border:2px solid var(--surface-strong);width:10px;height:10px;box-shadow:0 0 0 1px var(--line-strong);border-radius:50%;flex:none}.background-dot{background:linear-gradient(90deg,#ecebea 50%,#474341 50%)}.config-select{border:1px solid var(--line-strong);background-color:var(--surface-strong);width:100%;min-width:0;height:40px;color:var(--text);cursor:pointer;border-radius:4px;outline:0;padding:0 34px 0 12px;font-size:12px;transition:border-color .16s,box-shadow .16s}.config-select:hover{border-color:var(--accent)}.config-select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent)}.configurator-actions{border-top:1px solid var(--line);margin-top:12px;padding-top:14px}.action-buttons{grid-template-columns:1fr 1fr;gap:10px;display:grid}.action-buttons button{border:1px solid var(--accent);cursor:pointer;justify-content:center;align-items:center;gap:7px;min-height:42px;padding:0 12px;font-size:12px;font-weight:680;transition:background-color .16s,color .16s,transform .16s;display:inline-flex}.action-buttons .reset-button{background:var(--surface-strong);color:var(--accent-text)}.save-image-button{background:var(--accent);color:#fff}.action-buttons button:hover:not(:disabled){transform:translateY(-1px)}.action-buttons button:active:not(:disabled){transform:translateY(1px)}.action-buttons button:disabled{cursor:wait;opacity:.72}.save-error{color:#b54747;margin:10px 0 0;font-size:11px;line-height:1.5}.generated-image-dialog{z-index:100;background:#0f0e0eeb;place-items:center;padding:56px 12px 18px;display:grid;position:fixed;inset:0}.generated-image-preview{object-fit:contain;-webkit-touch-callout:default;max-width:100%;max-height:calc(100dvh - 74px);display:block}.generated-image-close{color:#fff;cursor:pointer;background:#00000061;border:1px solid #ffffff3d;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;display:grid;position:absolute;top:10px;right:10px}.loading-icon{animation:.9s linear infinite action-spin}@keyframes action-spin{to{transform:rotate(360deg)}}@keyframes layer-in{0%{opacity:.2}to{opacity:1}}@media (width<=900px){.app-shell{display:block}.keyboard-canvas{cursor:pointer}.preview-column{min-height:auto;padding:18px 20px 23px}.preview-stage{padding-top:4px;display:block}.keyboard-canvas{width:100%}.preview-pinned .preview-column{z-index:20;border-bottom:1px solid var(--line);background:var(--page);min-height:0;box-shadow:0 12px 28px var(--shadow);padding:8px 12px;position:sticky;top:0}.preview-pinned .preview-stage{grid-template-rows:auto;display:grid}.preview-pinned .keyboard-canvas{aspect-ratio:1500/938;width:min(100%,620px,89.55dvh);max-height:none}.config-panel{border-top:1px solid var(--line);border-left:0;height:auto;padding:25px clamp(20px,5vw,48px) 28px;overflow:visible}.select-row{grid-template-columns:minmax(90px,.35fr) minmax(180px,.65fr)}}@media (width<=600px){.preview-column{padding:10px 12px 18px}.app-shell:not(.preview-pinned) .keyboard-canvas{aspect-ratio:1500/1020}.app-shell:not(.preview-pinned) .keyboard-background{object-fit:cover}.app-shell:not(.preview-pinned) .keyboard-layer:not(.keyboard-background){object-position:center top}.segmented-control{grid-template-columns:repeat(3,minmax(58px,1fr));min-width:0}.canvas-controls .view-switcher{width:min(100% - 24px,316px);bottom:8px}.canvas-controls .mobile-pin-button{top:8px;right:8px}.segment-button{min-height:34px;padding:6px 9px}.keyboard-canvas{box-shadow:0 18px 50px var(--shadow)}.config-panel{padding:22px 18px 24px}h1{max-width:100%;font-size:21px}.config-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.select-row{grid-template-columns:78px minmax(0,1fr);gap:10px}.control-section>summary{grid-template-columns:minmax(0,1fr) auto auto}.view-badge{display:none}.randomize-button{min-width:0;padding:0 9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}