@font-face{font-family:TileSans;src:url('../vendor/tiles/fonts/sans.ttf')}*{box-sizing:border-box}body{margin:0;background:#f5f6f4;color:#182c30;font:14px TileSans,system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #d5ddda;border-radius:9px;background:#fff;color:#243e40;padding:10px 13px;min-height:42px}button:hover{background:#edf3ef;border-color:#7a9d8c}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #43a77a;outline-offset:3px}.header{height:82px;border-bottom:1px solid #dce2de;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#fff}.brand{font-size:24px;font-weight:900;letter-spacing:-1px;display:flex;align-items:center;gap:20px}.brand span{font-size:10px;letter-spacing:2px;border-left:1px solid #ccd6cf;padding-left:20px;color:#6a8278}main{max-width:1440px;margin:auto;padding:42px 5vw}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#54806a;margin:0 0 14px}h1{font-size:clamp(32px,4vw,49px);letter-spacing:-2px;line-height:1.13;margin:0 0 16px}h1 span{color:#749083}.intro p:last-child{color:#677b73}.public-badge{padding:10px 15px;background:#e8f0e9;border-radius:25px;color:#36674c;font-size:12px}.workspace{display:grid;grid-template-columns:380px minmax(0,1fr);gap:26px;align-items:start}.editor{background:white;border:1px solid #dde4df;border-radius:16px;padding:24px}fieldset{border:0;margin:0 0 28px;padding:0}fieldset:last-child{margin:0}legend{font-weight:750;font-size:17px;padding:0;margin-bottom:18px;width:100%}legend>span{color:#82988b;font-size:11px;margin-right:8px}legend small{float:right;font-size:12px;color:#85938a}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.three{grid-template-columns:repeat(3,1fr)}label{display:block;font-size:11px;font-weight:650;min-width:0}label small{color:#8a9690;font-size:10px}input,select{display:block;width:100%;min-width:0;margin-top:6px;padding:10px;border:1px solid #dce3de;border-radius:8px;background:#f9faf8;color:#243e40;min-height:42px}input[type=color]{padding:5px;cursor:pointer}.presets{display:flex;gap:7px}.presets button{font-size:11px;flex:1;min-height:34px;padding:6px}.hint{font-size:11px;color:#6c7e74;line-height:1.7;margin:12px 0}.text-card{border:1px solid #dce4df;border-radius:11px;margin-top:12px;background:#fcfdfb;overflow:hidden}.text-card summary{cursor:pointer;display:flex;align-items:center;gap:9px;padding:14px;font-weight:700;font-size:12px}.text-card summary:before{content:'⌄';color:#789482}.text-card .text-body{padding:0 14px 14px}.text-actions{display:flex;gap:8px;margin-top:14px}.text-actions button{font-size:11px;min-height:32px;padding:5px 9px}.text-actions button:last-child{margin-left:auto;color:#a34c42}.add{width:100%;border-style:dashed;margin-top:12px;color:#397455;background:#f5f9f5}.preview-panel{position:sticky;top:20px;min-width:0}.preview-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#e9eeea;border-radius:16px 16px 0 0;font-size:12px}.preview-heading i{display:inline-block;background:#5e9975;width:6px;height:6px;border-radius:50%;margin-right:6px}.preview-heading button{font-size:11px;padding:5px 10px;min-height:32px;background:transparent}.preview-heading>div{display:flex;gap:6px}#viewport{height:420px;background:#e9eeea;position:relative;overflow:hidden}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#61766a;font-size:13px;pointer-events:none}#loading[hidden]{display:none}.preview-footer{display:flex;justify-content:space-between;gap:15px;padding:15px 18px;background:#e9eeea;border-radius:0 0 16px 16px;color:#6a7d70;font-size:10px}.preview-footer strong{white-space:nowrap;color:#405b4b}.export-card{background:white;border:1px solid #dde4df;border-radius:14px;padding:24px;margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.export-card .eyebrow{font-size:9px;margin-bottom:8px}.export-card h2{font-size:21px;letter-spacing:-.7px;margin:0}.export-card>p{grid-column:1/-1;margin:0}.primary{background:#245840;color:#fff;border:0;font-weight:700;padding:15px 20px}.primary:hover{background:#17462f}#status{font-size:12px;line-height:1.6;color:#6b7a70;margin:8px 0 0}#status.error{color:#b34033}.tips{padding:20px 8px;font-size:12px;color:#64766a;line-height:1.7}.tips summary{cursor:pointer;font-weight:650}.footer{max-width:1300px;margin:auto;padding:20px 5vw 30px;border-top:1px solid #dce3dd;font-size:11px;font-weight:800;color:#718477;display:flex;justify-content:space-between}.footer span{font-weight:400}@media(min-width:1450px){main{padding-left:0;padding-right:0;max-width:1300px}}@media(max-width:950px){.workspace{grid-template-columns:330px minmax(0,1fr);gap:16px}main{padding:30px 24px}.editor{padding:18px}.export-card{grid-template-columns:1fr}.export-card .primary{width:100%}#viewport{height:350px}.preview-footer{flex-direction:column;gap:5px}}@media(max-width:700px){.header{height:66px;padding:0 18px}.header>a:last-child{font-size:11px}.brand{font-size:20px;gap:10px}.brand span{padding-left:10px;font-size:8px}main{padding:25px 16px}.intro{display:block;margin-bottom:22px}.public-badge{display:inline-block;font-size:10px}.intro h1 br{display:none}h1{font-size:34px;letter-spacing:-1.4px}.workspace{display:flex;flex-direction:column}.editor,.preview-panel{width:100%}.preview-panel{position:static}#viewport{height:340px}.export-card{padding:20px}.preview-footer{flex-direction:row;font-size:9px}.footer{margin:0 16px;padding:20px 0}.fields{gap:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

[hidden]{display:none!important}.mobile-nav{display:none}#settings,#viewport{scroll-margin-top:20px}@media(max-width:700px){body{padding-bottom:65px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;background:#fff;border-top:1px solid #dce3dd;padding:10px 16px max(10px,env(safe-area-inset-bottom));gap:10px}.mobile-nav a{flex:1;text-align:center;padding:12px 6px;border-radius:8px;background:#edf3ef;font-size:12px;font-weight:650}.mobile-nav a:last-child{background:#245840;color:#fff}}

.export-format{grid-column:1/-1;grid-row:2}.export-card>.primary{grid-column:2;grid-row:1}.export-card>.hint{grid-row:3}@media(max-width:950px){.export-card>.primary{grid-column:1;grid-row:3}.export-card>.hint{grid-row:4}}

.material-panel{margin-top:20px;padding-top:18px;border-top:1px solid #dce4df}.material-panel details{margin-top:14px}.material-panel summary{cursor:pointer;font-size:11px;font-weight:650;color:#54705e}

.symbol-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.symbol-gallery button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:10px;line-height:1.4;padding:10px 4px;min-height:80px}.symbol-gallery svg{width:28px;height:28px}.symbol-gallery [aria-pressed=true]{background:#e5f1e9;border-color:#245840;color:#245840;box-shadow:inset 0 0 0 1px #245840}.no-symbol{height:28px;font-size:24px}