@font-face{font-family:Lilita;src:url('./fonts/lilita.ttf')}@font-face{font-family:Pacifico;src:url('./fonts/pacifico.ttf')}@font-face{font-family:Baloo;src:url('./fonts/baloo.ttf')}
:root{--paper:#f9f7f2;--panel:#fffefa;--ink:#293d35;--muted:#879087;--green:#284e40;--accent:#c46753;--line:#e6e7df;--soft:#f0f3eb;--shadow:0 6px 24px #30493708;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:14px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button, input{accent-color:var(--green)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #c4675380;outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}button{color:inherit}a{color:inherit}input[type=number]::-webkit-inner-spin-button{opacity:1}input[type=checkbox]{width:16px;height:16px}.topbar{height:88px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.brand{text-decoration:none;display:flex;align-items:center;gap:13px}.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--green);color:#fff8e9;font-family:Georgia,serif;font-style:italic;font-size:42px;line-height:39px;text-align:center;position:relative}.brand-mark span{font-family:Arial;font-style:normal;font-size:14px;position:absolute;right:3px;top:-6px}.brand strong{font-size:24px;font-weight:650;letter-spacing:-1px}.brand strong span{font-size:19px;font-weight:400;letter-spacing:-.6px}.brand small{display:block;font-size:8px;letter-spacing:2.8px;margin-top:3px;color:#7c877c}.header-right{display:flex;align-items:center;gap:30px}.local-pill{font-size:12px;color:#6e7c6f;display:flex;align-items:center;gap:8px}.local-pill i,.model-status i{width:6px;height:6px;background:#729b75;border-radius:50%;display:inline-block}.btn{border:0;border-radius:9px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;transition:background .2s,transform .2s}.btn:hover:not(:disabled){transform:translateY(-1px)}.quiet{background:transparent;font-size:12px;padding:10px}.primary{background:var(--green);color:white;box-shadow:0 4px 10px #254b401c}.primary:hover{background:#183c2f}.workspace{display:grid;grid-template-columns:344px minmax(0,1fr);max-width:1800px;margin:auto;min-height:calc(100vh - 88px)}.sidebar{background:var(--panel);border-right:1px solid var(--line)}.sidebar-heading{padding:28px 26px 23px;border-bottom:1px solid var(--line)}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.9px;color:#8a9386;margin:0 0 8px}.sidebar-heading h1{font-family:Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-1px;margin:0 0 7px}.sidebar-heading>p:last-child{color:#858b81;font-size:12px;margin:0}.form-section{padding:23px 25px;border-bottom:1px solid var(--line)}.section-title{display:flex;align-items:center;gap:9px;margin-bottom:17px}.section-title h2{font-size:13px;font-weight:650;margin:0;letter-spacing:-.1px}.step{border:1px solid #dfe4d9;color:#89937e;border-radius:50%;font-size:9px;display:grid;place-items:center;width:23px;height:23px}.form-section label{display:block;font-size:11px;font-weight:500;margin-bottom:8px;color:#5f6a5d}.name-wrap{position:relative}.name-wrap input{border:1px solid #ccd6c5;background:#fcfcf8;width:100%;height:49px;border-radius:7px;font-size:23px;font-family:Lilita,sans-serif;padding:8px 45px 8px 13px;color:var(--green)}.name-wrap span{position:absolute;right:10px;top:20px;font-size:9px;color:#a1a698}.hint{font-size:10px;color:#909789;line-height:1.6;margin:7px 0 17px}.font-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.font-card{background:transparent;border:1px solid var(--line);border-radius:7px;padding:10px 3px 8px;min-width:0}.font-card .sample{font-size:17px;display:block;margin:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}.font-card small{font-size:7px;letter-spacing:.9px;color:#949b8f;display:block}.lilita{font-family:Lilita}.pacifico{font-family:Pacifico}.baloo{font-family:Baloo}.font-card.selected{border-color:#57785b;background:#f0f4ec}.font-card.selected small{color:#4d7153}.link-btn{border:0;background:transparent;color:#7b8874;font-size:10px;text-align:left;padding:9px 0;display:inline-flex;align-items:center;gap:8px}.link-btn:hover{color:var(--green);text-decoration:underline}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.unit-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#fffefa;overflow:hidden;height:37px}.unit-input input{width:100%;min-width:0;border:0;background:transparent;padding:8px 3px 8px 10px;font-size:12px;color:var(--ink)}.unit-input span{color:#a3aa9d;font-size:10px;padding:0 9px}.segmented{display:flex;border:1px solid var(--line);padding:3px;border-radius:7px;background:#f7f8f2}.segmented button{border:0;background:transparent;border-radius:4px;padding:9px 3px;flex:1;font-size:10px;white-space:nowrap;color:#8d9587}.segmented button.selected{background:#fffefa;color:var(--green);box-shadow:0 1px 4px #344c3514}.slider-label{display:flex;justify-content:space-between;margin-top:18px;align-items:center}.slider-label label{margin:0}.slider-label output{font-size:10px;color:#61765c;background:#edf2e7;border-radius:4px;padding:3px 7px}input[type=range]{width:100%;margin:14px 0 0;height:4px}.form-section>.hint:last-child{margin-bottom:0}.section-title .switch{margin:0 0 0 auto}.switch input{position:absolute;opacity:0}.switch span{display:block;width:29px;height:17px;background:#d0d5c9;border-radius:20px;position:relative}.switch span:after{content:'';position:absolute;width:11px;height:11px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .2s}.switch input:checked+span{background:#507453}.switch input:checked+span:after{transform:translateX(12px)}.switch input:focus-visible+span{outline:3px solid #c4675380}.deco-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.deco-options button{background:transparent;border:1px solid var(--line);border-radius:7px;padding:11px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:9px;color:#89937e}.deco-options svg{width:23px;height:23px}.deco-options .selected{border-color:#c78670;background:#fcf0e9;color:#b16852}.form-section .check-row{display:flex;align-items:center;gap:7px;margin:16px 0 0}.check-row input{margin:0}.check-row small{margin-left:auto;font-size:8px;font-weight:400;color:#9a9e91}.sidebar-footer{display:flex;align-items:center;gap:7px;padding:20px 25px;color:#9aa18f;font-size:9px}.sidebar-footer svg{width:12px;height:12px}.studio{padding:34px 38px 20px;min-width:0}.studio-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:20px}.studio-heading .eyebrow{margin-bottom:7px}.studio-heading h2{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-.9px;margin:0}.studio-heading h2>span{color:#c1795c}.project-actions{display:flex;gap:6px}.icon-btn{border:1px solid #dfe4da;background:#fffefa;border-radius:7px;display:grid;place-items:center;width:34px;height:34px;color:#7d8876}.icon-btn:hover{background:#ebf0e5;border-color:#b8c7b1}.icon-btn svg{width:16px;height:16px}.viewport-wrap{height:clamp(370px,48vw,590px);border:1px solid #e1e5da;border-radius:13px;background:#eeeee4;position:relative;overflow:hidden;box-shadow:var(--shadow)}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-top{position:absolute;z-index:2;top:19px;left:21px;right:21px;display:flex;justify-content:space-between;pointer-events:none}.preview-badge{display:flex;align-items:center;gap:7px;letter-spacing:1.2px;font-size:8px;color:#8b947e}.preview-badge svg{width:17px;height:17px}.preview-badge b{font-weight:600;background:#dfe4d5;border-radius:3px;padding:3px 5px;font-size:8px}.model-status{display:flex;align-items:center;gap:6px;font-size:9px;background:#ffffffb3;border:1px solid #e2e6da;border-radius:20px;padding:6px 10px;color:#6b7b62}.model-status.error{color:#a35242}.model-status.error i{background:#b66951}.model-status.busy i{background:#bd9a61}.viewer-toolbar{position:absolute;bottom:48px;left:20px;right:20px;z-index:2;display:flex;justify-content:space-between;align-items:center}.view-buttons,.zoom-buttons{display:flex;gap:3px;padding:4px;border:1px solid #e1e5d8;border-radius:8px;background:#fffefaed;box-shadow:0 3px 14px #243b2810}.view-buttons button,.zoom-buttons button{border:0;background:transparent;color:#919b86;font-size:10px;padding:8px 11px;border-radius:4px}.view-buttons button.selected{background:#eaf0e3;color:#4a6749}.zoom-buttons button{padding:3px 8px;font-size:18px;line-height:25px}.zoom-buttons svg{width:15px;height:15px;vertical-align:middle}.orbit-hint{position:absolute;bottom:14px;width:100%;text-align:center;font-size:7px;color:#a5ac98;letter-spacing:1.6px;pointer-events:none}.orbit-hint span{margin:0 12px}.below-view{display:flex;align-items:center;justify-content:space-between;padding:21px 2px 24px;gap:16px}.color-panel{display:flex;align-items:center;gap:22px}.color-panel .eyebrow{font-size:7px;margin:0}.color-panel p{font-size:12px;margin:4px 0 0;color:#65715d}.color-control{display:flex;align-items:center;gap:7px}.color-control label{font-size:10px;color:#929b86}.color-control input{width:28px;height:28px;padding:0;border:3px solid #fffefa;border-radius:50%;box-shadow:0 0 0 1px #d9dece;background:none;cursor:pointer;overflow:hidden}.color-control input::-webkit-color-swatch-wrapper{padding:0}.color-control input::-webkit-color-swatch{border:0;border-radius:50%}.color-note{font-size:9px;line-height:1.6;color:#9ba38e;text-align:right}.export-card{padding:21px 22px;background:var(--panel);border:1px solid #dce3d4;border-radius:10px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow)}.export-info{display:flex;align-items:center;gap:13px;flex:1}.export-icon{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:50%;background:#ecf3e6;color:#749469}.export-icon svg{width:18px;height:18px}.export-info strong{font-size:12px;font-weight:600}.export-info p{font-size:9px;color:#9ba38d;margin:5px 0 0}.dimensions{text-align:right;white-space:nowrap}.dimensions strong{display:block;font-size:12px;font-weight:500;color:#67765e}.dimensions span{display:block;font-size:6px;letter-spacing:1px;color:#9aa68e;margin-top:5px}.export-card .primary{font-size:12px;padding:13px 17px;white-space:nowrap}.export-card .primary svg{width:16px;height:16px}.studio-foot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;color:#a1a990;font-size:8px}.studio-foot .link-btn{font-size:9px}.loading{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eeeee4db;pointer-events:none}.loading[hidden]{display:none}.loading span{width:26px;height:26px;border:2px solid #d5ddca;border-top-color:#54794c;border-radius:50%;animation:spin 1s linear infinite}.loading p{font-size:12px;color:#7b8b70}.toast{position:fixed;z-index:20;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;box-shadow:0 5px 30px #1b372b30;padding:15px 22px;border-radius:9px;font-size:12px;max-width:90vw}.toast.error{background:#9c4e3f}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:530px;width:calc(100% - 36px);padding:34px;box-shadow:0 12px 80px #20362830}dialog::backdrop{background:#24352d60;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:20px;top:20px}dialog h2{font-family:Georgia,serif;font-size:32px;font-weight:400;margin:14px 0 25px}dialog ol{padding-left:20px}dialog li{font-size:13px;margin-bottom:20px;padding-left:5px}dialog p{font-size:12px;line-height:1.7;color:#818b76;margin-top:6px}.tip-box{background:#f0f3e9;padding:17px;border-radius:8px;font-size:12px}.tip-box p:last-child{margin-bottom:0}dialog .primary{width:100%;font-size:12px}#fallback{position:absolute;inset:60px 25px 100px}#flat-preview{width:100%;height:90%;stroke:none}#fallback p{font-size:10px;text-align:center;color:#819073}.muted-fields{opacity:.45;pointer-events:none}.export-card.error{border-color:#c98774}.selected{transition:background .18s,border-color .18s}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1300px){.workspace{grid-template-columns:365px minmax(0,1fr)}.sidebar-heading,.form-section{padding-left:30px;padding-right:30px}.studio{padding:38px 50px}.viewport-wrap{height:620px}}@media(min-width:1500px){.workspace{grid-template-columns:385px minmax(0,1fr)}.studio{padding:44px 65px}.viewport-wrap{height:660px}}@media(min-width:1000px){.sidebar{height:calc(100vh - 88px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d6ddcd transparent}.studio{height:calc(100vh - 88px);overflow-y:auto;scrollbar-width:thin}.viewport-wrap{height:calc(100vh - 370px);min-height:340px;max-height:720px}}
@media(max-width:1100px){.studio{padding:28px 24px}.export-card{flex-wrap:wrap;gap:15px}.export-info{flex:1 1 65%}.dimensions{flex:1;text-align:left}.studio-heading h2{font-size:26px}.color-panel{gap:13px}.header-right{gap:15px}.topbar{padding:0 25px}}@media(max-width:800px){.topbar{height:75px;padding:0 18px}.local-pill{display:none}.brand strong{font-size:22px}.brand strong span{font-size:16px}.brand small{font-size:7px;letter-spacing:2px}.workspace{display:flex;flex-direction:column}.sidebar{order:2;border-right:0}.sidebar-heading{display:none}.studio{padding:23px 18px 12px;order:1}.studio-heading{margin-bottom:18px}.studio-heading h2{font-size:27px}.studio-heading .eyebrow{font-size:8px}.viewport-wrap{height:390px}.export-card{padding:16px;gap:14px}.export-info{flex-basis:100%}.dimensions{flex:1}.export-info p{font-size:10px}.studio-foot{font-size:7px}.color-panel{gap:15px}.color-panel .eyebrow{display:none}.color-panel p{font-size:11px}.color-note{font-size:8px}.form-section{padding:22px 24px}.font-card .sample{font-size:22px}.font-card small{font-size:8px}.form-section label{font-size:12px}.unit-input input{font-size:14px}.unit-input{height:42px}.two-fields{gap:18px}.sidebar-footer{justify-content:center}.preview-badge{font-size:7px}.model-status{font-size:8px}.hint{font-size:11px}.deco-options button{font-size:11px}.check-row small{font-size:10px}.segmented button{font-size:12px}.color-control label{font-size:10px}.below-view{padding:17px 0}.header-right .quiet{padding:8px}.header-right .quiet span{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Shape and placement controls */
.shape-options{display:grid;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr))}.shape-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:transparent;padding:12px 3px 10px;min-width:0}.shape-options .selected{background:#f0f4ec;border-color:#57785b}.shape-options button>span{font-size:8px;white-space:nowrap}.shape-options small{font-size:6px;color:#929b87;white-space:nowrap}.shape-sample{font-family:Lilita;font-size:24px;line-height:1.25;color:#597051;font-weight:400;padding:3px 6px}.outline-sample{-webkit-text-stroke:4px #dbdfcc;paint-order:stroke fill}.plate-sample{border-radius:8px;background:#dbdfcc}.field-spaced{margin-top:16px}.position-field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.form-section .position-field label{margin-bottom:0}.position-field .unit-input{width:100px}.position-hint{margin-bottom:0!important}#base-fields[hidden],#letters-fields[hidden]{display:none}
@media(max-width:800px){.shape-options button>span{font-size:11px}.shape-options small{font-size:8px}.shape-options button{padding:14px 4px}.shape-sample{font-size:30px}.position-field .unit-input{width:115px}}

.alternating-heights{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eff3e9;border:1px solid #dfe5d6;padding:13px 15px;border-radius:8px;margin-top:14px}.alternating-heights>div{display:flex;flex-direction:column;gap:5px}.alternating-heights>div:last-child{text-align:right}.alternating-heights>div>span{font-size:9px;color:#839077}.alternating-heights strong{font-size:21px;color:#416245;font-weight:600}.height-step{font-size:9px;color:#95a287}

@font-face{font-family:righteous;src:url('./fonts/righteous.ttf')}.sample.righteous{font-family:righteous}
@font-face{font-family:lobster;src:url('./fonts/lobster.ttf')}.sample.lobster{font-family:lobster}
@font-face{font-family:coiny;src:url('./fonts/coiny.ttf')}.sample.coiny{font-family:coiny}
@font-face{font-family:bree;src:url('./fonts/bree.ttf')}.sample.bree{font-family:bree}
@font-face{font-family:bungee;src:url('./fonts/bungee.ttf')}.sample.bungee{font-family:bungee}
@font-face{font-family:berkshire;src:url('./fonts/berkshire.ttf')}.sample.berkshire{font-family:berkshire}
.export-actions{display:flex;gap:8px;flex-shrink:0}.secondary{background:#f0f3e9;color:var(--green);border:1px solid #c6d1be;font-size:12px;white-space:nowrap;padding:12px 14px}.secondary:hover{background:#e5eddd}.export-card .secondary svg{width:16px;height:16px}@media(max-width:800px){.export-actions{margin-left:auto}.export-actions .btn{font-size:11px;padding:12px}.color-note{max-width:180px}}@media(max-width:430px){.export-actions{width:100%}.export-actions .btn{flex:1}.dimensions{text-align:left}.color-note{max-width:120px}}

.per-letter-panel{margin-top:16px;border:1px solid #dbe2d1;background:#f8faf3;border-radius:8px;padding:12px}.per-letter-panel summary{cursor:pointer;font-size:11px;color:#496b48;font-weight:600;line-height:1.5}.per-letter-panel>.hint{margin-bottom:10px}.per-letter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.form-section .letter-height-card{margin-bottom:0;min-width:0}.letter-height-card>span{display:block;font-size:12px;color:#6b7d5f;margin-bottom:5px}.letter-height-card .unit-input input{padding-left:7px;font-size:12px}.letter-height-card .unit-input span{padding:0 4px;font-size:8px}.letter-height-card.manual .unit-input{border-color:#b77e62;background:#fff7ef}.per-letter-panel .link-btn{margin-top:8px;font-size:10px}