/* Mimi Pillow identity. Layout and interactive controls remain in studio.css. */
:root {
  color-scheme: light;
  --bg: #f6f0df;
  --ink: #65334e;
  --muted: #785c67;
  --lime: #8c4168;
  --line: #dcc6c4;
  --cream: #fff9ee;
  --dark: #65334e;
  --orange: #b07a26;
  --pink: #f4c2d1;
  --sans: "Avenir Next", "Trebuchet MS", Arial, sans-serif;
}
body { background: var(--bg); }
h1,h2,h3 { letter-spacing: -.045em; font-weight: 700; }
.site-header { background: var(--bg); }
.wordmark { letter-spacing: -.055em; }
.brand-avatar { position: relative; width: 64px; height: 52px; overflow: hidden; flex-shrink: 0; }
.brand-avatar img { position: absolute; width: 174px; height: 116px; max-width: none; left: -53px; top: -15px; }
.header-inner nav a:after { height: 2px; }
.skip { background: var(--ink); color: var(--cream); }
.hero { grid-template-columns: 1fr 1fr; padding-block: 48px 56px; gap: 36px; }
.hero h1 { font-size: clamp(60px,6.6vw,96px); line-height: 1.04; letter-spacing: -.065em; }
.hero-description { color: var(--muted); max-width: 480px; font-size: 21px; line-height: 1.65; }
.hero-footnote { font-size: 13px; margin-top: 28px; }
.button { border-radius: 50px; padding-inline: 26px; font-size: 16px; }
.button-lime { background: var(--ink); color: var(--cream); box-shadow: 0 5px 0 #dbb6bf; }
.button-lime:hover { background: #844364; }
.studio-portrait { position: relative; background: var(--bg); padding: 24px 0; text-align: center; }
.studio-portrait img { width: 100%; height: auto; }
.portrait-note,.portrait-caption { display: block; color: var(--muted); }
.portrait-note { font: 12px/1.6 var(--mono); letter-spacing: .09em; margin-bottom: 10px; }
.portrait-caption { font-size: 21px; margin-top: 12px; font-style: italic; }
.studio-strip { background: #f0d6da; }
.strip-inner { color: var(--ink); }
.strip-star { color: #956518; }
.toy-section { display: grid; grid-template-columns: .95fr 1fr; align-items: center; gap: 56px; padding-block: 60px 24px; }
.toy-copy h2 { font-size: clamp(36px,4vw,56px); margin-bottom: 24px; }
.toy-copy>p:not(.eyebrow) { color: var(--muted); max-width: 460px; margin-bottom: 24px; font-size: 20px; line-height: 1.7; }
.play-lab { background: #fff9ef; border: 1px solid #d4afb9; border-radius: 28px; overflow: hidden; box-shadow: 8px 9px 0 #ead3d5; }
.lab-header,.lab-controls { border-color: var(--line); }
.lab-header .eyebrow,.stack-counter strong { color: var(--ink); }
.lab-badge,.lab-coordinate,.stack-counter span,.lab-controls .lab-hint,.lab-options { color: var(--muted); }
.canvas-wrap { background-image: radial-gradient(#b98a9c55 1px,transparent 1px); }
.canvas-wrap:before,.canvas-wrap:after { color: #a66c82; }
.lab-action { background: var(--ink); color: var(--cream); border-radius: 30px; }
.lab-action:hover { background: #844364; }
.game-feature { background: #eed4da; border: 1px solid var(--line); border-radius: 32px; }
.game-meta,.game-description,.game-facts { color: var(--muted); }
.development-tag { border-color: #b48b9b; border-radius: 20px; }
.game-copy h3 { color: var(--ink); }
.game-copy h3 span { color: #a4607f; }
.game-facts { border-color: #c8a5b3; }
.button-cream { background: var(--ink); color: var(--cream); }
.button-cream:hover { background: #844364; }
.gameplay-section { background: #fff9ee; }
.gameplay-copy .section-index,.gameplay-copy>p:not(.eyebrow) { color: var(--muted); }
.biome-options button { color: var(--ink); border-radius: 24px; }
.biome-options button[aria-pressed=true] { background: #f0d7df; border-color: #c99aad; color: var(--ink); }
.biome-options button:hover { background: #f5e5e8; }
.screenshot-stage { background: #e9d8d2; border-color: #dbc4c6; border-radius: 40px; }
.screenshot-stage[data-scene="1"] { background: #f2d7bf; }
.screenshot-stage[data-scene="2"] { background: #ded5e9; }
.stage-orbit,.stage-orbit:after { border-color: #8c416830; }
.phone-preview { border-color: #63344c; background: #63344c; box-shadow: 16px 22px 0 #8c416816; }
.enlarge-hint { background: #63344cf0; }
.about-intro>div,.studio-principles p { color: var(--muted); }
.principle-art { color: #a24f76; }
.studio-principles article:nth-child(3) .principle-art { color: #8b6b9c; }
.contact-section { background: #f0bfce; color: var(--ink); }
.contact-section p:not(.eyebrow) { color: #674354; }
.contact-arrow { background: var(--ink); color: var(--cream); }
.contact-email { border-color: #b67a92; }
.support-intro>p:not(.eyebrow),.faq details p,.privacy-summary p:not(.eyebrow),.site-footer>div { color: var(--muted); }
.support-intro>.text-link { color: var(--ink); }
.button-outline { border-color: #aa7e91; }
.button-outline:hover { background: #f0d7df; }
dialog { background: var(--cream); color: var(--ink); border-color: #b48b9b; border-radius: 24px; }
dialog::backdrop { background: #3d1f35b8; }
.gallery-toolbar button,.gallery-bottom button { border-color: #b48b9b; border-radius: 20px; }
.gallery-toolbar button:hover,.gallery-bottom button:hover { background: #f0d7df; }

/* Comfortable reading sizes, with less space between related content. */
.eyebrow,.section-index { font-size: 12px; }
.header-inner nav,.header-contact { font-size: 16px; }
.strip-inner { font-size: 12px; }
.text-link { font-size: 16px; }
.work-section { padding-block: 64px; }
.section-heading { margin-bottom: 28px; }
.section-heading>p { font-size: 18px; }
.game-copy { padding: 36px; }
.game-meta { font-size: 12px; gap: 10px; flex-wrap: wrap; }
.game-copy h3 { margin-top: 24px; }
.game-tagline { font-size: 42px; }
.game-description { font-size: 19px; line-height: 1.65; max-width: 470px; margin-top: 20px; }
.game-facts { font-size: 11px; gap: 10px 14px; }
.gameplay-section { padding-block: 60px; }
.gameplay-grid { gap: 48px; }
.gameplay-copy { max-width: 510px; }
.gameplay-copy>p:not(.eyebrow) { font-size: 20px; line-height: 1.7; max-width: 490px; }
.biome-options button { font-size: 14px; }
.stage-label,.screenshot-caption,.enlarge-hint { font-size: 11px; }
.screenshot-caption { flex-wrap: wrap; }
.about-section { padding-block: 64px; }
.about-intro { gap: 48px; }
.about-intro>div { font-size: 20px; line-height: 1.75; max-width: 530px; }
.studio-principles { margin-top: 38px; }
.studio-principles article { padding-block: 28px; }
.principle-art { margin-bottom: 18px; }
.studio-principles .eyebrow { font-size: 12px; }
.studio-principles h3 { font-size: 30px; }
.studio-principles p { font-size: 18px; line-height: 1.65; max-width: 350px; }
.contact-inner { padding-block: 48px; }
.contact-section p:not(.eyebrow) { font-size: 19px; }
.contact-email { font-size: 22px; }
.support-section { gap: 56px; padding-block: 64px 50px; }
.support-intro>p:not(.eyebrow) { font-size: 19px; }
.support-intro .support-note { font-size: 16px!important; max-width: 410px; }
.faq summary { font-size: 19px; line-height: 1.45; }
.faq details p { font-size: 17px; line-height: 1.75; padding-right: 0; }
.privacy-summary { padding-block: 32px 42px; gap: 28px; }
.privacy-summary .eyebrow { font-size: 12px; }
.privacy-summary h2 { font-size: 32px; }
.privacy-summary p:not(.eyebrow) { font-size: 17px; max-width: 560px; }
.button-outline { font-size: 15px; }
.site-footer { flex-wrap: wrap; }
.site-footer p,.site-footer>div { font-size: 14px; }
.lab-header .eyebrow,.lab-badge,.lab-coordinate,.lab-options { font-size: 11px; }
.lab-controls p { font-size: 15px; }
.lab-controls .lab-hint { font-size: 12px; }
.lab-action { font-size: 14px; }
@media(max-width:850px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { max-width: 600px; }
  .studio-portrait { width: min(100%,560px); justify-self: center; padding: 20px 0; }
  .toy-section { grid-template-columns: 1fr; gap: 30px; }
  .toy-copy>p:not(.eyebrow) { max-width: 500px; }
  .play-lab { justify-self: center; width: 100%; }
}
@media(max-width:600px) {
  .header-inner { height: 90px; }
  .header-inner .wordmark { font-size: 23px; gap: 3px; }
  .brand-avatar { width: 48px; height: 44px; }
  .brand-avatar img { width: 140px; height: auto; left: -45px; top: -11px; }
  .hero { padding-block: 30px 45px; }
  .hero h1 { font-size: clamp(52px,12vw,72px); }
  .portrait-note { font-size: 11px; }
  .portrait-caption { font-size: 19px; }
  .toy-section { padding-block: 50px 0; }
  .toy-copy h2 { font-size: 40px; }
  .play-lab { box-shadow: 4px 5px 0 #ead3d5; }
  .game-feature { border-radius: 24px; }
  .game-copy { padding: 26px; }
  .site-footer .wordmark { font-size: 25px; }
  .contact-email { font-size: clamp(14px,4.3vw,18px); }
  .header-inner nav { font-size: 13px; gap: 12px; }
  .hero-copy>.eyebrow { font-size: 11px; }
  .hero-description { font-size: 18px; }
  .hero-footnote { font-size: 12px; }
  .toy-copy>p:not(.eyebrow),.gameplay-copy>p:not(.eyebrow),.about-intro>div { font-size: 18px; }
  .game-tagline { font-size: 36px; }
  .game-description { font-size: 18px; }
  .game-facts { font-size: 11px; }
  .gameplay-grid,.about-intro { gap: 28px; }
  .about-section,.work-section { padding-block: 48px; }
  .support-section { padding-block: 48px 38px; gap: 28px; }
  .support-intro>p:not(.eyebrow) { font-size: 18px; }
  .faq summary { font-size: 18px; }
  .studio-principles h3 { font-size: 28px; }
  .studio-principles article,.studio-principles article+article { padding-block: 24px; }
  .privacy-summary h2 { font-size: 30px; }
  .stage-label,.screenshot-caption { font-size: 10px; }
  .lab-controls p,.lab-action { font-size: 14px; }
  .lab-controls .lab-hint { font-size: 12px; }
  .lab-options { font-size: 11px; flex-wrap: wrap; }
  .lab-header { flex-wrap: wrap; gap: 4px; }
  .site-footer p,.site-footer>div { font-size: 13px; }
}
@media(max-width:350px) {
  .header-inner .wordmark { font-size: 20px; }
  .header-inner nav { gap: 10px; }
}