@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#253e36;background:#eeeee8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #ad7047;outline-offset:3px}button{border:1px solid #d6dcd3;border-radius:6px;background:#fffefa;color:#29453c;padding:9px 12px;font-size:12px}button:hover{background:#edf1e9}button.primary{background:#274e40;border-color:#274e40;color:#fff}header{height:85px;background:#fffefa;border-bottom:1px solid #dde2d8;display:flex;align-items:center;padding:0 28px;gap:36px}.wordmark{font-family:'Instrument Serif',Georgia,serif;font-size:36px;color:#244f3e;text-decoration:none;display:flex;align-items:center;gap:16px;white-space:nowrap}.wordmark span{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:2px;border-left:1px solid #d9dfd4;padding-left:16px;max-width:100px;line-height:1.8}.project{font-size:12px;flex:1;line-height:1.6}.project small{display:block;font-size:10px;color:#788276;padding-left:13px}.dot{display:inline-block;width:6px;height:6px;background:#7b9471;border-radius:50%;margin-right:5px}.actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:350px 1fr;height:calc(100dvh - 85px)}aside{background:#fffefa;overflow:auto;border-right:1px solid #dce0d6}.aside-intro{padding:28px 26px 22px}.kicker{font-size:9px;letter-spacing:2px;color:#8b6849;font-weight:700}h1{font:42px/1.02 'Instrument Serif',Georgia,serif;font-weight:400;margin:14px 0}p{font-size:12px;line-height:1.7;color:#738075;margin:0}.search{display:flex;align-items:center;border:1px solid #dde2d7;border-radius:6px;margin:0 24px 20px;padding:8px 10px;gap:8px}.search input{width:100%;border:0;background:transparent;font-size:12px;outline:none}.search span{font-size:22px;line-height:1}#tabs{display:flex;flex-wrap:wrap;border-block:1px solid #e5e7df;padding:10px 20px;gap:4px;position:sticky;top:0;background:#fffefa;z-index:2}#tabs button{border:0;background:transparent;padding:7px 8px;font-size:11px;color:#7b8276}#tabs button.active{background:#e8eee3;color:#294f3f}#controls{padding:22px 24px}.control-group{margin-bottom:25px}.control-group h2{font-size:11px;letter-spacing:.8px;text-transform:uppercase;margin:0 0 15px}.control-group>p{font-size:11px;margin:-5px 0 16px}.field{display:block;margin-bottom:17px}.field-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#4e5e52;margin-bottom:7px}.field-head output{font-size:10px;color:#8a9183}.field input:not([type=color]):not([type=range]):not([type=checkbox]),.field select,.field textarea,dialog input{width:100%;padding:9px 10px;border:1px solid #d7ddcf;background:#fffefa;border-radius:5px;font-size:12px;color:#304b3c}.field textarea{resize:vertical;min-height:90px;line-height:1.6}.color-field{display:flex;gap:8px;align-items:center}.color-field input[type=color]{width:38px;height:34px;padding:2px;background:#fff;border:1px solid #d7ddcf;border-radius:5px;cursor:pointer}.color-field input[type=text]{flex:1;min-width:0;font-family:monospace!important}.field input[type=range]{width:100%;accent-color:#315844}.field.check{display:flex;align-items:center;justify-content:space-between;gap:10px}.field.check .field-head{margin:0}.field input[type=checkbox]{accent-color:#315844;width:16px;height:16px}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:9px}.preset{padding:10px;text-align:left;font-size:10px;border-radius:7px}.preset-colors{display:flex;margin-bottom:8px;border-radius:3px;overflow:hidden;height:19px}.preset-colors i{flex:1}.preset.active{border-color:#315844;box-shadow:0 0 0 1px #315844}.aside-footer{font-size:10px;line-height:1.8;color:#80877a;padding:0 24px 24px}main{min-width:0;display:flex;flex-direction:column}.canvas-toolbar{min-height:62px;display:flex;align-items:center;gap:14px;padding:12px 24px;background:#f8f8f3;border-bottom:1px solid #dce1d5}.canvas-toolbar label{font-size:9px;letter-spacing:1px;display:flex;align-items:center;gap:10px;margin-right:auto}.canvas-toolbar select{max-width:210px;border:0;background:transparent;color:#334e3e;font-size:12px}.devices{display:flex;gap:3px}.devices button{background:transparent;border-color:transparent;font-size:10px;padding:7px 8px}.devices button.active{background:#e4e9df;border-color:#d6ddcf}.canvas-area{padding:20px 24px 8px;display:flex;flex:1;min-height:0;flex-direction:column}.canvas-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px;letter-spacing:1.3px;color:#87917e;padding:0 0 12px}#save-status{letter-spacing:0;font-size:10px}#frame-wrap{width:100%;max-width:100%;flex:1;min-height:0;margin-inline:auto;background:white;box-shadow:0 8px 24px #293d2d15;border:1px solid #dce1d6;border-radius:5px;overflow:hidden;transition:width .2s}iframe{border:0;width:100%;height:100%;background:white;display:block}.canvas-note{font-size:10px;text-align:center;margin:10px 0 3px}.hint{border:1px solid #dde4d5;background:#f1f4ec;padding:12px;font-size:11px;line-height:1.7;border-radius:6px;margin-bottom:16px}.inline-actions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.inline-actions button{font-size:10px}.saved-item{display:flex;align-items:center;gap:6px;margin:8px 0}.saved-item button:first-child{flex:1;text-align:left}.contrast{font-size:10px;line-height:1.9;background:#edf1e8;padding:10px;border-radius:6px;margin-bottom:20px}.contrast.warn{background:#fbebd8;color:#815028}dialog{border:1px solid #dce1d6;background:#fffefa;border-radius:12px;width:min(510px,calc(100% - 28px));padding:34px;max-height:90dvh;overflow:auto;color:#294536;box-shadow:0 30px 120px #132a2d50}dialog::backdrop{background:#172f2c77;backdrop-filter:blur(4px)}dialog h2{font:36px 'Instrument Serif',Georgia,serif;margin:13px 0}dialog p{margin-bottom:20px}dialog label{display:block;font-size:11px;margin:15px 0}dialog label input{margin-top:7px}dialog .close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:24px}dialog .primary{width:100%;margin-top:10px}.export-row{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid #e0e4d8;padding-top:17px;margin-top:20px}.export-row button{font-size:10px;flex:1}#share-result{font-size:11px;line-height:1.7;margin-top:14px;overflow-wrap:anywhere}#share-result a{color:#2a6448}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#254c3c;color:white;border-radius:8px;padding:12px 20px;font-size:12px;box-shadow:0 8px 32px #182a2e30;z-index:100;display:none;max-width:90%}#pick.active{background:#dce8d1;border-color:#315844}.picked{font-size:10px;overflow-wrap:anywhere;margin-bottom:15px;color:#62705a}.field.custom-font{margin-top:8px}@media(max-width:1100px){.project{display:none}.actions{margin-left:auto}.workspace{grid-template-columns:310px 1fr}.canvas-toolbar{padding-inline:14px;flex-wrap:wrap;gap:8px}.canvas-toolbar label{width:100%;justify-content:space-between}.canvas-area{padding-inline:14px}.aside-intro{padding-top:20px}h1{font-size:37px}}@media(max-width:700px){header{height:auto;min-height:74px;padding:12px 14px;gap:12px;flex-wrap:wrap}.wordmark{font-size:27px;gap:9px}.wordmark span{font-size:7px;padding-left:9px}.actions{gap:4px}.actions button{font-size:10px;padding:8px}#undo{display:none}.workspace{height:auto;display:flex;flex-direction:column-reverse}main{height:68dvh;min-height:420px;position:relative;top:auto;z-index:5;background:#eeeee8}aside{max-height:none;overflow:visible;border-right:0}.canvas-toolbar{min-height:55px;padding:7px 12px;gap:5px}.canvas-toolbar label{width:auto;flex:1}.canvas-toolbar label select{max-width:140px;font-size:10px}.devices{margin-left:auto}.devices button{font-size:9px;padding:6px}#pick{font-size:10px;padding:6px}.canvas-area{padding:10px 8px 4px}.canvas-heading{font-size:7px;padding-bottom:7px}.canvas-note{font-size:8px;line-height:1.4}#controls{display:block;padding-top:20px}.aside-intro{padding:20px 24px 16px}.aside-intro h1 br{display:none}.aside-intro h1{font-size:34px}.search{margin-bottom:14px}#tabs{position:static}.swatches{grid-template-columns:repeat(3,1fr)}}

#jump-preview{display:none}@media(max-width:700px){#jump-preview{display:block;position:fixed;right:14px;bottom:14px;z-index:20;background:#274e40;color:#fff;border-color:#fff5;box-shadow:0 5px 20px #12342b30}}