.designer-page { padding: 48px 3% 55px; }
.designer-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 38px; }
.designer-intro .eyebrow { color: var(--lime); margin-bottom: 18px; }
.designer-intro h1 { font-size: clamp(38px, 5vw, 72px); line-height: .98; letter-spacing: -3px; }
.designer-intro h1 span { color: var(--lime); }
.designer-intro > p { max-width: 340px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.designer-app { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; border: 1px solid var(--line); }
.designer-panel { padding: 24px 20px; min-width: 0; }
.designer-library { border-right: 1px solid var(--line); }
.designer-properties { border-left: 1px solid var(--line); }
.designer-step { font: 11px Consolas, monospace; letter-spacing: 1px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.designer-step:not(:first-child) { margin-top: 28px; }
.designer-label { display: block; font: 11px/1.6 Consolas, monospace; letter-spacing: .7px; margin: 18px 0 10px; }
.designer-panel input:not([type=file]):not([type=range]), .designer-panel select { width: 100%; min-width: 0; background: #2c2f29; border: 1px solid #55594c; color: var(--paper); padding: 11px 10px; border-radius: 0; font-size: 15px; line-height: 1.5; }
.designer-panel select option { background: #2c2f29; }
.designer-garments { display: grid; gap: 10px; max-height: 400px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #839d46 #2c2f29; padding: 2px; }
.designer-garments button[hidden] { display: none; }
.designer-garments button { border: 1px solid #55594c; background: transparent; color: var(--paper); padding: 14px; text-align: left; font-size: 16px; }
.designer-garments button[aria-pressed=true] { border-color: var(--lime); background: #d2f6600b; }
.designer-garments small { display: block; color: var(--muted); font-size: 11px; margin-top: 8px; }
.garment-icon { color: var(--lime); margin-right: 10px; }
.designer-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.designer-presets button { padding: 15px 6px 12px; border: 1px solid #55594c; background: #eeeee7; color: #22241f; }
.designer-presets button:hover { background: var(--lime); }
.designer-presets svg { width: 58px; height: 52px; stroke-width: 3; margin: 0 auto 10px; display: block; }
.designer-presets img { width: 100%; height: 58px; object-fit: contain; padding: 0 6px; margin: 0 auto 10px; display: block; }
.designer-presets strong { display: block; height: 52px; margin-bottom: 10px; font: 900 20px/.95 Arial, sans-serif; letter-spacing: -1px; }
.designer-presets span { display: block; font-size: 10px; }
.print-catalog { min-width: 0; }
.print-catalog .designer-label { margin-top: 0; }
.print-catalog input[type=search], .print-catalog select { width: 100%; min-width: 0; background: #2c2f29; border: 1px solid #55594c; color: var(--paper); padding: 11px 10px; font: 15px/1.4 Arial, sans-serif; }
.print-catalog select { margin-top: 8px; }
.print-catalog .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.print-catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; color: var(--muted); font: 11px/1.5 Consolas, monospace; }
.print-clear { padding: 0; background: none; border: 0; color: var(--lime); font: inherit; cursor: pointer; }
.print-clear[hidden], .print-more[hidden], .print-empty[hidden] { display: none; }
.print-catalog .designer-presets { max-height: 400px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #839d46 #2c2f29; padding: 2px 4px 2px 2px; align-content: start; }
.print-catalog .designer-presets button { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 6px; cursor: pointer; }
.print-catalog .designer-presets img { width: 100%; height: auto; aspect-ratio: 1; flex-shrink: 0; margin: 0; padding: 0; object-fit: contain; }
.print-catalog .designer-presets span { font: 11px/1.35 Arial, sans-serif; min-height: 2.7em; overflow-wrap: anywhere; }
.print-catalog button:focus-visible, .print-expand:focus-visible, .print-gallery-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.print-more, .print-expand { width: 100%; margin-top: 10px; padding: 12px 8px; border: 1px solid #74825a; background: transparent; color: var(--paper); font: 12px/1.4 Arial, sans-serif; cursor: pointer; }
.print-more:hover, .print-expand:hover { border-color: var(--lime); color: var(--lime); }
.print-empty { padding: 20px 0; }
.print-gallery-dialog { width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--paper); background: #22241f; border: 1px solid #74825a; overflow: hidden; }
.print-gallery-dialog[open] { display: flex; flex-direction: column; gap: 20px; }
.print-gallery-dialog::backdrop { background: #10130ee0; }
.print-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.print-gallery-header h2 { font-size: clamp(22px, 3vw, 34px); letter-spacing: -1px; }
.print-gallery-close { padding: 10px 12px; color: var(--paper); background: transparent; border: 1px solid #74825a; font: 13px Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.print-gallery-dialog .print-catalog { min-height: 0; display: flex; flex-direction: column; }
.print-gallery-dialog .designer-label { display: none; }
.print-gallery-dialog .designer-presets { max-height: min(58dvh, 600px); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); flex-shrink: 1; min-height: 80px; }
.print-gallery-dialog .designer-presets span { font-size: 13px; }
@media (max-width: 760px) {
    .print-catalog .designer-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 440px; }
    .print-catalog input[type=search], .print-catalog select { font-size: 16px; }
    .print-gallery-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 16px; }
    .print-gallery-dialog .designer-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 54dvh; }
}
.designer-add-text { width: 100%; padding: 13px 10px; margin-top: 10px; background: transparent; border: 1px solid #8b936e; color: var(--paper); cursor: pointer; }
.designer-add-text:hover { border-color: var(--lime); color: var(--lime); }
.designer-color-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.designer-color-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.designer-color-palette button { position: relative; min-width: 0; min-height: 32px; padding: 0; border: 1px solid #7c826d; background: transparent; cursor: pointer; }
.designer-color-palette svg { display: block; width: 100%; height: 30px; }
.designer-color-palette button[aria-pressed=true] { outline: 2px solid var(--lime); outline-offset: 2px; }
.designer-color-palette button[aria-pressed=true]::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: white; text-shadow: 0 1px 3px black, 0 0 2px black; font-size: 19px; }
.designer-color-palette button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.designer-gradient-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.designer-gradient-colors[hidden] { display: none; }
.designer-gradient-colors label { min-width: 0; font-size: 11px; color: var(--muted); }
.designer-panel .designer-gradient-colors input[type=color] { display: block; height: 42px; padding: 4px; margin-top: 8px; cursor: pointer; }
.designer-reset-curve { background: transparent; border: 0; border-bottom: 1px solid #7c826d; color: var(--paper); font-size: 12px; padding: 3px 0; cursor: pointer; }
.cloth-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #cccfc0; }
.cloth-tools button { background: transparent; color: #22241f; border: 1px solid #a2a594; padding: 9px 12px; cursor: pointer; font-size: 12px; }
.cloth-tools button[aria-pressed=true] { background: #22241f; color: var(--lime); }
.cloth-fps { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 2147483647; min-width: 9ch; padding: 7px 10px; border: 1px solid #536347; border-radius: 6px; background: rgba(23, 24, 22, .92); color: #d2f660; font: 600 12px/1.4 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: right; pointer-events: none; user-select: none; }
.cloth-tools p { width: 100%; font-size: 11px; line-height: 1.6; margin: 0; color: #536347; }
.cloth-tools [hidden], #cloth-stage[hidden], #cloth-stage [hidden], #cloth-canvas[hidden], #design-canvas[hidden] { display: none; }
.cloth-quality { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; font-size: 12px; }
.cloth-quality-settings { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; align-items: start; gap: 12px; width: 100%; min-width: 0; }
.cloth-quality-settings > .cloth-quality { min-width: 0; }
.cloth-quality output { color: #536347; font-variant-numeric: tabular-nums; }
.cloth-percent input { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0; accent-color: #536347; }
.cloth-friction:has(input:disabled) { opacity: .55; }
.cloth-debug { width: 100%; min-width: 0; box-sizing: border-box; border: 1px dashed #a2a594; border-radius: 6px; padding: 10px 12px; background: #f3f3eb; font-size: 12px; }
.cloth-debug > summary { cursor: pointer; color: #536347; font-weight: 600; }
.cloth-debug-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 12px; }
.cloth-quality select { grid-column: 1 / -1; justify-self: start; field-sizing: content; width: auto; min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid #a2a594; background: #f3f3eb; color: #22241f; font: inherit; }
#cloth-stage { position: relative; width: 100%; height: 100%; isolation: isolate; }
.cloth-gpu-canvas, .cloth-footer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cloth-gpu-canvas { z-index: -1; }
.cloth-footer svg { display: block; width: 100%; height: 100%; }
#cloth-canvas { display: block; width: 100%; height: 100%; touch-action: auto; cursor: grab; }
#cloth-canvas:active { cursor: grabbing; }
.designer-panel .designer-color-row input[type=color] { height: 46px; padding: 4px; cursor: pointer; }
.designer-upload { display: block; border: 1px dashed #8b936e; padding: 15px 10px; text-align: center; font-size: 12px; cursor: pointer; margin-top: 18px; line-height: 1.5; }
.designer-upload:hover { color: var(--lime); border-color: var(--lime); }
.designer-page input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#artwork-upload:focus-within .designer-upload, .designer-open:has(+ input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 4px; }
.designer-hint { color: var(--muted); font-size: 11px; line-height: 1.65; margin-top: 12px; }
#artwork-feedback[data-state=error] { color: #ffc6c6; }
.artwork-library { display: grid; gap: 8px; margin-top: 16px; }
.artwork-library button { background: #2c2f29; color: var(--paper); border: 1px solid #55594c; padding: 10px; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.artwork-library-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; }
.designer-workspace { min-width: 0; background: #e8e7df; color: #22241f; }
.designer-stage-bar { padding: 16px; display: flex; gap: 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #cccfc0; }
.designer-sides { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.designer-sides button { padding: 10px 18px; background: transparent; border: 1px solid #a2a594; color: #22241f; font-size: 13px; }
.designer-sides button { overflow-wrap: anywhere; max-width: 100%; }
.designer-sides button[aria-pressed=true] { background: #22241f; color: #eeeee7; }
.designer-guides { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.designer-guides input { accent-color: #22241f; }
.designer-canvas-wrap { padding: 0 8px; }
.designer-viewport { position: relative; aspect-ratio: 760 / 880; overflow: hidden; background: #d9dbd0; }
.designer-canvas-surface { position: absolute; inset: 0; transform-origin: 0 0; }
.designer-viewport:focus-visible { outline: 2px solid #22241f; outline-offset: -2px; }
.designer-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid #cccfc0; }
.designer-tool-group { display: flex; align-items: center; gap: 4px; }
.designer-tools-heading { display: block; flex-basis: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.designer-brush-options { display: none; padding: 12px 16px; border-bottom: 1px solid #cccfc0; gap: 12px; align-items: center; flex-wrap: wrap; }
#designer[data-canvas-tool=brush] .designer-brush-options { display: flex; }
.designer-brush-options label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.designer-brush-options input[type=color] { width: 36px; height: 32px; padding: 0; }
.designer-brush-options input[type=range] { width: 100px; }
.designer-brush-options output { min-width: 36px; font-size: 12px; }
.designer-brush-options button { background: #22241f; color: var(--lime); border: 1px solid #22241f; padding: 8px 12px; cursor: pointer; }
.designer-brush-options p { flex-basis: 100%; font-size: 11px; margin: 0; color: #536347; }
.designer-brush-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#designer[data-canvas-tool=brush] #design-canvas { cursor: crosshair; touch-action: pinch-zoom; }
#designer[data-canvas-tool=brush] #cloth-toggle { display: none; }
.designer-tool-group + .designer-tool-group { border-left: 1px solid #b8bba9; padding-left: 12px; }
.designer-touch-history { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.designer-touch-history button:disabled { opacity: .4; cursor: default; }
.designer-toolbar button:disabled { opacity: .4; cursor: default; }
.designer-mobile-reflection { display: none; }
#designer.designer-touch-device .designer-mobile-reflection { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.designer-mobile-reflection button[aria-pressed=true] { background: #22241f; color: var(--lime); }
.designer-toolbar button { min-width: 38px; min-height: 40px; padding: 8px 10px; border: 1px solid #a2a594; background: transparent; color: #22241f; cursor: pointer; font-size: 12px; }
.designer-toolbar button[aria-pressed=true] { background: #22241f; color: var(--lime); box-shadow: inset 0 -3px 0 var(--lime); }
.designer-zoom-tools { margin-left: auto; }
#canvas-zoom { min-width: 48px; text-align: center; font: 12px Consolas, monospace; }
#designer[data-canvas-tool=pan] .designer-viewport canvas { cursor: grab; }
#designer[data-canvas-panning=true] .designer-viewport,
#designer[data-canvas-panning=true] .designer-viewport canvas { cursor: grabbing; }
@media (max-width: 650px) { .designer-zoom-tools { margin-left: 0; } }
#design-canvas { display: block; width: 100%; height: 100%; touch-action: auto; cursor: grab; }
#designer[data-touch-edit=true] #design-canvas,
#designer[data-touch-edit=true] #cloth-canvas,
#designer[data-touch-edit=true] .designer-viewport { touch-action: pinch-zoom; }
.designer-touch-tools { display: none; padding: 12px 16px; border-bottom: 1px solid #cccfc0; }
.designer-touch-tools .designer-tools-heading { margin-bottom: 12px; }
.designer-touch-tools button { background: transparent; color: #22241f; border: 1px solid #a2a594; padding: 12px 14px; cursor: pointer; }
.designer-touch-tools button[aria-pressed=true] { background: #22241f; color: var(--lime); }
.designer-touch-tools .designer-hint { color: #536347; margin: 10px 0 0; }
/* Device classification is set by constructor.js; window size and PC touchscreens do not change it. */
#designer.designer-touch-device .designer-touch-tools { display: block; }
#designer.designer-touch-device .designer-toolbar { display: none; }
#designer.designer-touch-device .designer-desktop-hint { display: none; }
#design-canvas:active { cursor: grabbing; }
#design-canvas:focus-visible { outline: 2px solid #22241f; outline-offset: -4px; }
.designer-stage-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid #cccfc0; font: 10px/1.5 Consolas, monospace; letter-spacing: .7px; }
.designer-scale-note { padding: 0 20px 20px; color: #626758; max-width: 560px; }
.design-layers { display: grid; gap: 8px; margin-bottom: 20px; }
.design-layers button { padding: 10px; background: transparent; border: 1px solid #55594c; color: var(--paper); font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.design-layers button[aria-pressed=true] { border-color: var(--lime); color: var(--lime); }
#layer-properties { margin: 0; min-width: 0; }
#layer-properties:disabled { opacity: .4; }
#layer-properties legend { margin-bottom: 0; color: var(--muted); }
.designer-layer-order { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 20px; }
.designer-layer-order button { min-width: 0; padding: 8px; border: 1px solid #7c826d; background: transparent; color: var(--paper); font-size: 12px; overflow-wrap: anywhere; }
.designer-layer-order button:disabled { opacity: .4; cursor: default; }
.designer-range-row { display: grid; grid-template-columns: minmax(0,1fr) 70px; gap: 10px; align-items: center; }
.designer-range-row input[type=range] { min-width: 0; width: 100%; accent-color: var(--lime); }
.designer-position { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.designer-position label { min-width: 0; font: 10px/1.5 Consolas, monospace; letter-spacing: .7px; }
.designer-position input { margin-top: 10px; }
.designer-small-actions { display: flex; gap: 14px; margin: 20px 0; }
.designer-small-actions button { color: var(--paper); border: 0; border-bottom: 1px solid #7c826d; background: transparent; padding: 4px 0; font-size: 12px; }
.designer-save { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
.designer-save > button, .designer-open { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 13px 12px; margin-bottom: 10px; font-size: 12px; border: 1px solid #55594c; background: transparent; color: var(--paper); cursor: pointer; line-height: 1.5; }
.designer-save > .button-lime { background: var(--lime); color: #22241f; border-color: var(--lime); font-weight: 700; }
.designer-save button:disabled { opacity: .5; cursor: wait; }
.designer-status { margin-top: 20px; padding: 15px 18px; border-left: 3px solid var(--lime); background: #2c2f29; font-size: 14px; line-height: 1.6; }
.designer-status[data-state=error] { border-color: #ff9f9f; color: #ffc6c6; }
.designer-disclaimer { font-size: 12px; color: var(--muted); margin-top: 18px; line-height: 1.7; max-width: 850px; }
@media (max-width: 1300px) {
    .designer-app { grid-template-columns: 300px minmax(0,1fr); }
    .designer-properties { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 0 26px; }
    .designer-properties > .designer-step { grid-column: 1 / -1; }
    .designer-save { margin-top: 0; border-top: 0; padding-top: 0; }
    #layer-empty { grid-column: 1; }
}
@media (max-width: 650px) {
    .designer-page { padding: 30px 5% 35px; }
    .designer-intro { display: block; margin-bottom: 25px; }
    .designer-intro h1 { letter-spacing: -2px; }
    .designer-intro > p { margin-top: 20px; font-size: 14px; }
    .designer-app { display: flex; flex-direction: column; }
    .designer-library { border-right: 0; border-bottom: 1px solid var(--line); }
    .designer-garments { grid-template-columns: 1fr 1fr; }
    .designer-garments button { font-size: 14px; padding: 12px 9px; }
    .designer-garments small { font-size: 10px; line-height: 1.5; }
    .designer-presets button { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
    .designer-presets svg { width: 36px; height: 34px; margin: 0; }
    .designer-presets img { width: 58px; height: 38px; margin: 0; padding: 0; }
    .designer-presets strong { height: auto; margin: 0; font-size: 16px; }
    .designer-panel { padding: 20px 16px; }
    .designer-properties { display: block; }
    .designer-save { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
    .designer-stage-bar { padding: 12px; gap: 8px; }
    .designer-sides button { padding: 10px 13px; }
    .designer-guides { font-size: 9px; }
}
@font-face { font-family: 'Studio Montserrat'; src: url('/fonts/constructor/Montserrat.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Studio Oswald'; src: url('/fonts/constructor/Oswald.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Studio Bitter'; src: url('/fonts/constructor/Bitter.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Studio Caveat'; src: url('/fonts/constructor/Caveat.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Studio Playfair'; src: url('/fonts/constructor/PlayfairDisplay.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }
#design-to-order[hidden] { display: none; }
@font-face { font-family: 'Studio Arimo'; src: url('/fonts/constructor/Arimo.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Studio Tinos'; src: url('/fonts/constructor/Tinos-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Studio Cousine'; src: url('/fonts/constructor/Cousine-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Studio Cousine'; src: url('/fonts/constructor/Cousine-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700 900; font-display: swap; }

@font-face { font-family: 'Studio Tinos'; src: url('/fonts/constructor/Tinos-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700 900; font-display: swap; }

@font-face { font-family: 'Studio Russo'; src: url('/fonts/constructor/RussoOne.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }

@font-face { font-family: 'Studio Comfortaa'; src: url('/fonts/constructor/Comfortaa.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }

@font-face { font-family: 'Studio Rubik'; src: url('/fonts/constructor/Rubik.woff2') format('woff2'); font-style: normal; font-weight: 300 900; font-display: swap; }

@font-face { font-family: 'Studio PT Sans'; src: url('/fonts/constructor/PTSans.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

@font-face { font-family: 'Studio PT Sans'; src: url('/fonts/constructor/PTSans-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700 900; font-display: swap; }

.avatar-open { padding: 9px 13px; border: 1px solid #667043; background: #d2ef58; color: #22261c; cursor: pointer; font: inherit; font-size: 12px; }
.avatar-dialog { width: min(1180px, 94vw); max-width: 1180px; max-height: 94dvh; padding: 0; border: 1px solid #87906d; background: #e9e7df; color: #252820; overflow: auto; }
.avatar-dialog::backdrop { background: #15190fe0; backdrop-filter: blur(5px); }
.avatar-dialog button { padding: 11px 15px; border: 1px solid #8a907c; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.avatar-dialog button:hover, .avatar-dialog button[aria-pressed=true] { background: #d2ef58; border-color: #535d34; }
.avatar-dialog button:focus-visible, .avatar-dialog input:focus-visible, #avatar-canvas:focus-visible { outline: 3px solid #526c1d; outline-offset: -3px; }
.avatar-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 28px; border-bottom: 1px solid #bac0aa; }
.avatar-eyebrow { font: 10px Consolas, monospace; letter-spacing: .12em; color: #60694e; }
.avatar-header h2 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 39px); line-height: 1.1; letter-spacing: -.04em; }
.avatar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.avatar-scene { position: relative; min-width: 0; min-height: 660px; background: #e9e7df; }
#avatar-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; cursor: grab; }
#avatar-canvas:active { cursor: grabbing; }
.avatar-stamp { position: absolute; left: 24px; top: 24px; pointer-events: none; font: 11px/1.6 Consolas, monospace; letter-spacing: .07em; color: #59614a; }
#avatar-message { position: absolute; bottom: 59px; left: 18px; right: 18px; text-align: center; font: 12px/1.4 Arial, sans-serif; color: #475035; pointer-events: none; }
.avatar-view { position: absolute; bottom: 15px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.avatar-view button { background: #eeeedecc; padding: 8px 12px; }
#avatar-burst { position: absolute; left: 50%; top: 27%; transform: translateX(-50%) rotate(-8deg); background: #d2ef58; color: #252820; padding: 12px 16px; font-size: clamp(16px, 2vw, 24px); font-weight: 900; white-space: nowrap; pointer-events: none; box-shadow: 5px 5px 0 #252820; }
#avatar-burst[hidden] { display: none; }
.avatar-controls { padding: 27px 22px; background: #dedfd3; border-left: 1px solid #bac0aa; display: flex; flex-direction: column; gap: 13px; }
.avatar-controls h3 { font-size: 24px; letter-spacing: -.04em; line-height: 1.05; margin: -5px 0 8px; }
.avatar-controls label { display: grid; grid-template-columns: 1fr auto; gap: 7px; font-size: 12px; }
.avatar-controls input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #647537; cursor: pointer; margin: 0; min-height: 24px; }
.avatar-controls output { font: 12px Consolas, monospace; color: #5b6645; }
.avatar-controls input[type=color] { width: 50px; height: 26px; border: 0; padding: 0; }
.avatar-controls .avatar-check { display: flex; align-items: center; gap: 8px; }
.avatar-check input { accent-color: #647537; }
.avatar-cloth-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.avatar-dialog[data-tool=pull] #avatar-canvas { cursor: crosshair; }
.avatar-controls .avatar-save { background: #252820; color: #d2ef58; }
.avatar-note { font-size: 10px; line-height: 1.6; color: #5b624f; margin: 0; }
.avatar-tension { display: grid; gap: 5px; font: 9px Consolas, monospace; letter-spacing: .08em; }
.avatar-tension meter { width: 100%; height: 9px; }
@media (max-width: 760px) {
    .avatar-dialog { width: 96vw; max-height: 96dvh; }
    .avatar-header { padding: 16px; gap: 10px; }
    .avatar-header button { padding: 9px; white-space: nowrap; }
    .avatar-layout { grid-template-columns: 1fr; }
    .avatar-scene { min-height: 460px; height: 58dvh; max-height: 620px; }
    .avatar-controls { border-left: 0; border-top: 1px solid #bac0aa; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
    .avatar-controls > .avatar-eyebrow, .avatar-controls h3, .avatar-controls .avatar-check, .avatar-controls .avatar-note, .avatar-cloth-tools { grid-column: 1 / -1; }
    .avatar-controls label { min-width: 0; }
    .avatar-stamp { left: 16px; top: 16px; font-size: 9px; }
}

.stencil-picker { box-sizing: border-box; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(10px, 2vmin, 20px); background: #22241f; color: #fff; border: 1px solid #77816b; }
.stencil-picker[open] { display: flex; flex-direction: column; }
.stencil-preview { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; background: #171915; }
.stencil-picker::backdrop { background: #121510d9; }
.stencil-picker h2, .stencil-picker p { margin: 0 0 12px; }
.stencil-picker canvas { display: block; width: min(100cqw, calc(100cqh * var(--frame-ratio, 1))); height: auto; cursor: crosshair; touch-action: none; }
.stencil-picker canvas[hidden], #stencil-controls[hidden], #clear-stencil[hidden], #print-fill[hidden], label[for="print-fill"][hidden] { display: none; }
.stencil-picker label { margin-top: 8px; }
.stencil-picker label, .stencil-picker button { font: inherit; }
.stencil-picker div { display: flex; gap: 8px; margin-top: 10px; }
.stencil-picker button, #stencil-controls button { border: 1px solid #859074; padding: 8px 12px; background: transparent; color: inherit; cursor: pointer; }
#stencil-controls { margin: 10px 0; }

.stencil-preview [data-exit-fullscreen] { display: none; }
.stencil-preview:fullscreen { width: 100%; height: 100%; position: relative; }
.stencil-preview:fullscreen [data-exit-fullscreen] { display: block; position: absolute; top: 12px; right: 12px; background: #22241f; }
.stencil-picker div { flex-wrap: wrap; }