:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:#27343d;background:#edf1f4;--accent:#157b75;--line:#d4dee4;--muted:#566875;--control:32px;--title-height:32px;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:var(--app-height,100dvh);overflow:hidden}body{display:grid;grid-template-rows:var(--title-height) minmax(0,1fr)}[hidden]{display:none!important}button,input,select,textarea{font:inherit;color:inherit}button,summary{cursor:pointer}button{border:1px solid var(--line);border-radius:4px;background:#fff;min-height:var(--control);padding:4px 7px;white-space:nowrap}button:hover{background:#edf6f3;border-color:#88b9ad}button:disabled{opacity:.38;cursor:default}button.active,button[aria-pressed=true]{background:#e1f1eb;border-color:#90bfb2;color:#105f59}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #147c73;outline-offset:-2px}.primary{background:#157b75;color:white;border-color:#157b75}.primary:hover{background:#10615c}input,select,textarea{min-width:0}input[type=number],input[type=search],input[type=text],select,textarea{width:100%;min-height:var(--control);padding:4px 6px;border:1px solid var(--line);border-radius:4px;background:white}input[type=number]{font-variant-numeric:tabular-nums}input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}input[type=color]{width:34px;height:30px;padding:3px;border:1px solid var(--line);border-radius:4px;background:white}input[aria-invalid=true]{border:2px solid #a12622;background:#fff4f2}input[data-mixed=true]{outline:2px dashed #657980;outline-offset:1px}label{font-size:13px;margin:0;min-width:0}h1,h2,p{margin:0}h1,h2{font-size:13px;font-weight:600}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.action-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app-titlebar{height:var(--title-height);display:flex;align-items:center;gap:8px;padding:0 8px;background:#fff;border-bottom:1px solid var(--line);z-index:30;min-width:0}.app-name{font-size:12px;color:var(--muted);flex:none}.document{flex:1;min-width:0}.document input{width:min(100%,360px);height:28px;border:0;background:transparent;padding:3px;font-size:14px}.file-menu{position:relative;order:3}.file-menu summary{height:30px;display:flex;align-items:center;gap:6px;padding:0 7px;list-style:none}.file-menu summary::-webkit-details-marker{display:none}.file-menu summary:after{content:'';border-right:1px solid;border-bottom:1px solid;width:6px;height:6px;transform:rotate(45deg);margin-top:-3px}.file-actions{position:absolute;top:100%;right:0;width:226px;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 18px #142a3328;padding:4px;display:grid;gap:2px}.file-menu:not([open]) .file-actions{display:none}.file-actions button{text-align:left;border:0;min-height:34px}#saveStatus{order:2;font-size:12px;white-space:nowrap;color:#42675f;max-width:112px;overflow:hidden;text-overflow:ellipsis}#saveStatus[data-state=error]{color:#a12622;font-weight:600}#saveStatus[data-state=saving]{color:var(--muted)}
.editor-shell{display:grid;position:relative;min-width:0;min-height:0;grid-template-columns:54px minmax(0,1fr) 328px;grid-template-rows:50px minmax(0,1fr) auto;grid-template-areas:'tools context context' 'tools workspace desktopdock' 'status status status'}.panel-nav,.control-dock,.shape-tools,.tablet-only,.keyboard-only{display:none}.canvas-toolbar{grid-area:tools;display:flex;flex-direction:column;gap:3px;min-height:0;min-width:0;border-right:1px solid var(--line);padding:3px 2px;background:#edf1f4;position:relative;z-index:20}.tools{display:flex;flex-direction:column;gap:2px}.tool{width:49px;height:49px;min-height:36px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:2px;border-color:transparent;background:transparent}.tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}.tool:after{content:attr(data-label);font-size:12px;line-height:1.1}.tool.active{background:#fff;border-color:#aecac2}.shape-toggle{position:relative}.chevron{position:absolute;right:1px;top:20px;font-size:11px}.shape-tray{position:absolute;top:5px;left:calc(100% + 3px);width:min(286px,calc(100vw - 60px));display:flex;gap:3px;padding:5px;background:white;border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 18px #142a332b;z-index:40}.shape-tray .tool{flex:1;min-width:0;width:auto;height:54px;font-size:12px}.shape-tray .tool:after{display:none}#symbolTool svg,#arrowTool svg{width:24px;height:24px}
.desktop-context{grid-area:context;display:flex;align-items:center;gap:8px;min-width:0;padding:2px 7px;border-bottom:1px solid var(--line);background:#f5f7f9}#desktopHistory{flex:none;border-right:1px solid var(--line);padding-right:5px}.history{display:flex;gap:2px}.history button{width:34px;height:40px;font-size:25px;padding:0;border-color:transparent;background:transparent}#desktopSelection{font-size:12px;width:112px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#desktopActions{display:flex;align-items:center;gap:5px;min-width:0;flex:1}#desktopActions>section{display:flex;align-items:center;gap:3px}#desktopActions [data-page=arrange]{order:1}#desktopActions [data-page=arrange] .pair{display:contents}#desktopActions [data-page=arrange] button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:55px;height:44px;padding:2px 4px;background:transparent;border-color:transparent;font-size:12px}#desktopActions [data-page=editing]{order:3;margin-left:auto;flex:none}#desktopActions [data-page=selection]{display:none}#desktopActions #reshapeField{order:2;gap:4px;padding:2px 5px;font-size:12px}#desktopActions #reshapeField .action-icon{display:none}.segmented{display:flex;gap:2px}.segmented button{display:flex;gap:4px;align-items:center;justify-content:center;font-size:12px;height:34px}.segmented .action-icon{width:16px;height:16px}#resetOverride{display:flex;align-items:center;justify-content:center;width:32px;min-width:32px;height:34px;padding:3px}#resetOverride span{display:none}#addSelection{display:none;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:46px;min-width:46px;height:40px;padding:2px;font-size:12px}#addSelection span{font-size:0}#addSelection span:after{content:'Add';font-size:12px}
.workspace{grid-area:workspace;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0}.stage{position:relative;min-width:0;min-height:0;background:#101922;overflow:hidden}.stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none}.outside-scope{opacity:.22}.view-controls{display:flex;align-items:center;gap:4px;min-height:38px;padding:2px 5px;background:#edf1f4;border-top:1px solid var(--line);min-width:0}.view-controls button{font-size:12px;padding:3px 5px;border-color:transparent;background:transparent}.zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto}.zoom-controls button{min-width:28px}.zoom-field{display:flex;align-items:center;gap:1px}.zoom-field input{width:56px;min-height:30px;padding:2px 3px;font-size:13px}.zoom-field span{font-size:12px}#desktopView{display:flex;align-items:center;margin-left:auto;gap:5px;min-width:0}#desktopView [data-page=rotate],.rotation-options,.snap-fields{display:flex;align-items:center;gap:4px}.rotation-fields{display:flex;align-items:center;gap:4px}.rotation-fields label{font-size:12px;white-space:nowrap}.rotation-fields input[type=number]{width:55px;min-height:30px;padding:3px;font-size:13px}#rotationDial{width:38px;height:38px;flex:none}#rotationDial text{display:none}#resetViewAngle{width:28px;min-width:28px;padding:3px}#resetViewAngle span{display:none}#desktopView [data-page=background] label,#desktopView .backgrounds{display:none}#desktopView #background{width:28px;height:28px}#showView{display:none}
.desktop-dock{grid-area:desktopdock;display:flex;flex-direction:column;min-height:0;min-width:0;border-left:1px solid var(--line);background:#f8fafb;overflow:hidden}.desktop-dock h2{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:24px;padding:3px 8px;background:#e8edf1;border-bottom:1px solid var(--line);border-top:1px solid var(--line);font-size:12px}.desktop-properties,.desktop-transform,.desktop-symmetry{flex:none;min-width:0}.desktop-transform:has([data-page=transform][hidden]){display:none}.editor-shell[data-appearance=false] .desktop-properties{display:none}#desktopEmpty{font-size:13px;line-height:1.4;color:var(--muted);padding:8px}.desktop-objects{display:flex;flex-direction:column;flex:1;min-height:80px}#desktopAppearance{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;padding:4px 8px}#desktopAppearance [data-page=stroke]{display:contents}#desktopAppearance [data-page=stroke]>.field-row{grid-column:1;grid-row:1}#desktopAppearance [data-page=fill]{grid-column:2;grid-row:1}#desktopAppearance .swatches{grid-column:1/-1;grid-row:2}#desktopAppearance [data-page=stroke]>.pair{grid-column:1/-1;grid-row:3}#desktopAppearance [data-page=text]{grid-column:1/-1;grid-row:2;display:flex;gap:6px;align-items:center}#desktopAppearance [data-page=text]>label:not(.sr-only){width:64px;flex:none}#desktopAppearance textarea{height:48px;resize:none;font:16px/1.2 Arial,sans-serif}#desktopAppearance .symbol-field{display:flex;align-items:center;gap:4px}#desktopAppearance .symbol-field input{width:68px;margin-left:auto}#desktopAppearance .symbol-field>.action-icon{display:none}.editor-shell[data-text-selection=true] .swatches{display:none}.field-row{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:30px}.field-row>label{display:flex;align-items:center;gap:3px}.field-row>label>.action-icon{display:none}.check{display:flex;align-items:center;gap:4px;min-height:30px}.pair{display:flex;gap:6px;min-width:0}.pair>*{flex:1;min-width:0}.pair label>input,.pair label>select{display:block;margin-top:2px}.swatches,.backgrounds{display:flex;gap:2px;align-items:center;height:28px}.swatches button,.backgrounds button{position:relative;flex:1;min-width:0;height:28px;min-height:28px;max-width:40px;border:0;background:transparent;padding:0}.swatches button:before,.backgrounds button:before{content:'';display:block;width:19px;height:19px;margin:auto;border-radius:50%;background:var(--swatch);border:1px solid #81929c}.swatches button.active:before{outline:2px solid #147d73;outline-offset:2px}#desktopTransform{padding:4px 8px}#desktopTransform [data-page=transform]{display:flex;flex-direction:column;gap:4px}.precision-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.precision-fields label{display:flex;align-items:center;gap:3px;font-size:12px}.precision-fields input{padding:3px;width:100%}#desktopTransform .symbol-field{display:flex;align-items:center;gap:3px;font-size:12px}#desktopTransform .symbol-field .action-icon{display:none}#desktopTransform .symbol-field input{width:64px;margin-left:auto}#pointFields{display:flex;align-items:center;gap:4px}.point-nav{display:flex;align-items:center;gap:4px}.point-nav button{min-width:28px;font-size:18px}#pointIndex{font-size:12px;white-space:nowrap}#pointFields .pair{flex:1}#pointFields label{font-size:12px}#pointFields input{height:28px;min-height:28px}#nameField{display:flex;align-items:center;gap:6px;font-size:12px;padding-bottom:4px}#objectName{width:100%;min-width:0;height:30px;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:white}
#desktopSymmetry{display:flex;flex-direction:column;gap:4px;padding:4px 8px}#desktopCopiesTitle{gap:5px;min-height:34px}.copy-scope{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px}#structureScope{font-size:12px;color:#526a62}#repeatScope{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#copyLevel{max-width:140px;min-height:28px;font-size:12px}#desktopSymmetry [data-page=repeats]{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:4px;order:0}#desktopSymmetry [data-page=repeats]>.field-row{display:flex;flex-direction:column;gap:1px}#repeats{padding:3px;min-height:28px}#desktopSymmetry [data-page=repeats]>.field-row label{font-size:12px}.visual-choices{display:flex;gap:3px}.visual-choices button{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:2px;font-size:12px;min-height:42px}.visual-choices button[aria-pressed=true]{box-shadow:inset 0 -2px var(--accent)}.visual-choices .action-icon{width:21px;height:21px}.quick-values{display:none}#desktopSymmetry [data-page=pattern]{display:flex;align-items:center;justify-content:space-between;gap:8px;order:1}#desktopSymmetry [data-page=pattern]>label{display:flex;align-items:center;font-size:12px}#desktopSymmetry [data-page=pattern]>label .action-icon{display:none}#rotation{width:82px;min-height:28px;padding:3px}#rotationValue{display:none}#desktopSymmetry [data-page=linear]{display:flex;align-items:center;gap:4px;order:2}.linear-spacing{flex:1;display:flex;gap:4px;align-items:center;font-size:12px}.linear-spacing input{width:65px;min-width:0}.linear-direction{display:flex;gap:2px}.linear-direction button{width:30px;min-width:30px;padding:3px}#alternateCopies{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px;font-size:12px}#alternateCopies .action-icon{height:17px}#desktopSymmetry [data-page=rows]{display:flex;flex-direction:column;gap:4px;order:3}#rowFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}#rowFields label{font-size:12px}#rowFields input{margin-top:2px;padding:3px}#makeRow,#nextRow{font-size:12px;min-height:30px}#makeRow{display:flex;gap:4px;align-items:center;justify-content:center;flex:none;padding:3px 5px}#nextRow{align-self:flex-end}#desktopSymmetry [data-page=guides]{display:flex;align-items:center;gap:5px;order:4}#desktopSymmetry [data-page=guides]>.check{font-size:12px}#desktopSymmetry [data-page=guides]>.check .action-icon{display:none}#guideFields{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;flex:1}.guide-choices{flex:1;min-width:148px}.guide-choices button{min-width:32px;height:34px;min-height:34px;font-size:12px}.guide-choices button span{display:none}.guide-choices .action-icon{height:20px;width:20px}#gridSpacingField,#cornerField{display:flex;align-items:center;gap:4px;font-size:12px;min-width:0}#gridSpacingField>.action-icon{display:none}#gridSpacingField input,#cornerField input{width:56px;min-height:28px;padding:3px}#cornerField{flex:none}#desktopSymmetry [data-page=presets]{display:none}
#desktopObjects{display:flex;flex-direction:column;flex:1;min-height:0;padding:4px 7px}#desktopObjects .objects-page{display:flex;flex-direction:column;flex:1;gap:3px;min-height:0}.mark-list{display:flex;flex-direction:column;gap:2px;min-height:0;flex:1;overflow:hidden}.mark-row{display:flex;align-items:center;gap:6px;width:100%;height:30px;min-height:30px;flex:none;padding:3px 5px;text-align:left;border-color:transparent;font-size:13px}.object-thumbnail{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.object-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mark-row small{margin-left:auto;font-size:12px;color:var(--muted);flex:none}.empty-list{font-size:13px;color:var(--muted);padding:7px}.list-pager{display:flex;align-items:center;justify-content:space-between;min-height:28px;font-size:12px;gap:5px;flex:none}.list-pager button{min-height:28px;height:28px;min-width:36px;padding:0 5px;font-size:20px}#objectSearch{min-height:30px;height:30px;font-size:13px;flex:none}.group-navigation{display:flex;align-items:center;gap:3px;min-width:0}.group-navigation button{display:flex;align-items:center;gap:3px;min-height:28px;padding:2px 4px;font-size:12px}.group-navigation .action-icon{width:15px;height:15px}#groupLocation{display:none}#breadcrumbs{display:flex;align-items:center;min-width:0;padding:2px 5px;gap:3px;border-bottom:1px solid var(--line);min-height:28px;flex:none}#breadcrumbs button{min-height:24px;height:24px;max-width:120px;overflow:hidden;text-overflow:ellipsis;font-size:12px;border:0;padding:2px 4px;background:transparent}#breadcrumbs button+button:before{content:'›';margin-right:5px}#breadcrumbs [aria-current]{font-weight:600;color:#105f59}#restoreHidden{min-height:30px;font-size:12px}.stack-actions{display:none}.editor-status{grid-area:status;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;min-width:0;padding:3px 7px;border-top:1px solid var(--line);background:#f8fafb;color:var(--muted);font-size:12px;line-height:1.25}.editor-status>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#toast{display:none}#toast.visible{display:block;white-space:normal;color:#27343d}.editor-status:has(#toast.visible)>span:not(#toast){display:none}.shape-handle{cursor:crosshair;outline:none}.shape-handle.move{cursor:move}.shape-handle.rotate{cursor:grab}.shape-handle:focus-visible>circle:first-of-type{fill:#50d7cc40;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}.shape-handle:hover>circle:first-of-type{fill:#50d7cc20}#inspectorTabs{display:none}
/* Compact inspectors keep one labelled level of controls and a stable tool rail. */
.editor-shell[data-tablet=true]{--control:34px;grid-template-columns:48px minmax(0,1fr) 296px;grid-template-rows:48px minmax(0,1fr) auto}.editor-shell[data-tablet=true] .tool{width:43px;height:44px;min-height:40px}.editor-shell[data-tablet=true] #desktopSelection{display:none}.editor-shell[data-tablet=true] #desktopActions [data-page=arrange] button{min-width:36px;width:36px}.editor-shell[data-tablet=true] #desktopActions [data-page=arrange] button span{display:none}.editor-shell[data-tablet=true] #addSelection{display:flex}.editor-shell[data-tablet=true] #desktopActions [data-page=arrange] #backward,.editor-shell[data-tablet=true] #desktopActions [data-page=arrange] #forward{display:none}.editor-shell[data-tablet=true] #desktopActions #reshapeField{font-size:0;padding:2px}.editor-shell[data-tablet=true] #desktopActions #reshapeField .action-icon{display:block}.editor-shell[data-tablet=true] .segmented button{font-size:12px;gap:2px;padding:3px}.editor-shell[data-tablet=true] .segmented .action-icon{display:none}.editor-shell[data-tablet=true] .desktop-dock{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px auto minmax(0,1fr);position:relative}.editor-shell[data-tablet=true] #inspectorTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-row:1;grid-column:1;gap:0;border-bottom:1px solid var(--line)}#inspectorTabs button{font-size:13px;min-width:0;padding:3px 1px;border-radius:0;border:0;border-bottom:2px solid transparent;background:transparent}#inspectorTabs button[aria-pressed=true]{border-bottom-color:var(--accent);background:#fff;color:#105f59}.editor-shell[data-tablet=true] .desktop-properties,.editor-shell[data-tablet=true] .desktop-transform,.editor-shell[data-tablet=true] .desktop-symmetry,.editor-shell[data-tablet=true] .desktop-objects,.editor-shell[data-tablet=true] #tabletView{display:none;grid-row:3;grid-column:1;min-height:0}.editor-shell[data-tablet=true][data-inspector=appearance] .desktop-properties,.editor-shell[data-tablet=true][data-inspector=transform] .desktop-transform,.editor-shell[data-tablet=true][data-inspector=copies] .desktop-symmetry{display:block}.editor-shell[data-tablet=true][data-inspector=objects] .desktop-objects{display:flex}.editor-shell[data-tablet=true][data-inspector=view] #tabletView{display:flex;flex-direction:column;gap:7px;padding:8px}.editor-shell[data-tablet=true] .desktop-dock h2{min-height:24px}.editor-shell[data-tablet=true] #tabletGroupNav{display:block;grid-row:2;grid-column:1;justify-self:end;min-height:0;padding:0 4px;z-index:1}.editor-shell[data-tablet=true] #tabletGroupNav:has(button:not([hidden])){padding:2px 4px;min-height:32px}.editor-shell[data-tablet=true] #breadcrumbs{grid-row:2;grid-column:1;padding-right:145px;border-bottom:0;min-width:0}.editor-shell[data-tablet=true] #breadcrumbs button{min-width:35px}.editor-shell[data-tablet=true] #breadcrumbs button:not(:first-child):not(:last-child){display:none}.editor-shell[data-tablet=true] #desktopView{display:none}.editor-shell[data-tablet=true] #showView{display:block}#tabletView section{display:flex;gap:5px;align-items:center;min-width:0}#tabletView [data-page=guides]{display:flex;align-items:flex-start;gap:5px}#tabletView [data-page=guides]>.check .action-icon{display:none}#tabletView #rotationDial{width:44px;height:44px}#tabletView .rotation-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px}#tabletView .rotation-fields>input{width:100%}#tabletView .snap-fields{grid-column:1/-1}#tabletView .snap-fields input{width:58px}#tabletView [data-page=background]{justify-content:space-between}#tabletView [data-page=background] .field-row label .action-icon{display:block}#tabletView .backgrounds{flex:1}#tabletPresets{display:block!important;grid-column:1/-1;border-top:1px solid var(--line)}#tabletPresets [data-page=presets]{display:block!important}#tabletPresets .preset-list{display:flex;flex-wrap:wrap}#tabletPresets button{flex:1;font-size:12px;padding:4px}#tabletPresets .desktop-only{display:none}.editor-shell[data-tablet=true] .stack-actions{display:flex;gap:3px}.stack-actions button{font-size:12px;min-height:28px;padding:2px 4px}.editor-shell[data-canvas-only=true]{grid-template-columns:48px minmax(0,1fr);grid-template-areas:'tools context' 'tools workspace' 'status status'}.editor-shell[data-canvas-only=true] .desktop-dock{display:none}.editor-shell[data-point-edit=true][data-tablet=true] .precision-fields,.editor-shell[data-point-edit=true][data-tablet=true] #desktopTransform [data-page=transform]>.pair{display:none}.editor-shell[data-tablet=true] #pointFields{flex-direction:column}.editor-shell[data-tablet=true] #pointFields .pair{width:100%}
/* Phones retain drawing space while showing one compact contextual inspector. */
.editor-shell[data-phone=true]{grid-template-columns:44px minmax(0,1fr);grid-template-rows:80px minmax(50px,1fr) 190px auto;grid-template-areas:'tools context' 'tools workspace' 'tools desktopdock' 'status status'}.editor-shell[data-phone=true] .canvas-toolbar{padding:2px 1px}.editor-shell[data-phone=true] .tool{width:41px;height:44px}.editor-shell[data-phone=true] .desktop-context{position:relative;align-items:flex-start;padding:2px;gap:2px}.editor-shell[data-phone=true] #desktopHistory{padding-right:2px}.editor-shell[data-phone=true] .history button{width:30px;height:38px}.editor-shell[data-phone=true] #desktopActions{gap:2px}.editor-shell[data-phone=true] #desktopActions [data-page=arrange]{gap:1px;justify-content:flex-end;flex:1}.editor-shell[data-phone=true] #desktopActions [data-page=arrange] button{width:37px;min-width:37px;height:38px}.editor-shell[data-phone=true] #desktopActions [data-page=editing]{position:absolute;right:3px;bottom:2px;gap:3px}.editor-shell[data-phone=true] #desktopActions #reshapeField{position:absolute;left:4px;bottom:3px;height:32px}.editor-shell[data-phone=true] #addSelection{width:38px;min-width:38px;height:34px}.editor-shell[data-phone=true] #addSelection span{display:none}.editor-shell[data-phone=true] #resetOverride{width:30px;min-width:30px}.editor-shell[data-phone=true] .desktop-dock{border-top:1px solid var(--line);border-left:0;grid-template-rows:32px auto minmax(0,1fr)}.editor-shell[data-phone=true] #inspectorTabs button{font-size:12px;min-height:32px}.editor-shell[data-phone=true] .desktop-properties>h2,.editor-shell[data-phone=true] .desktop-transform>h2{display:none}.editor-shell[data-phone=true] .desktop-dock input[type=number],.editor-shell[data-phone=true] .desktop-dock input[type=search],.editor-shell[data-phone=true] #objectName{font-size:16px;min-height:32px}.editor-shell[data-phone=true] #desktopAppearance{padding:5px 6px;gap:3px 5px}.editor-shell[data-phone=true] #desktopAppearance .symbol-field input{width:57px}.editor-shell[data-phone=true] #desktopTransform{padding:5px 6px}.editor-shell[data-phone=true] .precision-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.editor-shell[data-phone=true] .precision-fields label{display:flex;gap:3px}.editor-shell[data-phone=true] .precision-fields input{margin-left:auto;min-width:0}.editor-shell[data-phone=true] #desktopTransform .symbol-field{flex-direction:row}.editor-shell[data-phone=true] #desktopTransform .symbol-field input{width:56px}.editor-shell[data-phone=true] #desktopSymmetry{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:3px 4px;padding:3px 6px}.editor-shell[data-phone=true] #desktopSymmetry [data-page=repeats]{grid-template-columns:minmax(0,1fr) 48px;gap:3px}.editor-shell[data-phone=true] #desktopSymmetry .repeat-choices button span{display:none}.editor-shell[data-phone=true] #desktopSymmetry .repeat-choices button{min-height:43px}.editor-shell[data-phone=true] #desktopSymmetry [data-page=pattern]{display:flex;flex-direction:column;align-items:stretch;gap:1px}.editor-shell[data-phone=true] #desktopSymmetry [data-page=pattern]>label{font-size:12px;white-space:nowrap}.editor-shell[data-phone=true] #desktopSymmetry #rotation{width:100%;height:29px;min-height:29px}.editor-shell[data-phone=true] #desktopSymmetry [data-page=linear],.editor-shell[data-phone=true] #desktopSymmetry [data-page=rows]{grid-column:1/-1}.editor-shell[data-phone=true] #desktopCopiesTitle{min-height:30px;padding:2px 6px}.editor-shell[data-phone=true] #repeatScope{font-size:12px}.editor-shell[data-phone=true] #structureScope{display:none}.editor-shell[data-phone=true] #makeRow{min-height:28px;height:28px;font-size:12px}.editor-shell[data-phone=true] #makeRow .action-icon{display:none}.editor-shell[data-phone=true] #desktopObjectsTitle{display:none}.editor-shell[data-phone=true] #desktopObjects{padding:3px 6px}.editor-shell[data-phone=true] .mark-row{height:30px;min-height:30px}.editor-shell[data-phone=true] #nameField{padding-bottom:2px}.editor-shell[data-phone=true] #objectSearch{height:30px;min-height:30px}.editor-shell[data-phone=true] .view-controls{min-height:36px;gap:2px;padding:2px 3px}.editor-shell[data-phone=true] .view-controls button{min-height:30px;padding:2px 4px}.editor-shell[data-phone=true] #spin{display:none}.editor-shell[data-phone=true] #recenterView{font-size:12px}.editor-shell[data-phone=true] .zoom-field input{width:48px;font-size:16px}.editor-shell[data-phone=true] .zoom-controls button{min-width:24px}.editor-shell[data-phone=true] .repeat-status{display:none}.editor-shell[data-phone=true][data-canvas-only=true]{grid-template-rows:80px minmax(0,1fr) auto;grid-template-columns:44px minmax(0,1fr);grid-template-areas:'tools context' 'tools workspace' 'status status'}
@media(max-width:430px){.app-titlebar{gap:4px;padding:0 5px}.app-name{font-size:12px}#saveStatus{max-width:80px;font-size:12px}.document input{font-size:16px}.file-menu summary{padding:0 4px}.editor-shell[data-phone=true] #desktopActions [data-page=arrange] button{width:35px;min-width:35px}}
@media(pointer:coarse){#addSelection{display:flex}button{touch-action:manipulation}.file-actions button{min-height:40px}}
.editor-shell[data-short=true]:not([data-phone=true]){grid-template-columns:88px minmax(0,1fr) 280px;grid-template-rows:44px minmax(0,1fr) auto}.editor-shell[data-short=true]:not([data-phone=true]) .tools{display:grid;grid-template-columns:40px 40px;gap:2px}.editor-shell[data-short=true] .tool{width:40px;height:38px;min-height:34px}.editor-shell[data-short=true]:not([data-phone=true]) .tool:after,.editor-shell[data-short=true]:not([data-phone=true]) .tool>span{display:none}.editor-shell[data-short=true]:not([data-phone=true]) #desktopActions [data-page=arrange] button{width:30px;min-width:30px}.editor-shell[data-short=true]:not([data-phone=true]) #desktopActions{gap:2px}.editor-shell[data-short=true]:not([data-phone=true]) .history button{width:28px}.editor-shell[data-short=true]:not([data-phone=true]) #desktopHistory{padding-right:2px}.editor-shell[data-short=true]:not([data-phone=true]) .desktop-context{gap:3px;padding:2px 3px}.editor-shell[data-short=true]:not([data-phone=true]) #addSelection{width:30px;min-width:30px}.editor-shell[data-short=true]:not([data-phone=true]) #addSelection span{display:none}.editor-shell[data-short=true][data-canvas-only=true]:not([data-phone=true]){grid-template-columns:88px minmax(0,1fr)}
@media(max-width:700px) and (max-height:500px){.editor-shell[data-short=true]:not([data-phone=true]){grid-template-columns:82px minmax(0,1fr) 246px}.editor-shell[data-short=true]:not([data-phone=true]) #desktopActions [data-page=editing]{gap:2px}.editor-shell[data-short=true]:not([data-phone=true]) .segmented button{font-size:12px;padding:2px}.editor-shell[data-short=true]:not([data-phone=true]) #resetOverride{width:27px;min-width:27px}.editor-shell[data-short=true]:not([data-phone=true]) #desktopAppearance .symbol-field input{width:54px}.editor-shell[data-short=true]:not([data-phone=true]) .view-controls #spin,.editor-shell[data-short=true]:not([data-phone=true]) .view-controls #recenterView{display:none}.editor-shell[data-short=true]:not([data-phone=true]) .zoom-field input{width:45px}}
/* Only an actual visual-viewport reduction activates keyboard editing. */
.editor-shell[data-keyboard=true]{grid-template-columns:0 minmax(0,1fr) 296px;grid-template-rows:36px minmax(40px,1fr) auto}.editor-shell[data-keyboard=true] .canvas-toolbar{display:none}.editor-shell[data-keyboard=true] .keyboard-only{display:block;margin-left:auto;order:5}.editor-shell[data-keyboard=true] .desktop-context{align-items:center}.editor-shell[data-keyboard=true] #desktopActions,.editor-shell[data-keyboard=true] #desktopSelection{display:none}.editor-shell[data-keyboard=true] .view-controls{display:none}.editor-shell[data-keyboard=true] .workspace{grid-template-rows:minmax(0,1fr)}.editor-shell[data-keyboard=true] #tabletGroupNav,.editor-shell[data-keyboard=true] #breadcrumbs,.editor-shell[data-keyboard=true] #inspectorTabs{display:none}.editor-shell[data-keyboard=true] .desktop-dock{grid-template-rows:0 0 minmax(0,1fr)}.editor-shell[data-keyboard=true] .desktop-dock h2{display:none}.editor-shell[data-keyboard=true][data-phone=true]{grid-template-columns:minmax(0,1fr);grid-template-rows:34px minmax(40px,1fr) 126px auto;grid-template-areas:'context' 'workspace' 'desktopdock' 'status'}.editor-shell[data-keyboard=true][data-phone=true] .desktop-dock{grid-template-rows:0 0 minmax(0,1fr)}.editor-shell[data-keyboard=true] .swatches{display:none}.editor-shell[data-keyboard=true][data-text-selection=true] #desktopAppearance [data-page=stroke]>.pair{display:none}.editor-shell[data-keyboard=true] #tabletView #rotationDial{display:none}.editor-shell[data-keyboard=true] #tabletView section:not(:focus-within){display:none}
/* Dialogs use capacity-based pages; controls remain outside artwork. */
dialog{width:430px;max-width:calc(100vw - 16px);max-height:calc(var(--app-height,100dvh) - 16px);padding:12px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#27343d;box-shadow:0 12px 50px #0003;overflow:hidden}dialog::backdrop{background:#0b16258c}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:6px}.dialog-heading h2{font-size:16px}.dialog-heading .close{border:0;background:transparent;font-size:24px;width:32px;min-height:32px;padding:0}.dialog-note{font-size:12px;line-height:1.35;color:var(--muted);margin-top:6px}dialog form{display:flex;flex-direction:column;gap:8px}.wide{width:100%}.help-topic p{font-size:14px;line-height:1.4;margin:7px 0}.help-topic dl{font-size:13px;line-height:1.3;margin:5px 0}.help-topic dt{font-weight:600}.help-topic dd{margin:0 0 4px;color:var(--muted)}#projectsDialog{width:440px}#projectSearch{margin-bottom:6px}#projectList{display:grid;gap:3px;min-height:35px}.project-row{display:flex;flex-direction:column;text-align:left;gap:3px;height:49px;min-width:0;padding:5px 8px}.project-row strong,.project-row span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-row strong{font-size:14px;font-weight:500}.project-row span{font-size:12px;color:var(--muted)}#symbolDialog{width:388px;padding:10px}#symbolDialog .dialog-heading{height:32px}#symbolSearch{height:36px;min-height:36px;font-size:16px}.symbol-categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;margin:5px 0}.symbol-categories button{min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px 0;font-size:12px;border-color:transparent}.symbol-categories svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.symbol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;min-height:50px}.symbol-cell{display:grid;grid-template-rows:74px 32px;min-width:0;border:1px solid var(--line);border-radius:4px}.symbol-pick{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;width:100%;height:74px;min-width:0;padding:4px 2px;border:0}.symbol-pick>svg{width:40px;height:40px;flex:none}.symbol-pick>span{font-size:12px;line-height:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.symbol-favorite{height:32px;min-height:32px;width:100%;font-size:17px;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:#f6f8fa}#symbolDescription{height:36px;font-size:12px;line-height:15px;padding:3px 0;color:var(--muted);overflow:hidden}.palette-empty{grid-column:1/-1;font-size:13px;padding:8px}#symbolDialog .list-pager,#symbolDialog .list-pager button{height:32px;min-height:32px}#symbolDialog[data-compact=true]{padding:6px}#symbolDialog[data-compact=true] .symbol-cell{grid-template-rows:48px 32px}#symbolDialog[data-compact=true] .symbol-pick{height:48px;gap:0;padding:1px}#symbolDialog[data-compact=true] .symbol-pick>svg{height:28px;width:28px}#symbolDialog[data-compact=true] .symbol-categories button{min-height:38px}#symbolDialog[data-compact=true] .symbol-categories svg{height:16px;width:16px}#symbolDialog[data-small=true] .symbol-categories,#symbolDialog[data-small=true] #symbolDescription{display:none}#symbolDialog[data-small=true] .dialog-heading{height:26px;margin-bottom:3px}#symbolDialog[data-small=true] #symbolSearch{height:30px;min-height:30px}#symbolDialog[data-small=true] .symbol-grid{margin-top:3px}#symbolDialog[data-small=true] .list-pager{min-height:28px;height:28px}
@media(min-width:1500px){.editor-shell:not([data-tablet=true]){grid-template-columns:56px minmax(0,1fr) 360px}#desktopActions [data-page=arrange] button{min-width:66px}.desktop-dock h2{font-size:13px}#desktopSelection{width:144px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#rowFields>label:not(:last-child){display:none}#rowFields{display:flex;align-items:center}#rowFields>label{display:flex;align-items:center;gap:5px}#rowGap{width:70px}.copy-scope{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 5px}.editor-shell[data-phone=true] #structureScope{display:inline;font-size:12px}.editor-shell[data-phone=true] #desktopCopiesTitle{min-height:32px}#tabletView .view-commands{display:flex;gap:4px;order:5}.view-commands button{font-size:12px;flex:1}.editor-shell[data-phone=true] #tabletView{padding:5px 6px;gap:4px}#tabletView .guide-choices button{height:39px}#tabletView #guideFields{flex-wrap:wrap}.editor-shell[data-phone=true] #tabletView #rotationDial{display:none}.editor-shell[data-phone=true] #tabletView .backgrounds{display:none}.editor-shell[data-phone=true] #tabletView .view-commands{position:absolute;right:6px;bottom:5px}.editor-shell[data-phone=true] #tabletView .view-commands button{min-height:30px}.desktop-objects{min-height:126px}#desktopObjects>.stack-actions{flex:none}.editor-shell[data-tablet=true] #desktopObjectsTitle{display:none}.editor-shell[data-tablet=true] .desktop-objects{min-height:0}.editor-shell[data-tablet=true] #desktopObjects{gap:2px}.editor-shell[data-phone=true] .stack-actions button{min-height:27px;height:27px}.editor-shell[data-tablet=true] #nameField{padding:0}

.mixed-label{font-size:11px;color:#586c74}.export-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}.export-fields label{display:flex;flex-direction:column;gap:3px}.export-fields output{font-size:13px;align-self:end;min-height:30px}#exportPreview{height:180px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#e6eaed 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid var(--line)}#exportPreview svg{display:block;max-width:100%;max-height:100%;width:100%;height:100%}#exportDialog{width:460px}.editor-shell[data-phone=true]{--inspector-height:190px;grid-template-rows:80px minmax(50px,1fr) var(--inspector-height) auto}.editor-shell[data-phone=true][data-inspector=objects]{--inspector-height:252px}.editor-shell[data-phone=true][data-inspector=copies][data-row-selection=true]{--inspector-height:240px}.editor-shell[data-phone=true][data-inspector=view]{--inspector-height:205px}.editor-shell[data-phone=true]:has(#breadcrumbs:not([hidden])){--inspector-height:230px}.editor-shell[data-phone=true][data-inspector=objects]:has(#nameField:not([hidden])){--inspector-height:282px}.editor-shell[data-phone=true][data-canvas-only=true]{grid-template-rows:80px minmax(0,1fr) auto}.editor-shell[data-phone=true][data-keyboard=true]{grid-template-rows:34px minmax(40px,1fr) 126px auto}.editor-shell[data-phone=true] #tabletView [data-page=rotate]{justify-content:space-between}.editor-shell[data-phone=true] #tabletView .rotation-fields{display:flex;gap:4px}.editor-shell[data-phone=true] #tabletView .rotation-fields>input{width:48px}.editor-shell[data-phone=true] #tabletView .snap-fields{display:flex;gap:3px}.editor-shell[data-phone=true] #tabletView .snap-fields input[type=number]{width:44px}.editor-shell[data-phone=true] #tabletView #guideFields{row-gap:3px}.editor-shell[data-phone=true] #tabletView .view-commands{bottom:7px}.editor-status{padding-bottom:max(3px,env(safe-area-inset-bottom))}
@media(max-height:640px){.editor-shell[data-phone=true] .tool{height:37px;min-height:34px}.editor-shell[data-phone=true] .tool:after{font-size:11px}#exportPreview{height:110px}.file-actions{display:grid;grid-template-columns:1fr 1fr;width:min(390px,calc(100vw - 16px))}.file-actions button{font-size:13px;min-height:36px}#helpDialog .help-topic p{font-size:13px;line-height:1.3}}
@media(max-height:420px){#exportDialog{width:650px}#exportDialog form{display:grid;grid-template-columns:130px minmax(0,1fr);gap:5px 10px}#exportDialog .dialog-heading{grid-column:1/-1;margin:0}#exportPreview{grid-row:2/4;height:150px}#exportDialog .export-fields{grid-template-columns:repeat(3,minmax(0,1fr))}#exportDialog label{font-size:12px}#exportDialog .export-fields select{font-size:13px;min-height:28px;padding:2px}#exportDialog #downloadArtwork{grid-column:2}dialog{padding:8px}#helpDialog{width:610px}#helpDialog .help-topic{display:grid;grid-template-columns:1fr 1fr;gap:10px}#helpDialog .help-topic p{font-size:13px;line-height:1.3}#helpDialog select{min-height:28px}}

#spreadField{display:flex;align-items:center;gap:6px;font-size:12px}#symbolSpread{width:70px;margin-left:auto}.editor-shell[data-phone=true]:has(#spreadField:not([hidden]))[data-inspector=transform]{--inspector-height:220px}

/* Keep flat-grid spacing and snapping together in the guide controls. */
#selectionStatus{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#gridSnap{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:4px;min-height:32px;padding:3px 6px;font-size:12px;white-space:nowrap}#gridSnap .action-icon{width:16px;height:16px}#toast{min-width:0;flex:1}

.guide-options{display:flex;flex:1 0 100%;min-width:0;align-items:center;justify-content:space-between;gap:4px}.guide-options #gridSpacingField{flex:none}.guide-options #gridSnap{min-width:82px}

/* Tablet: one contextual inspector; phones and very short windows keep their compact layout. */
.editor-shell[data-direct-inspector=true] .desktop-dock{grid-template-rows:auto auto auto auto minmax(160px,1fr)}
.editor-shell[data-direct-inspector=true] #inspectorTabs{display:none}
.editor-shell[data-direct-inspector=true] #breadcrumbs,.editor-shell[data-direct-inspector=true] #tabletGroupNav{grid-row:1}
.editor-shell[data-direct-inspector=true] .desktop-properties{display:block;grid-row:2}
.editor-shell[data-direct-inspector=true][data-appearance=false] .desktop-properties{display:none}
.editor-shell[data-direct-inspector=true] .desktop-transform{display:block;grid-row:3}
.editor-shell[data-direct-inspector=true] .desktop-transform:has([data-page=transform][hidden]){display:none}
.editor-shell[data-direct-inspector=true] .desktop-properties>h2,.editor-shell[data-direct-inspector=true] .desktop-transform>h2{display:none}
.editor-shell[data-direct-inspector=true] .desktop-transform{border-top:1px solid var(--line)}
.editor-shell[data-direct-inspector=true] .desktop-symmetry{display:block;grid-row:4}
.editor-shell[data-direct-inspector=true] .desktop-objects{display:flex;grid-row:5}
.editor-shell[data-direct-inspector=true] #desktopObjectsTitle{display:flex}
.editor-shell[data-direct-inspector=true] #desktopSymmetry{display:flex;flex-direction:column;gap:4px}
.editor-shell[data-direct-inspector=true] #desktopSymmetry [data-page=repeats]{grid-template-columns:minmax(0,1fr) 56px}
.editor-shell[data-direct-inspector=true] #desktopSymmetry [data-page=pattern]{flex-direction:row;align-items:center;gap:4px}
.editor-shell[data-direct-inspector=true] #desktopSymmetry [data-page=pattern]>label{font-size:11px}
.editor-shell[data-direct-inspector=true] #rotation{width:64px}
.editor-shell[data-direct-inspector=true] .repeat-choices button{min-height:46px}
.editor-shell[data-direct-inspector=true] #desktopSymmetry [data-page=linear],.editor-shell[data-direct-inspector=true] #desktopSymmetry [data-page=rows]{grid-column:1/-1}
.editor-shell[data-direct-inspector=true][data-inspector=view] .desktop-properties,.editor-shell[data-direct-inspector=true][data-inspector=view] .desktop-transform,.editor-shell[data-direct-inspector=true][data-inspector=view] .desktop-symmetry{display:none}
.editor-shell[data-direct-inspector=true][data-inspector=view] #tabletView{grid-row:2 / 5;display:flex}

/* Drawing preference stays beside appearance, including in the compact editor. */
#smoothingField{display:flex;align-items:center;gap:7px;padding:3px 8px 6px;font-size:12px;min-height:34px}
#freehandSmoothing{flex:1;min-width:0;width:100%;accent-color:var(--accent)}
#smoothingValue{width:32px;flex:none;text-align:right}
/* Phone: Edit combines appearance and size; View remains beside the canvas. */
.editor-shell[data-phone=true]:not([data-keyboard=true]) .desktop-dock{display:grid;grid-template-rows:36px auto auto minmax(0,1fr)}
.editor-shell[data-phone=true]:not([data-keyboard=true]) #inspectorTabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.editor-shell[data-phone=true] #inspectorTabs [data-inspector=transform],.editor-shell[data-phone=true] #inspectorTabs [data-inspector=view]{display:none}
.editor-shell[data-phone=true] #inspectorTabs button{min-height:36px;font-size:13px}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=appearance] .desktop-properties{grid-row:3;display:block}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=appearance][data-appearance=false] .desktop-properties{display:none}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=appearance] .desktop-transform{grid-row:4;display:block;border-top:1px solid var(--line)}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=appearance] .desktop-transform:has([data-page=transform][hidden]){display:none}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=copies] .desktop-symmetry,.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=objects] .desktop-objects,.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=view] #tabletView{grid-row:3 / 5}
.editor-shell[data-phone=true] #desktopSymmetry{display:flex;flex-direction:column;gap:4px}
.editor-shell[data-phone=true] #desktopSymmetry [data-page=repeats]{grid-template-columns:minmax(0,1fr) 52px}
.editor-shell[data-phone=true] #desktopSymmetry .repeat-choices button span{display:block;font-size:12px}
.editor-shell[data-phone=true] #desktopSymmetry .repeat-choices button{min-height:46px}
.editor-shell[data-phone=true] #desktopSymmetry [data-page=pattern]{flex-direction:row;align-items:center}
.editor-shell[data-phone=true] #desktopSymmetry #rotation{width:66px}
.editor-shell[data-phone=true] #desktopCopiesTitle{min-height:32px}
.editor-shell[data-phone=true] .precision-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.editor-shell[data-phone=true] #desktopTransform .symbol-field{font-size:12px}
.editor-shell[data-phone=true] #desktopTransform .symbol-field input{width:62px}
.editor-shell[data-phone=true] .mark-row{min-height:36px;height:36px}
.editor-shell[data-phone=true] .list-pager button{min-height:34px}
.editor-shell[data-phone=true] #desktopObjects{gap:4px}
.editor-shell[data-phone=true]:not([data-keyboard=true])[data-inspector=appearance][data-appearance=false] .desktop-properties{display:block}
.editor-shell[data-phone=true] #desktopEmpty{margin:8px;font-size:13px;line-height:1.4}
/* Keep the canvas geometry stable throughout selection and drawing gestures. */
.editor-shell[data-phone=true]:not([data-keyboard=true]){--inspector-height:326px!important}
/* A labelled grid keeps all ten shapes reachable without scrolling. */
.shape-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(300px,calc(100vw - 60px));gap:4px}
.shape-tray .tool{width:100%;min-height:52px;height:52px}
.editor-shell[data-short=true] .shape-tray .tool>span{display:block;font-size:12px}
/* Font and size share a row beneath the text itself. */
#desktopAppearance [data-page=text]{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:4px 6px}
#desktopAppearance [data-page=text] textarea{grid-column:1/-1;width:100%}
#desktopAppearance [data-page=text]>#fontFamilyField{width:auto;display:flex;align-items:center;gap:4px;min-width:0;font-size:12px}
#fontFamily{min-width:0;width:100%;font-size:13px}
#desktopAppearance [data-page=text]>label:last-child{display:flex;align-items:center;gap:3px;font-size:12px;width:auto}
#desktopAppearance [data-page=text] #fontSize{width:56px;min-width:0;padding:3px}
.editor-shell[data-phone=true] #fontFamily{font-size:16px}
#shapeCountField{display:flex;align-items:center;gap:8px;padding:3px 8px 6px;font-size:12px;min-height:34px}
#shapeCount{width:70px}

/* Compact vector mark and a strong wordmark stay legible in a 32px title bar. */
.app-name{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;letter-spacing:-.35px;color:#111;white-space:nowrap}
.app-name img{display:block;width:25px;height:25px;flex:none}
@media(max-width:430px){.app-name{font-size:12px;gap:3px}.app-name img{width:22px;height:22px}}

/* File commands use one stable reading order at every viewport size. */
.file-actions{display:flex;flex-direction:column;gap:1px;width:min(280px,calc(100vw - 16px))}
.file-actions button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;font-size:13px}
.file-actions kbd{font:11px Arial,sans-serif;color:var(--muted);white-space:nowrap}
.file-actions hr{width:100%;border:0;border-top:1px solid var(--line);margin:4px 0}
.new-project-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.new-project-options button{display:flex;flex-direction:column;gap:5px;padding:12px 8px;text-align:left}
.new-project-options strong{font-size:14px}.new-project-options span{font-size:12px;color:var(--muted)}
.templates-label{font-size:12px;font-weight:500;color:var(--muted);margin:18px 0 5px}
#newProjectDialog #tabletPresets{display:block;border:0;padding:0}#newProjectDialog [data-page=presets]{display:block}#newProjectDialog .desktop-only{display:none}
#newProjectDialog .preset-list{display:flex;gap:6px}#newProjectDialog .preset-list button{flex:1;min-height:38px}
.filename-field{display:flex;align-items:center;gap:5px}.filename-field input{flex:1;min-width:0;font-size:16px}.filename-field span{font-size:13px;color:var(--muted)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{min-width:80px}
#projectsDialog{width:510px}.browser-storage-note{margin:2px 0 10px}
.project-backup{width:100%;min-height:36px;margin-bottom:8px;font-size:13px}
.project-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:68px;height:68px;padding:6px 8px;border:1px solid var(--line);border-radius:4px}
.project-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.project-info strong{font-weight:600}.project-info span{font-size:11px}
.project-thumbnail{display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:#f2f5f7;color:var(--muted);font-size:9px;text-align:center;line-height:1.2}.project-thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:430px){.project-thumbnail{width:42px;height:42px;font-size:8px}}
.project-actions{display:flex;gap:5px;flex:none}.project-actions button{font-size:12px;min-height:34px;padding:4px 7px}
.confirm-delete{border-color:#b85646}.confirm-delete .project-info span{white-space:normal;font-size:11px}.danger{color:#9b2520;border-color:#b85646}
#projectManagerStatus{min-height:16px}#projectList:empty{font-size:13px}
.legend-action{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:5px;padding-top:5px;min-height:50px}
.legend-action p{font-size:12px;line-height:1.3;color:var(--muted);flex:1}.legend-action button{font-size:12px;min-height:36px;flex:none}
@media(max-width:430px){.project-row{padding:5px;gap:4px}.project-actions{gap:3px}.project-actions button{padding:4px 5px}.project-info span{font-size:10px}.confirm-delete .project-info span{font-size:10px}.file-actions kbd{display:none}}
@media(max-height:400px){.file-actions button{min-height:28px;height:28px}.file-actions hr{margin:2px 0}}

#shapeOptions{display:flex;align-items:center;gap:16px;padding:3px 8px 6px;min-height:34px}#shapeOptions #shapeCountField{padding:0;min-height:28px}#regularShapeField{font-size:12px;white-space:nowrap}

/* Short tool guidance reuses the status bar without shifting the drawing area. */
#canvasHint{flex:1}
.editor-status:has(#canvasHint:not([hidden]))>#selectionStatus,.editor-status:has(#canvasHint:not([hidden]))>.repeat-status{display:none}
#shapeOptions{gap:10px}
#regularShapeHelp{flex:none;width:30px;min-height:30px;padding:0;font-size:15px;font-weight:600;border-radius:50%}

/* Panel visibility is a view control shared by desktop, tablet and phone. */
.panel-toggle{display:flex;align-items:center;justify-content:center;gap:5px;flex:none}
.panel-toggle .action-icon{width:19px;height:19px}
#recenterView{display:flex;align-items:center;justify-content:center}
#recenterView .action-icon{display:none}
.editor-shell[data-canvas-only=true]:not([data-tablet=true]){grid-template-columns:54px minmax(0,1fr)}
.editor-shell[data-phone=true] .panel-toggle svg{transform:rotate(90deg)}
@media(max-width:430px){
  .editor-shell[data-phone=true] .canvas-toolbar{padding:2px 0}
  .editor-shell[data-phone=true] .tools>.tool{width:43px;height:44px;min-height:44px;gap:0}
  .editor-shell[data-phone=true] .tools>.tool:after,.editor-shell[data-phone=true] .tools>.tool>span{display:none}
  .editor-shell[data-phone=true] .tools>.tool>svg{width:23px;height:23px}
  .editor-shell[data-phone=true] .panel-toggle span,.editor-shell[data-phone=true] #recenterView span{display:none}
  .editor-shell[data-phone=true] #recenterView .action-icon{display:block}
  .editor-shell[data-phone=true] .view-controls .panel-toggle,.editor-shell[data-phone=true] .view-controls #recenterView{width:32px;min-height:32px;padding:3px}
}

/* Empty starters and artwork templates have distinct, previewable choices. */
#newProjectDialog{width:590px;overflow-y:auto}
.starter-heading{font-size:14px;font-weight:600;margin:8px 0}
#newProjectDialog .new-project-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#newProjectDialog .new-project-options button{align-items:center;justify-content:center;text-align:center;min-width:0;gap:3px;padding:8px 6px}
#newProjectDialog .starter-preview{width:60px;height:44px;color:var(--accent)}
#newProjectDialog .new-project-options strong{font-size:14px;line-height:18px}
#newProjectDialog .new-project-options span{font-size:12px;line-height:16px;white-space:normal;max-width:100%}
.starter-note{font-size:12px;line-height:16px;color:var(--muted);margin:8px 0 0}
#newProjectDialog .templates-label{font-size:14px;font-weight:600;margin:14px 0 7px;color:inherit}
#newProjectDialog #tabletPresets button{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;overflow:hidden;gap:0}
#newProjectDialog .template-preview{display:block;width:100%;height:72px}
#newProjectDialog #tabletPresets button span{font-size:13px;padding:5px}
@media(max-width:430px){
  #newProjectDialog .new-project-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  #newProjectDialog [data-starter=blank]{grid-column:1/-1;display:grid;grid-template-columns:44px auto;column-gap:10px;padding:5px 12px;text-align:left;justify-content:center}
  #newProjectDialog [data-starter=blank] svg{grid-row:1/3;width:40px;height:40px}
  #newProjectDialog .template-preview{height:58px}
}
@media(max-height:440px) and (min-width:431px){
  #newProjectDialog{width:680px}
  #newProjectDialog .new-project-options{grid-template-columns:repeat(5,minmax(0,1fr))}
  #newProjectDialog .starter-preview{height:30px}
  #newProjectDialog .template-preview{height:42px}
  #newProjectDialog .templates-label{margin-top:8px}
}

/* Grid controls span the panel, rather than squeezing into the icon row. */
[data-page=guides]{flex-wrap:wrap}
#guideFields{display:contents}
.guide-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;flex:1 0 100%;width:100%}
.guide-options label{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;font-size:12px}
.guide-options label input{width:56px;min-width:0;flex:none;min-height:30px;padding:3px}
.guide-options #gridSnap{justify-self:stretch;min-height:30px}
.editor-shell[data-phone=true] #tabletView .rotation-options{flex:1;min-width:0}
.editor-shell[data-phone=true] #tabletView .rotation-fields{display:grid;grid-template-columns:auto minmax(0,1fr);flex:1;min-width:0;gap:3px}
.editor-shell[data-phone=true] #tabletView .rotation-fields>input{width:100%;min-width:0}
.editor-shell[data-phone=true] #tabletView .snap-fields{grid-column:1/-1;justify-content:space-between;min-width:0}
.editor-shell[data-phone=true] #tabletView .snap-fields input[type=number]{flex:none;width:50px}

/* Snap stays beside Undo/Redo, including when the inspector is hidden. */
.quick-snap{display:flex;align-items:center;justify-content:center;flex:none;gap:4px;min-width:82px;height:38px;padding:3px 6px;font-size:12px;white-space:nowrap}
.quick-snap .action-icon{width:17px;height:17px;flex:none}
.quick-snap .snap-state{min-width:18px;text-align:left}
.editor-shell[data-tablet=true] .quick-snap{min-width:48px;width:48px;padding:3px;gap:3px}
.editor-shell[data-tablet=true] .quick-snap .snap-label{display:none}
.editor-shell[data-short=true]:not([data-phone=true]) .quick-snap{min-width:44px;width:44px;padding:2px;gap:2px}

/* Explicit overlap selection leaves the canvas and compact toolbars in place. */
#overlapDialog{width:380px}
#overlapDescription{font-size:14px;line-height:1.4;margin:6px 0 10px}
#overlapList{display:grid;gap:4px}
.overlap-choice{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:6px 8px;font-size:14px;text-align:left}
.overlap-choice .object-label{flex:1}
.overlap-choice small{flex:none;font-size:12px;color:var(--muted)}
#overlapPager{margin-top:8px}
#overlapPager button{min-width:44px;min-height:36px}