/* STREAMORA / STUDIO 03. Optional presentation layer; original styles stay intact. */
html[data-appearance="studio"] {
  --ink: #f7f2fc;
  --muted: #b7abc7;
  --line: rgba(196, 166, 233, .17);
  --paper: #1b1327;
  --bg: #100b1b;
  --violet: #bb83f7;
  --violet-soft: #30203f;
  --shadow: 0 18px 55px rgba(4, 2, 12, .26);
  background: #100b1b !important;
}
html[data-appearance="studio"] body { background: #100b1b !important; color: #f7f2fc; }
html[data-appearance="studio"] .route-shell-pillar {
  --ink: #f7f2fc;
  --muted: #b7abc7;
  --line: rgba(196, 166, 233, .17);
  --paper: #1b1327;
  --bg: #100b1b;
  --violet: #bb83f7;
  --violet-soft: #30203f;
  --shadow: 0 18px 55px rgba(4, 2, 12, .26);
  background: transparent;
}

/* Static light, fine drafting lines and large orbital arcs. No render loop. */
html[data-appearance="studio"] .route-shell::after { display: none; }
html[data-appearance="studio"] .route-light-pillar {
  background:
    radial-gradient(ellipse 73% 80% at 7% 91%, rgba(113, 53, 198, .42), transparent 69%),
    radial-gradient(ellipse 62% 68% at 96% 31%, rgba(184, 72, 125, .20), transparent 70%),
    radial-gradient(ellipse 53% 42% at 72% 100%, rgba(212, 143, 75, .13), transparent 75%),
    radial-gradient(ellipse 65% 50% at 46% -12%, rgba(105, 65, 171, .19), transparent 77%),
    linear-gradient(160deg, #120d1e, #100b1a 46%, #180e26);
}
html[data-appearance="studio"] .route-light-pillar > div { opacity: 0; }
html[data-appearance="studio"] .route-light-pillar::before {
  content: "";
  inset: 0;
  transform: none;
  background-image:
    radial-gradient(circle, rgba(222, 191, 247, .43) .65px, transparent 1px),
    linear-gradient(90deg, rgba(208, 172, 240, .09) 1px, transparent 1px),
    linear-gradient(rgba(208, 172, 240, .09) 1px, transparent 1px);
  background-position: 16px 16px, 0 0, 0 0;
  background-size: 40px 40px, 160px 160px, 160px 160px;
  opacity: .24;
  mask-image: linear-gradient(90deg, #000, transparent 31%, transparent 69%, #000);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 31%, transparent 69%, #000);
}
html[data-appearance="studio"] .route-light-pillar::after {
  background:
    radial-gradient(ellipse 83% 108% at 102% -12%, transparent 58.9%, rgba(221, 171, 221, .16) 59%, transparent 59.13%),
    radial-gradient(ellipse 83% 108% at 102% -12%, transparent 66.9%, rgba(208, 156, 228, .075) 67%, transparent 67.13%),
    linear-gradient(180deg, transparent 72%, rgba(15, 8, 24, .16));
  opacity: .8;
}

/* Glass-like HUD using a painted highlight instead of a full-width blur. */
html[data-appearance="studio"] .route-shell-pillar .site-header {
  color: #f9f4ff;
  background:
    linear-gradient(104deg, rgba(228, 202, 255, .065), transparent 36%, rgba(225, 175, 130, .035)),
    linear-gradient(180deg, rgba(33, 24, 47, .98), rgba(20, 14, 31, .97));
  border: 1px solid rgba(205, 174, 236, .19);
  box-shadow: inset 0 1px 0 rgba(255, 247, 255, .07), 0 12px 32px rgba(3, 1, 10, .23);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-appearance="studio"] .site-header .main-nav a { color: #c6b9d4; }
html[data-appearance="studio"] .site-header .main-nav a.active {
  color: #f2dfff;
  background: linear-gradient(140deg, rgba(175, 108, 227, .23), rgba(114, 68, 147, .10));
  box-shadow: inset 0 0 0 1px rgba(212, 164, 247, .22), inset 0 -2px 0 rgba(205, 148, 244, .3);
}
html[data-appearance="studio"] .site-header .main-nav .premium-nav-link {
  color: #f5d4a0;
  background: rgba(213, 168, 98, .075);
  box-shadow: inset 0 0 0 1px rgba(222, 182, 122, .16);
}
html[data-appearance="studio"] .subject-wheel-option.active .streamora-logo {
  filter: drop-shadow(0 0 8px rgba(197, 132, 255, .19));
}
html[data-appearance="studio"] .account-profile-trigger,
html[data-appearance="studio"] .ai-credits-badge,
html[data-appearance="studio"] .account-login-trigger {
  border-color: rgba(210, 174, 240, .22);
  box-shadow: inset 0 1px 0 rgba(248, 231, 255, .055);
}
html[data-appearance="studio"] .account-profile-menu,
html[data-appearance="studio"] .ai-credits-panel {
  background: linear-gradient(155deg, #2a1c38, #171020 76%);
  border-color: rgba(214, 170, 243, .25);
  box-shadow: 0 18px 60px rgba(3, 1, 8, .48), inset 0 1px 0 rgba(247, 224, 255, .06);
  backdrop-filter: none;
}

/* Editorial hero: brighter type, warm highlights and a quieter information rail. */
html[data-appearance="studio"] .guided-learning-hero::before {
  width: min(1060px, 90vw);
  height: 450px;
  background: radial-gradient(ellipse, rgba(181, 116, 223, .075), transparent 70%);
  filter: none;
}
html[data-appearance="studio"] .guided-learning-hero h1 {
  color: #fff8ff;
  text-shadow: 0 3px 28px rgba(6, 1, 14, .18);
  letter-spacing: -.045em;
}
html[data-appearance="studio"] .guided-learning-hero h1 > span {
  color: #dfb9f7;
  background: linear-gradient(100deg, #d7b9ff 5%, #f0c1e2 55%, #f0d2ab);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-appearance="studio"] .guided-learning-hero-content > p { color: #bcafcb; }
html[data-appearance="studio"] .route-shell-pillar .eyebrow {
  color: #dfbbed;
  background: rgba(197, 140, 236, .065);
  border-color: rgba(210, 165, 243, .21);
  box-shadow: inset 0 1px 0 rgba(254, 233, 255, .035);
  backdrop-filter: none;
}
html[data-appearance="studio"] .learning-plan-gallery-card {
  background: linear-gradient(140deg, rgba(56, 37, 75, .7), rgba(30, 21, 43, .68));
  border-color: rgba(213, 175, 242, .14);
  box-shadow: inset 0 1px 0 rgba(249, 230, 255, .035);
}
html[data-appearance="studio"] .learning-plan-gallery-icon {
  color: #dcb5f6;
  border-color: rgba(214, 169, 244, .17);
  background: rgba(166, 107, 211, .13);
}
html[data-appearance="studio"] .learning-smart-action-gold {
  border-color: rgba(255, 226, 164, .68);
  box-shadow: inset 0 1px 0 rgba(255, 249, 218, .6), 0 13px 34px rgba(171, 105, 53, .16);
}
html[data-appearance="studio"] .learning-smart-action.secondary {
  background: linear-gradient(140deg, rgba(59, 40, 76, .68), rgba(31, 22, 45, .74));
  border-color: rgba(211, 171, 238, .21);
}
html[data-appearance="studio"] .learning-pick-category { color: #bfb0ce; }

/* Consistent surfaces; all existing sizes and controls remain in place. */
html[data-appearance="studio"] .dashboard-stats-glow {
  background:
    radial-gradient(ellipse at 55% 160%, rgba(208, 117, 120, .11), transparent 67%),
    linear-gradient(135deg, rgba(42, 28, 55, .96), rgba(26, 18, 38, .97));
  border-color: rgba(210, 173, 239, .21);
  box-shadow: inset 0 1px 0 rgba(247, 222, 255, .045), 0 16px 42px rgba(7, 2, 13, .17);
}
html[data-appearance="studio"] .dashboard-stats-glow::before { opacity: .38; }
html[data-appearance="studio"] .stats-strip small { color: #b8a9c7; }
html[data-appearance="studio"] .modes-panel {
  background: linear-gradient(145deg, rgba(40, 28, 54, .85), rgba(23, 16, 35, .9));
  border-color: rgba(203, 168, 233, .19);
  box-shadow: inset 0 1px 0 rgba(250, 230, 255, .04), 0 20px 60px rgba(6, 2, 15, .14);
}
html[data-appearance="studio"] .section-kicker { color: #cf9ce9; letter-spacing: .13em; }
html[data-appearance="studio"] .section-heading h2 { color: #f8efff; letter-spacing: -.035em; }
html[data-appearance="studio"] .modes-panel-note {
  color: #d6b7ed;
  background: rgba(168, 103, 210, .07);
  border-color: rgba(208, 166, 237, .19);
}
html[data-appearance="studio"] .route-shell-pillar .card-spotlight.mode-card,
html[data-appearance="studio"] .route-shell-pillar .card-spotlight.category-level-card,
html[data-appearance="studio"] .route-shell-pillar .paper-card {
  background: linear-gradient(145deg, #2a1e37, #1b1327 80%);
  border-color: rgba(203, 164, 235, .20);
  box-shadow: inset 0 1px 0 rgba(254, 229, 255, .035), 0 15px 36px rgba(7, 2, 14, .16);
}
html[data-appearance="studio"] .route-shell-pillar .card-spotlight.mode-card.daily-feature-card {
  background:
    radial-gradient(circle at 83% 12%, rgba(245, 91, 124, .32), transparent 39%),
    radial-gradient(circle at 9% 92%, rgba(246, 180, 69, .23), transparent 45%),
    radial-gradient(circle at 52% 38%, rgba(174, 78, 239, .27), transparent 53%),
    linear-gradient(145deg, #461f52, #2b1433 58%, #1d121e);
  border-color: rgba(237, 145, 190, .68);
  box-shadow: 0 23px 58px rgba(69, 17, 76, .32), 0 0 32px rgba(224, 87, 130, .1), inset 0 1px 0 rgba(255, 232, 211, .13);
}
html[data-appearance="studio"] .mode-card small { color: #bcacce; }
html[data-appearance="studio"] .mode-card p { color: #cdbed8; opacity: 1; }
html[data-appearance="studio"] .mode-card h3 { color: #fbf2ff; }
html[data-appearance="studio"] .mode-card .mode-icon,
html[data-appearance="studio"] .category-level-card .level-icon {
  color: #d9b5f4;
  background: linear-gradient(145deg, rgba(197, 139, 231, .16), rgba(133, 85, 176, .09));
  border-color: rgba(216, 177, 244, .16);
  box-shadow: inset 0 1px 0 rgba(246, 225, 255, .04);
}
html[data-appearance="studio"] .daily-feature-card .mode-icon { color: #f2d1a3; }
html[data-appearance="studio"] .daily-feature-card .free-daily-counter {
  color: #f5d6ab;
  background: rgba(232, 182, 112, .1);
  border-color: rgba(242, 199, 139, .28);
}
html[data-appearance="studio"] .category-level-card > p { color: #b8a7c8; }
html[data-appearance="studio"] .route-shell-pillar .task-row {
  background: linear-gradient(110deg, rgba(39, 27, 52, .95), rgba(27, 19, 39, .98));
  border-color: rgba(205, 162, 237, .15);
}
html[data-appearance="studio"] .route-shell-pillar .task-row:hover { border-color: rgba(210, 158, 245, .38); }
html[data-appearance="studio"] .route-shell-pillar .site-footer {
  background: linear-gradient(180deg, rgba(20, 12, 31, .24), rgba(14, 8, 22, .8));
  border-color: rgba(211, 166, 238, .14);
  backdrop-filter: none;
}

/* Calm workspace with brighter edges. Answer feedback colors stay semantic. */
html[data-appearance="studio"] .route-shell-task {
  background:
    radial-gradient(ellipse at 5% 100%, rgba(104, 53, 147, .11), transparent 60%),
    #100b1b;
}
html[data-appearance="studio"] .solver-topbar,
html[data-appearance="studio"] .streamora-exam-topbar {
  background: linear-gradient(105deg, #24182f, #17101f 70%);
  border-color: rgba(215, 171, 242, .20);
  box-shadow: inset 0 1px 0 rgba(253, 228, 255, .035);
}
html[data-appearance="studio"] .task-panel,
html[data-appearance="studio"] .board-card,
html[data-appearance="studio"] .streamora-exam-task-panel {
  background: linear-gradient(165deg, #22182e, #17101f 85%);
  border-color: rgba(212, 175, 242, .22);
  box-shadow: inset 0 1px 0 rgba(252, 226, 255, .035), 0 12px 34px rgba(4, 1, 9, .15);
}
html[data-appearance="studio"] .board-toolbar {
  background: linear-gradient(100deg, #271c34, #1e152a);
  border-color: rgba(214, 174, 244, .16);
}
html[data-appearance="studio"] .task-prompt-copy,
html[data-appearance="studio"] .streamora-stepper-card {
  background: linear-gradient(155deg, #2a1e37, #1e152a);
  border-color: rgba(214, 170, 243, .23);
}
html[data-appearance="studio"] .task-scroll h1 { color: #fbf4ff; }
html[data-appearance="studio"] .task-prompt-copy > span,
html[data-appearance="studio"] .ai-step-content > span { color: #d2a7ed; }
html[data-appearance="studio"] .task-footer {
  background: linear-gradient(180deg, #1b1226, #21162d);
  border-color: rgba(210, 164, 238, .16);
}
html[data-appearance="studio"] .answer:not(.selected):not(.correct-answer):not(.wrong-answer) {
  background: linear-gradient(120deg, #291d36, #21172d);
  border-color: rgba(216, 175, 243, .22);
}
html[data-appearance="studio"] .assistant-head { border-color: rgba(213, 170, 244, .17); }
html[data-appearance="studio"] .assistant-rule {
  color: #c9b4d9;
  background: rgba(184, 116, 223, .065);
  border-color: rgba(212, 165, 240, .15);
}
html[data-appearance="studio"] .learning-task-formula,
html[data-appearance="studio"] .teaching-steps-card,
html[data-appearance="studio"] .practice-tutor-chat {
  background: linear-gradient(145deg, rgba(88, 48, 107, .30), rgba(37, 24, 51, .8));
  border-color: rgba(211, 154, 239, .34);
}
html[data-appearance="studio"] .premium-checkout-panel,
html[data-appearance="studio"] .premium-checkout-summary,
html[data-appearance="studio"] .streamora-checkout-panel {
  background: linear-gradient(145deg, #2a1b35, #191020);
  border-color: rgba(219, 175, 232, .22);
}

@media (min-width: 1100px) {
  html[data-appearance="studio"] .route-shell-pillar .site-header {
    width: calc(100% - 32px);
    max-width: 1568px;
    margin: 12px auto 0;
    top: 12px;
    border-radius: 19px;
  }
}
@media (max-width: 1099px) {
  html[data-appearance="studio"] .route-shell-pillar .site-header { border-width: 0 0 1px; }
}
@media (max-width: 600px) {
  html[data-appearance="studio"] .guided-learning-hero h1 > span::before { content: "\00a0"; }
  html[data-appearance="studio"] .route-light-pillar {
    background:
      radial-gradient(ellipse at 0 75%, rgba(120, 56, 194, .29), transparent 70%),
      radial-gradient(ellipse at 100% 15%, rgba(161, 66, 117, .15), transparent 70%),
      #120c1c;
  }
  html[data-appearance="studio"] .route-light-pillar::before { opacity: .12; }
  html[data-appearance="studio"] .route-light-pillar::after { opacity: .45; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-appearance="studio"] .route-shell-pillar .site-header { background: #21172d; }
}

/* Workspace: more room for the question, a clear tool rail and a quiet canvas.
   Layout only. Existing controls, answer states and step transitions are shared. */
html[data-appearance="studio"] :is(.solver-page, .polish-task-solver-page) {
  background: #100b1b;
}
html[data-appearance="studio"] :is(.solver-topbar, .polish-task-topbar) {
  background: linear-gradient(105deg, #24182f, #17101f 70%);
  border: 1px solid rgba(215, 171, 242, .18);
  box-shadow: inset 0 1px 0 rgba(253, 228, 255, .04);
}
html[data-appearance="studio"] :is(.board-card, .task-panel, .polish-single-task-panel, .polish-keyboard-board) {
  border-radius: 20px;
  border-color: rgba(212, 175, 242, .22);
  background: linear-gradient(165deg, #251a32, #181121 85%);
  box-shadow: inset 0 1px 0 rgba(252, 226, 255, .04), 0 12px 34px rgba(4, 1, 9, .15);
}
html[data-appearance="studio"] .board-card { position: relative; }
html[data-appearance="studio"] :is(.board-toolbar, .polish-writing-toolbar) {
  background: linear-gradient(110deg, #2c203a, #21172d);
  border-bottom-color: rgba(214, 174, 244, .16);
}
html[data-appearance="studio"] .board-toolbar { padding: 10px 12px; gap: 9px 12px; }
html[data-appearance="studio"] .board-toolbar .tool { min-height: 36px; border-radius: 9px; }
html[data-appearance="studio"] .board-toolbar .tool-group:not(.colors) { gap: 4px; }
html[data-appearance="studio"] .board-toolbar .save-note {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  padding: 5px 9px;
  border: 1px solid rgba(206, 173, 235, .1);
  border-radius: 7px;
  color: #a99ab9;
  background: #191220;
  font-size: 10px;
  pointer-events: none;
}
html[data-appearance="studio"] .canvas-shell {
  background-color: #14101d;
  background-image:
    linear-gradient(rgba(194, 163, 222, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 163, 222, .075) 1px, transparent 1px);
}
html[data-appearance="studio"] .board-watermark { opacity: .065; }
html[data-appearance="studio"] .streamora-board-heading {
  border-radius: 20px 20px 0 0;
  background: #241a30;
  border-color: rgba(212, 175, 242, .17);
}
html[data-appearance="studio"] .streamora-math-layout .board-card { border-radius: 0 0 20px 20px; }
html[data-appearance="studio"] :is(.panel-tabs, .language-panel-tabs) {
  flex-shrink: 0;
  min-height: 58px;
  gap: 5px;
  padding: 8px;
  background: #1e1529;
  border-bottom-color: rgba(214, 174, 244, .14);
}
html[data-appearance="studio"] :is(.panel-tabs, .language-panel-tabs) button {
  border-radius: 11px;
  font-size: 12px;
}
html[data-appearance="studio"] :is(.panel-tabs, .language-panel-tabs) button.active {
  background: linear-gradient(115deg, #3a294a, #2e213c);
  box-shadow: inset 0 1px 0 rgba(244, 216, 255, .07);
}
html[data-appearance="studio"] .panel-tabs button.active.ai { color: #e4bdff; }
html[data-appearance="studio"] :is(.task-scroll, .assistant-scroll, .polish-single-task-scroll) {
  padding: 22px;
  scrollbar-width: thin;
  scrollbar-color: #71518b transparent;
  scroll-padding-block: 20px;
}
html[data-appearance="studio"] .task-chips { flex-wrap: wrap; gap: 6px; }
html[data-appearance="studio"] .task-scroll h1 {
  margin: 18px 0 16px;
  font-size: clamp(24px, 1.8vw, 30px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
html[data-appearance="studio"] .task-prompt-copy {
  padding: 17px 18px;
  border-radius: 15px;
  border-color: rgba(215, 177, 243, .2);
  box-shadow: inset 0 1px 0 rgba(248, 223, 255, .035);
}
html[data-appearance="studio"] .task-prompt-copy .task-statement { font-size: 15px; line-height: 1.8; }
html[data-appearance="studio"] .answers { gap: 10px; margin: 22px 0; }
html[data-appearance="studio"] .answer {
  min-height: 56px;
  padding: 11px 13px;
  border-radius: 13px;
  gap: 13px;
  font-size: 15px;
}
html[data-appearance="studio"] .answer.selected:not(.correct-answer):not(.wrong-answer) {
  background: linear-gradient(110deg, #4b2b61, #332043);
  border-color: #c286f3;
  box-shadow: inset 0 0 0 1px rgba(205, 155, 248, .24);
}
html[data-appearance="studio"] .answer > span:first-child { flex-shrink: 0; border-radius: 9px; }
html[data-appearance="studio"] :is(.cke-prompt-copy, .streamora-exam-paper-card, .polish-original-task-card) {
  border-radius: 14px;
  border-color: rgba(214, 174, 244, .2);
}
html[data-appearance="studio"] .learning-task-formula { margin-block: 20px; border-radius: 15px; }
html[data-appearance="studio"] .source-card {
  margin-top: 20px;
  background: rgba(203, 167, 231, .045);
  border: 1px solid rgba(213, 174, 239, .09);
  border-radius: 12px;
}
html[data-appearance="studio"] .panel-footer {
  flex-shrink: 0;
  padding: 14px;
  border-top-color: rgba(215, 174, 244, .18);
  background: linear-gradient(140deg, #2a1c36, #1e1429);
  box-shadow: 0 -8px 22px rgba(12, 5, 19, .12);
}
html[data-appearance="studio"] .panel-footer .button { min-height: 46px; border-radius: 12px; }
html[data-appearance="studio"] .assistant-head {
  min-height: 82px;
  padding: 16px 20px;
  background: linear-gradient(115deg, #382240, #21172d);
}
html[data-appearance="studio"] .assistant-rule { padding: 13px 14px; border-radius: 12px; }
html[data-appearance="studio"] .assistant-stepper .streamora-stepper-card {
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(247, 221, 255, .05), 0 10px 28px rgba(8, 3, 15, .16);
}
html[data-appearance="studio"] .assistant-stepper .streamora-step-indicators {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(210, 170, 238, .1);
  margin-bottom: 18px;
}
html[data-appearance="studio"] .ai-step-content h2 { font-size: 23px; line-height: 1.3; margin: 10px 0 16px; }
html[data-appearance="studio"] .tutor-copy > div { background: #251b31; border-color: rgba(211, 173, 239, .14); }
html[data-appearance="studio"] .teaching-ordered-copy p { line-height: 1.8; }
html[data-appearance="studio"] .tutor-copy p { font-size: 14px; }
html[data-appearance="studio"] .teaching-notation-details {
  background: #191221;
  border-color: rgba(213, 176, 239, .19);
  border-radius: 12px;
}
html[data-appearance="studio"] .teaching-steps-body { padding: 18px; background: #21172c; }
html[data-appearance="studio"] .teaching-steps-body > h3 { font-size: 21px; line-height: 1.35; }
html[data-appearance="studio"] .polish-single-task-heading { padding-bottom: 18px; }
html[data-appearance="studio"] .polish-single-task-heading h1 { max-width: none; line-height: 1.2; }
html[data-appearance="studio"] .polish-writing-sheet {
  border-radius: 12px;
  border-color: rgba(210, 174, 236, .17);
}
html[data-appearance="studio"] .polish-single-task-tab {
  min-height: 42px;
  margin: 8px 8px 0;
  border-radius: 11px;
  background: linear-gradient(115deg, #3a294a, #2e213c);
}
/* Practice papers are HTML: let longer questions grow instead of clipping them. */
html[data-appearance="studio"] .streamora-language-paper-viewport { height: auto; min-height: 280px; }
html[data-appearance="studio"] .streamora-language-paper { min-height: 280px; padding: 22px; }
html[data-appearance="studio"] .streamora-language-paper .streamora-exam-paper-prompt :is(.formatted-task-prompt, p),
html[data-appearance="studio"] .streamora-language-paper-options { font-size: 13px; line-height: 1.65; }
html[data-appearance="studio"] .streamora-language-paper-instruction { font-size: 10px; }
html[data-appearance="studio"] .polish-keyboard-board :is(.gap-fields input, textarea) { color: #f7effc; caret-color: #d6a5fc; }
html[data-appearance="studio"] .polish-keyboard-board :is(.gap-fields input, textarea)::placeholder { color: #a496b4; opacity: 1; }

@media (min-width: 901px) {
  html[data-appearance="studio"] .solver-topbar {
    margin: 10px 12px 0;
    border-radius: 16px;
  }
  html[data-appearance="studio"] .solver-layout {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 540px);
    gap: 14px;
    padding: 12px;
  }
}
@media (min-width: 1101px) {
  html[data-appearance="studio"] .board-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html[data-appearance="studio"] .board-toolbar > .tool-group:first-child { grid-area: 1 / 1; }
  html[data-appearance="studio"] .board-toolbar > .formula-sheet-trigger { grid-area: 1 / 2; justify-self: start; }
  html[data-appearance="studio"] .board-toolbar > .board-ai-trigger-wrap { grid-area: 1 / 3; justify-self: end; }
  html[data-appearance="studio"] .board-toolbar > .colors { grid-area: 2 / 1; }
  html[data-appearance="studio"] .board-toolbar > .line-width { grid-area: 2 / 2; flex-wrap: wrap; }
  html[data-appearance="studio"] .board-toolbar > .compact { margin-left: 0; }
}

/* The workspace uses the same rose, violet and gold light as the home screen. */
html[data-appearance="studio"] .task-panel,
html[data-appearance="studio"] .polish-single-task-panel {
  background:
    radial-gradient(ellipse at 100% 0, rgba(184, 87, 145, .12), transparent 42%),
    radial-gradient(ellipse at 15% 100%, rgba(208, 142, 74, .075), transparent 40%),
    linear-gradient(160deg, #271a34, #191221 72%);
}
html[data-appearance="studio"] .board-toolbar {
  background: linear-gradient(110deg, #30203c, #281d32 55%, #302132);
  align-content: center;
}
html[data-appearance="studio"] .board-toolbar .formula-sheet-trigger { margin-right: 2px; }
html[data-appearance="studio"] .board-toolbar .line-width { gap: 7px; }
html[data-appearance="studio"] .board-toolbar .tool-group.compact { margin-left: 0; }
html[data-appearance="studio"] .board-toolbar .board-ai-trigger { width: auto; }
html[data-appearance="studio"] .board-toolbar .colors { margin-left: 0; padding-inline: 4px; }
html[data-appearance="studio"] .assistant-stepper .streamora-step-content { min-height: 0; }
html[data-appearance="studio"] .assistant-stepper .streamora-stepper-card {
  background:
    radial-gradient(ellipse at 100% 0, rgba(224, 116, 148, .09), transparent 55%),
    linear-gradient(150deg, #2b1d37, #1c1426);
}
html[data-appearance="studio"] .assistant-stepper .streamora-step-indicators {
  padding-block: 15px;
  margin-bottom: 12px;
}
html[data-appearance="studio"] .assistant-stepper .step-indicator:has(.active-dot) .step-indicator-inner {
  background: linear-gradient(140deg, #b45aef, #db7bac) !important;
  box-shadow: 0 0 0 4px rgba(206, 131, 227, .12);
}
html[data-appearance="studio"] .assistant-stepper .step-indicator:has(.check-icon) .step-indicator-inner {
  background: #765095 !important;
}
html[data-appearance="studio"] .assistant-stepper .step-connector { background: #4b345b; }
html[data-appearance="studio"] .assistant-stepper .step-default { padding-bottom: 10px; }
html[data-appearance="studio"] .assistant-stepper .streamora-step-footer { padding-bottom: 16px; }
html[data-appearance="studio"] .assistant-stepper .footer-nav { margin-top: 6px; }
html[data-appearance="studio"] .ai-step-content h2 { font-size: 22px; margin-block: 8px 14px; }
html[data-appearance="studio"] .tutor-copy { gap: 9px; }
html[data-appearance="studio"] .tutor-copy > div { min-height: 0; padding: 14px; }
html[data-appearance="studio"] .tutor-copy-label { display: block; margin-bottom: 10px; color: #dfb3f0; }
html[data-appearance="studio"] .explanation-text { display: grid; gap: 12px; min-width: 0; }
html[data-appearance="studio"] .explanation-section {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(219, 175, 242, .14);
  border-radius: 11px;
  background: linear-gradient(115deg, rgba(173, 101, 217, .08), rgba(217, 155, 112, .035));
}
html[data-appearance="studio"] .explanation-section.single { padding: 0; border: 0; background: none; }
html[data-appearance="studio"] .explanation-section h3 {
  margin: 0 0 9px;
  color: #f0c7ed;
  font-size: 15px;
  line-height: 1.45;
}
html[data-appearance="studio"] .explanation-section p {
  margin: 0;
  color: #e4d9ed;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
html[data-appearance="studio"] .explanation-section p + p { margin-top: 12px; }
html[data-appearance="studio"] .explanation-section .explanation-calculation {
  padding: 11px 12px;
  border-left: 2px solid #c88bf0;
  border-radius: 3px 9px 9px 3px;
  background: #1c1327;
  overflow-x: auto;
  overflow-wrap: normal;
}
html[data-appearance="studio"] .learner-answer { display: grid; gap: 9px; margin-top: 8px; }
html[data-appearance="studio"] .learner-answer-line { display: block; font-size: 15px; font-weight: 700; line-height: 1.65; }
html[data-appearance="studio"] .open-correct-answer-reveal { padding: 16px; color: #d0f2e7; background: linear-gradient(120deg, rgba(57, 148, 125, .13), rgba(134, 100, 85, .08)); }
html[data-appearance="studio"] .open-correct-answer-reveal small { display: block; color: #89dbbc; font-size: 10px; letter-spacing: .09em; }
html[data-appearance="studio"] .model-answer { display: block; padding: 16px; border-radius: 12px; }
html[data-appearance="studio"] .open-solution-card { padding: 16px; border-radius: 16px; background: linear-gradient(145deg, #30203d, #1c1427); }
html[data-appearance="studio"] .open-answer-ai-note { align-items: start; padding: 14px; background: #281c35; }
html[data-appearance="studio"] .open-answer-ai-note > div { min-width: 0; }
html[data-appearance="studio"] .open-answer-ai-note small { display: block; margin-bottom: 12px; }
html[data-appearance="studio"] .open-task-actions-three { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-appearance="studio"] .open-task-actions-three > .button { width: 100%; min-width: 0; white-space: normal; font-size: 12px; }
html[data-appearance="studio"] .open-task-actions-three > .button.primary { grid-column: 1 / -1; }
html[data-appearance="studio"] .chat-message-content {
  min-width: 0;
  flex: 1;
  padding: 13px 14px;
  border: 1px solid rgba(211, 174, 238, .14);
  border-radius: 4px 14px 14px;
  background: #291d35;
}
html[data-appearance="studio"] .chat-message.user .chat-message-content { background: #3c2651; }
html[data-appearance="studio"] .chat-message-content .explanation-section p { padding: 0; border: 0; max-width: none; background: none; box-shadow: none; border-radius: 0; }
html[data-appearance="studio"] .solver-page button:focus-visible { outline: 2px solid #dab0f3; outline-offset: 3px; }
@media (max-width: 600px) {
  html[data-appearance="studio"] .assistant-stepper .step-default { padding-inline: 14px; }
  html[data-appearance="studio"] .tutor-copy { display: block; }
  html[data-appearance="studio"] .tutor-copy > .tutor-avatar { display: none; }
  html[data-appearance="studio"] .open-task-actions-three > .button { padding-inline: 8px; }
  html[data-appearance="studio"] .explanation-section { padding: 12px; }
}
@media (min-width: 781px) {
  html[data-appearance="studio"] .polish-task-topbar { margin: 10px 12px 0; border-radius: 16px; }
  html[data-appearance="studio"] .polish-fullscreen-layout {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 540px);
    gap: 14px;
    padding: 12px;
  }
}
@media (max-width: 900px) {
  html[data-appearance="studio"] .solver-topbar { border-width: 0 0 1px; }
  html[data-appearance="studio"] .solver-layout { padding: 8px; }
  html[data-appearance="studio"] .mobile-switch { background: #1b1326; border-color: rgba(212, 175, 242, .15); }
}
@media (max-width: 780px) {
  html[data-appearance="studio"] .polish-task-topbar { border-width: 0 0 1px; }
  html[data-appearance="studio"] .polish-fullscreen-layout { gap: 12px; padding: 8px; }
}
@media (max-width: 600px) {
  html[data-appearance="studio"] :is(.task-scroll, .assistant-scroll, .polish-single-task-scroll) { padding: 18px 16px; }
  html[data-appearance="studio"] .task-prompt-copy { padding: 15px; }
  html[data-appearance="studio"] .board-toolbar { gap: 7px; padding: 9px; }
  html[data-appearance="studio"] .task-scroll h1 { font-size: 25px; }
  html[data-appearance="studio"] .panel-footer { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  html[data-appearance="studio"] .assistant-stepper .streamora-step-indicators { padding: 18px 16px 16px; }
  html[data-appearance="studio"] .ai-step-content h2 { font-size: 21px; }
}