:root{--paper:#fffaf0;--ink:#173f73;--muted:#78839a;--line:#dfd9df;--purple:#eee4f5;--accent:#60467a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Yuanti SC',STYuanti,'Avenir Next','PingFang SC',sans-serif}button,input,select{font:inherit;color:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fffdf8;cursor:pointer;transition:background .15s}button:hover{background:#f0e8f5}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #aa79bd;outline-offset:3px}[hidden]{display:none!important}
html body .letters-editor-shell.ze-standard-surface{--zl-paper:#fffaf0;--zl-accent:#eee4f5;--zl-border:#e1dce2}
html body .letters-editor-shell .zl-tool[aria-selected=true]{background:#eee4f5!important;color:#60467a!important}
html body .letters-editor-shell .zl-tool:hover{background:#f0e8f5!important}
html body .letters-editor-shell .zl-panel-title{color:#60467a}
html body .letters-editor-shell .zl-panel-close{min-height:44px;width:44px}
html body .letters-editor-shell .zl-panel{scrollbar-gutter:stable}
html body .letters-editor-shell .local-note{margin-left:8px;border-radius:20px;padding:5px 10px;background:#eee4f5;color:#806590;font-size:11px;white-space:nowrap}
html body .letters-editor-shell .ze-save-status{background:#fffcf6;text-align:right}
html body .letters-editor-shell .ze-save-status #saveStatus{color:#7a6c88}
.group-title{display:flex;align-items:center;gap:9px;color:#60467a;font-size:16px!important;font-weight:650;margin:18px 0 14px;line-height:1.5}.group-title:first-child{margin-top:4px}.group-title>span{color:#aa79bd;font-size:18px;letter-spacing:1px}
.control-group{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid #e7e1df}.control-group:last-child{border:0;margin-bottom:0}.hint{font-size:12px!important;line-height:1.7;color:#7d7890;margin:9px 0}.hint:empty{display:none}label{display:block;font-size:14px;font-weight:500;margin:14px 0 8px}.control-group>label:first-child{margin-top:4px}input:not([type=color],[type=checkbox]){width:100%;height:44px;min-height:44px;background:#fffdf8;border:1px solid #d7d6cf;border-radius:10px;padding:9px 12px}input::placeholder{color:#9b93a3;font-size:12px}.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.counts button{padding:4px;min-width:0;font-size:15px}.counts button[aria-pressed=true],.layouts button[aria-pressed=true]{border-color:#9a77b1;background:#eee4f5;color:#60467a;box-shadow:inset 0 0 0 1px #9a77b1}.layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.layouts button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 6px;font-size:13px}.layout-shape{display:block;position:relative;width:40px;height:32px}.layout-shape i{position:absolute;border:1px solid #a18db3;background:#e8deef;border-radius:2px}.phrase-row{display:flex;gap:8px}.phrase-row input{min-width:0}.phrase-row button{flex:0 0 auto;background:#eee4f5;border-color:#cdb7dc}.key-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 2px 16px}.key-list button{min-width:0;height:44px;padding:5px;font-size:15px;font-weight:650}.key-list button[aria-pressed=true]{outline:2px solid #8b66a6;outline-offset:2px}.selected-title{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;align-items:center;margin:14px 0;font-size:13px}.selected-title span{font-size:11px;color:#8a7d96}.segments{display:flex;gap:4px;padding:4px;border:1px solid #e1dce2;background:#f3eee8;border-radius:10px}.segments button{flex:1;min-width:0;border:0;box-shadow:none;background:transparent;font-size:13px;padding:8px 10px;white-space:nowrap}.segments button[aria-pressed=true]{background:#e8daf1;color:#60467a;box-shadow:0 1px 4px #60467a14}.subtle{width:100%;margin-top:10px;font-size:13px;background:#fffaf3;border-color:#d7d6cf}.subtle:hover{background:#eee4f5}.base-palette{margin-top:24px!important;padding-top:22px;border-top:1px solid #e7e1df}#paletteKeyNote{margin-bottom:16px}.custom-color:has(input:disabled){opacity:.55}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 12px;background:#fffdf8;border:1px solid #e1dce2;border-radius:11px}.toggle input{accent-color:#9b78b5;width:20px;height:20px;margin:0}.spec-card{display:grid;gap:9px;padding:15px;border:1px solid #dfd7e4;background:#f4edf9;border-radius:12px}.spec-card b{font-size:14px;color:#60467a}.spec-card span{font-size:12px;color:#7a7187}.prototype-note{font-size:12px!important;line-height:1.7;background:#f7eee5;color:#886e68;padding:12px;border-radius:10px}.zf-trigger{width:100%}
.workspace{height:100%;min-height:0;display:flex;flex-direction:column;padding:22px 24px 10px;background:#fffaf0}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.canvas-heading #layoutLabel{font-size:12px;color:#8a7b98}.canvas-bar{display:flex;justify-content:center;flex:0 0 auto;margin:0 0 12px}html body .letters-editor-shell .ze-view-modes{margin:10px auto 0}html body .letters-editor-shell .ze-view-modes button[aria-pressed=true]{background:#60467a;color:#fffdf8}.stage{position:relative;flex:1;min-height:0;border:1px solid #e7e0e6;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fffdf7,#f4eee5);box-shadow:0 3px 0 #e2d9e329}.stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.press-note{position:absolute;right:25px;top:25px;pointer-events:none;color:#a588b6;font:21px ZaobaLayout,sans-serif;transform:rotate(6deg)}.scene-bottom{position:absolute;bottom:14px;left:18px;right:18px;pointer-events:none;font-size:11px;color:#8c7b98}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#fffaf0;color:#8b769a;font-size:14px}.canvas-dock{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;flex:0 0 auto;padding:5px 0}.canvas-dock #gesture{font-size:11px;color:#8c7b98}html body .letters-editor-shell .canvas-dock .ze-history{position:static!important;inset:auto!important;flex:0 0 auto;margin:0!important;padding:3px!important;background:#fffaf0;z-index:auto}html body .letters-editor-shell .ze-history button{min-width:44px!important;min-height:44px}html body .letters-editor-shell .ze-history .zb-ui-symbol{width:22px!important;height:22px!important;flex-basis:22px!important}.bottom-bar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;border-top:1px solid #e7e0e6;padding:8px 0}.counter{display:flex;align-items:baseline;gap:10px;font-size:12px;color:#8c7b98}.counter strong{font:400 27px 'Avenir Next',sans-serif;letter-spacing:3px;color:#806191}#sound{min-height:44px;font-size:12px;border-color:#d8c7e2;background:#eee4f5;color:#715489;padding:6px 14px;border-radius:22px}#canvasStatus{min-height:29px}#canvasStatus .hint{font-size:11px!important;margin:4px 0;color:#8b7e94}#printStatus[data-error=true]{color:#ac4c6d}
.hanger-handle{position:absolute;width:44px;height:44px;min-height:44px;padding:0;border:2px dashed #9675af;border-radius:50%;background:#c9b3df22;transform:translate(-50%,-50%);touch-action:none;cursor:grab;z-index:2}.hanger-handle:hover,.hanger-handle:focus-visible{background:#c9b3df44}.hanger-handle:active,.hanger-handle.dragging{cursor:grabbing;background:#c9b3df44}.hanger-handle span{position:absolute;white-space:nowrap;bottom:48px;left:50%;transform:translateX(-50%);font-size:11px;color:#876499;pointer-events:none;background:#fffcf7de;padding:3px 7px;border-radius:8px}
#customPanel{margin-top:18px;border:1px solid #dfd4e7;border-radius:12px;padding:12px;background:#faf7fc}.custom-title{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#85708f;margin-bottom:12px}.custom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;position:relative}.custom-cell{position:relative;aspect-ratio:1;min-height:54px;padding:5px;display:grid;place-items:center;border:1px dashed #d6c8e0;background:#f3edf8;touch-action:none;font-size:22px}.custom-cell small{position:absolute;left:6px;top:3px;font:10px sans-serif;opacity:.6}.custom-cell.occupied{border:1px solid #b9a8c7;box-shadow:inset 0 -5px 0 #87709322;cursor:grab}.custom-cell[aria-pressed=true]{outline:2px solid #9472b1;outline-offset:1px}.custom-cell.drop-ok{outline:3px solid #9472b1;background:#e4d5f0!important}.custom-cell.drop-bad{outline:3px dashed #bf758e;background:#f5dce4!important}.custom-status{min-height:18px;margin:7px 0 0;color:#a15575;font-size:11px}.custom-drag-ghost{position:fixed;z-index:1000;pointer-events:none;width:62px;height:62px;border:2px solid #9d7db3;border-radius:12px;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(-4deg);font-size:25px;box-shadow:0 7px 20px #67527433;opacity:.92}
@media(max-width:1000px) and (min-width:761px){.workspace{padding:18px 16px 8px}.canvas-dock{flex-wrap:wrap}.canvas-dock #gesture{flex:1;min-width:100px}html body .letters-editor-shell .ze-history button{padding:5px 7px!important}.press-note{font-size:18px;right:18px}}
@media(max-width:760px){html body .letters-editor-shell .local-note{font-size:10px;padding:3px 7px;margin-left:3px}.workspace{padding:8px 12px 0}.canvas-heading{gap:4px}html body .letters-editor-shell .ze-canvas-title{font-size:17px}.canvas-heading #layoutLabel{font-size:10px}.canvas-bar{margin-bottom:6px}html body .letters-editor-shell .ze-view-modes{margin:5px auto 0}html body .letters-editor-shell .ze-view-modes button{min-height:44px;padding:5px 12px;font-size:12px}.press-note{font-size:16px;top:14px;right:15px}.scene-bottom{font-size:10px;left:10px;bottom:7px}.stage{border-radius:12px}.canvas-dock{min-height:48px;padding:2px 0}.canvas-dock #gesture{font-size:10px;max-width:120px}html body .letters-editor-shell .ze-history button{font-size:0!important;min-width:40px!important;width:40px!important;padding:3px!important}html body .letters-editor-shell .ze-history button>span:not(.zb-ui-symbol){display:none}.bottom-bar{padding:2px 0}.counter{font-size:10px;gap:6px}.counter strong{font-size:22px}#sound{padding:4px 10px;min-height:44px}#canvasStatus{min-height:0}#canvasStatus .hint{font-size:10px!important;margin:2px 0}.hanger-handle span{display:none}html body .letters-editor-shell .zl-inspector-head{padding:5px 14px}html body .letters-editor-shell .zl-panel-title{font-size:20px!important}.control-group{padding-bottom:14px;margin-bottom:14px}.group-title{font-size:15px!important}.hint{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the model usable above the mobile inspector; controls share one lower row. */
@media(max-width:760px){
 html body .zl-editor.letters-editor-shell.ze-standard-surface.ze-standard-header{grid-template-rows:106px auto minmax(275px,1fr) clamp(100px,calc(100dvh - 505px),32dvh) calc(66px + env(safe-area-inset-bottom))!important}
 html body .zl-editor.letters-editor-shell.ze-standard-surface.ze-standard-header.zl-panel-collapsed{grid-template-rows:106px auto minmax(275px,1fr) 0 calc(66px + env(safe-area-inset-bottom))!important}
 .workspace{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto minmax(0,1fr) 54px auto;column-gap:8px}
 .canvas-heading{grid-row:1;grid-column:1/-1}.canvas-bar{grid-row:2;grid-column:1/-1}.stage{grid-row:3;grid-column:1/-1}
 .canvas-dock,.bottom-bar{display:contents}.canvas-dock #gesture{display:none}.canvas-dock #history{grid-row:4;grid-column:3}.counter{grid-row:4;grid-column:1;gap:4px}.counter>span:first-child{display:none}#sound{grid-row:4;grid-column:2;align-self:center}#canvasStatus{grid-row:5;grid-column:1/-1}
}
@media(max-height:600px){html body .letters-editor-shell{height:620px;min-height:620px}html,body{overflow:auto!important}}

#finishScope{width:100%;min-height:44px;padding:8px 12px;border:1px solid #d7d6cf;border-radius:10px;background:#fffdf8;margin-bottom:10px}

#textSize{width:100%;height:44px;min-height:44px;padding:0;accent-color:#aa79bd;border:0;background:transparent}label:has(#textSizeValue){display:flex;justify-content:space-between;align-items:center}#textSizeValue{font-size:13px;color:#8b66a6}
.letters-recovery{position:fixed;inset:15px 15px auto;z-index:10000;border:1px solid #b79aca;border-radius:12px;background:#fffaf0;padding:16px;color:#60467a;box-shadow:0 4px 20px #60467a33}.letters-recovery button{margin-left:12px}

#baseDepth{display:block;width:100%;margin:8px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fffcf7;color:var(--ink);font:inherit;min-height:44px}#baseDepth:focus-visible{outline:2px solid var(--accent);outline-offset:3px}