.cn-designer { --studio-ink:#171831; --studio-blue:#2633c4; --studio-lime:#e8f45a; --studio-mint:#a0d6c6; --studio-coral:#ff946d; --studio-pink:#f8719b; --studio-lavender:#b8a0ec; color:var(--studio-ink); background:var(--studio-mint); min-height:100vh; }
.cn-designer * { box-sizing:border-box; }
.cn-designer-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:28px clamp(16px,3vw,48px); background:var(--studio-coral); border-bottom:3px solid var(--studio-ink); }
.cn-designer-heading .cn-eyebrow { color:var(--studio-ink); }
.cn-designer-heading h1 { margin:13px 0 6px; font:900 46px/1 "CN Display",Impact,sans-serif; letter-spacing:0; }
.cn-designer-heading h1 span { color:var(--studio-blue); }
.cn-designer-heading p { margin:0; font-size:14px; }
.cn-designer-heading-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.cn-designer-command,.cn-designer-tool-row button,.cn-designer-ai-button,.cn-designer-inline button,.cn-designer-delete,.cn-designer-reset { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px; border:2px solid var(--studio-ink); border-radius:0; background:var(--studio-lime); color:var(--studio-ink); font:700 12px/1.25 "Courier New",monospace; cursor:pointer; box-shadow:3px 3px 0 var(--studio-ink); transition:transform .12s steps(2,end),box-shadow .12s steps(2,end); }
.cn-designer :is(button,a):focus-visible,.cn-designer :is(input,select,textarea):focus-visible { outline:3px solid var(--studio-blue); outline-offset:2px; }
.cn-designer :is(button):hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--studio-ink); }
.cn-designer :is(button):disabled { cursor:not-allowed; opacity:.55; }
.cn-designer .app-icon { width:17px; height:17px; flex:none; }
.cn-designer-command.primary,.cn-designer-ai-button { background:var(--studio-blue); color:#fff; }
.cn-designer-workspace { display:grid; grid-template-columns:minmax(248px,270px) minmax(0,1fr) minmax(248px,270px); min-height:780px; }
.cn-designer-tools,.cn-designer-inspector { min-width:0; background:var(--studio-lavender); }
.cn-designer-tools { border-right:3px solid var(--studio-ink); }
.cn-designer-inspector { border-left:3px solid var(--studio-ink); background:var(--studio-coral); }
.cn-designer-tool-section,.cn-designer-inspector-section { padding:19px 16px 22px; border-bottom:2px solid var(--studio-ink); }
.cn-designer-tool-section h2,.cn-designer-inspector-section h2 { display:flex; align-items:center; gap:8px; margin:0 0 15px; font:800 13px/1.25 "Courier New",monospace; text-transform:uppercase; }
.cn-designer-tool-section h2 span { display:grid; place-items:center; width:25px; height:25px; border:2px solid var(--studio-ink); background:var(--studio-lime); font-size:10px; }
.cn-designer-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cn-designer-products button { min-width:0; min-height:108px; padding:5px; background:var(--studio-mint); border:2px solid var(--studio-ink); border-radius:0; color:var(--studio-ink); cursor:pointer; display:grid; grid-template-rows:70px auto; gap:5px; justify-items:center; font:700 11px "Courier New",monospace; }
.cn-designer-products button:nth-child(2) { background:var(--studio-lime); }
.cn-designer-products button:nth-child(3) { background:var(--studio-coral); }
.cn-designer-products button:nth-child(4) { background:var(--studio-pink); }
.cn-designer-products button[aria-pressed="true"] { outline:3px solid var(--studio-blue); outline-offset:1px; box-shadow:4px 4px 0 var(--studio-ink); }
.cn-designer-products img { width:100%; height:70px; object-fit:contain; }
.cn-designer-products+.cn-designer-label { margin:16px 0 8px; }
.cn-designer-views { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.cn-designer-views button { min-width:0; min-height:36px; padding:7px 5px; border:2px solid var(--studio-ink); border-radius:0; background:var(--studio-mint); color:var(--studio-ink); font:700 11px/1.2 "Courier New",monospace; cursor:pointer; }
.cn-designer-views button[aria-pressed="true"] { background:var(--studio-blue); color:#fff; box-shadow:3px 3px 0 var(--studio-ink); }
.cn-designer-views+.cn-designer-label { margin:16px 0 8px; }
.cn-designer-colors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.cn-designer-colors button,.cn-designer-colors label { width:100%; aspect-ratio:1; min-width:0; padding:0; border:2px solid var(--studio-ink); border-radius:0; background:var(--swatch,var(--studio-lime)); cursor:pointer; }
.cn-designer-colors button[aria-pressed="true"] { outline:3px solid var(--studio-blue); outline-offset:2px; }
.cn-designer-colors label { overflow:hidden; background:var(--studio-lime); }
.cn-designer-colors input[type=color] { display:block; width:100%; height:100%; border:0; padding:0; cursor:pointer; }
.cn-designer-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; border:2px solid var(--studio-ink); }
.cn-designer-mode button { min-height:42px; min-width:0; padding:6px; border:0; border-radius:0; background:var(--studio-mint); color:var(--studio-ink); font:700 11px/1.2 "Courier New",monospace; cursor:pointer; }
.cn-designer-mode button+button { border-left:2px solid var(--studio-ink); }
.cn-designer-mode button[aria-pressed="true"] { background:var(--studio-blue); color:#fff; }
.cn-designer-panel { display:grid; gap:12px; }
.cn-designer [hidden] { display:none!important; }
.cn-designer-upload { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:14px; min-height:72px; border:2px dashed var(--studio-blue); background:var(--studio-mint); cursor:pointer; }
.cn-designer-upload .app-icon { color:var(--studio-blue); }
.cn-designer-upload strong { font-size:12px; }
.cn-designer-upload span { flex:0 0 100%; color:#343955; font-size:10px; margin-left:25px; }
.cn-designer-label { display:block; font:700 11px "Courier New",monospace; text-transform:uppercase; margin-top:4px; }
.cn-designer :is(input:not([type=file]):not([type=color]):not([type=range]),select,textarea) { width:100%; min-width:0; min-height:38px; border:2px solid var(--studio-ink); border-radius:0; background:var(--studio-lime); padding:8px 9px; color:var(--studio-ink); font:500 13px/1.3 Arial,sans-serif; }
.cn-designer textarea { min-height:118px; resize:vertical; }
.cn-designer input::placeholder,.cn-designer textarea::placeholder { color:#4a4d5e; opacity:1; }
.cn-designer-inline { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:6px; }
.cn-designer-inline button { width:42px; padding:0; }
.cn-designer-tool-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.cn-designer-tool-row button { min-width:0; padding-inline:7px; background:var(--studio-mint); box-shadow:none; }
.cn-designer-reset { width:100%; background:var(--studio-coral); box-shadow:none; }
.cn-designer-inspector .cn-designer-tool-row:has(button:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cn-designer-reference { padding:7px 9px; border:1px solid var(--studio-ink); overflow-wrap:anywhere; font-size:11px; background:var(--studio-lime); }
.cn-designer-reference-row { display:grid; grid-template-columns:minmax(0,1fr) 35px; gap:6px; align-items:stretch; }
.cn-designer-reference-row button { display:grid; place-items:center; min-width:35px; border:2px solid var(--studio-ink); background:var(--studio-pink); cursor:pointer; }
.cn-designer-ai-error { margin:0; padding:10px; border:2px solid var(--studio-ink); background:var(--studio-pink); color:var(--studio-ink); font:700 11px/1.45 "Courier New",monospace; }
.cn-designer-ai-button { width:100%; min-height:44px; }
.cn-designer-ai-note { font-size:11px; line-height:1.5; margin:0; }
.cn-designer-stage { min-width:0; background:var(--studio-mint); display:flex; flex-direction:column; align-items:stretch; }
.cn-designer-stage-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; min-height:43px; border-bottom:3px solid var(--studio-ink); background:var(--studio-blue); color:#fff; font:700 11px "Courier New",monospace; }
.cn-designer-stage-bar span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.cn-designer-stage-bar i { width:7px; height:7px; background:var(--studio-lime); box-shadow:7px 0 0 var(--studio-pink); }
.cn-designer-stage-inner { display:grid; place-items:center; flex:1; padding:20px; background-image:linear-gradient(#17183118 1px,transparent 1px),linear-gradient(90deg,#17183118 1px,transparent 1px); background-size:24px 24px; }
.cn-designer-canvas-frame { width:min(100%,650px); aspect-ratio:1; position:relative; border:3px solid var(--studio-ink); background:var(--studio-lime); box-shadow:8px 8px 0 var(--studio-blue); }
.cn-designer-canvas-frame .canvas-container { width:100%!important; height:100%!important; }
.cn-designer-canvas-frame canvas { width:100%!important; height:100%!important; }
.cn-designer-print-zone { position:absolute; left:32%; top:36%; width:36%; height:24%; border:2px dashed var(--studio-blue); pointer-events:none; opacity:.7; }
.cn-designer-print-zone span { position:absolute; left:0; top:-22px; padding:2px 4px; background:var(--studio-lime); color:var(--studio-ink); font:700 9px "Courier New",monospace; white-space:nowrap; }
.cn-designer-stage-footer { display:flex; justify-content:space-between; gap:15px; border-top:2px solid var(--studio-ink); padding:11px 16px; background:var(--studio-lime); font-size:11px; }
.cn-designer-stage-footer span:last-child { white-space:nowrap; font-family:"Courier New",monospace; font-weight:700; }
.cn-designer-status { margin:0; min-height:38px; padding:10px 16px; background:var(--studio-mint); font-size:12px; }
.cn-designer-status[data-tone="error"] { background:var(--studio-pink); }
.cn-designer-status[data-tone="success"] { background:var(--studio-lime); }
.cn-designer-inspector :is(input,select) { margin-top:5px; }
.cn-designer-inspector-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cn-designer-inspector-grid label,.cn-designer-range { display:block; font:700 11px "Courier New",monospace; }
.cn-designer-inspector-grid input[type=color] { width:100%; height:38px; background:var(--studio-lime); border:2px solid var(--studio-ink); padding:3px; cursor:pointer; }
.cn-designer-range input { width:100%; accent-color:var(--studio-blue); }
.cn-designer-inspector [data-selection-tools] { display:grid; gap:10px; }
.cn-designer-empty { padding:25px 8px; text-align:center; border:2px dashed var(--studio-ink); background:var(--studio-lime); }
.cn-designer-empty .app-icon { width:26px; height:26px; }
.cn-designer-empty p { margin:8px 0 0; font-size:12px; line-height:1.4; }
.cn-designer-delete { width:100%; background:var(--studio-pink); }
.cn-designer-layers-section h2 { justify-content:space-between; }
.cn-designer-layers { display:grid; gap:6px; max-height:270px; overflow:auto; }
.cn-designer-layers button { width:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; border:2px solid var(--studio-ink); background:var(--studio-mint); color:var(--studio-ink); text-align:left; cursor:pointer; font:700 11px "Courier New",monospace; }
.cn-designer-layers button[aria-current="true"] { background:var(--studio-lime); box-shadow:3px 3px 0 var(--studio-ink); }
.cn-designer-layers button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-designer-muted { font-size:12px; margin:0; }
.cn-designer-send-section { background:var(--studio-lime); }
.cn-designer-send-section p { font-size:12px; line-height:1.5; }
.cn-designer-send-section button { width:100%; }
.cn-designer-send-section a { display:inline-block; margin-top:12px; color:var(--studio-blue); font-size:12px; font-weight:700; }
@media(max-width:1140px) { .cn-designer-workspace { grid-template-columns:245px minmax(0,1fr); } .cn-designer-inspector { grid-column:1/-1; border-left:0; border-top:3px solid var(--studio-ink); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .cn-designer-inspector-section { border-right:2px solid var(--studio-ink); } }
@media(max-width:760px) { .cn-designer-heading { display:block; padding:22px 15px; } .cn-designer-heading h1 { font-size:38px; } .cn-designer-heading-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:17px; } .cn-designer-heading-actions button { min-width:0; padding:7px 5px; font-size:10px; } .cn-designer-heading-actions .app-icon { width:14px; height:14px; } .cn-designer-workspace { display:flex; flex-direction:column; } .cn-designer-stage { order:1; } .cn-designer-tools { order:2; border-right:0; border-top:3px solid var(--studio-ink); } .cn-designer-inspector { order:3; display:block; } .cn-designer-stage-inner { padding:18px 15px 22px; } .cn-designer-canvas-frame { width:min(100%,520px); box-shadow:5px 5px 0 var(--studio-blue); } .cn-designer-stage-footer { flex-wrap:wrap; } .cn-designer-products { grid-template-columns:repeat(4,minmax(0,1fr)); } .cn-designer-products button { min-height:82px; grid-template-rows:50px auto; font-size:9px; } .cn-designer-products img { height:50px; } .cn-designer-tool-section,.cn-designer-inspector-section { padding-inline:15px; } .cn-designer-inspector-section { border-right:0; } }
@media(max-width:390px) { .cn-designer-heading-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } .cn-designer-heading-actions button:last-child { grid-column:1/-1; } .cn-designer-stage-bar span { font-size:9px; } .cn-designer-tool-row button { font-size:10px; } }
.cn-designer-3d { position:fixed; inset:0; z-index:10000; isolation:isolate; overflow:hidden; background:var(--studio-mint); }
.cn-designer-3d-stage,.cn-designer-3d-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.cn-designer-3d-topbar,.cn-designer-3d-bottom { position:absolute; z-index:2; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(14px,3vw,38px); border-color:var(--studio-ink); border-style:solid; }
.cn-designer-3d-topbar { top:0; min-height:84px; border-width:0 0 3px; background:var(--studio-lavender); }
.cn-designer-3d-bottom { bottom:0; min-height:76px; border-width:3px 0 0; background:var(--studio-lime); }
.cn-designer-3d-identity { min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:15px; }
.cn-designer-3d-identity .cn-eyebrow { flex-basis:100%; width:auto; padding:0; border:0; background:none; box-shadow:none; font:700 10px "Courier New",monospace; }
.cn-designer-3d-identity h2 { margin:2px 0 0; font:900 27px/1 "CN Display",Impact,sans-serif; }
.cn-designer-3d-identity h2 span { color:var(--studio-blue); }
.cn-designer-3d-identity [data-3d-product] { font:700 11px "Courier New",monospace; text-transform:uppercase; }
.cn-designer-3d-commands,.cn-designer-3d-views,.cn-designer-3d-shoes { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.cn-designer-3d-commands button,.cn-designer-3d-views button,.cn-designer-3d-shoes button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 11px; border:2px solid var(--studio-ink); border-radius:0; background:var(--studio-mint); color:var(--studio-ink); font:700 11px/1.1 "Courier New",monospace; white-space:nowrap; cursor:pointer; box-shadow:2px 2px 0 var(--studio-ink); }
.cn-designer-3d-commands button[aria-pressed="true"],.cn-designer-3d-views button[aria-pressed="true"],.cn-designer-3d-shoes button[aria-pressed="true"] { background:var(--studio-blue); color:#fff; }
.cn-designer-3d-commands .cn-designer-3d-close { width:36px; padding:5px; background:var(--studio-pink); }
.cn-designer-3d-views { flex:1; justify-content:center; }
.cn-designer-3d-bottom p { max-width:275px; margin:0; font:700 10px/1.35 "Courier New",monospace; }
.cn-designer-3d-loading { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 17px; border:2px solid var(--studio-ink); background:var(--studio-lime); color:var(--studio-ink); font:700 13px "Courier New",monospace; box-shadow:5px 5px 0 var(--studio-blue); text-align:center; }
.cn-designer-3d [hidden] { display:none!important; }
@media(max-width:760px) { .cn-designer-heading-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } .cn-designer-3d-topbar { align-items:flex-start; flex-direction:column; gap:8px; padding:9px 12px; } .cn-designer-3d-identity h2 { font-size:22px; } .cn-designer-3d-commands { width:100%; flex-wrap:nowrap; } .cn-designer-3d-commands button { flex:1; padding-inline:4px; font-size:10px; } .cn-designer-3d-commands .cn-designer-3d-close { flex:0 0 36px; } .cn-designer-3d-bottom { flex-wrap:wrap; gap:6px; padding:9px 12px; } .cn-designer-3d-views { order:2; flex-basis:100%; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; } .cn-designer-3d-shoes { order:1; } .cn-designer-3d-bottom p { order:3; flex-basis:100%; max-width:none; font-size:9px; } }
@media(max-width:390px) { .cn-designer-heading-actions button:last-child { grid-column:auto; } }

/* Paint-window workspace */
.cn-designer { padding:18px clamp(12px,2vw,30px) 28px; background:var(--studio-mint); }
.cn-designer-window { max-width:1740px; margin:0 auto; border:3px solid var(--studio-ink); background:var(--studio-lavender); box-shadow:8px 8px 0 var(--studio-blue); }
.cn-designer-heading { display:block; padding:0; background:var(--studio-lavender); border-bottom:3px solid var(--studio-ink); }
.cn-designer-titlebar { display:flex; align-items:center; gap:10px; min-height:42px; padding:5px 10px; background:var(--studio-blue); color:#fff; font:800 12px/1.2 "Courier New",monospace; }
.cn-designer-appmark { display:grid; place-items:center; flex:0 0 28px; width:28px; height:27px; border:2px solid var(--studio-ink); background:var(--studio-lime); color:var(--studio-blue); font:900 12px/1 "Courier New",monospace; box-shadow:2px 2px 0 #17183188; }
.cn-designer-window-dots { display:flex; align-items:center; gap:4px; margin-left:auto; }
.cn-designer-window-dots i { display:block; width:11px; height:11px; border:1px solid var(--studio-ink); background:var(--studio-mint); box-shadow:1px 1px 0 var(--studio-ink); }
.cn-designer-window-dots i:nth-child(2) { background:var(--studio-lime); }
.cn-designer-window-dots i:nth-child(3) { background:var(--studio-pink); }
.cn-designer-menubar { position:relative; z-index:20; display:flex; justify-content:space-between; align-items:center; min-height:35px; padding:0 12px; border-bottom:2px solid var(--studio-ink); background:#c5b3ee; font:700 12px/1.2 "Courier New",monospace; }
.cn-designer-menus { display:flex; align-items:stretch; gap:3px; }
.cn-designer-menus details { position:relative; }
.cn-designer-menus summary { display:grid; place-items:center; min-height:33px; padding:0 12px; color:var(--studio-ink); cursor:pointer; list-style:none; }
.cn-designer-menus summary::-webkit-details-marker { display:none; }
.cn-designer-menus summary:hover,.cn-designer-menus details[open] summary { background:var(--studio-lime); }
.cn-designer-menus details > div { position:absolute; top:100%; left:0; z-index:25; width:170px; padding:5px; border:2px solid var(--studio-ink); background:#d9cfef; box-shadow:4px 4px 0 var(--studio-blue); }
.cn-designer-menus button { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:5px 8px; border:0; background:transparent; color:var(--studio-ink); text-align:left; font:700 11px/1.2 "Courier New",monospace; cursor:pointer; }
.cn-designer-menus button:hover { background:var(--studio-mint); }
.cn-designer-menus button .app-icon { width:15px; height:15px; }
.cn-designer-menubar-caption { color:#424261; font-size:10px; white-space:nowrap; }
.cn-designer-projectbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; padding:10px 16px; background:var(--studio-coral); }
.cn-designer-projectbar .cn-eyebrow { display:inline-block; padding:3px 6px; border:2px solid var(--studio-ink); background:var(--studio-lime); box-shadow:2px 2px 0 var(--studio-ink); color:var(--studio-ink); font:700 9px/1 "Courier New",monospace; }
.cn-designer-projectbar h1 { margin:6px 0 0; font-size:28px; line-height:1; white-space:nowrap; }
.cn-designer-heading-actions { flex-wrap:nowrap; gap:7px; }
.cn-designer-heading-actions .cn-designer-command { min-height:35px; padding:6px 9px; font-size:10px; white-space:nowrap; box-shadow:2px 2px 0 var(--studio-ink); }
.cn-designer-heading-actions .app-icon { width:15px; height:15px; }
.cn-designer-workspace { grid-template-columns:minmax(215px,230px) minmax(0,1fr) minmax(210px,230px); height:clamp(580px,calc(100dvh - 260px),860px); min-height:0; }
.cn-designer-tools,.cn-designer-inspector { min-height:0; overflow-y:auto; scrollbar-color:var(--studio-blue) #c5b3ee; }
.cn-designer-tools { background:#c5b3ee; }
.cn-designer-inspector { background:#ffab8d; }
.cn-designer-tool-section,.cn-designer-inspector-section { padding:14px 13px 17px; }
.cn-designer-tool-section h2,.cn-designer-inspector-section h2 { margin-bottom:11px; }
.cn-designer-products { gap:6px; }
.cn-designer-products button { min-height:78px; grid-template-rows:48px auto; gap:3px; font-size:10px; }
.cn-designer-products img { height:48px; }
.cn-designer-products+.cn-designer-label { margin-top:13px; }
.cn-designer-stage-bar { min-height:35px; padding:6px 12px; }
.cn-designer-quickbar { display:flex; align-items:center; gap:6px; flex:0 0 auto; min-height:45px; padding:5px 12px; border-bottom:2px solid var(--studio-ink); background:#d4c5f1; }
.cn-designer-quickbar > span:first-child { margin-right:6px; font:800 10px/1 "Courier New",monospace; }
.cn-designer-quickbar button { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:2px solid var(--studio-ink); border-radius:0; background:var(--studio-mint); color:var(--studio-ink); box-shadow:inset 2px 2px 0 #d9f4e9,inset -2px -2px 0 #6f9f97; cursor:pointer; }
.cn-designer-quickbar button:hover:not(:disabled) { background:var(--studio-lime); transform:none; box-shadow:inset 1px 1px 0 #d9f4e9,inset -2px -2px 0 #6f9f97; }
.cn-designer-quickbar button:active { box-shadow:inset 2px 2px 0 #62737c; }
.cn-designer-tool-divider { flex:0 0 2px; width:2px; height:25px; margin:0 3px; background:#59597b; }
.cn-designer-quickbar-end { margin-left:auto; color:#575879; font:700 9px/1 "Courier New",monospace; white-space:nowrap; }
.cn-designer-stage-inner { min-height:0; padding:15px; background-color:var(--studio-mint); background-image:conic-gradient(#aadacb 25%,#bfe7d8 0 50%,#aadacb 0 75%,#bfe7d8 0); background-size:28px 28px; }
.cn-designer-canvas-frame { width:min(100%,calc(100dvh - 435px),650px); min-width:0; border:3px solid var(--studio-ink); box-shadow:5px 5px 0 var(--studio-blue); }
.cn-designer-stage-footer { min-height:31px; padding:6px 12px; font-size:10px; }
.cn-designer-status { min-height:30px; padding:7px 12px; font:700 10px/1.3 "Courier New",monospace; }
.cn-designer-palette { display:flex; align-items:center; gap:18px; flex:0 0 auto; min-height:69px; padding:7px 12px; border-top:3px solid var(--studio-ink); background:#c5b3ee; }
.cn-designer-palette-group { display:flex; align-items:center; gap:9px; min-width:0; }
.cn-designer-palette-group > span { max-width:63px; font:800 9px/1.15 "Courier New",monospace; }
.cn-designer-colors,.cn-designer-layer-colors { display:flex; align-items:center; gap:4px; }
.cn-designer-colors button,.cn-designer-colors label,.cn-designer-layer-colors button { flex:0 0 27px; width:27px; height:27px; aspect-ratio:auto; padding:0; border:2px solid var(--studio-ink); border-radius:0; background:var(--swatch); box-shadow:inset 2px 2px 0 #d9f4e955,inset -2px -2px 0 #17183155; cursor:pointer; }
.cn-designer-colors label { overflow:hidden; }
.cn-designer-colors button[aria-pressed="true"],.cn-designer-layer-colors button[aria-pressed="true"] { outline:3px solid var(--studio-blue); outline-offset:2px; }
.cn-designer-layer-colors button:disabled { cursor:not-allowed; opacity:.42; }
.cn-designer-palette button:hover:not(:disabled) { transform:none; box-shadow:inset 2px 2px 0 #d9f4e955,inset -2px -2px 0 #17183155; }
.cn-designer-inspector-section:last-child { background:var(--studio-lime); }
@media(max-width:1140px) {
  .cn-designer-workspace { height:auto; grid-template-columns:230px minmax(0,1fr); }
  .cn-designer-stage { min-height:640px; }
  .cn-designer-canvas-frame { width:min(100%,520px); }
  .cn-designer-tools,.cn-designer-inspector { overflow:visible; }
}
@media(max-width:760px) {
  .cn-designer { padding:0 0 20px; }
  .cn-designer-window { border-width:0 0 3px; box-shadow:none; }
  .cn-designer-titlebar { min-height:38px; font-size:10px; }
  .cn-designer-menubar-caption { display:none; }
  .cn-designer-projectbar { display:block; padding:11px 13px 13px; }
  .cn-designer-projectbar h1 { font-size:26px; }
  .cn-designer-heading-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; }
  .cn-designer-heading-actions .cn-designer-command { width:100%; min-width:0; white-space:normal; }
  .cn-designer-workspace { display:flex; height:auto; }
  .cn-designer-stage { min-height:0; }
  .cn-designer-stage-inner { padding:15px 12px 18px; }
  .cn-designer-canvas-frame { width:min(100%,520px); }
  .cn-designer-quickbar-end { display:none; }
  .cn-designer-palette { align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .cn-designer-palette-group { flex:1 1 100%; }
  .cn-designer-tools,.cn-designer-inspector { overflow:visible; }
}
@media(max-width:390px) {
  .cn-designer-titlebar { font-size:9px; }
  .cn-designer-palette { padding-inline:9px; }
  .cn-designer-palette-group { gap:6px; }
  .cn-designer-colors,.cn-designer-layer-colors { gap:3px; }
  .cn-designer-colors button,.cn-designer-colors label,.cn-designer-layer-colors button { flex-basis:25px; width:25px; height:25px; }
  .cn-designer-stage-bar span { font-size:8px; }
}