.coe-widget-workshop{display:grid;gap:12px;min-width:0;border:1px solid #5b4231;border-radius:12px;padding:14px;background:#14110e}
.coe-studio .coe-code-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--studio-line);padding-bottom:8px}
.coe-studio .coe-code-tabs button{min-height:36px;padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:7px;color:#bbae9a;font:600 11px var(--font-mono,monospace);cursor:pointer}
.coe-studio .coe-code-tabs button[aria-selected=true]{background:#40271a;color:#ffd3ab;border-color:#835331}
.coe-studio .coe-code-input{box-sizing:border-box;display:block;width:100%;min-height:300px;resize:vertical;padding:14px;border:1px solid #3f342b;border-radius:8px;background:#0c0b0a;color:#e7d8c9;font:12px/1.7 Consolas,monospace;tab-size:2;white-space:pre;overflow:auto;overflow-wrap:normal}
.coe-studio .coe-code-input:focus-visible,.coe-studio .coe-code-tabs button:focus-visible{outline:2px solid #ffae6b;outline-offset:2px}
.coe-widget-workshop [role=status]{min-height:2.8em;margin:0}
.coe-maker-fields{border:1px solid #42342a;border-radius:8px;padding:12px}
.coe-maker-fields summary{cursor:pointer;font-size:12px;font-weight:600}
.coe-maker-fields h4{margin:16px 0 8px;color:#b6a38e;font-size:11px;font-weight:500}
.coe-maker-field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:12px;border-top:1px solid #ffffff08}
.coe-maker-field>span{min-width:0;overflow-wrap:anywhere}
.coe-maker-field .input{max-width:52%;min-width:0;font-size:12px;min-height:32px}
.coe-maker-field input[type=color]{width:44px;height:30px;border:0;background:transparent;cursor:pointer}
.coe-maker-field input[type=checkbox]{accent-color:#ff8845;width:18px;height:18px;flex-shrink:0}
.coe-maker-steps{list-style:none;counter-reset:steps;display:grid;gap:12px;margin:0;padding:14px;background:#211910;border-radius:8px}
.coe-maker-steps li{counter-increment:steps;display:grid;grid-template-columns:24px 1fr;gap:3px 9px}
.coe-maker-steps li:before{content:counter(steps);grid-row:span 2;color:#efad7a;border:1px solid #664327;border-radius:50%;width:22px;height:22px;text-align:center;font:12px/20px monospace}
.coe-maker-steps b{font-size:12px;color:#e7d4bf}.coe-maker-steps span{font-size:11px;line-height:1.6;color:#b4a28e}
.coe-maker-entry{margin:12px 14px;padding:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid #684536;border-radius:10px;background:linear-gradient(100deg,#2c1b16,#1c160f)}
.coe-maker-entry>div{flex:1 1 220px}.coe-maker-entry b{font-size:12px}.coe-maker-entry p{font-size:11px;line-height:1.5;margin:5px 0 0;color:#bba58d}
.coe-maker-entry button{border:1px solid #855332;background:#3c2619;color:#ffc495;border-radius:6px;padding:8px 10px;font-size:11px;cursor:pointer}
@media(max-width:600px){.coe-widget-workshop{padding:10px}.coe-studio .coe-code-input{min-height:220px}.coe-studio .coe-two{grid-template-columns:1fr}.coe-studio .coe-pv-tools button{min-height:32px}}

/* Maker workspace: one set of file actions, two explicit editing modes. */
.coe-studio [hidden]{display:none!important}
.coe-design-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:0 0 18px;border-bottom:1px solid var(--studio-line)}
.coe-design-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}
.coe-design-toolbar a{font-size:12px;color:#ffc18f;text-underline-offset:4px}
.coe-design-toolbar .button,.coe-widget-apply .button{min-height:40px;border-radius:8px!important}
.coe-design-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.coe-design-modes button{min-width:0;padding:16px;text-align:left;border:1px solid #45372b;border-radius:10px;background:#16120e;color:#ddcbb7;cursor:pointer}
.coe-design-modes b{display:block;font-size:14px;margin-bottom:6px}.coe-design-modes span{font-size:12px;line-height:1.5;color:#b5a48f}
.coe-design-modes button[aria-pressed=true]{border-color:#bb6c38;background:linear-gradient(125deg,#392317,#201811);box-shadow:inset 3px 0 #ff883f}
.coe-font-upload{border:1px solid #45372b;border-radius:10px;padding:14px;margin:16px 0;font-size:12px}
.coe-font-upload summary{cursor:pointer;color:#dcc9b4;font-weight:600}.coe-font-upload label{display:grid;gap:7px;margin:14px 0 8px}.coe-font-upload .input{width:100%}
.coe-widget-size{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:#201a13;border-radius:8px}.coe-widget-size>p{grid-column:1/-1;margin:0}
.coe-widget-apply{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid #45372b;padding-top:14px}.coe-widget-apply p{flex-basis:100%;margin:0;font-size:12px;line-height:1.6}
.coe-studio .coe-widget-workshop{padding:16px;gap:16px}.coe-maker-fields{background:#19140f}
.coe-maker-field{min-height:48px;font-size:13px}.coe-maker-field .input{font-size:13px;min-height:38px;flex:0 1 52%}
.coe-studio .coe-pv-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border-top:0;border-bottom:1px solid var(--studio-line);background:#15120e}
.coe-viewport-label{display:grid;gap:6px;flex:1 1 190px;font-size:11px;color:#bba990}
.coe-viewport-label select{width:100%;min-height:38px;padding:7px 12px;background:#211910;color:#f0dac1;border:1px solid #5c4430;border-radius:8px;font:12px var(--font-body,sans-serif)}
.coe-background-picker{display:flex;flex-wrap:wrap;gap:6px;align-self:end}
.coe-background-picker>span{flex-basis:100%;font-size:11px;color:#bba990}.coe-background-picker>div{display:flex;flex-wrap:wrap;gap:6px}
.coe-widget-size>b{grid-column:1/-1;font-size:12px}.coe-widget-dimensions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coe-studio .coe-text-link{padding:0;border:0;background:none;color:#ffbe88;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.coe-studio .coe-bg-choice{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid #4a3a28;border-radius:8px;background:#1b160f;color:#cdbba4;font:11px var(--font-body,sans-serif);cursor:pointer}
.coe-studio .coe-bg-choice[aria-pressed=true]{border-color:#ea9453;background:#392718;color:#ffe0be}
.coe-bg-choice i{width:16px;height:16px;border-radius:50%;border:1px solid #82715a;flex-shrink:0}.coe-bg-choice .is-dark{background:#14242b}.coe-bg-choice .is-light{background:#f4efdd}.coe-bg-choice .is-checker{background:repeating-conic-gradient(#403932 0 25%,#201c18 0 50%) 0/8px 8px}
.coe-preview-hint{flex-basis:100%;margin:0;color:#b6a68f;font-size:11px;line-height:1.6}
.coe-studio .coe-pv-tools .coe-pv-flags{flex:1 1 100%;gap:8px}
.coe-studio .coe-pv-tools button:focus-visible,.coe-design-modes button:focus-visible{outline:2px solid #ffd4a6;outline-offset:3px}
@media(max-width:760px){.coe-studio .coe-pv-tools{padding:12px;gap:10px}.coe-background-picker{width:100%}.coe-background-picker button{flex:1}.coe-design-toolbar{align-items:flex-start}.coe-design-modes button{padding:12px}.coe-studio .coe-widget-workshop{padding:12px}}
@media(prefers-reduced-motion:no-preference){.coe-design-modes button,.coe-bg-choice{transition:background .18s,border-color .18s}.coe-design-modes button:hover{border-color:#bc8356}}

/* The workshop is one quiet workspace, with secondary tools behind disclosures. */
.dashboard-shell .coe-studio .coe-workshop-content{padding:20px;display:grid;gap:20px;min-width:0}
.dashboard-shell .coe-studio .coe-workshop-content .coe-sub,
.dashboard-shell .coe-studio .coe-widget-workshop{padding:0;border:0;background:transparent;box-shadow:none}
.dashboard-shell .coe-studio .coe-design-toolbar{padding:0 0 18px;border-color:#34383e;align-items:center}
.dashboard-shell .coe-studio .coe-design-toolbar a,
.dashboard-shell .coe-studio .coe-text-link{color:#c6ccd5}
.dashboard-shell .coe-studio .coe-font-library{display:grid;gap:10px;padding:0 0 20px;border-bottom:1px solid #34383e}
.coe-font-library b{font-size:14px}.coe-font-library p{margin:6px 0 0}.coe-font-library .cv-hint{color:#a9afb8}
.dashboard-shell .coe-studio .coe-design-modes{margin:0;gap:8px;background:#151719;padding:4px;border:1px solid #33373d;border-radius:10px}
.dashboard-shell .coe-studio .coe-workshop-content .coe-design-modes button{padding:12px;border:1px solid transparent;background:transparent;border-radius:7px;box-shadow:none}
.dashboard-shell .coe-studio .coe-workshop-content .coe-design-modes button[aria-pressed=true]{background:#2b2e33;border-color:#555d68;box-shadow:none}
.dashboard-shell .coe-studio .coe-design-modes span{color:#b1b8c2;font-size:12px}
.dashboard-shell .coe-studio .coe-font-upload{border:0;border-top:1px solid #34383e;border-radius:0;padding:16px 0 0;margin:18px 0;background:transparent}
.dashboard-shell .coe-studio .coe-hooks summary,
.dashboard-shell .coe-studio .coe-font-upload summary,
.dashboard-shell .coe-studio .coe-expert-head>span{color:#c4cbd4;font-family:inherit;letter-spacing:0;text-transform:none}
.dashboard-shell .coe-studio .coe-expert-head{border-color:#34383e;padding:12px 20px}
.dashboard-shell .coe-studio .coe-expert-head button{background:#25282d;border-color:#4c535d;color:#d7dce4}
.dashboard-shell .coe-studio .coe-code-input,.dashboard-shell .coe-studio .coe-css{background:#121416;border-color:#3a4048;color:#dde2e9;border-radius:8px;line-height:1.7}
.dashboard-shell .coe-studio .coe-code-tabs button[aria-selected=true]{background:#30343a;border-color:#59616d;color:#eef0f4}
.dashboard-shell .coe-studio .coe-maker-fields,.dashboard-shell .coe-studio .coe-widget-size{background:#191c20;border-color:#353b44}
.dashboard-shell .coe-studio .coe-pv-tools{padding:14px 0;display:grid;grid-template-columns:1fr;gap:14px;background:transparent;border-color:#34383e}
.dashboard-shell .coe-studio .coe-viewport-label{gap:7px;font-size:12px;color:#b3bbc6}
.dashboard-shell .coe-studio .coe-viewport-label select{box-sizing:border-box;min-height:42px;max-width:100%;background:#21252a;border:1px solid #4b535e;border-radius:8px;color:#e6eaf0;font:13px var(--font-body,sans-serif);padding:9px 12px;box-shadow:none;outline:none}
.dashboard-shell .coe-studio .coe-viewport-label select:focus-visible{outline:2px solid #bec9d9;outline-offset:2px}
.dashboard-shell .coe-studio .coe-background-picker>span,.dashboard-shell .coe-studio .coe-preview-hint{color:#a9b1bd}
.dashboard-shell .coe-studio .coe-bg-choice{background:#202429;color:#c2cad6;border-color:#444b56;font-size:12px;box-shadow:none}
.dashboard-shell .coe-studio .coe-bg-choice[aria-pressed=true]{background:#363c45;color:#fff;border-color:#929eaf}
.dashboard-shell .coe-studio .coe-preview-options{border:0;background:none;padding:0;margin:0 0 14px}
.dashboard-shell .coe-studio .coe-preview-options>summary{padding:10px 0;color:#bec6d2;font-size:12px}
.coe-font-add{margin-top:12px}.coe-font-dialog [data-co-font^="upload:"]>span{color:#9dbab0}
/* Editor surface: one level of structure, files beside the code they affect. */
.dashboard-shell .coe-studio .coe-workshop-content { gap:18px; --studio-line:#373d46; color:#e6eaf0; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-sub-head>span { color:#e4e8ef; font:600 15px/1.4 var(--font-body,sans-serif); letter-spacing:0; text-transform:none; }
.dashboard-shell .coe-studio .coe-workshop-content .cv-hint { color:#a6afbc; font-size:12px; line-height:1.6; }
.dashboard-shell .coe-studio .coe-workshop-content :is(.coe-sub,.coe-widget-workshop,.coe-widget-size,.coe-maker-fields) { background:transparent; border:0; padding:0; box-shadow:none; }
.dashboard-shell .coe-studio .coe-workshop-content :is(.coe-maker-fields,.coe-widget-size) { border-block:1px solid #363c45; border-radius:0; padding-block:16px; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-css { min-height:230px; padding:16px; font-size:13px; border-color:#404855; }
.coe-css-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.coe-css-actions .coe-text-link:disabled { opacity:.4; cursor:default; }
.coe-file-status { display:block; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-font-library { display:block; padding:18px 0 0; border:0; border-top:1px solid #373d46; background:none; }
.coe-font-library summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; cursor:pointer; list-style:none; }
.coe-font-library summary:after { content:'+'; margin-left:auto; color:#aeb7c5; font-size:18px; }
.coe-font-library[open] summary:after { content:'−'; }
.coe-font-library summary span { font-size:12px; color:#a0aaba; }
.coe-font-library .coe-row { margin-top:12px; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-hooks { margin:0; padding:12px 0; border:0; border-top:1px solid #30363f; background:transparent; border-radius:0; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-hooks summary { font-size:12px; color:#b6c0cf; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-maker-steps { background:none; padding:14px 0 0; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-maker-steps li:before { color:#c1cbd9; border-color:#586373; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-maker-steps b { color:#e0e6ef; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-maker-steps span { color:#a8b3c2; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-code-tabs button { color:#acb6c5; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-code-tabs button[aria-selected=true] { background:#323a45; color:#edf2f8; border-color:#596778; }
.dashboard-shell .coe-studio .coe-workshop-content :is(.coe-css,.coe-code-input,.coe-code-tabs button):focus-visible { outline:2px solid #aabbd3; outline-offset:2px; }
.dashboard-shell .coe-studio .coe-workshop-content .coe-widget-apply { border-color:#373d46; }
.coe-studio:has([data-co-expert-head]:not([hidden])) [data-co-expert],.coe-studio:has([data-co-expert-head]:not([hidden])) .coe-maker-entry { display:none; }
@media(max-width:760px){.dashboard-shell .coe-studio .coe-workshop-content{padding:14px}.dashboard-shell .coe-studio .coe-design-modes{grid-template-columns:1fr}.dashboard-shell .coe-studio .coe-background-picker>div{width:100%}.dashboard-shell .coe-studio .coe-bg-choice{flex:1;justify-content:center}}

/* Shared editor controls: one graphite surface, consistent rows and hit areas. */
.dashboard-shell .coe.coe-studio { --studio-line:#353b44; --studio-surface:#1c1f24; --studio-muted:#a5afbd; }
.dashboard-shell .coe.coe-studio .coe-left { container:coecontrols / inline-size; border-color:#363d46; background:#1c1f24; }
.dashboard-shell .coe.coe-studio .coe-group-body { gap:20px; padding-bottom:20px; }
.dashboard-shell .coe.coe-studio .coe-sub { gap:16px; margin:0; padding:18px 0 0; border:0; border-top:1px solid #343b45; border-radius:0; background:transparent; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-sub-head { gap:8px 14px; min-height:44px; }
.dashboard-shell .coe.coe-studio .coe-sub-head>span,.dashboard-shell .coe.coe-studio .coe-sub-title { color:#e0e5ed; font:600 13px/1.5 var(--font-body,sans-serif); letter-spacing:0; text-transform:none; }
.dashboard-shell .coe.coe-studio .coe-sub-head>small { color:#9da8b8; font-size:11px; line-height:1.6; }
.dashboard-shell .coe.coe-studio .coe-two { gap:18px 20px; align-items:start; }
.dashboard-shell .coe.coe-studio .coe-cell { align-self:stretch; align-content:start; }
.dashboard-shell .coe.coe-studio .coe-switches { gap:6px 18px; }
.dashboard-shell .coe.coe-studio :is(.cv-field-label,.coe-range label) { color:#bcc6d3; font:500 12px/1.5 var(--font-body,sans-serif); letter-spacing:0; text-transform:none; }
.dashboard-shell .coe.coe-studio .coe-range label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px 12px; margin-bottom:4px; }
.dashboard-shell .coe.coe-studio .coe-range label>span { min-width:0; overflow-wrap:anywhere; }
.dashboard-shell .coe.coe-studio .coe-range label>b { color:#d4dde9; font:500 11px/1.7 var(--font-mono,monospace); white-space:nowrap; }
.dashboard-shell .coe.coe-studio .cv-hint { color:#a0abbb; font:400 11px/1.6 var(--font-body,sans-serif); }
.dashboard-shell .coe.coe-studio :is(.coe-field,.coe-range) { display:grid; gap:7px; }
.dashboard-shell .coe.coe-studio .cf-opt { display:grid; grid-template-columns:minmax(0,1fr) 38px; align-items:center; gap:14px; min-height:44px; width:100%; padding:8px 0; border:0; border-radius:6px; background:transparent; box-shadow:none; }
.dashboard-shell .coe.coe-studio .cf-opt:hover { background:transparent; }
.dashboard-shell .coe.coe-studio .cf-opt>span { min-width:0; gap:4px; }
.dashboard-shell .coe.coe-studio .cf-opt b { color:#dce3ed; font:500 12px/1.5 var(--font-body,sans-serif); }
.dashboard-shell .coe.coe-studio .cf-opt small { color:#99a6b8; font:400 11px/1.55 var(--font-body,sans-serif); }
.dashboard-shell .coe.coe-studio .cf-opt>i { margin:0; width:38px; height:22px; border:1px solid #57616e; background:#353e49; box-shadow:none; }
.dashboard-shell .coe.coe-studio .cf-opt>i:after { width:16px; height:16px; top:2px; left:2px; background:#aeb9c8; box-shadow:none; }
.dashboard-shell .coe.coe-studio .cf-opt input:checked+i { border-color:#ff884d; background:#ff884d; box-shadow:none; }
.dashboard-shell .coe.coe-studio .cf-opt input:checked+i:after { transform:translateX(16px); background:#202833; }
.dashboard-shell .coe.coe-studio .cf-opt input:focus-visible+i { outline:2px solid #ffad7d; outline-offset:3px; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-sub-head .coe-switch { width:auto; min-width:118px; margin-left:auto; padding-block:6px; }
.dashboard-shell .coe.coe-studio .coe-contrast-row { width:100%; }
.dashboard-shell .coe.coe-studio .coe-contrast-row .coe-switch { padding:4px 0 10px; }
.dashboard-shell .coe.coe-studio .cf-chips { gap:6px; }
.dashboard-shell .coe.coe-studio .coe-chip { min-height:44px; height:auto; padding:8px 10px; gap:7px; border:1px solid #343d49; border-radius:7px; color:#a7b4c6; background:transparent; font:500 11px/1.4 var(--font-body,sans-serif); box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-chip:has(input:checked) { background:#382c27; border-color:#b16b49; color:#ffe0cd; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-chip>i { flex:none; width:6px; height:6px; background:#586577; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-chip:has(input:checked)>i { background:#ff965d; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-chip:has(input:focus-visible) { outline:2px solid #ffad7d; outline-offset:2px; box-shadow:none; }
.dashboard-shell .coe.coe-studio :is(.coe-field.is-off,.coe-range.is-off,.coe-color.is-off,.coe-dep.is-off,.coe-listfield.is-off,.coe-switch.is-off,.coe-chip.is-off) { opacity:.65; }
.dashboard-shell .coe.coe-studio :is(.coe-dep.is-off,.coe-listfield.is-off) .is-off { opacity:1; }
.dashboard-shell .coe.coe-studio .coe-range-row { min-height:44px; gap:10px; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range] { appearance:none; -webkit-appearance:none; height:44px; min-width:0; background:transparent; accent-color:#ff884d; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range]::-webkit-slider-runnable-track { height:4px; border:0; border-radius:4px; background:#46515f; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border:2px solid #ffc09c; border-radius:50%; background:#ff884d; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range]::-moz-range-track { height:4px; border:0; border-radius:4px; background:#46515f; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range]::-moz-range-thumb { width:12px; height:12px; border:2px solid #ffc09c; border-radius:50%; background:#ff884d; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-range-row input[type=range]:focus-visible { outline:2px solid #ffad7d; outline-offset:2px; border-radius:5px; }
.dashboard-shell .coe.coe-studio .coe-color .wg-color-well { min-height:44px; height:44px; max-width:none; width:100%; padding:0 10px; gap:10px; background:#171b20; border:1px solid #404a58; border-radius:8px; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-color .wg-color-well>i { width:24px; height:24px; border-radius:5px; border-color:#647184; }
.dashboard-shell .coe.coe-studio .coe-color .wg-color-well code { color:#c1cddb; font-size:11px; }
.dashboard-shell .coe.coe-studio :is(.coe-num,.coe-field:not(.coe-platform-field)>.input,.coe-field:not(.coe-platform-field)>.select,.coe-font-trigger) { min-height:44px; background:#171b20; border:1px solid #404a58; border-radius:8px; color:#d6dfeb; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-seg { gap:4px; padding:4px; background:#15191e; border:1px solid #353e4b; border-radius:9px; }
.dashboard-shell .coe.coe-studio .coe-seg button { min-height:44px; height:auto; padding:9px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:#a8b6c8; font:500 12px/1.5 var(--font-body,sans-serif); box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-seg button.is-on { background:#382c27; color:#ffe0cd; border-color:#b16b49; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-seg button:focus-visible { outline:2px solid #ffad7d; outline-offset:1px; }
@container coecontrols (max-width:420px) {
  .dashboard-shell .coe.coe-studio .coe-two,.dashboard-shell .coe.coe-studio .coe-switches { grid-template-columns:minmax(0,1fr); gap:12px; }
  .dashboard-shell .coe.coe-studio .coe-sub { gap:12px; padding-top:16px; }
  .dashboard-shell .coe.coe-studio .coe-sub-head>small { flex-basis:100%; }
}
.dashboard-shell .coe-font-dialog { background:#1b2027; color:#e2e9f2; border-color:#465466; }
.dashboard-shell .coe-font-dialog p,.dashboard-shell .coe-font-options span { color:#a9b6c8; }
.dashboard-shell .coe-font-options small { color:#d6e0ee; }
.dashboard-shell .coe-font-options button[aria-selected=true] { background:#303d4d; border-color:#657e9b; }
.dashboard-shell .coe-font-options button[aria-selected=true] b:after { color:#b8cde7; }
.coe-font-entry { display:flex; align-items:center; gap:8px; border-bottom:1px solid #303b49; }
.coe-font-entry>[data-co-font] { flex:1; min-width:0; }
.dashboard-shell .coe-font-entry>.coe-font-publish { flex:0 0 auto; width:auto; min-height:44px; padding:8px; font-size:11px; color:#bdd0e9; }
.dashboard-shell .coe-font-upload-dialog { height:auto; max-height:calc(100dvh - 32px); overflow-y:auto; gap:14px; }
.coe-font-upload-dialog>label { display:grid; gap:8px; font-size:13px; }
.coe-font-upload-dialog input[type=file] { padding:12px; white-space:normal; }
.coe-font-upload-dialog .coe-font-publish-choice { display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-block:1px solid #3c4858; cursor:pointer; }
.coe-font-publish-choice input { flex:none; width:18px; height:18px; margin:3px 0 0; accent-color:#a2bad8; }
.coe-font-publish-choice span { display:grid; gap:6px; }
.coe-font-publish-choice small { color:#a6b4c7; font-size:12px; line-height:1.65; }
.dashboard-shell .coe-font-dialog .coe-font-categories button { min-height:38px; padding:8px 10px; border-color:#475467; border-radius:7px; color:#adbbce; }
.dashboard-shell .coe-font-dialog .coe-font-categories button[aria-pressed=true] { background:#334255; color:#e4edf9; border-color:#7088a8; }
.dashboard-shell .coe-font-dialog header button { width:44px; height:44px; border-color:#4d5d72; }
.dashboard-shell .coe-font-dialog .input { border-color:#47586e; background:#151b23; color:#dbe5f3; }

/* Orange communicates selection and actions; neutral tags are stored values. */
.dashboard-shell .coe.coe-studio .coe-adder button { flex-basis:44px; height:44px; border:1px solid #b16b49; border-radius:8px; background:#382c27; color:#ffad7d; box-shadow:none; }
.dashboard-shell .coe.coe-studio .coe-adder button:hover:not(:disabled) { background:#4a3328; border-color:#ff965d; }
.dashboard-shell .coe.coe-studio .coe-adder .input { min-height:44px; background:#171b20; border-color:#404a58; border-radius:8px; }
.dashboard-shell .coe.coe-studio .coe-tag { border-color:#454e5a; background:#282e36; color:#d1d9e4; border-radius:7px; }
.dashboard-shell .coe.coe-studio .coe-tag button:hover { background:#473027; color:#ffad7d; }
.dashboard-shell .coe.coe-studio .coe-list-reset { color:#ffad7d; }
.dashboard-shell .coe.coe-studio .coe-group-chev,
.dashboard-shell .coe.coe-studio .coe-font-library summary:after,
.dashboard-shell .coe.coe-studio .workspace-disclosure>summary:after { color:#ffad7d; }
.dashboard-shell .coe.coe-studio .coe-workshop-content .coe-design-modes button[aria-pressed=true],
.dashboard-shell .coe.coe-studio .coe-workshop-content .coe-code-tabs button[aria-selected=true],
.dashboard-shell .coe.coe-studio .coe-bg-choice[aria-pressed=true] { background:#382c27; border-color:#b16b49; color:#ffe0cd; }
.dashboard-shell .coe.coe-studio .coe-switch input:checked ~ i { box-shadow:none; }
@media(prefers-reduced-motion:no-preference) {
  .dashboard-shell .coe-platform-picker button,.dashboard-shell .coe.coe-studio .coe-chip,.dashboard-shell .coe.coe-studio .cf-opt>i { transition:background .15s,border-color .15s,color .15s; }
}