/* Appearance contract shared with Studio assets/ui-theme.css. UI only; media keep their original colors. */
:root, [data-theme] { color-scheme: var(--ui-color-scheme, dark); }
:root[data-theme="day"], [data-theme="day"] {
  --ui-color-scheme: light;
  --ui-shadow: 0 12px 32px rgba(25, 45, 35, .12);
  --ui-shadow-soft: 0 4px 18px rgba(25, 45, 35, .08);
  --ui-bg0: #f5f3ee;
  --ui-bg1: #faf9f6;
  --ui-bg2: #ffffff;
  --ui-bg3: #efede7;
  --ui-bg4: #e6e3db;
  --ui-bg5: #dbd7cc;
  --ui-text: #292b29;
  --ui-soft: #41443e;
  --ui-muted: #63685f;
  --ui-accent: #765721;
  --ui-strong: #60451c;
  --ui-success: #246641;
  --ui-warning: #825600;
  --ui-danger: #b13732;
  --ui-ink600: #777e71;
  --ui-bg0-rgb: 245, 243, 238;
  --ui-bg1-rgb: 250, 249, 246;
  --ui-bg2-rgb: 255, 255, 255;
  --ui-bg3-rgb: 239, 237, 231;
  --ui-bg4-rgb: 230, 227, 219;
  --ui-bg5-rgb: 219, 215, 204;
  --ui-text-rgb: 41, 43, 41;
  --ui-soft-rgb: 65, 68, 62;
  --ui-muted-rgb: 99, 104, 95;
  --ui-accent-rgb: 118, 87, 33;
  --ui-success-rgb: 36, 102, 65;
  --ui-warning-rgb: 130, 86, 0;
  --ui-danger-rgb: 177, 55, 50;
  --ui-ink-950: 245 243 238;
  --ui-ink-900: 250 249 246;
  --ui-ink-850: 255 255 255;
  --ui-ink-800: 239 237 231;
  --ui-ink-750: 230 227 219;
  --ui-ink-700: 219 215 204;
  --ui-ink-600: 119 126 113;
  --ui-ink-500: 99 104 95;
  --ui-ink-400: 99 104 95;
  --ui-ink-300: 65 68 62;
  --ui-ink-200: 65 68 62;
  --ui-ink-100: 41 43 41;
  --ui-gold-50: 96 69 28;
  --ui-gold-100: 96 69 28;
  --ui-gold-200: 96 69 28;
  --ui-gold-300: 96 69 28;
  --ui-gold-400: 118 87 33;
  --ui-gold-500: 118 87 33;
  --ui-gold-600: 118 87 33;
  --ui-gold-700: 118 87 33;
  --ui-gold-800: 230 227 219;
  --ui-gold-900: 230 227 219;
  --ui-gold-950: 230 227 219;
}
:root[data-theme="celadon"], [data-theme="celadon"] {
  --ui-color-scheme: light;
  --ui-shadow: 0 12px 32px rgba(25, 45, 35, .12);
  --ui-shadow-soft: 0 4px 18px rgba(25, 45, 35, .08);
  --ui-bg0: #e6eeea;
  --ui-bg1: #eef3ef;
  --ui-bg2: #f8faf6;
  --ui-bg3: #dfe9e3;
  --ui-bg4: #d1dfd7;
  --ui-bg5: #bccfc3;
  --ui-text: #203c35;
  --ui-soft: #38554a;
  --ui-muted: #52695d;
  --ui-accent: #376857;
  --ui-strong: #254e40;
  --ui-success: #23633f;
  --ui-warning: #805719;
  --ui-danger: #a93732;
  --ui-ink600: #738b7e;
  --ui-bg0-rgb: 230, 238, 234;
  --ui-bg1-rgb: 238, 243, 239;
  --ui-bg2-rgb: 248, 250, 246;
  --ui-bg3-rgb: 223, 233, 227;
  --ui-bg4-rgb: 209, 223, 215;
  --ui-bg5-rgb: 188, 207, 195;
  --ui-text-rgb: 32, 60, 53;
  --ui-soft-rgb: 56, 85, 74;
  --ui-muted-rgb: 82, 105, 93;
  --ui-accent-rgb: 55, 104, 87;
  --ui-success-rgb: 35, 99, 63;
  --ui-warning-rgb: 128, 87, 25;
  --ui-danger-rgb: 169, 55, 50;
  --ui-ink-950: 230 238 234;
  --ui-ink-900: 238 243 239;
  --ui-ink-850: 248 250 246;
  --ui-ink-800: 223 233 227;
  --ui-ink-750: 209 223 215;
  --ui-ink-700: 188 207 195;
  --ui-ink-600: 115 139 126;
  --ui-ink-500: 82 105 93;
  --ui-ink-400: 82 105 93;
  --ui-ink-300: 56 85 74;
  --ui-ink-200: 56 85 74;
  --ui-ink-100: 32 60 53;
  --ui-gold-50: 37 78 64;
  --ui-gold-100: 37 78 64;
  --ui-gold-200: 37 78 64;
  --ui-gold-300: 37 78 64;
  --ui-gold-400: 55 104 87;
  --ui-gold-500: 55 104 87;
  --ui-gold-600: 55 104 87;
  --ui-gold-700: 55 104 87;
  --ui-gold-800: 209 223 215;
  --ui-gold-900: 209 223 215;
  --ui-gold-950: 209 223 215;
}

/* One native button cycles themes with mouse, touch, Enter or Space. */
.studio-theme-picker { min-width: 0; margin: 10px 0; padding: 8px 12px 14px; border: 0; color: var(--ui-text, #eeede8); }
.studio-theme-picker > legend { padding: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ui-muted, #a8aaa5); }
.studio-theme-orb { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #34383c; color: #e6c98a; box-shadow: inset 0 1px 1px #ffffff18, 0 4px 10px #00000014; outline: 2px solid transparent; outline-offset: 4px; transition: background-color .4s ease, color .4s ease, box-shadow .2s ease, outline-color .2s ease, transform .15s; }
.studio-theme-orb[data-appearance="day"] { background: #b4b1a9; color: #fffef9; }
.studio-theme-orb[data-appearance="celadon"] { background: #93b4a7; color: #f6faf6; }
.studio-theme-glyph { width: 28px; height: 28px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.studio-theme-glyph::after { content: ''; position: absolute; inset: 2px; background: currentColor; border-radius: 50%; clip-path: inset(0 66.667% 0 0); transition: clip-path .4s cubic-bezier(.22,.61,.36,1); }
[data-appearance="day"] .studio-theme-glyph::after { clip-path: inset(0 33.333% 0 0); }
[data-appearance="celadon"] .studio-theme-glyph::after { clip-path: inset(0 0% 0 0); }
.studio-theme-settings { position: relative; }
.studio-theme-settings > summary { width: 36px; height: 36px; display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--ui-muted, #a8aaa5); border: 1px solid var(--ui-bg4, #333b3d); border-radius: 8px; }
.studio-theme-settings > summary::-webkit-details-marker { display: none; }
.studio-theme-settings > summary:hover, .studio-theme-settings[open] > summary { color: var(--ui-accent, #e3be79); }
.studio-theme-settings-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 280px; max-width: calc(100vw - 24px); border: 1px solid var(--ui-bg4, #333b3d); border-radius: 14px; background: var(--ui-bg2, #171b1d); box-shadow: var(--ui-shadow, 0 12px 32px #0006); }
@media (max-width: 640px) { .studio-theme-settings-panel { position: fixed; inset: auto 12px 16px; width: auto; max-width: none; } }
.studio-theme-picker .studio-theme-cycle { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 88px; padding: 12px 6px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.studio-theme-cycle .studio-theme-orb { flex: 0 0 60px; }
.studio-theme-picker .studio-theme-cycle:focus-visible { outline: none; }
.studio-theme-cycle:focus-visible .studio-theme-orb { outline: 2px solid var(--ui-accent, #e3be79); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(var(--ui-accent-rgb, 227, 190, 121), .14), inset 0 1px 1px #ffffff18; }
.studio-theme-cycle:hover .studio-theme-orb { transform: translateY(-2px); }
.studio-theme-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.studio-theme-name { color: var(--ui-accent, #e3be79); font-size: 15px; line-height: 22px; font-weight: 600; }
.studio-theme-hint { color: var(--ui-muted, #a8aaa5); font-size: 12px; line-height: 18px; }
@media (prefers-reduced-motion: reduce) { .studio-theme-orb, .studio-theme-glyph::after { transition: none; } .studio-theme-cycle:hover .studio-theme-orb { transform: none; } }

/* Shared creation / discovery / portfolio navigation. */
.studio-showcase-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin-inline:auto}.studio-showcase-nav a{font-size:15px;font-weight:500;color:var(--ui-muted,#9b9e97);white-space:nowrap;text-decoration:none;padding:14px 0}.studio-showcase-nav a:hover,.studio-showcase-nav a[aria-current=page]{color:var(--ui-accent,#dfbd78)}.studio-showcase-nav a:focus-visible{outline:2px solid #dfbd78;outline-offset:4px}@media(max-width:700px){.studio-public-header{flex-wrap:wrap!important;height:auto!important;min-height:64px;gap:6px 12px!important;padding:12px 16px!important}.studio-public-header .studio-showcase-nav{order:3;width:100%;gap:30px}.studio-public-header .studio-showcase-nav a{padding:8px 0;font-size:14px}.studio-public-header-actions{margin-left:auto}.canvas-shell-gold>header{padding-inline:12px;gap:10px}.canvas-shell-gold .studio-showcase-nav{gap:14px;margin-left:auto;margin-right:0}.canvas-shell-gold .studio-showcase-nav a{font-size:13px}}