/* Lab: an engineering notebook, with a cool grid and a dark model console. */
body[data-space="lab"] {
  --paper: #edf3f8; --ink: #152c3e; --muted: #526b80; --line: #c4d4e1;
  --orange: #126d98; --green: #19758c; --card: #e3edf5; --white: #f8fcff;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
  --serif: var(--sans); --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  background-image: linear-gradient(#456b8509 1px, transparent 1px), linear-gradient(90deg, #456b8509 1px, transparent 1px);
  background-size: 32px 32px;
}
body.night[data-space="lab"] {
  --paper: #0d1924; --ink: #ddecf5; --muted: #9bb1c2; --line: #2b4458;
  --orange: #70c5e5; --green: #70c5e5; --card: #152b3c; --white: #142434;
}
body[data-space="lab"] .site-header { min-height: 88px; }
body[data-space="lab"] .page { padding-top: 40px; }
body[data-space="lab"] .eyebrow,
body[data-space="lab"] .feature-label,
body[data-space="lab"] .model-strip,
body[data-space="lab"] .footer-right > span { font-family: var(--mono); letter-spacing: 1.3px; }
body[data-space="lab"] .page-heading { grid-template-columns: 1fr 1fr; padding-bottom: 25px; }
body[data-space="lab"] .page-heading h1 { font: 750 92px/1.05 var(--sans); letter-spacing: -5px; margin-top: 17px; }
body[data-space="lab"] .page-heading h1 > span { font: 13px var(--mono); letter-spacing: 2px; margin-left: 20px; }
body[data-space="lab"] .page-heading p { padding-bottom: 0; max-width: 430px; }
body[data-space="lab"] .project-intro { grid-template-columns: 1.12fr 1fr; }
body[data-space="lab"] .project-story { padding: 38px; }
body[data-space="lab"] .project-story h2 { font: 700 68px/1.05 var(--sans); letter-spacing: -3px; }
body[data-space="lab"] .project-story h2 small { font: 500 18px/1.7 var(--sans); letter-spacing: .3px; }
body[data-space="lab"] .sequence-art {
  position: relative; padding: 74px 30px 32px; min-height: 330px;
  background: linear-gradient(140deg, #182f47, #0a1624); color: #d9f1f7;
}
body[data-space="lab"] .sequence-art .feature-label { color: #7ba8c3; font-size: 9px; }
.terminal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; position: absolute; top: 0; left: 0; right: 0; padding: 13px 20px; border-bottom: 1px solid #7caccd25; font: 9px var(--mono); letter-spacing: 1px; color: #9bb7cb; }
.terminal-lights { display: flex; gap: 6px; }
.terminal-lights i { display: block; height: 6px; width: 6px; border-radius: 50%; background: #527d9a; }
.terminal-lights i:last-child { background: #93d2e3; }
body[data-space="lab"] .token-line { margin-top: 29px; }
body[data-space="lab"] .token-line span { font: 28px var(--mono); border-radius: 2px; border-color: #729abf55; background: #aecde408; }
body[data-space="lab"] .token-line .next-token { border-color: #88def0; background: #88def011; color: #91dcef; }
body[data-space="lab"] .sequence-art p { font: 14px var(--mono); letter-spacing: .5px; }
body[data-space="lab"] .sequence-caption { color: #86aec8; }
body[data-space="lab"] .sequence-line { border-color: #7eb6d755; }
body[data-space="lab"] .solid-button { border-radius: 2px; background: var(--orange); color: #f4fcff; }
body.night[data-space="lab"] .solid-button { color: #102632; }
body[data-space="lab"] .solid-button:hover { filter: brightness(1.12); }
body[data-space="lab"] .model-strip { gap: 17px 25px; padding: 24px 0; }
body[data-space="lab"] .model-strip > div > span { padding: 4px 10px; border: 1px solid var(--line); background: var(--white); font-size: 11px; }
body[data-space="lab"] .project-card { background: var(--white); border-top: 2px solid var(--orange); }
body[data-space="lab"] .project-card h3 { font: 600 20px/1.5 var(--sans); }
body[data-space="lab"] .interactive-card::before { background: radial-gradient(180px circle at var(--spot-x) var(--spot-y), #70afdb20, transparent 75%); }
body[data-space="lab"] .project-card:hover { background: var(--card); }
body[data-space="lab"] .section-heading h2 { font: 600 22px/1.5 var(--sans); }
body[data-space="lab"] .embed-heading h2 { font: 600 23px/1.5 var(--sans); }
body[data-space="lab"] .embed-symbol { font-family: var(--mono); color: var(--orange); }
body[data-space="lab"] .embed-placeholder { background: linear-gradient(150deg, #71aacc0a, transparent); }
body[data-space="lab"] .effects-button,
body[data-space="lab"] .play-button { border-radius: 2px; }
body[data-space="lab"] .project-footnote a { color: var(--orange); }

/* Studio: a late-night listening room, built around sleeves and warm type. */
body[data-space="studio"] {
  --paper: #1a1116; --ink: #f4e6d4; --muted: #bca9a0; --line: #573d43;
  --orange: #e3b684; --green: #d4a27e; --card: #2b1c23; --white: #25191f;
  --serif: Georgia, 'Songti SC', 'Noto Serif SC', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
  background-image: radial-gradient(ellipse at 93% 10%, #672b3229, transparent 55%);
  background-size: auto;
}
body.night[data-space="studio"] {
  --paper: #100b0f; --ink: #e7d6c4; --muted: #b19b95; --line: #46323b; --white: #1b131a; --card: #231820;
}
body[data-space="studio"] .wordmark { font-family: Georgia, serif; font-weight: 400; letter-spacing: -1.8px; }
body[data-space="studio"] .site-header { min-height: 94px; }
body[data-space="studio"] .page { padding-top: 35px; }
body[data-space="studio"] .page-heading { grid-template-columns: 1.3fr 1fr; border-bottom: 0; gap: 35px; margin-bottom: 18px; padding-bottom: 0; }
body[data-space="studio"] .page-heading .eyebrow { font-size: 9px; letter-spacing: 2.5px; }
body[data-space="studio"] .page-heading h1 { font: italic 400 92px/1.08 Georgia, serif; letter-spacing: -6px; margin-top: 18px; }
body[data-space="studio"] .page-heading h1 > span { display: block; font: 14px/1.8 var(--serif); letter-spacing: 6px; margin: 13px 0 0 5px; color: var(--muted); }
body[data-space="studio"] .page-heading p { font: 13px/2.2 var(--serif); max-width: 355px; margin-bottom: 12px; }
body[data-space="studio"] .music-player { grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: center; padding: 10px 0 35px; border: 0; background: transparent; }
.music-art-stage { min-width: 0; position: relative; padding: 22px 15px 12px 0; }
body[data-space="studio"] .music-art-stage::before { content: ''; position: absolute; width: 82%; aspect-ratio: 1; right: 0; top: 7%; border-radius: 50%; background: repeating-radial-gradient(circle, #101014 0px, #101014 2px, #272126 3px, #111015 4px); box-shadow: 0 15px 45px #0006; border: 1px solid #6d545726; }
body[data-space="studio"] .music-cover { width: 87%; position: relative; z-index: 1; transform: rotate(-3deg); background: var(--card); box-shadow: 0 20px 35px #0007; }
body[data-space="studio"] .music-cover > img { border: 1px solid #f5d9c426; }
.sleeve-caption { display: block; position: relative; font: 8px var(--sans); color: var(--muted); letter-spacing: 2.8px; margin: 31px 0 0 14px; }
body[data-space="studio"] .music-player-copy { padding: 0; }
body[data-space="studio"] .music-player-copy .feature-label { font-size: 9px; letter-spacing: 3px; color: var(--orange); }
body[data-space="studio"] .music-player-copy h2 { font: 400 clamp(42px, 4.2vw, 56px)/1.12 var(--serif); letter-spacing: -2.4px; margin: 19px 0 23px; }
body[data-space="studio"] .music-player-copy > p[data-current-description] { font: 13px/2.05 var(--sans); max-width: 440px; }
.listening-rule { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 15px; }
.listening-rule > span { font-size: 8px; letter-spacing: 2px; color: var(--muted); }
.listening-rule i { font: 34px/1.2 Georgia, serif; color: var(--orange); }
body[data-space="studio"] .music-player audio { color-scheme: dark; width: 100%; margin-top: 8px; }
body[data-space="studio"] .music-status { font-size: 10px; margin-top: 13px; }
body[data-space="studio"] .music-library-heading { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 35px; }
.music-library-heading h2 > span { margin-left: 17px; font: italic 18px Georgia, serif; color: var(--muted); }
body[data-space="studio"] .music-grid { grid-template-columns: 1fr; gap: 0; }
body[data-space="studio"] .song-card { width: 100%; display: grid; grid-template-columns: 35px 64px minmax(0, 1fr) 42px; align-items: center; gap: 21px; padding: 18px 16px; border: 0; border-block: 1px solid var(--line); background: transparent; }
body[data-space="studio"] .song-card + .song-card { border-top: 0; }
body[data-space="studio"] .song-card[aria-pressed="true"] { background: #ebbc8108; }
body[data-space="studio"] .song-card:hover { background: #ebbc8112; }
body[data-space="studio"] .song-card > img { width: 64px; height: 64px; grid-column: auto; }
.song-number { font: 10px/1.5 'SFMono-Regular', Consolas, monospace; color: var(--muted); }
.song-card-meta { display: block; min-width: 0; }
body[data-space="studio"] .song-card-title { display: block; padding: 0; font: 400 22px/1.4 Georgia, serif; }
.song-card-genre { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 2px; color: var(--muted); }
body[data-space="studio"] .song-card-action { border: 1px solid var(--line); border-radius: 50%; height: 37px; width: 37px; display: grid; place-items: center; font-size: 20px; color: var(--orange); }
body[data-space="studio"] .playground-studio { margin-top: 64px; background: transparent; border-color: var(--line); grid-template-columns: 1fr 1.35fr; }
body[data-space="studio"] .playground-copy h2 { font-size: 28px; }
body[data-space="studio"] .playground-studio .playground-stage { background: radial-gradient(ellipse at 50% 50%, #40272e, #151018); }
body[data-space="studio"] .playground-badge { color: #ba9798; }
body[data-space="studio"] .play-button { border-radius: 24px; padding-inline: 14px; }
body[data-space="studio"] .site-footer { margin-top: 8px; }

@media (max-width: 1000px) {
  body[data-space="lab"] .project-story { padding: 28px; }
  body[data-space="lab"] .project-story h2 { font-size: 55px; }
  body[data-space="studio"] .music-player { gap: 38px; }
  body[data-space="studio"] .page-heading h1 { font-size: 90px; }
  body[data-space="studio"] .music-player-copy h2 { font-size: 44px; }
}
@media (max-width: 700px) {
  body[data-space="lab"] .site-header, body[data-space="studio"] .site-header { min-height: 114px; }
  body[data-space="lab"] .page-heading, body[data-space="studio"] .page-heading { grid-template-columns: 1fr; gap: 18px; }
  body[data-space="lab"] .page-heading h1 { font-size: 70px; letter-spacing: -4px; }
  body[data-space="lab"] .page-heading h1 > span { font-size: 12px; margin-left: 16px; }
  body[data-space="lab"] .project-intro { grid-template-columns: 1fr; }
  body[data-space="lab"] .project-story { padding: 26px; }
  body[data-space="lab"] .project-story h2 { font-size: 58px; }
  body[data-space="lab"] .sequence-art { min-height: 285px; padding: 69px 22px 29px; }
  body[data-space="lab"] .terminal-topbar { padding: 13px 15px; font-size: 8px; }
  body[data-space="lab"] .model-strip { gap: 13px; }
  body[data-space="lab"] .model-strip > div { gap: 8px; }
  body[data-space="lab"] .model-strip i { display: none; }
  body[data-space="lab"] .model-strip > div > span { padding: 4px 8px; }
  body[data-space="studio"] .page { padding-top: 35px; }
  body[data-space="studio"] .page-heading { margin-bottom: 16px; }
  body[data-space="studio"] .page-heading h1 { font-size: 82px; letter-spacing: -4px; }
  body[data-space="studio"] .page-heading h1 > span { font-size: 12px; letter-spacing: 5px; margin-top: 9px; }
  body[data-space="studio"] .page-heading p { font-size: 12px; margin: 0; }
  body[data-space="studio"] .music-player { grid-template-columns: 1fr; gap: 28px; padding-top: 18px; }
  body[data-space="studio"] .music-art-stage { margin: 0 12px 0 8px; padding: 18px 15px 7px 0; }
  body[data-space="studio"] .music-player-copy h2 { font-size: 42px; letter-spacing: -1.5px; }
  body[data-space="studio"] .music-player-copy > p[data-current-description] { font-size: 12px; }
  body[data-space="studio"] .song-card { grid-template-columns: 19px 51px minmax(0, 1fr) 28px; gap: 11px; padding: 15px 8px; }
  body[data-space="studio"] .song-card > img { width: 51px; height: 51px; }
  body[data-space="studio"] .song-card-title { font-size: 17px; }
  body[data-space="studio"] .song-card-genre { letter-spacing: .9px; font-size: 7px; }
  body[data-space="studio"] .song-card-action { width: 27px; height: 27px; font-size: 16px; }
  body[data-space="studio"] .playground-studio { grid-template-columns: 1fr; margin-top: 41px; }
  body[data-space="studio"] .music-library-heading { margin-top: 8px; }
  .music-library-heading h2 > span { font-size: 15px; margin-left: 12px; }
}