/* White canvas, peach tool buttons and blue adjustment controls inspired by LogoPit. */
:root{--ink:#202b39;--muted:#7a8491;--accent:#19a5da;--paper:#fff;--border:#e2e7ee;--blue:#159ed1;--peach:#ffe0cc}body{background:#f3f5f8;color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible{outline-color:var(--blue)}h1,h2{font-family:var(--sans);font-weight:600;letter-spacing:-.7px}.topbar{background:#fff;color:#263445;border-bottom:1px solid var(--border)}.brand-mark{background:var(--peach);border:0;color:#6c402c}.brand small,.project-title{color:#8390a1}.status-dot,.live-pill span{background:var(--blue)}.primary{background:var(--blue);color:white;border-radius:22px}.primary:hover{background:#0e8fc1}.topbar .iconbutton{background:var(--peach);border-radius:50%;margin-right:6px;width:36px;height:36px}.quiet:hover{background:#e7eff8}.panel{background:white}.studio{background:#f3f5f8}.studio-top .eyebrow{color:#8e98a5}.studio-top h1{font-size:28px}.live-pill{color:#6994ac}.count{background:#e5f5fd;color:#0f8dbb}.searchbox,.categories button,.outline,.font-card{border-color:var(--border);border-radius:9px}.categories button.selected{background:var(--blue);border-color:var(--blue)}.library-toolbar [aria-pressed=true]{color:var(--blue);background:#e9f8fe}.font-card.active{border-color:var(--blue);background:#f0faff;box-shadow:inset 0 0 0 1px var(--blue)}.font-meta{color:#788594;font-size:10px}.font-tag{color:#929daa;letter-spacing:.3px}.font-sample{color:#182637}.favorite.on{color:var(--blue)}.favorite.on svg{fill:#b3e9fa}.outline:hover{background:#f1f9fd}.textlink{color:#168cbb}.preview-dock{background:#fff;border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:16px}.stage-toolbar{background:#fff;border:0;border-radius:0;height:42px}.bg-option{border-radius:50%;width:30px;height:30px}.bg-option.selected{border-color:#76c9e9;background:#edfaff}.bg-option span{border-color:#cad2db}.paper-swatch{background:white}.dark-swatch{background:#1e2630}.checker-swatch{background:conic-gradient(#dce1e8 25%,#fff 0 50%,#dce1e8 0 75%,#fff 0);background-size:8px 8px}#selectedName{color:#648295;font-size:10px}.stage{border:0;border-radius:0}.stage.paper{background-color:#fff;background-image:linear-gradient(#eaf0f5 1px,transparent 1px),linear-gradient(90deg,#eaf0f5 1px,transparent 1px);background-size:22px 22px}.stage.dark{background:#1c242e}.stage.checker{background:conic-gradient(#e3e7ec 25%,#fff 0 50%,#e3e7ec 0 75%,#fff 0);background-size:18px 18px}.stage-corner,.stage-bottom,.stage-index{color:#a5aeba;letter-spacing:1px}.stage-loading{background:#ffffffdf}.text-dock{margin:0;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:9px 12px}.text-dock label{color:#9ba4b0}.text-dock textarea{color:#24374b;font-size:20px;resize:none}.text-dock button{background:var(--peach);color:#80523b;border-radius:50%}.tool-strip{display:flex;justify-content:space-around;border-top:1px solid var(--border);padding:9px 5px 5px;background:#fff;gap:4px}.tool-strip button{flex:1;display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0;min-height:53px;color:#5f7287;border-radius:9px;font-size:9px}.tool-strip button b,.tool-strip button>svg{height:30px;width:30px;display:grid;place-items:center;background:var(--peach);border-radius:50%;font-size:21px;font-weight:400;line-height:1}.tool-strip button>svg{padding:7px}.tool-strip button.active{background:#eaf8ff;color:#0695ca}.tool-strip button.active b,.tool-strip button.active>svg{background:#c8efff}.tool-strip .color-wheel{background:conic-gradient(#ed5268,#f7d04e,#63c879,#49b5e7,#a260e3,#ed5268);border:6px solid #ffe0cc}.tool-strip button.active .color-wheel{background:conic-gradient(#ed5268,#f7d04e,#63c879,#49b5e7,#a260e3,#ed5268);border-color:#c8efff}.action-controls,.quick-color,.quick-effects{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;color:var(--ink);scroll-margin-top:20px}.action-heading .eyebrow,.quick-color-head .eyebrow{color:#8e9eac;letter-spacing:1px}.action-heading h2{color:var(--ink);font-size:21px}.action-reset{border-color:#dae6ef;background:#f5fafd;color:#3388aa;border-radius:16px}.action-reset:hover{background:#e4f5ff}.action-slider label{color:#536a80;font-size:11px}.slider-value{background:#eaf8ff;color:#1a91c0;border-color:#c5e8f6;border-radius:12px}.slider-value:hover{background:#d3effa}.slider-step{background:#ffe7d8;color:#aa7354;border-radius:50%;width:27px;height:27px}.slider-step:hover{background:#ffd5bb}.slider-guide{color:#a2adbb}.action-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#21aae0 0 var(--slider-fill),#e1e7ed var(--slider-fill) 100%)}.action-slider input[type=range]::-webkit-slider-thumb{background:#20abe1;border-color:#fff;box-shadow:0 1px 4px #317f9f44}.action-slider input[type=range]::-moz-range-track{background:#e1e7ed}.action-slider input[type=range]::-moz-range-progress{background:#21aae0}.action-slider input[type=range]::-moz-range-thumb{background:#20abe1;border-color:white}.action-shortcuts{border-color:var(--border)}.action-shortcuts button{border-color:#d7eaf4;background:#f3fbff;color:#3c8cac;border-radius:18px}.action-shortcuts button:hover{background:#e7f7ff}.custom-color-label{color:#788ea0}.custom-color-label input[type=color]{border-color:#d5e0e9}.quick-color-head input[type=text]{background:#f3f9fc;border-color:#d8e7ef;color:#5a7f93}.quick-swatches button.selected,.swatches button.selected{outline-color:var(--blue)}.gradient-controls{display:flex;justify-content:space-between;align-items:center;padding:15px 0;margin-top:12px;border-top:1px solid var(--border);gap:10px;color:#688095;font-size:11px}.gradient-end{display:flex;align-items:center;gap:10px;font-size:11px;color:#688095}.gradient-end input[type=color]{height:32px;width:36px;padding:2px;border:1px solid #d5e0e9;border-radius:6px;background:white}.gradient-controls input[type=checkbox]{accent-color:var(--blue);width:16px;height:16px}.quick-effects .range-control{margin-top:20px}.quick-effects #moreEffects{display:block;margin-top:15px}.finish-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.finish-presets button{border:1px solid var(--border);border-radius:8px;padding:12px 4px;font-size:10px;background:#fafcfe}.finish-presets button:hover{background:#edf8fd;border-color:#9bd6ee}.range-control label,.color-row{color:#6f8193}.range-control input[type=number],.color-row input[type=text]{background:#f3f9fc;color:#4a7d96;border-color:#dce9f0;border-radius:6px}.range-control input[type=range],.check input{accent-color:var(--blue)}.controls details{border-color:var(--border)}.controls summary:after,.controls summary span{color:#91aec1}.preset-row button{background:white;border-color:var(--border);border-radius:16px;color:#71869a}.preset-row button:hover{background:#eaf8ff}.layer-row,.saved-row{border-color:var(--border);border-radius:8px}.layer-row.selected{border-color:var(--blue);background:#f3fbff}.layer-number{background:#e8f7fe;color:#379fc5}.letter-picker button{border-color:var(--border);border-radius:7px}.letter-picker button.selected{background:#d8f3ff;border-color:var(--blue)}.control-hint,.saved-list p{color:#8f9dad}.studio-note{border-color:var(--border);color:#8c9daa}dialog{background:#fff;border-color:var(--border);box-shadow:0 20px 100px #18274044}dialog::backdrop{background:#202f4acc}.export-types button{border-color:var(--border)}.export-types button.selected{background:#edfaff;border-color:var(--blue)}.export-label input,.export-label select{border-color:var(--border);color:#385671}.export-label,.export-types small,.dialog-intro,.export-note,#helpDialog p,#helpDialog li{color:#7f91a2}.export-dimensions,#exportStatus{color:#168cb4}.alphabet-preview{background:#fafbfd;border-color:var(--border)}.specimen-references{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.specimen-references a{font-size:11px;color:#2291bb;border:1px solid #d9edf6;background:#f3fbff;border-radius:20px;padding:8px 12px;text-decoration:none}#toast{background:#263d53;border-color:#4f7997;color:white}#selectionUI{stroke:none;pointer-events:none}.selection-border{fill:none;stroke:#28ade1;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:5 3}.selection-handle{pointer-events:all;cursor:grab}.selection-handle circle{fill:#fff;stroke:#27aee0;stroke-width:1.5;vector-effect:non-scaling-stroke}.selection-handle text{fill:#1699ce;font-family:Arial,sans-serif;text-anchor:middle;dominant-baseline:central;stroke:none;pointer-events:none}.collection-note{line-height:1.5}
@media(max-width:960px){body{padding-bottom:12px}.mobile-nav{display:none}.topbar{padding:0 12px;height:61px}.topbar .iconbutton{width:29px;height:29px;margin-right:4px}.header-actions .primary{border-radius:20px}.studio{padding:12px 10px}.studio-top{margin-bottom:11px}.studio-top h1{font-size:23px}.studio-top .eyebrow{font-size:7px}.preview-dock{top:0;padding:0;z-index:4;border-radius:10px;box-shadow:0 6px 15px #53647b14;margin-bottom:14px;overflow:hidden}.preview-dock .stage{height:clamp(145px,25dvh,230px)}.preview-dock .stage-toolbar{height:33px}.preview-dock .text-dock{margin:0;padding:5px 9px;height:43px}.preview-dock .text-dock textarea{height:30px;line-height:30px;font-size:18px}.preview-dock .text-dock label{font-size:6px}.preview-dock .text-dock .iconbutton{height:29px;width:29px}.tool-strip{padding:6px 4px 3px;gap:1px}.tool-strip button{font-size:9px;min-height:49px;gap:4px}.tool-strip button b,.tool-strip button>svg{height:29px;width:29px}.action-controls,.quick-color,.quick-effects{padding:17px 14px;scroll-margin-top:calc(var(--preview-height,290px) + 12px)}.action-heading h2{font-size:20px}.action-slider-grid{gap:18px 15px}.action-slider label{font-size:10px}.slider-value{min-height:29px;min-width:38px}.slider-step{width:26px;height:31px}.gradient-controls{font-size:10px}.gradient-end{font-size:10px}.action-shortcuts button{font-size:10px;border-radius:17px}.under-stage{scroll-margin-top:calc(var(--preview-height,290px) + 12px)}.layer-area{scroll-margin-top:calc(var(--preview-height,290px) + 12px)}.layer-list{flex-direction:column}.layer-row{max-width:none;width:100%;min-width:0}.layer-title{max-width:220px}.mobile-content .panel{padding:20px 10px;margin-top:0;border-radius:12px;border:1px solid var(--border)}.font-list{gap:8px}.font-sample{font-size:28px}.font-meta{font-size:8px;line-height:1.5}.font-card{min-height:110px}.font-tag{font-size:7px}.favorite.on{color:var(--blue)}.quick-color-head input[type=text]{width:68px}.custom-color-label span{display:none}#toast{bottom:20px}.saves-area{display:block}.saves-area.visible{display:block}.studio-note{display:flex;font-size:9px}.studio-top .live-pill{font-size:6px}.quick-swatches{gap:12px}.tool-strip button.active{box-shadow:none}.collection-note{font-size:10px}}
@media(max-width:380px){.studio-top h1{font-size:21px}.action-controls,.quick-color,.quick-effects{padding:15px 12px}.tool-strip button{font-size:8px}.topbar .brand{gap:6px}.brand-mark{width:29px;height:29px}.brand b{font-size:12px}.header-actions .quiet{font-size:9px}.header-actions .primary{font-size:10px;padding:7px 9px}.header-actions .primary svg{width:13px}}
@media(max-width:960px) and (max-height:540px){.preview-dock .stage{height:90px}.preview-dock .stage-toolbar{height:28px}.tool-strip{padding-top:3px}.tool-strip button{min-height:40px}.tool-strip button b,.tool-strip button>svg{height:23px;width:23px;font-size:17px}.preview-dock .text-dock{height:34px}}
@media(max-width:960px){body[data-tool=fonts] .action-controls,body[data-tool=fonts] .quick-color,body[data-tool=fonts] .quick-effects,body[data-tool=fonts] .preset-row,body[data-tool=fonts] .under-stage,body[data-tool=color] .action-controls,body[data-tool=color] .quick-effects,body[data-tool=color] .preset-row,body[data-tool=color] .under-stage,body[data-tool=effects] .action-controls,body[data-tool=effects] .quick-color,body[data-tool=effects] .preset-row,body[data-tool=effects] .under-stage,body[data-tool=layers] .action-controls,body[data-tool=layers] .quick-color,body[data-tool=layers] .quick-effects,body[data-tool=layers] .preset-row,body[data-tool=layers] .mobile-content,body[data-tool=edit] .quick-color,body[data-tool=edit] .quick-effects,body[data-tool=edit] .under-stage,body[data-tool=advanced] .action-controls,body[data-tool=advanced] .quick-color,body[data-tool=advanced] .quick-effects,body[data-tool=advanced] .preset-row,body[data-tool=advanced] .under-stage{display:none}body[data-tool=color] .mobile-content,body[data-tool=effects] .mobile-content{display:none}body[data-tool=fonts] .mobile-content{margin-top:0}.studio-note{display:none}}