html,body,#root{margin:0;min-height:100%}body{background:var(--ds-page)}.toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;margin:4px 0 10px;background:var(--ds-page);border-bottom:1px solid var(--ds-hairline)}.progress{font-size:14px;color:var(--ds-ink-2);margin-right:auto}.btn-primary{background:var(--ds-accent, #0a7f6e);color:#fff}.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch}.chip{flex:0 0 auto;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--ds-hairline);background:transparent;color:var(--ds-ink-2);font:inherit;font-size:13px;cursor:pointer}.chip.done{color:var(--ds-accent, #0a7f6e);border-color:var(--ds-accent, #0a7f6e)}.sec-anchor{position:relative;top:-64px}.form-block{padding:12px 0;border-top:1px solid var(--ds-hairline)}.form-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}.form-label{font-size:18px;font-weight:600;color:var(--ds-ink)}.counter{font-size:13px;color:var(--ds-ink-2);margin-left:auto}.counter.ok{color:var(--ds-accent, #0a7f6e)}.cards{display:flex;flex-wrap:wrap;gap:8px}.glyph-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;padding:8px 6px 6px;border:2px solid var(--ds-hairline);border-radius:10px;background:var(--ds-surface, #fff);color:var(--ds-ink);font:inherit;cursor:pointer}.glyph-card .mask rect{fill:var(--ds-ink)}.glyph-card.picked{border-color:var(--ds-accent, #0a7f6e)}.glyph-card.picked .mask rect{fill:var(--ds-accent, #0a7f6e)}.glyph-card.kept{border-style:dashed;cursor:default;opacity:.75}.glyph-card.static{cursor:default}.glyph-card.liked{border-color:#c0405e}.glyph-card.liked .mask rect{fill:#c0405e}.card-idx{font-size:11px;color:var(--ds-ink-2)}.order{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ds-accent, #0a7f6e);color:#fff;font-size:12px;line-height:22px;text-align:center}.glyph-card.liked .order{background:#c0405e}.badge{font-size:11px;padding:2px 6px;border-radius:6px}.badge-kept{background:var(--ds-hairline);color:var(--ds-ink-2)}.badge-solo{background:#f3e2c7;color:#7a5a1e}.layout-preview{margin:8px 0}.layout-family{padding:6px 0}.layout-options{display:flex;flex-direction:column;gap:8px;margin-top:10px}.layout-option{display:flex;flex-direction:column;gap:2px;text-align:left;min-height:44px;padding:10px 12px;border:2px solid var(--ds-hairline);border-radius:10px;background:var(--ds-surface, #fff);color:var(--ds-ink);font:inherit;cursor:pointer}.layout-option.picked{border-color:var(--ds-accent, #0a7f6e)}.layout-option-label{font-weight:600}.layout-option-detail{font-size:13px;color:var(--ds-ink-2)}.summary-panel{margin:14px 0;padding:16px;border:1px solid var(--ds-hairline);border-radius:14px;background:var(--ds-surface, #fff)}.summary-panel h2{margin:0 0 6px;font-size:18px;color:var(--ds-ink)}.summary-panel textarea{width:100%;box-sizing:border-box;font:13px/1.5 ui-monospace,monospace;padding:10px;border:1px solid var(--ds-hairline);border-radius:8px;background:var(--ds-page);color:var(--ds-ink);resize:vertical}.modal-actions{display:flex;gap:8px;margin-top:10px}.file-select{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--ds-hairline);background:var(--ds-surface, #fff);color:var(--ds-ink)}.var-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 0 10px;-webkit-overflow-scrolling:touch}.var-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px 6px;border:2px solid var(--ds-hairline);border-radius:10px;background:var(--ds-surface, #fff);color:var(--ds-ink);font:inherit;cursor:pointer}.var-btn.active{border-color:var(--ds-accent, #0a7f6e)}.mask.tone-ink rect{fill:var(--ds-ink)}.mask.tone-accent rect{fill:var(--ds-accent, #0a7f6e)}.var-name{font-size:12px;font-weight:600}.var-prov{font-size:10px;color:var(--ds-ink-2)}.edited-dot{font-size:10px;font-weight:600;color:var(--ds-accent, #0a7f6e)}.ed-wrap{max-width:100%}.ed-canvas{width:100%;touch-action:none;display:block;border-radius:10px}.tool-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.tool-row .file-button:disabled{opacity:.4;cursor:default}.word-input{width:100%;box-sizing:border-box;font:inherit;font-size:18px;letter-spacing:2px;padding:10px 12px;border-radius:10px;border:1px solid var(--ds-hairline);background:var(--ds-surface, #fff);color:var(--ds-ink)}.preview-box{margin-top:10px;padding:10px;border:1px solid var(--ds-hairline);border-radius:10px;background:#fff;overflow-x:auto}.io-panel textarea{width:100%;box-sizing:border-box;font:12px/1.5 ui-monospace,monospace;padding:10px;border:1px solid var(--ds-hairline);border-radius:8px;background:var(--ds-page);color:var(--ds-ink);resize:vertical}.mini-compare{display:flex;gap:20px;align-items:flex-end;margin-top:8px}.mini-compare>div{display:flex;flex-direction:column;align-items:center;gap:2px}html,body,#root{width:100%;height:100%}.editor-app.editor-app{width:100%;box-sizing:border-box}@media (max-width:699px){.editor-app.editor-app{height:100dvh!important;min-height:0!important;overflow:hidden!important}.editor-app .control-row{flex-shrink:0}.editor-app .editor-split{flex:1!important;min-height:0!important;overflow:hidden!important}.editor-app .editor-gallery,.editor-app .editor-work{height:0!important;flex:1 1 0!important;min-height:0!important;overflow:auto!important}.editor-app .editor-gallery{overflow:auto}.editor-app .axis-panel{max-height:150px;overflow:auto}.editor-app .control-row input[aria-label="Header text"]{min-width:0;box-sizing:border-box}}@media (max-width:699px){.editor-app.editor-app .axis-panel{max-height:150px!important;overflow-y:auto!important}.editor-app.editor-app .editor-gallery{flex:0 0 42%!important}.editor-app.editor-app .editor-work{flex:1 1 0!important}.editor-app.editor-app .editor-work svg[aria-label="Glyph cell editor"]{max-height:200px;width:auto;max-width:100%}}@media (max-width:699px){.editor-app.editor-app .editor-work>div{min-height:0!important}.editor-app.editor-app .editor-work svg[aria-label="Glyph cell editor"]{max-height:150px!important;flex-shrink:1}.editor-app.editor-app .editor-gallery{flex:0 0 44%!important}}@media (max-width:699px){.editor-app.editor-app [data-top-actions]{max-height:132px;overflow-y:auto;align-content:flex-start;flex-shrink:1!important}}@media (max-width:699px){.editor-app.editor-app [data-header-gap]{height:26.2px!important}}