/* Shared sketchbook design. Existing page structure and app behavior stay intact. */
:root {
  --family-paper: #eeeae1;
  --family-ink: #242721;
  --family-muted: #565b51;
  --family-rule: #bcbfb2;
  --family-panel: #faf8f1;
  --family-wash: #e2e5d9;
  --family-accent: #3e5736;
  --family-on-accent: #fff;
  --family-good: #27653d;
  --family-bad: #a62e35;
  --family-cover: #e2c4a3;
}
:root[data-family-theme="dark"] {
  --family-paper: #202620;
  --family-ink: #eeeae1;
  --family-muted: #bcc5b6;
  --family-rule: #606b59;
  --family-panel: #2b342b;
  --family-wash: #343f32;
  --family-accent: #c1d2af;
  --family-on-accent: #202620;
  --family-good: #8ed8a4;
  --family-bad: #ffadb0;
  color-scheme: dark;
}
:root[data-family-theme="light"] {
  color-scheme: light;
}
html.family,
html.family body,
html.family body[class] {
  --bg: var(--family-paper);
  --bg-dark: var(--family-paper);
  --bg-light: var(--family-paper);
  --bg-2: var(--family-wash);
  --panel: var(--family-panel);
  --panel-2: var(--family-wash);
  --line: var(--family-rule);
  --line-strong: var(--family-rule);
  --text: var(--family-ink);
  --text-dark: var(--family-ink);
  --text-light: var(--family-ink);
  --text-soft: var(--family-muted);
  --text-faint: var(--family-muted);
  --muted: var(--family-muted);
  --accent: var(--family-accent);
  --accent-2: var(--family-accent);
  --accent-soft: var(--family-wash);
  --acrylic-bg: var(--family-panel);
  --acrylic-bg-strong: var(--family-panel);
  --acrylic-border: var(--family-rule);
  --acrylic-border-strong: var(--family-rule);
  --surface-1: var(--family-panel);
  --surface-2: var(--family-wash);
  --hover-1: var(--family-wash);
  --hover-2: var(--family-wash);
  --chip: var(--family-wash);
  --card-bg: var(--family-panel);
  --card-bg-hover: var(--family-wash);
  --card-text: var(--family-ink);
  --good: var(--family-good);
  --bad: var(--family-bad);
  --shadow-card: 0 12px 30px #101b1010;
  --radius: 6px;
  --acrylic-blur: none;
  color: var(--family-ink);
  background: var(--family-paper);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html.family body {
  background-image: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.family .wallpaper,
.family #bg-streaks,
.family #bg-lines,
.family .streak-toggle {
  display: none !important;
}
.family :is(.topbar, header.app, footer.site-footer, body > nav) {
  background: var(--family-paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--family-rule);
  box-shadow: none;
}
.family .topbar {
  height: auto;
  min-height: 76px;
  padding: 14px clamp(20px, 5vw, 76px);
  gap: 16px;
  flex-wrap: wrap;
}
.family .topbar .brand {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.family .topbar-links a {
  font-size: 13px;
}
.family
  :is(
    .btn-primary,
    .ge-lock-submit,
    .gate-card button.primary,
    .iconbtn.primary,
    .pill.active
  ) {
  background: var(--family-accent) !important;
  color: var(--family-on-accent) !important;
  border-color: var(--family-accent);
  border-radius: 5px;
  box-shadow: none;
}
.family
  :is(.btn-secondary, .nav-bubble, .bubble-btn, .iconbtn, .search, .ge-bubble) {
  background: var(--family-panel);
  border: 1px solid var(--family-rule);
  color: var(--family-ink);
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: none;
}
.family
  :is(
    .feature,
    .feature-card,
    .price-card,
    .pricing-card,
    .legal-card,
    .ge-card,
    .ge-lock-card,
    .ge-auth-modal,
    .gate-card,
    .modal,
    .drawer,
    .rateprompt
  ) {
  background: var(--family-panel);
  border-color: var(--family-rule);
  border-radius: 7px;
  box-shadow: 0 12px 28px #18221812;
  backdrop-filter: none;
}
.family :is(h1, h2) {
  letter-spacing: -0.05em;
  font-weight: 500;
}
.family :is(input, textarea, select) {
  color: var(--family-ink);
  accent-color: var(--family-accent);
}
.family
  :is(input:not([type="range"]):not([type="checkbox"]), textarea, select) {
  background-color: var(--family-panel);
  border-color: var(--family-rule);
  border-radius: 5px;
}
.family :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--family-accent) !important;
  outline-offset: 4px;
}
.family :is(.launch-tag, .launch-tag .pill) {
  background: var(--family-wash) !important;
  color: var(--family-accent) !important;
  border-color: var(--family-rule) !important;
  backdrop-filter: none;
}
.family :is(.hero-meta, .updated, .footer-links, .copy, .ge-tag, .ge-pill) {
  font-family: ui-monospace, monospace;
}
/* Fader: roomy product typography, a real demo, and printed feature panels. */
.family-fader main {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.family-fader .hero {
  padding-block: 90px 65px;
  gap: 26px;
}
.family-fader .hero h1 {
  font-size: clamp(64px, 11vw, 148px);
  line-height: 1.04;
  font-weight: 500;
}
.family-fader .hero-icon {
  border-radius: 20%;
  box-shadow: 9px 12px 0 var(--family-wash);
}
.family-fader .video-frame {
  border: 1px solid var(--family-rule);
  border-radius: 8px;
  box-shadow: 14px 18px 0 var(--family-wash);
}
.family-fader :is(.section-title, .section-head h2) {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.1;
}
.family-fader :is(.feature-card, .price-card) {
  padding: 30px;
}
.family-fader .feature-icon {
  color: var(--family-accent);
  background: var(--family-wash);
}
/* Reading pages have the same paper, with comfortable long-form measure. */
.family-legal main {
  max-width: 880px;
  margin: 65px auto;
}
.family-legal .legal-card {
  padding: clamp(26px, 6vw, 72px);
}
.family-legal .legal-card h1 {
  font-size: clamp(42px, 7vw, 80px);
  line-height: 1.1;
  margin-bottom: 18px;
}
.family-legal .legal-card h2 {
  font-size: 25px;
  margin-top: 42px;
}
.family-legal .legal-card :is(p, ul, ol) {
  font-size: 16px;
  line-height: 1.8;
  color: var(--family-ink);
}
.family-legal .legal-card a {
  text-decoration-color: currentColor !important;
}
/* The Nooks retain their working shelves and controls. */
.family-nook header.app {
  background: var(--family-paper);
  border-bottom: 1px solid var(--family-rule);
}
.family-nook .bar {
  padding-block: 22px;
  flex-wrap: wrap;
}
.family-nook .brand .name {
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.family-nook :is(.brand .logo, .gate-card .glogo) {
  background: var(--family-cover);
  border: 1px solid #a9a18e;
  box-shadow: 4px 5px 0 var(--family-wash);
  border-radius: 3px;
}
.family-tv {
  --family-cover: #c6cce0;
}
.family-nook .hero {
  background: var(--family-wash);
  padding: 30px;
  border-radius: 5px;
}
.family-nook .hero h2 {
  font-size: 32px;
}
.family-nook .card {
  background: var(--family-panel);
  border-radius: 4px;
  box-shadow: 3px 5px 0 var(--family-wash);
}
.family-nook .card:hover {
  border-color: var(--family-accent);
  box-shadow: 6px 9px 0 var(--family-wash);
  transform: translateY(-3px);
}
.family-nook .card-body {
  padding: 15px;
}
.family-nook .title {
  font-size: 16px;
}
.family-nook :is(.tab.active, .pref-chip.active) {
  background: var(--family-accent);
  color: var(--family-on-accent);
}
.family-nook .tab.active .count {
  color: var(--family-on-accent);
  background: transparent;
}
.family-nook .badge.tmdb {
  background: var(--family-panel);
  color: var(--family-accent);
  border-color: var(--family-rule);
}
.family-nook .poster.placeholder {
  background: var(--family-wash);
  color: var(--family-muted);
}
.family-nook .gate-card {
  padding: 40px;
  text-align: left;
  border-radius: 5px;
  box-shadow: 12px 16px 0 var(--family-wash);
}
.family-nook .gate-card .glogo {
  margin: 0 0 30px;
}
.family-nook .gate-card h1 {
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
}
.family-nook .search {
  min-width: 180px;
}
.family-nook .modal-body p {
  color: var(--family-ink);
}
.family-nook .modal-head {
  background: var(--family-wash);
}
.family-nook :is(.stars, .ratebar, .ratebar2) {
  color: var(--family-muted);
}
.family-nook :is(.stars .on, .ratebar span.on, .ratebar2 span.on) {
  color: var(--family-accent);
}
.family-error .card {
  background: var(--family-panel);
  border-radius: 5px;
  box-shadow: 12px 16px 0 var(--family-wash);
  backdrop-filter: none;
}
.family-error h1 {
  font-weight: 500;
  line-height: 1.1;
}
/* Deal Finder: crisp data surfaces, no background motion behind tables. */
.family-deal .ge-header h1 {
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.family-deal :is(.ge-lock, .ge-auth-backdrop) {
  background: var(--family-paper);
}
.family-deal .ge-lock-card {
  border-radius: 5px;
  box-shadow: 12px 16px 0 var(--family-wash);
}
.family-deal :is(.ge-tab.active, .ge-segment button.active) {
  background: var(--family-accent) !important;
  color: var(--family-on-accent) !important;
  border-color: var(--family-accent);
}
.family-deal :is(.ge-table-wrap, .ge-modal, .ge-chart-wrap) {
  background: var(--family-panel);
  border-color: var(--family-rule);
  border-radius: 6px;
}
.family-deal .ge-table thead {
  background: var(--family-wash);
}
.family-deal .ge-table :is(th, td) {
  border-color: var(--family-rule);
}
.family-deal .ge-table tbody tr:hover td {
  background: var(--family-wash);
}
.family-deal .ge-table th.sorted {
  color: var(--family-ink);
}
.family-deal .ge-table {
  font-variant-numeric: tabular-nums;
}
/* One shared control, also reachable from locked screens. */
.family .theme-toggle,
.family #taskbarStreakToggle {
  display: none !important;
}
.family-tools {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
}
.family-tools a,
.family-tools button {
  height: 44px;
  min-width: 44px;
  padding: 10px 13px;
  display: grid;
  place-items: center;
  background: var(--family-paper);
  color: var(--family-ink);
  border: 1px solid var(--family-rule);
  border-radius: 24px;
  box-shadow: 0 3px 14px #0002;
  text-decoration: none;
  font:
    12px "Helvetica Neue",
    Arial,
    sans-serif;
  cursor: pointer;
}
.family-tools .cut {
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(1px);
}
.family-tools .rays {
  transform-origin: 12px 12px;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.35s,
    transform 0.35s;
}
[data-family-theme="light"] .family-tools .cut {
  transform: translateX(40px);
}
[data-family-theme="light"] .family-tools .rays {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}
@media (max-width: 600px) {
  .family-nook .search {
    order: 3;
    flex-basis: 100%;
  }
  .family-nook .bar {
    gap: 10px;
    padding-inline: 16px;
  }
  .family-nook .hero {
    padding: 20px;
  }
  .family-legal main {
    margin: 24px auto;
  }
  .family-fader .hero {
    padding-top: 55px;
  }
  .family-tools {
    right: 12px;
    bottom: 12px;
  }
  .family-nook .gate-card {
    padding: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .family *,
  .family *::before,
  .family *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 800px), (pointer: coarse) {
  .family body {
    overflow-wrap: break-word;
  }
  .family
    :is(
      main,
      section,
      .bar,
      .hero,
      .ge-card,
      .modal-body,
      .modal-head,
      .drawer .content
    ) {
    min-width: 0;
  }
  .family :is(input, textarea, select) {
    font-size: 16px !important;
  }
  .family
    :is(button, .iconbtn, .ghost, .tab, .pill, .btn-primary, .btn-secondary) {
    min-height: 44px;
  }
  .family .topbar {
    position: relative;
    padding: 12px 18px;
    min-height: 70px;
  }
  .family .topbar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .family .topbar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .family-fader .hero {
    padding-inline: 20px;
  }
  .family-fader .hero h1 {
    font-size: clamp(62px, 15vw, 105px);
  }
  .family-fader .hero-cta {
    width: 100%;
    gap: 12px;
  }
  .family-fader .hero-cta > * {
    flex: 1 1 200px;
    justify-content: center;
    text-align: center;
  }
  .family-fader .feature-grid {
    grid-template-columns: 1fr;
  }
  .family-fader .video-frame {
    box-shadow: 5px 7px 0 var(--family-wash);
  }
  .family-fader :is(.feature-card, .price-card) {
    padding: 24px;
  }
  .family-legal .legal-card {
    padding: 26px 20px;
  }
  .family-legal .legal-card h1 {
    font-size: 42px;
  }
  .family :is(.gate-bg, .ge-lock, .ge-auth-backdrop) {
    overflow-y: auto;
    padding: 24px 16px 100px;
    align-items: safe center;
  }
  .family :is(.gate-card, .ge-lock-card, .ge-auth-modal) {
    max-width: 100%;
    padding: 26px 20px;
    margin-block: auto;
  }
  .family-nook header.app {
    position: relative;
  }
  .family-nook .bar {
    padding: 16px;
    gap: 10px;
  }
  .family-nook .brand {
    flex-wrap: wrap;
  }
  .family-nook .search {
    flex-basis: 100%;
    order: 3;
    min-width: 0;
  }
  .family-nook main {
    padding: 20px 16px 110px;
  }
  .family-nook .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .family-nook .card-body {
    padding: 12px 10px;
  }
  .family-nook .hero .actions {
    margin-left: 0;
    flex-wrap: wrap;
    width: 100%;
  }
  .family-nook .filters > * {
    max-width: 100%;
  }
  .family-nook .modal-bg {
    padding: 16px 10px 100px;
  }
  .family-nook .modal-head {
    flex-wrap: wrap;
    padding: 18px;
    gap: 16px;
  }
  .family-nook .modal-head .poster {
    width: 100px;
  }
  .family-nook .modal-head > div {
    min-width: 0;
  }
  .family-nook .modal-body {
    padding: 18px;
  }
  .family-nook .drawer {
    width: min(100%, 420px);
    max-width: 100%;
  }
  .family-nook .drawer .content {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
  .family-nook .actions-row {
    flex-wrap: wrap;
  }
  .family-deal .ge-shell,
  .family-deal .ge-container {
    max-width: 100%;
    padding-inline: 16px;
  }
  .family-deal .ge-header {
    flex-wrap: wrap;
    gap: 16px;
  }
  .family-deal .ge-filters {
    flex-wrap: wrap;
  }
  .family-deal .ge-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .family-deal .ge-modal {
    max-width: 100%;
    padding: 20px 16px;
  }
  .family-deal .ge-auth-modal {
    width: 100%;
  }
  .family-deal .ge-trade-action {
    display: flex;
    flex-wrap: wrap;
  }
  .family-deal .ge-trade-action input[type="text"] {
    width: 100%;
  }
  .family-tools {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .family footer {
    padding-bottom: calc(95px + env(safe-area-inset-bottom));
  }
  .family-error .card {
    padding: 30px 22px;
    width: calc(100% - 40px);
  }
}
@media (max-width: 360px) {
  .family-nook .grid {
    gap: 8px;
  }
  .family-nook .brand .name {
    font-size: 23px;
  }
  .family-nook .quickadd {
    flex-wrap: wrap;
  }
  .family-nook .gate-card h1 {
    font-size: 34px;
  }
}