:root{font:12px system-ui,sans-serif;color:#ddd;background:#292929;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{border:1px solid #555;background:#363636;color:#ddd;border-radius:3px;padding:6px 9px;cursor:pointer}button:hover{background:#484848}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true]{background:#595959;box-shadow:inset 0 0 0 1px #aaa}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #69a8ff;outline-offset:2px}#app{height:100dvh;display:grid;grid-template-rows:42px 37px minmax(0,1fr) 25px}.bar{display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #171717}.brand{font-size:inherit;line-height:inherit;font-weight:700;letter-spacing:.04em;margin:0 14px 0 0;color:#eee}.spacer{flex:1}.control{background:#333}.main{display:grid;grid-template-columns:45px minmax(0,1fr) 245px;min-height:0}.tools{border-right:1px solid #151515;display:flex;flex-direction:column;gap:5px;padding:7px 4px}.tools button{width:36px;height:35px;padding:7px}.tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}.stage{position:relative;overflow:hidden;background:#3e3e3e}.document-tab{height:29px;background:#292929;border-bottom:1px solid #161616;display:flex;align-items:center;padding:0 12px;color:#ccc}.viewport{position:absolute;inset:29px 0 0}.viewport canvas,.viewport svg{position:absolute;width:100%;height:100%;inset:0}.viewport svg{pointer-events:none}.panels{background:#303030;border-left:1px solid #171717;overflow:auto}.panel-title{padding:11px;font-weight:600;border-bottom:1px solid #171717}.panel-content{padding:12px}label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}input{width:100px;background:#232323;border:1px solid #555;color:#ddd;padding:4px}select{background:#232323;border:1px solid #555;padding:4px;color:#ddd}.layers{padding:7px}.layer-row{display:flex;align-items:center;gap:6px;padding:5px;border-bottom:1px solid #383838}.layer-row button{flex:1;text-align:left}.status{border-top:1px solid #161616;display:flex;align-items:center;padding:0 10px;gap:15px;color:#aaa}#notice{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#error{color:#ffb4a8}input[type=color]{width:45px;height:25px;padding:1px}.selected{color:#8db8ff}@media(max-width:800px){.main{grid-template-columns:45px minmax(0,1fr) 190px}.brand{margin-right:3px}.bar{gap:3px;padding:0 5px}button{padding:6px}}

#menus{display:flex;gap:3px}.menu{position:relative}.menu summary{list-style:none;cursor:pointer;padding:6px}.menu summary:hover,.menu[open] summary{background:#444}.menu-popup{position:absolute;left:0;top:28px;z-index:10;min-width:220px;padding:5px;background:#343434;border:1px solid #555;box-shadow:0 4px 15px #0008}.menu-popup button{display:flex;justify-content:space-between;gap:20px;width:100%;border:0;text-align:left;background:transparent}.menu-popup button:hover{background:#555}.menu-popup small{color:#aaa}
.editing-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.editing-grid label{margin:2px 0;min-width:0}.editing-grid input[type=number]{width:65px}.editing-grid>label:has(select),.editing-grid>label:has(input[type=checkbox]){grid-column:1/-1}.editing-actions{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.editing-actions button{flex:1;min-width:65px}.reference-grid{display:grid;grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px);grid-column:1/-1;justify-content:start;gap:2px}.reference-grid button{padding:0}input[type=checkbox]{width:14px;height:14px;padding:0;flex-shrink:0}.layer-row{gap:4px}.layer-row button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-layer{border-left:3px solid #70aaff}#layer-actions{padding:7px}dialog{min-width:300px;max-width:95vw;padding:18px;background:#303030;color:#ddd;border:1px solid #666;border-radius:5px}dialog::backdrop{background:#0006}dialog h3{margin:0 0 15px}dialog>button{margin:8px 5px 0 0}.dialog-error{color:#ffb4a8;max-width:300px}.menu-popup{max-height:70vh;overflow:auto}
.editing-grid>label:not(:has(select)):not(:has(input[type=checkbox])){display:grid;grid-template-columns:1fr;gap:3px}.editing-grid input[type=number]{width:100%;min-width:0}.editing-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.editing-actions button{overflow-wrap:anywhere;min-width:0;width:100%}.editing-grid button{overflow-wrap:anywhere}
.menu-popup button[aria-checked=true] span::before{content:'✓ '}
#placement-controls:not([hidden]){display:flex;align-items:center;gap:8px;max-width:250px}#pending-image{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.links{padding:7px;display:flex;flex-direction:column;gap:5px}.links button{text-align:left;overflow-wrap:anywhere}#isolation-bar:not([hidden]){position:absolute;inset:0 0 auto;z-index:4;background:#555e;height:27px;display:flex;align-items:center;gap:6px;padding:2px 6px}#isolation-bar button{padding:3px 7px}

body.cropping .control>:not(#crop-controls){display:none}#crop-controls:not([hidden]){display:flex;align-items:center;gap:7px;overflow-x:auto;width:100%}#crop-controls label{display:flex;align-items:center;gap:4px;white-space:nowrap}#crop-controls input[type=number]{width:70px;min-width:70px}#crop-controls input[aria-invalid=true]{outline:1px solid #ff9285}.crop-reference{display:grid;grid-template-columns:repeat(3,8px);gap:1px;flex-shrink:0}.crop-reference button{width:8px;height:8px;min-width:0;padding:0;border-radius:0;background:#777}.crop-reference button[aria-pressed=true]{background:#fff}#crop-controls button{white-space:nowrap}

.image-context-menu{position:fixed;z-index:20;padding:4px;background:#333;border:1px solid #666;box-shadow:0 3px 12px #0008}.image-context-menu button{text-align:left;width:100%}

.link-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px}.link-actions button{overflow-wrap:anywhere;min-width:0}.link-actions select{grid-column:1/-1}#link-details{padding:8px}#link-details summary{cursor:pointer}#link-info{display:grid;grid-template-columns:minmax(65px,1fr) minmax(0,1.5fr);gap:6px;margin:10px 0}#link-info dt{color:#aaa}#link-info dd{margin:0;overflow-wrap:anywhere}

#appearance-panel,#transparency-panel,#strokeOptions-panel{padding:8px;border-top:1px solid #171717}#appearance-panel summary,#transparency-panel summary,#strokeOptions-panel summary{cursor:pointer;font-weight:600;padding:4px 0}#appearance-list{margin:6px 0}.appearance-row{display:flex;align-items:center;gap:5px;margin:3px 0}.appearance-row button{flex:1;text-align:left}.appearance-swatch{width:18px;height:18px;border:1px solid #888;flex-shrink:0}.appearance-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.appearance-actions button{min-width:0;overflow-wrap:anywhere}#transparency-panel select,#strokeOptions-panel select{max-width:130px}#strokeOptions-panel input[type=number]{width:70px}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.dash-grid label{display:block;min-width:0}.dash-grid input[type=number]{display:block;width:100%!important}.dash-grid span{display:block;margin-bottom:3px}
/* Keep narrow controls clear of WebKit's transient overlay scrollbar hit area. */
#appearance-panel,#transparency-panel,#strokeOptions-panel{padding-right:20px}

.menu-submenu>summary{padding:6px 9px;cursor:pointer}.menu-submenu>summary::after{content:" ▸";float:right}.submenu-popup{padding-left:9px}.clipping-actions{display:flex;flex-wrap:wrap;gap:4px;padding:7px}.clipping-actions button{min-width:0;overflow-wrap:anywhere;flex:1}
.mask-thumbnails{display:flex;align-items:center;gap:4px;margin:6px 0}.mask-thumbnails>button:not([data-opacity-action]){width:76px;height:76px;padding:1px;position:relative;background:repeating-conic-gradient(#ddd 0% 25%,#aaa 0% 50%) 0/12px 12px}.mask-thumbnails img{width:72px;height:72px;display:block}.mask-thumbnails button[aria-pressed=true]{outline:2px solid #8ab5f1}.mask-thumbnails .mask-disabled::after{content:'×';position:absolute;inset:0;color:#e24a4a;font-size:70px;line-height:70px}#opacity-mask-menu{margin:6px 0}#opacity-mask-menu button{display:block;width:100%;text-align:left}#opacity-mask-menu label{display:flex;align-items:center;gap:4px}#transparency-panel>[data-opacity-action]{margin:3px}#mask-editing-bar:not([hidden]){position:absolute;top:6px;left:6px;z-index:4;padding:5px;background:#383838;border:1px solid #777}.clipping-actions{display:grid;grid-template-columns:1fr 1fr}.clipping-actions button:first-child{grid-column:1/-1}
#transparency-panel label[hidden],.mask-thumbnails[hidden]{display:none}
#gradient-panel{padding-right:20px}#gradient-panel>label{display:flex;justify-content:space-between;gap:8px;margin:6px 0}#gradient-panel input,#gradient-panel select{max-width:112px;min-width:0}#gradient-panel>button{margin:4px 2px;max-width:100%;white-space:normal}#gradient-slider{height:20px;margin:12px 8px 22px;position:relative;border:1px solid #777;cursor:copy}#gradient-slider button{position:absolute;top:18px;width:10px;height:13px;padding:0;transform:translateX(-50%);border:1px solid #777;background:#eee;cursor:pointer}#gradient-slider button[aria-pressed=true]{background:#70aaff}
#gradient-slider button[data-gradient-midpoint]{top:-11px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg)}

#gradient-panel>[hidden]{display:none}

#gradient-panel>.gradient-spread>input{width:54px;flex:1}#gradient-panel>.gradient-spread>select{width:48px;padding:4px 0}#gradient-panel>.gradient-spread>span{flex:1}

.swatch-row{display:flex;align-items:center;gap:6px;width:100%;text-align:left;min-height:28px}.swatch-row[aria-pressed="true"]{background:#39557a}.swatch-preview{width:22px;height:20px;flex-shrink:0;border:1px solid #777}.swatch-actions{display:flex;flex-wrap:wrap;gap:4px}#swatches-list{max-height:220px;overflow:auto}#swatch-dialog form{display:grid;gap:8px;min-width:250px}#swatch-dialog label{display:flex;justify-content:space-between;gap:12px}#swatch-dialog input[type=number]{width:100px}

.swatch-preview{position:relative}.swatch-global::after,.swatch-spot::after{content:"";position:absolute;right:0;bottom:0;border-left:8px solid transparent;border-bottom:8px solid white}.swatch-spot::before{content:"";position:absolute;right:1px;bottom:1px;width:3px;height:3px;border-radius:50%;background:black;z-index:1}
#color-components>div{display:grid;grid-template-columns:100px 1fr;gap:8px;align-items:center}#color-components input[type=range]{width:100%}#recent-colors{display:flex;flex-wrap:wrap;gap:4px;padding:8px}#recent-colors button{width:22px;height:22px;border:1px solid #888}#color-picker{max-width:680px;width:min(95vw,680px)}#color-picker fieldset{display:flex;gap:12px;padding:8px}#color-picker label{display:flex;gap:6px;align-items:center}#color-picker input[type=number]{width:80px}#picker-color-field{width:256px;height:190px;position:relative;touch-action:none;margin:8px 0;cursor:crosshair}.color-marker{position:absolute;width:10px;height:10px;border:1px solid white;outline:1px solid black;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.picker-samples{display:flex}.picker-samples span{width:110px;height:45px;text-shadow:0 0 2px white;padding:4px}#picker-swatches{display:flex;flex-wrap:wrap;gap:4px}#color-spectrum,#picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
#color-panel [hidden],#picker-swatches[hidden]{display:none}
.main{grid-template-columns:88px minmax(0,1fr) 245px}.tools.toolbox{display:grid;grid-template-columns:repeat(2,36px);grid-auto-rows:35px;gap:5px;align-content:start;overflow-y:auto;overflow-x:visible}.tool-slot{position:relative;width:36px;height:35px}.tool-slot>.tool-flyout>button{display:none;width:36px;height:35px}.tool-slot>.tool-flyout>button.face{display:flex}.tool-flyout{position:static}.tool-slot .slot-more{position:absolute;right:0;bottom:0;width:9px;height:9px;padding:0;border:0;background:linear-gradient(135deg,transparent 50%,#bbb 50%);border-radius:0}.tool-slot.open>.tool-flyout{position:fixed;z-index:30;background:#2b2b2b;border:1px solid #111;border-radius:4px;padding:4px;display:flex;flex-direction:column;min-width:190px;box-shadow:0 6px 18px #0008}.tool-slot.open>.tool-flyout>button{display:flex;width:100%;align-items:center;gap:8px;text-align:left}.tool-slot.open .tool-label,.tool-slot .tool-label{display:none}.tool-slot.open .tool-label{display:inline}.tool-slot svg .glyph{fill:currentColor;stroke:none;font-size:10px;font-weight:700}
[hidden]{display:none!important}
button.unavailable{opacity:.4;cursor:default}button.unavailable:hover{background:#363636}
.pathfinder-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px}.pathfinder-grid button{padding:4px 2px;font-size:11px;line-height:1.15;min-height:34px;overflow-wrap:anywhere}
.ruler{position:absolute;z-index:3;background:#2d2d2d;color:#bbb;user-select:none;touch-action:none}#ruler-h{left:0;top:0;right:0;height:20px;cursor:ns-resize}#ruler-v{left:0;top:20px;bottom:0;width:20px;cursor:ew-resize}.ruler svg{position:static!important;width:100%;height:100%;pointer-events:none}#ruler-h svg{height:20px}#ruler-v svg{width:20px}

[data-chrome="hidden"] .panels,[data-chrome="hidden"] .toolbox,[data-chrome="hidden"] .bar{display:none}

.panels [hidden]{display:none!important}

.tools button[data-glyph]{position:relative}.tools button[data-glyph]::before{content:attr(data-glyph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;opacity:.85;pointer-events:none}.tools button[data-glyph] svg{visibility:hidden}

#layers.virtual{max-height:45vh;overflow-y:auto}#layers.virtual .layer-row{height:28px;padding-top:0;padding-bottom:0;overflow:hidden}
.layer-row.drop-before{box-shadow:inset 0 2px 0 #4a90ff}.layer-row.drop-after{box-shadow:inset 0 -2px 0 #4a90ff}.layer-row.drop-into{outline:2px solid #4a90ff;outline-offset:-2px}
.draw-modes{display:flex;gap:2px;padding:6px 2px 2px}.draw-modes button{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center}.draw-modes button svg{width:16px;height:16px}.draw-modes path{fill:none;stroke:currentColor;stroke-width:1.4}.draw-modes button[aria-pressed=true]{background:#3a5f9c}

/* Graphic Styles panel views and multi-selection */
#graphic-styles-list [data-multi="true"]{outline:2px solid var(--accent,#4c8dff)}
#graphic-styles-list[data-view="thumbnail"] .swatch-row{display:inline-block;width:34px;height:34px;overflow:hidden;font-size:0;margin:2px}
#graphic-styles-list[data-view="thumbnail"] .swatch-chip{width:24px!important;height:24px!important;margin:0!important}
#graphic-styles-list[data-view="small"] .swatch-row{display:block;font-size:11px;padding:0 4px}
#graphic-styles-list[data-view="large"] .swatch-row{display:block;font-size:14px;padding:6px 8px}
#graphic-styles-list[data-view="large"] .swatch-chip{width:28px!important;height:28px!important}
.tools.toolbox .draw-modes{grid-column:1/-1}