.free-app{--workspace-height:max(100dvh,620px);--panel:#23202c;--canvas:#14111b;--line:#3b3548;--muted:#a9a0b9;--ink:#f8f5ff;--field:#191620;--hover:#352a46;--accent:#8652ed;--violet:#c2a5ff;--shadow:0 18px 55px #0005;color:var(--ink);background:var(--canvas);display:block;max-width:none;margin:0;padding:0;min-height:var(--workspace-height);position:relative;font-family:Inter,Arial,sans-serif}
.free-app[data-theme=light]{--panel:#fff;--canvas:#f3f1f8;--line:#e2ddea;--muted:#756b85;--ink:#272133;--field:#f8f6fc;--hover:#ede5fb;--violet:#7543c5;--shadow:0 18px 55px #3923591a}
.free-app button{background:var(--panel);color:var(--ink);border-color:var(--line);font-size:13px;border-radius:10px;padding:10px 13px}
.free-app button:hover{background:var(--hover)}.free-app button.primary,.free-app button.active{background:var(--accent);border-color:var(--accent);color:#fff}.free-app button.flat{background:transparent}
.free-app input[type=text],.free-app input[type=number],.free-app select,.free-app textarea{background:var(--field);border-color:var(--line);color:var(--ink)}.free-app label,.free-app .label{color:var(--ink)}.free-app .small{color:var(--muted)}
.free-app a{color:var(--violet)}.free-app input[type=checkbox],.free-app input[type=range]{accent-color:var(--accent)}
.free-header{height:76px;padding:15px 28px;gap:14px;background:var(--panel);border-bottom:1px solid var(--line)}.free-header .brand{width:38px;height:38px;border-radius:11px;letter-spacing:0;background:var(--accent);color:white}.free-brand{font-size:22px;letter-spacing:-.6px}.free-header .project-shortcut{max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:transparent;border-color:transparent;color:var(--muted);font-weight:400;margin-left:22px}
.free-actions{display:flex;align-items:center;gap:9px;margin-left:auto}.free-actions #saveStatus{font-size:11px;color:var(--muted);margin:0 14px 0 0;max-width:180px;line-height:1.4}.free-actions #shareButton{background:var(--hover);color:var(--violet)}.free-actions #themeToggle{border-color:transparent;background:transparent;white-space:nowrap}.free-actions #saveButton{padding-inline:22px}
.free-workspace{position:relative;min-height:calc(var(--workspace-height) - 76px);overflow:hidden}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 35px 0}.workspace-heading h1{margin:0;font-size:23px;letter-spacing:-.6px;font-weight:650}.workspace-heading p{color:var(--muted);font-size:13px;margin:9px 0 0;line-height:1.5}.workspace-heading>button{color:var(--violet);font-weight:500;white-space:nowrap}
.tool-rail{position:absolute;left:28px;top:137px;display:grid;gap:5px;padding:9px;border:1px solid var(--line);border-radius:18px;background:var(--panel);z-index:3}.tool-rail button{display:flex;flex-direction:column;align-items:center;gap:7px;width:67px;padding:12px 5px;font-size:10px;font-weight:500;border:0;background:transparent;color:var(--muted)}.tool-rail button>span{display:grid;place-items:center;font-size:21px;line-height:1;height:27px;color:var(--ink)}.tool-rail button.active>span{color:white}
.workspace-meta{position:absolute;left:138px;top:123px;display:flex;align-items:center;gap:8px;z-index:2;font-size:11px;color:var(--muted)}.workspace-meta>span,.workspace-meta>button{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:11px;font-weight:400;color:var(--muted)}
.keyboard-space{position:absolute;inset:166px 34px 139px 138px;display:grid;place-items:center}.free-app .stage{padding:0;border:0;background:transparent;border-radius:18px;overflow:visible;transition:background .2s;width:min(1120px,100%,calc((100dvh - 390px) * var(--keyboard-ratio,3)));min-width:0}
.free-app #keyboard{display:block;max-width:100%;width:100%;height:auto;border-radius:13px;background:#24212d;box-shadow:0 12px 25px #0004}.free-app[data-theme=light] #keyboard{background:#d7d2df;box-shadow:0 12px 26px #65537730}
.free-app .stage:not([data-scene=none]){aspect-ratio:3/2;width:min(1100px,100%,calc((100dvh - 325px) * 1.5));background-size:100% 100%;background-repeat:no-repeat;overflow:hidden;box-shadow:var(--shadow)}.stage:not([data-scene=none]) #keyboard{position:absolute;left:48%;top:58%;transform:translate(-50%,-50%);width:var(--keyboard-width,55%);background:#34333c;box-shadow:0 11px 12px #0007,0 2px 0 #16151c;border-radius:8px}.scene-caption{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);border-radius:20px;background:#111b;color:#fffd;padding:6px 12px;font-size:10px;white-space:nowrap}
.context-toolbar{position:absolute;bottom:80px;left:calc(50% + 38px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 12px 10px 19px;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);z-index:4;max-width:calc(100% - 180px)}.context-toolbar strong{font-size:12px;white-space:nowrap;margin-right:10px}.context-toolbar button{white-space:nowrap;font-size:12px}.context-toolbar #clearSelection{font-size:19px;padding:5px 9px;color:var(--muted)}
.workspace-footer{position:absolute;left:138px;right:34px;bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}.selection-actions{display:flex;align-items:center;gap:8px}.workspace-footer button{font-size:12px;padding:8px 11px}.workspace-footer #multiSelect{color:var(--violet)}.workspace-footer #multiSelect.active{color:white}
.drawer-backdrop{display:none}.tool-drawer{position:fixed;right:18px;top:91px;bottom:18px;width:360px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);z-index:12;display:flex;flex-direction:column;overflow:hidden;animation:drawer-enter .15s ease-out}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.drawer-head h2{font-size:17px;margin:0}.drawer-head button{padding:3px 10px;font-size:23px;border:0;background:transparent;color:var(--muted)}.drawer-body{padding:20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.drawer-body h2,.drawer-body h3{font-size:14px;margin-bottom:12px}.drawer-body .group{margin-bottom:20px;padding-bottom:20px}.drawer-body .group:last-child{margin-bottom:0}.drawer-body .small{font-size:12px;line-height:1.6}.drawer-body .label{font-size:13px}.drawer-body hr{border:0;border-top:1px solid var(--line);margin:22px 0}.drawer-body .section-title{margin-top:24px}.drawer-body .row{flex-wrap:wrap}.drawer-body .row>button{min-width:100px}.drawer-body details summary{font-size:13px;line-height:1.5}.drawer-body .view-options .mode{margin:14px 0}.drawer-body .checks{font-size:12px}
.drawer-body .designer-settings{padding:0 0 20px;border:0;border-bottom:1px solid var(--line);margin:16px 0 20px}.drawer-body .setting-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.drawer-body .designer-checks{font-size:12px;display:grid}.drawer-body .legend-line{background:var(--field);padding:10px}.drawer-body .legend-grid,.drawer-body .legend-position{grid-template-columns:1fr 1fr}.drawer-body .legend-head input{width:130px}.drawer-body .legend-actions{display:grid;grid-template-columns:1fr 1fr}.drawer-body .legend-actions>button{font-size:12px}.drawer-body .key-color-controls{display:grid;gap:14px;margin-top:14px;font-size:13px}.drawer-body .key-color-controls label{justify-content:space-between}.drawer-body fieldset{padding:0;border:0;margin:0;min-width:0}.drawer-body fieldset:disabled{opacity:.5}.drawer-body #textSelectionHint,.drawer-body #colorSelectionHint{margin:12px 0}.drawer-body #fontSelected{background:var(--accent)}.drawer-body #keyImage{grid-column:1/-1}.drawer-body #selectionMixed{color:var(--violet)}.drawer-body .editing-hint{color:var(--violet);font-size:12px}.drawer-body .export-legend-note{color:var(--violet)}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.free-app .scene-card{padding:5px;overflow:hidden;text-align:left;border-radius:12px;font-size:12px;background:var(--field)}.scene-card img,.scene-neutral{width:100%;aspect-ratio:3/2;display:block;object-fit:cover;border-radius:8px}.scene-card>span{display:block;padding:10px 7px 7px}.scene-neutral{background:var(--canvas);display:grid;place-items:center;font-size:45px;color:var(--muted)}.free-app .scene-card.active{background:var(--hover);border-color:var(--accent);color:var(--violet)}#sceneNote{font-size:11px;margin-top:15px}
.drawer-body .project-fields{display:grid;grid-template-columns:1fr;gap:16px}.project-list-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.admin-entry{display:block;margin-top:30px;text-decoration:none;font-size:12px}.drawer-body #shareResult{padding:15px 0}.drawer-body #shareLink{font-size:12px}.drawer-body .bottom{display:grid;grid-template-columns:1fr;margin-top:16px;gap:20px}.drawer-body .surface{background:var(--field);border-color:var(--line)}.drawer-body .bar{padding:13px;flex-wrap:wrap}.drawer-body .bar h2{font-size:13px;margin:0}.drawer-body .keybody{grid-template-columns:90px 1fr;gap:12px;padding:12px}.drawer-body .keycanvaswrap{height:100px}.drawer-body #single{max-width:90px;max-height:90px}.drawer-body .keyinfo{font-size:12px}.drawer-body .keyinfo strong{font-size:16px}.drawer-body .exportbody{padding:14px}.drawer-body .exportrow{flex-wrap:wrap;gap:10px}.drawer-body .exportrow>button{flex-basis:100%;font-size:12px}.drawer-body .production-options{font-size:13px}.drawer-body .meter{margin-top:15px}
body:has(.free-app[data-theme=light]){background:#f3f1f8}#toast{z-index:30}dialog{max-width:800px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a876fc;outline-offset:3px}@keyframes drawer-enter{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}@media(prefers-reduced-motion:reduce){.tool-drawer{animation:none}.stage{transition:none}}
@media(max-width:1050px){.free-header{padding-inline:20px}.free-header .project-shortcut{max-width:160px;margin-left:0}.free-actions #saveStatus{display:none}.workspace-heading{padding:25px 25px 0}.workspace-heading h1{font-size:21px}.tool-rail{left:20px;top:130px}.workspace-meta{left:123px}.keyboard-space{inset:165px 25px 145px 123px}.workspace-footer{left:123px;right:25px}.workspace-footer>span{max-width:320px;line-height:1.6}.context-toolbar{left:calc(50% + 40px);max-width:calc(100% - 145px)}.context-toolbar strong{max-width:145px;text-overflow:ellipsis;overflow:hidden}}
@media(max-width:700px){.free-header{height:68px;padding:12px 14px;gap:8px}.free-header .brand{width:33px;height:33px;font-size:18px}.free-brand{font-size:18px}.free-header .project-shortcut{display:none}.free-actions{gap:5px}.free-actions button{font-size:11px;padding:9px 10px}.free-actions #saveButton{padding-inline:12px}.free-actions #themeToggle{font-size:10px}.free-workspace{min-height:calc(var(--workspace-height) - 68px)}.workspace-heading{padding:22px 18px 0;align-items:flex-start}.workspace-heading h1{font-size:19px}.workspace-heading p{font-size:11px;max-width:230px;margin-top:7px}.workspace-heading>button{font-size:10px;padding:7px 0;max-width:90px}.tool-rail{left:50%;top:auto;bottom:16px;transform:translateX(-50%);display:flex;padding:5px;gap:1px;border-radius:15px;max-width:calc(100% - 22px);overflow-x:auto}.tool-rail button{min-width:52px;width:52px;font-size:9px;padding:8px 3px;gap:4px}.tool-rail button>span{font-size:18px;height:22px}.workspace-meta{left:18px;top:120px;gap:5px}.workspace-meta>span,.workspace-meta>button{font-size:10px;padding:6px 9px}.workspace-meta #count{display:none}.keyboard-space{inset:164px 14px 190px}.free-app .stage{width:min(100%,calc((100dvh - 400px) * var(--keyboard-ratio,3)))}.free-app .stage:not([data-scene=none]){width:min(100%,calc((100dvh - 355px) * 1.5))}.workspace-footer{left:18px;right:18px;bottom:94px;gap:8px;flex-wrap:wrap;justify-content:center}.workspace-footer>span{font-size:9px;text-align:center;flex-basis:100%}.workspace-footer button{font-size:10px;padding:7px 9px}.context-toolbar{left:50%;bottom:158px;max-width:calc(100% - 28px);width:max-content;padding:8px;gap:4px;border-radius:12px;flex-wrap:wrap;justify-content:center}.context-toolbar strong{font-size:10px;margin-right:4px}.context-toolbar button{font-size:10px;padding:7px}.context-toolbar #clearSelection{padding:3px 7px}.tool-drawer{right:8px;left:8px;width:auto;top:80px;bottom:8px;border-radius:16px}.drawer-backdrop{display:block;position:fixed;inset:68px 0 0;z-index:10;background:#0006}.drawer-body{padding:18px}.scene-grid{grid-template-columns:1fr 1fr}.scene-caption{font-size:8px;bottom:6px}}
@media(max-height:670px) and (min-width:701px){.workspace-heading{padding-top:18px}.workspace-heading h1{font-size:19px}.workspace-meta{top:100px}.keyboard-space{inset:137px 28px 108px 123px}.tool-rail{top:112px;gap:1px;padding:6px}.tool-rail button{padding:7px 4px;gap:3px}.context-toolbar{bottom:58px}.workspace-footer{bottom:13px}.free-app .stage{width:min(1120px,100%,calc((100dvh - 300px) * var(--keyboard-ratio,3)))}.free-app .stage:not([data-scene=none]){width:min(1100px,100%,calc((100dvh - 260px) * 1.5))}}

body:has(.free-app[data-theme=light]) dialog{background:#fff;color:#272133;border-color:#e2ddea}body:has(.free-app[data-theme=light]) dialog button{background:#f8f6fc;color:#272133;border-color:#e2ddea}body:has(.free-app[data-theme=light]) dialog .saved-project{border-color:#e2ddea}body:has(.free-app[data-theme=light]) dialog .saved-project p{color:#756b85}
@media(max-width:700px){.free-app{--workspace-height:max(100dvh,660px)}}
@media(min-width:1100px){.free-app[data-drawer-open=true] .keyboard-space{right:400px}.free-app[data-drawer-open=true] .workspace-footer{right:400px}.free-app[data-drawer-open=true] .context-toolbar{left:calc(50% - 131px);max-width:calc(100% - 550px);flex-wrap:wrap;justify-content:center}}

/* Keep filenames and group descriptions inside the panel; actions always have space. */
.drawer-body,.drawer-body .group,.layer-list,.layer-tools{min-width:0;max-width:100%}
.free-app .layer-item{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,30px);gap:4px;width:100%;min-width:0;max-width:100%;background:var(--field)}
.free-app .layer-item.active{background:var(--hover);border-color:var(--violet)}
.free-app .layer-item .layer-select{min-width:0;width:100%;max-width:100%;display:block;padding:7px 6px;text-align:left;border:0;background:transparent;overflow:hidden}
.layer-name,.layer-scope{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.layer-name{font-size:12px;color:var(--ink);font-weight:600}.layer-scope{font-size:10px;color:var(--muted);margin-top:5px;font-weight:400}
.free-app .layer-item .layer-action{padding:7px 0;min-width:0;width:30px;border:0;background:transparent;font-size:16px}
.free-app .layer-item .layer-action:hover{background:var(--panel)}
#layerKeyInfo{overflow-wrap:anywhere}#filename{max-width:100%;min-width:0}

/* Keyboard view controls belong beside the keyboard rather than in the image tools. */
.workspace-meta{right:34px;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:calc(100% - 172px)}
.model-meta{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;flex-wrap:wrap}
.model-meta>span,.model-meta>button{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.model-meta #modelBadge{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.workspace-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:100%}
.selection-actions{display:flex;align-items:center;gap:6px}.selection-actions button{font-size:12px;white-space:nowrap}
.free-app #multiSelect{background:var(--hover);border-color:var(--violet);color:var(--violet);padding:9px 12px}.free-app #multiSelect.active{background:var(--accent);border-color:var(--accent);color:white}
.selection-actions #selectAllKeys{color:var(--muted);font-size:11px;padding-inline:8px}
.keyboard-zoom{display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:11px;color:var(--muted)}
.keyboard-zoom>div{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.free-app .keyboard-zoom button{padding:4px 7px;border:0;background:transparent;font-size:17px;line-height:1.3;min-width:25px}
.free-app .keyboard-zoom input{width:45px;min-width:0;padding:4px 0;background:transparent;border:0;text-align:right;font-size:12px;-moz-appearance:textfield}
.keyboard-zoom input::-webkit-inner-spin-button,.keyboard-zoom input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.keyboard-zoom #keyboardZoomFit{font-size:10px;color:var(--violet);padding-inline:7px}
.keyboard-space{display:block;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;bottom:135px}
.stage-viewport{display:flex;align-items:center;justify-content:center;min-height:100%;width:100%;padding:12px}
.free-app .stage,.free-app .stage:not([data-scene=none]){flex-shrink:0;max-width:none}
.workspace-footer{justify-content:center;text-align:center;line-height:1.6;right:34px}.workspace-footer>span{font-size:12px;max-width:680px}

/* Start with a visible keyboard-wide preset, then edit the selected keys. */
#drawer-texts .drawer-body{padding:18px}
.text-preset-card{padding:16px;border:1px solid var(--violet);border-radius:13px;background:var(--hover);margin-bottom:17px}
.preset-heading{display:flex;gap:10px;align-items:center}.preset-heading>span{font-size:20px;font-weight:700;color:var(--violet);display:grid;place-items:center;background:var(--panel);border-radius:9px;width:38px;height:38px;flex-shrink:0}
.drawer-body .preset-heading h3{font-size:14px;margin:0}.preset-heading p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.text-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.free-app .text-preset-grid button{display:flex;align-items:center;text-align:left;gap:8px;padding:10px 8px;font-size:11px;min-width:0;font-weight:600;background:var(--panel)}
.text-preset-grid button>span:last-child{min-width:0}.text-preset-grid small{display:block;font-size:9px;color:var(--muted);font-weight:400;line-height:1.5;margin-top:4px}
.text-preset-grid .preset-sample{display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;width:27px;height:28px;font-size:14px;flex-shrink:0;background:var(--field);color:var(--violet)}
.text-preset-grid .dual{font-size:9px;line-height:1.05;text-align:center;display:block;padding-top:3px}.text-preset-grid .corner{place-items:start;padding:4px;font-size:10px}.text-preset-grid .blank{color:var(--muted)}
.text-preset-card .preset-note{font-size:10px;line-height:1.5;color:var(--muted);margin:12px 0 0}
#drawer-texts .designer-checks{font-size:12px;padding:0 2px;margin-bottom:20px}#drawer-texts .designer-checks label{display:flex;align-items:center;gap:8px}
.text-selection-section{border-top:1px solid var(--line);padding-top:18px}.text-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.drawer-body .text-section-heading h3{margin:0;font-size:14px}.text-section-heading #editingKey{font-size:10px;max-width:100%;overflow-wrap:anywhere}
.text-style-section{margin:19px 0 20px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--field)}.drawer-body .text-style-section h3{font-size:12px;color:var(--muted);margin:0 0 8px}.drawer-body .text-style-section .label{font-size:11px}.text-style-section #fontSelected{margin-top:14px;width:100%;font-size:12px}
.bulk-style{margin-top:12px}.drawer-body .bulk-style summary{font-size:11px}.bulk-style-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.free-app .bulk-style-actions button{font-size:10px;padding:8px;line-height:1.5}
.drawer-body .legend-line{padding:13px;border-radius:12px}.drawer-body .legend-head{margin-bottom:14px;gap:8px}.drawer-body .legend-head input{font-size:15px;font-weight:600}.drawer-body .legend-head button{border:0;color:var(--muted)}
.legend-quick-position{margin-top:14px}.legend-quick-position>label{display:grid;gap:6px;font-size:11px;color:var(--muted)}.legend-quick-position select{font-size:12px;padding:8px}
.legend-advanced{margin-top:10px}.drawer-body .legend-advanced summary{font-size:11px}.legend-advanced .legend-position{padding-top:6px}
.drawer-body #removeLegends{font-size:10px;line-height:1.5}.drawer-body #textSelectionHint{padding:11px 12px;background:var(--field);border-radius:9px;font-size:11px}
@media(min-width:1100px){.free-app[data-drawer-open=true] .workspace-meta{right:400px}}
@media(max-width:1050px){.workspace-meta{right:25px;max-width:calc(100% - 148px)}.workspace-tools{gap:10px}.model-meta #modelBadge{max-width:195px}.keyboard-zoom{gap:5px}.workspace-footer>span{max-width:650px}}
@media(max-width:700px){.workspace-meta{left:18px;right:18px;max-width:calc(100% - 36px);gap:12px}.model-meta{gap:5px}.model-meta>button,.model-meta>span{font-size:10px;padding:6px 9px}.model-meta #modelBadge{max-width:220px}.workspace-tools{width:100%;gap:10px;justify-content:space-between}.selection-actions{gap:4px}.free-app #multiSelect{font-size:10px;padding:8px}.selection-actions #selectAllKeys{font-size:9px;padding:5px}.keyboard-zoom{gap:4px;flex-wrap:wrap}.keyboard-zoom>label{font-size:9px}.free-app .keyboard-zoom input{width:32px;font-size:10px}.free-app .keyboard-zoom button{font-size:15px;padding:3px 5px;min-width:20px}.keyboard-zoom #keyboardZoomFit{font-size:9px;padding:3px}.keyboard-space{bottom:200px}.workspace-footer{bottom:96px;right:18px}.workspace-footer>span{font-size:10px;max-width:100%}.text-preset-grid small{font-size:10px}}
.bleed-panel{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--field);min-width:0}.bleed-panel h3{margin:0 0 10px}.bleed-panel #bleedStatus{font-size:12px;line-height:1.6;margin-bottom:14px}.bleed-panel #bleedStatus[data-warning=true]{color:#ff9db0}.free-app[data-theme=light] .bleed-panel #bleedStatus[data-warning=true]{color:#a52644}.bleed-panel label{display:block;font-size:12px;margin-bottom:6px}.bleed-panel #bleedPreview{display:block;width:100%;height:auto;border-radius:8px;margin:12px 0;touch-action:none;cursor:grab}.bleed-panel #bleedPreview:active{cursor:grabbing}.bleed-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;color:var(--muted)}.bleed-legend span:first-child{color:#70c9ff}.bleed-legend span:last-child{color:#ffc969}.free-app[data-theme=light] .bleed-legend span:first-child{color:#1876ae}.free-app[data-theme=light] .bleed-legend span:last-child{color:#986311}.bleed-panel .small{font-size:11px;line-height:1.6;margin:12px 0}.bleed-panel #bleedFill{width:100%;white-space:normal}.bleed-panel .bleed-note{margin-bottom:0}.free-app button.bleed-alert{color:#ffb0bf;border-color:#d9577644;white-space:normal;font-size:11px;padding:7px 11px;pointer-events:auto}.free-app[data-theme=light] button.bleed-alert{color:#a52644}.model-meta #bleedAlert{max-width:280px;line-height:1.5;border-radius:10px;flex-shrink:1}
.font-imports{padding:14px;background:var(--field);border:1px solid var(--line);border-radius:12px;margin:16px 0}.font-imports summary{font-size:13px;color:var(--violet);font-weight:600}.font-imports label{display:block;font-size:12px;margin:12px 0 6px}.font-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.font-link-row input{min-width:0;width:100%;font-size:11px}.font-upload{padding:12px;border:1px dashed var(--line);border-radius:9px;cursor:pointer}.font-upload input{display:block;max-width:100%;font-size:11px;margin-top:8px}.font-imports #fontImportStatus{font-size:11px;line-height:1.6;color:var(--violet);overflow-wrap:anywhere}.project-font{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.project-font span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}.project-font button{flex-shrink:0;padding:6px 9px}
#drawer-gallery{width:min(660px,calc(100vw - 40px))}.gallery-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.gallery-filters label,.gallery-publish>label{display:grid;gap:7px;font-size:12px;min-width:0}.gallery-filters .gallery-search{grid-column:1/-1}.gallery-filters input,.gallery-filters select{width:100%;min-width:0}.gallery-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 0}.gallery-heading p{font-size:11px;color:var(--muted)}.gallery-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gallery-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--field);min-width:0}.gallery-card>img{display:block;width:100%;aspect-ratio:9/4;object-fit:contain;background:#18141f}.gallery-card-body{padding:13px;display:grid;gap:8px}.gallery-card-body h3{font-size:14px;margin:0;overflow-wrap:anywhere}.gallery-card-body p{margin:0;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.gallery-card .gallery-author{color:var(--violet);font-size:10px}.gallery-card-body button{margin-top:4px}.gallery-publish{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.gallery-publish summary{font-weight:600;font-size:14px;color:var(--violet);cursor:pointer}.gallery-publish>label{margin-top:14px}.gallery-publish .gallery-consent{display:flex;align-items:flex-start;gap:8px;line-height:1.6;color:var(--muted)}.gallery-consent input{margin-top:4px;flex-shrink:0}.gallery-publish>button{width:100%;margin-top:16px}.gallery-publish>p{font-size:11px;line-height:1.7;margin-top:12px}#galleryMore{width:100%;margin-top:14px}
@media(max-width:700px){#drawer-gallery{width:auto}.gallery-cards{gap:10px}.gallery-card-body{padding:10px}.gallery-card-body button{font-size:11px;padding:8px}.gallery-filters{gap:10px}.font-link-row{grid-template-columns:minmax(0,1fr)}.tool-rail{max-width:calc(100% - 22px)}}

.gradient-card,.text-effects-section{border:1px solid var(--line);border-radius:16px;padding:16px;margin:22px 0;background:var(--field)}
.gradient-card h3,.text-effects-section h3{margin-top:0}
.gradient-swatch{height:64px;border-radius:12px;border:1px solid var(--line);margin:14px 0}
.gradient-fields,.effect-fields,.gradient-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.gradient-fields label,.effect-fields label,.effect-editor label{display:grid;gap:6px;min-width:0;font-size:12px;color:var(--muted)}
.gradient-fields input,.effect-fields input,.effect-editor select,.gradient-fields select{width:100%;min-width:0;box-sizing:border-box}
.gradient-fields input[type=color],.effect-fields input[type=color]{height:38px}
.gradient-card .effect-check{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-size:12px;color:var(--ink)}
.gradient-card .effect-check input{width:auto;flex:0 0 auto;margin-top:2px}
.gradient-directions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.gradient-directions button{flex:1;font-size:11px;white-space:nowrap}
.gradient-actions button{min-width:0;white-space:normal;line-height:1.35;font-size:12px}
.legend-effects .effect-editor{padding:12px 0 4px}
.effect-settings[hidden],.effect-fields[hidden],.gradient-card [hidden]{display:none!important}
#gradientAngle{width:100%;margin-top:8px}
#gradientAngleLabel{float:right;color:var(--ink)}
@media(max-width:360px){.gradient-actions{grid-template-columns:1fr}}

/* Whole-keyboard alignment keeps every legend line in its existing vertical lane. */
.legend-alignment-card{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--field)}
.drawer-body .legend-alignment-card h3{margin:0;font-size:13px}
.legend-alignment-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.free-app .legend-alignment-options button{display:grid;justify-items:center;gap:8px;padding:10px 6px;font-size:11px;min-width:0;background:var(--panel)}
.free-app .legend-alignment-options button.active{background:var(--hover);border-color:var(--violet);color:var(--violet)}
.align-key{display:flex;flex-direction:column;justify-content:space-between;width:37px;height:43px;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--field);color:var(--ink);box-sizing:border-box;line-height:1}
.align-key small{font-size:9px;font-weight:400}.align-key strong{font-size:13px}.align-left{align-items:flex-start}.align-center{align-items:center}.align-right{align-items:flex-end}
.drawer-head-actions{display:flex;gap:6px;align-items:center}.free-app .drawer-head .menu-help{font-size:13px;width:29px;height:29px;padding:3px;border:1px solid var(--line);border-radius:50%;color:var(--violet)}
.free-app .tutorial-start{display:flex;gap:7px;align-items:center;font-size:11px;background:var(--hover);color:var(--violet);white-space:nowrap}
.tutorial-start>span:first-child{display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;width:17px;height:17px;font-size:11px}
.tutorial-invite{display:flex;align-items:center;border:1px solid var(--line);border-radius:22px;background:var(--panel);flex-shrink:0}
.free-app .tutorial-invite button{border:0;background:transparent;color:var(--violet);font-size:11px;padding:8px 11px}.free-app .tutorial-invite #tutorialInviteDismiss{font-size:17px;color:var(--muted);padding:3px 11px 3px 0}
.workspace-footer:has(.tutorial-invite:not([hidden])){flex-direction:column;gap:9px}
.tutorial-spotlight{position:fixed;z-index:21;pointer-events:none;border:2px solid var(--violet);border-radius:10px;box-shadow:0 0 0 4px #8652ed25}
.tutorial-card{position:fixed;z-index:22;bottom:18px;left:138px;width:350px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 100px);overflow-y:auto;padding:18px;border:1px solid var(--violet);border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);box-sizing:border-box}
.tutorial-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.tutorial-card-head>span{font-size:9px;letter-spacing:1.5px;color:var(--violet);font-weight:700}.free-app .tutorial-card-head button{padding:3px 5px;font-size:11px;border:0;color:var(--muted)}
.tutorial-card h2{font-size:16px;line-height:1.3;margin:6px 0 10px}.tutorial-card p{font-size:12px;line-height:1.6;margin:9px 0;color:var(--muted)}.tutorial-card .tutorial-tip{padding:10px 11px;border-radius:10px;background:var(--field);font-size:11px}.tutorial-card .tutorial-progress{font-size:10px;color:var(--violet)}
.tutorial-nav{display:flex;gap:6px;justify-content:space-between;align-items:center;margin-top:13px;border-top:1px solid var(--line);padding-top:12px}.free-app .tutorial-nav button{padding:8px 10px;font-size:11px}.tutorial-actions{display:flex;gap:6px;flex-wrap:wrap}.free-app .tutorial-actions button{padding:7px 9px;font-size:10px;color:var(--violet)}
.help-demo{display:flex;flex-direction:column;align-items:center;gap:9px;margin:14px 0;line-height:1.5}.help-demo>small,.demo-bleed>small{font-size:10px;color:var(--muted);text-align:center}
.demo-keyset,.demo-flow,.demo-scenes{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.demo-key{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:7px;background:var(--field);color:var(--ink);font-size:11px;box-sizing:border-box}.demo-key.demo-wide{width:90px}.demo-key.demo-selected{border-color:var(--violet);background:var(--hover);color:var(--violet)}
.demo-gradient{display:flex;gap:4px;padding:8px;border-radius:10px;background:linear-gradient(90deg,#7c3aed,#f472b6,#22d3ee)}.demo-gradient .demo-key{background:#ffffff22;border-color:#ffffff55;color:white}
.demo-bleed{display:flex;flex-direction:column;align-items:center;gap:9px}.demo-bleed-area{display:grid;place-items:center;width:125px;height:65px;border:1px dashed #d89d3e;border-radius:6px;background:linear-gradient(45deg,#7c3aed,#22d3ee)}.demo-bleed-area .demo-key{width:76px;height:30px;color:white;background:#ffffff11;border-color:#70c9ff}
.demo-flow>span:not([aria-hidden]),.demo-scenes span{font-size:10px;padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--field)}
.free-app .help-dialog{width:min(480px,calc(100vw - 32px));max-height:85dvh;padding:24px;border-color:var(--line);background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}.help-dialog .dialog-head h2{font-size:18px;line-height:1.4}.help-dialog .dialog-head button{padding:3px 8px;font-size:22px}.help-dialog p{font-size:13px;line-height:1.7;color:var(--muted)}.help-dialog li{font-size:12px;line-height:1.7;margin:12px 0;color:var(--ink)}.help-dialog ul{padding-left:18px}.help-dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.free-app .help-dialog-actions button{font-size:12px}
.free-app[data-tutorial=true] .workspace-footer{visibility:hidden}.free-app[data-tutorial=true] .keyboard-space{bottom:calc(var(--tutorial-card-height,300px) + 42px)}.free-app[data-tutorial=true] .context-toolbar{bottom:calc(var(--tutorial-card-height,300px) + 15px)}
@media(max-width:1099px) and (min-width:701px){.tutorial-card{left:123px;width:320px}}
@media(max-width:700px){.free-actions .guide-label{display:none}.free-app .tutorial-start{padding:7px;border:0;background:transparent}.tutorial-start>span:first-child{width:18px;height:18px}.free-brand{font-size:16px}.free-header{gap:6px}.free-actions{gap:3px}.tutorial-card{left:10px;right:10px;bottom:10px;width:auto;max-width:none;max-height:38dvh;padding:12px 14px;border-radius:14px}.tutorial-card .help-demo{display:none}.tutorial-card h2{font-size:14px;margin:3px 0 7px}.tutorial-card p{font-size:11px;margin:6px 0}.tutorial-card .tutorial-tip{font-size:10px;padding:7px 9px}.tutorial-nav{margin-top:8px;padding-top:8px}.free-app[data-tutorial=true] .tool-drawer{bottom:calc(var(--tutorial-card-height,250px) + 20px)}.free-app[data-tutorial=true] .keyboard-space{bottom:calc(var(--tutorial-card-height,250px) + 120px)}.free-app[data-tutorial=true] .context-toolbar{bottom:calc(var(--tutorial-card-height,250px) + 95px)}.tutorial-invite{max-width:100%}.free-app .tutorial-invite button{font-size:10px}.help-dialog .dialog-head h2{font-size:16px}}
@media(max-width:380px){.free-header .free-brand{display:none}.free-header .brand{flex-shrink:0}.free-actions{margin-left:auto}}
@media(min-width:701px) and (max-width:1099px){.free-app[data-tutorial=true][data-drawer-open=true] .tutorial-card{left:18px;width:min(350px,calc(100vw - 420px))}}

.free-actions #buyButton{white-space:nowrap}.checkout-dialog{width:min(700px,94vw);line-height:1.6}.checkout-dialog img{display:block;max-width:100%;max-height:240px;object-fit:contain;margin:15px auto;background:#24212d;border-radius:10px}.checkout-dialog h3{font-size:18px}.checkout-price{font-size:30px;font-weight:800;color:#c5a9ff;margin:14px 0}.checkout-confirm{display:flex;gap:10px;align-items:flex-start;margin:20px 0}.checkout-confirm input{margin-top:6px;flex:none}.checkout-notice{padding:12px;border:1px solid #8652ed;border-radius:8px}.checkout-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.checkout-actions a{color:#c5a9ff}.checkout-dialog button:disabled{opacity:.55}.checkout-dialog p{overflow-wrap:anywhere}@media(max-width:1000px){.free-header{height:auto;min-height:76px;flex-wrap:wrap}.free-actions{flex-wrap:wrap;justify-content:flex-end}.free-actions #buyButton{padding:10px}.free-actions #saveStatus{display:none}}@media(max-width:600px){.free-header .free-actions{gap:6px}.free-actions #buyButton{font-size:12px}.checkout-dialog{padding:16px}.checkout-dialog .dialog-head{align-items:flex-start}.checkout-dialog .dialog-head h2{font-size:20px}.checkout-dialog .dialog-head button{font-size:12px}}

.checkout-actions a.primary{display:inline-flex;align-items:center;background:#8652ed;border:1px solid #8652ed;border-radius:8px;padding:12px 16px;color:#fff;font-size:14px;font-weight:700;text-decoration:none}.checkout-actions a.primary:hover{background:#9c70ff}.checkout-dialog p{margin-bottom:10px}.checkout-actions a:focus-visible{outline:2px solid #c5a9ff;outline-offset:4px}

.customer-card{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}.customer-card p{overflow-wrap:anywhere;margin-bottom:10px}.customer-card button{margin:5px 5px 0 0}.customer-dialog{width:min(520px,94vw);line-height:1.6}.customer-dialog input{width:100%;background:#111119;border:1px solid #444451;border-radius:7px;color:inherit;padding:12px;font:inherit;margin:6px 0 15px}.customer-dialog label{display:block}.customer-dialog button{margin:6px 6px 0 0}.customer-dialog #customerDialogStatus{color:#d4baff;min-height:24px;margin:12px 0}.customer-dialog #identityCode{font-size:25px;letter-spacing:.3em}.customer-dialog p{margin-bottom:12px}

/* Free kits use the same editor tools and physical key catalog. */
.kit-mode{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}.kit-mode label,#kitBuilder>label{display:block;margin:12px 0 8px;font-weight:600}.kit-mode select{width:100%}.kit-presets{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.kit-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;max-height:42vh;overflow:auto;padding:2px}.kit-key{text-align:left;display:grid;gap:6px;padding:11px;min-height:64px}.kit-key strong{font-size:14px}.kit-key small{font-size:10px;opacity:.7;overflow-wrap:anywhere}.kit-key.active{border-color:#b69aff;background:#7e54bd25}#kitSummary{font-size:13px}#buyButton:disabled{opacity:.55;cursor:default}#kitShortcut{white-space:nowrap}@media(max-width:650px){#kitShortcut{font-size:12px;padding:8px}.workspace-heading{flex-wrap:wrap}}
.kit-selection-bar{flex:1 0 100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:4px}.kit-steps{display:flex;gap:6px}.kit-steps button{font-size:12px;padding:9px 12px}#kitInlineSummary{color:var(--ink);font-size:12px}.kit-selection-bar>button{font-size:11px;padding:7px}.kit-chosen{padding-left:18px;max-height:180px;overflow:auto;font-size:12px;line-height:1.9;color:var(--muted)}.row-map-panel{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.row-map-panel>label{display:flex;gap:8px;align-items:center;font-size:13px}.row-map-legend{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.row-map-legend span{display:flex;gap:6px;align-items:center;font-size:12px}.row-map-legend span:before{content:'';width:10px;height:10px;border-radius:3px;background:var(--row-color)}.row-map-inline{flex:1 0 100%;margin:0}.row-map-warning{padding:12px;border:1px solid #df9969;border-radius:10px;font-size:12px;line-height:1.65;color:var(--ink);background:#d5944820}.model-meta .profile-alert{border-color:#c78b65;color:var(--ink);background:#d5944818}.row-map-table{font-size:12px;width:100%;border-collapse:collapse;margin-top:12px}.row-map-table th,.row-map-table td{padding:9px 5px;border-bottom:1px solid var(--line);text-align:left}.workspace-tools #rowMapShortcut{font-size:11px;white-space:nowrap;padding:8px}.workspace-tools{flex-wrap:wrap}@media(max-width:700px){.kit-selection-bar{gap:6px}.kit-steps button{font-size:10px;padding:8px}.kit-selection-bar>button{font-size:10px}#kitInlineSummary{font-size:10px}.workspace-meta{row-gap:8px}.model-meta .profile-alert{font-size:9px;padding:5px 8px}.workspace-tools #rowMapShortcut{font-size:10px}}

/* Editor shell: one aligned action bar, with secondary options disclosed on demand. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.free-app .free-header{height:72px;min-height:72px;padding:12px 28px;display:flex;align-items:center;flex-wrap:nowrap;gap:22px;position:relative;z-index:15}
.editor-brand{display:flex;align-items:center;gap:10px;flex:none}.free-header .brand{width:34px;height:34px;border-radius:10px;font-size:21px}.free-header .free-brand{font-size:20px;display:block}
.project-identity{min-width:0;display:grid;gap:2px;flex:1}.free-header .project-shortcut{display:block;margin:0;padding:2px 0;border:0;max-width:260px;font-size:13px;font-weight:500;color:var(--ink);text-align:left;border-radius:4px}.free-header #saveStatus{display:block;max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:var(--muted);line-height:1.4}
.free-header .free-actions{margin-left:auto;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;flex:none}.free-header .free-actions>button{min-height:38px;padding:9px 18px;font-size:12px}.free-header #saveButton{background:transparent;border-color:var(--line)}.free-header #buyButton{min-width:94px;padding-inline:18px}
.editor-menu{position:relative;margin:0}.editor-menu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;font-size:24px;line-height:1;color:var(--muted)}.editor-menu>summary::-webkit-details-marker{display:none}.editor-menu>summary:hover,.editor-menu[open]>summary{background:var(--hover);color:var(--ink)}.editor-menu>summary:focus-visible{outline:2px solid var(--violet);outline-offset:3px}.editor-menu-items{position:absolute;right:0;top:calc(100% + 9px);width:210px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow);z-index:25}.free-app .editor-menu-items button{display:block;width:100%;min-height:40px;margin:0;padding:10px 12px;text-align:left;border:0;background:transparent;font-size:12px;color:var(--ink);border-radius:7px}.free-app .editor-menu-items button:hover{background:var(--hover)}
.free-app .free-workspace{height:calc(100dvh - 72px);min-height:560px;display:flex;flex-direction:column;padding:24px 28px 18px 120px;overflow:hidden;gap:0}.free-app .workspace-heading{padding:0;margin:0 0 20px;display:block}.workspace-heading h1{font-size:20px;line-height:1.25;letter-spacing:-.4px;font-weight:600}.workspace-heading p{font-size:12px;margin:6px 0 0;max-width:none;line-height:1.5}
.free-app .workspace-meta{position:relative;inset:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;max-width:none;margin:0;padding:0 0 16px;border-bottom:1px solid var(--line);z-index:2}
.free-app .model-meta{gap:9px;flex-wrap:nowrap;min-width:0;grid-column:1}.free-app .model-meta #modelBadge{border-radius:9px;padding:8px 12px;font-size:12px;font-weight:500;max-width:190px;color:var(--ink)}.free-app .model-meta #modelBadge:after{content:'⌄';margin-left:9px;color:var(--muted)}.free-app .model-meta>span{border:0;background:none;padding:0;font-size:11px}.free-app .model-meta #count{display:block;font-size:10px;color:var(--muted)}
.free-app .workspace-tools{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;grid-column:3;justify-self:end;width:auto;max-width:100%}.free-app .selection-actions{display:flex;align-items:center;gap:4px}.free-app #multiSelect{font-size:11px;padding:8px 10px;min-height:33px;background:transparent;border-color:var(--line);color:var(--muted)}.free-app #multiSelect.active{background:var(--accent);color:#fff;border-color:var(--accent)}.free-app .selection-actions #selectAllKeys{font-size:10px;padding:7px 6px;color:var(--muted)}
.free-app .keyboard-zoom{gap:0;flex-wrap:nowrap}.free-app .keyboard-zoom>div{border-radius:8px;padding:2px;background:transparent}.free-app .keyboard-zoom button{font-size:16px;min-width:24px;padding:3px 5px}.free-app .keyboard-zoom input{width:34px;font-size:11px}.free-app .keyboard-zoom #keyboardZoomFit{font-size:17px;padding:3px 7px;margin-left:3px}
.free-app .kit-selection-bar{flex:none;grid-column:2;display:flex;align-items:center;flex-wrap:nowrap;gap:9px;padding:0;justify-content:center;min-width:0}.free-app .kit-steps{display:flex;gap:2px;background:var(--field);border:1px solid var(--line);padding:3px;border-radius:10px}.free-app .kit-steps button{padding:6px 10px;font-size:11px;border:0;min-height:28px;white-space:nowrap;background:transparent;color:var(--muted);border-radius:7px}.free-app .kit-steps button.active{background:var(--accent);color:#fff}.free-app #kitIncludeSelection{display:flex;align-items:center;gap:4px;font-size:10px;padding:7px 4px;border:0;white-space:nowrap}.free-app #kitInlineSummary{font-size:10px;color:var(--muted)}.free-app .row-map-inline{grid-column:1/-1;margin:0;flex:none}.free-app #bleedAlert{grid-column:1/-1;justify-self:start;max-width:100%;white-space:normal;font-size:11px}
.free-app .keyboard-space,.free-app[data-drawer-open=true] .keyboard-space{position:relative;inset:auto;flex:1;min-height:220px;width:100%;margin:0;overflow:auto;contain:size layout;display:block}.free-app .stage-viewport{padding:12px}.free-app .context-toolbar,.free-app[data-drawer-open=true] .context-toolbar{position:relative;inset:auto;transform:none;flex:none;align-self:center;max-width:100%;width:auto;margin:10px 0 0;padding:8px 12px;box-shadow:none;flex-wrap:wrap;justify-content:center;gap:7px}.free-app .context-toolbar strong{font-size:11px;max-width:160px;overflow:hidden;text-overflow:ellipsis}.free-app .context-toolbar button{font-size:11px;padding:7px 9px}.free-app .workspace-footer,.free-app[data-drawer-open=true] .workspace-footer{position:relative;inset:auto;flex:none;justify-content:center;margin-top:10px;min-height:0}
.free-app .tool-rail{top:96px;left:24px;padding:6px;gap:3px;border-radius:14px}.free-app .tool-rail button{width:62px;padding:10px 4px;font-size:10px;gap:6px}.free-app .tool-rail button>span{font-size:20px;height:24px}
.keyboard-basics{display:grid;gap:8px}.keyboard-basics .label{font-size:12px;margin-top:12px}.keyboard-basics .label:first-child{margin-top:0}.keyboard-basics select{width:100%;font-size:13px;min-height:42px}.free-app .drawer-body{padding:22px;scrollbar-width:thin}.free-app .drawer-head{padding:17px 22px}.free-app .drawer-head h2{font-size:16px;font-weight:600}.free-app .kit-builder{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.free-app .kit-builder #kitSummary{font-size:12px;color:var(--muted);margin:0 0 12px}.free-app .kit-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 10px}.free-app .kit-presets button{font-size:12px;padding:9px}.free-app #kitShortcut{width:100%;font-size:12px;min-height:40px}.free-app .kit-availability{font-size:10px;line-height:1.5;margin-top:14px;opacity:.8}.free-app .kit-chosen{font-size:12px;line-height:1.9;padding-left:18px;max-height:180px}.free-app .editor-options{margin:0;border-top:1px solid var(--line);padding:16px 0}.free-app .editor-options>summary{font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}.free-app .editor-options>summary:after{content:'+';font-size:17px;font-weight:400;color:var(--muted)}.free-app .editor-options[open]>summary:after{content:'−'}.free-app .editor-options>summary::-webkit-details-marker{display:none}.free-app .editor-options[open]>summary{color:var(--ink);margin-bottom:16px}.free-app #kitChosenDetails{margin-top:16px}.free-app #keyboardHelp{margin-top:20px}.free-app #profileAlert{width:100%;text-align:left;font-size:11px;line-height:1.5;padding:10px 12px;margin-top:18px;border-color:#9b754b;background:#ae844313;color:var(--muted)}.free-app .row-map-switch{display:flex;gap:8px;align-items:center;font-size:12px;margin-bottom:12px}.free-app .row-map-table{font-size:11px;margin-top:14px}.free-app .row-map-warning{font-size:11px;padding:10px;line-height:1.6}.free-app #rowMapSelection{overflow-wrap:anywhere}.free-app .editor-options .gradient-card,.free-app .editor-options .legend-alignment-card,.free-app .editor-options .text-effects-section{border:0;padding:0;margin:0;background:transparent}.free-app .editor-options .group{padding:0;margin:0}
@media(min-width:1100px){.free-app[data-drawer-open=true] .free-workspace{padding-right:404px}.free-app[data-drawer-open=true] .workspace-meta{grid-template-columns:minmax(0,1fr) auto;right:auto}.free-app[data-drawer-open=true] .workspace-tools{grid-column:1/-1;justify-self:end}.free-app[data-drawer-open=true] .kit-selection-bar{justify-content:flex-end}}
@media(max-width:1100px){.free-app .free-header{padding-inline:20px}.free-app .free-workspace{padding-inline:110px 22px}.free-app .tool-rail{left:20px}.free-app .workspace-meta{grid-template-columns:minmax(0,1fr) auto}.free-app .workspace-tools{grid-column:1/-1}.free-app .kit-selection-bar{justify-content:flex-end}}
@media(max-width:700px){.free-app .free-header{height:64px;min-height:64px;padding:10px 14px;gap:12px}.editor-brand{gap:0}.free-header .brand{width:30px;height:30px;font-size:18px}.free-header .free-brand{display:none}.free-app .project-identity{gap:1px}.free-app .free-header .project-shortcut{display:block;font-size:11px;max-width:130px}.free-app .free-header #saveStatus{font-size:9px;max-width:130px}.free-app .free-header .free-actions{gap:5px}.free-app .free-header .free-actions>button{font-size:11px;padding:8px 10px;min-height:34px}.free-app .free-header #buyButton{min-width:70px;padding:8px 10px}.editor-menu>summary{width:30px;height:34px}.free-app .free-workspace{height:calc(100dvh - 64px);min-height:590px;padding:20px 14px 86px}.free-app .workspace-heading{margin-bottom:16px}.workspace-heading h1{font-size:18px}.workspace-heading p{font-size:11px;margin-top:5px;max-width:none}.free-app .workspace-meta{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-bottom:12px}.free-app .model-meta #modelBadge{font-size:11px;max-width:155px;padding:7px 9px}.free-app .model-meta{gap:7px;grid-column:1}.free-app .model-meta #profileBadge{font-size:10px}.free-app .model-meta #count{display:none}.free-app .workspace-tools{display:contents}.free-app .keyboard-zoom{grid-column:2;grid-row:1;justify-self:end}.free-app .selection-actions{grid-column:1/-1;justify-content:flex-end}.free-app .kit-selection-bar{grid-column:1/-1;justify-content:space-between;order:initial}.free-app .kit-steps button{padding:7px 12px;font-size:11px}.free-app #kitInlineSummary{font-size:11px}.free-app #kitIncludeSelection{font-size:11px}.free-app .keyboard-space{min-height:200px}.free-app .tool-rail{left:50%;top:auto;bottom:12px;transform:translateX(-50%);padding:4px;gap:1px;border-radius:14px;max-width:calc(100% - 20px)}.free-app .tool-rail button{width:46px;min-width:46px;font-size:9px;padding:8px 3px;gap:4px}.free-app .tool-rail button>span{height:21px;font-size:18px}.free-app .context-toolbar{padding:7px;gap:4px;margin-top:6px}.free-app .context-toolbar strong{font-size:10px;max-width:110px}.free-app .context-toolbar button{font-size:10px;padding:6px}.free-app .workspace-footer{margin-top:7px}.free-app .tool-drawer{top:76px}.free-app .drawer-backdrop{inset:64px 0 0}.free-app .drawer-body{padding:20px}.free-app .drawer-head{padding:15px 20px}}
@media(max-width:380px){.free-app .free-header{gap:8px;padding-inline:10px}.free-app .free-header .project-shortcut,.free-app .free-header #saveStatus{max-width:92px}.free-app .model-meta #modelBadge{max-width:125px}.free-app .keyboard-zoom button{min-width:19px;padding-inline:3px}.free-app .keyboard-zoom input{width:29px}.free-app .keyboard-zoom #keyboardZoomFit{padding-inline:4px}.free-app .kit-steps button{padding-inline:9px}}
@media(max-height:670px) and (min-width:701px){.free-app .tool-rail{top:88px}.free-app .tool-rail button{padding:8px 4px;gap:4px}.free-app .tool-rail button>span{height:21px}}

body[data-collab] [data-open-drawer="gallery"]{display:none}

/* Keep the guide visible without opening the options menu. */
.free-actions .tutorial-start{border-color:var(--violet);font-size:12px;padding:9px 12px;gap:7px}
.free-app .tutorial-invite{border-color:var(--violet);border-radius:14px;max-width:100%;box-shadow:0 4px 20px #7040cd18}
.free-app .tutorial-invite #tutorialInviteStart{display:flex;align-items:center;gap:22px;text-align:left;padding:12px 16px;white-space:normal}
.tutorial-invite-copy{display:grid;gap:4px}.tutorial-invite-copy strong{font-size:13px;color:var(--ink)}.tutorial-invite-copy small{font-size:11px;color:var(--muted)}.tutorial-invite-cta{font-size:12px;font-weight:700;white-space:nowrap}
#tutorialMeter{display:block;width:100%;height:5px;margin:10px 0 14px;accent-color:var(--accent)}
@media(max-width:700px){.free-actions .tutorial-start{font-size:10px;padding:8px 7px;gap:4px}.free-actions .tutorial-start>span:first-child{display:none}.free-app .tutorial-invite #tutorialInviteStart{padding:10px 12px;gap:10px}.tutorial-invite-copy strong{font-size:11px}.tutorial-invite-copy small{font-size:10px;max-width:160px}.tutorial-invite-cta{font-size:10px}.free-app .tutorial-card{max-height:43dvh}}
@media(max-width:380px){.free-header .free-brand{display:none}.free-actions{gap:3px}.free-actions #saveButton{padding-inline:8px}}
@media(max-width:600px){.free-app .free-header .project-identity{display:none}.free-app .free-header .free-actions>.tutorial-start{font-size:10px;padding:7px;gap:0;max-width:90px;white-space:normal;line-height:1.2}.free-app .free-header .free-actions>.tutorial-start>span:first-child{display:none}}