@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;550;600&display=swap');
:root{--ink:#27332e;--accent:#173d35;--muted:#839087;--border:#e4e8e3;--surface:#f5f7f3}*{box-sizing:border-box}body{margin:0;background:#f7f8f6;color:var(--ink);font:11px Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button,summary,a{ -webkit-tap-highlight-color:transparent}button,summary,#export{display:flex;align-items:center;justify-content:center;gap:7px;min-width:32px;min-height:32px;padding:6px;border:1px solid transparent;border-radius:3px;background:transparent;color:inherit;cursor:pointer;text-decoration:none;list-style:none}summary::-webkit-details-marker{display:none}button svg,summary svg,#export svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button:hover,summary:hover,#export:hover{background:#e9eee7}button:disabled{opacity:.25;cursor:default}button.active,button.active:hover{background:var(--accent);color:white}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #719b86;outline-offset:2px}.app{height:100dvh;min-height:520px;display:flex;flex-direction:column;max-width:2000px;margin:auto}header{height:58px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--border);background:#fafbf9}header strong{font-size:15px;font-weight:550;letter-spacing:-.4px}.top-actions{display:flex;align-items:center;gap:4px}.top-actions .menu>summary{font-size:10px;padding:6px 9px}.divider{width:1px;height:20px;background:var(--border);margin:0 7px}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr) 168px;gap:12px;padding:12px 15px 10px 10px}.tool-rail{display:flex;align-items:center;flex-direction:column;gap:3px;overflow:visible}.tools{display:flex;flex-direction:column;gap:3px;width:100%;align-items:center}.tools button,.tool-rail>button,.tool-rail>details>summary{width:34px;height:34px}.rail-divider{height:1px;width:24px;background:var(--border);margin:7px 0}.canvas-area{position:relative;min-width:0;min-height:0;background:#fff;border:1px solid var(--border);overflow:hidden}.canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:crosshair}.canvas-area:focus-within{border-color:#ced9cf}.preview-rail{display:flex;flex-direction:column;gap:10px;min-width:0;overflow:visible;position:relative}.preview-heading{display:flex;justify-content:space-between;align-items:center;color:#79887e;font-size:9px;text-transform:uppercase;letter-spacing:.8px;min-height:22px}.preview-heading button{min-height:24px;height:24px;width:26px;min-width:26px}.preview-heading svg{width:15px;height:15px}.preview{display:block;background:#e9efe8;width:100%;aspect-ratio:1;flex-shrink:0}.reverse{background:var(--accent);color:#f8faf7}.size-tests,.quality{border-top:1px solid var(--border);padding-top:5px}.size-tests>summary,.quality>summary{justify-content:space-between;font-size:10px;min-height:27px;color:#6c7d71;padding:4px 0}.size-tests>summary:after,.quality>summary:after{content:'+';font-size:12px}details[open]>summary:after{content:'−'}.sizes{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:8px 0}.sizes svg{display:block}.sizes small{display:block;margin-top:5px;font-size:9px;color:var(--muted)}.status{font-size:9px;color:#77867b;line-height:1.7;padding:8px 0;max-height:160px;overflow:auto}.menu{position:relative}.popover{display:none;position:absolute;z-index:30;background:#fff;border:1px solid #dce3db;box-shadow:0 8px 22px #173d3510;padding:12px;width:225px;right:0;top:calc(100% + 6px);border-radius:3px}.menu[open]>.popover{display:block}details[open]>summary{background:#e9eee7}.popover label{display:block;margin:0 0 11px;line-height:1.6;font-size:11px}.popover label:last-child{margin-bottom:0}input[type=checkbox]{appearance:none;display:inline-grid;place-content:center;width:12px;height:12px;border:1px solid #aebdaf;background:white;margin:0 7px 0 0;vertical-align:-2px;border-radius:0;cursor:pointer}input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:checked:after{content:'';width:6px;height:3px;border:solid white;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-1px)}input[type=range]{appearance:none;width:100%;height:18px;background:transparent;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#d5ded2}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:12px;background:var(--accent);margin-top:-5px;border-radius:0}.range-label span{display:flex;justify-content:space-between}hr{border:0;border-top:1px solid var(--border);margin:12px 0}.numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.numbers input{width:100%;margin-top:4px}.menu-caption{font-size:9px;color:var(--muted);margin-bottom:8px}input[type=number],select{border:1px solid var(--border);background:#fafbf9;min-height:28px;padding:4px 6px;border-radius:0;max-width:100%}select{display:block;width:100%;margin-top:5px}.overflow{padding:5px;width:175px}.overflow button{justify-content:start;width:100%;font-size:11px;padding:9px}.tool-options .popover{left:calc(100% + 10px);top:0;right:auto}.layers-menu{margin-top:auto;border-top:1px solid var(--border);padding-top:7px}.layers-menu>summary{justify-content:start;padding:7px;font-size:11px}.layers-menu>summary svg{width:16px}.layers-menu #layer-count{margin-left:auto;color:var(--muted);font-size:9px}.layers-popover{top:auto;bottom:calc(100% + 5px);width:270px;padding:0}.layers-heading{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border);font-size:11px;font-weight:550}.layer-list{max-height:300px;overflow:auto}.row{display:flex;align-items:center;border-bottom:1px solid #edf0eb;padding:2px 8px 2px 10px;gap:5px;min-height:42px}.row:last-child{border-bottom:0}.layer-name{flex:1;justify-content:start;min-width:0;font-size:11px;gap:9px}.layer-name svg{width:18px;height:18px}.layer-name small{color:var(--muted);font-size:9px;margin-left:4px}.row.layer-active{background:#e9efe8;box-shadow:inset 2px 0 var(--accent)}.row .layer-delete{min-width:27px;width:27px;min-height:27px;padding:5px;color:#839087}.row .layer-delete:hover{color:#995332;background:#f8eeea}.cut-badge{margin-left:auto;color:#995332}.inspector-shell:empty{display:none}.inspector-shell{position:absolute;left:12px;right:12px;bottom:12px;z-index:10;pointer-events:none;display:flex;justify-content:center}.inspector{pointer-events:auto;padding:9px 12px;background:#ffffffed;border:1px solid #dde5db;max-width:100%;box-shadow:0 3px 12px #173d3508}.inspector .fields{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.inspector label{font-size:9px;color:#718077;display:flex;align-items:center;gap:5px;white-space:nowrap}.inspector input[type=number]{width:56px;font-size:10px}.inspector input[type=checkbox]{margin-right:1px}.inspector button{min-height:28px;font-size:10px}.inspector #delete-point{color:#995332}footer{height:31px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 18px;border-top:1px solid var(--border);color:#829086;font-size:9px;flex-shrink:0}.hint{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center;font-size:9px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:750px){.workspace{grid-template-columns:40px minmax(0,1fr) 115px;gap:7px;padding:8px}.top-actions .menu>summary span{display:none}header{padding:0 10px;height:50px}.top-actions{gap:0}.divider{margin:0 3px}.inspector .fields{gap:6px}.inspector-shell{left:5px;right:5px;bottom:5px}.inspector{padding:7px}.inspector input[type=number]{width:48px}.preview-rail{gap:7px}.layers-popover{width:245px}footer .hint{display:none}.sizes{gap:7px}.quality .status{max-height:110px}}
@media(max-width:500px){.workspace{grid-template-columns:38px minmax(0,1fr) 76px;gap:5px}.tools button,.tool-rail>button,.tool-rail>details>summary{width:36px;height:38px}.preview-heading{letter-spacing:0;font-size:8px;flex-wrap:wrap}.preview-heading button{width:22px;min-width:22px}.size-tests>summary,.quality>summary{font-size:9px}.popover{position:fixed;top:55px;right:10px;left:auto;max-width:calc(100vw - 20px)}.tool-options .popover{position:fixed;top:55px;left:10px}.layers-popover{position:fixed;top:auto;bottom:44px;right:10px}.inspector-shell{position:fixed;left:48px;right:88px;bottom:42px}.inspector input[type=number]{width:46px}header strong{font-size:13px}.top-actions button,.top-actions summary,#export{min-width:29px;padding:5px}.sizes svg{max-width:76px;height:auto}footer{padding:0 10px}.quality .status{font-size:8px}}
@media(pointer:coarse){button,summary,#export{min-height:40px}.tools button,.tool-rail>button,.tool-rail>details>summary{height:40px}.tools{gap:2px}.row{min-height:44px}.popover label{padding:3px 0}.preview-heading button{min-height:30px}}

[hidden]{display:none!important}

.tool-rail{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.tool-rail::-webkit-scrollbar{display:none}.tool-options .popover{position:fixed;left:60px;top:80px;right:auto}.preview-rail{overflow-y:auto;scrollbar-width:thin}.layers-popover{position:fixed;top:auto;bottom:42px;right:20px}.preview-rail>details{flex-shrink:0}@media(max-width:500px){.tool-options .popover{left:10px;top:55px}.layers-popover{right:10px}}

.subtract-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:34px;flex-shrink:0;cursor:pointer;border-radius:3px;color:var(--ink)}.subtract-toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.subtract-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;pointer-events:none}.subtract-toggle:hover{background:#e9eee7}.subtract-toggle:has(input:checked){background:var(--accent);color:white}.subtract-toggle:has(input:focus-visible){outline:2px solid #719b86;outline-offset:2px}@media(pointer:coarse){.subtract-toggle{height:40px;min-height:40px}}

.point-handle [data-point]{cursor:grab}.point-handle:hover .point-visible{stroke:#173d35;stroke-width:2.5}.canvas:active [data-point]{cursor:grabbing}
.top-actions .menu>summary[aria-label="View"]>span{display:none}
.top-actions .menu[open]>summary[aria-label="View"]>span{display:inline}
/* Compact contextual property strip. */
.inspector{padding:8px 10px;border-radius:4px;background:#fffffff5;box-shadow:0 4px 16px #173d350a}.inspector .fields{gap:12px;min-height:32px;justify-content:center}.inspector label{font-size:10px;gap:6px;line-height:1;color:#66796d}.inspector input[type=number]{width:58px;height:30px;min-height:30px;background:#f7f9f5;border-color:#e1e7de;padding:5px 7px;color:#273b30;font-size:11px;font-variant-numeric:tabular-nums}.inspector input[type=checkbox]{width:13px;height:13px;flex-shrink:0}.inspector #delete-point{font-size:0;width:30px;height:30px;min-width:30px;min-height:30px;padding:6px;border-left:1px solid #e4e8e3;border-radius:0;margin-left:0;order:10;color:#8a9990}.inspector #delete-point:before{content:'';width:16px;height:16px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M4 5h12M8 3h4M6 5l1 12h6l1-12M9 8v6M11 8v6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}.inspector #delete-point:hover{color:#995332;background:#fbf0eb}.inspector label:has(#edit-weight),.inspector label:has(#measure){padding-left:12px;border-left:1px solid #e4e8e3}.inspector label:has(#edit-stroke){gap:5px}.inspector input[type=number]::-webkit-inner-spin-button{opacity:0}.inspector input[type=number]:hover::-webkit-inner-spin-button,.inspector input[type=number]:focus::-webkit-inner-spin-button{opacity:1}@media(max-width:750px){.inspector .fields{gap:9px}.inspector{padding:8px}.inspector input[type=number]{width:51px}.inspector label{font-size:9px}.inspector label:has(#edit-weight),.inspector label:has(#measure){padding-left:8px}}@media(pointer:coarse){.inspector input[type=number],.inspector #delete-point{height:36px;min-height:36px}}

.copies-heading{font-size:10px;color:#748478;margin-bottom:9px}.symmetry-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}.symmetry-previews button{display:flex;flex-direction:column;gap:5px;min-width:0;padding:7px 4px;border:1px solid var(--border);border-radius:0;background:#fafbf9}.symmetry-previews button svg{width:48px;height:48px;fill:currentColor;stroke:none}.symmetry-previews button span{font-size:9px;white-space:nowrap;color:#708174}.symmetry-previews button[aria-pressed=true]{border-color:#173d35;background:#e9efe8;box-shadow:inset 0 0 0 1px #173d35}.symmetry-previews button:hover{background:#e9efe8}.symmetry-previews button[aria-pressed=true] span{color:#173d35}

.ma-emblem{display:flex;align-items:center;width:57px;color:var(--ink);text-decoration:none}.ma-emblem svg{display:block;width:57px;height:28px}.ma-emblem:focus-visible{outline:2px solid #719b86;outline-offset:4px}

.ma-emblem,.ma-emblem svg{width:39px}.ma-emblem svg{height:21px}.preview-heading{min-height:22px}.copy-preview{display:block;position:relative;width:100%;padding:0;border:0;border-radius:0;min-height:0;flex-shrink:0;overflow:hidden}.copy-preview:hover{background:none}.copy-preview .preview{transition:filter .15s}.copy-preview:hover .preview{filter:brightness(.97)}.copy-cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(3px);background:#fff;color:#173d35;border:1px solid #dce4dc;border-radius:3px;padding:5px 8px;font-size:10px;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s}.copy-preview:hover .copy-cue,.copy-preview:focus-visible .copy-cue,.copied .copy-cue{opacity:1;transform:translateX(-50%) translateY(0)}.copy-preview.copied{outline:1px solid #719b86;outline-offset:-1px}.size-copy{position:relative;cursor:pointer}.size-copy:hover{outline:1px solid #ced9cf;outline-offset:4px}.size-copy .copy-cue{bottom:22px}.overflow #export{justify-content:start;width:100%;font-size:11px;padding:9px;min-height:32px}.preview-rail>.copy-preview{margin:0}
.top-actions .menu>summary[aria-label="Symmetry"]>span{display:none}
.top-actions .menu[open]>summary[aria-label="Symmetry"]>span{display:inline}

/* Viewport chrome stays outside SVG transforms. */
.canvas-area>.layers-menu{position:absolute;right:10px;bottom:10px;z-index:20;margin:0;padding:0;border:0;background:#ffffffed;border:1px solid #e0e6dd;border-radius:3px}.canvas-area>.layers-menu>summary{width:32px;height:30px;min-height:30px;justify-content:center;padding:6px}.canvas-area>.layers-menu>summary>span,.canvas-area>.layers-menu>summary:after{display:none}.canvas-area>.layers-menu .layers-popover{position:absolute;right:0;bottom:calc(100% + 7px);top:auto;width:245px;max-width:calc(100vw - 80px);max-height:min(330px,60vh);padding:0}.layers-popover .layer-list{max-height:min(285px,calc(60vh - 44px));overflow:auto}.viewport-zoom{position:absolute;left:10px;bottom:10px;z-index:20;display:flex;gap:0;background:#ffffffed;border:1px solid #e0e6dd;border-radius:3px}.viewport-zoom button{min-height:30px;height:30px;min-width:28px;padding:4px;font-size:14px}.viewport-zoom #zoom-reset{font-size:10px;min-width:43px;border-left:1px solid #edf0ea;border-right:1px solid #edf0ea;border-radius:0}.inspector-shell{left:10px;right:10px;bottom:50px}.inspector{padding:5px 7px;border-radius:3px;box-shadow:0 2px 9px #173d3507}.inspector .fields{gap:8px;min-height:26px}.inspector label{font-size:9px;gap:4px}.inspector input[type=number]{width:47px;height:26px;min-height:26px;padding:3px 5px;font-size:10px}.inspector label:has(#edit-weight),.inspector label:has(#measure){padding-left:8px}.inspector #delete-point{width:26px;height:26px;min-width:26px;min-height:26px;padding:5px}.preview.dark-preview{background:#173d35;color:#f8faf7}.preview-heading #preview-background{min-width:24px;width:24px;height:24px;min-height:24px;padding:4px}.preview-heading #preview-background svg{width:16px;height:16px}.canvas.can-pan,.canvas.panning{cursor:grab!important}.canvas.panning{cursor:grabbing!important}@media(max-width:500px){.inspector-shell{position:absolute;left:5px;right:5px;bottom:50px}.inspector .fields{gap:6px}.inspector input[type=number]{width:42px}.canvas-area>.layers-menu{right:7px;bottom:7px}.viewport-zoom{left:7px;bottom:7px}.inspector label:has(#edit-weight),.inspector label:has(#measure){padding-left:5px}}@media(pointer:coarse){.viewport-zoom button,.canvas-area>.layers-menu>summary{height:38px;min-height:38px;min-width:34px}.inspector input[type=number],.inspector #delete-point{min-height:32px;height:32px}}
.copy-preview>.preview{width:100%;height:auto;aspect-ratio:1;stroke:none;fill:currentColor}
/* Menus extend from their triggers; no synthetic open-state minus. */
.menu[open]>summary:after{content:none!important;display:none!important}
.tool-rail{overflow:visible}
.tool-options .popover{position:absolute;left:calc(100% - 1px);right:auto;top:0;width:225px;border-radius:0 3px 3px 3px;box-shadow:5px 5px 16px #173d350c}
.tool-options[open]>summary{border:1px solid #dce3db;border-right-color:#fff;background:#fff;border-radius:3px 0 0 3px;position:relative;z-index:31}
@media(prefers-reduced-motion:no-preference){.tool-options[open]>.popover{animation:tool-slide-in .14s ease-out}@keyframes tool-slide-in{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}}
@media(max-height:650px){.tool-rail{overflow-y:auto;scrollbar-width:none}.tool-options .popover{position:fixed;top:var(--tool-panel-top,300px);left:var(--tool-panel-left,53px)}}
@media(max-width:500px){.tool-options .popover{position:absolute;top:0;left:calc(100% - 1px);width:min(225px,calc(100vw - 65px))}}

#canvas{overflow:visible}

.grid-number{display:flex;align-items:center;gap:8px;margin-top:8px}.grid-number input{width:58px}.grid-number span{font-size:10px;color:#7b8b7e}
.ma-emblem,.ma-emblem svg{width:25px}.ma-emblem svg{height:14px}
/* Actual-size proofs with aligned labels and centered artwork. */
#sizes.sizes{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:5px 0 0;overflow-x:auto;scrollbar-width:thin}
#sizes>.size-copy{display:grid;grid-template-columns:32px minmax(128px,1fr);align-items:center;justify-items:center;column-gap:4px;min-width:164px;min-height:60px;width:100%;padding:8px 0;border-bottom:1px solid #e6ebe3;outline-offset:-1px}
#sizes>.size-copy:last-child{border-bottom:0;padding-top:12px;padding-bottom:12px}
#sizes>.size-copy>small{grid-column:1;grid-row:1;justify-self:start;margin:0;font-size:10px;line-height:1.4;color:#63786a;font-variant-numeric:tabular-nums}
#sizes>.size-copy>svg{grid-column:2;grid-row:1;max-width:none;height:revert;flex-shrink:0}
#sizes>.size-copy:hover{background:#eef3ec;outline:0}
#sizes>.size-copy:focus-visible{outline:1px solid #719b86;outline-offset:-1px}
#sizes>.size-copy>.copy-cue{bottom:5px;left:auto;right:5px;transform:none;font-size:9px;padding:3px 5px}

.cell-size{display:flex;align-items:center;gap:8px;margin:-3px 0 14px 19px}.popover .cell-size label{margin:0;font-size:10px;color:#718376}.cell-size input{width:56px;min-height:26px;font-size:11px}.cell-size>span{font-size:9px;color:#87958a}.snap-targets>summary{justify-content:start;padding:2px 0;min-height:24px;font-size:10px;color:#718376}.snap-targets>summary:before{content:'›';margin-right:4px}.snap-targets[open]>summary:before{transform:rotate(90deg)}.snap-targets>label{margin:8px 0 8px 12px;font-size:10px}.view-popover input[hidden],.view-popover output[hidden]{display:none!important}

.app>header{border-bottom:0}
.app>header{background:transparent}

.point-handle.selection-handle:hover .point-visible{stroke:#668CAC;stroke-width:2}.point-handle.inactive-handle .point-visible{opacity:.65}.point-handle.inactive-handle:hover .point-visible{opacity:1;stroke:#8EA39A;stroke-width:1.6}.point-handle.active-point .point-visible{stroke:#fff;stroke-width:1.2;paint-order:stroke fill;filter:drop-shadow(0 0 1px #668cac80)}

.overflow{width:205px}.overflow button{gap:9px;min-height:35px}.overflow [data-menu-icon]{display:flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0}.overflow [data-menu-icon] svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}.overflow hr{margin:4px 7px}.overflow #clear{color:#758479}.overflow #clear:hover{color:#995332}.overflow [hidden]{display:none!important}

.inspector .fields{gap:0;justify-content:center;align-items:center}.inspector .property-group{display:flex;align-items:center;gap:7px;padding:0 9px;border-left:1px solid #e2e7df}.inspector .property-group:first-child{border-left:0;padding-left:2px}.inspector .property-group:last-child{padding-right:2px}.inspector .property-group label{border:0!important;padding:0!important}.inspector .property-toggle{min-width:28px;width:28px;height:28px;min-height:28px;border:1px solid transparent;border-radius:3px;padding:5px;color:#84918a}.inspector .property-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor}.inspector .property-toggle[aria-pressed=true]{color:#173d35;background:#e4ece2;border-color:#d9e3d6}.inspector .property-toggle:hover:not(:disabled){background:#edf2e9}.inspector .property-toggle:disabled{opacity:.28;cursor:default;background:transparent}.inspector .width-field{font-size:9px}.inspector .width-field input{width:44px}.inspector #delete-point{border-left:0;margin:0;order:0}.inspector .delete-group{margin-left:0}@media(max-width:750px){.inspector .property-group{gap:5px;padding:0 6px}.inspector .fields{row-gap:7px}.inspector .measurements{flex-wrap:wrap}.inspector .property-toggle{width:27px;min-width:27px}}@media(pointer:coarse){.inspector .property-toggle{width:34px;min-width:34px;height:34px;min-height:34px}}

/* Stack mobile previews below the drawing viewport, preserving its usable width. */
@media(max-width:600px){
 .app{height:auto;min-height:100dvh}
 .workspace{flex:none;grid-template-columns:38px minmax(0,1fr);grid-template-rows:minmax(360px,calc(100dvh - 100px)) auto;gap:10px 7px;padding:8px}
 .tool-rail{grid-column:1;grid-row:1}
 .canvas-area{grid-column:2;grid-row:1}
 .preview-rail{grid-column:2;grid-row:2;overflow:visible;gap:10px;padding-top:2px}
 .preview-heading{font-size:9px;letter-spacing:.8px;flex-wrap:nowrap}
 .preview-rail>.copy-preview{width:100%;max-width:320px;align-self:center}
 .size-tests>summary,.quality>summary{font-size:10px}
 footer{margin-top:4px}
}

.inspector #delete-point:before{content:none}.inspector #delete-point svg{display:block;width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.inspector .thickness-icon{width:16px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-linecap:round}

/* Comfortable desktop scale at the browser's default zoom. */
@media(min-width:751px){
 body{font-size:13px}
 .workspace{grid-template-columns:52px minmax(0,1fr) 210px;gap:14px;padding:10px 18px 12px 12px}
 .app>header{height:64px;padding:0 24px}
 .top-actions{gap:5px}
 .top-actions button,.top-actions summary{min-width:40px;min-height:40px;font-size:13px}
 button svg,summary svg{width:21px;height:21px}
 .tools{gap:4px}
 .tools button,.tool-rail>button{width:42px;height:42px}
 .tools button svg,.tool-rail>button svg{width:22px;height:22px}
 .preview-heading{font-size:11px;min-height:28px;letter-spacing:.7px}
 .preview-heading #preview-background{width:32px;height:32px;min-height:32px}
 .preview-heading #preview-background svg{width:19px;height:19px}
 .preview-rail{gap:12px}
 .size-tests>summary,.quality>summary{font-size:12px;min-height:36px}
 .status{font-size:11px}
 .popover{width:260px;padding:14px}
 .popover label,.popover button,.numbers input{font-size:13px}
 .popover input[type=checkbox]{width:14px;height:14px}
 .menu-caption,.popover .cell-size label,.snap-targets>summary,.snap-targets>label{font-size:12px}
 .cell-size input{width:64px;min-height:32px;font-size:13px}
 .cell-size>span{font-size:11px}
 .overflow{width:230px;padding:6px}
 .overflow button{min-height:40px}
 .overflow [data-menu-icon],.overflow [data-menu-icon] svg{width:18px;height:18px}
 .inspector-shell{bottom:62px;left:12px;right:12px}
 .inspector{padding:7px 9px}
 .inspector .fields{row-gap:8px}
 .inspector .property-group{gap:8px;padding:0 10px}
 .inspector label,.inspector .width-field{font-size:12px;gap:6px}
 .inspector input[type=number],.inspector .width-field input{width:60px;height:34px;min-height:34px;font-size:13px;padding:4px 6px}
 .inspector .property-toggle,.inspector #delete-point{width:34px;min-width:34px;height:34px;min-height:34px;padding:7px}
 .inspector .property-toggle svg,.inspector #delete-point svg,.inspector .thickness-icon{width:20px;height:20px}
 .viewport-zoom button{height:38px;min-height:38px;min-width:35px;font-size:17px}
 .viewport-zoom #zoom-reset{font-size:12px;min-width:54px}
 .canvas-area>.layers-menu>summary{width:38px;height:38px;min-height:38px}
 .canvas-area>.layers-menu>summary svg{width:20px;height:20px}
 .layers-heading,.layer-name{font-size:13px}
 .layer-name small,.layers-heading>span:last-child{font-size:11px}
 .row{min-height:46px}
 footer{height:36px;font-size:11px;padding:0 20px}
 footer .hint{font-size:11px}
}
@media(min-width:751px) and (max-width:1000px){
 .workspace{grid-template-columns:46px minmax(0,1fr) 170px;gap:10px;padding-left:8px;padding-right:12px}
 .inspector .property-group{gap:5px;padding:0 7px}
 .inspector input[type=number],.inspector .width-field input{width:52px}
}

/* Keep the emblem centered over the responsive drawing-tool rail. */
@media(max-width:750px){.app>header{padding-left:8px}.ma-emblem{width:40px;min-width:40px;justify-content:center}}
@media(max-width:600px){.ma-emblem{width:38px;min-width:38px}}

.canvas-area>.layers-menu>summary.has-selection{width:auto;min-width:58px;padding:6px 9px;gap:7px;color:var(--accent)}
.canvas-area>.layers-menu>summary.has-selection>.selected-layer-number{display:block;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
@media(min-width:751px){.canvas-area>.layers-menu>summary.has-selection{min-width:66px}.canvas-area>.layers-menu>summary.has-selection>.selected-layer-number{font-size:12px}}

/* One shared right edge; preview appearance controls stay with the preview. */
.preview-controls{display:flex;justify-content:flex-end;margin-top:-6px}
.preview-controls #preview-background{width:32px;height:32px;min-height:32px;padding:6px}
.preview-controls #preview-background svg{width:18px;height:18px}
@media(min-width:751px){.app>header{padding-right:18px}.preview-controls #preview-background{width:40px;height:36px;min-height:36px}.preview-heading{min-height:28px}}
@media(min-width:751px) and (max-width:1000px){.app>header{padding-right:12px}}
@media(max-width:750px){.app>header{padding-right:8px}}

/* Preview heading owns its appearance action; accordions follow one rhythm. */
.preview-rail{gap:0}
.preview-heading{margin-bottom:8px;min-height:30px;align-items:center}
.preview-heading #preview-background{width:30px;min-width:30px;height:30px;min-height:30px;padding:6px}
.preview-heading #preview-background svg{width:17px;height:17px}
.preview-rail>.copy-preview{margin-bottom:12px}
.preview-rail>.size-tests,.preview-rail>.quality{margin:0;padding-top:0}
.preview-rail>.size-tests>summary,.preview-rail>.quality>summary{min-height:38px;padding:8px 0}
/* Compact View menu, with aligned grid, construction and snapping sections. */
.menu>.view-popover{width:220px;padding:11px}
.view-popover>label{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.4;margin:0;min-height:28px}
.view-popover input[type=checkbox]{flex-shrink:0;width:12px;height:12px;margin:0}
.view-popover hr{margin:8px 0}
.view-popover .cell-size{display:grid;grid-template-columns:1fr 52px auto;gap:7px;align-items:center;margin:4px 0 2px 20px}
.view-popover .cell-size label{font-size:10px;margin:0}
.view-popover .cell-size input{width:52px;min-height:27px;height:27px;font-size:11px;padding:3px 5px}
.view-popover .cell-size>span{font-size:10px}
.view-popover .snap-targets>summary{min-height:25px;font-size:10px;margin-top:2px}
.view-popover .snap-targets>label{display:flex;align-items:center;gap:8px;font-size:11px;margin:5px 0 5px 20px;min-height:24px}
.tools button.active,.tools button.active:hover{background:#e3ebe4;color:#173d35;box-shadow:inset 2px 0 #668CAC}
.selected-artwork-guide>*{vector-effect:non-scaling-stroke;stroke-width:1.3;stroke-dasharray:4 3;opacity:.9}
.point-handle.inactive-handle .point-visible{opacity:.45}
.point-handle.selection-handle .point-visible{vector-effect:non-scaling-stroke}
@media(min-width:751px){.preview-heading{min-height:32px;margin-bottom:8px}.preview-heading #preview-background{width:40px;min-width:40px;height:32px;min-height:32px}.preview-rail>.copy-preview{margin-bottom:12px}}
@media(pointer:coarse){.view-popover>label,.view-popover .snap-targets>label{min-height:36px}.preview-heading #preview-background{height:36px;min-height:36px}}

/* View settings use the same restrained rows and numeric fields as the inspector. */
.view-title{font-size:10px;font-weight:500;letter-spacing:.15px;color:#718077;padding:2px 0 9px;border-bottom:1px solid var(--border);margin-bottom:6px}
.menu>.view-popover{border-color:#e0e6dd;border-radius:3px;box-shadow:0 4px 16px #173d350a}
.view-popover>label{color:var(--ink);font-weight:400}
.view-popover .cell-size{margin:2px 0 4px 20px;grid-template-columns:1fr 54px auto}
.view-popover .cell-size label{color:#718077}
.view-popover .cell-size input{width:54px;background:#f7f9f5;border-color:#e1e7de;border-radius:2px;font-variant-numeric:tabular-nums}
.view-popover hr{border-color:#e8ece6;margin:7px 0}
.view-popover .snap-targets>summary{margin-left:20px;color:#718077;padding-left:0}
.view-popover .snap-targets>summary:before{margin-right:1px}

/* Corner system: 0 structural · 4 controls · 8 floating surfaces. */
:root{--radius-structure:0px;--radius-control:4px;--radius-floating:8px}
.canvas-area,.canvas,.preview-rail,.preview,.size-tests,.quality,.workspace,.tool-rail{border-radius:var(--radius-structure)}
button,summary,input[type=number],select,.tools button,.symmetry-previews button,.inspector .property-toggle,.inspector #delete-point,.inspector input[type=number],.view-popover .cell-size input{border-radius:var(--radius-control)}
.popover,.menu>.view-popover,.inspector{border-radius:var(--radius-floating)}
.viewport-zoom,.canvas-area>.layers-menu{border-radius:var(--radius-control)}
.viewport-zoom button{border-radius:0}
.viewport-zoom button:first-child{border-radius:4px 0 0 4px}
.viewport-zoom button:last-child{border-radius:0 4px 4px 0}
.canvas-area>.layers-menu>summary{border-radius:var(--radius-control)}
.layers-popover .layer-list{border-radius:0 0 8px 8px}
/* The preview image and its click target remain one square structural surface. */
.preview-rail>.copy-preview{border-radius:var(--radius-structure)}

.canvas-area:has(#artboard-boundary){background:#f1f4ef}

.overflow .learn-geometry{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:9px;font-size:11px;min-height:35px;border-radius:4px}.overflow .learn-geometry:hover{background:#e9eee7}@media(min-width:751px){.overflow .learn-geometry{font-size:13px;min-height:40px}}

.footer-learn{flex-shrink:0;color:inherit;text-decoration:none;white-space:nowrap;padding:7px 0}.footer-learn span{margin-left:4px}.footer-learn:hover{color:var(--accent)}.footer-learn:focus-visible{outline:2px solid #668cac;outline-offset:3px}

.preview-actions{display:flex;align-items:center;gap:0}
.preview-heading #save-favorite{width:30px;min-width:30px;height:30px;min-height:30px;padding:6px}
.preview-heading #save-favorite svg{width:17px;height:17px}
#save-favorite[aria-pressed=true]{color:var(--accent)}
#save-favorite[aria-pressed=true] svg path{fill:currentColor}
.favorites{border-top:1px solid var(--border);flex-shrink:0}
.favorites>summary{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:8px 0;font-size:10px;color:#6c7d71}
.favorites>summary:after{display:none!important}
#favorites-count{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
#favorites-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 0 12px;max-height:360px;overflow:auto}
.favorite-card{min-width:0;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.favorite-card.is-current{border-color:#91a99a}
.favorite-open{display:block;width:100%;min-height:0;padding:0;border:0;border-radius:0;background:#e9efe8;aspect-ratio:1;overflow:hidden}
.favorite-open img{display:block;width:100%;height:100%;object-fit:contain}
.favorite-open:hover{background:#dfe8dd}
.favorite-caption{display:flex;align-items:center;gap:0;padding:3px 2px 3px 5px}
.favorite-caption input{width:100%;min-width:0;border:0;background:transparent;padding:4px 0;font-size:10px;outline-offset:0}
.favorite-remove{flex-shrink:0;min-width:24px;width:24px;min-height:26px;height:26px;padding:5px;color:#839087}
.favorite-remove svg{width:13px;height:13px}
.favorite-remove:hover{color:#995332;background:#fbf0eb}
.favorites-empty{grid-column:1/-1;font-size:10px;color:var(--muted);margin:5px 0}
.favorite-feedback{font-size:10px;color:var(--accent);line-height:1.5}
.favorite-feedback:empty{display:none}
.favorite-feedback:not(:empty){padding:0 0 8px}
@media(min-width:751px){.preview-heading #save-favorite{width:32px;min-width:32px;height:32px;min-height:32px}.favorites>summary{font-size:12px}.favorite-caption input{font-size:11px}.favorites-empty{font-size:11px}}
@media(max-width:750px) and (min-width:601px){#favorites-list{grid-template-columns:1fr}}
@media(pointer:coarse){.preview-heading #save-favorite{height:36px;min-height:36px;min-width:36px}.favorite-remove{width:32px;min-width:32px;height:32px;min-height:32px}.favorite-caption input{min-height:32px}}
.overflow .learn-geometry{color:inherit;text-decoration:none}