*{box-sizing:border-box}body{margin:0;background:#111415;color:#eef1ee;font:14px Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #39413f;background:#202725;color:#e6ece8;border-radius:8px;padding:11px 14px;transition:.15s}button:hover{background:#33413b;border-color:#8cbba6}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #b5f4b5;outline-offset:3px}.primary{background:#bcf3a7;color:#152114;border-color:#bcf3a7;font-weight:bold}.primary:hover{background:#d3ffc4}header{height:100px;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #303735;gap:20px}.brand{display:flex;align-items:center;gap:14px;letter-spacing:3px;font-size:18px}.brand b{font-weight:400;color:#9aa69f}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#829188;margin-top:8px}.logo{font-size:42px;line-height:1;font-weight:900;letter-spacing:-5px;color:#bcf3a7}.logo span{font-size:24px;vertical-align:top}.actions{display:flex;align-items:center;gap:9px}#saved{font-size:11px;color:#90a294;margin-right:12px}main{display:grid;grid-template-columns:245px minmax(400px,1fr) 280px;min-height:calc(100vh - 145px)}aside{padding:30px 22px}.layers{border-right:1px solid #303735;display:flex;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:2px;color:#a4bd9e;margin-bottom:16px}h2{font-weight:500;font-size:23px;margin:0 0 12px}p{color:#95a49b;line-height:1.6}#layers{margin:20px -7px 15px}.layer{display:flex;align-items:center;width:100%;text-align:left;background:transparent;border-color:transparent;padding:10px;margin:3px 0;font-size:12px;gap:12px}.layer .symbol{font-size:16px;color:#839c8b;width:20px}.layer.active{background:#28392d;border-color:#5c7957;color:#d4ffc2}.layer .value{margin-left:auto;color:#7e9a87;font-size:10px;max-width:60px;overflow:hidden;white-space:nowrap}.wide{width:100%;border-style:dashed}.bottom{margin-top:auto;padding-top:25px;display:grid;gap:8px}.stage{background:radial-gradient(ellipse at center,#27332d 0,#19221e 50%,#151c19 85%);padding:30px;display:flex;align-items:center;flex-direction:column}.stagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;width:100%}.pill{font-size:10px;letter-spacing:1.5px;color:#b8c9ba}h1{font-size:20px;font-weight:400;margin:12px 0 20px;line-height:1.4}.stagehead button{font-size:11px;background:transparent;padding:7px 10px}.canvaswrap{margin:auto 0;padding:35px 0}.watch{width:min(454px,100%);border:14px solid #303b35;border-radius:50%;box-shadow:0 0 0 2px #566358,0 0 0 9px #1c231f,0 25px 60px #0008;position:relative;background:#000}canvas{display:block;border-radius:50%;width:100%;aspect-ratio:1;touch-action:none;cursor:grab}.stagebar{display:flex;gap:20px;align-items:center;justify-content:center;margin-top:20px;font-size:12px;color:#b9c5bc}.stagebar label{display:flex;gap:6px;align-items:center}.stagebar span{font-size:10px;color:#7e9385}.hint{margin-top:24px;font-size:11px;color:#bac9be;text-align:center}.dot{display:inline-block;width:6px;height:6px;background:#bcf3a7;border-radius:50%;margin-right:5px}.sample{font-size:10px;text-align:center;margin-top:12px;max-width:400px}.inspector{border-left:1px solid #303735;background:#171c1a}.inspector h2{font-size:20px}label{color:#adbbb1}#controls>label{display:block;margin-top:22px;font-size:12px}select,input[type=text],input[type=number]{width:100%;display:block;margin-top:8px;background:#242c27;color:#eef2ed;border:1px solid #3b4940;border-radius:6px;padding:10px;min-width:0}input[type=range]{width:100%;accent-color:#bcf3a7;margin-top:13px}input[type=color]{width:42px;height:32px;padding:2px;border:1px solid #45564b;background:none;border-radius:6px;cursor:pointer}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;font-size:12px}.row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:8px}.row button{font-size:11px;flex:1}.appearance{border-top:1px solid #344038;margin-top:30px;padding-top:10px}h3{font-weight:400;font-size:14px}.appearance label{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:12px}.note{font-size:11px;color:#789080;margin-top:25px}footer{height:45px;padding:0 30px;display:flex;justify-content:space-between;align-items:center;color:#657a6b;font-size:9px;letter-spacing:1px;border-top:1px solid #303735}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#bcf3a7;color:#152114;padding:13px 24px;border-radius:8px;display:none;z-index:10;max-width:90%}dialog{background:#1c2821;color:white;border:1px solid #6b876d;border-radius:18px;padding:32px;width:min(540px,90vw)}dialog::backdrop{background:#000a}dialog code{color:#d0f5b7}button:disabled{opacity:.5;cursor:wait}@media(max-width:1100px){main{grid-template-columns:200px minmax(330px,1fr) 240px}aside{padding:24px 16px}.stage{padding:25px 20px}header{padding:20px}#saved{display:none}}@media(max-width:800px){header{height:auto;align-items:flex-start;flex-direction:column}.actions{flex-wrap:wrap}main{grid-template-columns:1fr}.stage{order:0;min-height:610px}.layers{order:1;border-top:1px solid #344038}.inspector{order:2}#layers{display:grid;grid-template-columns:1fr 1fr}.watch{width:370px;max-width:80vw}.canvaswrap{padding:30px 0}footer{height:auto;padding:20px;gap:12px;flex-wrap:wrap}.bottom{grid-template-columns:1fr 1fr}.stagehead h1{font-size:18px}}

[hidden]{display:none!important}

.stage{min-width:0}.canvaswrap{width:100%;height:540px;max-height:65vh;min-height:320px;overflow:auto;padding:0;margin:20px 0 0;overscroll-behavior:contain;border-radius:16px}.zoomboard{min-width:100%;min-height:100%;display:grid;place-items:center;padding:24px;box-sizing:border-box}.zoomboard .watch{max-width:none;flex-shrink:0}.zoomtools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;width:100%}.zoomtools label{font-size:12px}.zoomtools input{width:110px;margin:0}.zoomtools output{font-size:12px;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.zoomtools button{padding:7px 12px}.zoomtools button:disabled{cursor:default}.zoomtip{font-size:10px;margin:10px 0 0;text-align:center;color:#90a294}@media(max-width:800px){.canvaswrap{height:440px;max-height:60vh}.stagebar{flex-wrap:wrap}}

#fieldPicker{width:min(840px,92vw);max-width:92vw;max-height:85vh;overflow:auto} .pickerHead{display:flex;justify-content:space-between;align-items:center;gap:20px}.pickerFilters{display:flex;gap:12px}.pickerFilters input{flex:2;min-width:0}.pickerFilters select{flex:1;min-width:0}#fieldResults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.fieldCard{text-align:left;display:flex;flex-direction:column;gap:10px;padding:16px;min-height:145px}.fieldCard span{color:#bcf3a7;font-size:24px}.fieldCard small{line-height:1.5;color:#a6b5ab}#fieldCount{font-size:12px}.fieldCard:hover{border-color:#bcf3a7}#browseFields{width:100%;margin-bottom:18px}#fieldNote{margin-top:-8px}#fieldPicker a{color:#bcf3a7}#fieldPicker details{font-size:12px;line-height:1.6}@media(max-width:650px){#fieldResults{grid-template-columns:1fr 1fr}.pickerFilters{flex-direction:column}}@media(max-width:420px){#fieldResults{grid-template-columns:1fr}}

.iconSettings{border:1px solid #35443b;border-radius:12px;margin:20px 0 0;padding:16px}.iconSettings legend{padding:0 6px;color:#bcf3a7}.fieldCard img{display:block}.symbol img{vertical-align:middle}
@media(min-width:1051px){.stage{position:sticky;top:16px;align-self:start}}

@font-face{font-family:CoastSans;src:url("fonts/DejaVuSans.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:CoastSans;src:url("fonts/DejaVuSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:CoastSerif;src:url("fonts/DejaVuSerif.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:CoastSerif;src:url("fonts/DejaVuSerif-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:CoastMono;src:url("fonts/DejaVuSansMono.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:CoastMono;src:url("fonts/DejaVuSansMono-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
.checkline{display:flex!important;align-items:center;gap:10px;margin:16px 0}.checkline input{width:auto!important;margin:0}#backgroundGradientOptions,#backgroundImageOptions{padding:12px;border:1px solid #35443b;border-radius:10px;margin:12px 0}.appearance select{width:100%}.appearance button{width:100%;margin:8px 0}.appearance label{flex-wrap:wrap;gap:8px}#textGradientOptions button{width:100%}

.dateShortcuts{border-top:1px solid #35443b;margin-top:16px;padding-top:18px}.dateShortcuts .row{gap:6px}.dateShortcuts .row button{font-size:11px;flex:1;padding:10px 5px}

.disabledLayer{opacity:.45}.disabledLayer.active{opacity:.75}

.opacityRow{display:flex;align-items:center;gap:8px;margin:12px 0}.opacityRow input[type=range]{flex:1;min-width:60px;margin:0}.opacityRow input[type=number]{width:64px;flex:none;margin:0}.opacityRow span{font-size:12px}

@font-face{font-family:Coastcondensed;src:url("fonts/DejaVuSansCondensed.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Coastcondensed;src:url("fonts/DejaVuSansCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Coastcondensed;src:url("fonts/DejaVuSansCondensed.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Coastcondensed;src:url("fonts/DejaVuSansCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Coastslanted;src:url("fonts/DejaVuSans-Oblique.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Coastslanted;src:url("fonts/DejaVuSans-BoldOblique.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:CoastserifSlanted;src:url("fonts/DejaVuSerif-Italic.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:CoastserifSlanted;src:url("fonts/DejaVuSerif-BoldItalic.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:CoastmonoSlanted;src:url("fonts/DejaVuSansMono-Oblique.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:CoastmonoSlanted;src:url("fonts/DejaVuSansMono-BoldOblique.ttf") format("truetype");font-weight:700;font-display:swap}
.iconGallery{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:170px;overflow:auto;margin:8px 0}.iconGallery button{padding:6px;color:#b9d6e4;min-width:0}.iconGallery svg{width:23px;height:23px;display:block;margin:auto}.iconGallery button[aria-pressed="true"]{background:#466139;color:#dcffbd;border-color:#bcf3a7}.languageSelect{max-width:105px;padding:7px;background:#14212a;color:#e8f3f7;border:1px solid #40545e;border-radius:6px}

@font-face{font-family:Coastgothic;src:url("fonts/URWGothic-Book.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Coastgothic;src:url("fonts/URWGothic-Demi.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:Coastbookman;src:url("fonts/URWBookman-Light.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Coastbookman;src:url("fonts/URWBookman-Demi.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:Coastnarrow;src:url("fonts/NimbusSansNarrow-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Coastnarrow;src:url("fonts/NimbusSansNarrow-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:CoastclassicSerif;src:url("fonts/C059-Roman.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:CoastclassicSerif;src:url("fonts/C059-Bold.otf") format("opentype");font-weight:700;font-display:swap}.stagebar{flex-wrap:wrap;gap:12px}.stagebar select{max-width:220px;padding:7px;background:#1c2924;color:#dce8e1;border:1px solid #40544a;border-radius:6px}.stagebar #nextGrid{padding:5px 10px;font-size:20px}
/* A compact workspace with independent, clearly grouped panels. */
header{height:78px;padding:16px 24px}.brand{font-size:16px}.brand small{font-size:8px}.logo{font-size:36px}.actions button{padding:10px 14px}.inspectorNav{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#101713;border:1px solid #35463b;border-radius:10px;margin-bottom:22px;position:sticky;top:-1px;z-index:2}.inspectorNav button{padding:10px 5px;background:transparent;border-color:transparent;font-size:12px;font-weight:600}.inspectorNav button[aria-selected=true]{background:#35503b;color:#e0ffd2;border-color:#668568}.inspector h2{font-size:21px;line-height:1.3;margin-bottom:20px}.settingsGroup{margin:10px 0;border:1px solid #3c4c42;border-radius:10px;background:#1b241e;overflow:hidden}.settingsGroup>summary{padding:14px 12px;cursor:pointer;font-size:13px;color:#d2e7d1;font-weight:600;background:#202d24}.settingsGroup[open]>summary{border-bottom:1px solid #3c4c42}.settingsBody{padding:14px}.settingsBody>label{display:block;font-size:12px;margin:0 0 16px}.settingsBody>.row{margin:14px 0}.settingsBody>.twocol{margin:10px 0 16px}.settingsBody>.note{margin:10px 0;font-size:11px;color:#a2b2a6}.settingsBody select,.settingsBody input[type=text],.settingsBody input[type=number]{margin-top:7px;padding:9px}.settingsBody .checkline{display:flex;align-items:center;gap:8px;margin:4px 0 14px}.settingsBody .row label{margin:0;flex:1}.settingsBody>.row button{padding:10px}.settingsBody .iconSettings{margin:10px 0}.appearance{border:0;margin:0;padding:0}.appearance .settingsBody>label{display:block;margin:0 0 16px}.appearance .settingsBody .row label{display:block;margin:0}.appearance .opacityRow{margin-bottom:12px}.appearance>h3{display:none}#fieldNote{margin:8px 0 12px}#browseFields{font-size:12px;margin-bottom:16px}.note{color:#99ada0}.guidePanel{width:100%;max-width:660px;border:1px solid #43564a;border-radius:12px;background:#17231c;margin-top:14px}.guidePanel>summary{cursor:pointer;padding:12px 16px;color:#d1e7d1;font-size:12px;font-weight:bold}.badge{float:right;background:#344e3c;border-radius:12px;min-width:25px;text-align:center;padding:2px 7px;font-size:11px}.guideBody{padding:0 16px 12px}.guideToolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:12px;margin:8px 0}.guideToolbar label{display:flex;align-items:center;gap:7px}.guideToolbar button{font-size:11px;padding:7px 10px}.guideToolbar input[type=range]{width:130px;max-width:35%;margin:0}.guideToolbar output{font-size:11px;width:35px}.gridChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0}.gridChip{display:flex;align-items:center;gap:7px;padding:9px 8px;background:#222e26;border:1px solid #435347;border-radius:7px;cursor:pointer;font-size:11px;min-width:0}.gridChip:has(input:checked){border-color:#8aaa84;background:#2d4030;color:#e0ffd6}.gridChip input{margin:0;accent-color:#bcf3a7}.gridSwatch{width:7px;height:7px;border-radius:50%;flex-shrink:0}.gridChip span:last-child{line-height:1.4}.guideBody>.note{font-size:10px;margin:8px 0 0;line-height:1.5}.stagebar{margin:12px 0}.zoomtip{display:none}.hint{margin-top:8px;line-height:1.5}.sample{margin:8px 0}.layer{gap:8px;padding:10px 7px}.layer .value{max-width:55px}.layers>p{font-size:12px;margin:0;color:#a0b1a5}.bottom{padding-top:16px}.dateShortcuts{border-top:1px solid #34493a;padding-top:16px;margin-top:16px}.dateShortcuts .row{margin-top:8px}.dateShortcuts+.wide{margin-top:12px}footer{height:32px;font-size:8px}
@media(min-width:1051px){body{height:100dvh;overflow:hidden}main{height:calc(100dvh - 110px);min-height:0;grid-template-columns:230px minmax(360px,1fr) 330px;overflow:hidden}aside{padding:22px 16px}.layers,.inspector{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4d6755 #17201a}.stage{position:static;top:auto;align-self:stretch;min-height:0;height:100%;padding:22px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4d6755 #17201a}.stagehead{flex-shrink:0}.stagehead h1{font-size:18px;margin:8px 0 4px}.canvaswrap{height:480px;min-height:290px;max-height:none;margin:12px 0 0;flex:1 0 360px;overflow:auto}.zoomtools{margin-top:14px}.guidePanel{flex-shrink:0}#layers{margin:16px -5px}.inspector .eyebrow{margin-bottom:14px}.inspectorNav{top:-1px}}
@media(min-width:1500px){main{grid-template-columns:250px minmax(400px,1fr) 365px}.stage{padding:24px 34px}.canvaswrap{flex-basis:420px}}
@media(max-width:1050px){main{grid-template-columns:205px minmax(290px,1fr) 290px}.stage{padding:20px 14px}aside{padding:20px 12px}.inspectorNav{position:static}.actions{gap:6px}header{padding:14px 18px}.brand small{display:none}}
@media(max-width:800px){body{overflow:auto;height:auto}header{height:auto;gap:14px}.actions{width:100%}.actions button{padding:9px 10px}main{display:flex;flex-direction:column;height:auto;min-height:0}.stage{min-height:0;order:0;padding:22px 16px}.canvaswrap{height:430px;max-height:65vh;min-height:290px}.layers{order:1}.inspector{order:2;border-top:1px solid #3a4b40;padding:22px 16px}.layers #layers{grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px;overflow:auto}.guidePanel{max-width:none}.inspectorNav{position:sticky;top:0}.settingsBody{padding:16px}.gridChoices{grid-template-columns:repeat(2,minmax(0,1fr))}footer{height:auto;min-height:35px}.stagehead h1{font-size:18px}}
@media(min-width:1051px){.gridChoices{grid-template-columns:repeat(3,minmax(0,1fr))}.gridChip{padding:8px 6px;font-size:10px}.canvaswrap{flex-basis:400px;min-height:300px}.guideToolbar{margin:6px 0}.guideBody{padding-bottom:10px}.guidePanel{margin-top:12px}}
.precisionDialog{color:#eef1ee;background:#17201e;border:1px solid #5b766b;border-radius:16px;width:min(640px,94vw);max-height:90dvh;padding:22px;overflow:auto}.precisionDialog::backdrop{background:#000b}.precisionDialog h2{margin:0 0 18px}.fontPreviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.fontPreviewGrid button{text-align:left;overflow:hidden;padding:12px;background:#111918}.fontPreviewGrid button[aria-pressed=true]{border:2px solid #bcf3a7}.fontPreviewGrid span{display:block;font:12px Arial;color:#bccec6}.colorDialog{width:min(430px,94vw)}.svPad{height:240px;position:relative;touch-action:none;border-radius:10px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);cursor:crosshair;overflow:hidden}.svPad i{position:absolute;width:24px;height:24px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 2px #000;transform:translate(-50%,-50%);pointer-events:none}.colorDialog label{display:block;margin:18px 0 10px}.hueSlider{display:block;width:100%;height:40px;touch-action:pan-y;accent-color:#bcf3a7}.colorSwatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.colorSwatches button{min-height:42px;border:1px solid #75847c}.hexValue{display:block;width:100%;padding:12px;font:18px monospace}.colorLive{height:42px;border:1px solid #75847c;border-radius:8px;margin:12px 0}.colorDone{width:100%;min-height:48px}@media(max-width:480px){.fontPreviewGrid{grid-template-columns:1fr}.precisionDialog{padding:16px}}