@charset "UTF-8";

:root {
  font-family: var(--nh-font-stack-001);
  color: var(--nh-home-ink);
  background: var(--nh-home-cream);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: var(--nh-home-ink);
  --muted: var(--nh-home-muted);
  --paper: var(--nh-home-paper);
  --cream: var(--nh-home-cream);
  --line: var(--nh-home-line);
  --brick: var(--nh-home-accent);
  --brick-dark: var(--nh-home-accent-strong);
  --olive: var(--nh-home-leaf);
  --shadow: var(--nh-shadow-001);
  --serif: var(--nh-font-stack-002);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  min-width: 320px;
  background-image: radial-gradient(ellipse at 4% 16%, var(--nh-detail-color-009) 0, transparent 36%), radial-gradient(ellipse at 96% 40%, var(--nh-detail-color-010) 0, transparent 31%);
  line-height: var(--nh-line-height-001);
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, input, textarea { accent-color: var(--brick); }
a { color: inherit; text-decoration: none; }
a, button, summary { touch-action: manipulation; }
img { display: block; max-width: 100%; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon { width: 21px; height: 21px; stroke-width: 1.65; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { font-weight: var(--nh-font-weight-001); line-height: var(--nh-line-height-002); }
h1, h2 { font-family: var(--nh-font-stack-003); }
p:last-child { margin-bottom: 0; }
button, a, summary, input, textarea { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--nh-semantic-focus); }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
::selection { color: var(--nh-detail-color-012); background: var(--nh-detail-color-013); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.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; }
.skip-link { position: fixed; left: 18px; top: -100px; z-index: 100; padding: var(--nh-space-001) var(--nh-space-002); border-radius: var(--nh-radius-001); background: var(--ink); color: var(--nh-pure-white); }
.skip-link:focus { top: 12px; }
.eyebrow, .section-kicker { display: block; color: var(--olive); font-size: var(--nh-type-001); font-weight: var(--nh-font-weight-002); letter-spacing: var(--nh-letter-spacing-001); line-height: var(--nh-line-height-003); text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--nh-radius-002); background: var(--nh-detail-color-014); box-shadow: var(--nh-shadow-002); }
.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: var(--nh-space-003); padding: var(--nh-space-004) var(--nh-space-005); border: 1px solid var(--nh-detail-color-015); border-radius: var(--nh-radius-003); background: var(--nh-detail-color-016); color: var(--nh-detail-color-017); font-size: var(--nh-type-002); font-weight: var(--nh-font-weight-001); line-height: var(--nh-line-height-004); transition: background .18s, transform .18s, box-shadow .18s; }
.btn:hover { background: var(--nh-detail-color-018); transform: translateY(-1px); }
.btn.primary { background: var(--brick); border-color: var(--brick); color: var(--nh-pure-white); box-shadow: var(--nh-shadow-003); }
.btn.primary:hover { background: var(--brick-dark); }
.btn.subtle { background: var(--nh-detail-color-019); border-color: var(--nh-detail-color-020); font-weight: var(--nh-font-weight-003); }
.btn.danger { color: var(--nh-semantic-warning); background: var(--nh-detail-color-022); border-color: var(--nh-detail-color-023); }
.btn .icon { width: 17px; height: 17px; }
.icon-button { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; flex: 0 0 38px; border: 0; border-radius: var(--nh-radius-002); background: transparent; color: var(--nh-detail-color-024); }
.icon-button:hover { background: var(--nh-detail-color-025); color: var(--ink); }
.empty-state { padding: var(--nh-space-006) var(--nh-space-007); text-align: center; color: var(--muted); font-size: var(--nh-type-003); }

/* The frame is a quiet paper edge around the home. */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--nh-detail-color-026); background: var(--nh-detail-color-027); }
.header-inner { max-width: 1372px; min-height: 94px; margin: 0 auto; padding: var(--nh-space-008) var(--nh-space-009); display: flex; align-items: center; justify-content: space-between; gap: var(--nh-space-010); }
.brand { display: grid; grid-template-columns: 38px auto; column-gap: var(--nh-space-004); align-items: center; min-width: 210px; }
.brand > svg { grid-row: 1 / 3; width: 35px; height: 35px; color: var(--brick); stroke-width: 1.7; }
.brand > span { font-family: var(--nh-font-stack-004); font-weight: var(--nh-font-weight-002); font-size: var(--nh-type-004); line-height: var(--nh-line-height-005); letter-spacing: var(--nh-letter-spacing-002); }
.brand small { display: block; padding-top: var(--nh-space-011); color: var(--nh-detail-color-028); font-family: var(--nh-font-stack-005); font-weight: var(--nh-font-weight-004); font-size: var(--nh-type-001); letter-spacing: var(--nh-letter-spacing-003); line-height: var(--nh-line-height-006); }
.top-nav { display: flex; align-items: center; gap: var(--nh-space-011); }
.nav-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--nh-space-012); min-height: 40px; padding: var(--nh-space-003) var(--nh-space-013); border-radius: var(--nh-radius-004); color: var(--nh-detail-color-029); font-size: var(--nh-type-002); white-space: nowrap; transition: background .18s, color .18s; }
.nav-link .icon { width: 17px; height: 17px; }
.nav-link:hover { color: var(--nh-detail-color-030); background: var(--nh-detail-color-031); }
.nav-link.active { color: var(--brick-dark); background: var(--nh-detail-color-032); font-weight: var(--nh-font-weight-001); }
.demo-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--nh-space-012); min-height: 32px; padding: var(--nh-space-011) var(--nh-space-014); border: 1px solid var(--nh-detail-color-033); border-radius: var(--nh-radius-005); background: transparent; font-size: var(--nh-type-001); color: var(--nh-detail-color-034); letter-spacing: var(--nh-letter-spacing-004); white-space: nowrap; }
.demo-pill .icon { width: 13px; height: 13px; }
.page { max-width: 1372px; margin: 0 auto; min-height: calc(100vh - 220px); padding: var(--nh-space-006) var(--nh-space-009) var(--nh-space-015); }
.site-footer { max-width: 1300px; margin: 0 auto; padding: var(--nh-space-016) 0 var(--nh-space-017); border-top: 1px solid var(--nh-detail-color-035); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nh-space-001); color: var(--nh-detail-color-036); font-size: var(--nh-type-001); letter-spacing: var(--nh-letter-spacing-005); }
.site-footer p { margin: 0; }
.site-footer button { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
.site-footer button:hover { color: var(--brick); }
.site-footer .icon { width: 13px; height: 13px; margin-right: var(--nh-space-011); }
.mobile-nav { display: none; }

/* A doorway, a shelf, a little afternoon. */
.home-intro { position: relative; padding: var(--nh-space-012) var(--nh-space-011) var(--nh-space-018); }
.home-intro .eyebrow { margin-bottom: var(--nh-space-004); }
.home-intro h1 { margin: 0 0 var(--nh-space-014); font-size: clamp(var(--nh-type-004), 3vw, var(--nh-type-005)); letter-spacing: var(--nh-letter-spacing-006); }
.home-intro > p { margin-bottom: 0; color: var(--nh-detail-color-037); font-size: var(--nh-type-002); letter-spacing: var(--nh-letter-spacing-005); }
.today-note { position: absolute; top: 2px; right: 12px; max-width: 245px; padding: var(--nh-space-013) var(--nh-space-016); background: var(--nh-detail-color-038); color: var(--nh-detail-color-039); border-radius: var(--nh-radius-006) var(--nh-radius-007) var(--nh-radius-005) var(--nh-radius-006); box-shadow: var(--nh-shadow-004); font-size: var(--nh-type-006); line-height: var(--nh-line-height-007); transform: rotate(3deg); }
.today-note::before { position: absolute; top: -7px; left: 38%; width: 56px; height: 15px; content: ""; background: var(--nh-detail-color-040); transform: rotate(-7deg); }
.today-note small { display: block; color: var(--nh-detail-color-041); font-size: var(--nh-type-001); letter-spacing: var(--nh-letter-spacing-007); }
.today-note .icon { width: 16px; height: 16px; margin-right: var(--nh-space-011); }
.home-scene { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: var(--nh-space-019); align-items: start; padding-top: var(--nh-space-004); }
.two-doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nh-space-020); align-items: start; padding: var(--nh-space-021) var(--nh-space-012) var(--nh-space-008); }
.door { position: relative; height: 535px; overflow: hidden; border: 9px solid var(--nh-detail-color-042); border-bottom-width: 13px; border-radius: var(--nh-radius-008) var(--nh-radius-008) var(--nh-radius-009) var(--nh-radius-009); isolation: isolate; box-shadow: var(--nh-shadow-005); transition: transform .32s, box-shadow .32s; }
.door.noel { transform: rotate(-1.3deg); }
.door.eli { transform: translateY(10px) rotate(1.3deg); }
.door:hover { transform: translateY(-3px) rotate(0); box-shadow: var(--nh-shadow-006); }
.door-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2; transition: transform .7s; }
.door:hover .door-image { transform: scale(1.025); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--nh-detail-color-043) 0%, transparent 24%, transparent 43%, var(--nh-detail-color-044) 76%, var(--nh-detail-color-045) 100%); z-index: -1; }
.door.eli::after { background: linear-gradient(180deg, var(--nh-detail-color-046) 0%, transparent 27%, transparent 40%, var(--nh-detail-color-047) 74%, var(--nh-detail-color-048) 100%); }
.door-top { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: var(--nh-space-012); max-width: calc(100% - 28px); padding: var(--nh-space-011) var(--nh-space-014); background: var(--nh-detail-color-049); color: var(--nh-detail-color-050); border: 1px solid var(--nh-detail-color-051); border-radius: var(--nh-radius-010); box-shadow: var(--nh-shadow-007); font-size: var(--nh-type-001); white-space: nowrap; }
.door-top .icon { width: 13px; height: 13px; }
.door-caption { position: absolute; bottom: 22px; left: 25px; right: 22px; color: var(--nh-detail-color-052); }
.door-caption small { display: block; margin-bottom: var(--nh-space-011); font-family: var(--nh-font-stack-006); font-style: italic; font-size: var(--nh-type-006); color: var(--nh-detail-color-053); letter-spacing: var(--nh-letter-spacing-008); }
.door-caption h2 { margin: 0 0 var(--nh-space-021); font-family: var(--nh-font-stack-004); font-size: var(--nh-type-007); font-weight: var(--nh-font-weight-003); letter-spacing: var(--nh-letter-spacing-009); }
.door-caption p { margin: 0 0 var(--nh-space-005); font-size: var(--nh-type-006); color: var(--nh-detail-color-054); line-height: var(--nh-line-height-008); }
.enter-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--nh-space-022); padding: var(--nh-space-023) var(--nh-space-024); min-height: 38px; border: 1px solid var(--nh-detail-color-055); border-radius: var(--nh-radius-011); background: var(--nh-detail-color-056); color: var(--nh-detail-color-057); backdrop-filter: blur(7px); font-size: var(--nh-type-008); transition: background .2s; }
.enter-link:hover { background: var(--nh-detail-color-058); }
.enter-link .icon { width: 16px; height: 16px; }
.home-shelf { display: flex; flex-direction: column; align-items: stretch; gap: var(--nh-space-016); padding: var(--nh-space-008) var(--nh-space-011) 0; }
.common-polaroid { display: block; background: var(--nh-detail-color-059); padding: var(--nh-space-004) var(--nh-space-004) var(--nh-space-013); box-shadow: var(--nh-shadow-008); transform: rotate(2deg); transition: transform .25s; }
.common-polaroid:hover { transform: rotate(.2deg) translateY(-3px); }
.common-polaroid > img { width: 100%; aspect-ratio: 1.65; object-fit: cover; }
.common-polaroid > div { position: relative; padding: var(--nh-space-001) var(--nh-space-012) 0; }
.common-polaroid small { display: block; font-size: var(--nh-type-009); letter-spacing: var(--nh-letter-spacing-003); color: var(--nh-detail-color-060); }
.common-polaroid h2 { margin: var(--nh-space-025) 0 var(--nh-space-026); font-size: var(--nh-type-010); letter-spacing: var(--nh-letter-spacing-008); }
.common-polaroid p { margin: 0; font-size: var(--nh-type-008); color: var(--nh-detail-color-061); }
.common-polaroid .icon { width: 24px; height: 24px; color: var(--brick); }
.common-polaroid > div > .icon { position: absolute; bottom: 4px; right: 4px; }
.little-note { position: relative; padding: var(--nh-space-022) var(--nh-space-016); background: var(--nh-detail-color-062); border-radius: var(--nh-radius-006) var(--nh-radius-012) var(--nh-radius-013) var(--nh-radius-006); box-shadow: var(--nh-shadow-009); transform: rotate(-2.2deg); color: var(--nh-detail-color-063); font-size: var(--nh-type-002); line-height: var(--nh-line-height-007); }
.little-note::before { content: ""; position: absolute; width: 55px; height: 16px; top: -8px; left: calc(50% - 28px); background: var(--nh-detail-color-064); transform: rotate(4deg); }
.little-note .eyebrow, .little-note small { font-size: var(--nh-type-009); color: var(--nh-detail-color-065); }
.little-note h3 { margin: var(--nh-space-023) 0 var(--nh-space-003); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-011); font-weight: var(--nh-font-weight-003); }
.little-note p { margin-bottom: var(--nh-space-003); }
.little-note footer { text-align: right; font-size: var(--nh-type-008); color: var(--nh-detail-color-066); }
.mini-vinyl { display: flex; align-items: center; gap: var(--nh-space-024); width: 100%; min-height: 88px; padding: var(--nh-space-008) var(--nh-space-024); border: 1px solid var(--nh-detail-color-067); border-radius: var(--nh-radius-005); background: var(--nh-detail-color-068); text-align: left; transform: rotate(1deg); transition: background .2s; }
.mini-vinyl:hover { background: var(--nh-detail-color-069); }
.record { position: relative; display: block; width: 72px; height: 72px; flex: 0 0 72px; border-radius: var(--nh-radius-002); background: repeating-radial-gradient(circle, var(--nh-detail-color-070) 0, var(--nh-detail-color-070) 1px, var(--nh-detail-color-071) 2px, var(--nh-detail-color-072) 3px); box-shadow: var(--nh-shadow-010); }
.record::before { content: ""; position: absolute; inset: 0; border-radius: var(--nh-radius-002); background: conic-gradient(from 22deg, transparent 0deg, var(--nh-detail-color-073) 45deg, transparent 90deg, transparent 170deg, var(--nh-detail-color-074) 210deg, transparent 275deg); }
.record::after { content: ""; position: absolute; inset: 33%; border-radius: var(--nh-radius-002); background: radial-gradient(circle, var(--nh-detail-color-075) 0 9%, var(--nh-detail-color-076) 10% 67%, var(--nh-detail-color-077) 69%); border: 2px solid var(--nh-detail-color-078); }
.mini-vinyl .record { width: 57px; height: 57px; flex-basis: 57px; }
.track-info { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--nh-space-027); }
.track-info small { font-size: var(--nh-type-009); color: var(--nh-detail-color-079); letter-spacing: var(--nh-letter-spacing-010); }
.track-info strong { font-family: var(--nh-font-stack-004); font-size: var(--nh-type-003); font-weight: var(--nh-font-weight-003); }
.track-info span, .track-info p { margin: 0; font-size: var(--nh-type-001); color: var(--nh-detail-color-080); }
.mini-vinyl > .icon { width: 19px; height: 19px; color: var(--nh-detail-color-081); }
.home-bottom { display: grid; grid-template-columns: 1fr 330px; align-items: center; gap: var(--nh-space-028); padding: var(--nh-space-029) var(--nh-space-030) 0; }
.home-activity { padding: 0 0 0 var(--nh-space-031); border-left: 2px solid var(--nh-detail-color-082); }
.home-activity h3 { margin: var(--nh-space-025) 0 var(--nh-space-001); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-012); letter-spacing: var(--nh-letter-spacing-005); }
.activity-line { display: flex; align-items: baseline; gap: var(--nh-space-008); padding: var(--nh-space-011) 0; font-size: var(--nh-type-006); color: var(--nh-detail-color-034); }
.activity-line time, .activity-line > small { color: var(--nh-detail-color-083); font-size: var(--nh-type-001); white-space: nowrap; font-variant-numeric: tabular-nums; }
.activity-line a { color: var(--nh-detail-color-084); text-decoration: underline; text-decoration-color: var(--nh-detail-color-085); text-underline-offset: 4px; }
.activity-line .icon { width: 14px; height: 14px; margin-right: var(--nh-space-011); }
.handwritten { padding: 0 0 var(--nh-space-012); transform: rotate(-3deg); font-family: var(--nh-font-stack-007); font-size: var(--nh-type-013); line-height: var(--nh-line-height-007); color: var(--nh-detail-color-086); letter-spacing: var(--nh-letter-spacing-008); text-align: center; }
.handwritten p { margin: 0; }
.handwritten small { display: block; font-family: var(--nh-font-stack-006); font-style: italic; font-size: var(--nh-type-006); letter-spacing: var(--nh-letter-spacing-005); }

/* Rooms have a painted wall and a desk for the things kept there. */
.room-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--nh-space-002); margin-bottom: var(--nh-space-032); }
.back-link { display: inline-flex; align-items: center; gap: var(--nh-space-021); font-size: var(--nh-type-006); color: var(--nh-detail-color-087); }
.back-link .icon { width: 17px; height: 17px; }
.back-link:hover { color: var(--brick); }
.room-title { flex: 1; }
.room-title h1 { margin: 0 0 var(--nh-space-025); font-size: var(--nh-type-014); font-weight: var(--nh-font-weight-003); }
.room-title p { margin: 0; font-size: var(--nh-type-008); color: var(--nh-detail-color-088); }
.room-title p.eyebrow { margin-bottom: var(--nh-space-012); font-size: var(--nh-type-009); color: var(--olive); }
.room-actions { display: flex; align-items: center; gap: var(--nh-space-023); }
.room-scene { display: grid; grid-template-columns: minmax(265px, 31%) minmax(0, 1fr); align-items: start; gap: var(--nh-space-033); }
.hero-panel { position: sticky; top: 24px; height: 584px; overflow: hidden; border: 8px solid var(--nh-detail-color-016); border-radius: var(--nh-radius-014) var(--nh-radius-014) var(--nh-radius-015) var(--nh-radius-015); box-shadow: var(--nh-shadow-008); transform: rotate(-1deg); isolation: isolate; }
.hero-panel > img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: 50% 36%; z-index: -2; }
.hero-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, var(--nh-detail-color-089) 100%); z-index: -1; }
.hero-caption { position: absolute; bottom: 27px; left: 24px; right: 24px; color: var(--nh-detail-color-090); }
.hero-caption h2 { margin-bottom: var(--nh-space-004); font-size: var(--nh-type-014); font-weight: var(--nh-font-weight-003); }
.hero-caption p { margin-bottom: var(--nh-space-034); font-size: var(--nh-type-006); color: var(--nh-detail-color-091); line-height: var(--nh-line-height-007); }
.hero-caption .btn { background: var(--nh-detail-color-092); border-color: transparent; font-weight: var(--nh-font-weight-003); font-size: var(--nh-type-008); }
.room-desk { padding: var(--nh-space-021) var(--nh-space-026) var(--nh-space-024); min-width: 0; }
.desk-label { display: flex; align-items: center; justify-content: space-between; gap: var(--nh-space-024); padding: 0 var(--nh-space-027) var(--nh-space-034); color: var(--nh-detail-color-093); font-size: var(--nh-type-008); letter-spacing: var(--nh-letter-spacing-007); }
.desk-label h2 { font-size: var(--nh-type-011); margin: 0; color: var(--nh-detail-color-094); }
.desk-label small { font-size: var(--nh-type-001); }
.edit-help { margin: 0 0 var(--nh-space-035); padding: var(--nh-space-001) var(--nh-space-024); border-left: 2px solid var(--nh-detail-color-095); background: var(--nh-detail-color-096); font-size: var(--nh-type-008); color: var(--nh-detail-color-097); line-height: var(--nh-line-height-008); }
.widget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nh-space-007) var(--nh-space-035); align-items: start; padding: var(--nh-space-021) var(--nh-space-011) var(--nh-space-030); }
.widget { position: relative; min-width: 0; min-height: 190px; align-self: start; border: 1px solid var(--nh-detail-color-098); border-radius: var(--nh-radius-007); background: var(--nh-detail-color-059); box-shadow: var(--nh-shadow-011); transform: rotate(var(--tilt, -1deg)); transition: transform .24s, box-shadow .24s; }
.widget:hover { transform: rotate(0) translateY(-3px); box-shadow: var(--nh-shadow-012); z-index: 2; }
.widget.size-wide { grid-column: span 2; }
.widget.size-tall { min-height: 275px; }
.widget-open { display: block; width: 100%; min-height: inherit; padding: var(--nh-space-031) var(--nh-space-002) var(--nh-space-036); border: 0; border-radius: var(--nh-radius-007); background: transparent; text-align: left; line-height: var(--nh-line-height-009); }
.widget-open:focus-visible { outline-offset: -6px; }
.widget-label { display: block; margin-bottom: var(--nh-space-012); color: var(--nh-detail-color-099); font-size: var(--nh-type-009); letter-spacing: var(--nh-letter-spacing-010); text-transform: uppercase; }
.widget-label .icon { width: 13px; height: 13px; margin-right: var(--nh-space-025); }
.widget-title { display: block; margin: 0 0 var(--nh-space-023); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-015); font-weight: var(--nh-font-weight-003); line-height: var(--nh-line-height-004); color: var(--nh-detail-color-100); }
.widget-summary { display: block; margin: 0; font-size: var(--nh-type-008); color: var(--nh-detail-color-101); line-height: var(--nh-line-height-007); }
.widget-meta { display: block; margin-top: var(--nh-space-013); font-size: var(--nh-type-009); color: var(--nh-detail-color-102); }
.widget-share { position: absolute; bottom: 11px; right: 10px; min-height: 28px; display: inline-flex; align-items: center; gap: var(--nh-space-025); padding: var(--nh-space-025) var(--nh-space-003); background: transparent; border: 1px solid var(--nh-detail-color-103); border-radius: var(--nh-radius-013); color: var(--nh-detail-color-104); font-size: var(--nh-type-009); }
.widget-share:hover { color: var(--nh-detail-color-105); background: var(--nh-detail-color-106); }
.widget-share .icon { width: 12px; height: 12px; }
.widget-art { position: relative; margin: -12px -10px var(--nh-space-005); overflow: hidden; }
.widget-art > img { width: 100%; height: 158px; object-fit: cover; }
.widget.size-wide .widget-art > img { height: 205px; }
.widget.look-note { background: var(--nh-detail-color-107); border-color: var(--nh-detail-color-108); }
.widget.look-note::before { position: absolute; top: -8px; left: 30%; width: 57px; height: 17px; content: ""; background: var(--nh-detail-color-109); transform: rotate(-4deg); z-index: 1; pointer-events: none; }
.widget.look-note .widget-title { font-family: var(--nh-font-stack-007); font-size: var(--nh-type-013); }
.widget.look-note .widget-summary { font-family: var(--nh-font-stack-007); font-size: var(--nh-type-016); line-height: var(--nh-line-height-007); }
.widget.look-photo { background: var(--nh-detail-color-110); }
.widget.look-photo .widget-open { padding-top: var(--nh-space-035); }
.widget.look-photo .widget-title { font-size: var(--nh-type-017); }
.widget.look-book { background: var(--nh-detail-color-111); }
.widget.look-book .widget-art { min-height: 138px; display: flex; align-items: center; justify-content: center; padding: var(--nh-space-011) 0 var(--nh-space-014); margin-bottom: var(--nh-space-004); overflow: visible; }
.book-cover { display: flex; min-height: 128px; width: 95px; padding: var(--nh-space-005) var(--nh-space-030) var(--nh-space-013) var(--nh-space-005); align-items: center; justify-content: center; border-radius: var(--nh-radius-012) var(--nh-radius-013) var(--nh-radius-013) var(--nh-radius-012); background: var(--nh-detail-color-112); border-left: 5px solid var(--nh-detail-color-113); box-shadow: var(--nh-shadow-013); color: var(--nh-detail-color-114); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-017); letter-spacing: var(--nh-letter-spacing-006); text-align: center; line-height: var(--nh-line-height-008); transform: rotate(-5deg); }
.book-cover small { font-size: var(--nh-type-009); }
.widget.look-vinyl { background: var(--nh-detail-color-115); }
.widget.look-vinyl .widget-art { display: flex; align-items: center; justify-content: center; min-height: 128px; margin-bottom: var(--nh-space-021); overflow: visible; }
.widget.look-vinyl .record { width: 111px; height: 111px; flex-basis: 111px; transform: rotate(-12deg); box-shadow: var(--nh-shadow-014); }
.widget.look-vinyl .widget-title { font-family: var(--nh-font-stack-004); font-size: var(--nh-type-011); }
.widget.look-invite { background: var(--nh-detail-color-116); border-color: var(--nh-detail-color-117); }
.widget.look-invite .widget-label { color: var(--nh-detail-color-118); }
.widget.look-invite .widget-title { color: var(--nh-detail-color-119); }
.widget.look-invite .widget-summary { color: var(--nh-detail-color-120); }
.widget.look-invite .widget-art { min-height: 90px; display: flex; justify-content: center; align-items: center; color: var(--nh-detail-color-121); }
.widget.look-invite .widget-art .icon { width: 55px; height: 55px; stroke-width: 1.1; }
.editing .widget { outline: 1px dashed var(--nh-detail-color-122); outline-offset: 6px; }
.editing .widget-open { padding-bottom: var(--nh-space-037); }
.editing .widget-share { bottom: 49px; }
.widget-controls { display: flex; justify-content: center; gap: var(--nh-space-025); padding: var(--nh-space-003); border-top: 1px dashed var(--nh-detail-color-123); background: var(--nh-detail-color-124); }
.widget-controls button { width: 30px; height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--nh-detail-color-125); border-radius: var(--nh-radius-013); background: var(--nh-detail-color-016); color: var(--nh-detail-color-126); font-size: var(--nh-type-008); }
.widget-controls .icon { width: 14px; height: 14px; }
.widget-controls button:hover { background: var(--nh-detail-color-127); }
.add-widget { display: flex; min-height: 160px; flex-direction: column; align-items: center; justify-content: center; gap: var(--nh-space-001); width: 100%; border: 1px dashed var(--nh-detail-color-128); border-radius: var(--nh-radius-013); background: var(--nh-detail-color-129); color: var(--nh-detail-color-130); font-size: var(--nh-type-006); }
.add-widget:hover { background: var(--nh-detail-color-131); }
.add-widget .icon { width: 26px; height: 26px; }

.common-hero { position: relative; min-height: 365px; overflow: hidden; border: 9px solid var(--nh-detail-color-042); border-radius: var(--nh-radius-013); box-shadow: var(--nh-shadow-008); isolation: isolate; transform: rotate(-.45deg); }
.common-hero > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; z-index: -2; }
.common-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nh-detail-color-132) 0, var(--nh-detail-color-133) 48%, transparent 72%); z-index: -1; }
.common-heading { max-width: 520px; padding: var(--nh-space-038) var(--nh-space-039); color: var(--nh-detail-color-134); }
.common-heading .eyebrow { margin-bottom: var(--nh-space-001); color: var(--nh-detail-color-135); }
.common-heading h1 { margin-bottom: var(--nh-space-030); font-size: var(--nh-type-018); font-weight: var(--nh-font-weight-003); letter-spacing: var(--nh-letter-spacing-008); }
.common-heading p { font-size: var(--nh-type-002); line-height: var(--nh-line-height-007); color: var(--nh-detail-color-136); margin-bottom: var(--nh-space-007); }
.common-heading .btn { background: var(--nh-detail-color-137); border-color: transparent; }
.common-content { max-width: 1120px; margin: var(--nh-space-040) auto 0; }
.common-content > h2 { font-size: var(--nh-type-013); margin: 0 0 var(--nh-space-007) var(--nh-space-021); font-weight: var(--nh-font-weight-003); }
.common-content .widget-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Chat stays quiet enough for the conversation to be the main event. */
.chat-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 680px; border: 1px solid var(--nh-detail-color-138); border-radius: var(--nh-radius-009); overflow: hidden; background: var(--nh-detail-color-059); box-shadow: var(--nh-shadow-015); }
.chat-sidebar { padding: var(--nh-space-041) var(--nh-space-024); background: var(--nh-detail-color-139); border-right: 1px solid var(--nh-detail-color-140); }
.sidebar-heading { margin: 0 var(--nh-space-001) var(--nh-space-022); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-012); color: var(--nh-detail-color-141); }
.sidebar-heading small { display: block; margin-top: var(--nh-space-021); font-family: var(--nh-font-stack-008); font-size: var(--nh-type-009); font-weight: var(--nh-font-weight-004); letter-spacing: var(--nh-letter-spacing-011); color: var(--nh-detail-color-142); }
.contact { display: flex; width: 100%; align-items: center; gap: var(--nh-space-001); margin-bottom: var(--nh-space-003); padding: var(--nh-space-030) var(--nh-space-001); border: 1px solid transparent; border-radius: var(--nh-radius-016); background: transparent; text-align: left; color: var(--nh-detail-color-143); }
.contact:hover { background: var(--nh-detail-color-144); }
.contact.active { background: var(--nh-detail-color-145); border-color: var(--nh-detail-color-146); box-shadow: var(--nh-shadow-016); color: var(--nh-detail-color-147); }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; object-position: 50% 23%; border-radius: var(--nh-radius-002); border: 2px solid var(--nh-detail-color-148); box-shadow: var(--nh-shadow-017); }
.contact-copy { display: block; flex: 1; min-width: 0; }
.contact-copy strong { display: block; font-size: var(--nh-type-002); font-weight: var(--nh-font-weight-001); }
.contact-copy small, .contact-copy p { display: block; margin: var(--nh-space-026) 0 0; font-size: var(--nh-type-001); line-height: var(--nh-line-height-004); color: var(--nh-detail-color-149); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact > .icon { width: 16px; height: 16px; }
.chat-main { min-width: 0; display: flex; flex-direction: column; }
.chat-heading { min-height: 86px; display: flex; align-items: center; gap: var(--nh-space-001); padding: var(--nh-space-005) var(--nh-space-041); border-bottom: 1px solid var(--nh-detail-color-150); background: var(--nh-chat-paper); }
.chat-heading > div { flex: 1; min-width: 0; }
.chat-heading h1 { font-family: var(--nh-font-stack-003); font-size: var(--nh-type-012); font-weight: var(--nh-font-weight-003); margin: 0 0 var(--nh-space-026); }
.chat-heading p { display: flex; align-items: center; gap: var(--nh-space-021); font-size: var(--nh-type-001); color: var(--nh-detail-color-152); margin: 0; }
.chat-heading .avatar { width: 43px; height: 43px; flex-basis: 43px; }
.chat-room-link { display: flex; align-items: center; gap: var(--nh-space-021); font-size: var(--nh-type-008); color: var(--nh-detail-color-153); white-space: nowrap; }
.chat-room-link .icon { width: 16px; height: 16px; }
.chat-room-link:hover { color: var(--brick); }
.demo-caption { padding: var(--nh-space-012) var(--nh-space-035); text-align: center; color: var(--nh-detail-color-154); background: var(--nh-detail-color-155); font-size: var(--nh-type-009); letter-spacing: var(--nh-letter-spacing-012); border-bottom: 1px solid var(--nh-detail-color-156); }
.messages { flex: 1; min-height: 380px; height: min(59vh, 650px); max-height: 720px; padding: var(--nh-space-042) var(--nh-space-043) var(--nh-space-043); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nh-detail-color-157) transparent; background: radial-gradient(ellipse at 15% 35%, var(--nh-detail-color-158), transparent 60%), var(--nh-detail-color-159); }
.message-row { display: flex; align-items: flex-start; gap: var(--nh-space-004); margin: var(--nh-space-035) 0; }
.message-avatar { width: 31px; height: 31px; flex: 0 0 31px; object-fit: cover; object-position: 50% 23%; border: 2px solid var(--nh-detail-color-160); border-radius: var(--nh-radius-002); }
.message-content { min-width: 0; max-width: min(83%, 520px); }
.message-byline { margin: 0 0 var(--nh-space-011) var(--nh-space-027); color: var(--nh-detail-color-161); font-size: var(--nh-type-009); }
.message-byline time { margin-left: var(--nh-space-023); color: var(--nh-detail-color-162); font-size: var(--nh-type-009); }
.bubble { display: inline-block; padding: var(--nh-space-014) var(--nh-space-024); border: 1px solid var(--nh-detail-color-163); border-radius: var(--nh-radius-006) var(--nh-radius-017) var(--nh-radius-017) var(--nh-radius-017); background: var(--nh-detail-color-164); color: var(--nh-detail-color-165); font-size: var(--nh-type-002); line-height: var(--nh-line-height-010); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.mine { flex-direction: row-reverse; }
.message-row.mine .message-content { text-align: right; }
.message-row.mine .message-byline { margin: 0 var(--nh-space-027) var(--nh-space-011) 0; }
.message-row.mine .bubble { border-radius: var(--nh-radius-017) var(--nh-radius-006) var(--nh-radius-017) var(--nh-radius-017); background: var(--nh-detail-color-166); border-color: var(--nh-detail-color-167); color: var(--nh-detail-color-168); text-align: left; }
.chat-card { display: block; width: 280px; max-width: 100%; margin-top: var(--nh-space-023); padding: var(--nh-space-005) var(--nh-space-002); border: 1px solid var(--nh-detail-color-169); border-radius: var(--nh-radius-005); background: var(--nh-detail-color-170); box-shadow: var(--nh-shadow-018); text-align: left; color: var(--nh-detail-color-171); }
button.chat-card { cursor: pointer; }
.chat-card:hover { box-shadow: var(--nh-shadow-019); border-color: var(--nh-detail-color-172); }
.chat-card .card-kind { display: flex; align-items: center; gap: var(--nh-space-021); margin-bottom: var(--nh-space-003); color: var(--nh-detail-color-173); font-size: var(--nh-type-009); letter-spacing: var(--nh-letter-spacing-008); }
.chat-card .card-kind .icon { width: 15px; height: 15px; }
.chat-card h3 { margin: 0 0 var(--nh-space-021); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-011); font-weight: var(--nh-font-weight-003); }
.chat-card > p { margin-bottom: var(--nh-space-030); font-size: var(--nh-type-008); line-height: var(--nh-line-height-008); color: var(--nh-detail-color-174); }
.chat-card > img { width: 100%; height: 128px; object-fit: cover; border-radius: var(--nh-radius-006); margin: var(--nh-space-021) 0 var(--nh-space-001); }
.card-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--nh-space-004); padding-top: var(--nh-space-004); border-top: 1px solid var(--nh-detail-color-175); color: var(--nh-detail-color-176); font-size: var(--nh-type-009); }
.card-footer .icon { width: 15px; height: 15px; }
.system-event { margin: var(--nh-space-005) var(--nh-space-003); color: var(--nh-detail-color-177); font-size: var(--nh-type-009); text-align: center; line-height: var(--nh-line-height-007); }
.system-event .icon { width: 11px; height: 11px; margin-right: var(--nh-space-011); }
.run-card { max-width: 620px; margin: var(--nh-space-030) 0 var(--nh-space-024) var(--nh-space-044); border: 1px solid var(--nh-detail-color-178); border-radius: var(--nh-radius-015); background: var(--nh-detail-color-179); color: var(--nh-detail-color-180); }
.run-card > summary { display: flex; align-items: center; gap: var(--nh-space-023); padding: var(--nh-space-014) var(--nh-space-001); list-style: none; cursor: pointer; font-size: var(--nh-type-001); }
.run-card > summary::-webkit-details-marker, .tool-step > summary::-webkit-details-marker { display: none; }
.run-card > summary > .icon { width: 15px; height: 15px; color: var(--nh-detail-color-181); }
.run-summary { display: flex; align-items: baseline; flex-wrap: wrap; flex: 1; gap: var(--nh-space-025) var(--nh-space-003); min-width: 0; }
.run-summary strong { font-size: var(--nh-type-001); color: var(--nh-detail-color-182); font-weight: var(--nh-font-weight-003); }
.run-summary span { font-size: var(--nh-type-009); color: var(--nh-detail-color-183); }
.run-card > summary time { color: var(--nh-detail-color-184); font-size: var(--nh-type-009); white-space: nowrap; }
.run-card > summary > .icon:last-child, .run-card .chevron { width: 12px; height: 12px; color: var(--nh-detail-color-184); transition: transform .2s; }
.run-card[open] > summary > .icon:last-child, .run-card[open] .chevron { transform: rotate(180deg); }
.run-card.wake { border-color: var(--nh-detail-color-185); background: var(--nh-detail-color-186); }
.run-card.wake > summary > .icon { color: var(--nh-detail-color-187); }
.run-card.failed { border-color: var(--nh-detail-color-188); background: var(--nh-detail-color-189); }
.run-card.failed .run-summary strong, .run-card.failed > summary > .icon { color: var(--nh-detail-color-190); }
.run-body { padding: 0 var(--nh-space-024) var(--nh-space-008) var(--nh-space-009); font-size: var(--nh-type-001); color: var(--nh-detail-color-191); }
.run-body > p { margin: 0 0 var(--nh-space-014); font-size: var(--nh-type-001); line-height: var(--nh-line-height-008); }
.tool-step { position: relative; margin-top: var(--nh-space-021); border-left: 1px solid var(--nh-detail-color-192); padding-left: var(--nh-space-001); }
.tool-step > summary { position: relative; padding: var(--nh-space-021) 0; list-style: none; cursor: pointer; color: var(--nh-detail-color-193); font-size: var(--nh-type-001); }
.tool-step > summary::before { position: absolute; content: ""; left: -16px; top: 12px; width: 6px; height: 6px; border: 1px solid var(--nh-detail-color-194); border-radius: var(--nh-radius-002); background: var(--nh-detail-color-195); }
.tool-step > summary .icon { width: 12px; height: 12px; margin-right: var(--nh-space-011); }
.tool-step > summary small { margin-left: var(--nh-space-021); font-size: var(--nh-type-009); color: var(--nh-detail-color-196); }
.step-detail { padding: var(--nh-space-011) 0 var(--nh-space-003); color: var(--nh-detail-color-197); }
.step-detail p { font-size: var(--nh-type-001); line-height: var(--nh-line-height-008); margin-bottom: var(--nh-space-021); }
.step-detail pre { padding: var(--nh-space-023) var(--nh-space-014); border-radius: var(--nh-radius-013); background: var(--nh-detail-color-198); color: var(--nh-detail-color-199); font-family: var(--nh-font-stack-009); font-size: var(--nh-type-001); line-height: var(--nh-line-height-001); white-space: pre-wrap; overflow-wrap: anywhere; }
.composer-shell { padding: var(--nh-space-013) var(--nh-space-016) var(--nh-space-004); border-top: 1px solid var(--nh-detail-color-200); background: var(--nh-chat-paper); }
#composer { display: flex; align-items: flex-end; gap: var(--nh-space-004); padding: var(--nh-space-012); border: 1px solid var(--nh-detail-color-201); border-radius: var(--nh-radius-001); background: var(--nh-detail-color-202); }
#composer:focus-within { border-color: var(--nh-detail-color-203); box-shadow: var(--nh-shadow-020); }
#composer textarea { display: block; min-width: 0; flex: 1; min-height: 38px; max-height: 120px; resize: vertical; padding: var(--nh-space-003) var(--nh-space-027); border: 0; outline: 0; background: transparent; color: var(--nh-detail-color-204); font-size: var(--nh-type-006); line-height: var(--nh-line-height-011); }
#composer textarea::placeholder { color: var(--nh-detail-color-205); }
.composer-add { display: flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border: 0; border-radius: var(--nh-radius-015); background: var(--nh-detail-color-206); color: var(--nh-detail-color-207); }
.composer-add:hover { background: var(--nh-detail-color-208); }
.composer-add .icon { width: 19px; height: 19px; }
.send-button { display: flex; min-width: 58px; min-height: 36px; flex: 0 0 auto; justify-content: center; align-items: center; gap: var(--nh-space-011); padding: var(--nh-space-003) var(--nh-space-001); border: 0; border-radius: var(--nh-radius-015); background: var(--brick); color: var(--nh-pure-white); font-size: var(--nh-type-008); }
.send-button:hover { background: var(--brick-dark); }
.send-button .icon { width: 15px; height: 15px; }
.composer-hint { margin-top: var(--nh-space-021); text-align: right; color: var(--nh-detail-color-209); font-size: var(--nh-type-019); line-height: var(--nh-line-height-003); }

/* Small paper windows for the things passed between rooms. */
dialog.modal { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 44px); margin: auto; padding: 0; border: 1px solid var(--nh-detail-color-210); border-radius: var(--nh-radius-009); background: var(--nh-detail-color-211); color: var(--ink); box-shadow: var(--nh-shadow-021); overflow: auto; overscroll-behavior: contain; }
dialog.modal::backdrop { background: var(--nh-detail-color-212); backdrop-filter: blur(5px); }
dialog.wide-modal, dialog.modal.wide-modal { width: min(760px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nh-space-024); padding: var(--nh-space-041) var(--nh-space-018) var(--nh-space-034); border-bottom: 1px solid var(--nh-detail-color-213); }
.modal-head .eyebrow { margin-bottom: var(--nh-space-011); font-size: var(--nh-type-009); color: var(--nh-detail-color-214); }
.modal-head h2 { margin: 0; font-size: var(--nh-type-020); font-weight: var(--nh-font-weight-003); }
.modal-head > .icon-button { margin-top: -5px; margin-right: -9px; }
.modal-body { padding: var(--nh-space-016) var(--nh-space-018) var(--nh-space-018); }
.modal-body > p { font-size: var(--nh-type-002); color: var(--nh-detail-color-215); }
.detail-cover { margin: 0 0 var(--nh-space-016); border: 7px solid var(--nh-detail-color-216); border-bottom-width: 11px; background: var(--nh-detail-color-217); box-shadow: var(--nh-shadow-008); transform: rotate(-.7deg); }
.detail-cover img { width: 100%; max-height: 370px; object-fit: cover; }
.detail-cover .record { margin: var(--nh-space-043) auto; width: 155px; height: 155px; }
.detail-cover .book-cover { margin: var(--nh-space-022) auto; min-height: 170px; width: 122px; font-size: var(--nh-type-010); }
.detail-prose { font-size: var(--nh-type-002); color: var(--nh-detail-color-218); line-height: var(--nh-line-height-012); }
.detail-prose h3 { margin: var(--nh-space-034) 0 var(--nh-space-004); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-021); color: var(--nh-detail-color-219); font-weight: var(--nh-font-weight-003); }
.detail-prose p { margin-bottom: var(--nh-space-024); }
.photo-caption { padding: var(--nh-space-004) var(--nh-space-004) 0; text-align: center; color: var(--nh-detail-color-220); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-006); }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--nh-space-023); margin-top: var(--nh-space-016); padding-top: var(--nh-space-034); border-top: 1px solid var(--nh-detail-color-221); }
.share-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nh-space-001); padding: var(--nh-space-003) 0; }
.share-target { display: flex; flex-direction: column; align-items: center; gap: var(--nh-space-004); padding: var(--nh-space-035) var(--nh-space-023); border: 1px solid var(--nh-detail-color-222); border-radius: var(--nh-radius-003); background: var(--nh-detail-color-223); font-size: var(--nh-type-006); }
.share-target:hover { background: var(--nh-detail-color-224); border-color: var(--nh-detail-color-225); }
.share-target .avatar { width: 54px; height: 54px; }
.share-target small { color: var(--nh-detail-color-226); font-size: var(--nh-type-009); }
.picker-list { display: flex; flex-direction: column; gap: var(--nh-space-023); }
.picker-item { display: flex; align-items: center; gap: var(--nh-space-030); padding: var(--nh-space-024); border: 1px solid var(--nh-detail-color-227); border-radius: var(--nh-radius-015); background: var(--nh-detail-color-228); text-align: left; }
.picker-item:hover { background: var(--nh-detail-color-229); border-color: var(--nh-detail-color-230); }
.picker-item > .icon { width: 24px; height: 24px; color: var(--nh-detail-color-231); }
.picker-item > div { flex: 1; }
.picker-item strong { display: block; font-size: var(--nh-type-002); font-weight: var(--nh-font-weight-003); }
.picker-item p, .picker-item small { display: block; margin: var(--nh-space-025) 0 0; color: var(--nh-detail-color-232); font-size: var(--nh-type-008); }
.info-callout { margin-top: var(--nh-space-013); padding: var(--nh-space-001) var(--nh-space-024); background: var(--nh-detail-color-233); border-left: 2px solid var(--nh-detail-color-234); color: var(--nh-detail-color-235); font-size: var(--nh-type-008); line-height: var(--nh-line-height-007); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 35px; max-width: calc(100vw - 36px); transform: translate(-50%, 16px); padding: var(--nh-space-014) var(--nh-space-031); border: 1px solid var(--nh-detail-color-236); border-radius: var(--nh-radius-016); background: var(--nh-detail-color-237); color: var(--nh-detail-color-238); box-shadow: var(--nh-shadow-022); font-size: var(--nh-type-006); text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* A real wooden board, kept within reach of small screens. */
.game-header { margin-bottom: var(--nh-space-041); }
.game-header .back-link { margin-bottom: var(--nh-space-002); }
.game-header h1 { margin-bottom: var(--nh-space-023); font-size: var(--nh-type-022); font-weight: var(--nh-font-weight-003); }
.game-header p { margin: 0; font-size: var(--nh-type-006); color: var(--nh-detail-color-239); }
.game-layout { display: grid; grid-template-columns: minmax(0, 610px) minmax(220px, 290px); justify-content: center; gap: var(--nh-space-045); align-items: start; }
.game-table { padding: var(--nh-space-022); border: 1px solid var(--nh-detail-color-240); border-radius: var(--nh-radius-003); background: repeating-linear-gradient(6deg, var(--nh-detail-color-241) 0px, var(--nh-detail-color-242) 1px, var(--nh-detail-color-242) 11px), linear-gradient(100deg, var(--nh-detail-color-243), var(--nh-detail-color-244) 48%, var(--nh-detail-color-245)); box-shadow: var(--nh-shadow-023); }
.game-topline { display: flex; justify-content: space-between; gap: var(--nh-space-001); padding: var(--nh-space-046) var(--nh-space-025) var(--nh-space-013); color: var(--nh-detail-color-246); font-size: var(--nh-type-006); }
.game-topline small { font-size: var(--nh-type-001); color: var(--nh-detail-color-247); }
.game-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--nh-detail-color-248); border-radius: var(--nh-radius-007); background: var(--nh-detail-color-249); }
.intersection { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent; }
.intersection::before, .intersection::after { content: ""; position: absolute; background: var(--nh-detail-color-250); pointer-events: none; }
.intersection::before { height: 1px; left: 0; right: 0; top: 50%; }
.intersection::after { width: 1px; top: 0; bottom: 0; left: 50%; }
.intersection:nth-child(-n + 9)::after { top: 50%; }
.intersection:nth-child(n + 73)::after { bottom: 50%; }
.intersection:nth-child(9n + 1)::before { left: 50%; }
.intersection:nth-child(9n)::before { right: 50%; }
.intersection:hover { background: var(--nh-detail-color-251); }
.intersection:focus-visible { outline-offset: -3px; z-index: 4; }
.intersection:disabled { opacity: 1; cursor: default; }
.stone { position: relative; z-index: 2; display: block; width: 78%; aspect-ratio: 1; border-radius: var(--nh-radius-002); box-shadow: var(--nh-shadow-024); }
.stone.black { background: radial-gradient(circle at 33% 23%, var(--nh-detail-color-252) 0, var(--nh-detail-color-253) 36%, var(--nh-detail-color-254) 77%); border: 1px solid var(--nh-detail-color-255); }
.stone.white { background: radial-gradient(circle at 32% 24%, var(--nh-detail-color-042) 0, var(--nh-detail-color-256) 45%, var(--nh-detail-color-257) 100%); border: 1px solid var(--nh-detail-color-258); }
.stone.last-move::after, .last-move > .stone::after { content: ""; position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; border-radius: var(--nh-radius-002); border: 1px solid var(--nh-detail-color-259); }
.game-aside { padding-top: var(--nh-space-001); }
.game-aside .little-note { margin-bottom: var(--nh-space-018); }
.game-aside > .btn { display: flex; width: 100%; margin-top: var(--nh-space-014); }
.game-aside .little-note ol, .game-aside .little-note ul { margin: var(--nh-space-001) 0 0; padding-left: var(--nh-space-002); font-size: var(--nh-type-006); }

/* Small companion details shared by the rooms and conversations. */
.home-intro > div:first-child > p:not(.eyebrow) { margin: 0; color: var(--nh-detail-color-037); font-size: var(--nh-type-002); letter-spacing: var(--nh-letter-spacing-005); }
.today-note { display: flex; align-items: center; gap: var(--nh-space-023); }
.today-note > .icon { width: 23px; height: 23px; color: var(--nh-detail-color-260); }
.door-caption h2 > span { margin-left: var(--nh-space-023); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-002); letter-spacing: var(--nh-letter-spacing-005); color: var(--nh-detail-color-261); }
.section-kicker .icon { width: 13px; height: 13px; margin-right: var(--nh-space-025); }
.little-note > .section-kicker { margin-bottom: var(--nh-space-001); letter-spacing: var(--nh-letter-spacing-010); }
.little-note > a { display: inline-flex; align-items: center; gap: var(--nh-space-021); font-size: var(--nh-type-001); color: var(--nh-detail-color-262); border-bottom: 1px solid var(--nh-detail-color-263); }
.little-note > a .icon { width: 12px; height: 12px; }
.track-info > span .icon { width: 11px; height: 11px; margin-right: var(--nh-space-025); }
.home-activity > .section-kicker { margin-bottom: var(--nh-space-001); }
.activity-line > .status-dot { position: relative; top: -1px; }
.status-dot.blue { background: var(--nh-detail-color-264); box-shadow: var(--nh-shadow-025); }
.hero-caption > .section-kicker { margin-bottom: var(--nh-space-001); font-size: var(--nh-type-009); color: var(--nh-detail-color-265); letter-spacing: var(--nh-letter-spacing-007); }
.widget-share.icon-button { width: 29px; height: 29px; min-height: 29px; padding: var(--nh-space-025); border-radius: var(--nh-radius-005); }
.book-cover { flex-direction: column; gap: var(--nh-space-023); }
.book-cover > small { font-family: var(--nh-font-stack-006); font-size: var(--nh-type-023); letter-spacing: var(--nh-letter-spacing-005); line-height: var(--nh-line-height-006); }
.book-cover > .icon { width: 21px; height: 21px; opacity: .8; }
.book-cover > span { font-size: var(--nh-type-016); }
.widget.dragging { opacity: .35; box-shadow: none; }
.text-button { display: inline; margin-left: var(--nh-space-003); padding: var(--nh-space-027) 0; border: 0; background: transparent; color: var(--nh-detail-color-266); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mini-board { gap: var(--nh-space-024); color: var(--nh-detail-color-267) !important; font-size: var(--nh-type-007); background-image: linear-gradient(var(--nh-detail-color-268) 1px, transparent 1px), linear-gradient(90deg, var(--nh-detail-color-268) 1px, transparent 1px); background-size: 25px 25px; background-position: center; }
.mini-board > span { text-shadow: var(--nh-shadow-026); }
.mini-board > span:nth-child(2) { color: var(--nh-detail-color-269); }
.common-hero { margin-top: var(--nh-space-035); }
.common-heading .btn.primary { color: var(--nh-detail-color-270); }
.avatar-letter { display: inline-flex; align-items: center; justify-content: center; color: var(--nh-detail-color-271); background: var(--nh-detail-color-272); font-family: var(--nh-font-stack-006); font-size: var(--nh-type-024); font-weight: var(--nh-font-weight-001); }
.avatar-letter > .icon { width: 20px; height: 20px; }
.avatar-letter.message-avatar { font-size: var(--nh-type-008); }
.avatar-letter.message-avatar > .icon { width: 16px; height: 16px; }
.sidebar-heading > .eyebrow { margin-bottom: var(--nh-space-023); font-size: var(--nh-type-019); letter-spacing: var(--nh-letter-spacing-003); color: var(--nh-detail-color-273); }
.sidebar-heading h2 { font-size: var(--nh-type-010); font-weight: var(--nh-font-weight-003); margin: 0 0 var(--nh-space-003); }
.sidebar-heading p { color: var(--nh-detail-color-274); font-size: var(--nh-type-001); font-family: var(--nh-font-stack-005); line-height: var(--nh-line-height-001); }
.sidebar-note { margin: var(--nh-space-036) var(--nh-space-013) var(--nh-space-024); padding: var(--nh-space-002) var(--nh-space-001); border-top: 1px dashed var(--nh-detail-color-275); color: var(--nh-detail-color-276); font-family: var(--nh-font-stack-003); font-size: var(--nh-type-002); line-height: var(--nh-line-height-007); }
.sidebar-note > .icon { width: 19px; height: 19px; margin-bottom: var(--nh-space-014); color: var(--nh-detail-color-277); }
.sidebar-note p { margin-bottom: var(--nh-space-004); }
.sidebar-note small { font-family: var(--nh-font-stack-005); font-size: var(--nh-type-009); }
.system-event time { margin-left: var(--nh-space-023); }
.demo-caption > .icon { width: 11px; height: 11px; margin-right: var(--nh-space-025); }
.tool-step.failed > summary { color: var(--nh-detail-color-278); }
.tool-step > summary > .icon:last-child { width: 10px; height: 10px; margin-left: var(--nh-space-021); }
.composer-hint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--nh-space-026) var(--nh-space-004); }
.share-target > span { width: 100%; }
.share-target strong { display: block; font-size: var(--nh-type-006); font-weight: var(--nh-font-weight-003); }
.share-target small { display: block; margin-top: var(--nh-space-011); line-height: var(--nh-line-height-009); }
.share-target > .icon { width: 15px; height: 15px; color: var(--nh-detail-color-279); }
.picker-item > span { flex: 1; }
.info-callout { display: flex; align-items: flex-start; gap: var(--nh-space-023); }
.info-callout > .icon { width: 17px; height: 17px; margin-top: var(--nh-space-027); }
.info-callout strong { font-size: var(--nh-type-006); font-weight: var(--nh-font-weight-003); }
.info-callout p { margin: var(--nh-space-025) 0 0; }
.game-header { margin-top: var(--nh-space-007); }
.game-aside > .back-link { margin-top: var(--nh-space-002); font-size: var(--nh-type-001); }

@media (min-width: 1500px) {
  .page { padding-top: var(--nh-space-036); }
  .door { height: 565px; }
  .home-shelf { gap: var(--nh-space-032); }
}

@media (max-width: 1120px) {
  .header-inner { padding-right: var(--nh-space-020); padding-left: var(--nh-space-020); gap: var(--nh-space-013); }
  .top-nav { gap: var(--nh-space-046); }
  .nav-link { padding: var(--nh-space-003) var(--nh-space-014); font-size: var(--nh-type-006); }
  .brand { min-width: 184px; }
  .brand > span { font-size: var(--nh-type-025); }
  .page { padding: var(--nh-space-019) var(--nh-space-020) var(--nh-space-047); }
  .home-scene { grid-template-columns: minmax(0,1fr) 250px; gap: var(--nh-space-031); }
  .two-doors { gap: var(--nh-space-002); padding-left: var(--nh-space-026); padding-right: var(--nh-space-026); }
  .door { height: 490px; border-width: 7px; border-bottom-width: 10px; }
  .door-caption { left: 18px; right: 16px; bottom: 18px; }
  .door-caption h2 { font-size: var(--nh-type-026); }
  .door-caption p { font-size: var(--nh-type-008); }
  .home-shelf { gap: var(--nh-space-022); padding-top: var(--nh-space-001); }
  .little-note { padding: var(--nh-space-002) var(--nh-space-034); }
  .mini-vinyl { padding: var(--nh-space-001); gap: var(--nh-space-004); }
  .home-bottom { grid-template-columns: 1fr 270px; gap: var(--nh-space-020); }
  .room-scene { grid-template-columns: 29% minmax(0,1fr); gap: var(--nh-space-020); }
  .hero-panel { height: 550px; border-width: 6px; }
  .hero-caption { left: 17px; right: 17px; }
  .hero-caption h2 { font-size: var(--nh-type-020); }
  .widget-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--nh-space-007) var(--nh-space-031); }
  .common-content .widget-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .chat-layout { grid-template-columns: 200px minmax(0,1fr); }
  .chat-sidebar { padding: var(--nh-space-042) var(--nh-space-004); }
  .contact { gap: var(--nh-space-023); padding: var(--nh-space-001) var(--nh-space-023); }
  .messages { padding: var(--nh-space-022); }
  .site-footer { margin-left: var(--nh-space-020); margin-right: var(--nh-space-020); }
}

@media (max-width: 900px) and (min-width: 761px) {
  .brand small { font-size: var(--nh-type-019); }
  .header-inner { gap: var(--nh-space-003); }
  .nav-link { padding: var(--nh-space-003) var(--nh-space-023); }
  .nav-link .icon { display: none; }
  .demo-pill { font-size: var(--nh-type-009); padding: var(--nh-space-011) var(--nh-space-003); }
  .home-scene { grid-template-columns: minmax(0,1fr) 216px; }
  .door { height: 458px; }
  .door-caption small { font-size: var(--nh-type-001); }
  .door-caption h2 { font-size: var(--nh-type-027); }
  .door-caption p { font-size: var(--nh-type-001); }
  .enter-link { padding: var(--nh-space-003) var(--nh-space-001); gap: var(--nh-space-004); font-size: var(--nh-type-001); }
  .common-polaroid h2 { font-size: var(--nh-type-012); }
  .common-polaroid p { font-size: var(--nh-type-001); }
  .little-note { font-size: var(--nh-type-008); }
  .mini-vinyl .record { width: 45px; height: 45px; flex-basis: 45px; }
  .track-info strong { font-size: var(--nh-type-006); }
  .today-note { right: 2px; max-width: 205px; padding: var(--nh-space-008) var(--nh-space-034); font-size: var(--nh-type-008); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 20px; }
  body { padding-bottom: calc(67px + env(safe-area-inset-bottom)); }
  .header-inner { min-height: 78px; padding: var(--nh-space-024) var(--nh-space-022); gap: var(--nh-space-001); }
  .brand { min-width: 0; grid-template-columns: 31px auto; gap: 0 var(--nh-space-003); }
  .brand > svg { width: 29px; height: 29px; }
  .brand > span { font-size: var(--nh-type-025); }
  .brand small { font-size: var(--nh-type-019); padding-top: var(--nh-space-025); }
  .top-nav { display: none; }
  .demo-pill { min-height: 29px; padding: var(--nh-space-025) var(--nh-space-023); font-size: var(--nh-type-009); }
  .page { padding: var(--nh-space-032) var(--nh-space-022) var(--nh-space-029); min-height: calc(100dvh - 260px); }
  .site-footer { display: block; text-align: center; margin: 0 var(--nh-space-022); padding: var(--nh-space-034) 0 var(--nh-space-007); font-size: var(--nh-type-009); }
  .site-footer > * + * { margin-top: var(--nh-space-021); }
  .mobile-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; gap: var(--nh-space-025); padding: 8px 13px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nh-detail-color-280); background: var(--nh-detail-color-281); box-shadow: var(--nh-shadow-027); backdrop-filter: blur(15px); }
  .mobile-nav a { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: var(--nh-space-025); min-height: 43px; padding: var(--nh-space-027) var(--nh-space-011); border-radius: var(--nh-radius-003); color: var(--nh-detail-color-282); font-size: var(--nh-type-009); line-height: var(--nh-line-height-006); }
  .mobile-nav a .icon { width: 20px; height: 20px; }
  .mobile-nav a.active { color: var(--brick); background: var(--nh-detail-color-283); }
  .home-intro { padding: 0 var(--nh-space-046) var(--nh-space-007); }
  .home-intro .eyebrow { margin-bottom: var(--nh-space-023); font-size: var(--nh-type-009); }
  .home-intro h1 { font-size: var(--nh-type-014); letter-spacing: var(--nh-letter-spacing-013); margin-bottom: var(--nh-space-023); }
  .home-intro > p { font-size: var(--nh-type-008); }
  .home-intro > div:first-child > p:not(.eyebrow) { font-size: var(--nh-type-008); }
  .today-note { position: relative; top: auto; right: auto; display: inline-block; max-width: 100%; margin-top: var(--nh-space-035); padding: var(--nh-space-023) var(--nh-space-008); font-size: var(--nh-type-001); transform: rotate(-1.5deg); }
  .today-note::before { left: auto; right: 17px; width: 39px; height: 12px; top: -6px; }
  .today-note small { display: inline; font-size: var(--nh-type-019); margin-right: var(--nh-space-004); }
  .home-scene { grid-template-columns: 1fr; gap: var(--nh-space-018); padding-top: 0; }
  .two-doors { gap: var(--nh-space-035); padding: var(--nh-space-012) var(--nh-space-027) var(--nh-space-023); }
  .door { height: 420px; border-width: 7px; border-bottom-width: 10px; border-radius: var(--nh-radius-018) var(--nh-radius-018) var(--nh-radius-015) var(--nh-radius-015); }
  .door.noel { transform: rotate(-1.5deg); }
  .door.eli { transform: translateY(7px) rotate(1.3deg); }
  .door-image { object-position: 50% 36%; }
  .door-top { top: 22px; padding: var(--nh-space-025) var(--nh-space-023); font-size: var(--nh-type-009); gap: var(--nh-space-011); }
  .door-caption { left: 17px; right: 13px; bottom: 18px; }
  .door-caption small { font-size: var(--nh-type-001); }
  .door-caption h2 { font-size: var(--nh-type-026); }
  .door-caption p { font-size: var(--nh-type-008); margin-bottom: var(--nh-space-030); line-height: var(--nh-line-height-001); }
  .enter-link { gap: var(--nh-space-030); padding: var(--nh-space-012) var(--nh-space-001); font-size: var(--nh-type-001); min-height: 34px; }
  .enter-link .icon { width: 14px; height: 14px; }
  .home-shelf { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nh-space-007) var(--nh-space-002); padding: 0 var(--nh-space-026); }
  .common-polaroid { display: flex; align-items: stretch; grid-column: 1 / -1; padding: var(--nh-space-003); transform: rotate(-.7deg); gap: var(--nh-space-008); }
  .common-polaroid > img { width: 48%; aspect-ratio: 1.7; object-fit: cover; }
  .common-polaroid > div { flex: 1; padding: var(--nh-space-030) var(--nh-space-012) var(--nh-space-014) 0; align-self: center; }
  .common-polaroid h2 { font-size: var(--nh-type-025); margin: var(--nh-space-011) 0; }
  .common-polaroid small { font-size: var(--nh-type-019); }
  .common-polaroid p { font-size: var(--nh-type-001); }
  .common-polaroid > div > .icon { right: 6px; bottom: 12px; width: 20px; height: 20px; }
  .home-shelf .little-note { padding: var(--nh-space-034) var(--nh-space-005); font-size: var(--nh-type-008); }
  .home-shelf .mini-vinyl { flex-direction: column; justify-content: center; gap: var(--nh-space-003); min-height: 150px; padding: var(--nh-space-002) var(--nh-space-008); transform: rotate(1.5deg); }
  .home-shelf .track-info { align-items: center; text-align: center; flex: 0; }
  .home-shelf .mini-vinyl > .icon { position: absolute; right: 11px; bottom: 11px; width: 16px; height: 16px; }
  .home-shelf .mini-vinyl .record { width: 58px; height: 58px; flex-basis: 58px; }
  .home-bottom { grid-template-columns: 1fr; gap: var(--nh-space-042); padding: var(--nh-space-019) var(--nh-space-026) 0; }
  .home-activity { padding-left: var(--nh-space-024); }
  .home-activity h3 { font-size: var(--nh-type-021); }
  .activity-line { font-size: var(--nh-type-008); gap: var(--nh-space-004); }
  .activity-line time, .activity-line > small { font-size: var(--nh-type-009); }
  .handwritten { padding-top: var(--nh-space-004); font-size: var(--nh-type-012); }
  .handwritten small { font-size: var(--nh-type-008); }
  .room-heading { display: grid; grid-template-columns: 1fr auto; gap: var(--nh-space-001); margin-bottom: var(--nh-space-007); }
  .room-heading > .back-link { grid-column: 1 / -1; font-size: var(--nh-type-008); }
  .room-title h1 { font-size: var(--nh-type-025); }
  .room-title p { font-size: var(--nh-type-001); }
  .room-actions { gap: var(--nh-space-021); }
  .room-actions .btn { min-height: 35px; padding: var(--nh-space-012) var(--nh-space-004); font-size: var(--nh-type-001); }
  .room-actions .btn .icon { width: 14px; height: 14px; }
  .room-scene { grid-template-columns: 1fr; gap: var(--nh-space-017); }
  .hero-panel { position: relative; top: auto; height: 420px; width: 100%; border: 8px solid var(--nh-detail-color-042); border-radius: var(--nh-radius-008) var(--nh-radius-008) var(--nh-radius-015) var(--nh-radius-015); transform: rotate(-.8deg); }
  .hero-panel > img { object-position: 50% 31%; }
  .hero-panel::after { background: linear-gradient(transparent 35%, var(--nh-detail-color-089) 100%); }
  .hero-caption { left: 25px; right: 25px; bottom: 23px; }
  .hero-caption h2 { font-size: var(--nh-type-028); }
  .hero-caption p { font-size: var(--nh-type-006); max-width: 300px; margin-bottom: var(--nh-space-013); }
  .hero-caption .btn { min-height: 36px; padding: var(--nh-space-003) var(--nh-space-030); }
  .room-desk { padding: 0 0 var(--nh-space-001); }
  .desk-label { padding-bottom: var(--nh-space-022); font-size: var(--nh-type-001); }
  .desk-label h2 { font-size: var(--nh-type-015); }
  .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nh-space-016) var(--nh-space-005); padding: var(--nh-space-011) var(--nh-space-026) var(--nh-space-030); }
  .widget { min-height: 185px; }
  .widget.size-wide { grid-column: span 2; }
  .widget.size-tall { min-height: 230px; }
  .widget-open { padding: var(--nh-space-034) var(--nh-space-024) var(--nh-space-039); }
  .widget-title { font-size: var(--nh-type-011); }
  .widget-summary { font-size: var(--nh-type-008); }
  .widget-art { margin: -10px -7px var(--nh-space-008); }
  .widget-art > img { height: 152px; }
  .widget.size-wide .widget-art > img { height: 230px; }
  .widget.look-note .widget-title { font-size: var(--nh-type-012); }
  .widget.look-note .widget-summary { font-size: var(--nh-type-016); }
  .common-hero { min-height: 340px; border-width: 7px; }
  .common-hero > img { object-position: 34% center; }
  .common-hero::after { background: linear-gradient(90deg, var(--nh-detail-color-284) 0, var(--nh-detail-color-133) 55%, var(--nh-detail-color-285) 100%); }
  .common-heading { padding: var(--nh-space-028) var(--nh-space-042); max-width: 360px; }
  .common-heading h1 { font-size: var(--nh-type-029); }
  .common-heading p { font-size: var(--nh-type-008); }
  .common-content { margin-top: var(--nh-space-010); }
  .common-content .widget-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .common-content > h2 { font-size: var(--nh-type-012); }
  .chat-layout { grid-template-columns: 1fr; border-radius: var(--nh-radius-001); min-height: 670px; overflow: hidden; }
  .chat-sidebar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--nh-space-021); padding: var(--nh-space-001) var(--nh-space-014); border-right: 0; border-bottom: 1px solid var(--nh-detail-color-201); }
  .sidebar-heading { display: none; }
  .sidebar-note { display: none; }
  .contact { display: flex; flex-direction: column; justify-content: center; gap: var(--nh-space-011); margin: 0; padding: var(--nh-space-004) var(--nh-space-025) var(--nh-space-003); border-radius: var(--nh-radius-003); text-align: center; }
  .contact .avatar { width: 33px; height: 33px; flex-basis: 33px; }
  .contact-copy { flex: 0; max-width: 100%; }
  .contact-copy strong { font-size: var(--nh-type-008); }
  .contact-copy small, .contact-copy p { font-size: var(--nh-type-019); max-width: 90px; }
  .contact > .icon { display: none; }
  .chat-heading { min-height: 74px; padding: var(--nh-space-008) var(--nh-space-024); gap: var(--nh-space-023); }
  .chat-heading .avatar { width: 35px; height: 35px; flex-basis: 35px; }
  .chat-heading h1 { font-size: var(--nh-type-015); }
  .chat-heading p { font-size: var(--nh-type-009); }
  .chat-room-link { font-size: var(--nh-type-009); gap: var(--nh-space-025); }
  .chat-room-link .icon { width: 14px; height: 14px; }
  .demo-caption { font-size: var(--nh-type-019); padding: var(--nh-space-012) var(--nh-space-014); }
  .messages { height: 57dvh; min-height: 340px; max-height: 620px; padding: var(--nh-space-008) var(--nh-space-001) var(--nh-space-022); }
  .message-row { gap: var(--nh-space-012); margin: var(--nh-space-005) 0; }
  .message-avatar { width: 27px; height: 27px; flex-basis: 27px; }
  .message-content { max-width: calc(100% - 37px); }
  .message-byline { font-size: var(--nh-type-019); }
  .bubble { padding: var(--nh-space-004) var(--nh-space-001); font-size: var(--nh-type-006); }
  .chat-card { width: 258px; padding: var(--nh-space-024); }
  .chat-card h3 { font-size: var(--nh-type-017); }
  .chat-card > p { font-size: var(--nh-type-001); }
  .run-card { margin-left: var(--nh-space-048); }
  .run-card > summary { padding: var(--nh-space-023) var(--nh-space-004); gap: var(--nh-space-021); }
  .run-summary { display: block; }
  .run-summary strong { display: block; font-size: var(--nh-type-008); }
  .run-summary span { display: block; font-size: var(--nh-type-001); margin-top: var(--nh-space-027); }
  .run-card > summary time { font-size: var(--nh-type-009); }
  .run-body { padding: 0 var(--nh-space-014) var(--nh-space-001) var(--nh-space-022); }
  .run-body > p { font-size: var(--nh-type-009); }
  .tool-step > summary { font-size: var(--nh-type-009); }
  .composer-shell { padding: var(--nh-space-001) var(--nh-space-014) var(--nh-space-023); }
  #composer { gap: var(--nh-space-012); padding: var(--nh-space-021); }
  #composer textarea { font-size: var(--nh-type-024); min-height: 36px; padding-top: var(--nh-space-021); line-height: var(--nh-line-height-013); }
  .composer-add { width: 33px; height: 35px; flex-basis: 33px; }
  .send-button { min-width: 46px; min-height: 35px; padding: var(--nh-space-012) var(--nh-space-023); font-size: var(--nh-type-001); }
  .composer-hint { font-size: var(--nh-type-019); }
  .modal-head { padding: var(--nh-space-016) var(--nh-space-022) var(--nh-space-005); }
  .modal-head h2 { font-size: var(--nh-type-010); }
  .modal-body { padding: var(--nh-space-035) var(--nh-space-022) var(--nh-space-016); }
  .share-targets { gap: var(--nh-space-003); }
  .share-target { padding: var(--nh-space-005) var(--nh-space-011); font-size: var(--nh-type-008); }
  .share-target .avatar { width: 44px; height: 44px; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom)); font-size: var(--nh-type-008); }
  .game-header { margin-bottom: var(--nh-space-007); }
  .game-header h1 { font-size: var(--nh-type-004); }
  .game-layout { grid-template-columns: minmax(0,1fr); gap: var(--nh-space-018); }
  .game-table { padding: var(--nh-space-013); max-width: 570px; width: 100%; margin: 0 auto; }
  .game-topline { font-size: var(--nh-type-008); padding-bottom: var(--nh-space-030); }
  .game-topline small { font-size: var(--nh-type-009); }
  .game-aside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nh-space-014); padding-top: 0; }
  .game-aside .little-note { grid-column: 1 / -1; margin: 0 var(--nh-space-026) var(--nh-space-030); }
  .game-aside > .btn { margin: 0; }
}

@media (max-width: 530px) {
  .door { height: 360px; border-radius: var(--nh-radius-019) var(--nh-radius-019) var(--nh-radius-011) var(--nh-radius-011); }
  .two-doors { gap: var(--nh-space-024); }
  .door-caption { left: 13px; right: 10px; bottom: 14px; }
  .door-caption h2 { font-size: var(--nh-type-004); }
  .door-caption p { font-size: var(--nh-type-001); }
  .door-caption small { font-size: var(--nh-type-009); }
  .door-top { font-size: var(--nh-type-019); top: 19px; padding: var(--nh-space-026) var(--nh-space-003); }
  .enter-link { gap: var(--nh-space-023); min-height: 32px; font-size: var(--nh-type-009); padding: var(--nh-space-021) var(--nh-space-004); }
  .hero-panel { height: 400px; }
  .common-polaroid > img { width: 45%; aspect-ratio: 1.3; }
}

@media (max-width: 440px) {
  .header-inner { padding: var(--nh-space-008) var(--nh-space-005); min-height: 73px; }
  .brand > span { font-size: var(--nh-type-010); }
  .brand small { font-size: var(--nh-type-030); }
  .brand > svg { width: 27px; height: 27px; }
  .brand { grid-template-columns: 28px auto; }
  .demo-pill { font-size: var(--nh-type-019); padding: var(--nh-space-025) var(--nh-space-012); }
  .demo-pill .icon { width: 11px; height: 11px; }
  .page { padding: var(--nh-space-020) var(--nh-space-005) var(--nh-space-033); }
  .home-intro h1 { font-size: var(--nh-type-031); letter-spacing: var(--nh-letter-spacing-012); }
  .home-intro > p { font-size: var(--nh-type-001); }
  .home-intro > div:first-child > p:not(.eyebrow) { font-size: var(--nh-type-001); }
  .door-caption h2 > span { font-size: var(--nh-type-001); margin-left: var(--nh-space-021); }
  .today-note { font-size: var(--nh-type-009); margin-top: var(--nh-space-002); padding: var(--nh-space-003) var(--nh-space-001); }
  .door { height: 315px; border-width: 5px; border-bottom-width: 8px; border-radius: var(--nh-radius-020) var(--nh-radius-020) var(--nh-radius-011) var(--nh-radius-011); }
  .two-doors { gap: var(--nh-space-001); }
  .door-caption { bottom: 13px; left: 11px; right: 8px; }
  .door-caption h2 { font-size: var(--nh-type-025); margin-bottom: var(--nh-space-025); }
  .door-caption small { font-size: var(--nh-type-019); margin-bottom: var(--nh-space-025); letter-spacing: var(--nh-letter-spacing-014); }
  .door-caption p { font-size: var(--nh-type-009); line-height: var(--nh-line-height-009); margin-bottom: var(--nh-space-004); }
  .door-top { font-size: var(--nh-type-030); gap: var(--nh-space-025); top: 17px; padding: var(--nh-space-026) var(--nh-space-021); }
  .door-top .status-dot { width: 5px; height: 5px; flex-basis: 5px; box-shadow: none; }
  .door-top .icon { width: 10px; height: 10px; }
  .enter-link { min-height: 30px; padding: var(--nh-space-021) var(--nh-space-023); gap: var(--nh-space-012); font-size: var(--nh-type-019); }
  .enter-link .icon { width: 12px; height: 12px; }
  .home-shelf { gap: var(--nh-space-022) var(--nh-space-008); }
  .common-polaroid { gap: var(--nh-space-030); }
  .common-polaroid h2 { font-size: var(--nh-type-013); }
  .common-polaroid small { font-size: var(--nh-type-030); }
  .common-polaroid p { font-size: var(--nh-type-009); max-width: 125px; }
  .common-polaroid > div > .icon { width: 17px; height: 17px; bottom: 9px; right: 1px; }
  .home-shelf .little-note { padding: var(--nh-space-005) var(--nh-space-008); font-size: var(--nh-type-001); }
  .little-note h3 { font-size: var(--nh-type-017); }
  .home-shelf .mini-vinyl { padding: var(--nh-space-024) var(--nh-space-004); }
  .track-info strong { font-size: var(--nh-type-002); }
  .track-info small, .track-info span, .track-info p { font-size: var(--nh-type-019); }
  .room-title h1 { font-size: var(--nh-type-010); }
  .room-title p { font-size: var(--nh-type-009); }
  .room-actions .btn { padding: var(--nh-space-012) var(--nh-space-003); font-size: var(--nh-type-009); }
  .room-actions .btn .icon { width: 13px; height: 13px; }
  .hero-panel { height: 385px; border-width: 6px; border-radius: var(--nh-radius-021) var(--nh-radius-021) var(--nh-radius-011) var(--nh-radius-011); }
  .hero-caption { left: 20px; right: 20px; }
  .hero-caption h2 { font-size: var(--nh-type-027); }
  .hero-caption p { font-size: var(--nh-type-008); }
  .widget-grid { gap: var(--nh-space-016) var(--nh-space-008); padding-right: var(--nh-space-027); padding-left: var(--nh-space-027); }
  .widget-open { padding: var(--nh-space-005) var(--nh-space-030) var(--nh-space-049); }
  .widget-label { font-size: var(--nh-type-019); }
  .widget-title { font-size: var(--nh-type-017); }
  .widget-summary { font-size: var(--nh-type-001); }
  .widget-meta { font-size: var(--nh-type-019); }
  .widget.look-note .widget-title { font-size: var(--nh-type-021); }
  .widget.look-note .widget-summary { font-size: var(--nh-type-003); }
  .widget-art { margin: -9px -6px var(--nh-space-030); }
  .widget-art > img { height: 126px; }
  .widget.size-wide .widget-art > img { height: 196px; }
  .widget.look-vinyl .record { width: 96px; height: 96px; flex-basis: 96px; }
  .widget.look-vinyl .widget-title { font-size: var(--nh-type-024); }
  .common-heading { padding: var(--nh-space-006) var(--nh-space-022); }
  .common-heading h1 { font-size: var(--nh-type-022); }
  .common-hero { min-height: 320px; }
  .chat-layout { margin: 0 -6px; }
  .messages { padding-right: var(--nh-space-023); padding-left: var(--nh-space-023); }
  .chat-card { width: 238px; }
  .chat-heading { padding: var(--nh-space-030) var(--nh-space-001); }
  .chat-heading h1 { font-size: var(--nh-type-011); }
  .chat-heading p { font-size: var(--nh-type-019); }
  .chat-room-link { font-size: var(--nh-type-019); }
  .run-card > summary { gap: var(--nh-space-011); padding: var(--nh-space-023) var(--nh-space-003); }
  .run-card > summary > .icon { width: 13px; height: 13px; }
  .run-card > summary time { font-size: var(--nh-type-009); }
  .run-summary strong { font-size: var(--nh-type-008); }
  .run-summary span { font-size: var(--nh-type-001); }
  .game-table { padding: var(--nh-space-001); }
  .game-topline { font-size: var(--nh-type-001); padding: 0 var(--nh-space-046) var(--nh-space-014); }
  .game-aside { gap: var(--nh-space-023); }
  .game-aside > .btn { font-size: var(--nh-type-008); padding: var(--nh-space-023) var(--nh-space-004); }
  .modal-head { padding: var(--nh-space-022) var(--nh-space-034) var(--nh-space-013); }
  .modal-body { padding: var(--nh-space-002) var(--nh-space-034) var(--nh-space-022); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

/* Keep the page itself quiet when route navigation moves keyboard focus. */
.page:focus { outline: none; }
.door-image { object-position: 50% 14%; }
.widget-summary { color: var(--nh-detail-color-286); }
.widget-meta { color: var(--nh-detail-color-287); }
.run-summary span, .run-card > summary time { color: var(--nh-detail-color-288); }
.run-body, .run-body > p, .step-detail, .step-detail p, .step-detail pre { color: var(--nh-detail-color-289); }
.hero-caption > .section-kicker { color: var(--nh-detail-color-290); }
.composer-hint { display: flex; justify-content: space-between; gap: var(--nh-space-001); color: var(--nh-detail-color-291); font-size: var(--nh-type-001); }
.book-cover { width: 108px; }
.book-cover > span { font-size: var(--nh-type-003); white-space: nowrap; }
.run-summary strong { font-size: var(--nh-type-006); }
.run-summary span { font-size: var(--nh-type-008); }

@media (min-width: 761px) {
  .chat-layout { height: calc(100dvh - 215px); min-height: 610px; }
  .chat-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
  .messages { height: auto; min-height: 0; max-height: none; }
}

@media (max-width: 760px) {
  .demo-pill { font-size: var(--nh-type-001); min-height: 36px; }
  .demo-pill > span { display: none; }
  .door-top { font-size: var(--nh-type-001); }
  .door-image { object-position: 50% 20%; }
  .door-caption p { font-size: var(--nh-type-008); }
  .enter-link { min-height: 40px; font-size: var(--nh-type-008); }
  .chat-page { padding-top: var(--nh-space-001); padding-bottom: var(--nh-space-035); }
  .chat-layout { height: calc(100dvh - 163px); min-height: 550px; grid-template-rows: auto minmax(0, 1fr); }
  .chat-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
  .messages { height: auto; min-height: 0; max-height: none; }
  .contact { padding-top: var(--nh-space-012); padding-bottom: var(--nh-space-021); }
  .contact-copy small { display: none; }
  .bubble { font-size: var(--nh-type-003); }
  .message-byline { font-size: var(--nh-type-001); }
  .chat-card > p { font-size: var(--nh-type-006); }
  .chat-card .card-kind, .card-footer { font-size: var(--nh-type-008); }
  .run-summary strong { font-size: var(--nh-type-008); }
  .run-summary span, .run-card > summary time { font-size: var(--nh-type-001); }
  .run-body > p, .tool-step > summary, .step-detail p, .step-detail pre { font-size: var(--nh-type-008); }
  .composer-hint { text-align: left; font-size: var(--nh-type-001); }
  .composer-hint > span:last-child { display: none; }
  .composer-add, .send-button { min-height: 40px; }
  .chat-heading p, .demo-caption { font-size: var(--nh-type-001); }
  .chat-heading .muted { display: none; }
  .widget-share.icon-button { width: 38px; height: 38px; }
  .room-actions .btn { min-height: 40px; font-size: var(--nh-type-008); }
  .widget-meta, .widget-label { font-size: var(--nh-type-001); }
  .widget-summary { font-size: var(--nh-type-006); }
  .home-intro .today-note { margin-top: var(--nh-space-008); padding: var(--nh-space-021) var(--nh-space-001); }
  .today-note span br { display: none; }
  .today-note small { margin-left: var(--nh-space-003); }
}

@media (max-width: 530px) {
  .room-heading { grid-template-columns: 1fr; gap: var(--nh-space-024); }
  .room-title > p:not(.eyebrow) { font-size: var(--nh-type-006); }
  .room-actions { justify-content: flex-start; }
}