:root {
  color-scheme: dark;
  --charcoal: #282a2b;
  --surface: #303234;
  --ink: #f1f0ec;
  --muted: #b5b5b3;
  --line: #46494b;
  --accent: #f3657b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--charcoal);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--charcoal) url("albums/assets/charcoal-grain.svg"); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
a:hover { color: var(--accent); }
h1, h2, p, figure { margin: 0; }
p { line-height: 1.7; }
::selection { background: var(--accent); color: var(--charcoal); }
.wrap { width: min(100% - 7rem, 84rem); margin-inline: auto; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 10; padding: 1rem; background: var(--ink); color: var(--charcoal); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6.5rem; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 2.1rem; font-weight: 650; letter-spacing: -0.075em; }
.wordmark span { color: var(--accent); margin-left: 0.09em; }
nav { display: flex; align-items: center; gap: 2.25rem; font-size: 0.8rem; }
nav a { display: flex; align-items: center; min-height: 2.75rem; gap: 0.75rem; }
.hero { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 3.5rem; min-height: 43rem; padding-block: 5rem; }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 0.65rem; color: var(--muted); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { margin-top: 2rem; font-size: clamp(4.4rem, 7.6vw, 7.4rem); font-weight: 500; letter-spacing: -0.065em; line-height: 1.02; }
h1 em { color: #dcd7ce; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-intro { max-width: 26rem; margin-top: 2rem; color: var(--muted); font-size: 0.98rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 3rem; margin-top: 2rem; padding: 1rem 1.3rem; background: var(--ink); color: var(--charcoal); font-size: 0.8rem; font-weight: 600; }
.button:hover { background: #ffffff; color: var(--charcoal); }
.hero-note { margin-top: 1.5rem; color: var(--muted); font-size: 0.62rem; }
.hero-device { min-width: 0; }
.tablet { display: block; width: 100%; height: auto; }
.tablet-display { filter: brightness(0.9); }
figcaption { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0.75rem 0; color: var(--muted); font-size: 0.62rem; }
figcaption span:first-child { letter-spacing: 0.08em; text-transform: uppercase; }
.albums-section { padding-block: 6rem 2.5rem; border-block: 1px solid var(--line); background: var(--surface) url("albums/assets/charcoal-grain.svg"); }
.albums-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.status-dot { width: 0.35rem; height: 0.35rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); font-weight: 450; letter-spacing: -0.055em; line-height: 1.1; }
.albums-intro h2 { margin-top: 1.75rem; }
.albums-copy { padding-top: 2.2rem; }
.albums-copy p, .about div p { max-width: 34rem; color: var(--muted); font-size: 0.92rem; }
.albums-copy p + p, .about div p + p { margin-top: 1rem; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 2.75rem; margin-top: 1.75rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
.collection-image { max-width: 66rem; margin-top: 4rem; }
.collection-image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.5rem; }
.product-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; color: var(--muted); font-size: 0.62rem; }
.about { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 6rem; padding-block: 6rem; }
.about > .eyebrow { align-self: start; padding-top: 0.75rem; }
.about h2 { margin-bottom: 1.75rem; }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer .wordmark { font-size: 1.6rem; }
.site-footer p, .site-footer > a:last-child { color: var(--muted); font-size: 0.7rem; }
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 4rem); }
  .hero { gap: 2rem; min-height: 36rem; }
  .albums-intro, .about { gap: 3rem; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { min-height: 5rem; gap: 1rem; }
  .wordmark { font-size: 1.7rem; }
  nav { gap: 1rem; font-size: 0.7rem; }
  nav a { gap: 0.3rem; }
  nav a:nth-child(2) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 3.5rem; min-height: 0; padding-block: 3.5rem; }
  .eyebrow { font-size: 0.56rem; letter-spacing: 0.12em; }
  h1 { font-size: clamp(3.8rem, 16vw, 5.5rem); margin-top: 1.75rem; }
  .hero-intro { max-width: 28rem; font-size: 0.92rem; }
  .hero-device { width: 100%; }
  figcaption { margin-inline: 0.35rem; font-size: 0.56rem; }
  .albums-section { padding-block: 4rem 2rem; }
  .albums-intro, .about { grid-template-columns: 1fr; gap: 1.75rem; }
  .albums-copy { padding-top: 0; }
  .collection-image { margin-top: 2.5rem; }
  .product-notes { gap: 1.2rem; font-size: 0.56rem; }
  .about { padding-block: 4rem; }
  .about > .eyebrow { padding-top: 0; }
  .site-footer p { flex-basis: calc(100% - 7rem); text-align: right; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.logo-cloud { padding-block: 3.5rem 4.5rem; border-top: 1px solid var(--line); }
.logo-cloud h2 { margin: 0 0 2rem; }
.logo-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.logo-grid li { width: 20%; height: 7rem; display: flex; align-items: center; justify-content: center; padding: 1rem; color: #dddcd7; }
.logo-grid img { display: block; width: auto; height: auto; max-width: 100%; max-height: 3rem; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; }
.logo-grid img.logo-padded { width: 100%; max-height: none; }
.albums-logo { display: inline-flex; align-items: center; font-size: 1.7rem; font-weight: 600; letter-spacing: -.06em; }
.albums-logo svg { width: 1.6rem; height: 1.6rem; margin-right: .45rem; }
.albums-logo > span { margin-left: .04em; }
@media (max-width: 900px) { .logo-grid li { width: 25%; } }
@media (max-width: 600px) { .logo-cloud { padding-block: 2.5rem; } .logo-grid li { width: 50%; height: 6rem; } .logo-cloud h2 { line-height: 1.8; } }

.studio-home h1 { font-size: clamp(3.2rem, 5.3vw, 5.5rem); line-height: 1.06; }
.studio-services { padding-block: 4rem 5rem; border-top: 1px solid var(--line); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 2.5rem; }
.service-number { color: var(--muted); font-size: .6rem; letter-spacing: .12em; }
.service-grid h2 { font-size: clamp(1.5rem, 2.2vw, 2.3rem); margin-block: 1.25rem; }
.service-grid p { color: var(--muted); font-size: .85rem; max-width: 24rem; }
.work-image { display: block; overflow: hidden; max-height: 38rem; }
.work-image img { width: 100%; height: 100%; max-height: 38rem; object-fit: cover; object-position: center; }
@media (max-width: 760px) { .studio-home h1 { font-size: clamp(2.8rem, 11vw, 5rem); } .service-grid { grid-template-columns: 1fr; gap: 2.5rem; } .studio-services { padding-block: 3rem; } }

.history-wordmark { font-size: clamp(.95rem, 1.5vw, 1.35rem); font-weight: 500; text-align: center; letter-spacing: -.025em; line-height: 1.3; color: #bbbcb9; }

.purpose-section { padding-block: 5rem; background: #202223; border-bottom: 1px solid var(--line); }
.purpose-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; margin-top: 2.5rem; }
.purpose-intro h2 { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.purpose-intro h2 em { font-family: Georgia, serif; color: #dcd7ce; font-weight: 400; }
.purpose-rituals { max-width: 24rem; margin-top: 2rem; font-size: 1.15rem; color: var(--muted); }
.purpose-copy { color: var(--muted); font-size: .95rem; }
.purpose-copy p + p { margin-top: 1.2rem; }
.purpose-copy p:first-child { color: var(--ink); }
.purpose-apps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.purpose-apps > * { padding: 1.75rem 1.25rem; border-right: 1px solid var(--line); }
.purpose-apps > :first-child { padding-left: 0; }
.purpose-apps > :last-child { border-right: 0; }
.purpose-index, .purpose-status { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .08em; }
.purpose-apps h3 { margin: 1.2rem 0 .6rem; font-size: 1.45rem; font-weight: 500; letter-spacing: -.04em; }
.purpose-apps p { color: var(--muted); font-size: .8rem; }
.purpose-status { margin-top: 1.4rem; letter-spacing: 0; }
.purpose-footnote { margin-top: 1.5rem; color: var(--muted); font-size: .68rem; }
.purpose-footnote a { display: inline-block; margin-left: .7rem; border-bottom: 1px solid var(--line); }
.philosophy-page { max-width: 48rem; padding-block: 5rem; }
.philosophy-page h1 { font-size: clamp(3rem, 7vw, 6rem); }
.philosophy-page .philosophy-lead { margin-block: 2.5rem; font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--ink); }
.philosophy-page p { margin-bottom: 1.5rem; color: var(--muted); }
@media (max-width: 760px) { .purpose-section { padding-block: 3.5rem; } .purpose-intro { grid-template-columns: 1fr; gap: 2rem; } .purpose-apps { grid-template-columns: 1fr 1fr; } .purpose-apps > * { padding: 1.5rem .8rem; } .purpose-apps > :nth-child(odd) { padding-left: 0; } .purpose-apps > :nth-child(even) { border-right: 0; } .purpose-apps > :nth-child(-n+2) { border-bottom: 1px solid var(--line); } .purpose-footnote a { margin-left: 0; margin-top: .5rem; display: table; } }

.objects-hero { padding-block: 5rem; max-width: 84rem; }
.objects-hero h1 { font-size: clamp(3.5rem, 8vw, 8rem); margin-top: 2rem; }
.objects-tagline { font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.035em; margin-top: 2rem; }
.objects-intro { max-width: 38rem; color: var(--muted); font-size: 1.05rem; margin-top: 1rem; }
.objects-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding-block: 5rem; border-bottom: 1px solid var(--line); }
.objects-teaser h2 { font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.12; font-weight: 500; letter-spacing: -.05em; margin-top: 1.5rem; }
.objects-teaser h2 em { font-family: Georgia, serif; color: #dcd7ce; font-weight: 400; }
.objects-teaser > div:last-child { align-self: center; color: var(--muted); }
.objects-teaser .text-link { color: var(--ink); }
@media (max-width: 760px) { .objects-hero { padding-block: 3.5rem; } .objects-teaser { grid-template-columns: 1fr; gap: 2rem; padding-block: 3.5rem; } .studio-home nav { gap: .7rem; font-size: .65rem; } }

.logo-grid img[src$="internet-exchange.svg"] { width: 100%; max-height: 3.5rem; }

.objects-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: center; }
.objects-hero h1 { font-size: clamp(3.2rem, 6vw, 6rem); }
.objects-hero h1 em { display: block; }
.objects-room { min-width: 0; }
.objects-room img { display: block; width: 100%; height: auto; }
.objects-room figcaption { display: block; margin: 1rem 0 0; line-height: 1.7; }
.objects-room figcaption span { display: block; font-size: .55rem; opacity: .7; letter-spacing: .04em; margin-top: .2rem; }
@media (max-width: 760px) { .objects-hero { grid-template-columns: 1fr; gap: 2rem; } .objects-hero h1 em { display: inline; } }

.objects-page .purpose-apps { grid-template-columns: repeat(5, 1fr); }
.mother-note { max-width: 44rem; margin-top: 2.5rem; }
.mother-note h3 { font-size: 1.6rem; font-weight: 500; margin-block: 1rem; }
.mother-note > p:last-child { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .objects-page .purpose-apps { grid-template-columns: 1fr 1fr; } }

.room-map { position: relative; isolation: isolate; }
.room-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--ink); z-index: 2; }
.room-hotspot:hover, .room-hotspot:focus-visible, .room-hotspot[aria-expanded="true"] { z-index: 4; }
.room-hotspot:focus-visible { outline: 1px solid var(--pulse); outline-offset: 2px; border-radius: 50%; }
.hotspot-dot { position: absolute; inset: 10px; border: 2px solid #ffffffd9; border-radius: 50%; background: #20222359; box-shadow: 0 0 0 5px #ffffff35, 0 1px 6px #0003; transition: background .18s, border-color .18s; }
.hotspot-dot::before { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }
.hotspot-dot::after { content: ''; position: absolute; inset: -2px; border: 2px solid #ffffffbf; box-shadow: 0 0 0 6px #ffffff60; border-radius: 50%; animation: room-radar 3.6s cubic-bezier(.2,.55,.45,1) infinite; animation-delay: var(--delay, 0s); pointer-events: none; }
@keyframes room-radar { 0% { transform: scale(1); opacity: 0; } 12% { opacity: .8; } 72%, 100% { transform: scale(2.8); opacity: 0; } }
.room-hotspot:hover .hotspot-dot, .room-hotspot:focus-visible .hotspot-dot, .room-hotspot[aria-expanded="true"] .hotspot-dot { background: #202223b3; border-color: #fff; }
.room-hotspot:hover .hotspot-dot::after, .room-hotspot:focus-visible .hotspot-dot::after, .room-hotspot[aria-expanded="true"] .hotspot-dot::after { animation: none; opacity: 0; }
.hotspot-messages { --delay: -.7s; } .hotspot-photos { --delay: -1.4s; } .hotspot-kids { --delay: -2.1s; } .hotspot-typewriter { --delay: -2.8s; }
.hotspot-tip { position: absolute; bottom: 42px; left: 50%; transform: translate(-50%, 6px); width: 185px; padding: .85rem 1rem; text-align: left; border-radius: 6px; background: #191b1cf5; border: 1px solid #ffffff25; box-shadow: 0 8px 25px #0004; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; pointer-events: none; }
.hotspot-tip strong { display: block; font-size: .85rem; margin-bottom: .35rem; }
.hotspot-tip > span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.room-hotspot:hover .hotspot-tip, .room-hotspot:focus-visible .hotspot-tip, .room-hotspot[aria-expanded="true"] .hotspot-tip { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.hotspot-albums .hotspot-tip { left: auto; right: 0; transform: translateY(6px); }
.hotspot-typewriter .hotspot-tip { left: 0; transform: translateY(6px); }
.hotspot-albums:hover .hotspot-tip, .hotspot-albums:focus-visible .hotspot-tip, .hotspot-albums[aria-expanded="true"] .hotspot-tip, .hotspot-typewriter:hover .hotspot-tip, .hotspot-typewriter:focus-visible .hotspot-tip, .hotspot-typewriter[aria-expanded="true"] .hotspot-tip { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .hotspot-dot::before, .hotspot-dot::after { animation: none; } .hotspot-tip { transition: none; } }


.hotspot-tip { width: 260px; padding: .75rem; border-radius: 10px; }
.hotspot-tip .hotspot-preview { display: block; width: 100%; height: 100px; margin-bottom: .8rem; border-radius: 5px; background-image: url('/assets/objects-room-clean.webp'); background-size: 600% auto; background-repeat: no-repeat; background-color: #383a3b; }
.hotspot-tip strong { font-size: 1rem; }
.hotspot-tip > span:not(.hotspot-preview) { font-size: .76rem; line-height: 1.6; }
.hotspot-tip em { display: block; font-size: .65rem; font-style: normal; color: #dad6ce; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid #ffffff20; }
@media (max-width: 480px) { .hotspot-tip { width: 220px; } .hotspot-tip .hotspot-preview { height: 80px; } }

/* Mother: desktop companion concept, based on the Albums desktop palette. */
.mother-section { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--line); }
.mother-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: end; }
.mother-intro h2 { margin-top: 1.5rem; }
.mother-intro h2 em { font-family: Georgia,serif; font-weight: 400; color: #dcd7ce; }
.mother-intro > div:last-child { color: var(--muted); font-size: .92rem; }
.mother-intro p + p { margin-top: 1rem; }
.mother-desktop { margin-top: 3.5rem; }
.mother-monitor { border: 1px solid #454548; border-radius: 17px; padding: 10px 10px 0; background: #101012; box-shadow: 0 24px 70px #0003; }
.mother-window { overflow: hidden; border: 1px solid #29292f; border-radius: 9px 9px 0 0; background: #0b0b0c; color: #efeaf6; font-family: -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.mother-titlebar { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 14px; background: #1c1c1f; color: #aaa5b2; font-size: 10px; border-bottom: 1px solid #2a2a30; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; background: #5a565e; border-radius: 50%; }.window-dots i:first-child { background: #ff5c6e; }
.mother-demo { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.mother-shell { display: grid; grid-template-columns: 160px minmax(0,1fr) 220px; min-height: 430px; }
.mother-sidebar { background: #111113; border-right: 1px solid #26262b; padding: 22px 12px 16px; display: flex; flex-direction: column; }
.mother-brand { font-size: 27px; letter-spacing: -.06em; font-weight: 600; padding-inline: 8px; }.mother-brand > span { color: #ff5c6e; }.mother-brand small { display: block; font-size: 9px; color: #9a95a3; font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.mother-nav-label { font-size: 8px; letter-spacing: .1em; color: #827e8c; margin: 26px 8px 8px; }
.mother-nav-current { display: flex; align-items: center; gap: 8px; border-radius: 6px; background: #1f1f24; padding: 10px; font-size: 11px; }.mother-nav-current small { margin-left: auto; color: #9a95a3; }
.mother-library { list-style: none; margin: 0; padding: 0 8px; }.mother-library li { display: flex; align-items: center; gap: 9px; color: #b9b4c2; font-size: 10px; padding-block: 8px; }.mother-library i,.mother-device > span > i { width: 5px; height: 5px; border-radius: 50%; background: var(--device-color); display: inline-block; }
.mother-home-status { margin-top: auto; padding: 28px 8px 0; color: #b9b4c2; font-size: 8px; }.mother-home-status > i { display: inline-block; width: 4px; height: 4px; background: #5be9c8; border-radius: 50%; margin-right: 4px; }.mother-home-status small { display: block; margin-top: 5px; color: #6e6a78; font-size: 8px; }
.mother-workspace { padding: 26px 22px 16px; min-width: 0; }.mother-workspace-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; }.mother-kicker { font-size: 8px; letter-spacing: .1em; color: #9a95a3; }.mother-workspace h3 { font-size: clamp(15px,1.7vw,23px); font-weight: 500; letter-spacing: -.035em; margin: 8px 0 5px; }.mother-workspace-heading p { font-size: 10px; color: #9a95a3; }.mother-device-count { font-size: 8px; color: #9a95a3; white-space: nowrap; border: 1px solid #2a2a30; border-radius: 20px; padding: 6px 9px; }
.mother-device-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.mother-device { text-align: left; padding: 12px 10px 10px; border: 1px solid #28282e; border-radius: 8px; background: #141417; color: #efeaf6; cursor: pointer; min-width: 0; }.mother-device.is-selected { border-color: #ff5c6e; background: #1d171c; }.mother-device:hover { background: #222126; }.mother-device:focus-visible,.mother-window select:focus-visible,.mother-apply:focus-visible { outline: 2px solid #ff5c6e; outline-offset: 3px; }.mother-device strong { display: block; font-size: 9px; font-weight: 500; margin-top: 10px; line-height: 1.4; }.mother-device > span:last-child { display: flex; gap: 5px; align-items: center; font-size: 8px; color: #9a95a3; margin-top: 4px; }
.mother-mini-screen { display: flex; position: relative; align-items: center; justify-content: center; aspect-ratio: 16/10; width: 100%; border: 3px solid var(--device-color); border-radius: 5px; background: #0b0b0c; overflow: hidden; box-shadow: 0 3px 8px #0004; }.mother-mini-screen img { width: 58%; height: 90%; object-fit: contain; }.screen-albums::after { content: ''; width: 26%; height: 65%; margin-left: 5%; background: repeating-linear-gradient(transparent 0 7px,#4c4952 7px 8px); }.writing-lines { width: 84%; font: 5px/1.8 monospace; color: #e7e3e9; }.writing-lines b { font-weight: 400; }.photo-landscape { width: 94%; height: 90%; background: linear-gradient(151deg,transparent 48%,#8d9a80 49% 68%,#576a57 69%),linear-gradient(25deg,#6f7f6b 35%,#c8b88e 36% 42%,#afbec0 43%); }.message-bubbles { width: 70%; display: grid; gap: 5px; }.message-bubbles i { width: 75%; height: 8px; background: #63555d; border-radius: 4px; }.message-bubbles i:nth-child(2) { margin-left: auto; background: #af6b77; }.kids-shapes { color: #c2b0dd; font-size: 24px; line-height: .9; text-align: center; }
.mother-feedback { min-height: 2.5em; font-size: 9px; color: #9a95a3; margin-top: 16px; }
.mother-inspector { padding: 28px 18px 18px; border-left: 1px solid #26262b; background: #141417; }.mother-inspector h4 { font-size: 16px; font-weight: 500; letter-spacing: -.025em; margin: 12px 0 3px; }.mother-device-location { font-size: 8px; color: #9a95a3; }.mother-assignment-preview { width: 82%; margin: 18px auto; }.mother-inspector label { display: block; font-size: 9px; margin: 13px 0 6px; color: #b9b4c2; }.mother-window select { width: 100%; padding: 9px 7px; font: 10px system-ui,sans-serif; color: #efeaf6; background: #1c1c1f; border: 1px solid #35353c; border-radius: 5px; }.mother-device-description { min-height: 3.2em; color: #9a95a3; font-size: 9px; line-height: 1.6; margin-top: 10px; }.mother-apply { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #ff5c6e; color: #101012; font-size: 10px; font-weight: 600; border: 0; border-radius: 5px; padding: 11px 9px; margin-top: 17px; cursor: pointer; }.mother-apply:hover { background: #ff8090; }.mother-local-note { font-size: 8px; line-height: 1.5; color: #9a95a3; margin-top: 9px; }
.mother-monitor-chin { height: 30px; display: grid; place-items: center; color: #757378; font-size: 9px; letter-spacing: -.04em; }.mother-monitor-stand { width: 160px; height: 54px; margin: 0 auto; background: linear-gradient(#29292c,#3d3d40); clip-path: polygon(30% 0,70% 0,77% 86%,100% 92%,100% 100%,0 100%,0 92%,23% 86%); }.mother-desktop figcaption { margin-top: 1rem; }
@media (max-width: 1000px) { .mother-shell { grid-template-columns: 125px minmax(0,1fr) 185px; }.mother-workspace { padding: 22px 14px 14px; }.mother-device-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.mother-inspector { padding: 24px 12px 15px; }.mother-intro { gap: 3rem; } }
@media (max-width: 760px) { .mother-section { margin-top: 3rem; padding-top: 3rem; }.mother-intro { grid-template-columns: 1fr; gap: 1.5rem; }.mother-desktop { margin-top: 2rem; }.mother-monitor { padding: 6px 6px 0; border-radius: 12px; }.mother-shell { grid-template-columns: minmax(0,1fr); }.mother-sidebar { display: none; }.mother-workspace { padding: 22px 15px 10px; }.mother-workspace h3 { font-size: 22px; }.mother-device-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.mother-inspector { border-left: 0; border-top: 1px solid #26262b; padding: 20px; }.mother-assignment-preview { width: 130px; float: right; margin: 15px 0 15px 15px; }.mother-inspector label,.mother-inspector select { clear: both; }.mother-device-description { min-height: 0; }.mother-titlebar { padding-inline: 9px; gap: 8px; font-size: 9px; }.mother-demo { font-size: 6px; }.mother-desktop figcaption { flex-direction: column; gap: .3rem; }.mother-device strong { font-size: 8px; } }

/* Dedicated, freshly rendered details rather than enlarged room pixels. */
.hotspot-tip { width: 320px; }
.hotspot-tip .hotspot-preview { height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #333536; }
.hotspot-mother .hotspot-tip { left: auto; right: 0; transform: translateY(6px); }
.hotspot-mother:hover .hotspot-tip, .hotspot-mother:focus-visible .hotspot-tip, .hotspot-mother[aria-expanded="true"] .hotspot-tip { transform: translateY(0); }
@media (max-width: 480px) { .hotspot-tip { width: 250px; } }

.room-hotspot.tip-below .hotspot-tip { top: 44px; bottom: auto; }

/* A conventional, unbranded monitor with a 16:9 display and even bezel. */
.mother-monitor { padding: 8px 8px 0; border-radius: 10px; background: #101012; }
.mother-window { border-radius: 3px; }
.mother-monitor-chin { height: 8px; }
.mother-monitor-stand { width: 130px; height: 54px; background: linear-gradient(#151517,#2c2c2e); clip-path: polygon(40% 0,60% 0,60% 83%,100% 90%,100% 100%,0 100%,0 90%,40% 83%); }
@media (min-width: 1001px) { .mother-window { aspect-ratio: 16 / 9; display: flex; flex-direction: column; } .mother-shell { flex: 1; min-height: 0; } }

/* All rollovers use the identical master, at its original isometric angle. */
.hotspot-tip .room-detail { display: block; height: auto; aspect-ratio: 4 / 3; background-image: url('/assets/objects-room-master-albums-ui.webp'); background-size: 370.37% auto; background-repeat: no-repeat; background-color: #333536; }

/* Objects: daylight, distinct chapters and four clear purposes. */
.objects-page { --charcoal: #e7e3db; --ink: #292c2c; --muted: #666b68; --line: #c8c8bf; color-scheme: light; background: #e7e3db; color: var(--ink); }
.objects-page .site-header { border-color: #c6c6bd; }
.objects-page .objects-hero { padding-block: 4.5rem 5.5rem; }
.objects-page h1 em { color: #565e56; }
.objects-page .objects-intro { max-width: 25rem; line-height: 1.65; }
.objects-page .purpose-section { padding-block: 6rem; background: #faf8f3; border-block: 1px solid #d6d5ca; }
.purpose-editorial { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6rem; }
.purpose-editorial h2 { margin-top: 2rem; font-size: clamp(3rem,5vw,5rem); }
.purpose-editorial h2 em,.family-heading h2 em,.objects-page .mother-intro h2 em { color: #697467; font-family: Georgia,serif; font-weight: 400; }
.purpose-editorial-copy { max-width: 33rem; }
.purpose-editorial-copy p { color: var(--muted); font-size: .95rem; }
.purpose-editorial-copy p + p { margin-top: 1.3rem; }
.purpose-editorial-copy .purpose-lead { color: var(--ink); font-size: clamp(1.3rem,2.1vw,1.8rem); line-height: 1.5; letter-spacing: -.025em; }
.objects-family { background: #dcded4; padding-block: 5rem; }
.family-heading { display: flex; justify-content: space-between; gap: 3rem; align-items: end; }
.family-heading h2 { margin-top: 1.5rem; }
.family-heading > p { color: var(--muted); max-width: 24rem; font-size: .9rem; }
.objects-page .purpose-apps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; border: 0; margin-top: 3rem; }
.objects-page .purpose-apps > * { padding: 1.8rem; background: #f8f7f1; border: 1px solid #cdd0c5; border-radius: 8px; }
.object-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 2rem; background: var(--icon-bg); color: var(--icon-ink); }
.object-icon svg { width: 30px; height: 30px; }
.object-music { --icon-bg:#dce5ef; --icon-ink:#45678d; }.object-messages { --icon-bg:#efdcdb; --icon-ink:#a2565c; }.object-type { --icon-bg:#dce8df; --icon-ink:#4c765e; }.object-create { --icon-bg:#e6dff0; --icon-ink:#8063a2; }
.objects-page .purpose-apps h3 { font-size: 1.5rem; margin-top: 1rem; line-height: 1.2; }
.objects-page .purpose-apps p { line-height: 1.65; }
.objects-page .purpose-apps .purpose-status { padding-top: 1rem; margin-top: 1.4rem; border-top: 1px solid #dcdfd3; font-size: .6rem; }
.objects-page .purpose-apps a:hover { border-color: #8c9c88; color: inherit; background: #fff; }
.objects-page .mother-section { padding-block: 5.5rem; margin-top: 0; border: 0; }
.objects-page .mother-desktop { max-width: 68rem; margin-inline: auto; }
.objects-page .mother-monitor { border: 1px solid #bdbfb7; padding: 0; background: #f6f5f1; border-radius: 10px; box-shadow: 0 20px 45px #3c423416; overflow: hidden; }
.objects-page .mother-window { display: block; aspect-ratio: auto; border: 0; border-radius: 0; color: #303435; background: #f2f2ee; }
.objects-page .mother-titlebar { background: #e3e4de; color: #69706d; border-color: #cdd0c8; height: 36px; }
.objects-page .mother-monitor-chin,.objects-page .mother-monitor-stand { display: none; }
.objects-page .mother-shell { grid-template-columns: 150px minmax(0,1fr) 220px; min-height: 520px; }
.objects-page .mother-sidebar { background: #303835; color: #f1f2ec; border: 0; }
.objects-page .mother-brand small,.objects-page .mother-library li { color: #d0d8d1; }
.objects-page .mother-nav-label,.objects-page .mother-home-status { color: #b7c3b9; }
.objects-page .mother-nav-current { background: #46534a; }.objects-page .mother-home-status small { color: #b7c3b9; }
.objects-page .mother-device-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.objects-page .mother-device { background: #fff; border-color: #d6dcd3; color: #303735; padding: 12px; }
.objects-page .mother-device.is-selected { border-color: #aa5e6a; background: #fdf6f4; }
.objects-page .mother-device > span:last-child,.objects-page .mother-kicker,.objects-page .mother-workspace-heading p,.objects-page .mother-feedback,.objects-page .mother-device-count { color: #6a746d; }
.objects-page .mother-device-count { border-color: #ccd3c9; }
.objects-page .mother-workspace h3 { font-size: 22px; }
.objects-page .mother-inspector { background: #fcfcf9; border-color: #d4d9d0; }
.objects-page .mother-device-location,.objects-page .mother-device-description,.objects-page .mother-local-note { color: #68716b; }
.objects-page .mother-inspector label { color: #515d54; }
.objects-page .mother-window select { background: #fff; color: #303735; border-color: #c9d0c4; }
.objects-page .mother-apply { background: #c36e7b; color: #fff; }
.objects-page .mother-desktop figcaption { color: #69716a; }
.objects-page .site-footer { padding-block: 2.5rem; }
.objects-page .hotspot-tip { --ink:#f1f0ec; --muted:#c2c5be; color: var(--ink); }
@media(max-width:1000px) { .purpose-editorial { gap: 3rem; }.objects-page .purpose-apps { grid-template-columns: repeat(2,minmax(0,1fr)); }.objects-page .mother-shell { grid-template-columns: 120px minmax(0,1fr) 190px; } }
@media(max-width:760px) { .objects-page .objects-hero { padding-block: 3rem; }.objects-page .purpose-section,.objects-family,.objects-page .mother-section { padding-block: 3.5rem; }.purpose-editorial { grid-template-columns: 1fr; gap: 2rem; }.purpose-editorial h2 { margin-top: 1.4rem; }.family-heading { display: block; }.family-heading > p { margin-top: 1.5rem; }.objects-page .purpose-apps > * { padding: 1.25rem; }.object-icon { margin-bottom: 1.5rem; }.objects-page .purpose-apps h3 { font-size: 1.3rem; }.objects-page .mother-shell { grid-template-columns: 1fr; }.objects-page .mother-sidebar { display: none; }.objects-page .mother-inspector { border-top: 1px solid #d4d9d0; }.objects-page .mother-workspace { padding: 22px 15px; }.objects-page .mother-workspace h3 { font-size: 20px; }.objects-page .mother-device-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Alternate dark and daylight chapters. */
.objects-page { --charcoal:#282a2b; --ink:#f1f0ec; --muted:#b5b5b3; --line:#46494b; color-scheme:dark; background:#282a2b; }
.objects-page .site-header { border-color:#46494b; }
.objects-page h1 em { color:#dcd7ce; }
.objects-page .purpose-section { --ink:#292c2c; --muted:#666b68; --line:#c8c8bf; color:var(--ink); color-scheme:light; }
.objects-family { background:#303633; --ink:#f1f0ec; --muted:#bac4bb; --line:#535e55; color:var(--ink); }
.objects-family .family-heading h2 em { color:#ced5c8; }
.objects-page .objects-family .purpose-apps > * { background:#3b443e; border-color:#566158; }
.objects-page .objects-family .purpose-apps .purpose-status { border-color:#5a665c; }
.objects-page .objects-family .purpose-apps a:hover { background:#465148; border-color:#8d9d89; }
.objects-page .mother-section { --ink:#292c2c; --muted:#666b68; --line:#c8c8bf; color:var(--ink); color-scheme:light; background:#e7e3db; box-shadow:0 0 0 100vmax #e7e3db; clip-path:inset(0 -100vmax); }

/* Homepage: concise product introductions without oversized prototype media. */
.home-products { background:#e7e3db; color:#292c2c; --ink:#292c2c; --muted:#666b68; --line:#bfc3b8; padding-block:4.5rem; }
.home-products-heading { display:grid; grid-template-columns:1fr 1.3fr; gap:6rem; align-items:start; }
.home-products-heading > .eyebrow { padding-top:.7rem; }
.home-products-heading h2 { font-size:clamp(2.2rem,4vw,3.6rem); }
.home-products-heading h2 em { color:#697467; font-family:Georgia,serif; font-weight:400; }
.home-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.home-product-grid article + article { border-left:1px solid var(--line); padding-left:4rem; }
.home-product-grid h3 { margin:1.2rem 0 .8rem; font-size:2rem; letter-spacing:-.05em; font-weight:500; }
.home-product-grid article > p:not(.eyebrow) { max-width:28rem; color:var(--muted); font-size:.92rem; }
.home-products .text-link { margin-top:1rem; }
@media(max-width:760px) { .home-products { padding-block:3rem; }.home-products-heading { grid-template-columns:1fr; gap:1.5rem; }.home-product-grid { grid-template-columns:1fr; gap:2rem; margin-top:2rem; padding-top:2rem; }.home-product-grid article + article { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:2rem; } }