/* Room to create: layout only. Editor and commerce retain their canonical DOM. */ html[data-theme] body[data-editor-shell="canvas"] { --editor-footer-height:64px; --editor-busy-bottom:calc(var(--editor-footer-height) + 12px); } @media(max-width:600px) { html[data-theme] body[data-editor-shell="canvas"] { --editor-footer-height:52px; --editor-busy-bottom:calc(var(--editor-footer-height) + env(safe-area-inset-bottom, 0px)); } } html[data-theme] body[data-editor-shell="canvas"] .editor-canvas-hint { position:absolute; bottom:0; left:0; right:0; min-height:var(--editor-footer-height); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; border-top:1px solid var(--line); background:var(--surface-1); color:var(--text-soft); font-size:14px; font-weight:600; line-height:1.25; pointer-events:none; z-index:5; } html[data-theme] body[data-editor-shell="canvas"] .viewport-controls { display:flex; flex-direction:row; align-items:center; gap:5px; } @media(max-width:600px) { html[data-theme] body[data-editor-shell="canvas"] .editor-canvas-hint { padding:8px 12px; } html[data-theme] body[data-editor-shell="canvas"] .editor-canvas-hint__gesture { display:none; } } html[data-theme] body[data-editor-shell="canvas"] { --rail-width:88px; --dock-width:324px; --cart-width:400px; --header-control-height:40px; font-family:"Segoe UI",system-ui,sans-serif; display:flex; flex-direction:column; } html[data-theme] body[data-editor-shell="canvas"] > .appbar { position:relative; z-index:50; min-height:74px; height:auto; padding:12px 22px; gap:14px; flex-wrap:nowrap; background:var(--surface-1); border-bottom:1px solid var(--line); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] .brand { flex:0 0 auto; width:auto; height:auto; } html[data-theme] body[data-editor-shell="canvas"] .brand__logo { width:156px; height:48px; object-fit:contain; } html[data-theme] body[data-editor-shell="canvas"] .appbar > .help-pop { display:none; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud { position:static; transform:none; display:flex; align-items:center; gap:8px; flex:0 1 390px; min-width:0; width:auto; max-width:none; padding:0 0 0 20px; margin:0; border:0; border-left:1px solid var(--line); border-radius:0; background:none; box-shadow:none; backdrop-filter:none; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud input { box-sizing:border-box; min-width:80px; width:160px; max-width:100%; height:var(--header-control-height); min-height:var(--header-control-height); padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); font-size:13px; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud .mobile-quick-actions { display:none; } html[data-theme] body[data-editor-shell="canvas"] :is(.design-save-hud .btn,.appbar .btn,.appbar .chip) { box-sizing:border-box; border-radius:9px; min-height:var(--header-control-height); } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud .btn { padding:7px 9px; } html[data-theme] body[data-editor-shell="canvas"] #acctStrip { display:flex; align-items:center; width:auto; flex:0 0 auto; margin:0; padding:0; background:none; border:0; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] .acct-strip__auth { display:flex; align-items:center; gap:8px; } html[data-theme] body[data-editor-shell="canvas"] :is(#designSaveButton,#designShareButton,#myDesignsButton) { height:var(--header-control-height); min-height:var(--header-control-height); background:var(--surface-2); border-color:var(--line); border-radius:9px; color:var(--text); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] :is(#designSaveButton,#designShareButton) { width:var(--header-control-height); min-width:var(--header-control-height); padding:0; } html[data-theme] body[data-editor-shell="canvas"] #myDesignsButton { display:flex; align-items:center; gap:7px; min-width:max-content; padding:0 12px; font-size:12px; font-weight:650; } html[data-theme] body[data-editor-shell="canvas"] #myDesignsButton[hidden] { display:none; } html[data-theme] body[data-editor-shell="canvas"] #designShareButton .design-share-button-icon svg { filter:none; transition:filter .2s ease; } html[data-theme] body[data-editor-shell="canvas"] :is(#designSaveButton[data-state="saved"],#designShareButton[data-state="success"]) { border-color:#45cba0; background:color-mix(in srgb,#45cba0 20%,var(--surface-2)); color:#8ff0cf; box-shadow:0 0 0 3px color-mix(in srgb,#45cba0 14%,transparent); } html[data-theme] body[data-editor-shell="canvas"] #designShareButton[data-state="success"] .design-share-button-icon svg { filter:drop-shadow(0 0 4px color-mix(in srgb,#45cba0 58%,transparent)); } html[data-theme] body[data-editor-shell="canvas"] #printedControls { padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; } html[data-theme] body[data-editor-shell="canvas"] .acct-strip__actions { display:none; } html[data-theme] body[data-editor-shell="canvas"] :is(#creditBadge,#acctAuthSlot > button,#acctBtn,#cartToggle,.appbar .printed-controls__entry,.printed-controls__placeholder) { box-sizing:border-box; height:var(--header-control-height); min-height:var(--header-control-height); border-radius:9px; } html[data-theme] body[data-editor-shell="canvas"] :is(#creditBadge,#acctAuthSlot > button,#acctBtn) { display:inline-flex; align-items:center; justify-content:center; padding:0 11px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #acctBtn { background:var(--surface-2)!important; border-color:var(--line)!important; color:var(--text)!important; } html[data-theme] body[data-editor-shell="canvas"] #cartToggle { position:static; display:flex; flex:0 0 auto; min-height:var(--header-control-height); border:1px solid var(--line); border-radius:9px; padding:0 11px; background:var(--surface-2); color:var(--text); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] .cart-button__icon { display:flex; } html[data-theme] body[data-editor-shell="canvas"] .cart-button__count { min-width:20px; height:20px; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] #printedControlsDesktopSlot { display:flex; position:relative; flex:0 0 156px; width:156px; min-width:156px; min-height:var(--header-control-height); margin:0; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls__entry { width:156px; min-width:156px; height:var(--header-control-height); min-height:var(--header-control-height); } html[data-theme] body[data-editor-shell="canvas"] #printedControlsDesktopSlot:has(#printedControls) > .printed-controls__placeholder { display:none; } html[data-theme] body[data-editor-shell="canvas"] .printed-controls__placeholder { opacity:1; pointer-events:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls { position:relative; display:flex; flex-direction:row; gap:8px; } @media(min-width:781px) { html[data-theme] body[data-editor-shell="canvas"] #acctStrip [data-printed-mobile-slot] > #printedControls { display:none; } } @media(max-width:780px) { html[data-theme] body[data-editor-shell="canvas"] #printedControlsDesktopSlot { display:none; } } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay { position:fixed; right:20px; bottom:10px; z-index:48; display:flex; transition:right .32s cubic-bezier(.22,1,.36,1); } html[data-theme] body[data-editor-shell="canvas"].shell-empty-editor .appbar #printedPriceDisplay { display:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls__panel { position:absolute; top:calc(100% + 14px); right:0; bottom:auto; left:auto; width:min(380px,calc(100vw - 24px)); max-height:calc(100dvh - 110px); overflow:auto; border:1px solid var(--line); border-radius:16px; padding:10px; background:var(--surface-1); box-shadow:0 16px 38px #0005; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls--price-open .printed-controls__panel { position:fixed; top:auto; right:20px; bottom:calc(var(--editor-footer-height) + 8px); width:min(380px,calc(100vw - 24px)); max-height:calc(100dvh - var(--appbar-height) - var(--editor-footer-height) - 24px); z-index:48; transition:right .32s cubic-bezier(.22,1,.36,1),max-height .34s cubic-bezier(.2,.78,.18,1),opacity .22s ease; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls--price-open .printed-controls__panel { border-color:color-mix(in srgb,var(--accent) 72%,var(--line)); } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls__panel .printed-price__breakdown { background:transparent; border:0; box-shadow:none; } @media(min-width:901px) { html[data-theme] body[data-editor-shell="canvas"].cart-open .appbar #printedPriceDisplay,html[data-theme] body[data-editor-shell="canvas"].cart-open .appbar .printed-controls--price-open .printed-controls__panel { right:calc(var(--cart-width) + 20px); } } html[data-theme] body[data-editor-shell="canvas"] .purchase-chooser { gap:8px; } html[data-theme] body[data-editor-shell="canvas"] .purchase-chooser__option { padding:14px 12px; border-radius:10px; } html[data-theme] body[data-editor-shell="canvas"] > .row { position:relative; display:flex; flex:1; width:100%; height:calc(100dvh - var(--appbar-height,74px)); min-height:0; overflow:hidden; padding:0; gap:0; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail { width:var(--rail-width); flex:0 0 var(--rail-width); display:flex; flex-direction:column; gap:8px; padding:18px 8px 12px; border-right:1px solid var(--line); background:var(--surface-1); z-index:45; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; min-height:72px; padding:9px 2px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--text-soft); font-size:13px; font-weight:600; cursor:pointer; box-shadow:none; transition:background .15s ease,color .15s ease; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail button:hover { background:var(--surface-3); color:var(--text); } html[data-theme] body[data-editor-shell="canvas"] .editor-rail button[aria-expanded="true"] { background:var(--surface-2); color:var(--accent); border-color:transparent; border-radius:12px 0 0 12px; width:calc(100% + 9px); padding-right:11px; box-shadow:inset 3px 0 var(--accent); } html[data-theme] body[data-editor-shell="canvas"].shell-empty-editor .editor-rail [data-shell-panel]:not([data-shell-panel="panel-file"]):not([data-shell-panel="panel-assistant"]) { display:none; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail__spacer { flex:1; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail__assistant-icon { display:grid; place-items:center; width:28px; height:28px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail__assistant-icon img { display:block; width:28px; height:28px; object-fit:contain; } html[data-theme] body[data-editor-shell="canvas"] .lucide { width:19px; height:19px; stroke-width:1.7; flex-shrink:0; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail .lucide { width:24px; height:24px; stroke-width:1.85; } html[data-theme] body[data-editor-shell="canvas"] .editor-panel { position:relative; display:flex; width:var(--dock-width); flex:0 0 var(--dock-width); min-width:0; padding:0; border-right:1px solid var(--line); background:var(--surface-2); z-index:40; } html[data-theme] body[data-editor-shell="canvas"] .editor-panel { flex-direction:row; overflow:hidden; transition:flex-basis .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1); } html[data-theme] body[data-editor-shell="canvas"] .editor-panel[hidden] { display:flex; flex-basis:0; width:0; border-right:0; visibility:hidden; pointer-events:none; } html[data-theme] body[data-editor-shell="canvas"] .editor-panel #dock { flex:0 0 min(var(--dock-width),calc(100vw - var(--rail-width))); width:min(var(--dock-width),calc(100vw - var(--rail-width))); } html[data-theme] body[data-editor-shell="canvas"] #dock { position:static; width:100%; min-width:0; max-width:none; height:100%; max-height:none; transform:none; visibility:visible; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--edge) transparent; } html[data-theme] body[data-editor-shell="canvas"] #dock::-webkit-scrollbar { display:block; width:5px; } html[data-theme] body[data-editor-shell="canvas"] #dock::-webkit-scrollbar-thumb { background:var(--edge); border-radius:6px; } html[data-theme] body[data-editor-shell="canvas"] #dock > .dock-close,html[data-theme] body[data-editor-shell="canvas"] #dockToggle { display:none!important; } html[data-theme] body[data-editor-shell="canvas"] .editor-panel-heading { display:flex; align-items:center; position:absolute; top:10px; right:0; z-index:4; padding:0; border:0; border-radius:14px 0 0 14px; background:transparent; } html[data-theme] body[data-editor-shell="canvas"] #dock #dockClose { display:flex; align-items:center; justify-content:center; width:34px; height:44px; padding:0; border:1px solid color-mix(in srgb,var(--accent) 70%,var(--primary)); border-right:0; border-radius:14px 0 0 14px; background:linear-gradient(180deg,var(--primary-hover),var(--primary)); color:#fff; box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 35%,transparent); } html[data-theme] body[data-editor-shell="canvas"] #dock #dockClose:hover { filter:brightness(1.08); } html[data-theme] body[data-editor-shell="canvas"] #dock #dockClose .dock-close-icon { width:20px; height:20px; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel { border:0; padding:26px 20px; background:transparent; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel:not([open]) { display:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel > summary { pointer-events:none; list-style:none; padding:0 28px 0 0; margin:0 0 8px; font-size:28px; font-weight:650; line-height:1.3; letter-spacing:-.5px; color:var(--headline); background:none; box-shadow:none; text-transform:none; white-space:normal; min-height:0; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel > summary::marker { content:""; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel > summary::after,html[data-theme] body[data-editor-shell="canvas"] #dock .panel > summary::before { display:none; } html[data-theme] body[data-editor-shell="canvas"] .shell-panel-intro { font-size:13px; line-height:1.65; color:var(--sub); margin:0 0 23px; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel-body { padding:0; border:0; } html[data-theme] body[data-editor-shell="canvas"] #dock .btn { min-height:36px; border-radius:9px; } html[data-theme] body[data-editor-shell="canvas"] #dock .style-callout { border-color:var(--line); background:var(--surface-2); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .style-callout::before { display:none; } /* Neutral sizing card and aligned wall measurements. */ html[data-theme] body[data-editor-shell="canvas"] #advancedLayerSizePanel { padding:16px; background:var(--surface-1); border:1px solid var(--line); border-radius:14px; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__units { gap:8px; margin:0 0 12px; padding:0; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__title { color:var(--text); font-weight:600; } html[data-theme] body[data-editor-shell="canvas"] #sizeNumDisplay { font-size:26px; font-weight:500; font-variant-numeric:tabular-nums; height:52px; padding:8px 12px; border-color:var(--line); } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__overall { display:grid; gap:8px; padding:0; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__details { margin:14px 0 0; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__heading { padding:14px 0 0; background:none; color:var(--text-soft); border:0; box-shadow:none; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__body { padding:14px 0 0; } html[data-theme] body[data-editor-shell="canvas"] .advanced-size-card__chevron { border-color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:start; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .layer-control__header { justify-content:center; min-height:24px; margin:0; gap:6px; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .layer-control__header label { flex:0 1 auto; text-align:center; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .layer-control__header .layer-color-chip { margin-left:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions label { white-space:nowrap; line-height:24px; color:var(--text-soft); } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions :is(.layer-color-chip,.shell-layer-color-pill) { width:24px; min-width:24px; height:11px; padding:0; border-radius:999px; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .shell-layer-color-pill { display:inline-block; flex-shrink:0; border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 0 4px rgba(0,0,0,.38),0 0 0 1px rgba(6,12,20,.45); } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions input[type="number"] { height:36px; width:100%; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .layer-control__slider-row { min-height:18px; } html[data-theme] body[data-editor-shell="canvas"] #dock input[type="range"] { appearance:none; -webkit-appearance:none; height:4px; min-height:4px; margin:10px 0; padding:0; border:0; border-radius:10px; background:var(--edge); box-shadow:none; width:100%; } html[data-theme] body[data-editor-shell="canvas"] #dock input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:var(--accent); cursor:ew-resize; } html[data-theme] body[data-editor-shell="canvas"] #dock input[type="range"]::-moz-range-thumb { width:10px; height:10px; border-radius:50%; border:2px solid var(--accent); background:var(--accent); cursor:ew-resize; } html[data-theme] body[data-editor-shell="canvas"] > .row > main { position:relative; flex:1; min-width:0; width:auto; height:100%; min-height:0; padding:0; margin-right:0; transition:margin-right .32s cubic-bezier(.22,1,.36,1); } html[data-theme] body[data-editor-shell="canvas"] #viewer { position:absolute; inset:0; border:0; border-radius:0; background:var(--viewer-scene-bg); } html[data-theme] body[data-editor-shell="canvas"] #viewport { border-radius:0; } html[data-theme] body[data-editor-shell="canvas"] .viewport-toolbar-stack { top:18px; right:20px; left:auto; bottom:auto; width:auto; } html[data-theme] body[data-editor-shell="canvas"] .viewport-toolbar { border:1px solid var(--line); border-radius:12px; background:var(--surface-1); box-shadow:0 6px 20px #0002; padding:6px; } html[data-theme] body[data-editor-shell="canvas"] #viewportInfo { bottom:0; left:0; width:100%; padding:10px 20px; border-top:1px solid var(--line); background:var(--surface-1); color:var(--sub); font-size:11px; border-radius:0; pointer-events:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSelectorHud { position:static; display:flex; flex-direction:column; align-items:stretch; width:100%; min-width:0; max-width:100%; padding:0; transform:none; background:none; border:0; border-radius:0; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSelectorHud::before { display:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__bar { width:100%; min-width:0; max-width:100%; margin:0; border:0; border-radius:0; background:none; box-shadow:none; flex-wrap:wrap; padding:0 0 16px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__label { color:var(--sub); text-align:left; width:100%; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__select { flex:1; width:100%; min-width:0; font-size:14px; padding:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-settings-hud-slot { position:static; width:100%; min-width:0; max-width:100%; max-height:none; overflow:visible; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transition:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout { width:100%; min-width:0; max-width:100%; max-height:none; overflow:visible; padding:16px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout:not([hidden]) { display:flex; flex-direction:column; align-items:stretch; gap:16px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style :is(.multi-cutter-settings-grid,.toggle-stack) { grid-auto-flow:row; grid-template-columns:1fr; width:100%; flex-wrap:wrap; } html[data-theme] body[data-editor-shell="canvas"] #panel-style :is(.multi-cutter-setting,.multi-cutter-setting__label-row,.stencil-edge-setting__row) { width:100%; min-width:0; white-space:normal; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud.style-settings-collapsed .style-settings-hud-slot { max-height:0; overflow:hidden; padding:0; } /* Discard the legacy horizontal HUD geometry inside the vertical style panel. */ html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__label { grid-column:1/-1; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsToggle { width:36px; height:40px; border-radius:9px; border:1px solid var(--edge); color:var(--text-soft); background:var(--surface-3); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsToggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-wash); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsToggle:focus-visible { outline:2px solid var(--accent); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSelectorHud.style-settings-collapsed #styleSettingsHudSlot { display:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout[hidden] { display:none!important; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .style-callout__header { display:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .style-specific-field:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; width:100%; min-width:0; max-width:100%; margin:0; padding:0; border:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-settings-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-setting { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; min-width:0; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .compound-number-setting { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-width:0; overflow:visible; padding:10px; border:1px solid var(--line); background:var(--surface-1); border-radius:10px; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-setting__label-row { display:flex; align-items:center; gap:5px; min-width:0; width:auto; margin:0; padding:0; border:0; background:none; white-space:normal; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .compound-number-setting input[type="number"] { flex:0 0 76px; width:76px!important; height:36px; min-height:36px; margin:0; padding:7px 8px; border:1px solid var(--edge); border-radius:7px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .compound-number-setting:focus-within { border-color:var(--accent); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-stack { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; gap:8px; width:100%; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-control { min-height:40px; width:100%; padding:9px 10px; justify-content:flex-start; border-radius:9px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperField:not([hidden]) { display:flex; align-items:center; height:auto; min-height:44px; width:100%; gap:0; overflow:visible; border:1px solid var(--line); border-radius:10px; background:var(--surface-1); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperToggle { flex:1; min-width:0; width:auto; border:0; background:none; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperAmountField:not([hidden]) { display:flex; align-items:center; gap:5px; margin:0; padding:6px 8px; border-color:var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperMM { width:60px; height:32px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-basis-toggle { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-center-spacing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-axis-input { width:100%; min-width:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .stencil-edge-setting__row { display:flex; justify-content:space-between; width:100%; gap:10px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .stencil-edge-setting__label-wrap { display:flex; flex-wrap:wrap; gap:4px; white-space:normal; padding:0; border:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #keychainShape { width:100%; min-width:0; height:42px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel { width:100%; max-width:720px; padding:36px; border:0; border-radius:0; background:transparent; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel::before { display:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__badge { background:none; border:0; padding:0; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:2px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__title { color:var(--headline); font-size:clamp(28px,3vw,42px); line-height:1.15; letter-spacing:-1.5px; font-weight:600; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__copy { color:var(--sub); font-size:14px; max-width:480px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__actions { gap:10px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action { background:var(--surface-1); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action:hover { background:var(--surface-2); border-color:var(--edge); transform:translateY(-2px); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action--primary { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon { color:var(--accent); background:var(--accent-wash); border:0; border-radius:10px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-title { color:var(--text); } html[data-theme] body[data-editor-shell="canvas"] #placeholder :is(.viewport-empty__action-copy,.viewport-empty__ai-hint) { color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai { background:none; border:0; border-top:1px solid var(--line); padding:20px 0 0; border-radius:0; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-label { color:var(--text-soft); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__footer-chip { background:none; border:0; color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] .cart-panel { top:var(--appbar-height); } html[data-theme] body[data-editor-shell="canvas"] .purchase-confirmation-panel { top:var(--appbar-height); } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__drawer { position:relative; width:min(var(--cart-width),100%); border-left:1px solid var(--line); background:var(--surface-1); box-shadow:-12px 0 40px #0002; } html[data-theme] body[data-editor-shell="canvas"] .purchase-confirmation-panel__drawer { width:min(var(--cart-width),100%); box-shadow:-12px 0 40px #0002; } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__scrim { background:#0002; backdrop-filter:none; } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__header { padding:24px 24px 24px 52px; border-bottom:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__close { position:absolute; top:10px; left:0; z-index:2; width:34px; height:44px; padding:0; border:1px solid color-mix(in srgb,var(--accent) 70%,var(--primary)); border-left:0; border-radius:0 14px 14px 0; background:linear-gradient(180deg,var(--primary-hover),var(--primary)); color:#fff; box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 35%,transparent); } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__close:hover { border-color:color-mix(in srgb,var(--accent) 70%,var(--primary)); background:linear-gradient(180deg,var(--primary-hover),var(--primary)); color:#fff; filter:brightness(1.08); } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__close-icon { width:20px; height:20px; } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__title { font-size:22px; letter-spacing:-.5px; } html[data-theme] body[data-editor-shell="canvas"] .cart-panel__footer { background:var(--surface-2); border-color:var(--line); } @media(min-width:1100px) { html[data-theme] body[data-editor-shell="canvas"].cart-open > .row > main { margin-right:var(--cart-width); } } @media(min-width:1100px) { html[data-theme] body[data-editor-shell="canvas"].purchase-confirmation-open > .row > main { margin-right:var(--cart-width); } } @media(max-width:1200px) { html[data-theme] body[data-editor-shell="canvas"] > .appbar { gap:8px; padding:10px 14px; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud { flex:0 1 220px; gap:5px; padding-left:12px; } html[data-theme] body[data-editor-shell="canvas"] .brand__logo { width:126px; } html[data-theme] body[data-editor-shell="canvas"] #myDesignsButton span { display:none; } html[data-theme] body[data-editor-shell="canvas"] #myDesignsButton { min-width:36px; justify-content:center; padding:7px; } } @media(max-width:900px) { html[data-theme] body[data-editor-shell="canvas"] .editor-rail button { min-height:61px; gap:7px; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail .lucide { width:19px; height:19px; stroke-width:1.7; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail [data-shell-help] { display:none; } html[data-theme] body[data-editor-shell="canvas"] { --dock-width:340px; --rail-width:66px; } html[data-theme] body[data-editor-shell="canvas"] .editor-panel { position:absolute; left:var(--rail-width); top:0; bottom:0; width:min(var(--dock-width),calc(100% - var(--rail-width))); box-shadow:20px 0 45px #0004; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud { flex:1 1 auto; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud input { width:120px; } html[data-theme] body[data-editor-shell="canvas"] #creditBadge { display:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar > .spacer { display:none; } html[data-theme] body[data-editor-shell="canvas"] .cart-button__label { display:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay { width:auto; max-width:calc(100vw - var(--rail-width) - 24px); flex:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay :is(.printed-price,.printed-price__chip,.printed-price__summary) { width:auto; max-width:100%; } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay .printed-price__chip { min-height:34px; padding:6px 10px; border-radius:10px; } } @media(max-width:600px) { html[data-theme] body[data-editor-shell="canvas"] { --rail-width:60px; } html[data-theme] body[data-editor-shell="canvas"] > .appbar { min-height:104px; flex-wrap:wrap; gap:8px; padding:8px 12px; } html[data-theme] body[data-editor-shell="canvas"] .brand__logo { width:115px; height:32px; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud { border:0; padding:0; margin-left:auto; flex:0 1 calc(100% - 133px); } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud input { flex:1; width:80px; } html[data-theme] body[data-editor-shell="canvas"] #acctStrip { flex:0 0 auto; width:auto; min-width:0; } html[data-theme] body[data-editor-shell="canvas"] .acct-strip__auth { flex-direction:row; align-items:center; gap:8px; width:auto; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls { order:3; margin-left:auto; width:144px; flex:0 0 144px; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls__entry { width:144px; min-width:144px; font-size:11px; padding:8px; min-height:36px; } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay { right:12px; bottom:8px; } html[data-theme] body[data-editor-shell="canvas"] #printedControlsDesktopSlot { display:none; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls--chooser-open .printed-controls__panel { right:-52px; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls--price-open .printed-controls__panel { right:12px; width:min(380px,calc(100vw - var(--rail-width) - 24px)); } html[data-theme] body[data-editor-shell="canvas"] .editor-rail { gap:5px; padding:12px 5px 84px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail button { min-height:56px; font-size:10px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder { padding:10px 8px 40px; overflow:auto; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel { padding:18px 10px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__title { font-size:28px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__actions { grid-template-columns:1fr; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action { padding:12px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-copy { display:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-controls { flex-direction:column; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-hint { display:none; } html[data-theme] body[data-editor-shell="canvas"] .viewport-toolbar-stack { right:12px; top:12px; } html[data-theme] body[data-editor-shell="canvas"] #viewportInfo { font-size:9px; padding:8px; } } /* Landscape phones keep the portrait shell model, but compress its chrome so the canvas and every rail action remain usable after a device rotation. */ @media(max-width:900px) and (orientation:landscape) and (max-height:600px) { html[data-theme] body[data-editor-shell="canvas"] { --header-control-height:34px; --rail-width:56px; --dock-width:300px; --editor-footer-height:42px; } html[data-theme] body[data-editor-shell="canvas"] > .appbar { min-height:58px; padding:6px 10px; gap:6px; flex-wrap:nowrap; } html[data-theme] body[data-editor-shell="canvas"] .brand__logo { width:108px; height:36px; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud { flex:1 1 210px; gap:5px; padding-left:8px; } html[data-theme] body[data-editor-shell="canvas"] .design-save-hud input { width:92px; min-width:64px; padding-inline:8px; } html[data-theme] body[data-editor-shell="canvas"] :is(#myDesignsButton,#cartToggle,#acctAuthSlot > button,#acctBtn) { padding-inline:8px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail { gap:2px; padding:5px 4px; overflow-y:auto; scrollbar-width:none; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail::-webkit-scrollbar { display:none; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail button { min-height:40px; gap:2px; padding:3px 1px; font-size:9px; border-radius:9px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail .lucide { width:16px; height:16px; } html[data-theme] body[data-editor-shell="canvas"] .editor-rail__assistant-icon, html[data-theme] body[data-editor-shell="canvas"] .editor-rail__assistant-icon img { width:20px; height:20px; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel { padding:18px 16px; } html[data-theme] body[data-editor-shell="canvas"] #dock .panel > summary { font-size:23px; } html[data-theme] body[data-editor-shell="canvas"] .shell-panel-intro { margin-bottom:14px; line-height:1.45; } html[data-theme] body[data-editor-shell="canvas"] .editor-canvas-hint { padding:6px 10px; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] .viewport-toolbar-stack { top:8px; right:8px; } html[data-theme] body[data-editor-shell="canvas"] .appbar #printedPriceDisplay { right:8px; bottom:4px; } html[data-theme] body[data-editor-shell="canvas"] .appbar .printed-controls--price-open .printed-controls__panel { right:8px; bottom:calc(var(--editor-footer-height) + 6px); max-height:calc(100dvh - var(--appbar-height) - var(--editor-footer-height) - 12px); } } /* Keep drawer and canvas motion in step; allow OS motion preferences to win. */ html[data-theme] body[data-editor-shell="canvas"] :is(.cart-panel__drawer,.purchase-confirmation-panel__drawer) { transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease; } @media(prefers-reduced-motion:reduce) { html[data-theme] body[data-editor-shell="canvas"] :is(.editor-panel,.cart-panel__drawer,.purchase-confirmation-panel__drawer), html[data-theme] body[data-editor-shell="canvas"] > .row > main { transition:none; } } html[data-theme] body[data-editor-shell="canvas"] .shell-view[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); } @media(max-width:900px) { html[data-theme] body[data-editor-shell="canvas"] .shell-view { padding:7px; font-size:11px; } } /* Keep the view-options menu available for theme/tooltips on the welcome surface, but hide canvas-only controls. */ html[data-theme] body[data-editor-shell="canvas"] main:has(#placeholder:not([data-placeholder-state="hidden"])) :is(.shell-view,.editor-canvas-hint,#viewportInfo) { display:none; } html[data-theme] body[data-editor-shell="canvas"] main:has(#placeholder:not([data-placeholder-state="hidden"])) #viewportMenu > :not(.viewport-controls__theme):not(.viewport-controls__help-toggle) { display:none; } /* Canonical welcome surface. */ html[data-theme] body[data-editor-shell="canvas"] #placeholder { place-items:start center; overflow:auto; padding:36px 28px 20px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder[data-placeholder-state="empty"] { pointer-events:auto; user-select:none; -webkit-user-select:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder[data-placeholder-state="empty"] :is(input,textarea) { user-select:text; -webkit-user-select:text; } html[data-theme] body[data-editor-shell="canvas"] #placeholder[data-placeholder-state="empty"] img { pointer-events:none; -webkit-user-drag:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel { width:min(100%,1332px); max-width:1332px; padding:11px 0; border:0; border-radius:0; background:radial-gradient(ellipse 48% 42% at 50% 42%,#26314024,transparent 75%); box-shadow:none; backdrop-filter:none; overflow:visible; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel::before { display:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__badge { display:inline-flex; align-items:center; gap:10px; padding:7px 18px; border:1px solid transparent; border-radius:999px; background:linear-gradient(#101b2c,#101b2c) padding-box,linear-gradient(125deg,#8270d5,#428dcb) border-box; color:#dce8fa; font-size:11px; line-height:20px; letter-spacing:2.6px; margin-bottom:16px; box-shadow:0 0 18px #5e70ce18; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .start-badge-spark { color:#a6d5ff; font-size:22px; line-height:20px; letter-spacing:0; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__title { max-width:945px; margin-inline:auto; font-size:clamp(28px,2.8vw,40px); line-height:1.18; text-wrap:balance; letter-spacing:-1.1px; color:#f2f5fb; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .start-title-accent { color:#9580f7; background:linear-gradient(100deg,#618fff,#ad60e9); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__hero { margin-bottom:22px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__copy { display:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__actions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:42px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action { --start-accent:#f2b85f; --start-glow:#f2a84a20; position:relative; display:grid; grid-template-columns:minmax(83px,37%) minmax(0,1fr); align-items:center; gap:13px; min-height:151px; padding:14px 18px 14px 13px; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 12% 42%,var(--start-glow),transparent 45%),linear-gradient(135deg,#1d242ded,#111720f7); border:1px solid color-mix(in srgb,var(--start-accent) 56%,#37404d); border-radius:15px; box-shadow:inset 0 1px #ffffff08,0 18px 34px #02050a28; } html[data-theme] body[data-editor-shell="canvas"] #placeholder [data-empty-state-action="drawing-board"] { --start-accent:#b88af5; --start-glow:#9b6be32a; } html[data-theme] body[data-editor-shell="canvas"] #placeholder [data-empty-state-action="browse-designs"] { --start-accent:#ed82b5; --start-glow:#d9609b25; } html[data-theme] body[data-editor-shell="canvas"] #placeholder [data-empty-state-action="quick-start"] { --start-accent:#66b5ff; --start-glow:#3e9bea28; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action:hover { transform:translateY(-3px); border-color:var(--start-accent); background:radial-gradient(circle at 12% 42%,color-mix(in srgb,var(--start-accent) 24%,transparent),transparent 48%),linear-gradient(135deg,#242e3a,#151c27); box-shadow:inset 0 1px #ffffff0d,0 22px 42px #02050a52,0 0 24px var(--start-glow); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action:focus-visible { outline:2px solid var(--start-accent); outline-offset:3px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon { display:grid; place-items:center; width:100%; height:auto; aspect-ratio:1; flex:none; border:0; border-radius:0; background:none; overflow:visible; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon img { display:block; width:118%; max-width:none; height:118%; object-fit:contain; filter:drop-shadow(0 12px 14px #02040a88); transform:translateX(-3%); transition:transform .18s ease,filter .18s ease; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action:hover .viewport-empty__action-icon img { transform:translateX(-3%) translateY(-2px) scale(1.035); filter:drop-shadow(0 15px 17px #02040aaa); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-body { align-self:center; gap:6px; padding:0 7px 16px 0; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .start-action-eyebrow { color:color-mix(in srgb,var(--start-accent) 82%,#fff); font-size:10px; font-weight:700; line-height:1.2; letter-spacing:1.35px; text-transform:uppercase; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-title { font-size:19px; font-weight:700; line-height:1.15; letter-spacing:-.25px; color:#f0f3f8; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-copy { max-width:19ch; color:#aebed2; font-size:13px; line-height:1.55; } html[data-theme] body[data-editor-shell="canvas"] .start-action-arrow { position:absolute; right:15px; bottom:14px; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:#111823; background:var(--start-accent); box-shadow:0 6px 16px color-mix(in srgb,var(--start-accent) 32%,transparent); transition:transform .18s ease,box-shadow .18s ease; } html[data-theme] body[data-editor-shell="canvas"] .start-action-arrow .lucide { width:18px; height:18px; stroke-width:2.2; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action:hover .start-action-arrow { transform:translateX(2px); box-shadow:0 8px 20px color-mix(in srgb,var(--start-accent) 46%,transparent); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai { max-width:936px; margin:0 auto; padding:8px 9px 8px 27px; background:#1a2535; border:1px solid #6682b5; border-radius:28px; box-shadow:inset 0 1px #ffffff0a,0 0 0 1px #528cff18,0 10px 26px #0206114d,0 0 20px #376dff1c; transition:border-color .18s ease,box-shadow .18s ease; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai:focus-within { border-color:#8bb7ff; box-shadow:inset 0 1px #ffffff10,0 0 0 2px #4e8fff32,0 14px 36px #02061160,0 0 32px #376dff30; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-controls { gap:12px; } html[data-theme] body[data-editor-shell="canvas"] .start-ai-spark { display:grid; flex:0 0 24px; place-items:center; color:#8faeff; } html[data-theme] body[data-editor-shell="canvas"] .start-ai-spark .lucide { width:22px; height:22px; stroke-width:1.8; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input { border:0; background:transparent; height:47px; padding:0; color:#edf4ff; font-size:14.5px; font-style:italic; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input::placeholder { color:#b2bfd1; opacity:1; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input:focus { outline:none; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; min-width:162px; padding:0 18px; border-color:var(--primary-hover); border-radius:999px; background:var(--primary); color:#fff; font-size:13px; font-weight:700; box-shadow:0 7px 18px #185ee85c,0 0 16px #4fa7ff34; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit .lucide { width:16px; height:16px; stroke-width:2; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit .lucide-arrow-right { width:15px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-hint { display:none; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin:11px 0 18px; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions-label { margin-right:2px; color:#c3cfdf; font-size:11.5px; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions button { min-height:32px; padding:5px 16px; background:#111a25; border:1px solid #465a72; border-radius:999px; color:#e5ecf7; font-size:11.5px; cursor:pointer; box-shadow:inset 0 1px #ffffff08; transition:background .15s ease,border-color .15s ease,transform .15s ease; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions button:hover { background:#1d2a3a; border-color:#7595bd; transform:translateY(-1px); } html[data-theme] body[data-editor-shell="canvas"] .start-designs-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } html[data-theme] body[data-editor-shell="canvas"] .start-designs-heading h3 { margin:0; color:var(--text-soft); text-transform:uppercase; font-size:11px; letter-spacing:1.6px; } html[data-theme] body[data-editor-shell="canvas"] .start-designs-heading button { font-size:12px; border:0; } html[data-theme] body[data-editor-shell="canvas"] .start-design-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:start; gap:13px; } html[data-theme] body[data-editor-shell="canvas"] :is(.start-design,.start-design-placeholder) { min-width:0; border:0; padding:0; background:none; color:var(--text-soft); text-align:center; } html[data-theme] body[data-editor-shell="canvas"] .start-design { cursor:pointer; } html[data-theme] body[data-editor-shell="canvas"] .start-design__media { position:relative; display:block; width:100%; aspect-ratio:1; padding:12px; overflow:hidden; border-radius:12px; border:1px solid #34404f; background:radial-gradient(ellipse at 50% 35%,#303944,#19212b); transition:border-color .15s ease; } html[data-theme] body[data-editor-shell="canvas"] .start-design__media img { display:block; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .38s ease; } html[data-theme] body[data-editor-shell="canvas"] .start-design__media img.is-loaded { opacity:1; } html[data-theme] body[data-editor-shell="canvas"] .start-design:hover .start-design__media { border-color:var(--accent); } html[data-theme] body[data-editor-shell="canvas"] .start-design span { display:block; margin-top:8px; font-size:11px; line-height:1.4; } html[data-theme] body[data-editor-shell="canvas"] .start-design__skeleton-shape { position:absolute; inset:12px; border-radius:9px; background:linear-gradient(110deg,#26313e 25%,#344252 42%,#26313e 58%); background-size:220% 100%; animation:start-design-shimmer 1.8s ease-in-out infinite; } html[data-theme] body[data-editor-shell="canvas"] .start-design__skeleton-label { display:block; width:68%; height:9px; margin:10px auto 0; border-radius:999px; background:#2c3744; } @keyframes start-design-shimmer { to { background-position-x:-220%; } } @media(max-width:1320px) { html[data-theme] body[data-editor-shell="canvas"] .start-design-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__actions { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:700px) { html[data-theme] body[data-editor-shell="canvas"] #placeholder { padding:24px 12px; display:block; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:176px; padding:10px 11px 12px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon { align-self:center; width:76px; height:76px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon img { width:112%; height:112%; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-body { gap:3px; padding:0 28px 0 0; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .start-action-eyebrow { font-size:8px; letter-spacing:.8px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-title { font-size:13.5px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-copy { display:none; } html[data-theme] body[data-editor-shell="canvas"] .start-action-arrow { right:10px; bottom:10px; width:30px; height:30px; } html[data-theme] body[data-editor-shell="canvas"] .start-action-arrow .lucide { width:14px; height:14px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel { padding:0; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__badge { font-size:10px; letter-spacing:1.6px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__copy { font-size:13px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai { padding:7px 7px 7px 14px; border-radius:25px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-controls { flex-direction:row; gap:8px; } html[data-theme] body[data-editor-shell="canvas"] .start-ai-spark { flex-basis:20px; } html[data-theme] body[data-editor-shell="canvas"] .start-ai-spark .lucide { width:18px; height:18px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input { height:44px; font-size:13px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit { height:44px; min-width:88px; padding:0 12px; gap:6px; font-size:12px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit .lucide { width:14px; height:14px; } html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit :is(.lucide-sparkles,.lucide-arrow-right) { display:none; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions { gap:7px; margin-top:12px; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions-label { flex-basis:100%; text-align:center; } html[data-theme] body[data-editor-shell="canvas"] .start-suggestions button { min-height:32px; padding:5px 12px; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] .start-design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:600px) { html[data-theme] body[data-editor-shell="canvas"] #placeholder .viewport-empty__badge { margin-bottom:12px; } } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__panel { background:none; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder :is(.viewport-empty__title,.viewport-empty__action-title) { color:#202c3c; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__badge { color:#354664; background:linear-gradient(#f3f6ff,#f3f6ff) padding-box,linear-gradient(125deg,#8270d5,#428dcb) border-box; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .start-badge-spark { color:#526ec0; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .start-title-accent { background-image:linear-gradient(100deg,#355fcc,#8b35bf); } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action { background:radial-gradient(circle at 12% 42%,color-mix(in srgb,var(--start-accent) 13%,transparent),transparent 45%),linear-gradient(145deg,#fff,#edf1f6); box-shadow:inset 0 1px #fff,0 16px 30px #223e6218; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-icon { background:#253b5510; border-color:#253b5510; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__action-copy { color:#425d7c; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .start-action-eyebrow { color:color-mix(in srgb,var(--start-accent) 72%,#25334a); } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai { background:#f7faff; border-color:#8fa9cf; box-shadow:inset 0 1px #fff,0 10px 26px #234f8a1c,0 0 22px #376dff16; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input { background:#fff; color:#202c3c; border-color:#cbd5e1; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-input::placeholder { color:#657a95; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-ai-spark { color:#416dcc; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-suggestions-label { color:#465d78; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-suggestions button { background:#fff; color:#405a78; border-color:#9fb1c8; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-design__media { background:#e8edf3; border-color:#cbd5e1; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-design__skeleton-shape { background:linear-gradient(110deg,#d9e0e8 25%,#eef2f6 42%,#d9e0e8 58%); background-size:220% 100%; } html[data-theme="light"] body[data-editor-shell="canvas"] .start-design__skeleton-label { background:#d7dee7; } html[data-theme="light"] body[data-editor-shell="canvas"] #placeholder .viewport-empty__ai-submit { color:var(--accent-ink)!important; -webkit-text-fill-color:var(--accent-ink)!important; } html[data-theme] body[data-editor-shell="canvas"] .start-design__media.is-artwork { background:#fff; } html[data-theme] body[data-editor-shell="canvas"] .start-design-status { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:14px; min-height:100px; margin:0; padding:18px; border:1px solid var(--line); border-radius:12px; color:var(--sub); font-size:13px; } html[data-theme] body[data-editor-shell="canvas"] .start-design-status button { font-size:12px; } @media(prefers-reduced-motion:reduce) { html[data-theme] body[data-editor-shell="canvas"] .start-design__skeleton-shape { animation:none; } html[data-theme] body[data-editor-shell="canvas"] .start-design__media img { transition-duration:.01ms; } } /* Tool panels: named sections, raised shared cards, and quiet row dividers. */ html[data-theme] body[data-editor-shell="canvas"] .shell-section-label { margin:20px 0 10px; font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] .shell-setting-hint { display:block; margin-top:5px; font-size:12px; line-height:1.5; font-weight:400; color:var(--sub); text-decoration:none; letter-spacing:0; white-space:normal; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-panel-intro { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__bar { padding:14px; border:1px solid color-mix(in srgb,var(--edge) 88%,var(--accent) 12%); border-radius:14px; background:color-mix(in srgb,var(--surface-3) 76%,var(--surface-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--headline) 6%,transparent),0 6px 16px #00000018; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__label { font-size:14px; font-weight:600; color:var(--text); text-decoration:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout { margin-top:16px; padding:0 14px; border:1px solid color-mix(in srgb,var(--edge) 88%,var(--accent) 12%); border-radius:14px; background:color-mix(in srgb,var(--surface-3) 76%,var(--surface-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--headline) 6%,transparent),0 6px 16px #00000018; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout:not([hidden]) { gap:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .style-specific-field:not([hidden]) { gap:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-settings-grid { gap:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout :is(.compound-number-setting,.multi-cutter-setting--wide,.toggle-control) { border:0; border-radius:0; background:none; box-shadow:none; padding:16px 0; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .compound-number-setting { border-top:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .multi-cutter-setting--wide { border-top:1px solid var(--line); gap:10px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-stack { gap:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-control { display:flex; gap:12px; justify-content:space-between; text-align:left; border-top:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-control__label { order:-1; flex:1; min-width:0; font-size:13px; font-weight:600; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout .toggle-control__track { flex-shrink:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperField:not([hidden]) { display:flex; flex-wrap:wrap; padding:0; border:0; border-radius:0; background:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperToggle { flex-basis:100%; border:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #topEdgeTaperAmountField:not([hidden]) { margin:0 0 14px auto; border:0; padding:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout label[data-help] { text-decoration:none; font-weight:600; } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout #keychainSettingsField { padding:16px 0; } html[data-theme] body[data-editor-shell="canvas"] #dock :is(.shell-settings-card,#advancedLayerSizePanel,#panel-dimensions .panel-section) { padding:14px; border:1px solid color-mix(in srgb,var(--edge) 88%,var(--accent) 12%); border-radius:14px; background:color-mix(in srgb,var(--surface-3) 76%,var(--surface-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--headline) 6%,transparent),0 6px 16px #00000018; } html[data-theme] body[data-editor-shell="canvas"] #dock :is(.shell-settings-card,#advancedLayerSizePanel,#panel-dimensions .panel-section,.shell-tool-section) { color:var(--text); } html[data-theme] body[data-editor-shell="canvas"] #dock :is(.shell-settings-card,#advancedLayerSizePanel,#panel-dimensions .panel-section,.shell-tool-section) :is(label,h3,summary,.toggle-control__label,.segmented-field__label,.btn:not(.primary)) { color:var(--headline); } html[data-theme] body[data-editor-shell="canvas"] #dock :is(.shell-settings-card,#advancedLayerSizePanel,#panel-dimensions .panel-section,.shell-tool-section) :is(.shell-setting-hint,.ai-generate__hint,.segmented-field__hint) { color:var(--text-soft); } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-card { display:grid; gap:9px; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-card-header { margin-bottom:1px; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-card-header .shell-setting-hint { margin:4px 0 0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-card .toolbar { display:grid; grid-template-columns:1fr; gap:8px; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row { display:grid; grid-template-columns:28px minmax(0,1fr) 16px; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 10px; border-color:color-mix(in srgb,var(--edge) 90%,var(--accent) 10%); border-radius:11px; background:color-mix(in srgb,var(--surface-1) 66%,var(--surface-3)); text-align:left; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--headline) 5%,transparent); } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row:hover { border-color:color-mix(in srgb,var(--accent) 62%,var(--edge)); background:color-mix(in srgb,var(--accent-wash) 24%,var(--surface-3)); transform:translateY(-1px); } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row--primary { border-color:var(--primary-hover); background:var(--primary); color:#fff; box-shadow:inset 0 1px 0 #ffffff2e,0 6px 14px #00000020; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row--primary:hover { border-color:var(--primary-hover); background:var(--primary-hover); } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row .btn-icon { display:grid; place-items:center; width:28px; height:28px; margin:0; color:currentColor; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row .btn-icon .lucide { width:19px; height:19px; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row__copy { display:flex; flex-direction:column; gap:3px; min-width:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row__copy .btn-label { color:inherit; font-size:12.5px; font-weight:700; line-height:1.2; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row__copy small { color:var(--text-soft); font-size:11px; font-weight:400; line-height:1.25; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row--primary .shell-action-row__copy small { color:#ffffffc7; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-action-row__chevron { width:16px; height:16px; color:currentColor; opacity:.72; } html[data-theme] body[data-editor-shell="canvas"] #panel-file :is(.shell-create-source-card,.shell-create-ai-card) { margin-top:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-source-card { display:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-source-card:has(.style-callout__actions > .btn:not([hidden])) { display:block; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-card-title { margin:0; font-size:13px; font-weight:700; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-source-card > .shell-setting-hint { margin:5px 0 0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-source-card .style-callout__actions { margin:10px 0 0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-ai-card .ai-generate { margin:0; padding:0; border:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-ai-card .ai-generate > label { color:var(--headline); font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; text-decoration:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-file .shell-create-ai-card #aiGenerate { border-color:var(--primary-hover); background:var(--primary); color:#fff; font-weight:700; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .panel-section { margin:0 0 12px; padding:14px; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .panel-section h3 { margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .grid-3 { gap:6px; } html[data-theme] body[data-editor-shell="canvas"] #panel-dimensions .layer-control__header { flex-wrap:nowrap; min-height:36px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .shell-settings-card { padding:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .shell-settings-card > label { display:block; margin-top:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .shell-settings-card input { max-width:100%; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .connector-mode-row { gap:6px; margin-bottom:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .connector-mode-row .btn { display:flex; align-items:center; justify-content:center; gap:5px; min-height:40px; padding:7px 6px; border-radius:9px; background:color-mix(in srgb,var(--surface-1) 66%,var(--surface-3)); } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .connector-mode-row .btn:hover { border-color:color-mix(in srgb,var(--accent) 62%,var(--edge)); background:color-mix(in srgb,var(--accent-wash) 24%,var(--surface-3)); } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .connector-mode-row .btn-icon { display:grid; place-items:center; margin:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .connector-mode-row .btn-icon .lucide { width:15px; height:15px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .grid-3 button { display:flex; align-items:center; justify-content:center; gap:4px; min-height:32px; padding:6px 7px; } html[data-theme] body[data-editor-shell="canvas"] #panel-connectors .grid-3 button .lucide { width:13px; height:13px; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-selector-hud__label { display:block; } html[data-theme] body[data-editor-shell="canvas"] #panel-style .style-settings-hud-slot:has(#styleSettingsCallout:not([hidden]))::before, html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsMobileSlot:has(#styleSettingsCallout:not([hidden]))::before { content:'Tool settings'; display:block; margin:22px 0 10px; font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] #panel-style #styleSettingsCallout { margin-top:0; } @media(min-width:901px) { html[data-theme] body[data-editor-shell="canvas"] { --dock-width:360px; } } /* Size and Adjust sections share the same card language while keeping live controls mounted. */ html[data-theme] body[data-editor-shell="canvas"] #panel-adjust .shell-adjust-options { display:flex; flex-direction:column; gap:0; margin:0; padding:0; border:0; background:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust .shell-adjust-options .toggle-control { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-width:0; margin:0; padding:10px 0; border:0; border-radius:0; background:none; box-shadow:none; text-align:left; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust .shell-adjust-options .toggle-control + .toggle-control { border-top:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust .shell-adjust-options .toggle-control__label { order:-1; flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:normal; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust .shell-adjust-options .toggle-control__track { flex-shrink:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust #alignField .segmented-field__label { color:var(--text); font-size:13px; font-weight:600; text-decoration:none; margin-bottom:12px; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust #alignField .segmented-field__hint { margin:10px 0 0; color:var(--sub); font-size:11px; line-height:1.45; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section { display:block; margin:12px 0 0; padding:0 13px; border:1px solid color-mix(in srgb,var(--edge) 88%,var(--accent) 12%); border-radius:14px; background:color-mix(in srgb,var(--surface-3) 76%,var(--surface-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--headline) 6%,transparent),0 6px 16px #00000018; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section[hidden], html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section:has(> #alignField[hidden]) { display:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary { display:flex; align-items:center; gap:9px; padding:12px 0; margin:0; list-style:none; color:var(--text); font-size:13px; font-weight:700; cursor:pointer; background:none; border:0; text-transform:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary > .lucide { width:18px; height:18px; color:var(--accent); } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary::-webkit-details-marker { display:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary::before { display:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary::after { content:''; position:static; margin-left:auto; width:7px; height:7px; border:solid var(--sub); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section[open] > summary::after { transform:rotate(225deg); } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .advanced-size-card__chevron { display:none; } html[data-theme] body[data-editor-shell="canvas"] #dock .shell-tool-section :is(.shell-adjust-options,#alignField) { margin:0; padding:0 0 10px; border:0; background:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-adjust #alignField .segmented-field__label { display:none; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .advanced-size-card__body { padding:0 0 10px; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target { display:grid; grid-template-columns:minmax(0,1fr) minmax(75px,95px) auto; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target__label { display:flex; align-items:center; gap:8px; font-size:13px; } html[data-theme] body[data-editor-shell="canvas"] .shell-layer-dot { display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1px #ffffff30; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target input { width:100%; min-width:0; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .shell-overall-hint { margin:0 0 14px; } html[data-theme] body[data-editor-shell="canvas"] #panel-size :is(.size-unit-toggle__option,.segmented-field__option)[aria-checked="true"] { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target { grid-template-columns:minmax(0,1fr) minmax(60px,76px) 32px; gap:6px; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target__label { gap:6px; font-size:12px; white-space:normal; } html[data-theme] body[data-editor-shell="canvas"] #panel-size .layer-size-target__dims-toggle { width:32px; min-width:0; padding:0; border:0; background:none; } /* Drag feedback never intercepts the existing viewer drop target. */ html[data-theme] body[data-editor-shell="canvas"] .shell-drop-prompt { position:absolute; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; padding:24px; pointer-events:none; background:#080d16aa; backdrop-filter:blur(4px); } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-prompt[hidden] { display:none; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-card { width:min(560px,100%); padding:32px; border:2px dashed var(--accent); border-radius:22px; background:linear-gradient(145deg,var(--surface-3),var(--surface-1)); box-shadow:0 0 32px #4088ff18,0 24px 64px #0005; text-align:center; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-icon { display:grid; place-items:center; margin:0 auto 22px; width:84px; height:84px; border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:20px; background:var(--accent-wash); color:var(--accent); } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-icon .lucide { width:44px; height:44px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-card h2 { margin:0 0 10px; font-size:clamp(22px,2.3vw,30px); line-height:1.2; color:var(--headline); } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-card > p { margin:0; color:var(--sub); font-size:14px; line-height:1.6; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:28px 0; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-features > span { display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 8px; color:var(--text-soft); font-size:12px; line-height:1.5; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-features > span + span { border-left:1px solid var(--line); } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-features .lucide { color:var(--accent); width:25px; height:25px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-note { border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--accent-wash); font-size:12px; color:var(--text-soft); } @media(max-width:600px), (max-height:600px) { html[data-theme] body[data-editor-shell="canvas"] .shell-drop-prompt { padding:12px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-card { padding:20px 14px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-icon { width:56px; height:56px; margin-bottom:16px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-icon .lucide { width:30px; height:30px; } html[data-theme] body[data-editor-shell="canvas"] .shell-drop-features { margin:18px 0; } } /* Compact canvas style bar reuses the canonical selector and settings tree. */ html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar { position:absolute; top:16px; left:20px; right:20px; z-index:20; display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 40px); max-height:none; margin:0 auto; padding:6px 10px; overflow:visible; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:14px; background:linear-gradient(120deg,var(--surface-2),var(--surface-1)); box-shadow:0 8px 24px #0003; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar[hidden] { display:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #styleSelectorHud { position:static; inset:auto; transform:none; display:flex; flex:none; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px; width:max-content; min-width:0; max-width:none; padding:2px; overflow:visible; border:0; background:none; box-shadow:none; backdrop-filter:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #styleSelectorHud::before, html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #styleSelectorHud::after { display:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .style-selector-hud__bar { flex-shrink:0; width:auto; min-height:0; padding:0 16px 0 0; border:0; border-right:1px solid var(--line); border-radius:0; background:none; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .style-selector-hud__label { font-size:11px; color:var(--sub); } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .style-selector-hud__select { width:152px; min-width:152px; height:30px; min-height:30px; background:var(--surface-3); border-color:var(--edge); color:var(--text); box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(.shell-setting-hint,#styleSettingsToggle,.style-callout__header) { display:none!important; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #styleSettingsHudSlot, html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #styleSettingsCallout:not([hidden]), html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .style-specific-field:not([hidden]):not(#topEdgeTaperField), html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-settings-grid { display:contents; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(#styleSettingsHudSlot,#styleSettingsCallout) { max-height:none; overflow:visible; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-setting { display:flex; flex-direction:column; align-items:flex-start; gap:7px; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-setting__label-row { padding:0; border:0; background:none; white-space:nowrap; font-size:11px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar input[type="number"] { width:68px!important; min-width:0; height:30px; margin:0; background:var(--surface-3); border:1px solid var(--edge); border-radius:7px; color:var(--text); } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar input[type="range"] { display:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .toggle-control { display:flex; flex-direction:column-reverse; align-items:flex-start; justify-content:flex-start; gap:5px; height:51px; min-height:51px; padding:0; border:0; background:none; box-shadow:none; white-space:nowrap; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .toggle-control__label { font-size:11px; font-weight:600; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .toggle-stack { display:flex; flex-direction:row; gap:14px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #topEdgeTaperField:not([hidden]) { display:flex; align-items:flex-end; flex-wrap:nowrap; gap:7px; height:auto; min-height:51px; max-height:none; overflow:visible; border:0; border-radius:0; background:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #topEdgeTaperToggle { height:51px; min-height:51px; } @media(min-width:901px) { html[data-theme] body[data-editor-shell="canvas"] .editor-rail button[data-shell-panel="panel-style"] { display:none; } } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .stencil-edge-setting__row { display:flex; flex-direction:column; align-items:flex-start; gap:7px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .top-edge-taper-field__amount { position:static; margin:0; padding:0; border:0; background:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-center-spacing-grid { display:flex; gap:8px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .style-callout__select { width:130px; height:30px; min-height:30px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #topEdgeTaperField:has([aria-pressed="true"]) { background:none; } /* Keep every style in one horizontal row, including conditional controls. */ html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(.multi-cutter-setting,.toggle-stack,#topEdgeTaperField) { flex-shrink:0; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(.style-selector-hud__bar,.multi-cutter-setting:not(.stencil-edge-setting)) { display:grid; grid-template-rows:16px 30px; align-items:stretch; justify-content:flex-start; gap:5px; min-height:51px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(.style-selector-hud__label,.multi-cutter-setting__label-row,.toggle-control__label) { min-height:16px; line-height:14px; font-size:11px; font-weight:600; color:var(--headline); text-decoration:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-setting--wide > .multi-cutter-setting__label-row { width:100%; justify-content:center; text-align:center; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is([data-help],.has-help) { text-decoration:none; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #topEdgeTaperAmountField { align-self:flex-end; height:30px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar #topEdgeTaperAmountField input { height:30px; min-height:30px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .segmented-field__group { height:30px; min-height:30px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .segmented-field__option { padding:3px 10px; min-height:26px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .segmented-field__option[aria-checked="true"] { background:var(--primary); border-color:var(--primary-hover); color:#fff; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-basis-toggle { align-items:stretch; height:30px; min-height:30px; padding:2px; box-sizing:border-box; overflow:hidden; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar .multi-cutter-basis-toggle .segmented-field__option { height:100%; min-height:0; padding:0 10px; box-sizing:border-box; border-radius:6px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar :is(button,input,select):focus-visible { outline-offset:1px; } html[data-theme] body[data-editor-shell="canvas"] #shellStyleBar.below-view-controls { top:76px; }