[hidden]{display:none!important}:root{font-family:Segoe UI,Arial,sans-serif;color:#d9dddf;background:#181a1c;font-size:13px;--accent:#a8d8bd;--muted:#81898e;--border:#33373b;--panel:#232629}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible{outline:2px solid var(--accent)}button{cursor:pointer;color:inherit;background:#2d3135;border:1px solid #3b4145;border-radius:6px;padding:9px 13px;transition:background .15s}button:hover{background:#3b4247}button:disabled{opacity:.3;cursor:default}.primary{background:var(--accent);color:#17372b;border-color:var(--accent);font-weight:600}.primary:hover{background:#c1e9d0}header{height:72px;display:flex;align-items:center;padding:0 24px;gap:28px;border-bottom:1px solid var(--border);background:#202326}.brand{font-family:Georgia,serif;font-size:32px;text-decoration:none;color:#edf4ef;display:flex;align-items:center;gap:10px;letter-spacing:-1.5px}.brand-mark{font-family:Arial;font-size:39px;color:var(--accent);line-height:1}.studio{font:9px Segoe UI,sans-serif;letter-spacing:2px;width:50px;line-height:1.7;border-left:1px solid #4a5053;padding-left:13px;margin-left:5px}.document{border-left:1px solid var(--border);padding-left:28px;display:flex;flex-direction:column;gap:5px}.document>span:first-child{max-width:260px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px}.saved{font-size:10px;color:var(--muted)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.header-actions>.primary{min-width:108px;display:flex;justify-content:center}.local-badge{font-size:11px;color:#a9b4ae;margin-right:15px}.local-badge i,.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}main{height:calc(100dvh - 116px);display:flex}nav{flex:0 0 76px;background:#202326;border-right:1px solid var(--border);padding:18px 8px;display:flex;flex-direction:column;gap:9px}nav button{background:transparent;border:none;padding:9px 0;color:#8f989e;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;position:relative;border-radius:7px}nav button svg{width:21px;height:21px}nav button.active{color:var(--accent);background:#34453e}nav button.active:before{content:"";position:absolute;left:-8px;height:27px;top:13px;background:var(--accent);width:3px;border-radius:0 3px 3px 0}#panel{width:270px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.panel-heading{height:73px;display:flex;align-items:center;justify-content:space-between;margin:0 22px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-heading h1{font-size:16px;font-weight:600;margin:0}.panel-heading>span{font-size:10px;color:#8c969b;border:1px solid #42484d;border-radius:4px;padding:3px 6px}#controls{padding:20px 22px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#4c5357 transparent}.group{padding-bottom:20px;margin-bottom:21px;border-bottom:1px solid var(--border)}.group:last-child{border:0}.group h2{font-size:10px;font-weight:600;color:#a6afb5;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 21px;display:flex;justify-content:space-between}.group h2 span{font-size:14px;color:#8a949a}.slider{display:block;margin:0 0 22px;font-size:11px}.slider:last-child{margin-bottom:2px}.slider-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.slider output{font-size:10px;color:#9ea8ae;background:#2b3033;border:1px solid #3a4044;min-width:32px;text-align:center;padding:2px 5px;border-radius:4px;font-family:Consolas,monospace}input[type=range]{appearance:none;width:100%;height:3px;display:block;border:0;padding:0;border-radius:4px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill,50%),#454c51 var(--fill,50%),#454c51 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#c2e8d1;border:2px solid #232629;box-shadow:0 0 0 1px #7ea78f}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#c2e8d1;border:2px solid #232629}.panel-footer{border-top:1px solid var(--border);display:flex;padding:17px 18px;gap:9px}.panel-footer button:first-child{background:transparent;border-color:#464d52}.panel-footer button{font-size:11px;flex:1;padding:10px 5px}.panel-footer .primary{flex:1.7}.quick-actions{display:flex;gap:7px;margin-bottom:25px}.quick-actions button{flex:1;font-size:10px;padding:11px 2px}.quick-actions button span{display:block;font-size:18px;margin-bottom:6px;color:#c3d0c9}.workspace{min-width:0;flex:1;display:flex;flex-direction:column;background:#181a1c}.workspace-top{height:49px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid #2a2e31;background:#1c1f21}.workspace-top>div{display:flex;align-items:center;gap:16px;min-width:0}.crumb{font-size:8px;color:#657078;letter-spacing:1.4px}#tabname{font-size:11px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.quiet{background:transparent;border:0;color:#969fa5;font-size:11px;padding:6px}.quiet:hover{background:#2c3235}#stage{flex:1;position:relative;overflow:clip;touch-action:none;overscroll-behavior:none;user-select:none;cursor:grab;display:flex;align-items:center;justify-content:center;padding:48px;background-color:#191c1e;background-image:radial-gradient(#3c4246 .6px,transparent .6px);background-size:16px 16px;min-height:0}#canvas-wrap{position:absolute;left:50%;top:50%;transform-origin:0 0;flex-shrink:0;box-shadow:0 8px 50px #0007;background:repeating-conic-gradient(#ddd 0% 25%,#eee 0% 50%) 50% / 16px 16px}#canvas-wrap[hidden]{display:none}#canvas{display:block;width:100%;height:100%}#overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.workspace-bottom{height:43px;background:#1e2124;border-top:1px solid #303539;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:12px;font-size:10px;flex-shrink:0;color:#8c979e}.bottom-tip{color:#626f77;font-size:10px}.zoom{display:flex;align-items:center;gap:5px}.zoom button{background:transparent;border:0;font-size:14px;padding:5px 8px}.zoom #zoom-value{font:10px Consolas,monospace;min-width:45px}.divider{width:1px;height:14px;background:#3d4449;margin:0 8px}.right-panel{width:220px;background:#222528;border-left:1px solid var(--border);display:flex;flex-direction:column;padding:0 17px;flex-shrink:0}.right-heading{display:flex;justify-content:space-between;font-size:11px;padding:22px 0 17px}.right-heading>span:last-child{color:#7e8c94;font-size:11px}.navigator{height:125px;background:#191c1e;border:1px solid #363c41;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.navigator canvas{max-width:100%;max-height:100%;object-fit:contain}.navigator canvas:not([width]){display:none}#nav-empty{position:absolute;color:#58666f;font-size:10px}.history-heading{border-top:1px solid var(--border);margin-top:22px}#history{overflow-y:auto;flex:1;padding-bottom:16px}#history button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:4px;text-align:left;padding:12px 8px;font-size:11px;color:#89969e;margin-bottom:3px}#history button.current{background:#33413a;color:#c4e5d2}#history button span{color:#697b71;font-size:10px}#history button.current:after{content:"\2713";margin-left:auto;color:var(--accent)}.muted{font-size:10px;line-height:1.9;color:#65727a}.right-bottom{border-top:1px solid var(--border);padding:23px 0 25px}.privacy-icon{display:block;font-size:24px;color:#88ac97;margin-bottom:12px}.right-bottom strong{font-size:11px;font-weight:500;color:#b8c4bd}.right-bottom p{font-size:10px;line-height:1.8;color:#77858d;margin:9px 0 15px}.right-bottom a{color:#a4b9ac;font-size:9px;text-decoration:none}footer{height:44px;padding:0 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#202326;font-size:10px;color:#86928e}footer>span,footer>div{display:flex;align-items:center}footer button{border:0;background:transparent;font-size:11px;margin-right:15px;padding:7px 9px}kbd{font:9px Segoe UI,sans-serif;color:#68747c;margin-left:10px}.footer-brand{font-size:8px;letter-spacing:1.4px;border-left:1px solid #3a4145;padding-left:22px;margin-left:7px;color:#67746e}#empty{text-align:center;max-width:500px}.empty-symbol{font-size:68px;line-height:1;color:var(--accent);margin-bottom:27px}.eyebrow{font-size:9px;letter-spacing:2px;color:#97b2a2}#empty h2{font-family:Georgia,serif;font-weight:400;font-size:42px;line-height:1.12;letter-spacing:-1.5px;margin:18px 0;color:#e1e9e4}#empty p{font-size:12px;color:#86958d;line-height:1.9;margin-bottom:28px}#empty>.primary{padding:13px 33px;font-size:12px;display:block;margin:auto}.sample-link{display:block;margin:14px auto 30px;background:none;border:0;font-size:10px;color:#b9c7be}.sample-link span{margin-left:8px}#empty small{font-size:9px;line-height:2;color:#61736a}#busy{position:absolute;inset:0;background:#181d20e8;z-index:5;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center}#busy[hidden]{display:none}.spinner{width:28px;height:28px;border:2px solid #48584f;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:64px;left:50%;transform:translate(-50%);background:#34473d;color:#e0efe5;border:1px solid #60806c;border-radius:7px;box-shadow:0 8px 30px #0005;padding:14px 22px;z-index:20;max-width:min(600px,90vw);font-size:12px}label.field,dialog label{display:block;font-size:11px;margin-bottom:18px}input:not([type=range]):not([type=color]):not([type=checkbox]),select,textarea{display:block;width:100%;color:#d4dcd7;background:#1d2124;border:1px solid #42494d;border-radius:5px;padding:9px 10px;margin-top:9px}textarea{resize:vertical;min-height:80px}.field-row{display:flex;gap:12px}.field-row>*{width:50%}input[type=color]{width:100%;height:35px;border:1px solid #46544c;background:#1d2124;margin-top:9px;border-radius:4px;padding:3px}.hint{font-size:10px;line-height:1.8;color:#84918a;margin:8px 0 20px}.wide{width:100%;margin-bottom:9px;font-size:11px}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filter-card{padding:0;overflow:hidden;background:#292e31;border:1px solid #41484b;font-size:10px}.filter-card.selected{border-color:var(--accent);color:var(--accent)}.filter-card canvas{width:100%;height:70px;object-fit:cover;display:block}.filter-card span{display:block;padding:9px 4px}.color-swatches{display:flex;gap:9px;margin:15px 0}.color-swatches button{width:23px;height:23px;min-width:0;border:2px solid #5d6b63;border-radius:50%;padding:0}.right-bottom p{max-width:180px}dialog{border:1px solid #46534a;border-radius:14px;color:#d9e5dd;background:#252c28;padding:30px;width:min(430px,90vw);box-shadow:0 30px 90px #0008}dialog::backdrop{background:#101614c9;backdrop-filter:blur(5px)}.dialog-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:25px}.dialog-heading h2{font:32px Georgia,serif;margin:12px 0 0}.dialog-heading button{background:none;border:0;font-size:22px;padding:0 5px}dialog .primary{width:100%;padding:12px}dialog p{font-size:11px;color:#9fb0a5;line-height:1.8;margin:25px 0}dialog output{float:right}dialog input[type=range]{margin-top:18px}#stage.dragover{outline:2px dashed var(--accent);outline-offset:-10px}.tool-note{font-size:10px;color:#8a9c91;line-height:1.9}.pill{font-size:9px;padding:5px 8px;background:#34453d;border-radius:4px;color:#c1d9cb;display:inline-block;margin-bottom:18px}@media(min-width:1600px){#panel{width:290px}.right-panel{width:240px}#stage{padding:65px}}@media(max-width:1180px){.right-panel,.bottom-tip,.local-badge{display:none}}@media(max-width:760px){header{height:62px;padding:0 13px;gap:12px}.brand{font-size:26px}.brand-mark{font-size:30px}.studio,.document,.footer-brand,kbd{display:none}.header-actions{gap:7px}.header-actions button{font-size:10px;min-width:0!important;padding:8px 10px}main{height:calc(100dvh - 102px)}nav{flex-basis:58px;padding:12px 5px;gap:5px}nav button{font-size:8px;padding:9px 0}nav button.active:before{left:-5px}#panel{width:205px}#controls{padding:16px 14px}.panel-heading{margin:0 14px;height:55px}.panel-heading h1{font-size:14px}.panel-footer{padding:12px 8px;gap:5px}.panel-footer button{font-size:9px}#stage{padding:20px}.workspace-top{padding:0 12px}.crumb,.workspace-top .quiet span{display:none}.workspace-top>div{gap:7px}#tabname{max-width:130px}#empty h2{font-size:28px}#empty p{font-size:10px}#empty small{display:none}.empty-symbol{font-size:40px}.workspace-bottom{padding:0 8px}#dimensions{font-size:8px}.zoom{gap:0}.zoom button{padding:4px}.divider{margin:0 2px}footer{height:40px;padding:0 9px;font-size:8px}footer button{font-size:9px;margin:0;padding:5px}#status{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(max-width:520px){#panel{width:166px}#controls{padding:14px 10px}.panel-heading{margin:0 10px}.quick-actions{gap:3px}.quick-actions button{font-size:8px}.workspace-top{height:40px}#empty h2{font-size:23px}#empty .eyebrow{font-size:7px}#empty p{font-size:9px}#empty>.primary{padding:10px 12px;font-size:10px}#empty .sample-link{font-size:8px;padding:4px}.workspace-bottom{flex-wrap:wrap;height:65px;padding:6px 8px}.slider{font-size:10px}.filter-card canvas{height:45px}.panel-footer{flex-wrap:wrap}.panel-footer button{flex-basis:100%}#stage{padding:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}#stage.hand-mode,#stage.hand-mode #overlay{cursor:grab!important}#stage.is-panning,#stage.is-panning #overlay{cursor:grabbing!important}#pan[aria-pressed=true]{color:var(--accent);background:#34453e}.zoom button{touch-action:manipulation}#canvas-wrap,#navigator{background:repeating-conic-gradient(#cfd4d8 0% 25%,#eef0f2 0% 50%) 50% / 12px 12px}#panel-close,#panel-scrim{display:none}@media(max-width:760px){main{position:relative;isolation:isolate}#tools{z-index:30}#panel{position:absolute;left:58px;top:0;bottom:0;width:280px;max-width:calc(100% - 74px);z-index:25;transform:translate(calc(-100% - 58px));visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:12px 0 35px #0005}.tool-panel-open #panel{transform:translate(0);visibility:visible;transition:transform .22s ease,visibility 0s}#panel-close{display:block;margin-left:12px;padding:4px 9px;font-size:23px;line-height:1;background:transparent;border:0;color:#bac7c0}.panel-heading #tool-shortcut{margin-left:auto}#panel-scrim{display:block;position:absolute;inset:0 0 0 58px;z-index:20;border:0;border-radius:0;padding:0;background:#080d1099;touch-action:none}#panel .panel-footer{flex-wrap:nowrap}#panel .panel-footer button{flex-basis:0;font-size:11px}#panel .quick-actions button{font-size:10px}}@media(prefers-reduced-motion:reduce){#panel{transition:none!important}}#stage:focus{outline:none}#stage:focus-visible:not(.pointer-focus){outline:2px solid var(--accent);outline-offset:-2px}