@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('assets/plus-jakarta-sans.woff2') format('woff2')}
:root{--ink:#000000;--muted:#5B6470;--line:#E3E6EB;--paper:#F5F6F8;--lime:#C8F53C;--tomato:#FF5A36;--pink:#FF7AB8;--blue:#4C8DFF;--mint:#34D8A6;--sun:#FFD23F;--font:'Plus Jakarta Sans',system-ui,sans-serif;--small:14px;--body:16px;--heading:20px}
*{box-sizing:border-box}
html{height:100%;margin:0;background:white}
body{height:100%;margin:0;background:white}
body{font:500 var(--body)/1.5 var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit}
input{font:inherit;color:inherit}
select{font:inherit;color:inherit}
summary{font:inherit;color:inherit}
button{cursor:pointer}
summary{cursor:pointer}
button{transition:none;animation:none}
summary{transition:none;animation:none}
button:disabled{opacity:.4;cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #B8BFC5;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.app{height:100%;min-height:640px;display:grid;grid-template-columns:76px minmax(0,1fr) 320px;grid-template-rows:76px minmax(0,1fr) 148px;gap:12px;padding:0 20px 16px}
.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--lime);display:grid;place-items:center}
.brand-mark img{width:27px;height:27px}
.brand h1{margin:0;display:flex;align-items:center;gap:12px;font-size:var(--body);font-weight:600}
.brand h1 img{width:72px;height:26px}
.brand h1 span{padding-left:12px;border-left:1px solid var(--line)}
.top-actions{display:flex;align-items:center;gap:8px}
.history{display:flex;align-items:center;gap:8px}
.draft-status{font-size:var(--small);color:var(--muted);white-space:nowrap}
.draft-status.failed{color:#7A1A08}
.btn{white-space:nowrap}
.icon-btn{width:36px}
.help-btn{width:36px}
.history{gap:0}
.menu{position:relative}
.menu summary{display:flex;align-items:center;gap:12px;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu-body{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:270px;padding:8px;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px #15202B15}
.menu-body button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.menu-body small{font-size:var(--small);color:var(--muted)}
.menu-body p{padding:8px 10px}
.rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px;overflow-y:auto;scrollbar-width:thin}
.tool{--tool-colour:var(--lime);width:64px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool[data-tool=move]{--tool-colour:var(--blue)}
.tool[data-tool=circle]{--tool-colour:var(--pink)}
.tool[data-tool=line]{--tool-colour:var(--sun)}
.tool[data-tool=fill]{--tool-colour:var(--mint)}
.tool[data-tool=corner]{--tool-colour:var(--tomato)}
.stagewrap{min-width:0;min-height:0;display:grid;grid-template-rows:44px minmax(0,1fr) 44px;background:white}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.stage-meta{font-size:var(--body);font-weight:600}
.live-dot{display:none}
kbd{font-family:var(--font);font-size:var(--small);padding:0 4px;margin-left:5px;color:var(--muted)}
.artboard{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:white}
#stage{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;border:1px solid var(--line);border-radius:8px;touch-action:none;user-select:none;flex:none}
#stage[data-tool=circle]{cursor:crosshair}
#stage[data-tool=line]{cursor:crosshair}
#stage[data-tool=diamond]{cursor:crosshair}
#stage[data-tool=fill]{cursor:crosshair}
#stage[data-tool=corner]{cursor:crosshair}
.stage-bottom .hint{color:var(--muted);font-size:var(--small)}
#cursorReadout{color:var(--muted);font-size:var(--small);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;pointer-events:none}
.empty-state strong{font-size:var(--heading);font-weight:600}
.empty-state span{font-size:var(--small);color:var(--muted)}
.panel{min-width:0;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 12px 16px 8px}
.panel-heading{margin:10px 0 24px}
.panel-heading h2{margin:0;font-size:var(--heading);font-weight:700}
.group{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;min-width:0}
.group h2{margin:0;font-size:var(--body);font-weight:700;line-height:1.5}
.fold>summary{margin:0;font-size:var(--body);font-weight:700;line-height:1.5}
.helper{margin:0;color:var(--muted);font-size:var(--small);font-weight:400;line-height:1.6}
.orientation-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:var(--body)}
.degree-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:white;padding-right:10px;font-size:var(--body);font-variant-numeric:tabular-nums}
.degree-field input{width:66px;height:42px;padding:0 5px 0 10px;text-align:right;border:0;background:transparent;font-size:var(--body);font-weight:500}
.degree-field span{color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.check{display:flex;align-items:center;gap:9px;min-height:32px;font-size:var(--body);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--ink);margin:0}
.check .helper{margin-left:auto}
.row{display:grid;grid-template-columns:50px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:var(--body)}
.number{width:54px;height:40px;border:1px solid var(--line);border-radius:9px;background:white;text-align:center;font-size:var(--body);font-weight:500;font-variant-numeric:tabular-nums}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--ink);cursor:pointer}
select{min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:white;font-size:var(--body)}
.text-btn{text-align:left;width:fit-content;text-underline-offset:3px}
.fold{display:block}
.fold>summary{display:flex;justify-content:space-between;list-style:none;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold[open]>summary{margin-bottom:14px}
.fold>.row{margin-bottom:10px}
.fold>.check{margin-bottom:10px}
.fold>.orientation-row{margin-bottom:10px}
.fold .group{margin:12px 0 0}
#guideBox{border:1px solid var(--line);padding:14px;border-radius:12px}
#diamondBox{display:flex;flex-direction:column;gap:8px}
#colourField{width:100%;height:120px;border-radius:12px;display:block;cursor:crosshair;touch-action:none}
.hue-label{display:block}
input#hue{appearance:none;-webkit-appearance:none;height:15px;border-radius:12px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:3px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #15202B88}
#hue::-moz-range-thumb{width:15px;height:15px;border:3px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #15202B88}
.custom-colour{display:flex;align-items:center;gap:8px}
.custom-colour input[type=color]{width:32px;height:32px;border:0;padding:0;background:white;cursor:pointer;flex:none}
.custom-colour input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.custom-colour input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
#colourHex{width:94px;min-width:0;flex:1;height:40px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font-size:var(--small);font-weight:500}
.sizes{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 10px;background:white;border:1px solid var(--line);border-radius:12px}
.size-sample{display:flex;flex-direction:column;align-items:center;gap:10px}
.size-sample span{font-size:var(--small);color:var(--muted)}
.sizes svg{display:block;overflow:hidden;border:1px solid #E3E6EB}
#copybox{width:100%;height:100px;padding:10px;border:1px solid var(--line);border-radius:9px;font:12px monospace}
.library{grid-column:1/-1;min-width:0;display:grid;grid-template-rows:44px minmax(0,1fr);gap:8px}
.library-top{display:flex;align-items:center;gap:12px;min-width:0}
.library-title{display:flex;align-items:center;gap:12px;min-width:0}
.library-actions{display:flex;align-items:center;gap:12px;min-width:0}
.library-top{justify-content:space-between}
.library-title h2{margin:0;font-size:var(--body);font-weight:700}
.library-tabs{display:flex;gap:2px}
.library-actions{gap:8px}
#versionName{width:140px;min-width:0;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:white;font-size:var(--small)}
#versionName::placeholder{color:var(--muted)}
.strip{display:flex;gap:10px;min-width:0;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:thin}
.card{flex:none;width:98px;height:94px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;font-size:var(--small);font-weight:500}
.card svg{width:62px;height:62px;display:block;overflow:hidden}
.card span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-empty{margin:auto;color:var(--muted);font-size:var(--body)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;padding:12px 18px;max-width:calc(100vw - 32px);background:var(--lime);color:var(--ink);border:1px solid var(--ink);border-radius:12px;font-size:var(--body);text-align:center;pointer-events:none}
dialog{width:calc(100% - 32px);max-width:560px;padding:26px;border:1px solid var(--line);border-radius:18px;background:white;color:var(--ink);box-shadow:0 16px 45px #15202B22}
dialog::backdrop{background:#15202B55}
.dialog-heading{display:flex;justify-content:space-between;gap:20px}
.dialog-heading h2{margin:0;font-size:var(--heading);font-weight:700}
.quick-start{list-style:decimal;padding-left:22px;display:grid;gap:18px;margin:24px 0}
.quick-start li{padding-left:6px}
.quick-start strong{display:block;font-size:var(--body);font-weight:600}
.quick-start span{font-size:var(--body);color:var(--muted)}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:18px 0;border-block:1px solid var(--line);margin-bottom:18px}
.shortcut-grid>span{display:flex;justify-content:space-between;gap:8px;font-size:var(--small)}
.export-short{display:none}

@media(max-width:1200px){.draft-status{display:none}
.app{grid-template-columns:70px minmax(0,1fr) 300px;padding-inline:14px}
.brand h1{gap:8px}
.brand h1 span{padding-left:8px;font-size:var(--small)}
.top-actions{gap:6px}
.library-top{gap:10px}
.library-title{gap:6px}
.library-actions{gap:6px}
#versionName{width:120px}
#cursorReadout{display:none}}

@media(max-width:980px){html{height:auto}
body{height:auto}
.app{height:auto;min-height:100vh;grid-template-columns:70px minmax(0,1fr);grid-template-rows:auto 500px auto auto;padding:14px 14px 20px;gap:12px}
.top{min-height:48px;flex-wrap:wrap}
.stagewrap{grid-column:2;grid-row:2}
.panel{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;overflow:visible;padding:10px}
.panel-heading{grid-column:1/-1}
.group{align-self:start}
.library{grid-row:3;grid-template-rows:auto 105px;margin:8px 0}
.library-top{flex-wrap:wrap;gap:12px}
.library-actions{margin-left:auto}}

@media(max-width:620px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;padding:14px 12px 20px;gap:12px}
.top{gap:14px}
.brand{width:100%}
.brand h1 span{font-size:var(--body)}
.top-actions{width:100%;flex-wrap:wrap}
.history{margin-right:auto}
.export-long{display:none}
.export-short{display:inline}
.rail{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:2px 0;overflow:visible}
.tool{width:100%}
.tool svg{width:22px;height:22px}
.stagewrap{grid-column:1;grid-row:3;grid-template-rows:40px auto 48px}
.artboard{width:100%;aspect-ratio:1}
.stage-top{padding-inline:8px}
.stage-bottom{padding-inline:8px}
.stage-meta{font-size:var(--body)}
.stage-bottom .hint{font-size:var(--small)}
.panel{grid-column:1;grid-row:5;display:flex;flex-direction:column;align-items:stretch;padding:8px}
.panel-heading{width:100%;margin:8px 0 24px}
.group{width:100%}
.library{grid-column:1;grid-row:4;grid-template-rows:auto 105px}
.library-title{width:100%;justify-content:space-between}
.library-actions{width:100%;margin:0;gap:6px}
#versionName{flex:1;width:60px}
.custom-colour input[type=color]{width:36px;height:36px}
.degree-field input{height:42px}}
.rail{padding:4px 0}

/* The artwork gets the space; its tools stay outside the square. */
@media(min-width:981px){.app{grid-template-rows:64px minmax(0,1fr) 136px}
.library{grid-template-rows:36px minmax(0,1fr)}}
.stagewrap{grid-template-rows:minmax(0,1fr) 40px}
.stage-bottom .hint{flex:1}
.preview-btn{flex:none}
.card{height:86px}
.card svg{width:54px;height:54px}

@media(max-width:620px){.stagewrap{grid-template-rows:auto 48px}}
.empty-state{justify-content:flex-start;padding-top:24px}
.phosphor-icon{width:20px;height:20px;fill:currentColor;stroke:none;flex:none;vertical-align:middle}
.tool .phosphor-icon{width:25px;height:25px;fill:currentColor;stroke:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.icon-btn .phosphor-icon{width:23px;height:23px}
.help-btn .phosphor-icon{width:23px;height:23px}
.menu summary>.phosphor-icon{width:18px;height:18px}
.fold>summary>.phosphor-icon{width:18px;height:18px}
.preview-btn kbd{margin-left:0}
.canvas-actions{display:flex;align-items:center;gap:8px;flex:none}
.app{grid-template-columns:88px minmax(0,1fr) 340px;grid-template-rows:76px minmax(0,1fr) 154px;min-height:700px}
.tool{width:72px}
.stagewrap{grid-template-rows:minmax(0,1fr) 56px}
.row{grid-template-columns:66px minmax(0,1fr) 60px}
.number{width:60px;height:44px}
.degree-field input{height:44px;width:72px}
.check{min-height:36px}
.card{width:112px;height:100px}
.card svg{width:62px;height:62px}
.library{grid-template-rows:42px minmax(0,1fr)}
.stage-bottom{padding-inline:8px}
.stage-bottom .hint{min-width:0}

@media(max-width:1200px){.app{grid-template-columns:82px minmax(0,1fr) 320px}
.brand h1 span{font-size:14px}}

@media(max-width:980px){.app{grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto 540px auto auto;height:auto}
.panel{grid-row:3}
.library{grid-row:4;grid-template-rows:auto 112px}
.library-top{row-gap:12px}
.library-actions{margin-left:auto}

}

@media(max-width:620px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;min-height:100vh}
.rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tool{width:100%;flex-direction:row;gap:7px}
.tool .phosphor-icon{width:23px;height:23px}
.stagewrap{grid-template-rows:auto auto}
.stage-bottom{min-height:60px;flex-wrap:wrap;padding:8px 0;gap:8px}
.stage-bottom .hint{flex-basis:100%}
.canvas-actions{width:100%;justify-content:flex-end}
.preview-btn kbd{display:none}
.panel{grid-column:1;grid-row:4;display:flex;flex-direction:column}
.library{grid-column:1;grid-row:5;grid-template-rows:auto 112px}
.brand h1 span{font-size:16px}
.sizes{gap:8px}
.size-sample span{font-size:14px}

}
.finish-controls{min-width:0}
.panel>#guideBox{grid-column:1/-1}
#copybox{font-size:14px}
#stage:focus{outline:none;box-shadow:none;border-color:var(--line)}
#stage:focus-visible{outline:none;box-shadow:none;border-color:var(--line)}
#outlineWeightBox{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.weight-inputs{display:grid;grid-template-columns:minmax(0,1fr) 60px;gap:10px;align-items:center}
.library-actions{flex-wrap:wrap}
.library-top{flex-wrap:wrap}
.version-buttons{display:flex;align-items:center;gap:8px;flex:none;max-width:100%}

@media(max-width:620px){.library-actions #versionName{min-width:120px}
.version-buttons{margin-left:auto}}


/* One action-button system. Gallery cards remain content previews. */
:root{--button-height:48px;--button-radius:12px;--button-border:#D7DBDF;--button-fill:#FFFFFF;--selected-icon:#476000}
button:not(.card),.menu>summary,.fold>summary{
 min-height:var(--button-height);height:var(--button-height);padding:0 14px;
 border:1px solid var(--button-border);border-radius:var(--button-radius);
 background:var(--button-fill);color:var(--ink);box-shadow:none;
 font-family:var(--font);font-size:16px;font-weight:600;line-height:1.25;
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 transition:none;animation:none;transform:none;
}
button:not(.card):hover,.menu>summary:hover,.fold>summary:hover{border-color:var(--button-border);background:var(--button-fill);box-shadow:none;transform:none}
button:not(.card)[aria-pressed=true]{border:1px solid var(--button-border);background:var(--lime)}
button[aria-pressed=true]>.phosphor-icon{color:var(--selected-icon)}
button:focus-visible,summary:focus-visible{outline:2px solid #B8BFC5;outline-offset:3px}
button:disabled{opacity:.4}
.icon-btn,.help-btn{width:48px;min-width:48px;padding:0!important}
.tool{width:72px;height:68px!important;min-height:68px!important;padding:7px 0!important;flex-direction:column;font-size:14px!important;gap:5px!important}
.seg button,.library-tabs button{padding:0 6px}
.seg button[aria-pressed=true]{color:var(--ink);font-weight:700}
.library-tabs button,.library-tabs button:hover,.library-tabs button[aria-pressed=true]{background:white;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--ink);text-decoration:none;font-weight:600;padding-inline:8px}
.library-tabs button[aria-pressed=true]{border-bottom-color:var(--ink)}
.menu-body button{width:100%;justify-content:space-between}
.fold>summary{display:flex;justify-content:space-between;list-style:none}
.delete-version,.delete-version:hover{background:#D92D20!important;color:white!important;border:1px solid var(--button-border)!important}
.canvas-actions{display:grid;grid-template-columns:repeat(3,minmax(0,120px));gap:8px;max-width:100%;width:376px}
.canvas-actions>.btn{width:100%;height:48px;min-height:48px;padding:0 10px}
.canvas-actions .phosphor-icon{width:20px;height:20px}
.preview-btn kbd{display:none}.button-icon{display:inline-flex}
.stage-bottom{justify-content:flex-end;min-height:64px;padding:8px 0}
.stagewrap{grid-template-rows:minmax(0,1fr) 64px}
.brand h1{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-1.3px;white-space:nowrap;display:block;margin:0}
.brand{display:block}.top{min-height:80px}.top-actions{gap:8px;margin-left:auto;justify-content:flex-end}.history{gap:8px}
.app{grid-template-rows:88px minmax(0,1fr) 160px}
.card{background:white;border:1px solid var(--button-border);border-radius:12px;box-shadow:none;position:relative}
.card:hover,.card[aria-pressed=true]{background:white;border:1px solid var(--button-border);box-shadow:none}
.card .version-status{display:none;position:absolute;right:4px;top:4px;width:18px;height:18px;overflow:visible}
.card[aria-pressed=true] .version-status{display:block;color:var(--selected-icon)}
.card .version-status svg{width:18px;height:18px}
@media(max-width:1200px){.top{flex-wrap:wrap;row-gap:12px}.app{grid-template-rows:auto minmax(0,1fr) 160px}.brand h1{font-size:34px}.top-actions{flex-wrap:wrap}.brand{padding-block:14px}}
@media(max-width:980px){.app{grid-template-rows:auto 540px auto auto}.panel{grid-row:3}.library{grid-row:4}.brand h1{font-size:34px}.tool{width:72px}}
@media(max-width:620px){
 .app{grid-template-rows:auto auto auto auto auto}.brand h1{font-size:32px;letter-spacing:-1px}.brand{padding-block:0}
 .top-actions{width:100%;gap:8px}.history{margin-right:0}.top-actions .icon-btn,.top-actions .help-btn{width:44px;min-width:44px}
 .tool{width:100%;height:48px!important;min-height:48px!important;flex-direction:row;padding:0 6px!important;gap:6px!important}
 .stagewrap{grid-template-rows:auto 64px}.stage-bottom{min-height:64px;flex-wrap:nowrap}.canvas-actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .canvas-actions>.btn{font-size:14px;padding:0 6px}.canvas-actions .phosphor-icon{width:18px;height:18px}
 .panel{grid-row:4}.library{grid-row:5}
 .version-buttons .btn{font-size:14px;padding:0 10px}
}

/* Mode and output controls use the existing quiet button system. */
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stage-bottom{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:10px;padding:8px 16px}
.canvas-actions{align-self:flex-end;flex-shrink:0}
.canvas-rotation{display:flex;align-items:center;gap:12px;min-width:0;margin:0}
.canvas-rotation>label{font-size:16px;flex:none}
.canvas-rotation>input[type=range]{min-width:40px;flex:1}
.canvas-rotation .degree-field{flex:none}
.stagewrap{grid-template-rows:minmax(0,1fr) 124px}
@media(max-width:980px){.app{grid-template-rows:auto 600px auto auto}.mode-group{grid-column:1/-1}.mode-switch{max-width:320px}}
@media(max-width:620px){.app{grid-template-rows:auto auto auto auto auto}.stagewrap{grid-template-rows:auto 124px}.stage-bottom{padding-inline:0;flex-wrap:nowrap}.mode-switch{max-width:none}.canvas-rotation{gap:10px}}

.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.panel-heading>.check{font-weight:600;min-height:40px;flex:none}
.panel>#outlineWeightBox{grid-column:1/-1;margin:0 0 24px}

/* Export menus are one list, with no nested button cards or helper columns. */
.menu-body{width:276px;max-width:calc(100vw - 32px)}
.menu-body button{height:auto;min-height:44px;justify-content:flex-start;text-align:left;border:0;border-radius:8px;padding:12px;white-space:normal;line-height:1.4;gap:0}
.menu-body button:hover{border:0;background:#F5F6F8}
/* The disclosure header and controls belong to a single section. */
.fold{border:1px dashed var(--button-border);border-radius:14px;padding:0 14px 14px}
.fold:not([open]){padding-bottom:0}
.fold>summary,.fold>summary:hover{border:0;border-radius:0;padding:0;background:white;min-height:48px;height:auto}
.fold[open]>summary{margin-bottom:12px}
.fold>.check:last-child,.fold>.row:last-child{margin-bottom:0}
.canvas-style input[type=color]{width:56px;height:40px;border:1px solid var(--button-border);border-radius:10px;background:white;padding:4px;cursor:pointer}
.canvas-style select{max-width:180px;min-width:0}
#stage[data-preview-shape=rounded]{border-radius:22%}
.size-sample svg{border:1px solid var(--line);background:var(--ground,white)}

.background-field{display:flex;align-items:center;gap:8px;min-width:0}.background-field #canvasColour{width:40px;flex:none}.background-field #canvasHex{width:96px;min-width:0;height:40px;font-size:14px;padding:0 8px;border:1px solid var(--button-border);border-radius:10px;background:white}

#guideSelect{width:100%;max-width:100%}
#guideControls{display:flex;flex-direction:column;gap:12px}
#stage[data-tool=move]{cursor:default}
[data-guide-handle=move]{cursor:move}
[data-guide-handle=rotate]{cursor:grab}
[data-guide-handle=size]{cursor:nwse-resize}

/* Product name and a quiet, readable descriptor. */
.brand{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:14px;row-gap:4px;max-width:100%}
.brand-description{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--muted);white-space:nowrap}
[data-guide-handle] .phosphor-icon{width:16px;height:16px}
@media(max-width:620px){.brand{column-gap:10px}.brand-description{font-size:15px}}

#stage[data-tool=move][data-hover-guide=true]{cursor:move}

/* One rendering switch beside the canvas actions, with a full-height hit target. */
.canvas-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.canvas-toolbar .canvas-actions{flex:0 1 376px;min-width:0;align-self:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.canvas-toolbar .canvas-actions>.btn{padding-inline:8px;gap:6px}
button.render-switch{flex:none;height:48px;min-height:48px;min-width:132px;padding:0;border:0;border-radius:8px;background:white;color:var(--muted);gap:7px;font-size:16px;font-weight:500;white-space:nowrap}
.render-switch .switch-track{position:relative;display:block;width:36px;height:22px;flex:none;border:1px solid var(--button-border);border-radius:12px;background:#E3E6EB}
.render-switch .switch-thumb{position:absolute;width:16px;height:16px;top:2px;left:2px;border-radius:50%;background:white;border:1px solid #D7DBDF}
.render-switch[aria-checked=true] .switch-track{background:var(--lime)}
.render-switch[aria-checked=true] .switch-thumb{left:16px}
.render-switch[aria-checked=false] .render-fill,.render-switch[aria-checked=true] .render-outline{color:var(--ink);font-weight:600}
@media(min-width:621px) and (max-width:700px){.canvas-toolbar .canvas-actions>.btn{font-size:15px}}
@media(max-width:620px){
 .canvas-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .canvas-toolbar .canvas-actions{display:contents}
 .canvas-toolbar>.render-switch{width:100%;justify-content:center}
 .canvas-toolbar .canvas-actions>.btn{width:100%;height:48px;min-height:48px}
 .stagewrap{grid-template-rows:auto 180px}
}

.stage-bottom{min-width:0}

.menu-caption{font-size:12px;font-weight:600;color:var(--muted);padding:6px 12px 2px;letter-spacing:.04em}
.menu-section+.menu-section{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.toast{border:0;outline:none}
.flip-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.flip-actions>.btn{width:100%;padding-inline:8px;gap:6px}
.check input{appearance:none;-webkit-appearance:none;position:relative;width:18px;height:18px;flex:none;border:1px solid var(--button-border);border-radius:4px;background:white;cursor:pointer}
.check input:checked{background:#000000;border-color:var(--button-border)}
.check input:checked::after{content:"";position:absolute;inset:1px;background:white;mask:url('assets/phosphor/check.svg') center/contain no-repeat;-webkit-mask:url('assets/phosphor/check.svg') center/contain no-repeat}
.render-switch .switch-track,.render-switch[aria-checked=true] .switch-track{background:var(--lime);border-color:var(--lime)}
.render-switch .switch-thumb{background:#FFFFFF;border:0}
.export-reminder{margin:0;text-align:center;font-size:14px;line-height:20px;font-weight:400;color:#8C9197}
.stage-bottom{gap:8px}
.stagewrap{grid-template-rows:minmax(0,1fr) 156px}
#stage,#stage:focus,#stage:focus-visible{border:0;border-radius:0;overflow:visible;background:transparent}
.sizes svg,.size-sample svg{border:0;background:transparent;overflow:visible}
@media(max-width:620px){.stagewrap{grid-template-rows:auto 212px}}

/* Transformations share one row. */
.flip-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.flip-actions>.btn,.mirror-button{height:48px;min-height:48px;font-size:14px;padding-inline:5px;gap:5px;white-space:nowrap}
.mirror-button{display:flex;align-items:center;justify-content:center;border:1px solid var(--button-border);border-radius:12px;cursor:pointer;margin:0}
.mirror-button:has(input:checked){background:var(--lime)}
.flip-actions .phosphor-icon{width:20px;height:20px;flex:none}
.reference-section{gap:10px}.reference-name{font-size:14px;color:var(--muted);margin:10px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-opacity{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;align-items:center;gap:10px}
.reference-opacity input{width:100%;min-width:0;accent-color:black}.reference-opacity output{font-size:14px;text-align:right}
#removeReference{margin-top:8px;width:100%}
#versionSearch{width:170px;min-width:100px;height:44px;padding:0 12px;border:1px solid var(--button-border);border-radius:12px;background:white;font-size:14px}
#renameDialog{width:360px;max-width:calc(100vw - 32px);padding:24px;border:1px solid var(--line);border-radius:20px;color:var(--ink);font:inherit}
#renameDialog::backdrop{background:#0003}#renameDialog h2{font-size:20px;margin:0 0 20px}#renameDialog label{display:block;margin-bottom:8px}
#renameInput{width:100%;height:48px;border:1px solid var(--button-border);border-radius:12px;padding:0 12px}
.rename-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.card>span:first-of-type{cursor:text}
@media(max-width:980px){.library{min-height:190px}.library-actions{flex-wrap:wrap}#versionSearch{flex:1}}

/* Selected controls must not resize the workspace or introduce horizontal overflow. */
html{scrollbar-gutter:stable}
.app{width:100%;max-width:100%}.library{min-width:0}
.panel{overflow-x:hidden;scrollbar-gutter:stable}
.panel>.group,#guideControls,#guideSelect{min-width:0;max-width:100%}
#guideControls button{width:100%;max-width:100%;white-space:normal;height:auto;min-height:48px;padding:10px}
.library-actions{flex-wrap:wrap;justify-content:flex-end}
@media(min-width:981px){.panel{width:100%;max-width:100%;contain:inline-size}}

/* Reminder shares the canvas actions row. */
.canvas-toolbar{flex-wrap:nowrap;gap:12px}
.canvas-toolbar .export-reminder{flex:1;min-width:0;text-align:left;font-size:14px;line-height:20px}
.stagewrap{grid-template-rows:minmax(0,1fr) 132px}
.flip-actions>.mirror-button{padding-inline:5px;font-size:14px;gap:4px}
.strip .card{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.strip.reordering{touch-action:none;cursor:grabbing}
.strip.reordering .card{cursor:grabbing}
.strip .reordering-card{outline:2px solid #9DBF30;outline-offset:-2px;background:#F5F6F8}
@media(max-width:1200px){
.canvas-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.canvas-toolbar .export-reminder{grid-column:1/3;grid-row:2}
.canvas-toolbar>.render-switch{grid-column:1;grid-row:1;min-width:0;width:100%;font-size:14px;gap:4px}
.canvas-toolbar .canvas-actions{display:contents}
.canvas-toolbar #clear{grid-column:2;grid-row:1}
.canvas-toolbar #shuffle{grid-column:3;grid-row:1}
.canvas-toolbar #preview{grid-column:3;grid-row:2}
.stagewrap{grid-template-rows:minmax(0,1fr) 172px}
}
@media(max-width:620px){.stagewrap{grid-template-rows:auto 212px}.canvas-toolbar .canvas-actions>.btn{font-size:14px;gap:4px;padding-inline:4px}.canvas-toolbar .phosphor-icon{width:18px;height:18px}}

.brand-symbol{width:40px;height:40px;object-fit:contain;flex:none;align-self:center}
@media(max-width:620px){.brand-symbol{width:34px;height:34px}}

/* Alignment is a single choice; the four artwork actions stay together. */
.brand-lockup{display:flex;align-items:center;gap:6px;flex:none}
.stagewrap{grid-template-rows:minmax(0,1fr) auto}
.stage-bottom{container-type:inline-size;padding:10px 16px;gap:12px}
.canvas-rotation{flex-wrap:nowrap;gap:12px}
.alignment-actions{display:flex;align-items:stretch;gap:2px;padding:4px;background:#F3F4F5;border:1px solid var(--line);border-radius:14px;flex:0 0 auto;width:auto}
.alignment-actions>button{appearance:none;border:0;border-radius:10px;background:transparent;color:#62676D;font:600 14px/20px "Plus Jakarta Sans",sans-serif;padding:9px 12px;height:38px;min-height:38px;white-space:nowrap;cursor:pointer;transition:none;animation:none}
.alignment-actions>button[aria-checked=true]{background:var(--lime);color:#000}
.alignment-actions>button:disabled{opacity:.45;cursor:default}
.alignment-actions>button:focus-visible{outline:2px solid #9DA3A8;outline-offset:1px}
.canvas-toolbar{display:flex;flex-wrap:nowrap;gap:12px;align-items:center}
.canvas-toolbar .export-reminder{margin:0;flex:1 1 240px;min-width:0}
.canvas-toolbar>.render-switch{flex:none;grid-column:auto;grid-row:auto;width:auto}
.canvas-toolbar .canvas-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:0 0 648px;width:648px;min-width:0;align-self:auto}
.canvas-toolbar .canvas-actions>.btn{grid-column:auto!important;grid-row:auto!important;width:100%;height:48px;min-height:48px;padding-inline:8px;gap:6px;white-space:nowrap;font-size:16px;line-height:20px}
.canvas-toolbar .canvas-actions>.btn .phosphor-icon{flex:none;width:20px;height:20px}
@container(max-width:1020px){
 .canvas-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .canvas-toolbar .export-reminder{grid-column:1;grid-row:1;font-size:13px;line-height:18px}
 .canvas-toolbar>.render-switch{grid-column:2;grid-row:1;font-size:14px;gap:5px;justify-self:end}
 .canvas-toolbar .canvas-actions{grid-column:1/-1;grid-row:2;width:100%;display:grid}
}
@container(max-width:640px){
 .canvas-rotation{flex-wrap:wrap;gap:10px}
 .alignment-actions{margin-left:auto}
 .canvas-rotation>.alignment-actions{flex-basis:auto}
 .canvas-rotation>input[type=range]{flex-basis:40%;min-width:40px}
 .canvas-toolbar .canvas-actions>.btn{font-size:14px;padding-inline:4px;gap:4px}
}
@container(max-width:560px){
 .canvas-toolbar .canvas-actions{gap:6px}
 .canvas-toolbar .canvas-actions>.btn{flex-direction:column;gap:2px;height:64px;min-height:64px;font-size:13px;line-height:16px;padding-inline:2px;white-space:normal}
}
@container(max-width:420px){
 .alignment-actions{width:100%;justify-content:stretch}
 .alignment-actions>button{flex:1;padding-inline:6px;font-size:13px}
}
@media(max-width:620px){.stagewrap{grid-template-rows:auto auto}.stage-bottom{padding-inline:0}}

/* Recovery is distinct from cleaning; hover never changes control geometry. */
.clear-lines [data-line-action=recover]{display:none}
.clear-lines[aria-pressed=true] [data-line-action=clear]{display:none}
.clear-lines[aria-pressed=true] [data-line-action=recover]{display:block}
.canvas-rotation .degree-field{padding-right:7px}
.canvas-rotation #artworkAngle{width:54px;padding-left:5px;padding-right:3px}

/* Fill and Outline share the alignment control's segmented style. */
.canvas-toolbar>.render-mode{flex:none;width:auto;min-width:0;flex-basis:auto;margin:0;justify-self:end;justify-content:initial}
.canvas-toolbar>.render-mode>button{font-size:14px;padding-inline:12px;flex:none}
@container(max-width:1020px){.canvas-toolbar>.render-mode{grid-column:2;grid-row:1}}

.canvas-rotation>.render-mode{flex:none;width:auto;flex-basis:auto;margin:0;justify-content:initial}
.canvas-rotation>.render-mode>button{flex:none;padding-inline:12px}