/* The studio palette is opt-in. Existing site themes retain their own rules. */
html[data-site-theme="studio"]:root {
  color-scheme: light;
  --studio-sans: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --studio-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, Georgia, serif;
  --bg: #f6f3ec;
  --ink: #1c1b19;
  --paper: #f6f3ec;
  --paper-deep: #efeae0;
  --surface: #fffdf8;
  --surface-2: #efeae0;
  --line: #e3dccd;
  --muted: #6d685f;
  --accent: #d9462b;
  --accent-ink: #fff;
  --brand: #2447d8;
  --blue: #d9462b;
  --blue-deep: #bd3c25;
  --signal: #f8ebe4;
  --theme-font: var(--studio-sans);
  --theme-on-accent: #fff;
  --theme-panel: var(--surface);
  --theme-radius: 16px;
  --theme-shadow: 0 1px 2px #1c1b190d, 0 9px 25px -15px #1c1b1933;
  --studio-shadow: 0 1px 2px #1c1b190d, 0 8px 24px -12px #1c1b192e;
  --studio-shadow-hover: 0 2px 4px #1c1b190f, 0 22px 44px -18px #1c1b1952;
  --studio-ease: cubic-bezier(.22, 1, .36, 1);
  --studio-brand: #2447d8;
}

html[data-site-theme="studio"]:root body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--ink);
  font-family: var(--studio-sans);
  line-height: 1.65;
}
html[data-site-theme="studio"]:root body::before { display: none !important; }
html[data-site-theme="studio"]:root a { color: inherit; }
html[data-site-theme="studio"]:root :is(h1, h2, h3) {
  color: inherit;
  font-family: var(--studio-serif) !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
html[data-site-theme="studio"]:root :is(.brand, .logo) {
  font-family: var(--studio-sans) !important;
  letter-spacing: -.015em !important;
}
html[data-site-theme="studio"]:root ::selection { background: var(--accent); color: #fff; }
html[data-site-theme="studio"]:root :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
}
html[data-site-theme="studio"]:root :is(input, textarea)::placeholder { color: #8a8479; opacity: 1; }
html[data-site-theme="studio"]:root :is(input, textarea, select) { accent-color: var(--accent); }

/* Navigation shared by the home page, blog templates, and open-source page. */
html[data-site-theme="studio"]:root :is(.topbar, .site-header) {
  background: #f6f3eced;
  border-color: var(--line);
  box-shadow: 0 1px 0 #e3dccdba;
  backdrop-filter: saturate(1.2) blur(14px);
}
html[data-site-theme="studio"]:root .topbar-inner { min-height: 68px; gap: 20px; }
html[data-site-theme="studio"]:root :is(.brand, .site-header .logo) {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
html[data-site-theme="studio"]:root :is(.brand-mark, .logo-mark) {
  background: var(--ink) !important;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  color: var(--bg) !important;
  font-family: var(--studio-sans);
  font-size: 10px;
  letter-spacing: .04em;
}
html[data-site-theme="studio"]:root .brand:hover .brand-mark { background: var(--accent) !important; }
html[data-site-theme="studio"]:root .brand small { color: var(--muted); }
html[data-site-theme="studio"]:root :is(.main-nav, .site-nav, .nav) { gap: 4px; }
html[data-site-theme="studio"]:root :is(.main-nav a, .site-nav a, .nav a) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--studio-sans);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
html[data-site-theme="studio"]:root :is(.main-nav a:hover, .site-nav a:hover, .nav a:hover) {
  background: var(--surface-2);
  color: var(--ink);
}
html[data-site-theme="studio"]:root :is(.main-nav a.is-current, .main-nav a[aria-current], .site-nav a.is-current, .nav a.active) {
  background: var(--surface);
  box-shadow: var(--theme-shadow);
  color: var(--ink);
}
html[data-site-theme="studio"]:root :is(.site-nav .who, .site-nav .who a) { color: var(--muted); }

/* Header account, notification, and theme controls remain in their existing slots. */
html[data-site-theme="studio"]:root :is(.theme-trigger, .site-notification-button) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px #1c1b190c;
  color: var(--ink);
  font-family: var(--studio-sans);
  font-weight: 700;
}
html[data-site-theme="studio"]:root :is(.theme-trigger:hover, .site-notification-button:hover) {
  background: var(--surface-2);
  border-color: #cfc5b4;
  color: var(--ink);
}
html[data-site-theme="studio"]:root .site-account-button {
  background: var(--ink);
  border-radius: 999px;
  color: #fff;
  font-family: var(--studio-sans);
}
html[data-site-theme="studio"]:root .site-account-button:hover { background: var(--accent); filter: none; }
html[data-site-theme="studio"]:root .site-notification-button.has-unread {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
html[data-site-theme="studio"]:root .site-notification-dialog {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 22px;
  box-shadow: 0 28px 80px #1c1b1933;
  color: var(--ink);
}
html[data-site-theme="studio"]:root .site-notification-list article {
  background: var(--bg);
  border-color: var(--line);
  border-radius: 14px;
}
html[data-site-theme="studio"]:root .site-notification-list article.unread { border-color: var(--accent); }
html[data-site-theme="studio"]:root .site-notification-list button { color: var(--accent); }

/* Buttons and inputs on article, account, admin, and open-source pages. */
html[data-site-theme="studio"]:root :is(.action, .btn, .auth-box button, .editor-box .toolbar button) {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--studio-sans);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
html[data-site-theme="studio"]:root :is(.action:hover, .btn:hover, .auth-box button:hover, .editor-box .toolbar button:hover) {
  background: var(--surface-2);
  border-color: #cfc5b4;
  box-shadow: 0 4px 15px #1c1b1914;
  color: var(--ink);
  transform: translateY(-1px);
}
html[data-site-theme="studio"]:root :is(.action.primary, .btn.primary, .auth-box button) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
html[data-site-theme="studio"]:root :is(.action.primary:hover, .btn.primary:hover, .auth-box button:hover) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
html[data-site-theme="studio"]:root .btn.danger {
  background: #fff2ee;
  border-color: #e6b3a8;
  color: #ae3725;
}
html[data-site-theme="studio"]:root :is(.auth-box input, .search-box input, .title-input, #content, .comment-form textarea, .user-create input, .user-create select, .ranking-filters select, .feedback-form input, .feedback-form textarea, .game-rating-form select) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none !important;
  color: var(--ink);
  font-family: var(--studio-sans);
}
html[data-site-theme="studio"]:root :is(.auth-box input, .search-box input, .title-input, #content, .comment-form textarea, .user-create input, .user-create select, .ranking-filters select, .feedback-form input, .feedback-form textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px #d9462b1f !important;
  outline: none;
}
html[data-site-theme="studio"]:root :is(.auth-box label, .game-upload label, .group-checks .check, .hint) { color: var(--muted); }
html[data-site-theme="studio"]:root :is(.error, .feedback-notice.error) { color: #a33324; }
html[data-site-theme="studio"]:root :is(.ok, .feedback-notice.ok) { color: #287348; }

/* The wardrobe is a shared component; only its studio appearance changes. */
html[data-site-theme="studio"]:root .theme-dialog {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 22px;
  box-shadow: 0 28px 90px #1c1b1940;
  color: var(--ink);
  font-family: var(--studio-sans);
}
html[data-site-theme="studio"]:root .theme-dialog::backdrop { background: #211c1980; }
html[data-site-theme="studio"]:root .theme-heading h2 { font-family: var(--studio-serif) !important; }
html[data-site-theme="studio"]:root .theme-eyebrow { color: var(--accent); }
html[data-site-theme="studio"]:root .theme-close {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
}
html[data-site-theme="studio"]:root .theme-option {
  border-color: var(--line);
  border-radius: 14px;
  color: var(--ink);
}
html[data-site-theme="studio"]:root .theme-option:hover { border-color: var(--accent); }
html[data-site-theme="studio"]:root .theme-option[aria-pressed="true"] {
  background: #fff7f2;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
html[data-site-theme="studio"]:root :is(.theme-check, .theme-reset) { color: var(--accent); }
.preview-studio {
  --preview-bg: #f6f3ec;
  --preview-ink: #1c1b19;
  --preview-line: #e3dccd;
  background-image: radial-gradient(circle at 88% 10%, #d9462b30, transparent 40%), linear-gradient(#fffdf8 0 0);
}

/* Reading, accounts, administration, and rankings. */
html[data-site-theme="studio"]:root .wrap { padding-top: 48px; }
html[data-site-theme="studio"]:root :is(.page-head h1, .article-view h1) {
  color: var(--ink);
  font-family: var(--studio-serif) !important;
  font-weight: 800;
  letter-spacing: -.035em !important;
}
html[data-site-theme="studio"]:root :is(.page-head .subtitle, .article-view .meta, .article-card .date, .comment-meta span, .gallery-title) { color: var(--muted); }
html[data-site-theme="studio"]:root :is(.article-card, .article-body, .auth-box, .comment, .empty, .image-list li, .dropzone, .grp-edit form) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--theme-shadow);
  color: var(--ink);
}
html[data-site-theme="studio"]:root .article-card { padding: 22px 24px; }
html[data-site-theme="studio"]:root .article-card:hover {
  background: #fffaf2;
  border-color: #d6c9b8;
  box-shadow: 0 2px 4px #1c1b190d, 0 16px 34px -17px #1c1b193b;
  transform: translateY(-2px);
}
html[data-site-theme="studio"]:root .article-card h2 { color: var(--ink); font-family: var(--studio-serif) !important; }
html[data-site-theme="studio"]:root .article-card:hover h2 { color: var(--accent); }
html[data-site-theme="studio"]:root .article-body { line-height: 1.85; }
html[data-site-theme="studio"]:root .article-view .article-body { padding: 28px 32px; }
html[data-site-theme="studio"]:root .wrap .article-list { display: grid; gap: 14px; border: 0; }
html[data-site-theme="studio"]:root .article-body blockquote {
  border-left-color: var(--accent);
  background: #f9f3ea;
  color: #514b43;
  padding: 12px 18px;
}
html[data-site-theme="studio"]:root :is(.article-body a, .back-link a, .admin-table a, .grp-edit summary, .site-footer a, .record-link) { color: var(--accent); }
html[data-site-theme="studio"]:root .article-body pre {
  border-radius: 12px;
  background: #242321;
  color: #f5f0e5;
}
html[data-site-theme="studio"]:root .auth-box { max-width: 420px; padding: 32px; }
html[data-site-theme="studio"]:root .auth-box h1 { font-family: var(--studio-serif) !important; }
html[data-site-theme="studio"]:root .comment-meta strong { color: var(--accent); }
html[data-site-theme="studio"]:root .comment-body { color: var(--ink); }
html[data-site-theme="studio"]:root :is(.visibility-row .radio, .group-checks .check) { color: var(--ink); }
html[data-site-theme="studio"]:root .editor-side { background: var(--surface-2); color: var(--ink); }
html[data-site-theme="studio"]:root .dropzone.drag { background: #fff5ee; border-color: var(--accent); }

html[data-site-theme="studio"]:root :is(.ranking-table-wrap, .admin-table) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--theme-shadow);
  color: var(--ink);
}
html[data-site-theme="studio"]:root :is(.ranking-table th, .admin-table th) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  font-weight: 700;
}
html[data-site-theme="studio"]:root :is(.ranking-table td, .admin-table td) { border-color: var(--line); color: var(--ink); }
html[data-site-theme="studio"]:root :is(.ranking-table tbody tr:hover td, .admin-table tr:hover td) { background: #fff7f2; }
html[data-site-theme="studio"]:root .ranking-filters select { min-height: 44px; }
html[data-site-theme="studio"]:root .checkin-action {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--theme-shadow);
  color: var(--ink);
}
html[data-site-theme="studio"]:root .checkin-action > span { color: var(--accent); }
html[data-site-theme="studio"]:root :is(.footer, .site-footer) { border-color: var(--line); color: var(--muted); }

/* Open-source page components keep their working structure and code browser. */
html[data-site-theme="studio"]:root :is(.architecture, .privacy) {
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: var(--theme-shadow);
  overflow: hidden;
}
html[data-site-theme="studio"]:root .layer {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-site-theme="studio"]:root .layer b {
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
}
html[data-site-theme="studio"]:root .privacy { background: var(--surface); }
html[data-site-theme="studio"]:root .privacy-title { background: var(--ink); color: #fff; }
html[data-site-theme="studio"]:root .privacy-list div { border-color: var(--line); }
html[data-site-theme="studio"]:root :is(.layer p, .privacy-list p, .stat span) { color: var(--muted); }
html[data-site-theme="studio"]:root .terminal {
  background: #242321;
  border-radius: 20px;
  box-shadow: 0 18px 44px -25px #1c1b1970;
}
html[data-site-theme="studio"]:root .viewer {
  border-color: #3b3935;
  border-radius: 20px;
  box-shadow: 0 18px 44px -25px #1c1b1970;
}
html[data-site-theme="studio"]:root .file.active { border-color: var(--accent); }
html[data-site-theme="studio"]:root .copy:hover { border-color: var(--accent); color: #ff9a7e; }

@media (max-width: 1050px) {
  html[data-site-theme="studio"]:root :is(.topbar-inner, .site-header) { gap: 4px; }
  html[data-site-theme="studio"]:root :is(.main-nav, .site-nav, .nav) { min-width: 0; }
}
@media (max-width: 700px) {
  html[data-site-theme="studio"]:root :is(.has-theme-switch > .brand, .has-theme-switch > .logo) { padding-right: 0; }
  html[data-site-theme="studio"]:root :is(.brand > span:last-of-type, .logo > span:last-child) { display: none; }
  html[data-site-theme="studio"]:root :is(.main-nav, .site-nav, .nav) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  html[data-site-theme="studio"]:root :is(.main-nav, .site-nav, .nav)::-webkit-scrollbar { display: none; }
  html[data-site-theme="studio"]:root :is(.main-nav a, .site-nav a, .nav a) { flex: 0 0 auto; font-size: 12px; padding: 7px 10px; }
  html[data-site-theme="studio"]:root .theme-dialog { padding: 18px; }
  html[data-site-theme="studio"]:root .theme-option { padding: 7px; }
  html[data-site-theme="studio"]:root .wrap { padding-top: 28px; }
  html[data-site-theme="studio"]:root .article-view .article-body { padding: 20px; }
  html[data-site-theme="studio"]:root .auth-box { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-theme="studio"]:root :is(.action, .btn, .auth-box button, .editor-box .toolbar button) { transition: none; }
}