.board-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}.board-item{position:absolute;transform-origin:center;cursor:move;touch-action:none;outline:1px solid #ffffff16;background:#202020;box-shadow:0 3px 14px #0004}.board-item.selected{outline:calc(1.5px / var(--board-scale,1)) solid var(--accent);outline-offset:calc(3px / var(--board-scale,1))}.board-preview{display:block;width:100%;height:100%;pointer-events:none}.board-handle{position:absolute;display:none;width:calc(8px / var(--board-scale,1));height:calc(8px / var(--board-scale,1));background:#edc5aa;border:calc(1px / var(--board-scale,1)) solid #29231f;transform:translate(-50%,-50%);padding:0;border-radius:calc(1px / var(--board-scale,1))}.selected .board-handle{display:block}.board-handle.nw{left:0;top:0;cursor:nwse-resize}.board-handle.ne{left:100%;top:0;cursor:nesw-resize}.board-handle.se{left:100%;top:100%;cursor:nwse-resize}.board-handle.sw{left:0;top:100%;cursor:nesw-resize}.stage.show-board>#image-world,.stage.show-board>#sample-popover{display:none!important}.stage.show-board{cursor:grab}.reference-controls .board-file-action{width:30px;height:30px}.board-file-action svg{width:16px;height:16px}.tray-collapsed .reference-controls .board-file-action{display:inline-flex}.reference-controls{flex-wrap:nowrap}.board-tools-hint{color:var(--muted);font-size:10px;padding:7px 0 0}.board-file-action:disabled{opacity:.35}
@media(max-width:760px){.reference-controls .board-file-action{width:26px}.reference-controls{gap:0}}
.board-backdrop{position:absolute;inset:0;background-color:inherit;background-image:radial-gradient(circle,var(--board-grid-dot,#454545) 1px,transparent 1.2px);background-size:24px 24px;pointer-events:none;z-index:0}.board-world{z-index:1}.board-focus-portal{position:absolute;z-index:30;transform-origin:center;pointer-events:none;overflow:hidden}.board-focus-portal>canvas{display:block;width:100%;height:100%}.mode-switching{pointer-events:none}.stage.focus-switching{cursor:wait}
.board-rotate{display:none;position:absolute;left:50%;top:calc(-28px / var(--board-scale,1));width:calc(22px / var(--board-scale,1));height:calc(22px / var(--board-scale,1));padding:0;transform:translate(-50%,-50%);border:calc(1px / var(--board-scale,1)) solid #9e7d68;border-radius:50%;background:#332b26;color:#edc5aa;cursor:grab}.selected .board-rotate{display:flex}.board-rotate:before{content:"";position:absolute;left:50%;top:100%;width:calc(1px / var(--board-scale,1));height:calc(17px / var(--board-scale,1));background:#9e7d68;pointer-events:none}.board-rotate>svg{width:calc(13px / var(--board-scale,1));height:calc(13px / var(--board-scale,1))}.board-rotate:active{cursor:grabbing}.board-rotate:focus-visible{outline:calc(2px / var(--board-scale,1)) solid var(--accent);outline-offset:calc(3px / var(--board-scale,1))}

.studio{container-type:inline-size;grid-template-rows:auto minmax(180px,1fr)44px var(--tray-height)}
.stage-toolbar{min-height:48px;flex-wrap:wrap;gap:10px;padding:6px 0;overflow:visible}
.workspace-modes{display:flex;position:relative;isolation:isolate;padding:3px;border:1px solid #363636;border-radius:7px;background:#1c1c1c;flex-shrink:0}
.workspace-modes:before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/2);border-radius:4px;background:#414141;box-shadow:0 1px 3px #0004,inset 0 1px #ffffff09;transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);z-index:-1}
.workspace-modes[data-view=board]:before{transform:translateX(0)}
.workspace-modes button{height:26px;min-width:66px;padding:0 8px;gap:6px;border-radius:4px;font-size:11px;color:#989898;background:none}
.workspace-modes button[aria-pressed=true]{color:#eeeae0}.workspace-modes button:hover{color:var(--text);background:#ffffff06}.workspace-modes button:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;text-decoration:none}.workspace-modes button>svg{width:14px;height:14px}
.editor-actions,.transform-actions,.display-actions{display:flex;align-items:center;flex-shrink:0;gap:2px}.editor-actions .history-actions{padding-right:8px;margin-right:5px;border-right:1px solid var(--line);gap:0}.editor-actions .icon-button{width:28px;height:30px}.display-actions{margin-left:auto}.display-actions .icon-button{width:28px}.display-actions .zoom-controls{height:30px;margin-left:5px;padding-left:6px}.display-actions #zoom-label{min-width:34px;text-align:center}
@container(max-width:560px){.stage-toolbar{gap:5px;min-height:44px;padding:6px 0}.workspace-modes button{min-width:61px;padding:0 6px}.editor-actions{order:3;flex-basis:100%}.display-actions .icon-button{width:25px}.display-actions .zoom-controls{margin-left:2px;padding-left:4px}.display-actions .quiet-button{padding:6px}.display-actions #zoom-label{min-width:30px}}
@media(max-width:760px){.studio{grid-template-rows:auto minmax(230px,1fr)42px var(--tray-height)}}
@media(prefers-reduced-motion:reduce){.workspace-modes:before{transition:none}}

.studio{--image-view-row:44px}
.studio:has(.show-board){grid-template-rows:auto minmax(180px,1fr) 0 var(--tray-height)}
.studio:has(.show-board) .view-strip,.studio:has(.show-board) [data-tool]:not([data-tool=pan]),.studio:has(.show-board) #toggle-overlays,.studio:has(.show-board) #toggle-layers,.studio:has(.show-board) .tool-rail>span{display:none}
.reference-controls .board-file-action{display:none}
.tray-collapsed .reference-controls .board-file-action{display:none}
.stage-toolbar{gap:14px;padding-block:7px}
.workspace-modes{border-color:#363636;background:#1d1d1d;box-shadow:inset 0 1px 3px #0002}
.workspace-modes button{min-width:68px;height:28px;color:#a5a5a1}
.workspace-modes:before{background:linear-gradient(#454545,#3b3b3b);box-shadow:0 1px 3px #0005,inset 0 1px #ffffff0d}
.editor-actions .icon-button,.display-actions .icon-button{height:32px;border-radius:5px}
.editor-actions .icon-button{width:29px}
.display-actions #zoom-label{font-size:10px;color:#a5a5a1}
.display-actions .zoom-controls{gap:1px;padding-left:8px;margin-left:7px}
.stage{border-color:#3a3a3a;border-radius:8px;box-shadow:inset 0 1px 8px #0002}
.tool-button{border-radius:6px;transition:background .16s,color .16s,box-shadow .16s}
.tool-button.active{background:#37302b;box-shadow:inset 0 0 0 1px #695245;color:#e0b294}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;text-decoration:none}
.stage:focus-visible{outline:2px solid #8d7665;outline-offset:-2px}
.board-item:focus-visible{outline:calc(2px / var(--board-scale,1)) solid var(--accent);outline-offset:calc(4px / var(--board-scale,1))}
.board-item{background:transparent;box-shadow:0 3px 14px #0004}
.board-item.selected{outline-color:#cca98f}
.board-handle{width:calc(24px / var(--board-scale,1));height:calc(24px / var(--board-scale,1));border:0;border-radius:0;background:none;box-shadow:none}
.board-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(7px / var(--board-scale,1));height:calc(7px / var(--board-scale,1));border:calc(1px / var(--board-scale,1)) solid #382c24;border-radius:calc(1px / var(--board-scale,1));background:#e5bfa3;pointer-events:none}
.board-handle:hover{background:none}.board-handle:hover:after{background:#ffe3c9}
.board-rotate{background:#2b2724;border-color:#ac8a73;color:#e0b899;box-shadow:0 2px 5px #0003}
.board-rotate:hover{background:#40342c}
.inspector-tabs{gap:12px;padding-left:16px}
.inspector-tabs button{font-size:11px}
.section-tabs{padding-top:6px}
.section-tabs button{min-height:34px;font-size:10px}
.section-tabs button[aria-selected=true]{color:#e8d8ca}
.panel-section{padding:20px 18px}
.section-heading h2,.panel-section>h2{font-weight:500;letter-spacing:.01em}
.segmented{gap:3px;padding:3px;background:#222;border:1px solid #363636;border-radius:6px}
.segmented button{border-radius:3px;font-size:11px;padding:6px;min-height:27px}
.segmented button[aria-pressed=true]{background:#404040;color:#eeeae0;box-shadow:0 1px 3px #0002}
.palette-list{gap:5px 8px}
.palette-cell{border-radius:5px}
.palette-cell>button:first-child{min-height:40px;border-radius:5px;padding:5px 4px}
.palette-cell.selected{background:#ffffff0b;box-shadow:inset 0 0 0 1px #ffffff06}
.swatch-meta strong{font-size:11px;letter-spacing:-.2px;color:#dedbd5}
.swatch-meta small{font-size:9px;margin-top:3px;color:#9b9b95}
.section-inline{margin-top:14px}
.text-button{font-size:11px;min-height:28px}
.board-heading{padding-left:18px}.board-count{font-variant-numeric:tabular-nums;background:#ffffff03;border-color:#3d3d3d}
.board-panel{padding:16px}
#board-focus.board-selection{display:flex;width:100%;align-items:center;gap:11px;min-height:74px;padding:10px;background:#2b2b2b;border:1px solid #414141;border-radius:7px;text-align:left;color:var(--text);justify-content:flex-start}
#board-focus.board-selection:hover{background:#323232;border-color:#56504a}
#board-selected-preview{width:40px;height:52px;flex-shrink:0;object-fit:cover;border-radius:3px;background:#222}
.board-selection .board-name{flex:1;min-width:0;margin:0;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.board-focus-arrow{display:flex;color:#a9a298}.board-focus-arrow svg{width:16px;height:16px}
.board-file-actions{gap:8px;margin-top:18px;padding-top:16px}
.board-file-actions>button{height:33px;border-radius:5px;background:#ffffff02}
.board-file-actions>button:hover{background:#ffffff07;border-color:#535353}
.reference-item{border-radius:6px;border-color:#ffffff12;box-shadow:0 1px 3px #0002}
.reference-item:hover{border-color:#8b8077}
.reference-item.active{border-color:#bf9b82;box-shadow:0 0 0 1px #bf9b8233}
.reference-add{border-radius:6px;border-color:#474747}.reference-add:hover{border-color:#827163;background:#ffffff04;color:#d2b49f}
.reference-remove{border:1px solid #ffffff20;background:#252525dd;color:#ddd;box-shadow:0 1px 3px #0003}
.reference-remove:hover{background:#544039;color:#fff}
.toolbar-tooltip,.tool-tooltip{max-width:min(280px,calc(100vw - 16px));background:#303030;border-color:#4b4b4b;border-radius:6px;box-shadow:0 5px 16px #0005;color:#e5e1d9;font-size:11px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
@media(hover:hover){.tool-button:hover>.tool-tooltip{transition-delay:.4s}}
.tool-button:focus-visible>.tool-tooltip{transition-delay:0s}
.layers-panel,.color-picker,.sample-menu,.select-menu,.sample-popover,.squint-popover,.tray-collapsed>.reference-tray{border-color:#484848;box-shadow:0 8px 24px #0005}
@container(max-width:560px){.stage-toolbar{gap:6px;padding-block:6px}.workspace-modes button{min-width:61px}.editor-actions .icon-button{width:28px}.display-actions .zoom-controls{margin-left:3px;padding-left:4px}}
@media(max-width:760px){.studio{--image-view-row:42px}.studio:has(.show-board){grid-template-rows:auto minmax(230px,1fr) 0 var(--tray-height)}.panel-section{padding:20px}.board-heading{padding-left:20px}.board-panel{padding:16px 20px}.palette-list{gap:5px 7px}.swatch-meta strong{font-size:10px}.swatch-meta small{font-size:9px}}
@media(pointer:coarse){.board-handle{width:calc(34px / var(--board-scale,1));height:calc(34px / var(--board-scale,1))}.board-rotate{width:calc(30px / var(--board-scale,1));height:calc(30px / var(--board-scale,1));top:calc(-32px / var(--board-scale,1))}}
@media(prefers-reduced-motion:reduce){button,.tool-button,.reference-item,.tool-tooltip{transition:none}}

.section-tabs button:hover{background:#ffffff04}.section-tabs button[aria-selected=true]{background:transparent}
.workspace{transition:grid-template-columns .2s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.workspace{transition:none}}