.designer-page{background:#141614;color:#f4f4eb;--designer-vh:100dvh;--designer-top:0px}
.designer-page [hidden]{display:none!important}
.designer-header{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:1600px;margin:auto;padding:23px 40px;border-bottom:1px solid #ffffff18}
.designer-header .brand>span{font-size:20px;font-weight:600;letter-spacing:-.5px;line-height:1.05}
.designer-header .brand small{font-size:7px;letter-spacing:1.7px;margin-top:8px;color:#b8bdaa}
.designer-back{display:flex;align-items:center;gap:14px;font-size:12px;color:#d4d7c9;min-height:44px}
.designer-back>span{color:#f6a17b;font-size:22px}
.designer-main{max-width:1520px;margin:auto;padding:34px 40px 55px}
.designer-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:27px}
.designer-eyebrow{display:flex;align-items:center;gap:9px;color:#f5a17b;font-size:9px;font-weight:600;letter-spacing:1.5px;line-height:1.7;margin-bottom:15px}
.designer-eyebrow>span{width:6px;height:6px;background:#f6a17b;border-radius:50%}
.designer-intro h1{font-size:clamp(34px,4.2vw,57px);font-weight:500;line-height:1.05;letter-spacing:-2px}
.designer-intro h1 br{display:none}
.designer-intro h1 em{font-style:normal;color:#f4a17b}
.designer-intro>p{font-size:12px;line-height:1.85;max-width:350px;color:#b9c0ae}
.designer-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;align-items:start}
.designer-viewer{position:sticky;top:15px;min-width:0;border:1px solid #4e5a43;border-radius:13px;overflow:hidden;background:#22251e;box-shadow:0 15px 60px #0002}
.designer-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ffffff1a;padding:17px 20px;font-size:9px;letter-spacing:1.7px;color:#bbc4ad}
.designer-viewer-top strong{font-weight:500;font-size:11px;letter-spacing:.2px;color:#f1f2e7}
.designer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:5px 16px}
.designer-orbit{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;min-height:42px;cursor:pointer}
.designer-orbit input{width:19px;height:19px;accent-color:#f3a17a;margin:0;cursor:pointer}
.designer-view-tools{display:flex;gap:5px}
.designer-view-tools button,.designer-history button{border:1px solid #59644e;border-radius:5px;color:#f2f4e6;background:#2d3527;min-height:40px;padding:8px 12px;font:12px Arial,sans-serif}
.designer-view-tools button:not([data-fold-view=reset]){font-size:20px;min-width:38px;padding-block:4px}
.designer-page button:disabled{opacity:.4;cursor:default}
.designer-page button:not(:disabled):hover{border-color:#f2aa83}
#designer-drawing{height:clamp(300px,42vw,580px);touch-action:auto;user-select:none;-webkit-user-select:none;overflow:hidden;min-width:0}
#designer-drawing>svg{width:100%;height:100%;display:block}
#designer-drawing[data-orbit-active=true]{touch-action:none;cursor:grab}
#designer-drawing[data-orbit-active=true]:active{cursor:grabbing}
#designer-drawing:focus-visible{outline:2px solid #ffe2a6;outline-offset:-4px}
.designer-edge{cursor:pointer;outline:none}
.designer-edge:focus-visible .designer-edge-line,.designer-edge:hover .designer-edge-line{stroke:#fff3bc;stroke-width:4}
.designer-gesture-hint{font-size:10px;line-height:1.7;color:#bdc6af;padding:0 20px 16px}
.designer-viewer-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:15px;border-top:1px solid #ffffff1a;padding:12px 18px;font-size:9px;color:#d0d6c2}
.designer-viewer-bottom>span{display:flex;align-items:center;gap:7px}
.designer-line-key{display:block;width:18px;height:2px;background:#f8a178}
.designer-line-key.is-selected{height:3px;background:#fff0b5}
.designer-viewer-bottom button{margin-left:auto;min-height:40px;border:1px solid #626a55;border-radius:5px;padding:8px 11px;background:#2f3828;color:#fff;font:11px Arial,sans-serif}
.designer-viewer-bottom button>span{margin-left:10px;color:#f5ac84}
.designer-controls{min-width:0}
.designer-add-panel,.designer-section{border:1px solid #404d36;border-radius:10px;background:#20261c;padding:23px;min-width:0}
.designer-add-panel{border-top:2px solid #ec9d75}
.designer-step,.designer-section-title>span,.designer-section summary>span{font-size:8px;letter-spacing:1.5px;line-height:1.7;color:#efa37e;display:block;margin-bottom:8px}
.designer-add-panel h2{font-size:25px;line-height:1.2;letter-spacing:-.7px;font-weight:500}
.designer-help{font-size:11px;line-height:1.8;color:#bcc5ad;margin-top:12px;margin-bottom:18px}
.designer-field{min-width:0;margin-top:15px}
.designer-field label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#d5dcc9;margin-bottom:7px;line-height:1.5}
.designer-field label>span{color:#b2bea0;font-size:10px}
.designer-field input,.designer-field select{width:100%;min-width:0;background:#2e3827;color:#fff;border:1px solid #5b694c;border-radius:6px;font:16px/1.35 Arial,sans-serif;min-height:46px;padding:10px 11px;color-scheme:dark}
.designer-field select{font-size:12px;line-height:1.5}
.designer-field input{font-weight:600;font-variant-numeric:tabular-nums}
.designer-field input[aria-invalid=true]{border-color:#ffb795}
.designer-field-note{font-size:10px;line-height:1.8;color:#bbc7aa;margin-top:9px}
.designer-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.designer-primary{display:flex;justify-content:center;align-items:center;gap:15px;width:100%;min-height:48px;margin-top:19px;padding:12px;border:1px solid #f6aa85;border-radius:6px;background:#f4a17b;color:#241d17;font:600 13px Arial,sans-serif}
.designer-primary>span{font-size:23px;font-weight:400}
.designer-status{color:#d4e6bd;font-size:11px;line-height:1.8;margin-top:14px;overflow-wrap:anywhere}
.designer-status:empty{display:none}
.designer-status[data-kind=error]{color:#ffd3b7}
.designer-section{margin-top:15px;padding:0}
.designer-section summary,.designer-section-title{padding:20px 23px;cursor:pointer}
.designer-section summary{list-style:none;position:relative;padding-right:43px}
.designer-section summary::-webkit-details-marker{display:none}
.designer-section summary:after{content:'+';position:absolute;right:22px;top:27px;color:#f1ae89;font-size:23px}
.designer-section[open]>summary:after{content:'−'}
.designer-section summary strong,.designer-section-title h2{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.2px}
.designer-section-body{padding:0 23px 20px;border-top:1px solid #ffffff13}
.designer-section-title{cursor:default;padding-bottom:14px}
#designer-fold-list{padding-inline:17px}
.designer-fold-empty{padding:0 6px 8px;color:#b6c0a6;font-size:11px;line-height:1.9}
.designer-fold-card{background:#293222;border:1px solid #4b5a3e;border-radius:6px;margin-bottom:10px;overflow:hidden}
.designer-fold-card summary{padding:14px 42px 14px 14px;line-height:1.7;color:#dce4cd}
.designer-fold-card summary:after{right:14px;top:16px;font-size:19px}
.designer-fold-card summary strong{display:block;font-size:12px;color:#f3b08b}
.designer-fold-card summary small{font-size:10px;color:#c2cdae}
.designer-fold-card-body{padding:0 14px 14px;border-top:1px solid #ffffff14}
.designer-delete{padding:9px 0;min-height:40px;background:transparent;border:0;color:#efb59c;font:11px Arial,sans-serif;margin-top:7px;text-decoration:underline;text-underline-offset:4px}
.designer-limit{padding:0 23px 16px;margin:0}
.designer-history{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.designer-history button{font-size:11px;min-height:43px;padding:10px 12px;background:transparent}
.designer-history button>span{font-size:17px;margin-right:5px}
.designer-save-note{font-size:9px;line-height:1.8;color:#a3b093;margin-top:12px}
.designer-notice{margin-top:25px;padding:18px 22px;border:1px solid #4a4b3c;border-radius:7px;background:#25271e;color:#c9cdbb;font-size:11px;line-height:1.8}
.designer-notice strong{font-size:12px;color:#ebd1af;font-weight:500}
.designer-notice p{margin-top:5px;max-width:1000px}
.designer-page{background:radial-gradient(ellipse at 20% 0,#42473527,transparent 50%),#141614}
.designer-header{border-color:#c4baa019}
.designer-intro{gap:30px}
.designer-intro h1{font-size:clamp(33px,3.6vw,49px);letter-spacing:-1.7px;line-height:1.1}
.designer-intro>p{max-width:340px;color:#b8c1ac}
.designer-intro>p strong{color:#ede8d8;font-weight:500}
.designer-workspace{gap:22px}
.designer-viewer{border-color:#6a715a;border-radius:17px;background:radial-gradient(ellipse at 50% 45%,#404735,#22251e 75%);box-shadow:0 14px 54px #0003}
.designer-viewer-top{font-size:8px;padding:15px 19px}
.designer-viewer-top>span{display:flex;align-items:center;gap:8px}
.designer-viewer-top>span:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#b4cf97;box-shadow:0 0 10px #b4cf9730}
.designer-viewer-top strong{padding:5px 10px;border:1px solid #89916e55;border-radius:30px;background:#c1c9a309;font-size:10px}
.designer-face,.designer-face-label{cursor:pointer;outline:none}
.designer-face:focus-visible>polygon,.designer-face:hover>polygon{stroke:#ffe4b4;stroke-width:3}
.designer-face-label:hover rect{stroke:#ffe2aa;stroke-width:3}
.designer-piece-row{display:flex;align-items:center;gap:11px;border-top:1px solid #ffffff14;padding:9px 13px;min-height:55px;background:#1c221b}
.designer-piece-row>span{flex-shrink:0;color:#c5ccba;font-size:8px;letter-spacing:1px}
.designer-pieces{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;padding:3px 1px;scrollbar-width:thin;scrollbar-color:#758264 #20251d}
.designer-piece-chip{flex-shrink:0;min-height:35px;min-width:66px;border:1px solid #5a664b;border-radius:7px;padding:7px 10px;background:#2d3726;color:#e4ead9;font:11px Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.designer-piece-chip[aria-pressed=true]{border-color:#edb78e;background:#edb78e;color:#2a231b;font-weight:600}
.designer-viewer-bottom{padding-block:8px}
.designer-add-panel{overflow:hidden;background:linear-gradient(140deg,#303727,#242c20 65%);border:1px solid #70765b;border-radius:14px;box-shadow:0 8px 30px #0002}
.designer-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;margin:-23px -23px 23px;border-bottom:1px solid #b2bda025;background:#171d17}
.designer-mode-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:#c4cdb9;font:600 13px Arial,sans-serif}
.designer-mode-tabs button[aria-selected=true]{border-color:#e8b58d;background:#e8b58d;color:#2e251c;box-shadow:0 3px 10px #0002}
.designer-mode-tabs button>span{font-size:21px;font-weight:400;line-height:1}
.designer-mode-tabs svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.designer-add-panel h2{font-size:25px;letter-spacing:-.65px}
.designer-add-panel .designer-help{font-size:11px;margin-top:9px;margin-bottom:17px}
.designer-add-panel .designer-field input,.designer-add-panel .designer-field select{background:#1e271c;border-color:#657253;border-radius:8px}
.designer-angle-editor{padding:16px;border:1px solid #7b805c;border-radius:10px;background:linear-gradient(135deg,#3a422c,#2d3624);margin-top:19px}
.designer-angle-editor>label{color:#eee8d6;font-size:11px}
.designer-angle-input{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:9px;align-items:center;margin-top:11px}
.designer-angle-input>button{min-height:46px;min-width:44px;border:1px solid #818868;border-radius:8px;background:#303b27;color:#ffe4b7;font:26px/1 Arial,sans-serif}
.designer-angle-input>div{position:relative;min-width:0}
.designer-angle-input>div>span{position:absolute;right:11px;top:12px;color:#dfcbae;font-size:20px;pointer-events:none}
.designer-add-panel .designer-field #designer-edit-angle{min-height:54px;padding:8px 27px 8px 8px;font-size:27px;text-align:center;line-height:1.2;border-color:#9b9570;color:#fff4dd;font-weight:500}
.designer-add-panel .designer-field .designer-angle-slider{width:100%;min-height:32px;height:32px;padding:0;margin:12px 0 4px;border:0;border-radius:0;background:transparent;accent-color:#edb68a;cursor:ew-resize}
.designer-angle-fine{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#bfc9ad;font-size:9px}
.designer-angle-fine>div{display:flex;gap:4px}
.designer-angle-fine button{min-height:33px;min-width:45px;border:1px solid #778061;border-radius:5px;padding:6px 8px;background:transparent;color:#d9e2c8;font:11px Arial,sans-serif}
.designer-angle-fine button[aria-pressed=true]{background:#e3b68d;border-color:#e3b68d;color:#2b231a;font-weight:600}
.designer-angle-equivalent{border-top:1px solid #d1c9a428;padding-top:12px;margin-top:12px;font-size:12px;color:#f5d3a4;line-height:1.7;font-variant-numeric:tabular-nums}
.designer-live-feedback{display:flex;align-items:center;gap:8px;font-size:10px;color:#c5dcaf;margin-top:18px;line-height:1.6}
.designer-live-feedback>span{width:5px;height:5px;background:#b1d58e;border-radius:50%;flex-shrink:0}
.designer-section{border-radius:10px;background:#1c231b;border-color:#3c4a33}
.designer-section summary>span{font-size:7px;margin-bottom:6px;color:#aebd9f}
.designer-section summary strong{font-size:14px}
.designer-history button{border-radius:7px;background:#1b2219;min-height:44px}
.designer-notice{background:#1c2119;border-color:#46523b;border-radius:10px;font-size:10px}
@media(max-width:1000px){.designer-header{padding-inline:25px}.designer-main{padding:26px 25px 40px}.designer-intro{display:block}.designer-intro>p{max-width:650px;margin-top:16px}.designer-workspace{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:17px}.designer-add-panel{padding:19px}.designer-section summary,.designer-section-title{padding-inline:19px}}
@media(max-width:1000px){.designer-mode-tabs{margin:-19px -19px 20px}}
@media(max-width:760px){
 .designer-header{padding:16px 18px;gap:12px}.designer-header .brand>span{font-size:16px}.designer-header .brand-mark{width:31px;height:31px}.designer-header .brand small{font-size:6px;letter-spacing:1.1px}.designer-back{font-size:10px;gap:6px}.designer-back>span{font-size:18px}
 .designer-main{padding:23px 14px 35px}.designer-intro{padding-inline:3px;margin-bottom:19px}.designer-eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:12px}.designer-intro h1{font-size:32px;letter-spacing:-1.2px}.designer-intro h1 br{display:block}.designer-intro>p{font-size:11px;line-height:1.8;margin-top:14px}
 .designer-workspace{display:block}.designer-viewer{top:var(--designer-top);z-index:5;border-radius:10px;box-shadow:0 8px 20px #0007}.designer-viewer-top{padding:10px 14px;font-size:8px}.designer-viewer-top strong{font-size:10px}.designer-toolbar{padding:3px 12px;min-height:48px;gap:7px}.designer-orbit{font-size:11px}.designer-view-tools{gap:4px}.designer-view-tools button{padding-inline:8px;font-size:11px;min-height:38px}.designer-view-tools button:not([data-fold-view=reset]){min-width:33px}
 #designer-drawing{height:clamp(150px,calc(var(--designer-vh)*.32),300px)}.designer-gesture-hint{font-size:9px;padding:0 14px 10px;line-height:1.5}.designer-viewer-bottom{padding:5px 11px;gap:10px;font-size:8px}.designer-viewer-bottom button{min-height:33px;font-size:9px;padding:6px 8px}.designer-viewer-bottom button>span{margin-left:5px}
 .designer-controls{margin-top:16px}.designer-add-panel{padding:19px}.designer-add-panel h2{font-size:24px}.designer-field input{font-size:16px;min-height:44px}.designer-fields{gap:12px}.designer-field{scroll-margin-top:310px;scroll-margin-bottom:20px}.designer-notice{padding:16px 18px;font-size:10px}.designer-notice strong{font-size:11px}
 .designer-page.is-editing #designer-drawing{height:clamp(60px,calc(var(--designer-vh)*.25),180px)}.designer-page.is-editing .designer-viewer-top,.designer-page.is-editing .designer-gesture-hint,.designer-page.is-editing .designer-viewer-bottom{display:none}
}
@media(max-width:760px){
 .designer-header{padding-block:13px}.designer-main{padding:20px 12px 30px}.designer-intro{margin-bottom:16px}.designer-intro h1{font-size:29px;letter-spacing:-1px}.designer-intro>p{font-size:10px;line-height:1.8;margin-top:12px}.designer-eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:10px}
 .designer-workspace{gap:14px}.designer-viewer{border-radius:13px}.designer-viewer-top{padding:8px 12px}.designer-viewer-top strong{font-size:9px;padding:4px 9px}.designer-toolbar{padding:3px 11px;min-height:47px}
 .designer-piece-row{padding:6px 9px;gap:8px;min-height:49px}.designer-piece-row>span{font-size:7px}.designer-piece-chip{min-height:34px;font-size:10px;min-width:65px;padding:7px 9px}
 .designer-viewer-bottom{padding:5px 10px;font-size:7px;gap:9px}.designer-viewer-bottom button{font-size:9px;min-height:33px}
 .designer-controls{margin-top:14px}.designer-add-panel{padding:18px;border-radius:12px}.designer-mode-tabs{margin:-18px -18px 19px;padding:6px}.designer-mode-tabs button{min-height:42px;font-size:12px}.designer-step{font-size:7px;letter-spacing:1.3px}.designer-add-panel h2{font-size:23px}
 .designer-angle-editor{padding:13px;margin-top:16px}.designer-angle-input{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}.designer-angle-input>button{min-height:46px}.designer-add-panel .designer-field #designer-edit-angle{font-size:27px;min-height:52px}.designer-angle-equivalent{font-size:11px}
 .designer-field select{min-height:44px;font-size:13px}.designer-field label{font-size:10px}.designer-section summary{padding-block:16px}.designer-section summary:after{top:20px}.designer-history{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.designer-history button{font-size:10px;padding:9px 6px}.designer-history button>span{font-size:15px}
 .designer-page[data-editor-mode=edit] #designer-drawing{height:clamp(120px,calc(var(--designer-vh)*.25),220px)}
 .designer-page[data-editor-mode=edit] .designer-gesture-hint{display:none}
 .designer-page.is-editing .designer-piece-row{display:none}
 .designer-page[data-editor-mode=edit].is-editing #designer-drawing{height:clamp(65px,calc(var(--designer-vh)*.25),175px)}
}

/* A stable colour links the face, its label, its chip and its editing controls. */
.designer-piece-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-color:var(--piece-color,#7CB4F1);background:#283025;color:#eef1e6}
.designer-piece-chip:before{content:'';width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--piece-color,#7CB4F1);box-shadow:0 0 0 2px #1117}
.designer-piece-chip[aria-pressed=true]{border-color:#ffe2aa;background:#353c2c;color:#fff4df;box-shadow:inset 0 0 0 1px #ffe2aa;font-weight:600}
.designer-piece-row{padding-block:7px}
.designer-fold-card{border-left:3px solid var(--piece-color,#7CB4F1)}
.designer-fold-card summary strong{color:var(--piece-color,#cbd3bf)}
.designer-color-key{display:block;width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,#7CB4F1 0 50%,#78CEB8 50%)}
.designer-color-editor{margin-top:17px;border:1px solid #657253;border-radius:9px;background:#1d261c;overflow:hidden}
.designer-color-editor summary{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-height:49px;padding:10px 12px;list-style:none;cursor:pointer;font-size:11px;color:#edf0e4}
.designer-color-editor summary::-webkit-details-marker{display:none}
.designer-color-editor summary small{margin-left:auto;color:#bbc7ad;font-size:10px}
.designer-color-sample{display:block;flex-shrink:0;width:15px;height:15px;border-radius:4px;background:var(--piece-color,#7CB4F1);box-shadow:inset 0 0 0 1px #ffffff30}
.designer-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:5px;padding:0 10px 5px}
.designer-color-option{display:grid;place-items:center;min-width:40px;min-height:44px;padding:5px;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer}
.designer-color-option>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--piece-color);color:transparent;font:bold 17px Arial,sans-serif;box-shadow:inset 0 0 0 1px #ffffff25}
.designer-color-option[aria-pressed=true]{border-color:var(--piece-color);background:#ffffff09}
.designer-color-option[aria-pressed=true]>span{color:var(--piece-ink,#17221E)}
.designer-color-editor>.designer-field-note{padding:0 12px 12px;margin:0;font-size:9px}
.designer-page button:focus-visible,.designer-color-editor summary:focus-visible{outline:2px solid #ffe2aa;outline-offset:3px}
@media(max-width:760px){.designer-piece-chip{min-height:44px}.designer-color-editor summary{font-size:11px}.designer-colors{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}.designer-color-editor summary small{font-size:9px}}

.designer-import-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:15px 18px;margin-bottom:24px;border:1px solid #51636d;border-radius:9px;background:#202c33;color:#c6d6df;font-size:12px;line-height:1.7}.designer-import-entry>a{display:flex;align-items:center;gap:20px;color:#ffc3a3;min-height:38px;font-weight:600}.designer-import-entry a:focus-visible{outline:2px solid #ffcbac;outline-offset:5px}