.studio-page {
  --studio-bg: #100e14;
  --studio-panel: #17141c;
  --studio-panel-soft: #1d1922;
  --studio-ink: #f2eee7;
  --studio-muted: #b7ada3;
  --studio-quiet: #8e8580;
  --studio-amber: #e8b978;
  --studio-line: rgb(255 255 255 / 12%);
  min-width: 320px;
  margin: 0;
  color: var(--studio-ink);
  background:
    radial-gradient(ellipse at 48% 5%, rgb(111 71 53 / 17%), transparent 34rem),
    var(--studio-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}

.studio-page *,
.studio-page *::before,
.studio-page *::after { box-sizing: border-box; }

.studio-page a { color: inherit; }
.studio-page button,
.studio-page input,
.studio-page textarea { font: inherit; }
.studio-page button { color: inherit; }
.studio-page :focus-visible { outline: 2px solid var(--studio-amber); outline-offset: 3px; }
.studio-page .shell { width: min(calc(100% - 2.5rem), 82rem); margin-inline: auto; }
.studio-page .skip-link { z-index: 100; }
.studio-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--studio-line);
  background: rgb(16 14 20 / 94%);
  backdrop-filter: blur(16px);
}

.studio-header .shell {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: 2rem;
}

.studio-header .brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--studio-ink);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .07em;
}

.studio-header .brand svg { width: 2.5rem; height: 1.9rem; color: var(--studio-amber); }
.studio-header .brand-sub { display: block; color: var(--studio-muted); font-size: .56rem; letter-spacing: .2em; }
.studio-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); margin-left: auto; }
.studio-nav a,
.studio-menu a,
.language-link {
  color: var(--studio-muted);
  font-size: .82rem;
  text-decoration: none;
}
.studio-nav a:hover,
.studio-menu a:hover,
.language-link:hover { color: var(--studio-amber); }
.language-link { padding: .55rem .7rem; border: 1px solid var(--studio-line); border-radius: 999px; }
.studio-menu { display: none; position: relative; }
.studio-menu summary { cursor: pointer; list-style: none; }
.studio-menu summary::-webkit-details-marker { display: none; }
.studio-menu summary::after { content: "⌄"; padding-left: .45rem; color: var(--studio-amber); }
.studio-menu nav { position: absolute; top: calc(100% + .8rem); right: 0; display: grid; min-width: 13rem; gap: .25rem; padding: .65rem; border: 1px solid var(--studio-line); border-radius: .85rem; background: #1a1720; box-shadow: 0 1rem 3rem #0008; }
.studio-menu nav a { padding: .75rem; border-radius: .5rem; }
.studio-menu nav a:hover { background: #ffffff0c; }

.studio-main { padding: clamp(1rem, 3vw, 2.6rem) 0 4rem; }
.studio-workspace {
  width: min(calc(100% - 2rem), 88rem);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 1.4rem;
  background: linear-gradient(135deg, rgb(36 28 35 / 70%), rgb(17 15 21 / 97%) 38%);
  box-shadow: 0 2.5rem 6rem rgb(0 0 0 / 25%);
}

.studio-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3.8rem) clamp(1.4rem, 4.4vw, 4.2rem) clamp(1.6rem, 3vw, 2.7rem);
}

.studio-intro > div:first-child { max-width: 52rem; }
.studio-page .eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; color: var(--studio-amber); font-size: .67rem; font-weight: 700; letter-spacing: .16em; }
.studio-page .on-air-dot,
.experience-badge > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--studio-amber); box-shadow: 0 0 .9rem rgb(232 185 120 / 55%); }
.studio-intro h1 { max-width: 17ch; margin: 0; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 5vw, 4.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.studio-intro h1 em { color: #d8b48d; font-weight: 400; }
.studio-intro > div > p:last-child { max-width: 44rem; margin: 1rem 0 0; color: var(--studio-muted); font-size: 1rem; }
.experience-badge { display: grid; grid-template-columns: .55rem auto; align-items: center; gap: .55rem; flex: 0 0 auto; padding: .75rem .9rem; border: 1px solid rgb(232 185 120 / 24%); border-radius: .7rem; color: #edcc9c; font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.experience-badge > span { width: .42rem; height: .42rem; }
.experience-badge small { grid-column: 2; color: var(--studio-muted); font-size: .7rem; font-weight: 400; letter-spacing: 0; }

.studio-steps { display: grid; grid-template-columns: minmax(14rem, .9fr) minmax(21rem, 1.15fr) minmax(16rem, 1fr); border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); background: var(--studio-line); gap: 1px; }
.studio-step { min-width: 0; padding: clamp(1.1rem, 2.2vw, 2rem); background: var(--studio-panel); }
.step-player { background: linear-gradient(155deg, #201a22, #17141c 60%); }
.step-heading { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.35rem; }
.step-heading > span { color: var(--studio-amber); font-size: .68rem; font-variant-numeric: tabular-nums; }
.step-heading h2 { margin: 0; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 400; letter-spacing: -.02em; }
.studio-step fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-list { display: grid; gap: .55rem; }
.studio-choice,
.duration-choice,
.mix-layer,
.primary-button,
.quiet-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 2.85rem;
  border: 1px solid var(--studio-line);
  border-radius: .65rem;
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.studio-ripple { position: absolute; z-index: -1; width: 1px; height: 1px; border-radius: 50%; pointer-events: none; background: rgb(237 204 156 / 42%); box-shadow: 0 0 0 1px rgb(255 238 207 / 48%); transform: translate(-50%, -50%); animation: studio-water-ring .72s cubic-bezier(.12, .62, .26, 1) forwards; }
@keyframes studio-water-ring { to { width: 26rem; height: 26rem; opacity: 0; } }
.studio-choice { display: grid; grid-template-columns: 1.7rem 1fr 1rem; align-items: center; gap: .65rem; width: 100%; padding: .62rem .7rem; text-align: left; }
.choice-index { color: var(--studio-quiet); font-size: .68rem; font-variant-numeric: tabular-nums; }
.studio-choice strong { display: block; color: var(--studio-ink); font-size: .88rem; font-weight: 600; }
.studio-choice small { display: block; margin-top: .18rem; color: var(--studio-muted); font-size: .69rem; line-height: 1.4; }
.choice-mark { color: var(--studio-quiet); font-size: .72rem; }
.studio-choice[aria-pressed="true"],
.duration-choice[aria-pressed="true"],
.mix-layer[aria-pressed="true"] { border-color: rgb(232 185 120 / 70%); background: rgb(232 185 120 / 9%); color: #f0cb97; }
.studio-choice[aria-pressed="true"] .choice-mark { color: var(--studio-amber); }
.studio-choice:hover,
.duration-choice:hover,
.mix-layer:hover,
.primary-button:hover,
.quiet-button:hover { border-color: rgb(232 185 120 / 65%); }
.studio-choice:active,
.duration-choice:active,
.mix-layer:active,
.primary-button:active,
.quiet-button:active { transform: translateY(1px); }
.studio-page button:disabled,
.studio-page input:disabled,
.studio-page textarea:disabled { cursor: not-allowed; opacity: .52; }
.duration-list { margin-top: 1.45rem !important; }
.duration-list legend,
.mix-list legend { margin-bottom: .55rem; color: var(--studio-muted); font-size: .74rem; }
.duration-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.duration-list legend { grid-column: 1 / -1; }
.duration-choice { min-height: 2.7rem; padding: .45rem; color: var(--studio-muted); font-size: .77rem; }

.player-display { display: grid; justify-items: center; padding: .2rem .2rem .75rem; text-align: center; }
.studio-disc { position: relative; display: grid; width: clamp(7.25rem, 12vw, 9.5rem); aspect-ratio: 1; place-items: center; margin: .15rem 0 1rem; border: 1px solid #ffffff1a; border-radius: 50%; background: repeating-radial-gradient(circle at center, #29252c 0 2px, #16141a 3px 5px, #252128 6px 7px); box-shadow: 0 .8rem 2rem #0007, inset 0 0 0 7px #ffffff06; }
.studio-disc::before { position: absolute; inset: 17%; border: 1px solid #ffffff1b; border-radius: 50%; content: ""; }
.studio-disc::after { position: absolute; width: 34%; aspect-ratio: 1; border: 1px solid #684725; border-radius: 50%; background: #c9975e; content: ""; }
.studio-disc span { position: relative; z-index: 1; color: #2b2117; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: .64rem; font-weight: 700; letter-spacing: .12em; }
.player-overline { margin: 0; color: var(--studio-quiet); font-size: .59rem; font-weight: 650; letter-spacing: .14em; }
.player-display h3 { margin: .35rem 0 0; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 400; }
.player-disclosure { max-width: 24rem; margin: .3rem 0 0; color: var(--studio-muted); font-size: .72rem; }
.studio-page progress { display: block; width: 100%; height: .32rem; overflow: hidden; border: 0; border-radius: 99px; background: #ffffff20; color: var(--studio-amber); accent-color: var(--studio-amber); }
.studio-page progress::-webkit-progress-bar { border-radius: 99px; background: #ffffff20; }
.studio-page progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #b77c4c, var(--studio-amber)); }
.studio-page progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #b77c4c, var(--studio-amber)); }
.player-time-row { display: flex; justify-content: space-between; gap: .8rem; margin-top: .5rem; color: var(--studio-quiet); font-size: .67rem; font-variant-numeric: tabular-nums; }
.player-time-row span:first-child { color: var(--studio-ink); }
.player-actions { display: grid; grid-template-columns: auto auto minmax(5rem, 1fr); align-items: end; gap: .5rem; margin-top: 1rem; }
.primary-button,
.quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .8rem; color: var(--studio-ink); font-size: .78rem; text-decoration: none; }
.primary-button { border-color: var(--studio-amber); background: var(--studio-amber); color: #211810; font-weight: 700; }
.primary-button svg { width: 1rem; height: 1rem; }
.quiet-button { background: #ffffff05; }
.volume-control { display: grid; gap: .25rem; color: var(--studio-muted); font-size: .67rem; }
.volume-control input { width: 100%; min-width: 4rem; accent-color: var(--studio-amber); }
.studio-status { min-height: 1.35rem; margin: .65rem 0 1rem; color: #dfbd8b; font-size: .72rem; }
.mix-list { margin-top: .9rem !important; }
.mix-list legend { margin-bottom: .45rem; }
.mix-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.mix-list legend { width: 100%; }
.mix-layer { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .35rem; padding: .45rem .62rem; color: var(--studio-muted); font-size: .69rem; }
.mix-layer > span { color: var(--studio-amber); font-family: "DNK Serif",Georgia, "Times New Roman", serif; }

.step-copy { margin: -.25rem 0 1rem; color: var(--studio-muted); font-size: .78rem; }
.note-label { display: block; margin-bottom: .4rem; color: var(--studio-ink); font-size: .78rem; font-weight: 600; }
.studio-page textarea { display: block; width: 100%; min-height: 7.1rem; resize: vertical; padding: .75rem; border: 1px solid var(--studio-line); border-radius: .6rem; background: #0e0c12; color: var(--studio-ink); line-height: 1.6; }
.studio-page textarea::placeholder { color: var(--studio-quiet); }
.note-meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; color: var(--studio-quiet); font-size: .66rem; }
.note-private { margin: .6rem 0 .75rem; color: var(--studio-muted); font-size: .68rem; }
.note-reflection { min-height: 2.7rem; margin: .7rem 0; padding: .65rem .75rem; border-left: 2px solid var(--studio-amber); background: #ffffff06; color: #dcc8ad; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: .82rem; }
.note-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.note-actions button { flex: 1 1 auto; min-height: 2.65rem; padding-inline: .55rem; font-size: .7rem; }
.studio-footnote { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 1rem 1.4rem; color: var(--studio-muted); font-size: .72rem; text-align: center; }
.studio-footnote svg { width: 1rem; height: 1rem; color: var(--studio-amber); }
.noscript-note { margin: 0 1.5rem 1.5rem; color: #edcc9c; font-size: .8rem; }

.project-details { width: min(calc(100% - 2rem), 88rem); margin: 1.25rem auto 0; border: 1px solid var(--studio-line); border-radius: 1rem; background: #141119; }
.project-disclosure + .project-disclosure { border-top: 1px solid var(--studio-line); }
.project-disclosure summary { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; color: var(--studio-ink); cursor: pointer; list-style: none; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.project-disclosure summary::-webkit-details-marker { display: none; }
.project-disclosure summary::after { content: "+"; color: var(--studio-amber); font-family: system-ui, sans-serif; font-size: 1.2rem; }
.project-disclosure[open] summary::after { content: "−"; }
.project-disclosure summary span { margin-left: auto; color: var(--studio-quiet); font-family: system-ui, sans-serif; font-size: .72rem; }
.disclosure-copy { max-width: 69rem; padding: 0 1.2rem 1.35rem; color: var(--studio-muted); font-size: .88rem; line-height: 1.8; }
.disclosure-copy h2 { margin: .35rem 0 .6rem; color: var(--studio-ink); font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 400; }
.disclosure-copy p { margin: .55rem 0; }
.disclosure-copy a { color: #edc990; text-underline-offset: .2em; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: none; }
.status-grid article { padding: .9rem; border: 1px solid var(--studio-line); border-radius: .65rem; background: #ffffff04; }
.status-grid .eyebrow { margin: 0 0 .4rem; font-size: .58rem; }
.status-grid h3 { margin: 0; color: var(--studio-ink); font-size: .92rem; }
.status-grid p { margin: .4rem 0 0; font-size: .75rem; line-height: 1.65; }

.studio-footer { border-top: 1px solid var(--studio-line); background: #0a090c; }
.studio-footer .shell { padding-block: 1.7rem 1rem; }
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand p { margin: 0; color: var(--studio-muted); font-size: .77rem; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--studio-ink); text-decoration: none; font-weight: 700; }
.footer-brand .brand svg { width: 2rem; color: var(--studio-amber); }
.footer-brand .brand-sub { display: block; color: var(--studio-muted); font-size: .53rem; letter-spacing: .16em; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem; margin-top: 1.2rem; }
.footer-links a,
.footer-links button { padding: .35rem 0; border: 0; background: transparent; color: var(--studio-muted); font-size: .72rem; text-decoration: none; cursor: pointer; }
.footer-links a:hover,
.footer-links button:hover { color: var(--studio-amber); }
.footer-note { display: flex; justify-content: space-between; gap: 1rem; margin: 1.15rem 0 0; padding-top: .8rem; border-top: 1px solid var(--studio-line); color: var(--studio-quiet); font-size: .67rem; }
.footer-note a { color: var(--studio-muted); }
.studio-page dialog { max-width: min(32rem, calc(100% - 2rem)); border: 1px solid var(--studio-line); border-radius: 1rem; background: #1a1720; color: var(--studio-ink); }
.studio-page dialog::backdrop { background: #050407c9; backdrop-filter: blur(4px); }
.studio-page dialog form { display: grid; gap: .9rem; padding: 1rem; }
.studio-page dialog h2 { margin: 0; font-family: "DNK Serif",Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 400; }
.studio-page dialog p { margin: 0; color: var(--studio-muted); font-size: .84rem; }
.dialog-close { justify-self: end; width: 2.5rem; height: 2.5rem; border: 1px solid var(--studio-line); border-radius: 50%; background: transparent; font-size: 1.3rem; }
.consent-row { color: var(--studio-muted); font-size: .76rem; }
.studio-page [hidden] { display: none !important; }
.submission-trigger { flex: 1 1 100%; border-color: rgb(232 185 120 / 38%); color: #f0cb97; }
.submission-dialog { width: min(44rem, calc(100% - 1.25rem)); max-width: none; max-height: min(90dvh, 54rem); overflow: auto; padding: 0; scrollbar-color: #56465a #17141c; }
.submission-dialog::backdrop { background: #050407dc; backdrop-filter: blur(5px); }
.submission-form { gap: .85rem !important; padding: clamp(1rem, 3.2vw, 1.7rem) !important; }
.submission-form .dialog-close { position: sticky; top: 0; z-index: 1; justify-self: end; margin: -.2rem -.2rem -2.9rem 0; background: #1a1720; }
.submission-form .eyebrow { margin: 0; }
.submission-form h2 { max-width: 20ch; padding-right: 2rem; }
.submission-notice-list { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; color: var(--studio-muted); font-size: .78rem; line-height: 1.65; }
.submission-notice-list li::marker { color: var(--studio-amber); }
.submission-preview-wrap { min-width: 0; }
.submission-preview-wrap h3,
.submission-receipt h3 { margin: 0 0 .4rem; color: var(--studio-ink); font-size: .85rem; font-weight: 650; }
.submission-preview { max-height: 12rem; min-height: 3rem; overflow: auto; margin: 0; padding: .8rem; border: 1px solid var(--studio-line); border-radius: .6rem; background: #0e0c12; color: #dfd1bf; font: inherit; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.submission-consent { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid rgb(232 185 120 / 30%); border-radius: .65rem; background: rgb(232 185 120 / 5%); color: var(--studio-ink); font-size: .78rem; line-height: 1.6; }
.submission-consent input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; accent-color: var(--studio-amber); }
.submission-stage,
.submission-receipt { display: grid; gap: .7rem; padding-top: .2rem; }
.submission-stage > p,
.submission-receipt > p { margin: 0; }
.submission-challenge { display: grid; min-height: 4.1rem; align-items: center; justify-items: start; }
.submission-stage > button,
.submission-receipt > button { justify-self: start; }
.submission-receipt { padding: .9rem; border: 1px solid rgb(232 185 120 / 38%); border-radius: .7rem; background: rgb(232 185 120 / 5%); }
.submission-receipt > p { color: var(--studio-muted); font-size: .78rem; line-height: 1.6; }
.submission-form button:focus-visible,
.submission-consent input:focus-visible { outline: 2px solid #f0cb97; outline-offset: 3px; }

@keyframes studio-record-turn { to { transform: rotate(360deg); } }
.studio-page.is-playing .studio-disc { animation: studio-record-turn 12s linear infinite; }

@media (max-width: 900px) {
  .studio-page .shell { width: min(calc(100% - 2rem), 82rem); }
  .studio-nav { display: none; }
  .studio-menu { display: block; margin-left: auto; color: var(--studio-muted); font-size: .8rem; }
  .studio-header .language-link { margin-left: .25rem; }
  .studio-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .step-note { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 1rem; }
  .step-note .step-heading,
  .step-note .step-copy,
  .step-note .note-private,
  .step-note .note-actions { grid-column: 1 / -1; }
  .step-note .note-label,
  .step-note textarea,
  .step-note .note-meta { grid-column: 1; }
  .step-note #note-analyze,
  .step-note .note-reflection { grid-column: 2; }
  .step-note #note-analyze { grid-row: 3; align-self: end; }
  .step-note .note-reflection { grid-row: 4; }
}

@media (max-width: 620px) {
  .studio-page .shell { width: min(calc(100% - 1.25rem), 82rem); }
  .studio-header .shell { min-height: 3.8rem; gap: .7rem; }
  .studio-header .brand { gap: .4rem; font-size: .9rem; }
  .studio-header .brand svg { width: 2rem; }
  .studio-main { padding: .65rem 0 2rem; }
  .studio-workspace,
  .project-details { width: calc(100% - 1rem); border-radius: .9rem; }
  .studio-intro { display: grid; gap: 1rem; padding: 1.25rem 1rem 1rem; }
  .studio-page .eyebrow { gap: .45rem; margin-bottom: .75rem; font-size: .58rem; }
  .studio-intro h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .studio-intro > div > p:last-child { margin-top: .65rem; font-size: .86rem; }
  .experience-badge { justify-self: start; }
  .studio-steps { display: grid; grid-template-columns: minmax(0, 1fr); }
  .studio-step { padding: 1rem; }
  .step-note { grid-column: auto; display: block; }
  .step-note .step-heading,
  .step-note .step-copy,
  .step-note .note-private,
  .step-note .note-actions,
  .step-note .note-label,
  .step-note textarea,
  .step-note .note-meta,
  .step-note #note-analyze,
  .step-note .note-reflection { grid-column: auto; grid-row: auto; }
  .studio-choice { min-height: 3.25rem; }
  .duration-choice { min-height: 2.9rem; }
  .player-display { padding-top: .2rem; }
  .player-actions { grid-template-columns: auto auto minmax(6rem, 1fr); }
  .primary-button,
  .quiet-button { min-height: 2.85rem; }
  .mix-layer { min-height: 2.75rem; }
  .studio-footnote { align-items: flex-start; padding-inline: .8rem; font-size: .68rem; }
  .project-disclosure summary { min-height: 3.8rem; padding: .8rem; font-size: .95rem; }
  .project-disclosure summary span { display: none; }
  .disclosure-copy { padding: 0 .8rem 1rem; font-size: .82rem; }
  .submission-dialog { width: calc(100% - .75rem); max-height: 92dvh; border-radius: .85rem; }
  .submission-form { gap: .75rem !important; padding: .9rem !important; }
  .submission-form h2 { font-size: 1.35rem !important; }
  .submission-notice-list { gap: .5rem; padding-left: 1rem; font-size: .74rem; }
  .submission-consent { font-size: .74rem; }
  .submission-stage > button,
  .submission-receipt > button { width: 100%; }
  .submission-challenge { min-height: 4.5rem; overflow-x: auto; }
  .status-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .footer-links { gap: .35rem .9rem; }
  .footer-note { flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-page *,
  .studio-page *::before,
  .studio-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .studio-page.is-playing .studio-disc { animation: none; }
  .studio-ripple { display: none; animation: none; }
}

/* The editorial rooms share the existing player and privacy contracts. */
.studio-page { background:radial-gradient(ellipse at 51% 10%,#8c61421f,transparent 47rem),#0d0b10; --room-glow:#8963471c; font-family:system-ui,sans-serif; }
.studio-page::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,var(--room-glow),transparent 65%); transition:background 1s; }
.studio-page[data-mood="memory"],.studio-page[data-mood="nostalgic"],.studio-page[data-mood="tender"] { --room-glow:#875c6826; }
.studio-page[data-mood="dawn"],.studio-page[data-mood="hopeful"] { --room-glow:#a47c4126; }
.studio-page[data-mood="lonely"],.studio-page[data-mood="restless"] { --room-glow:#65748720; }
.studio-page .studio-main { padding:0; }
.studio-page h1,.studio-page h2,.studio-page h3 { text-wrap:balance; overflow:visible; }
.studio-page .room-hero { position:relative; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:min(850px,calc(100svh - 80px)); padding-block:3rem 5rem; gap:2rem; }
.studio-page .room-hero h1 { margin:1.6rem 0; font:400 clamp(3rem,5.7vw,5.4rem)/1.12 "DNK Serif",Georgia,serif; letter-spacing:-.055em; color:#f1eadf; }
.studio-page h2 em,.studio-page .room-hero h1 em { font-weight:400; color:#e9bc87; }
.studio-page .hero-lead { max-width:30rem; color:#c0b7ad; font-size:1.05rem; line-height:1.85; }
.room-cta { display:flex; flex-wrap:wrap; gap:1.8rem; align-items:center; margin:2.2rem 0 1.2rem; }
.studio-page .room-cta .primary-button { display:inline-flex; gap:.75rem; align-items:center; padding:.95rem 1.5rem; border-radius:99px; color:#251b13; background:#e8b978; text-decoration:none; font-size:.85rem; font-weight:600; box-shadow:0 0 0 5px #e8b97809; }
.studio-page .room-text-link { color:#e6c39b; text-decoration:none; border-bottom:1px solid #e8b97855; padding-block:.5rem; font-size:.85rem; }
.studio-page .room-quiet { color:#a89c91; font-size:.72rem; line-height:1.7; }
.room-window { position:relative; margin:0; }
.room-window svg { display:block; width:100%; max-height:640px; }
.room-window figcaption { display:flex; justify-content:space-between; gap:1rem; color:#a89c91; font-size:.58rem; letter-spacing:.1em; }
.room-window figcaption span { letter-spacing:0; font-family:"DNK Serif",Georgia,serif; font-style:italic; font-size:.8rem; }
.window-halo { transform-origin:center; animation:room-breathe 9s ease-in-out infinite alternate; }
.window-waves { animation:room-drift 12s ease-in-out infinite alternate; }
.room-dust { opacity:.5; animation:room-dust 23s linear infinite; }
.room-dust:nth-of-type(2n) { animation-delay:-9s; }
.room-dust:nth-of-type(3n) { animation-delay:-17s; }
.room-dust:nth-of-type(5n) { animation-delay:-5s; }
.candle-flame { transform-origin:310px 550px; animation:room-breathe 4s ease-in-out infinite alternate; }
.room-scroll { position:absolute; bottom:1.7rem; left:0; text-decoration:none; color:#a89c91!important; font-size:.6rem; letter-spacing:.2em; }
.room-archive { display:flex; justify-content:space-between; align-items:center; gap:2rem; border-block:1px solid #ffffff20; padding-block:1.2rem; }
.room-archive span { color:#8d8582; font-size:.61rem; letter-spacing:.08em; }
.room-archive p { margin:0; font:italic 1.05rem/1.6 "DNK Serif",Georgia,serif; color:#c7b6a3; }
.studio-page .room-section { padding-block:clamp(5rem,9vw,9rem); }
.studio-page .room-section h2,.studio-page .studio-intro h2 { margin:0 0 2.1rem; font:400 clamp(2.5rem,4.4vw,4.5rem)/1.14 "DNK Serif",Georgia,serif; letter-spacing:-.045em; }
.room-mission { display:grid; grid-template-columns:.8fr 1fr; gap:clamp(3rem,8vw,9rem); }
.room-side-note { max-width:22rem; color:#a89c91; line-height:1.85; font:italic 1rem/1.9 "DNK Serif",Georgia,serif; }
.room-mission-copy h3 { font:400 1rem/1.6 system-ui,sans-serif; color:#e0c6a6; margin:0 0 1.6rem; }
.room-mission-copy > p:not(.room-signature) { margin:0; color:#c9c0b6; font:400 1.06rem/2 system-ui,sans-serif; }
.studio-page .room-signature { margin-top:2rem; font:italic .95rem/1.8 "DNK Serif",Georgia,serif; color:#cda477; }
.room-audience,.room-ideas { border-top:1px solid #ffffff12; }
.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; margin-top:3.5rem; }
.audience-grid article { display:flex; align-items:center; gap:1.4rem; border-top:1px solid #ffffff20; padding:1.5rem 0; transition:padding .8s,background .8s; }
.audience-grid article:hover { padding-inline:.6rem; background:#ffffff04; }
.audience-grid article > span { color:#aa845d; font-size:.7rem; }
.audience-grid article > span:last-child { margin-left:auto; }
.audience-grid h3 { margin:0 0 .4rem; font:400 1.2rem/1.5 "DNK Serif",Georgia,serif; }
.audience-grid p { margin:0; color:#a89c91; font-size:.8rem; line-height:1.8; }
.idea-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; margin-top:3rem; }
.idea-grid article { position:relative; min-height:23rem; padding:2rem; border:1px solid #ffffff18; background:linear-gradient(145deg,#221a2040,#131019); transition:transform .8s,box-shadow .8s; }
.idea-grid article:hover { transform:translateY(-6px) rotate(-.6deg); box-shadow:0 1.5rem 3rem #0003; }
.idea-drawing { height:7rem; display:grid; place-content:center; font:400 4rem "DNK Serif",Georgia,serif; color:#d9b889; }
.idea-drawing svg { width:7rem; height:6rem; transition:transform 1s; }
.idea-grid article:hover .idea-drawing svg { transform:rotate(5deg); }
.idea-grid h3 { font:400 1.6rem/1.4 "DNK Serif",Georgia,serif; margin:1rem 0; }
.idea-grid p { color:#b5aca4; font-size:.87rem; line-height:1.9; margin-bottom:2rem; }
.studio-page .studio-workspace { width:min(calc(100% - 2.5rem),82rem); padding-block:4rem 5rem; border:0; border-top:1px solid #ffffff20; border-radius:0; background:transparent; box-shadow:none; }
.studio-page .studio-intro { padding:0 0 2.5rem; }
.studio-page .studio-intro > div > p:last-child { color:#b5aca4; }
.studio-page .studio-steps { grid-template-columns:.9fr 1.25fr 1fr; border:0; background:transparent; gap:0; align-items:start; }
.studio-page .studio-step { background:transparent; padding:1.8rem; border-left:1px solid #ffffff20; }
.studio-page .step-program { padding-left:0; border-left:0; }
.studio-page .studio-choice { border:0; border-bottom:1px solid #ffffff16; border-radius:0; padding:.9rem .5rem; transition:background .8s,border-color .8s; }
.studio-page .duration-choice { border:0; border-bottom:1px solid #ffffff30; border-radius:0; font-size:.67rem; }
.studio-page .studio-choice[aria-pressed="true"] { border-left:2px solid #e8b978; background:#e8b9780b; }
.studio-page .studio-disc { width:clamp(9rem,15vw,14rem); height:auto; aspect-ratio:1; margin-inline:auto; border-radius:50%; background:repeating-radial-gradient(circle,#17151a 0 3px,#302a30 4px,#151318 6px); box-shadow:0 0 0 1px #ffffff15,0 1.5rem 2rem #0005; animation:room-spin 16s linear infinite; animation-play-state:paused; }
.studio-page .studio-disc > span { display:flex; flex-direction:column; justify-content:center; gap:.4rem; width:31%; aspect-ratio:1; height:auto; border-radius:50%; background:#d0a16c; color:#29201a; font:400 1.3rem "DNK Serif",Georgia,serif; }
.studio-disc small { font:400 .42rem system-ui,sans-serif; letter-spacing:.12em; }
.record-deck { position:relative; margin:.7rem 0 1.8rem; }
.record-tonearm { position:absolute; z-index:2; width:42%; height:56%; top:0; right:-1%; border-top:3px solid #b58a60; border-right:3px solid #b58a60; transform-origin:100% 0; transform:rotate(-20deg); transition:transform 1.2s cubic-bezier(.2,.6,.3,1); border-radius:0 1rem 0 0; pointer-events:none; }
.record-tonearm::after { content:""; position:absolute; bottom:-3px; right:-4px; width:8px; height:15px; border-radius:2px; background:#e8b978; }
.studio-page.is-playing .record-tonearm { transform:rotate(9deg); }
.studio-page.is-playing .studio-disc { animation-play-state:running; }
.studio-page .step-note { background:linear-gradient(140deg,#eae0cf,#ded1bd); color:#29231f; border:0; transform:rotate(-.6deg); box-shadow:0 1.5rem 3rem #0004; padding:1.6rem; }
.studio-page .step-note h2,.studio-page .step-note .note-label,.studio-page .step-note .note-meta { color:#4e4237; }
.studio-page .step-note .step-copy,.studio-page .step-note .note-private,.studio-page .step-note .note-reflection { color:#64584b; }
.studio-page .step-note textarea { color:#29231f; background:repeating-linear-gradient(transparent 0 2.45rem,#64584d26 2.45rem 2.5rem); border:0; border-radius:0; font:italic 1.05rem/2.5rem "DNK Serif",Georgia,serif; padding:0 .2rem; min-height:10rem; }
.studio-page .step-note .quiet-button,.studio-page .step-note .primary-button { color:#3c3026; border-color:#64584d50; background:transparent; font-size:.7rem; }
.studio-page .step-note button:disabled { opacity:.48; }
.studio-page .step-note .primary-button:not(:disabled) { background:#c39562; }
.studio-page .mix-layer { border:0; border-bottom:1px solid #ffffff20; border-radius:0; font-size:.69rem; }
.studio-page .studio-footnote { padding:2rem 0 0; }
.room-monument { text-align:center; border-top:1px solid #ffffff12; overflow:clip; }
.room-monument > .eyebrow { justify-content:center; }
.monument-art { position:relative; width:min(75vw,30rem); margin:3rem auto; padding:3rem; }
.studio-page .monument-disc { width:100%; animation-play-state:running; animation-duration:30s; }
.monument-orbit { position:absolute; inset:0; border:1px solid #e8b97825; border-radius:50%; box-shadow:0 0 5rem #b6805112,inset 0 0 4rem #b6805112; animation:room-breathe 6s ease-in-out infinite alternate; }
.monument-orbit::before,.monument-orbit::after { content:""; position:absolute; inset:1rem -1.5rem; border:1px solid #e8b97816; border-radius:50%; transform:rotate(25deg); }
.monument-orbit::after { transform:rotate(-25deg); }
.room-tracklist { max-width:40rem; margin:3rem auto 1rem; text-align:left; }
.room-tracklist a { display:flex; gap:2rem; padding:1.3rem .5rem; border-top:1px solid #ffffff20; text-decoration:none; font:400 1.15rem "DNK Serif",Georgia,serif; }
.room-tracklist a span { font:400 .65rem system-ui,sans-serif; color:#ad8b68; }
.room-tracklist a span:last-child { margin-left:auto; }
.room-letter { position:relative; max-width:58rem; margin:auto; padding:clamp(2rem,6vw,5rem); transform:rotate(-.45deg); color:#29231f; background:#e9ddc9; box-shadow:0 2rem 5rem #0005; }
.studio-page .room-letter h2 { font-size:clamp(2.4rem,4vw,3.6rem); margin-top:2rem; }
.room-letter > p:not(.paper-eyebrow) { font:italic clamp(1rem,1.4vw,1.2rem)/2 "DNK Serif",Georgia,serif; }
.room-letter .paper-eyebrow { color:#76604c; font-size:.65rem; letter-spacing:.18em; }
.studio-page .room-letter .room-signature { color:#69513b; }
.letter-stamp { position:absolute; top:3rem; right:3rem; width:4rem; height:4rem; display:grid; place-content:center; text-align:center; border:1px solid #937452; border-radius:50%; font:400 1.8rem "DNK Serif",Georgia,serif; color:#937452; transform:rotate(12deg); }
.letter-stamp span { display:block; font:400 .35rem system-ui,sans-serif; letter-spacing:.1em; }
.room-moods { text-align:center; }
.room-moods > .eyebrow { justify-content:center; }
.room-mood-list { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; max-width:49rem; margin:3rem auto 2rem; }
.room-mood { min-height:48px; padding:.8rem 1.25rem; border:1px solid #ffffff25; border-radius:99px; background:transparent; color:#bfb2a5; cursor:pointer; transition:background .8s,border-color .8s; }
.room-mood:hover,.room-mood[aria-pressed="true"] { background:#e8b97812; border-color:#d6a96e91; color:#edc99e; }
.room-mood-response { min-height:3.5rem; color:#d6bd9f; font:italic 1.2rem/1.8 "DNK Serif",Georgia,serif; }
.room-boundaries { display:grid; grid-template-columns:1fr 1fr; gap:5rem; border-top:1px solid #ffffff20; }
.room-boundaries > div > p:last-child { max-width:29rem; color:#b5aca4; line-height:1.9; font-size:.9rem; }
.studio-page .room-boundaries .project-details { width:100%; margin:0; border:0; border-radius:0; }
.room-boundaries .project-disclosure summary { padding:1.3rem 0; }
.room-boundaries .disclosure-copy { padding:0 0 1.5rem; }
.room-boundaries .status-grid { grid-template-columns:1fr; }
.room-closing { position:relative; overflow:hidden; min-height:32rem; background:radial-gradient(ellipse at 50% 95%,#714a2d30,transparent 34rem); }
.room-closing .shell { position:relative; }
.studio-page .room-closing h2 { max-width:53rem; }
.room-watermark { position:absolute; z-index:-1; right:-1rem; bottom:-9rem; font:400 clamp(10rem,30vw,27rem) "DNK Serif",Georgia,serif; color:#e8b97809; pointer-events:none; }
.room-scroll-progress { position:fixed; z-index:50; top:0; left:0; height:2px; width:100%; background:linear-gradient(90deg,#8d5c35,#efc58e); transform:scaleX(0); transform-origin:left; }
.room-reveal { opacity:0; transform:translateY(22px); transition:opacity 1s ease,transform 1s cubic-bezier(.2,.6,.2,1); }
.room-reveal.is-visible { opacity:1; transform:none; }
.room-water-ring { position:fixed; z-index:60; pointer-events:none; border:1px solid #e8b97866; border-radius:50%; width:8px; height:8px; transform:translate(-50%,-50%); animation:room-water .9s ease-out forwards; }
@keyframes room-water { to { width:170px; height:170px; opacity:0; } }
@keyframes room-spin { to { transform:rotate(360deg); } }
@keyframes room-breathe { from { opacity:.65; transform:scale(.98); } to { opacity:.95; transform:scale(1.02); } }
@keyframes room-drift { to { transform:translateY(3px); } }
@keyframes room-dust { 0% { opacity:0; transform:translateY(25px); } 25%,65% { opacity:.5; } 100% { opacity:0; transform:translateY(-65px); } }
@media(min-width:1000px) { .studio-page .studio-header .shell { min-height:5.5rem; } }
@media(max-width:1000px) { .studio-page .room-hero { min-height:auto; grid-template-columns:1fr 1fr; padding-block:4rem; } .studio-page .room-hero h1 { font-size:clamp(2.6rem,6vw,4rem); } .room-window figcaption { display:block; } .room-window figcaption span { display:block; margin-top:.5rem; } .studio-page .studio-steps { grid-template-columns:1fr 1.2fr; } .studio-page .step-note { grid-column:1/-1; display:block; margin-top:2rem; } .room-boundaries { gap:3rem; } }
@media(max-width:700px) { .studio-page .shell,.studio-page .studio-workspace { width:calc(100% - 2.5rem); } .studio-page .room-hero { grid-template-columns:1fr; padding-block:3rem 4rem; gap:0; } .studio-page .room-hero h1 { font-size:clamp(3.2rem,10.7vw,4.4rem); line-height:1.13; } .room-hero-copy { max-width:32rem; } .room-window { width:85%; max-width:26rem; margin:0 auto; } .room-window figcaption { display:flex; font-size:.48rem; } .room-window figcaption span { font-size:.65rem; margin:0; } .room-scroll { bottom:1rem; } .room-archive { display:block; padding-block:1.3rem; } .room-archive p { margin:.6rem 0; } .room-archive > span:last-child { display:none; } .room-mission,.room-boundaries { grid-template-columns:1fr; gap:2rem; } .audience-grid { grid-template-columns:1fr; } .idea-grid { grid-template-columns:1fr; gap:1rem; } .idea-grid article { min-height:0; padding:1.5rem; } .idea-drawing { height:5rem; } .studio-page .studio-steps { grid-template-columns:1fr; } .studio-page .studio-step { padding:1.7rem 0; border:0; border-top:1px solid #ffffff20; } .studio-page .step-note { grid-column:auto; padding:1.5rem; } .studio-page .studio-disc { width:11rem; } .studio-page .monument-disc { width:100%; } .studio-page .studio-intro h2 { font-size:2.8rem; } .record-deck { max-width:16rem; margin-inline:auto; } .studio-page .room-section { padding-block:4.5rem; } .letter-stamp { top:2rem; right:1.5rem; width:3rem; height:3rem; font-size:1.4rem; } .room-letter { padding-top:6rem; } .room-tracklist a { gap:1.1rem; font-size:1rem; } .room-closing { min-height:27rem; } }
@media(prefers-reduced-motion:reduce) { .room-reveal { opacity:1; transform:none; } .studio-page .room-dust,.studio-page .window-halo,.studio-page .window-waves,.studio-page .candle-flame,.studio-page .monument-orbit,.studio-page .studio-disc { animation:none!important; } .room-water-ring { display:none; } }


@media(max-width:700px){.studio-page .step-copy,.studio-page .note-private,.studio-page .note-reflection,.studio-page .note-label,.studio-page .studio-choice strong,.studio-page .player-disclosure,.studio-page .studio-status{font-size:.94rem;line-height:1.7}.studio-page .studio-choice small,.studio-page .mix-layer,.studio-page .step-note button{font-size:.85rem}.studio-page button{min-height:48px}.studio-page .studio-disc>span{min-height:0}.room-mission-copy>p:not(.room-signature){font-size:1rem}}

.studio-page #studio-progress{appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;accent-color:#e8b978}.studio-page #studio-progress::-webkit-slider-runnable-track{height:2px;background:#a17a5266}.studio-page #studio-progress::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#e8b978;margin-top:-4px;box-shadow:0 0 0 4px #e8b97812}.studio-page #studio-progress::-moz-range-track{height:2px;background:#a17a5266}.studio-page #studio-progress::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#e8b978}

.studio-page .studio-disc>span{white-space:nowrap;letter-spacing:.06em;font-size:1rem}