/* Hallmark · macrostructure: Workbench · tone: utilitarian · anchor hue: cobalt */
/* Hallmark · pre-emit critique: P4 H4 E3 S5 R4 V4 · desktop inspected; mobile unverified */
@import url('./tokens.css');
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.5 var(--font-body);overscroll-behavior:none}button,input,textarea,select{font:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:0;background:var(--color-transparent);color:inherit;cursor:pointer;white-space:nowrap}button:disabled{opacity:.35;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}input,textarea,select{min-width:0;color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-transparent);border-radius:var(--radius-control)}input:hover,select:hover,textarea:hover{border-color:var(--color-rule-2)}input[aria-invalid=true]{border-color:var(--color-error)}input:disabled,select:disabled{opacity:.45;cursor:not-allowed}input[type=number]{appearance:textfield;-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}input[type=checkbox]{accent-color:var(--color-accent)}svg{flex-shrink:0}h1,h2,h3{font-style:normal;overflow-wrap:anywhere}button svg{pointer-events:none}kbd{font:var(--text-xs)/1.5 var(--font-mono);color:var(--color-muted)}[hidden]{display:none!important}.app{height:100dvh;min-height:400px;display:flex;flex-direction:column}.topbar{height:64px;flex-shrink:0;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);border-bottom:1px solid var(--color-rule);background:var(--color-panel);z-index:20}.brand{height:40px;gap:var(--space-3);padding:0 var(--space-2);border-radius:var(--radius-control)}.brand-mark{display:inline-flex;align-items:center;font:600 26px/.8 var(--font-display);letter-spacing:-5px;width:28px;color:var(--color-accent)}.brand-mark span{padding-top:9px}.brand-name{font:600 16px/1 var(--font-display);letter-spacing:-.5px}.menu-caret{display:flex;color:var(--color-muted)}.menu-caret svg{width:14px}.top-separator{height:24px;width:1px;background:var(--color-rule)}.document-heading{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}.document-heading input{background:var(--color-transparent);padding:1px 5px;margin-left:-5px;width:clamp(150px,26vw,330px);font-weight:500;font-size:var(--text-md);text-overflow:ellipsis}.save-status{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--color-muted)}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--color-success)}.save-status.error{color:var(--color-error)}.save-status.error .status-dot{background:var(--color-error)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}.history-actions{display:flex;gap:var(--space-1);margin-right:var(--space-2)}.icon-button{width:34px;height:34px;border-radius:var(--radius-control)}.small-icon{width:28px;height:28px;padding:0;border-radius:var(--radius-sm);color:var(--color-muted)}.small-icon svg{width:15px;height:15px}.command-trigger{border:1px solid var(--color-rule);height:34px;border-radius:var(--radius-control);padding:0 9px;gap:var(--space-3);color:var(--color-muted)}.command-trigger svg{width:15px}.button{height:34px;padding:0 13px;border:1px solid var(--color-rule);border-radius:var(--radius-control);font-weight:500;background:var(--color-panel);color:var(--color-ink);font-size:var(--text-base)}.button.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.button svg{width:16px;height:16px}.button.wide{width:100%}.button[aria-busy=true]{opacity:.65;cursor:wait}.panel-toggle,.inspector-toggle,.mobile-panel-close{display:none}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr) 260px}.left-panel,.right-panel{background:var(--color-panel);min-width:0;display:flex;flex-direction:column;z-index:10}.left-panel{border-right:1px solid var(--color-rule)}.right-panel{border-left:1px solid var(--color-rule)}.panel-heading{display:flex;align-items:center;justify-content:space-between;height:43px;padding:0 14px;font-size:var(--text-sm);font-weight:600}.pages-section{padding-bottom:12px;border-bottom:1px solid var(--color-rule)}.page-row{display:flex;align-items:center;gap:var(--space-2);height:34px;padding:0 15px;width:100%;text-align:left;color:var(--color-muted)}.page-row svg{width:14px}.page-row span{overflow:hidden;text-overflow:ellipsis;flex:1}.page-row.active{color:var(--color-ink);font-weight:500}.page-row.active .page-check{color:var(--color-accent)}.page-row .page-check{width:16px;color:var(--color-transparent)}.page-row .page-more{flex:none;font-size:18px;line-height:1;width:16px}.layer-heading{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.layer-title{font-weight:600;font-size:var(--text-sm);display:flex;gap:8px;align-items:center}.layer-title span{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;color:var(--color-muted)}.layer-search{padding:0 12px 10px}.layer-search input{width:100%;height:30px;padding:0 8px}.layers-list{flex:1;min-height:0;overflow:auto;padding-bottom:24px;scrollbar-width:thin}.layer-row{height:34px;display:flex;align-items:center;gap:6px;padding-right:8px;user-select:none;position:relative;color:var(--color-ink-2);border-block:1px solid var(--color-transparent);outline-offset:-2px!important}.layer-row.selected{background:var(--color-selected);color:var(--color-accent)}.layer-row.hidden-layer .layer-name{opacity:.45}.layer-row.drag-over{border-top-color:var(--color-accent)}.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:var(--text-sm);cursor:default}.layer-icon{display:flex;color:var(--color-muted)}.layer-icon svg{width:14px;height:14px}.layer-row.selected .layer-icon{color:var(--color-accent)}.layer-toggle{width:18px;height:26px;padding:0;flex:none;color:var(--color-muted)}.layer-toggle svg{width:12px;height:12px}.layer-toggle.collapsed{transform:rotate(-90deg)}.layer-actions{display:flex;gap:0;margin-left:auto}.layer-actions button{width:22px;height:26px;padding:0;color:var(--color-muted);opacity:.35}.layer-actions button svg{width:13px;height:13px}.layer-actions button.set{opacity:1}.layer-row:hover .layer-actions button,.layer-row:focus-within .layer-actions button{opacity:1}.layer-rename{flex:1;width:80px;height:24px;background:var(--color-panel)!important;color:var(--color-ink)}.empty-layers{padding:18px 18px;color:var(--color-muted);font-size:var(--text-sm);line-height:1.8}.left-bottom{border-top:1px solid var(--color-rule);padding:16px 12px;display:flex;align-items:center;gap:9px}.local-badge{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-rule);border-radius:8px;color:var(--color-muted)}.local-badge svg{width:14px}.left-bottom strong{display:block;font-weight:500;font-size:var(--text-sm)}.left-bottom div>span{display:block;font-size:var(--text-xs);color:var(--color-muted);margin-top:3px}.left-bottom>.small-icon{margin-left:auto}.canvas-area{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;background:var(--color-canvas);color:var(--color-ink)}.canvas-topline{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 18px;pointer-events:none}.canvas-topline>*{pointer-events:auto}.canvas-topline>span{color:var(--color-muted);font-size:var(--text-xs);background:var(--color-canvas);padding:3px 5px;border-radius:var(--radius-sm)}.canvas-topline>div{display:flex;align-items:center;gap:8px}.zoom-control{min-width:72px;height:30px;font:var(--text-xs) var(--font-mono);border:1px solid var(--color-rule-2);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink-2);gap:8px}.zoom-control svg{width:13px}.stage{flex:1;min-height:0;position:relative;touch-action:none;overflow:clip;user-select:none;outline:none!important}.stage.grid{background-image:radial-gradient(var(--color-grid) 1px,var(--color-transparent) 1px);background-size:var(--grid-size,20px) var(--grid-size,20px);background-position:var(--grid-x,0) var(--grid-y,0)}.stage.tool-hand{cursor:grab}.stage.is-panning{cursor:grabbing}.stage.tool-rect,.stage.tool-ellipse,.stage.tool-frame,.stage.tool-line{cursor:crosshair}.stage.tool-text{cursor:text}#canvas{display:block;position:absolute;inset:0;overflow:visible}#objects>g{cursor:default}#objects>g.locked{pointer-events:none}.stage:not(.tool-select) #objects>g{cursor:inherit}#objects text{pointer-events:none}#labels,#guides{pointer-events:none}#labels text{font:11px var(--font-body);fill:var(--color-muted)}.selection-box{fill:none;stroke:var(--color-accent);pointer-events:none}.selection-handle{fill:var(--color-panel);stroke:var(--color-accent)}.selection-size{fill:var(--color-accent)}.selection-size-text{fill:var(--color-accent-ink);font:10px var(--font-mono);text-anchor:middle}.rotation-line{stroke:var(--color-accent);pointer-events:none}.rotation-handle{fill:var(--color-panel);stroke:var(--color-accent);cursor:crosshair}.guide-line{stroke:var(--color-guide);stroke-dasharray:4 3}.marquee-box{fill:var(--color-accent);fill-opacity:.08;stroke:var(--color-accent);stroke-width:1}.floating-toolbar{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:6px;gap:3px;border:1px solid var(--color-rule-2);background:var(--color-panel);color:var(--color-ink);border-radius:12px;box-shadow:0 3px 12px var(--color-shadow);z-index:5}.tool-button{width:38px;height:38px;border-radius:7px;position:relative}.tool-button svg{width:19px;height:19px}.tool-button.active{background:var(--color-accent);color:var(--color-accent-ink)}.tool-divider{width:1px;height:24px;background:var(--color-rule);margin:0 4px}.tool-button .tooltip{position:absolute;bottom:48px;background:var(--color-toast);color:var(--color-toast-ink);font-size:var(--text-sm);border-radius:5px;padding:6px 9px;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);white-space:nowrap}.tool-button:hover .tooltip{opacity:1;transform:none;transition-delay:800ms}.tool-button:focus-visible .tooltip{opacity:1;transform:none;transition-delay:0ms}.tooltip kbd{color:inherit;opacity:.65;margin-left:8px}.canvas-status{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:var(--text-xs);color:var(--color-muted);border-top:1px solid var(--color-rule-2);background:var(--color-paper)}.canvas-status>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-status>div{display:flex;align-items:center;gap:12px}.snap-control{height:26px;font-size:var(--text-xs);gap:4px;color:var(--color-muted)}.snap-control svg{width:12px}.snap-control[aria-pressed=true]{color:var(--color-accent)}.inspector-tabs{height:49px;flex-shrink:0;display:flex;align-items:stretch;padding:0 16px;gap:20px;border-bottom:1px solid var(--color-rule)}.inspector-tabs>button:not(.small-icon){font-size:var(--text-sm);padding:0;color:var(--color-muted);border-bottom:2px solid var(--color-transparent)}.inspector-tabs>button.active{color:var(--color-ink);font-weight:600;border-bottom-color:var(--color-ink)}.inspector-body{overflow:auto;flex:1;min-height:0;scrollbar-width:thin}.inspector-section{padding:18px 16px;border-bottom:1px solid var(--color-rule)}.section-label{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-sm);font-weight:600;margin:0 0 13px}.selection-name{font-size:var(--text-base);font-weight:600;display:flex;gap:8px;align-items:center;overflow:hidden;text-overflow:ellipsis}.selection-name svg{color:var(--color-muted);width:15px}.selection-type{font-size:var(--text-xs);color:var(--color-muted);margin-top:5px}.align-actions{display:flex;justify-content:space-between;margin-bottom:16px}.align-actions button{width:28px;height:28px;border-radius:4px;color:var(--color-muted)}.align-actions svg{width:16px;height:16px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.number-field{height:32px;display:flex;align-items:center;border:1px solid var(--color-transparent);border-radius:var(--radius-control);background:var(--color-paper-2);color:var(--color-muted);position:relative}.number-field span{width:29px;flex-shrink:0;text-align:center;font-size:var(--text-xs);font-family:var(--font-mono)}.number-field input{border:0;background:var(--color-transparent);width:100%;height:30px;padding:0 7px 0 0;font:var(--text-sm) var(--font-mono);border-radius:var(--radius-control)}.number-field:focus-within{outline:2px solid var(--color-focus);outline-offset:1px}.number-field input:focus-visible{outline:none}.number-field:hover{border-color:var(--color-rule-2)}.number-field .unit{width:22px;padding-right:5px;font-family:var(--font-body)}.field-label{display:block;font-size:var(--text-xs);color:var(--color-muted);margin-bottom:5px}.color-row{display:flex;align-items:center;gap:7px}.color-swatch{position:relative;display:flex;width:30px;height:30px;border:1px solid var(--color-rule-2);border-radius:5px;overflow:clip;flex-shrink:0}.color-swatch input{opacity:0;position:absolute;inset:-5px;width:45px;height:45px;cursor:pointer}.color-hex{height:30px;width:100%;padding:0 8px;font:var(--text-sm) var(--font-mono)}.check-label{display:flex;align-items:center;gap:7px;color:var(--color-ink-2);font-size:var(--text-sm)}.check-label input{margin:0}.color-row .icon-button{width:24px;height:28px;flex:none}.small-description{font-size:var(--text-sm);line-height:1.7;color:var(--color-muted);margin:10px 0 0}.inspector-section select{height:32px;width:100%;padding:0 8px;font-size:var(--text-sm)}.text-property{width:100%;min-height:70px;resize:vertical;padding:8px;line-height:1.5;font-size:var(--text-sm);margin-bottom:10px}.text-align-controls{display:flex;gap:4px;margin-top:9px}.text-align-controls button{flex:1;height:29px;border:1px solid var(--color-rule);border-radius:4px;font-size:var(--text-sm)}.text-align-controls button.active{color:var(--color-accent);background:var(--color-selected);border-color:var(--color-accent)}.inspector-actions{display:flex;gap:8px}.inspector-actions button{flex:1}.hint-list{margin:15px 0 0;padding:0;list-style:none}.hint-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:var(--text-sm);color:var(--color-muted)}.property-gap{height:10px}.empty-canvas{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding-bottom:70px}.empty-canvas button{pointer-events:auto;margin-top:16px}.empty-canvas h1{font-size:var(--text-xl);font-weight:500;margin:15px 0 8px}.empty-canvas p{color:var(--color-muted);font-size:var(--text-base);margin:0}.empty-glyph{color:var(--color-muted)}.empty-glyph svg{width:42px;height:42px}.drop-overlay{position:absolute;inset:15px;border:2px dashed var(--color-accent);background:var(--color-selected);color:var(--color-accent);z-index:30;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;pointer-events:none;border-radius:var(--radius-panel)}.drop-overlay svg{width:40px;height:40px}.drop-overlay strong{font-size:var(--text-lg)}.text-editor{position:absolute;z-index:6;border:1px solid var(--color-accent);background:var(--color-panel);outline:2px solid var(--color-accent);border-radius:0;padding:0;resize:none;overflow:auto;transform-origin:top left;user-select:text}.menu{position:fixed;z-index:70;min-width:220px;max-width:min(320px,calc(100vw - 24px));padding:6px;background:var(--color-panel);color:var(--color-ink);border:1px solid var(--color-rule-2);border-radius:var(--radius-panel);box-shadow:0 8px 24px var(--color-shadow);max-height:75vh;overflow:auto}.menu-item{display:flex;align-items:center;justify-content:flex-start;width:100%;height:34px;padding:0 9px;border-radius:5px;text-align:left;gap:9px;font-size:var(--text-sm)}.menu-item svg{width:15px;height:15px;color:var(--color-muted)}.menu-item>span{overflow:hidden;text-overflow:ellipsis}.menu-item kbd{margin-left:auto}.menu-divider{height:1px;background:var(--color-rule);margin:5px}.menu-label{font-size:var(--text-xs);color:var(--color-muted);padding:7px 9px}.toast{position:fixed;bottom:38px;left:50%;transform:translateX(-50%);background:var(--color-toast);color:var(--color-toast-ink);padding:11px 16px;border-radius:var(--radius-control);font-size:var(--text-base);z-index:150;max-width:min(520px,90vw);box-shadow:0 4px 14px var(--color-shadow)}.toast.error{border-left:3px solid var(--color-error)}dialog{inset:0;position:fixed;margin:auto;max-height:min(80vh,650px);width:min(480px,calc(100vw - 32px));height:fit-content;overflow:auto;padding:24px;border:1px solid var(--color-rule-2);border-radius:var(--radius-dialog);background:var(--color-panel);color:var(--color-ink);box-shadow:0 15px 50px var(--color-shadow)}dialog::backdrop{background:var(--color-overlay)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-heading h2{font:600 18px/1.4 var(--font-display);margin:0}.dialog-heading button{margin-right:-8px}.dialog-field{margin-bottom:16px}.dialog-field label{display:block;font-size:var(--text-base);font-weight:500;margin-bottom:7px}.dialog-field input:not([type=checkbox]),.dialog-field select{width:100%;height:38px;padding:0 10px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.dialog-description{color:var(--color-muted);font-size:var(--text-sm);line-height:1.8}.shortcut-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 25px}.shortcut-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--text-sm);padding:6px 0}.shortcut-item kbd{border:1px solid var(--color-rule);border-radius:4px;padding:2px 5px;background:var(--color-paper)}.command-input{width:100%;height:40px;padding:0 12px;margin-bottom:12px}.command-list{display:flex;flex-direction:column;max-height:350px;overflow:auto;gap:3px}.command-item{height:40px;padding:0 10px;justify-content:flex-start;gap:10px;border-radius:5px}.command-item.active{background:var(--color-selected);color:var(--color-accent)}.command-item kbd{margin-left:auto}.command-item svg{width:16px}.rename-input{width:100%;height:40px;padding:0 10px}.dialog-error{font-size:var(--text-sm);color:var(--color-error);min-height:20px;margin-top:8px}.mobile-backdrop{display:none}
@media(hover:hover){.brand:hover,.icon-button:hover,.small-icon:hover,.tool-button:not(.active):hover,.menu-item:hover,.command-trigger:hover,.page-row:hover,.align-actions button:hover{background:var(--color-paper-2);color:var(--color-ink)}.button:hover{background:var(--color-paper-2)}.button.primary:hover{background:var(--color-accent-hover);color:var(--color-accent-ink)}.layer-row:hover:not(.selected){background:var(--color-paper)}.layer-actions button:hover{color:var(--color-ink)}.command-item:hover{background:var(--color-paper-2)}}
@media(max-width:1100px){.workspace{grid-template-columns:202px minmax(0,1fr) 236px}.brand-name{display:none}.topbar{gap:12px}.top-actions{gap:8px}.inspector-section{padding:16px 12px}.floating-toolbar{gap:0}.tool-button{width:35px}.layer-name{font-size:10px}.top-separator{display:none}}
@media(max-width:900px){.workspace{grid-template-columns:190px minmax(0,1fr)}.right-panel{display:none;position:absolute;top:64px;bottom:0;right:0;width:260px;box-shadow:-4px 0 20px var(--color-shadow);z-index:25}.app.show-inspector .right-panel{display:flex}.inspector-toggle{display:inline-flex}.mobile-panel-close{display:inline-flex;margin-left:auto;align-self:center}.inspector-tabs{gap:16px}.document-heading input{width:clamp(140px,35vw,280px)}}
@media(max-width:680px){.topbar{height:58px;padding:0 10px;gap:8px}.workspace{grid-template-columns:minmax(0,1fr)}.left-panel{display:none;position:absolute;top:58px;bottom:0;left:0;width:240px;box-shadow:4px 0 20px var(--color-shadow);z-index:25}.app.show-layers .left-panel{display:flex}.right-panel{top:58px;width:min(280px,calc(100vw - 24px))}.panel-toggle{display:inline-flex}.brand{padding:0;width:31px}.menu-caret{display:none}.document-heading input{width:clamp(90px,25vw,190px);font-size:11px}.top-actions{gap:2px}.history-actions{margin:0;gap:0}.history-actions .icon-button{width:28px}.command-trigger{display:none}.export-label{display:none}.top-actions>.primary{width:34px;padding:0;margin-left:3px}.top-actions>.icon-button{width:29px}.save-status{font-size:9px}.floating-toolbar{padding:4px;border-radius:10px;bottom:44px;max-width:calc(100% - 20px);gap:0}.tool-button{width:36px;height:40px}.tool-divider{margin:0 2px}.canvas-topline{height:44px;padding:0 12px}.canvas-status{font-size:9px;padding:0 9px}.snap-control{font-size:9px}.canvas-status>div{gap:6px}.canvas-status>span{max-width:65%}.empty-canvas h1{font-size:20px}.empty-canvas p{font-size:11px}.empty-canvas{padding:0 12px 70px}.left-bottom{padding-bottom:max(16px,env(safe-area-inset-bottom))}}
@media(max-width:375px){.topbar{gap:4px;padding:0 7px}.document-heading input{width:85px}.history-actions .icon-button{width:25px}.top-actions>.icon-button{width:27px}.tool-button{width:32px}.floating-toolbar{padding:3px}.floating-toolbar .tool-divider{display:none}.top-actions>.primary{width:29px}.brand-mark{font-size:24px}.shortcut-grid{grid-template-columns:minmax(0,1fr)}}
@media(pointer:coarse){.menu-item{min-height:44px}.small-icon{min-width:32px;min-height:32px}.page-row,.layer-row{min-height:44px}.layer-actions button{width:28px;height:40px}.tool-button{height:44px}.icon-button{min-height:38px}.number-field,.number-field input,.inspector-section select{height:40px}.button{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Constrain editor panels to the viewport; only their contents scroll. */
.workspace{grid-template-rows:minmax(0,1fr)}
.left-panel,.right-panel{min-height:0}
.page-row .page-check{flex:0 0 16px}
#objects g.locked{pointer-events:none}

.stage:focus-visible{outline:2px solid var(--color-focus)!important;outline-offset:-2px}

.button.primary:focus-visible,.tool-button.active:focus-visible{box-shadow:0 0 0 2px var(--color-panel)}

/* Frame, layout and component controls. */
.resource-tabs{display:flex;gap:16px;padding:10px 15px;border-bottom:1px solid var(--color-rule)}.resource-tabs button{font-size:12px;padding:4px 0;color:var(--color-muted)}.resource-tabs button.active{color:var(--color-ink);font-weight:600}.setting-label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--color-muted);margin:9px 0;min-width:0}.setting-label input,.setting-label select{width:100%;height:32px;padding:0 8px;font-size:12px;color:var(--color-ink);min-width:0}.feature-button{margin-top:8px;font-size:12px}.source-name{font-size:13px;color:#7c3aed}.property-control{margin:12px 0}.assets-heading{padding:16px;font-size:12px;font-weight:600}.assets-heading span{color:var(--color-muted)}.asset-card{margin:0 12px 12px;padding:16px 12px;border:1px solid var(--color-rule);border-radius:8px;background:var(--color-panel)}.asset-card strong{font-size:12px;display:block;overflow-wrap:anywhere}.asset-symbol{font-size:32px;color:#7c3aed;margin-bottom:12px}.asset-actions{display:flex;gap:6px;margin-top:12px}.asset-actions button{flex:1;font-size:11px}.assets-empty{padding:12px}.inspector-body .check-label{margin:8px 0}.setting-label input:focus-visible,.setting-label select:focus-visible{outline:2px solid var(--color-focus)}

#labels text[data-frame-label]{pointer-events:auto;cursor:pointer}

/* Canvas editing feedback stays a constant size at every zoom level. */
.selection-handle{pointer-events:none}
.selection-handle-hit{fill:transparent;pointer-events:all}
.selection-edge{stroke:transparent;pointer-events:stroke}
.selection-size,.selection-size-text{pointer-events:none}
.stage[data-gesture=resize] *, .stage[data-gesture=move] *{cursor:inherit!important}
.canvas-guide{fill:none;stroke:#f24e67;pointer-events:none}
.canvas-guide.guide-align{stroke:#f24e67;stroke-dasharray:3 2}
.canvas-guide.guide-dimension{stroke:#a259ff}
.canvas-guide.guide-insertion{stroke:#0d99ff;stroke-width:2}
.guide-badge{pointer-events:none}
.guide-badge rect{fill:#f24e67}
.guide-badge text{fill:#fff;font-family:Inter,Arial,sans-serif;text-anchor:middle}
.guide-badge.guide-position rect{fill:#0d99ff}
.guide-badge.guide-dimension rect{fill:#9747ff}
.canvas-rulers{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.canvas-rulers svg{position:absolute;font:10px Inter,Arial,sans-serif;fill:#8b8b8b;overflow:hidden}
#ruler-x{top:0;left:0;width:100%;height:20px;border-bottom:1px solid #ddd}
#ruler-y{top:0;left:0;width:20px;height:100%;border-right:1px solid #ddd}
.ruler-bg{fill:#fafafa}
.ruler-tick{stroke:#c2c2c2;stroke-width:1}
.ruler-selection{fill:#e5f4ff}
.ruler-bound rect{fill:#f3faff}
.ruler-bound text{fill:#087bb5}
.ruler-cursor{stroke:#f24e67;stroke-width:1}
.ruler-corner{position:absolute;top:0;left:0;width:20px;height:20px;background:#fafafa;border-right:1px solid #ddd;border-bottom:1px solid #ddd;font:9px/20px Inter,Arial,sans-serif;text-align:center;color:#999}
.canvas-area.rulers-visible .canvas-topline{top:20px;left:20px}
.canvas-arrange{height:28px;gap:5px;border:1px solid var(--color-rule-2);border-radius:5px;background:var(--color-paper);font-size:11px;padding:0 8px}
.canvas-arrange svg{width:14px;height:14px}
.canvas-topline .small-icon[aria-pressed=true]{background:var(--color-selected);color:var(--color-accent)}
@media(max-width:680px){.canvas-arrange>span:last-child{display:none}.canvas-topline>div{gap:3px}.canvas-topline>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
#hover-overlay,#hover-overlay *{pointer-events:none}
.hover-outline{fill:none;stroke:#0d99ff;stroke-width:1;vector-effect:non-scaling-stroke}

/* Component assets use the same resolved SVG geometry as the canvas. */
.asset-card{padding:12px}
.asset-preview{height:104px;min-width:0;padding:14px 10px;display:grid;place-items:center;overflow:hidden;border-radius:5px;background:repeating-conic-gradient(var(--color-panel) 0% 25%,var(--color-paper-2) 0% 50%) 50% / 12px 12px}
.asset-preview .asset-art{display:block;max-width:100%;max-height:100%;pointer-events:none;user-select:none}
.asset-preview-unavailable{font-size:10px;line-height:1.6;text-align:center;color:var(--color-muted)}
.asset-details{display:flex;flex-direction:column;gap:3px;margin-top:12px;min-width:0}
.asset-details strong{font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset-details>span{font:10px/16px var(--font-mono);color:var(--color-muted)}
.asset-card .asset-actions{margin-top:10px}
.asset-card .asset-actions .button{height:30px}
.canvas-shortcuts{height:28px;gap:5px;border:1px solid var(--color-rule-2);border-radius:5px;background:var(--color-paper);font-size:11px;padding:0 8px}
.canvas-shortcuts>span{display:inline-flex;align-items:center}
.canvas-shortcuts svg{width:14px;height:14px}
.canvas-topline>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canvas-topline>div{flex-shrink:0}
.empty-canvas{padding-bottom:0}
@media(max-width:680px){.canvas-shortcuts>span:last-child{display:none}.canvas-shortcuts{width:28px;padding:0}.canvas-topline{gap:8px}}
@media(max-width:540px){.shortcut-grid{grid-template-columns:minmax(0,1fr);gap:2px}}