/* Loaded last so legacy category layers cannot restore the old framed motif. */
.studio-v2 .studio-hero::before,
.studio-v2 .studio-hero::after,
.studio-v2 .composer::after,
.studio-v2 .template-card-media::after {
  display: none !important;
}

/* Blueprint and HUD grids fade into the page instead of reading as cards. */
body[data-studio-mode='architecture'] .mode-world-grid {
  -webkit-mask-image: radial-gradient(ellipse at 68% 48%, #000 8%, rgba(0,0,0,.82) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse at 68% 48%, #000 8%, rgba(0,0,0,.82) 46%, transparent 78%);
}

body[data-studio-mode='office'] .mode-world-symbol--primary {
  top: 18px;
}

body[data-studio-mode='office'] .mode-world-symbol--tertiary {
  right: 22px;
}

body[data-studio-mode='architecture'] .mode-world-trace {
  border: 0;
  clip-path: none;
  background:
    linear-gradient(color-mix(in srgb, var(--studio-ambient-b) 42%, transparent), color-mix(in srgb, var(--studio-ambient-b) 42%, transparent)) 0 100% / 100% 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--studio-ambient-a) 35%, transparent), color-mix(in srgb, var(--studio-ambient-a) 35%, transparent)) 18% 100% / 2px 46% no-repeat,
    linear-gradient(color-mix(in srgb, var(--studio-ambient-a) 35%, transparent), color-mix(in srgb, var(--studio-ambient-a) 35%, transparent)) 42% 100% / 2px 72% no-repeat,
    linear-gradient(color-mix(in srgb, var(--studio-ambient-a) 35%, transparent), color-mix(in srgb, var(--studio-ambient-a) 35%, transparent)) 70% 100% / 2px 55% no-repeat;
}

body[data-studio-mode='game'] .mode-world-grid {
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse at 68% 48%, #000 8%, rgba(0,0,0,.84) 43%, transparent 78%);
  mask-image: radial-gradient(ellipse at 68% 48%, #000 8%, rgba(0,0,0,.84) 43%, transparent 78%);
}

body[data-studio-mode='game'] .mode-world-trace {
  border: 0;
  clip-path: none;
  background:
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 0 0 / 34px 2px no-repeat,
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 0 0 / 2px 23px no-repeat,
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 100% 0 / 34px 2px no-repeat,
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 100% 0 / 2px 23px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 0 100% / 34px 2px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 0 100% / 2px 23px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 100% 100% / 34px 2px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 100% 100% / 2px 23px no-repeat;
  opacity: .48;
}

@media (min-width: 721px) {
  .studio-v2 .mode-world {
    top: -8px;
    right: -28px;
  }
}

@media (max-width: 720px) {
  .studio-v2 .mode-world {
    top: -24px;
    right: -60px;
  }
}

/* The companion follows the active category in copy and silhouette. */
.prompt-assistant[data-assistant-mode] .prompt-assistant-fab,
.prompt-assistant[data-assistant-mode] .pixel-companion-face,
.prompt-assistant[data-assistant-mode] .pixel-head-mini {
  transition: border-radius 260ms ease, clip-path 260ms ease, transform 260ms ease, background 260ms ease;
}

.prompt-assistant .assistant-mode-glyph {
  display: inline-block;
  margin-right: 3px;
  vertical-align: -2px;
  font-size: 11px;
}

.prompt-assistant[data-assistant-mode='general'] .prompt-assistant-fab {
  border-radius: 17px 7px 17px 7px !important;
}

.prompt-assistant[data-assistant-mode='general'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='general'] .pixel-head-mini {
  border-radius: 8px 3px 8px 3px;
  transform: rotate(-3deg);
}

.prompt-assistant[data-assistant-mode='office'] .prompt-assistant-fab {
  border-radius: 4px !important;
  clip-path: polygon(0 0, 100% 0, 100% 89%, 94% 100%, 0 100%);
}

.prompt-assistant[data-assistant-mode='office'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='office'] .pixel-head-mini {
  border-radius: 2px;
  transform: translateY(2px);
}

.prompt-assistant[data-assistant-mode='office'] .pixel-companion-ear {
  width: 9px;
  height: 8px;
  border-width: 2px;
  background: color-mix(in srgb, var(--studio-ambient-b) 42%, #e4e8ef);
}

.prompt-assistant[data-assistant-mode='design'] .prompt-assistant-fab {
  border-radius: 22px 6px 22px 6px !important;
  transform: rotate(-1deg);
}

.prompt-assistant[data-assistant-mode='design'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='design'] .pixel-head-mini {
  border-radius: 48% 7px 48% 7px;
  transform: rotate(-7deg);
}

.prompt-assistant[data-assistant-mode='design'] .pixel-companion-ear {
  border-radius: 50%;
  transform: rotate(12deg);
}

.prompt-assistant[data-assistant-mode='ecommerce'] .prompt-assistant-fab {
  border-radius: 4px !important;
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
}

.prompt-assistant[data-assistant-mode='ecommerce'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='ecommerce'] .pixel-head-mini {
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.prompt-assistant[data-assistant-mode='ecommerce'] .pixel-companion-ear {
  width: 9px;
  height: 8px;
  border-radius: 50% 50% 0 0;
  border-bottom: 0;
}

.prompt-assistant[data-assistant-mode='architecture'] .prompt-assistant-fab {
  border-radius: 2px !important;
  clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
}

.prompt-assistant[data-assistant-mode='architecture'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='architecture'] .pixel-head-mini {
  border-radius: 0;
  clip-path: polygon(0 0, 86% 0, 100% 16%, 100% 100%, 0 100%);
}

.prompt-assistant[data-assistant-mode='architecture'] .pixel-companion-ear {
  width: 7px;
  height: 18px;
  top: 0;
  border-width: 2px;
  clip-path: none;
}

.prompt-assistant[data-assistant-mode='advertising'] .prompt-assistant-fab {
  border-radius: 3px !important;
  clip-path: polygon(4% 0, 100% 0, 95% 100%, 0 100%);
  transform: skewX(-2deg);
}

.prompt-assistant[data-assistant-mode='advertising'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='advertising'] .pixel-head-mini {
  border-radius: 2px;
  clip-path: polygon(0 18%, 100% 0, 93% 100%, 7% 82%);
  transform: rotate(-4deg);
}

.prompt-assistant[data-assistant-mode='game'] .prompt-assistant-fab {
  border-radius: 3px !important;
  clip-path: polygon(5% 0, 95% 0, 100% 16%, 100% 84%, 95% 100%, 5% 100%, 0 84%, 0 16%);
}

.prompt-assistant[data-assistant-mode='game'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='game'] .pixel-head-mini {
  border-radius: 2px;
  clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%);
}

.prompt-assistant[data-assistant-mode='game'] .pixel-companion-ear {
  width: 7px;
  height: 16px;
  top: 0;
  border-width: 2px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.prompt-assistant[data-assistant-mode='media'] .prompt-assistant-fab {
  border-radius: 999px !important;
}

.prompt-assistant[data-assistant-mode='media'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='media'] .pixel-head-mini {
  border-radius: 50%;
  transform: scale(.9);
}

.prompt-assistant[data-assistant-mode='media'] .pixel-companion-ear {
  border-radius: 50%;
  transform: scale(.86);
}

.prompt-assistant[data-assistant-mode='packaging'] .prompt-assistant-fab {
  border-radius: 2px !important;
  clip-path: polygon(8% 0, 92% 0, 100% 10%, 100% 90%, 92% 100%, 8% 100%, 0 90%, 0 10%);
}

.prompt-assistant[data-assistant-mode='packaging'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='packaging'] .pixel-head-mini {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
}

.prompt-assistant[data-assistant-mode='packaging'] .pixel-companion-body {
  transform: skewX(-8deg);
}

.prompt-assistant[data-assistant-mode='education'] .prompt-assistant-fab {
  border-radius: 3px 16px 16px 3px !important;
}

.prompt-assistant[data-assistant-mode='education'] .pixel-companion-face,
.prompt-assistant[data-assistant-mode='education'] .pixel-head-mini {
  border-radius: 3px 13px 13px 3px;
  transform: rotate(2deg);
}

.prompt-assistant[data-assistant-mode='education'] .pixel-companion-ear {
  height: 16px;
  border-radius: 2px 8px 8px 2px;
}

@media (max-width: 640px) {
  .prompt-assistant[data-assistant-mode] .prompt-assistant-fab {
    clip-path: none;
  }
}

/* Category-aware prompt work surfaces. The textarea stays structurally stable;
   its material, drafting marks, and controls change with the active mode. */
.studio-v2 .composer-input-shell {
  --prompt-field-bg: rgba(5, 8, 13, .48);
  --prompt-field-line: color-mix(in srgb, var(--studio-ambient-a) 20%, transparent);
  --prompt-field-line-strong: color-mix(in srgb, var(--studio-ambient-a) 44%, transparent);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  margin: 4px 4px 0;
  padding-top: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--studio-ambient-a) 26%, rgba(255,255,255,.09));
  border-radius: 12px;
  background-color: var(--prompt-field-bg);
  transition: border-color 320ms ease, border-radius 320ms ease, background-color 320ms ease, clip-path 320ms ease;
}

.studio-v2 .composer-input-shell::before,
.studio-v2 .composer-input-shell::after {
  content: '';
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.studio-v2 .composer-input-shell::before {
  inset: 0;
  opacity: .72;
  transition: opacity 280ms ease, background-image 320ms ease;
}

.studio-v2 .composer-input-shell::after {
  opacity: .65;
}

.studio-v2 .prompt-input,
.studio-v2 #prompt.prompt-input {
  position: relative;
  z-index: 2;
  padding-left: 50px;
  border-radius: inherit !important;
  background: transparent !important;
  caret-color: color-mix(in srgb, var(--studio-ambient-a) 74%, #fff);
}

.studio-v2 .composer-wand {
  z-index: 3;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--studio-ambient-a) 34%, rgba(255,255,255,.09));
  border-radius: 8px;
  color: color-mix(in srgb, var(--studio-ambient-a) 76%, #fff);
  background: color-mix(in srgb, var(--studio-ambient-a) 11%, rgba(8,11,17,.84));
  font-size: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-radius 280ms ease, clip-path 280ms ease, transform 280ms ease, background 280ms ease;
}

.studio-v2 .composer:focus-within .composer-input-shell {
  border-color: color-mix(in srgb, var(--studio-ambient-a) 58%, rgba(255,255,255,.15));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-ambient-a) 9%, transparent);
}

.studio-v2 .composer-step {
  transition: border-radius 280ms ease, clip-path 280ms ease, border-color 280ms ease, background 280ms ease;
}

/* General: an open dotted sketchbook. */
body[data-studio-mode='general'] .composer-input-shell {
  border-radius: 15px 7px 15px 7px;
}

body[data-studio-mode='general'] .composer-input-shell::before {
  background-image: radial-gradient(circle, var(--prompt-field-line) 0 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
}

body[data-studio-mode='general'] .composer-wand {
  border-radius: 10px 4px 10px 4px;
  transform: rotate(-3deg);
}

/* Office: a ruled information sheet with a clear left margin. */
body[data-studio-mode='office'] .composer-input-shell {
  border-radius: 5px;
}

body[data-studio-mode='office'] .composer-input-shell::before {
  background-image:
    linear-gradient(90deg, transparent 0 42px, var(--prompt-field-line-strong) 42px 43px, transparent 43px),
    repeating-linear-gradient(0deg, transparent 0 27px, var(--prompt-field-line) 27px 28px);
}

body[data-studio-mode='office'] .composer-input-shell::after {
  top: 10px;
  right: 12px;
  width: 42px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--prompt-field-line-strong) 0 3px, transparent 3px 7px);
}

body[data-studio-mode='office'] .composer-step,
body[data-studio-mode='office'] .composer-wand {
  border-radius: 3px !important;
}

/* Design: an editorial canvas with a swatch rail and diagonal construction lines. */
body[data-studio-mode='design'] .composer-input-shell {
  border-radius: 18px 6px 18px 6px;
}

body[data-studio-mode='design'] .composer-input-shell::before {
  background-image: repeating-linear-gradient(132deg, var(--prompt-field-line) 0 1px, transparent 1px 23px);
  -webkit-mask-image: linear-gradient(110deg, transparent, #000 50%, transparent);
  mask-image: linear-gradient(110deg, transparent, #000 50%, transparent);
}

body[data-studio-mode='design'] .composer-input-shell::after {
  right: 18px;
  bottom: 11px;
  width: 94px;
  height: 5px;
  background: linear-gradient(90deg, var(--studio-ambient-a) 0 27%, transparent 27% 32%, var(--studio-ambient-b) 32% 59%, transparent 59% 64%, var(--studio-ambient-c) 64% 100%);
  transform: rotate(-2deg);
}

body[data-studio-mode='design'] .composer-wand {
  border-radius: 50% 6px 50% 6px;
  transform: rotate(-7deg);
}

/* Ecommerce: product-stage axes and crop marks. */
body[data-studio-mode='ecommerce'] .composer-input-shell {
  border-radius: 5px;
}

body[data-studio-mode='ecommerce'] .composer-input-shell::before {
  background-image:
    linear-gradient(90deg, transparent 49.9%, var(--prompt-field-line) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.6%, var(--prompt-field-line) 50%, transparent 50.4%);
}

body[data-studio-mode='ecommerce'] .composer-input-shell::after {
  inset: 11px;
  background:
    linear-gradient(var(--prompt-field-line-strong), var(--prompt-field-line-strong)) 0 0 / 24px 2px no-repeat,
    linear-gradient(var(--prompt-field-line-strong), var(--prompt-field-line-strong)) 0 0 / 2px 18px no-repeat,
    linear-gradient(var(--prompt-field-line-strong), var(--prompt-field-line-strong)) 100% 100% / 24px 2px no-repeat,
    linear-gradient(var(--prompt-field-line-strong), var(--prompt-field-line-strong)) 100% 100% / 2px 18px no-repeat;
}

body[data-studio-mode='ecommerce'] .composer-wand {
  border-radius: 3px;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

/* Architecture: a drafting blueprint with minor/major grid and measurement rulers. */
body[data-studio-mode='architecture'] .composer-input-shell {
  --prompt-field-bg: color-mix(in srgb, var(--studio-ambient-a) 11%, #06131d);
  --prompt-field-line: color-mix(in srgb, var(--studio-ambient-a) 28%, transparent);
  --prompt-field-line-strong: color-mix(in srgb, var(--studio-ambient-a) 56%, transparent);
  border-width: 1px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

body[data-studio-mode='architecture'] .composer-input-shell::before {
  background-image:
    linear-gradient(var(--prompt-field-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--prompt-field-line-strong) 1px, transparent 1px),
    linear-gradient(var(--prompt-field-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--prompt-field-line) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
}

body[data-studio-mode='architecture'] .composer-input-shell::after {
  inset: 10px 13px 9px 46px;
  border-left: 1px solid var(--prompt-field-line-strong);
  border-top: 1px solid var(--prompt-field-line-strong);
  background:
    repeating-linear-gradient(90deg, var(--prompt-field-line-strong) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(0deg, var(--prompt-field-line-strong) 0 1px, transparent 1px 12px) 0 0 / 5px 100% no-repeat;
}

body[data-studio-mode='architecture'] .composer-step {
  border-radius: 0 !important;
  border-left: 3px solid var(--studio-ambient-a);
}

body[data-studio-mode='architecture'] .composer-wand {
  border-radius: 0;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
}

/* Advertising: directional bands and a bold transmission line. */
body[data-studio-mode='advertising'] .composer-input-shell {
  border-radius: 2px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

body[data-studio-mode='advertising'] .composer-input-shell::before {
  background-image: repeating-linear-gradient(125deg, var(--prompt-field-line) 0 5px, transparent 5px 30px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 42%);
  mask-image: linear-gradient(90deg, #000, transparent 42%);
}

body[data-studio-mode='advertising'] .composer-input-shell::after {
  top: 0;
  right: 14%;
  width: 32%;
  height: 3px;
  background: linear-gradient(90deg, var(--studio-ambient-a), var(--studio-ambient-b));
  transform: skewX(-30deg);
}

body[data-studio-mode='advertising'] .composer-step,
body[data-studio-mode='advertising'] .composer-wand {
  border-radius: 2px !important;
  transform: skewX(-5deg);
}

/* Gaming: an inset HUD terminal with pixels, scan line, and corner targeting marks. */
body[data-studio-mode='game'] .composer-input-shell {
  --prompt-field-bg: #081116;
  --prompt-field-line: color-mix(in srgb, var(--studio-ambient-a) 21%, transparent);
  --prompt-field-line-strong: color-mix(in srgb, var(--studio-ambient-b) 54%, transparent);
  border-color: color-mix(in srgb, var(--studio-ambient-a) 48%, rgba(255,255,255,.1));
  border-radius: 3px;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

body[data-studio-mode='game'] .composer-input-shell::before {
  background-image:
    linear-gradient(var(--prompt-field-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--prompt-field-line) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.018) 13px 14px);
  background-size: 16px 16px, 16px 16px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

body[data-studio-mode='game'] .composer-input-shell::after {
  inset: 8px;
  background:
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 0 0 / 25px 2px no-repeat,
    linear-gradient(var(--studio-ambient-a), var(--studio-ambient-a)) 0 0 / 2px 16px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 100% 100% / 25px 2px no-repeat,
    linear-gradient(var(--studio-ambient-b), var(--studio-ambient-b)) 100% 100% / 2px 16px no-repeat;
}

body[data-studio-mode='game'] .prompt-input,
body[data-studio-mode='game'] #prompt.prompt-input {
  color: #edfdf9 !important;
  font-family: 'JetBrains Mono', 'Microsoft YaHei', monospace;
}

body[data-studio-mode='game'] .prompt-input::placeholder {
  color: rgba(194, 231, 222, .52) !important;
}

body[data-studio-mode='game'] .composer-step,
body[data-studio-mode='game'] .composer-wand {
  border-radius: 2px !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* Media: an editing timeline with a playhead. */
body[data-studio-mode='media'] .composer-input-shell {
  border-radius: 18px;
}

body[data-studio-mode='media'] .composer-input-shell::before {
  bottom: 8px;
  height: 11px;
  background: repeating-linear-gradient(90deg, var(--prompt-field-line-strong) 0 2px, transparent 2px 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
}

body[data-studio-mode='media'] .composer-input-shell::after {
  top: 8px;
  bottom: 8px;
  left: 66%;
  width: 2px;
  background: linear-gradient(transparent, var(--studio-ambient-a), transparent);
}

body[data-studio-mode='media'] .composer-step,
body[data-studio-mode='media'] .composer-wand {
  border-radius: 999px !important;
}

/* Packaging: dieline folds and cut corners. */
body[data-studio-mode='packaging'] .composer-input-shell {
  border-radius: 2px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

body[data-studio-mode='packaging'] .composer-input-shell::before {
  background-image:
    linear-gradient(30deg, transparent 49.5%, var(--prompt-field-line) 50%, transparent 50.5%),
    linear-gradient(150deg, transparent 49.5%, var(--prompt-field-line) 50%, transparent 50.5%);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
}

body[data-studio-mode='packaging'] .composer-input-shell::after {
  right: 14px;
  bottom: 13px;
  width: 88px;
  border-bottom: 1px dashed var(--prompt-field-line-strong);
}

body[data-studio-mode='packaging'] .composer-step,
body[data-studio-mode='packaging'] .composer-wand {
  border-radius: 2px !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* Education: notebook ruling, margin, and a book-tab control. */
body[data-studio-mode='education'] .composer-input-shell {
  border-radius: 4px 15px 15px 4px;
}

body[data-studio-mode='education'] .composer-input-shell::before {
  background-image:
    linear-gradient(90deg, transparent 0 43px, var(--prompt-field-line-strong) 43px 45px, transparent 45px),
    repeating-linear-gradient(0deg, transparent 0 25px, var(--prompt-field-line) 25px 26px);
}

body[data-studio-mode='education'] .composer-input-shell::after {
  top: 0;
  bottom: 0;
  left: 8px;
  width: 5px;
  background: repeating-linear-gradient(0deg, var(--prompt-field-line-strong) 0 4px, transparent 4px 10px);
}

body[data-studio-mode='education'] .composer-step,
body[data-studio-mode='education'] .composer-wand {
  border-radius: 3px 11px 11px 3px !important;
}

html[data-color-mode='day'] .studio-v2 .composer-input-shell {
  --prompt-field-bg: color-mix(in srgb, var(--studio-ambient-a) 4%, #fff);
  border-color: color-mix(in srgb, var(--studio-ambient-a) 24%, rgba(31,34,45,.1));
}

html[data-color-mode='day'] body[data-studio-mode='architecture'] .composer-input-shell {
  --prompt-field-bg: color-mix(in srgb, var(--studio-ambient-a) 9%, #f7fbfd);
  --prompt-field-line: color-mix(in srgb, var(--studio-ambient-a) 23%, transparent);
  --prompt-field-line-strong: color-mix(in srgb, var(--studio-ambient-a) 48%, transparent);
}

html[data-color-mode='day'] .studio-v2 .composer-wand {
  color: color-mix(in srgb, var(--studio-ambient-a) 78%, #252833);
  background: color-mix(in srgb, var(--studio-ambient-a) 8%, #fff);
}

html[data-color-mode='day'] body[data-studio-mode='game'] .composer-input-shell {
  --prompt-field-bg: #081116;
  border-color: color-mix(in srgb, var(--studio-ambient-a) 56%, #15272b);
}

@media (max-width: 640px) {
  .studio-v2 .composer-input-shell {
    margin-inline: 2px;
  }

  .studio-v2 .prompt-input,
  .studio-v2 #prompt.prompt-input {
    padding-left: 46px;
  }

  .studio-v2 .composer-wand {
    left: 8px;
  }
}