:root {
  --paper:#faf3e5;
  --ink:#302a23;
  --red:#cd392a;
  --green:#487548;
  --muted:#756b5b;
  --line:#ded4c1;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background-image:radial-gradient(#b9a78c20 .7px,transparent .7px);
  background-size:7px 7px;
}

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:wait;
}

a {
  color:inherit;
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--green);
  outline-offset:5px;
}

[hidden] {
  display:none!important;
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.masthead {
  max-width:1240px;
  margin:auto;
  padding:30px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.masthead a {
  font-weight:900;
  font-size:25px;
  letter-spacing:-1.2px;
  text-decoration:none;
}

.masthead a>span:first-child {
  font-family:Georgia,serif;
  font-style:italic;
  color:var(--red);
}

.brand-star {
  color:var(--red);
  margin-left:8px;
}

.edition {
  font-size:10px;
  letter-spacing:2px;
  border:1px solid var(--ink);
  border-radius:30px;
  padding:9px 13px;
  transform:rotate(3deg);
}

main {
  max-width:1130px;
  margin:0 auto;
  padding:66px 36px 64px;
  display:grid;
  grid-template-columns:1fr 440px;
  gap:74px;
  align-items:center;
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 23px;
}

.eyebrow span {
  width:7px;
  height:7px;
  background:var(--red);
  border-radius:50%;
  flex-shrink:0;
}

h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(72px,8vw,104px);
  line-height:.96;
  letter-spacing:-5px;
  margin:0;
  font-weight:400;
}

h1 em {
  color:var(--red);
  position:relative;
}

h1 em:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:7px;
  border-bottom:3px solid var(--red);
  border-radius:50%;
  transform:rotate(-6deg);
}

.question-mark {
  color:var(--red);
}

.intro-copy {
  font-size:15px;
  color:var(--muted);
  line-height:1.75;
  margin:25px 0 0;
}

.hero-doodle {
  position:relative;
  width:300px;
  height:206px;
  margin-top:10px;
}

.hero-doodle>svg {
  width:146px;
  height:175px;
  position:absolute;
  left:60px;
  top:4px;
  transform:rotate(12deg);
}

.pepper-body {
  fill:var(--red);
}

.spark {
  position:absolute;
  color:var(--green);
}

.spark-one {
  font-size:56px;
  top:6px;
  left:17px;
}

.spark-two {
  font-size:32px;
  top:93px;
  left:215px;
  color:var(--red);
}

.doodle-note {
  position:absolute;
  left:130px;
  bottom:8px;
  font:italic 19px Georgia,serif;
  transform:rotate(-8deg);
  white-space:nowrap;
}

.doodle-arrow {
  position:absolute;
  right:12px;
  top:119px;
  font-size:34px;
  transform:rotate(-20deg);
}

.little-note {
  font-size:12px;
  color:var(--muted);
}

.little-note span {
  color:var(--red);
  font-size:20px;
  vertical-align:middle;
  margin-right:7px;
}

.test-card {
  position:relative;
  background:#fffdf7;
  border:1.5px solid var(--ink);
  border-radius:15px;
  box-shadow:7px 8px 0 #e6dcc6;
  transform:rotate(.6deg);
}

.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 26px;
  border-bottom:1px dashed var(--line);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
}

.card-top>span:last-child {
  color:var(--red);
  font-size:20px;
}

#entry,#result {
  padding:29px 30px 22px;
}

.step-label {
  font-size:9px;
  letter-spacing:1.7px;
  font-weight:700;
  color:var(--green);
}

h2 {
  font-family:Georgia,serif;
  font-size:30px;
  letter-spacing:-1px;
  font-weight:400;
  line-height:1.15;
  margin:12px 0;
}

.card-heading p,.result-copy {
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 25px;
}

.field {
  margin-bottom:17px;
}

label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:9px;
}

label span {
  font-weight:400;
  font-size:10px;
  color:var(--muted);
}

input {
  width:100%;
  padding:15px 14px;
  border:1px solid #cfc5b2;
  border-radius:6px;
  background:#fffefa;
  color:var(--ink);
  font-size:16px;
}

input::placeholder {
  color:#8b8273;
  font-size:13px;
}

input[aria-invalid=true] {
  border-color:var(--red);
}

.field-error {
  color:#a3241c;
  font-size:12px;
  line-height:1.5;
  margin:5px 0 0;
}

.field-error:empty {
  display:none;
}

.primary {
  border:1px solid #a6261c;
  background:var(--red);
  color:#fffdf7;
  width:100%;
  padding:16px 12px;
  border-radius:7px;
  font-size:14px;
  font-weight:700;
  box-shadow:0 3px 0 #9e2c22;
  transition:transform .15s,background .15s;
}

.primary:hover {
  background:#b82e22;
  transform:translateY(-1px);
}

.primary:active {
  transform:translateY(2px);
  box-shadow:none;
}

.primary:disabled {
  opacity:.7;
}

.primary>span {
  margin-left:9px;
}

.meter-section {
  border-top:1px dashed var(--line);
  margin-top:27px;
  padding-top:17px;
  text-align:center;
}

.meter {
  display:flex;
  justify-content:center;
  gap:8px;
}

.meter svg {
  width:29px;
  height:36px;
  color:#9e9481;
  transition:transform .2s;
}

.meter .pepper-body {
  fill:#e8e0d0;
}

.meter svg.active,.filled svg {
  color:var(--ink);
  transform:rotate(-8deg);
}

.meter svg.active .pepper-body,.filled .pepper-body {
  fill:var(--red);
}

#check-status {
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
  min-height:17px;
  margin:9px 0 0;
}

.card-bottom {
  border-top:1px dashed var(--line);
  padding:16px 15px;
  text-align:center;
  font-size:10px;
  color:var(--muted);
}

.card-bottom span {
  color:var(--green);
  margin-right:6px;
}

.corner-star {
  position:absolute;
  font-size:68px;
  color:var(--green);
  right:-28px;
  bottom:-28px;
  transform:rotate(12deg);
  text-shadow:2px 2px var(--paper);
  pointer-events:none;
}

.feedback {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
}

.feedback svg {
  width:42px;
  height:50px;
  flex-shrink:0;
  transform-origin:65% 25%;
  animation:droop .7s ease forwards;
}

.feedback p {
  font-size:13px;
  color:#a3241c;
  line-height:1.5;
  margin:0;
}

@keyframes droop {
  to {
    transform:rotate(65deg);
  }
}

#result {
  text-align:center;
}

#result h2 {
  font-size:34px;
  margin-bottom:18px;
}

#result .result-copy {
  margin:12px 0 20px;
}

.video-area {
  display:grid;
  gap:12px;
}

video {
  display:block;
  width:100%;
  max-height:58svh;
  object-fit:contain;
  background:#241e19;
  border-radius:8px;
}

.video-message {
  padding:24px 16px;
  background:#f4eddf;
  border-radius:8px;
  font-size:14px;
  line-height:1.6;
}

.reset {
  background:none;
  border:0;
  color:var(--ink);
  padding:15px 6px;
  margin-top:10px;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:5px;
}

footer {
  max-width:1152px;
  border-top:1px solid var(--line);
  margin:0 auto;
  padding:23px 24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:11px;
}

footer>span:first-child {
  font-size:9px;
  letter-spacing:1.5px;
}

.confetti {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.confetti i {
  position:absolute;
  top:-20px;
  width:8px;
  height:15px;
  background:var(--red);
  animation:fall 2.8s ease-in forwards;
}

.confetti i:nth-child(3n) {
  background:var(--green);
  border-radius:50%;
}

.confetti i:nth-child(3n+1) {
  background:#e8b745;
}

@keyframes fall {
  to {
    transform:translateY(105vh) rotate(540deg);
    opacity:0;
  }
}

@media(min-width:1400px) {
  main {
    padding-top:90px;
    padding-bottom:90px;
  }
}

@media(max-width:850px) {
  main {
    gap:35px;
    grid-template-columns:1fr 390px;
    padding:48px 28px;
  }
  .masthead {
    padding:25px 28px;
  }
  h1 {
    font-size:78px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1px;
  }
  .hero-doodle {
    width:265px;
  }
  .doodle-note {
    left:90px;
  }
  #entry,#result {
    padding:26px 24px;
  }
  .intro-copy {
    font-size:14px;
  }
  .desktop-break {
    display:none;
  }
}

@media(max-width:700px) {
  .masthead {
    padding:20px 22px;
  }
  .masthead a {
    font-size:23px;
  }
  .edition {
    font-size:8px;
    letter-spacing:1.3px;
    padding:8px 10px;
  }
  main {
    display:flex;
    flex-direction:column;
    gap:26px;
    padding:33px 23px 48px;
  }
  .intro {
    width:100%;
    max-width:440px;
    position:relative;
  }
  .eyebrow {
    font-size:8px;
    margin-bottom:20px;
  }
  h1 {
    font-size:76px;
    letter-spacing:-4px;
  }
  .intro-copy {
    max-width:255px;
    font-size:13px;
    margin-top:20px;
  }
  .hero-doodle {
    position:absolute;
    right:-4px;
    top:52px;
    width:105px;
    height:145px;
    margin:0;
  }
  .hero-doodle>svg {
    width:82px;
    height:104px;
    left:9px;
    top:8px;
  }
  .spark-one {
    font-size:30px;
    left:-3px;
    top:-9px;
  }
  .spark-two {
    font-size:21px;
    left:80px;
    top:93px;
  }
  .doodle-note,.doodle-arrow,.little-note {
    display:none;
  }
  .test-card {
    width:100%;
    max-width:440px;
    transform:none;
  }
  .corner-star {
    right:-15px;
    font-size:53px;
    bottom:-23px;
  }
  footer {
    margin:0 23px;
    flex-direction:column;
    gap:10px;
    text-align:center;
    padding:20px 0;
  }
  .card-heading p {
    margin-bottom:22px;
  }
}

@media(max-width:360px) {
  h1 {
    font-size:66px;
  }
  .hero-doodle {
    right:-8px;
    width:82px;
  }
  .hero-doodle>svg {
    width:65px;
  }
  .spark-two {
    left:64px;
  }
  .eyebrow {
    font-size:7px;
  }
  #entry,#result {
    padding:23px 19px;
  }
  label span {
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .confetti {
    display:none;
  }
  .feedback svg {
    transform:rotate(45deg);
  }
}

/* Custom properties inherit into SVG use instances, unlike descendant selectors. */
.pepper-body {
  fill:var(--pepper-fill,var(--red));
}

.meter svg {
  --pepper-fill:#e8e0d0;
}

.meter svg.active,.filled svg {
  --pepper-fill:var(--red);
}


/* The reveal gets its own full-width stage. Preserve the actual video ratio:
   portrait fills the available height; landscape fills the available width. */
.watching .intro,
.watching .masthead,
.watching footer,
.watching .card-top,
.watching .card-bottom,
.watching .corner-star,
.watching #result > .step-label,
.watching .result-copy,
.watching #result-peppers {
  display: none;
}
.watching main {
  display: block;
  max-width: 1500px;
  padding: 12px;
}
.watching .test-card {
  max-width: none;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.watching #result {
  padding: 0;
}
.watching #result h2 {
  margin: 4px 0 12px;
  font-size: clamp(22px, 4vw, 34px);
}
.watching video {
  width: 100%;
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
  min-height: 180px;
  max-height: none;
  object-fit: contain;
  background: #1c1916;
}
.video-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.video-actions .primary {
  width: auto;
}
.secondary {
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: #fffdf7;
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 700;
}
button, .reset {
  min-height: 44px;
  touch-action: manipulation;
}
#rotate-tip {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
video:fullscreen {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}
@media (orientation: landscape) {
  #rotate-tip { display: none; }
  .watching video {
    height: calc(100dvh - 125px);
  }
}
@media (max-width: 850px) {
  main { display: flex; flex-direction: column; }
  .intro { width: 100%; max-width: 440px; }
  .test-card { width: 100%; max-width: 440px; }
}
@media (max-width: 700px) {
  label, .reset { font-size: 15px; }
  label span { font-size: 12px; }
  .intro-copy, .card-heading p { font-size: 15px; }
  .hero-doodle { display: none; }
  .watching main { padding: 10px 6px; }
  .watching #result h2 { padding: 0 8px; }
}
@media (max-width: 360px) {
  .masthead { padding: 16px 14px; gap: 8px; }
  .masthead a { white-space: nowrap; font-size: 21px; }
  .edition { font-size: 7px; letter-spacing: .5px; }
  h1 { font-size: 60px; }
}

/* A landscape video cannot fill a portrait screen without losing image content. */
.watching.landscape-video video {
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
}
@media (orientation: landscape) {
  .watching.landscape-video video {
    max-height: calc(100dvh - 125px);
  }
}

/* Guest results stay on the birthday card and never open an empty video stage. */
.guest-result #result-peppers {
  margin: 24px 0;
  gap: 10px;
}
.guest-result #result-peppers svg {
  width: 38px;
  height: 46px;
}
#guest-joke {
  padding: 20px 18px;
  margin: 0 0 22px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper);
}
#joke-title {
  color: var(--red);
  font: 24px/1.25 Georgia, serif;
  margin: 0 0 12px;
}
#joke-text {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}
.guest-result #result-copy {
  font-size: 14px;
  line-height: 1.6;
}

.sound-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  border-radius: 6px;
}
.sound-toggle:hover { background: var(--paper); }

#birthday-caption {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
}
.watching #result h2 {
  overflow-wrap: anywhere;
  margin-bottom: 6px;
}
.watching video {
  height: calc(100dvh - 215px);
}
@media (orientation: landscape) {
  .watching video { height: calc(100dvh - 155px); }
}