:root {
        --ink: #2a211c;
        --plaster: #f3e0c0;
        --sugo: #c4472c;
        --copper: #d98a2b;
        --olive: #71844f;
        --basil: #355c3a;
        --apron: #fbf6ec;
        --shadow: rgba(42, 33, 28, 0.28);
        --warm: 1; /* 1 = golden kitchen, 0 = cold, dead kitchen */
        --stage-r: 26px;
      }

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      html {
        color-scheme: dark;
        scroll-behavior: smooth;
      }

      body {
        min-height: 100svh;
        background: radial-gradient(
          120% 80% at 50% -10%,
          #4a3426 0%,
          #2a1c14 55%,
          #1a120c 100%
        );
        color: var(--ink);
        font-family:
          Inter,
          system-ui,
          -apple-system,
          sans-serif;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
      }

      .site {
        width: 100%;
      }
      .quiz-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100svh;
        padding:
          max(18px, env(safe-area-inset-top))
          max(14px, env(safe-area-inset-right))
          max(22px, env(safe-area-inset-bottom))
          max(14px, env(safe-area-inset-left));
      }
      .wrap {
        width: 100%;
        max-width: 520px;
      }

      /* ============ STAGE ============ */
      .stage {
        position: relative;
        width: 100%;
        aspect-ratio: 5/6;
        border-radius: var(--stage-r);
        overflow: hidden;
        background: #f3e0c0;
        box-shadow:
          0 30px 70px -30px rgba(0, 0, 0, 0.85),
          0 0 0 1px rgba(255, 255, 255, 0.07);
        isolation: isolate;
      }
      .scene {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        filter: saturate(calc(0.42 + 0.58 * var(--warm)))
          brightness(calc(0.84 + 0.16 * var(--warm)));
        transition: filter 1.1s ease;
      }

      /* progress rail */
      .rail {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 12px;
        background: rgba(42, 33, 28, 0.32);
        box-shadow:
          inset 0 -2px 0 rgba(42, 33, 28, 0.18),
          0 2px 6px rgba(42, 33, 28, 0.12);
        z-index: 6;
      }
      .rail i {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, #e29a31, #d94b2f);
        box-shadow: 2px 0 8px rgba(196, 71, 44, 0.38);
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .pill {
        position: absolute;
        top: 20px;
        right: 102px;
        z-index: 6;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        background: rgba(42, 33, 28, 0.9);
        color: #f3e0c0;
        padding: 6px 12px;
        border-radius: 99px;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .pill.on {
        opacity: 1;
      }

      /* ============ SPEECH BUBBLE ============ */
      .bubble {
        position: absolute;
        z-index: 7;
        top: 4%;
        left: 3.5%;
        width: max-content;
        max-width: 56%;
        background: #fff;
        border: 3px solid var(--ink);
        border-radius: 20px;
        padding: 13px 15px;
        font-family: Fraunces, Georgia, serif;
        font-weight: 900;
        font-size: clamp(15px, 4.3vw, 20px);
        line-height: 1.18;
        letter-spacing: -0.01em;
        box-shadow: 5px 6px 0 var(--ink);
        transform-origin: 90% 100%;
      }
      .bubble .speaker {
        display: block;
        margin-bottom: 4px;
        color: var(--sugo);
        font-family: Inter, system-ui, sans-serif;
        font-size: 9px;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 0.16em;
        line-height: 1;
        text-transform: uppercase;
      }
      .bubble::after {
        content: "";
        position: absolute;
        bottom: -17px;
        right: 26px;
        width: 0;
        height: 0;
        border: 11px solid transparent;
        border-top-color: var(--ink);
        border-bottom: 0;
      }
      .bubble::before {
        content: "";
        position: absolute;
        bottom: -12px;
        right: 29px;
        z-index: 1;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-top-color: #fff;
        border-bottom: 0;
      }
      .bubble.pop {
        animation: pop 0.34s cubic-bezier(0.2, 1.5, 0.35, 1);
      }
      .bubble.is-question,
      .bubble.is-reaction {
        width: 64%;
        max-width: 64%;
        padding: 17px 20px;
        font-size: clamp(18px, 4.9vw, 25px);
        line-height: 1.16;
      }
      .bubble.is-question {
        border-color: #71392a;
        box-shadow: 5px 6px 0 #71392a;
      }
      .bubble.is-question::after {
        border-top-color: #71392a;
      }
      .bubble.is-question .speaker,
      .bubble.is-reaction .speaker {
        margin-bottom: 7px;
        font-size: 10px;
      }
      @keyframes pop {
        0% {
          transform: scale(0.7) rotate(-3deg);
          opacity: 0;
        }
        100% {
          transform: scale(1) rotate(0);
          opacity: 1;
        }
      }

      /* ============ QUESTION BAND ============ */
      .band {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        min-height: 112px;
        padding: 30px 24px 18px;
        background: linear-gradient(
          to top,
          rgba(26, 18, 12, 0.97) 72%,
          rgba(26, 18, 12, 0.8) 88%,
          rgba(26, 18, 12, 0)
        );
        color: #fdf6e9;
        text-align: center;
      }
      .band::before {
        content: "";
        position: absolute;
        right: 24px;
        bottom: 0;
        left: 24px;
        height: 3px;
        border-radius: 99px;
        background: linear-gradient(
          90deg,
          #2f6b42 0 33.333%,
          #fff8e9 33.333% 66.666%,
          #b8372c 66.666%
        );
        opacity: 0.8;
      }
      .band .eyebrow {
        margin: 0 0 7px;
        color: #ffc978;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      .band .q {
        font-family: Fraunces, Georgia, serif;
        font-weight: 900;
        font-size: clamp(19px, 5.6vw, 26px);
        line-height: 1.15;
        letter-spacing: -0.015em;
        margin: 0;
        text-wrap: balance;
      }
      .band .q em {
        font-style: italic;
        color: #ffc978;
      }

      .band .lede {
        margin: 9px 0 0;
        font-size: clamp(12.5px, 3.4vw, 14px);
        font-weight: 600;
        color: rgba(253, 246, 233, 0.72);
      }
      .band .lede strong {
        color: #fff;
      }
      .band .instruction {
        margin: 0;
        color: #fdf6e9;
        font-family: Fraunces, Georgia, serif;
        font-size: clamp(17px, 4.8vw, 22px);
        font-weight: 900;
        line-height: 1.14;
      }

      /* ============ VERDICT ============ */
      .verdict {
        text-align: center;
      }
      .verdict .kicker {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(253, 246, 233, 0.6);
        margin: 0 0 6px;
      }
      .verdict .title {
        font-family: Fraunces, Georgia, serif;
        font-weight: 900;
        font-size: clamp(34px, 10.5vw, 52px);
        line-height: 0.92;
        letter-spacing: -0.035em;
        margin: 0;
        color: #ffd48a;
        text-wrap: balance;
      }
      .verdict .line {
        font-family: Fraunces, Georgia, serif;
        font-style: italic;
        font-weight: 700;
        font-size: clamp(15px, 4.2vw, 19px);
        margin: 10px 0 0;
        color: #fdf6e9;
      }
      .verdict .worst {
        margin: 13px auto 0;
        display: inline-block;
        font-size: clamp(11.5px, 3.2vw, 13px);
        font-weight: 800;
        letter-spacing: 0.02em;
        background: var(--sugo);
        color: #fff;
        padding: 7px 13px;
        border-radius: 99px;
      }
      .verdict .worst b {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.72;
        margin-right: 6px;
      }

      /* ============ CONTROLS ============ */
      .controls {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }
      .two {
        grid-template-columns: 1fr 1fr;
      }

      .btn {
        border: 0;
        border-radius: 16px;
        padding: 17px 18px;
        font-family: Inter, sans-serif;
        font-weight: 800;
        font-size: clamp(15px, 4vw, 17px);
        letter-spacing: -0.01em;
        cursor: pointer;
        color: #fff;
        transition:
          transform 0.12s ease,
          box-shadow 0.12s ease,
          filter 0.12s ease;
        box-shadow: 0 5px 0 rgba(0, 0, 0, 0.32);
        min-height: 56px;
      }
      @media (hover: hover) {
        .btn:hover {
          filter: brightness(1.07);
          transform: translateY(-1px);
        }
      }
      .btn:active {
        transform: translateY(4px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
      }
      .btn:focus-visible {
        outline: 3px solid #ffd48a;
        outline-offset: 3px;
      }
      .btn[disabled] {
        opacity: 0.45;
        pointer-events: none;
      }

      .btn-yes {
        background: var(--sugo);
      }
      .btn-no {
        background: var(--olive);
      }
      .btn-go {
        background: linear-gradient(100deg, var(--copper), var(--sugo));
        padding: 19px;
      }
      .btn-share {
        background: linear-gradient(100deg, var(--copper), var(--sugo));
      }
      .btn-ghost {
        background: rgba(253, 246, 233, 0.1);
        color: #ebd9be;
        box-shadow: none;
        border: 1.5px solid rgba(253, 246, 233, 0.24);
        font-weight: 600;
        padding: 14px;
      }
      .btn-ghost:active {
        transform: none;
      }

      .restart {
        position: absolute;
        top: 17px;
        right: 14px;
        z-index: 9;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 32px;
        border: 1px solid rgba(253, 246, 233, 0.28);
        border-radius: 99px;
        background: rgba(42, 33, 28, 0.86);
        color: #fdf6e9;
        font: 800 10px/1 Inter, system-ui, sans-serif;
        letter-spacing: 0.06em;
        padding: 7px 10px;
        text-transform: uppercase;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
          opacity 0.2s ease,
          transform 0.2s ease,
          background 0.2s ease;
      }
      .restart.on {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .restart:hover {
        background: rgba(42, 33, 28, 0.98);
      }
      .restart:focus-visible {
        outline: 3px solid #ffd48a;
        outline-offset: 2px;
      }
      .restart .restart-icon {
        font-size: 15px;
        line-height: 0.7;
      }

      .advancing {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        border: 1.5px solid rgba(253, 246, 233, 0.22);
        border-radius: 16px;
        background: rgba(253, 246, 233, 0.08);
        color: rgba(253, 246, 233, 0.82);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .advancing .pulse {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffc978;
        box-shadow: 0 0 0 0 rgba(255, 201, 120, 0.55);
        animation: pulse 1s ease-out infinite;
      }
      @keyframes pulse {
        70% {
          box-shadow: 0 0 0 7px rgba(255, 201, 120, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(255, 201, 120, 0);
        }
      }

      .foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: rgba(243, 224, 192, 0.4);
      }

      /* ============ ABOUT ============ */
      .about {
        width: min(100% - 32px, 760px);
        margin: clamp(140px, 22vh, 240px) auto clamp(90px, 14vh, 150px);
        scroll-margin-top: 28px;
        color: rgba(253, 246, 233, 0.78);
        font-size: clamp(16px, 2.1vw, 18px);
        line-height: 1.76;
      }
      .about::before {
        content: "";
        display: block;
        width: 90px;
        height: 5px;
        margin-bottom: 28px;
        border-radius: 99px;
        background: linear-gradient(
          90deg,
          #3c754c 0 33.333%,
          #f8edda 33.333% 66.666%,
          #be4134 66.666%
        );
      }
      .about h1 {
        max-width: 700px;
        margin: 0 0 28px;
        color: #ffd48a;
        font-family: Fraunces, Georgia, serif;
        font-size: clamp(38px, 7.2vw, 64px);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 0.98;
        text-wrap: balance;
      }
      .about p {
        margin: 0 0 22px;
      }
      .about p:first-of-type {
        color: #fdf6e9;
        font-family: Fraunces, Georgia, serif;
        font-size: clamp(21px, 3.5vw, 27px);
        font-weight: 700;
        line-height: 1.38;
      }
      .about .signature {
        margin-top: 38px;
        padding-top: 24px;
        border-top: 1px solid rgba(243, 224, 192, 0.18);
        color: #ebd9be;
        font-family: Fraunces, Georgia, serif;
        font-size: clamp(17px, 2.4vw, 20px);
        font-weight: 700;
        line-height: 1.55;
      }

      .foot a {
        color: inherit;
        text-decoration-color: rgba(243, 224, 192, 0.3);
        text-underline-offset: 3px;
      }
      .foot a:hover {
        color: rgba(243, 224, 192, 0.72);
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translate(-50%, 26px);
        background: var(--ink);
        color: #f3e0c0;
        padding: 12px 20px;
        border-radius: 99px;
        font-size: 13.5px;
        font-weight: 700;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 99;
      }
      .toast.on {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      /* ============ NONNA + KITCHEN ANIMATION ============ */
      .torso {
        transform-box: view-box;
        transform-origin: 300px 640px;
        animation: breathe 4.4s ease-in-out infinite;
      }
      @keyframes breathe {
        0%,
        100% {
          transform: scaleY(1) scaleX(1);
        }
        50% {
          transform: scaleY(1.012) scaleX(1.006);
        }
      }

      .nonna {
        transform-box: view-box;
        transform-origin: 300px 660px;
        transition: transform 0.38s cubic-bezier(0.3, 1.3, 0.4, 1);
      }
      .head {
        transform-box: view-box;
        transform-origin: 300px 300px;
        transition: transform 0.38s cubic-bezier(0.3, 1.4, 0.4, 1);
      }
      .armL {
        transform-box: view-box;
        transform-origin: 214px 352px;
        transition: transform 0.38s cubic-bezier(0.3, 1.4, 0.4, 1);
      }
      .armR {
        transform-box: view-box;
        transform-origin: 386px 352px;
        transition: transform 0.38s cubic-bezier(0.3, 1.4, 0.4, 1);
      }

      /* face part swapping */
      .fx {
        display: none;
      }
      .mood-happy .f-happy,
      .mood-sigh .f-sigh,
      .mood-shock .f-shock,
      .mood-away .f-away,
      .mood-rage .f-rage,
      .mood-warm .f-warm {
        display: block;
      }

      /* blink only when eyes are open-normal */
      .blinker {
        transform-box: view-box;
        transform-origin: 300px 236px;
        animation: blink 6.2s infinite;
      }
      @keyframes blink {
        0%,
        95.5%,
        100% {
          transform: scaleY(1);
        }
        96.5%,
        98% {
          transform: scaleY(0.06);
        }
      }

      /* arm poses */
      .mood-happy .armL {
        transform: rotate(26deg);
      }
      .mood-happy .armR {
        transform: rotate(-26deg);
      }
      .mood-sigh .armL {
        transform: rotate(4deg);
      }
      .mood-sigh .armR {
        transform: rotate(-4deg);
      }
      .mood-shock .armL {
        transform: rotate(78deg);
      }
      .mood-shock .armR {
        transform: rotate(-78deg);
      }
      .mood-away .armL {
        transform: rotate(6deg);
      }
      .mood-away .armR {
        transform: rotate(-116deg);
      }
      .mood-rage .armL {
        transform: rotate(14deg);
      }
      .mood-rage .armR {
        transform: rotate(-72deg);
      }
      .mood-warm .armL {
        transform: rotate(54deg);
      }
      .mood-warm .armR {
        transform: rotate(-54deg);
      }

      /* head + body poses */
      .mood-happy .head {
        transform: rotate(0);
      }
      .mood-sigh .head {
        transform: rotate(-7deg);
      }
      .mood-shock .head {
        transform: rotate(2deg) translateY(-4px);
      }
      .mood-away .head {
        transform: rotate(-17deg);
      }
      .mood-rage .head {
        transform: rotate(4deg) translateY(-3px);
      }
      .mood-warm .head {
        transform: rotate(-5deg);
      }

      .mood-away .nonna {
        transform: rotate(-7deg);
      }
      .mood-warm .nonna {
        animation: delight 0.48s cubic-bezier(0.2, 1.5, 0.35, 1);
      }
      @keyframes delight {
        0% {
          transform: scale(0.97) translateY(4px);
        }
        55% {
          transform: scale(1.045) translateY(-5px);
        }
        100% {
          transform: scale(1) translateY(0);
        }
      }
      .mood-rage .nonna {
        animation: seethe 0.42s ease-in-out 2;
      }
      @keyframes seethe {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
      }

      /* steam */
      .steam path {
        animation: rise 3.4s ease-in-out infinite;
        opacity: 0;
      }
      .steam path:nth-child(2) {
        animation-delay: 1.1s;
      }
      .steam path:nth-child(3) {
        animation-delay: 2.2s;
      }
      @keyframes rise {
        0% {
          opacity: 0;
          transform: translateY(6px) scaleX(0.85);
        }
        30% {
          opacity: 0.75;
        }
        100% {
          opacity: 0;
          transform: translateY(-46px) scaleX(1.25);
        }
      }
      .steam {
        transform-box: view-box;
        transform-origin: 300px 500px;
      }

      /* decay-driven scenery */
      .photo {
        transform-box: view-box;
        transform-origin: 452px 322px;
        transform: rotate(calc((1 - var(--warm)) * 88deg));
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .cat {
        opacity: calc((var(--warm) - 0.42) * 3.2);
        transition: opacity 0.9s ease;
      }
      .curtain {
        transform-box: view-box;
        transform-origin: 96px 70px;
        animation: sway 7s ease-in-out infinite;
      }
      @keyframes sway {
        0%,
        100% {
          transform: rotate(0);
        }
        50% {
          transform: rotate(1.6deg);
        }
      }
      .glow {
        opacity: var(--warm);
        transition: opacity 1s ease;
      }
      .chill {
        opacity: calc((1 - var(--warm)) * 0.46);
        transition: opacity 1s ease;
      }
      .beam {
        opacity: calc(var(--warm) * 0.5);
        transition: opacity 1s ease;
      }
      .beam {
        mix-blend-mode: soft-light;
      }
      .glow {
        mix-blend-mode: overlay;
      }
      .chill {
        mix-blend-mode: multiply;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        * {
          animation: none !important;
        }
        .nonna,
        .head,
        .armL,
        .armR {
          transition-duration: 0.01s;
        }
      }

/* ============ PRIVACY ============ */
.privacy-page {
  display: block;
  min-height: 100svh;
  padding:
    max(28px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(48px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.privacy {
  width: min(100%, 820px);
  margin: 0 auto;
}

.privacy-back {
  display: inline-block;
  margin: 0 0 20px;
  color: #ebd9be;
  font-size: 14px;
  font-weight: 800;
  text-decoration-color: rgba(235, 217, 190, 0.38);
  text-underline-offset: 4px;
}

.privacy-back:hover {
  color: #ffd48a;
}

.privacy-card {
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background: #fbf6ec;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  color: var(--ink);
}

.privacy-kicker {
  margin: 0 0 8px;
  color: var(--sugo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.privacy-card h1 {
  margin: 0 0 10px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(42px, 8vw, 68px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.privacy-effective {
  margin: 0 0 42px;
  color: rgba(42, 33, 28, 0.62);
  font-size: 14px;
}

.privacy-card h2 {
  margin: 34px 0 10px;
  color: #71392a;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.privacy-card p,
.privacy-card li {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.72;
}

.privacy-card p {
  margin: 0 0 16px;
}

.privacy-card ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.privacy-card li + li {
  margin-top: 6px;
}

.privacy-card a {
  color: #9d3526;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

.privacy-card a:hover {
  color: #71392a;
}
      @media (max-width: 400px) {
        .bubble {
          max-width: 58%;
          padding: 11px 12px;
          border-width: 2.5px;
          box-shadow: 4px 5px 0 var(--ink);
          font-size: clamp(14px, 4.1vw, 17px);
        }
        .bubble.is-question,
        .bubble.is-reaction {
          width: 60%;
          max-width: 60%;
          padding: 14px 15px;
          font-size: clamp(17px, 4.8vw, 19px);
        }
        .bubble.is-question {
          box-shadow: 4px 5px 0 #71392a;
        }
        .bubble.is-question .speaker,
        .bubble.is-reaction .speaker {
          margin-bottom: 5px;
          font-size: 9px;
        }
        .band {
          min-height: 102px;
          padding: 26px 15px 15px;
        }
        .pill {
          top: 56px;
          right: 14px;
        }
      }