@font-face {
  font-family:"Kalam";
  src:url("./assets/kalam-regular-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Kalam";
  src:url("./assets/kalam-bold-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
:root {
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  color:#273f36;
  background:#f7f7ef;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible {
  outline:3px solid #7851b2;
  outline-offset:5px;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
}
[hidden] {
  display:none!important;
}
.page-shell {
  max-width:1128px;
  margin:auto;
  padding:0 34px;
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:90px;
  border-bottom:1px solid #dee3d7;
}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand img {
  display:block;
  width:172px;
  height:auto;
}
.header-note {
  font-size:12px;
  font-weight:600;
  color:#66776b;
  display:flex;
  align-items:center;
  gap:9px;
}
.status-dot,.room-tag span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#81a47d;
  display:inline-block;
}
.prototype-label {
  font-size:10px;
  letter-spacing:.4px;
  padding:7px 11px;
  border:1px solid #d9ded1;
  border-radius:99px;
  color:#6d7b6c;
}
.intro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:32px 0 25px;
  gap:20px;
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:750;
  color:#788572;
  margin:0 0 10px;
}
h1 {
  font-size:clamp(28px,3.5vw,43px);
  line-height:1.16;
  letter-spacing:-1.7px;
  margin:0;
  font-weight:800;
}
h1 span {
  color:#829375;
}
.intro-copy {
  font-size:13px;
  line-height:1.65;
  color:#6d7c70;
  margin:0 2px 1px 0;
}
.game-card {
  border:1px solid #d8dfd0;
  border-radius:20px;
  background:#fffef8;
  overflow:hidden;
  box-shadow:0 16px 48px #4256380a,0 2px 3px #42563804;
}
.classroom {
  aspect-ratio:1040/470;
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#f6efdF;
  --progress:0;
  --flutter:0;
  --wind:0;
}
.chalkboard {
  position:absolute;
  z-index:2;
  left:45.9%;
  top:12.1%;
  width:42.6%;
  height:45.1%;
  padding:7px;
  border-radius:6px;
  background:linear-gradient(125deg,#d3ad7e,#b1855b 55%,#c79f71);
  box-shadow:0 4px 7px #59473124,inset 0 1px #f4d6a8;
  color:#f6f3dc;
  font-family:"Kalam","Chalkboard SE",cursive;
  user-select:none;
  pointer-events:none;
}
.chalkboard::after {
  content:"";
  position:absolute;
  bottom:-4px;
  left:-1.5%;
  width:103%;
  height:5px;
  border-radius:3px;
  background:linear-gradient(#e1bf90,#b58a5d);
  box-shadow:0 3px 3px #614b3524;
}
.chalkboard-face {
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 19px;
  border:1px solid #274c3f;
  background:
    radial-gradient(ellipse at 65% 80%,#acc29b12,transparent 66%),
    repeating-linear-gradient(174deg,transparent 0 21px,#c7d0aa06 23px,transparent 27px),
    linear-gradient(105deg,#294f44,#335e51 55%,#2d5448);
  box-shadow:inset 0 2px 7px #173e384d;
}
.chalkboard-face::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background:radial-gradient(#d4dccb 0 .45px,transparent .7px) 0 0/5px 7px;
  pointer-events:none;
}
.chalk-scores {
  position:relative;
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:end;
  gap:18px;
  text-shadow:.5px .4px #f8f5df33,0 0 1px #f8f5df44;
}
.chalk-label {
  display:block;
  font-size:clamp(13px,1.9cqw,21px);
  line-height:1.25;
  white-space:nowrap;
  font-weight:400;
}
.chalk-value {
  display:flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}
.chalk-value strong {
  font-size:clamp(42px,6.7cqw,74px);
  line-height:1.02;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}
.chalk-unit {
  font-size:clamp(11px,1.6cqw,17px);
  opacity:.7;
}
.chalk-record {
  padding-left:16px;
  border-left:1px dashed #e4e7bd52;
  color:#f0dca1;
}
.chalk-record .chalk-value strong {
  font-size:clamp(35px,5.5cqw,62px);
}
.chalk-star {
  font-size:clamp(18px,2.6cqw,27px);
  align-self:center;
}
.freshness-track {
  flex-shrink:0;
  position:relative;
  height:4px;
  margin-top:5px;
  background:#d8dfb225;
  border-radius:2px;
  overflow:hidden;
}
.freshness-track>div {
  height:100%;
  width:0;
  background:#d8e5b5;
  border-radius:2px;
  box-shadow:0 0 2px #fff6d688;
  transition:background .25s;
}
.round-status {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:2.3em;
  margin-top:3px;
  font-size:clamp(11px,1.55cqw,16px);
  line-height:1.15;
  text-align:center;
  position:relative;
}
.status-indicator {
  width:5px;
  height:5px;
  border-radius:50%;
  flex-shrink:0;
  background:#d8e5b5;
  box-shadow:0 0 2px #fff6d666;
}
.chalk-stick {
  z-index:1;
  position:absolute;
  bottom:-1px;
  width:19px;
  height:4px;
  border-radius:1px;
  box-shadow:0 1px 1px #413c3266;
}
.chalk-stick-white { right:12%; background:#f4f0dc; transform:rotate(-3deg); }
.chalk-stick-yellow { right:21%; width:14px; background:#e9cb81; transform:rotate(2deg); }
.room-art {
  width:100%;
  height:100%;
  display:block;
}
.room-tag {
  position:absolute;
  left:2.5%;
  top:4%;
  display:flex;
  gap:7px;
  align-items:center;
  font-size:9px;
  letter-spacing:.6px;
  color:#727e68;
  font-weight:600;
}
.room-tag span {
  width:5px;
  height:5px;
}
.nuki {
  position:absolute;
  width:23%;
  height:auto;
  left:65%;
  bottom:4.5%;
  object-fit:contain;
  z-index:3;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 6px 3px #5445281a);
  transform-origin:50% 85%;
  transition:transform .2s;
}
.nuki-shadow {
  position:absolute;
  width:15%;
  height:4%;
  left:69%;
  bottom:9%;
  background:#755e4240;
  border-radius:50%;
  filter:blur(5px);
}
.nuki-bubble {
  position:absolute;
  left:67%;
  top:53%;
  max-width:29%;
  padding:11px 15px;
  border:1px solid #d9dfcc;
  border-radius:13px 13px 13px 2px;
  background:#fffff4f2;
  color:#475943;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
  box-shadow:0 3px 10px #40532d08;
  z-index:4;
  transform:rotate(-2deg);
}
.nuki-bubble span {
  display:block;
  font-size:10px;
  font-weight:500;
  color:#6c7864;
  margin-top:2px;
}
.scene-hint-mobile { display:none; }
.scene-hint {
  font-size:20px;
  color:#294334;
  fill:currentColor;
  font-weight:600;
  pointer-events:none;
  transition:opacity .2s;
}
.window-panel {
  transform-origin:76px 170px;
  transition:transform .3s cubic-bezier(.22,.7,.31,1),opacity .3s;
}
.classroom[data-state="running"] .window-panel {
  transform:translateX(2px) skewY(9deg) scaleX(.33);
  opacity:.8;
}
.classroom[data-state="failed"] .window-panel {
  transform:translateX(2px) skewY(9deg) scaleX(.33);
  opacity:.8;
}
.curtain {
  transform-origin:355px 48px;
}
.wind-trails {
  opacity:0;
  transition:opacity .3s;
  stroke-dasharray:80 300;
  stroke-dashoffset:380;
}
.classroom[data-state="running"] .wind-trails {
  opacity:calc(.2 + var(--progress) * .6);
  animation:wind-pass 1.4s linear infinite;
}
.classroom[data-state="running"] .curtain {
  animation:curtain-sway .7s ease-in-out infinite alternate;
}
.classroom[data-state="running"][data-stage="critical"] .nuki {
  transform:rotate(-7deg) translateY(-2%);
}
.classroom[data-state="saved"] .nuki {
  animation:nuki-hop .65s ease both;
}
.classroom:not([data-state="ready"]) .scene-hint {
  opacity:0;
}
.classroom[data-state="failed"] {
  --progress:1;
}
.play-panel {
  text-align:center;
  padding:19px 20px 17px;
  border-top:1px solid #e5e4d4;
  background:#fffef9;
}
.play-copy {
  min-height:53px;
}
h2 {
  font-size:18px;
  letter-spacing:-.45px;
  margin:0 0 5px;
  line-height:1.35;
}
.play-copy p {
  font-size:12px;
  color:#79806c;
  margin:0;
  line-height:1.6;
}
.hold-button {
  margin:16px auto 0;
  width:min(100%,366px);
  min-height:57px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:1px solid #324e3c;
  border-radius:12px;
  background:#365441;
  color:#fffef3;
  box-shadow:0 4px 0 #243d2d,0 7px 12px #30493013;
  font-size:15px;
  font-weight:700;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  transition:background .12s,box-shadow .12s,transform .12s;
}
.hold-button svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.hold-button>span {
  pointer-events:none;
}
.button-arrow {
  font-size:22px;
  margin-left:12px;
  font-weight:400;
  opacity:.7;
}
.hold-button:disabled {
  cursor:wait;
  opacity:.6;
}
.hold-button:not(:disabled):hover {
  background:#41624b;
}
.hold-button.is-held {
  background:#685182;
  box-shadow:0 1px 0 #4e3b67;
  transform:translateY(3px);
  border-color:#4e3b67;
}
.hold-button.is-critical {
  background:#9d563b;
  border-color:#874629;
  box-shadow:0 1px 0 #73381f;
}
.control-hint {
  font-size:10px;
  color:#63725e;
  line-height:1.7;
  margin-top:13px;
}
.control-hint>span {
  font-size:9px;
  color:#8b9182;
}
.result-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:11px;
  font-size:10px;
  color:#526b4a;
  min-height:29px;
}
.result-actions[hidden] {
  display:flex!important;
  visibility:hidden;
}
.text-button {
  border:0;
  background:transparent;
  color:#73568e;
  padding:6px 9px;
  font-size:11px;
  font-weight:700;
}
.text-button span {
  margin-left:6px;
}
.accessibility-toggle {
  display:block;
  border:0;
  background:none;
  margin:8px auto 0;
  padding:4px 8px;
  color:#737d69;
  font-size:9px;
  text-decoration:underline;
  text-underline-offset:3px;
}
.share-fallback {
  max-width:390px;
  margin:10px auto;
  font-size:12px;
}
.share-fallback textarea {
  font:inherit;
  width:100%;
  margin-top:10px;
  border:1px solid #d9dfcc;
  border-radius:8px;
  padding:9px;
}
.below-game {
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#7d856f;
  font-size:10px;
  padding:4px 3px;
}
.below-game p {
  line-height:1.6;
}
.below-game p span {
  color:#9b86b4;
  margin-right:5px;
}
.below-game a {
  font-weight:700;
  text-decoration:none;
}
footer {
  text-align:center;
  font-size:9px;
  line-height:1.8;
  color:#8b9181;
  padding:19px 0 27px;
}
footer span {
  margin-left:8px;
}
.noscript {
  padding:16px;
  background:#f8e4ca;
  border-radius:12px;
}
@keyframes wind-pass {
  to {
    stroke-dashoffset:0;
  }
}
@keyframes curtain-sway {
  from {
    transform:skewX(calc(var(--wind) * -1deg));
  }
  to {
    transform:skewX(calc(var(--wind) * -10deg));
  }
}
@keyframes nuki-hop {
  0%,100% {
    transform:translateY(0) rotate(0);
  }
  45% {
    transform:translateY(-10%) rotate(-5deg);
  }
}
@media(min-width:1500px) {
  .page-shell {
    max-width:1240px;
  }
  .intro {
    padding-top:40px;
    padding-bottom:30px;
  }
  .site-header {
    height:100px;
  }
}
@media(max-width:720px) {
  .page-shell { padding:0 14px; }
  .site-header { height:54px; }
  .brand img { width:128px; }
  .header-note,.prototype-label,.eyebrow,.intro-copy,.room-tag,.nuki-bubble { display:none; }
  .intro { padding:15px 0 16px; }
  h1 { font-size:28px; letter-spacing:-.9px; line-height:1.1; }
  h1 span { display:block; font-size:18px; letter-spacing:-.3px; margin-top:5px; }
  .game-card { border-radius:15px; }
  .classroom { aspect-ratio:1.45; }
  .room-art {
    position:absolute;
    width:151%;
    max-width:none;
    left:-5%;
    top:1%;
    height:auto;
  }
  .chalkboard {
    left:51%;
    top:16%;
    width:45%;
    height:48%;
    padding:4px;
  }
  .chalkboard-face { padding:5px 10px; }
  .chalkboard-face::before { opacity:.1; }
  .chalk-scores { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  .chalk-label { font-size:12px; line-height:1.2; }
  .chalk-value { gap:4px; }
  .chalk-value strong { font-size:clamp(30px,9cqw,36px); line-height:1; }
  .chalk-unit { font-size:10px; }
  .chalk-record { display:flex; align-items:baseline; justify-content:space-between; gap:5px; padding:0; border:0; }
  .chalk-record .chalk-label { font-size:11px; }
  .chalk-record .chalk-value strong { font-size:20px; letter-spacing:0; }
  .chalk-star { display:none; }
  .freshness-track { height:3px; margin-top:5px; }
  .round-status {
    position:absolute;
    width:1px;
    height:1px;
    min-height:0;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .chalk-stick { height:3px; width:14px; }
  .chalk-stick-yellow { width:10px; right:26%; }
  .nuki { width:23%; left:75%; bottom:1%; }
  .nuki-shadow { left:77%; width:19%; bottom:3%; }
  .wall-clock { transform:translate(620px,40px); }
  .scene-hint-desktop { display:none; }
  .scene-hint-mobile { display:block; }
  .play-panel { display:flex; flex-direction:column; padding:13px 14px 8px; }
  .hold-button { order:0; font-size:14px; margin:0; min-height:56px; width:100%; }
  .control-hint { order:1; font-size:11px; margin-top:6px; }
  .control-hint>span,.control-hint>br { display:none; }
  .play-copy { order:2; min-height:0; padding-top:8px; }
  h2 { font-size:16px; line-height:1.3; margin-bottom:3px; }
  .play-copy p { font-size:12px; line-height:1.45; }
  .result-actions { order:4; margin-top:0; }
  .result-actions[hidden] { display:none!important; }
  .share-fallback { order:5; }
  .accessibility-toggle { order:3; font-size:11px; min-height:44px; padding:6px 8px; margin:0 auto; align-self:center; }
  .below-game { font-size:10px; padding:2px; gap:10px; }
  .below-game p:first-child { max-width:210px; }
  .below-game p:last-child { white-space:nowrap; }
  footer { padding:7px 0 20px; font-size:10px; }
  footer span { display:block; margin:0; }
}
@media(max-width:360px) {
  .page-shell { padding:0 10px; }
  h1 { font-size:26px; }
  h1 span { font-size:17px; }
  .chalkboard-face { padding:4px 7px; }
  .chalk-label { font-size:11px; }
  .chalk-record .chalk-label { font-size:10px; }
  .chalk-record .chalk-value strong { font-size:18px; }
  .chalk-scores { gap:3px; }
  .hold-button { font-size:13px; gap:8px; }
  .control-hint { font-size:10px; }
  .below-game { font-size:9px; }
}
@media(min-width:721px) {
  .nuki {
    left:73%;
    width:24%;
    bottom:3.5%;
  }
  .nuki-shadow {
    left:78%;
    width:14%;
  }
  .nuki-bubble {
    left:51%;
    top:58%;
    max-width:28%;
    border-radius:13px 13px 2px 13px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .classroom[data-state="running"] .curtain {
    transform:skewX(calc(var(--wind) * -8deg));
  }
  .classroom[data-state="running"] .wind-trails {
    stroke-dashoffset:0;
  }
}

/* All paper geometry shares the 1040 x 470 SVG view box. A leaf stays the
   same SVG element while lifting, settling and flying out of the window.
   Continuous flight and pose-preserving handoff are controlled by game.js. */
.paper-stack,
.escaping-papers {
  pointer-events:none;
}
.escaping-papers {
  opacity:1;
}
.paper-reserve,
.paper-launch-frame {
  transform-box:view-box;
  transform-origin:397px 343px;
  transform:translate(0,0) rotate(0deg);
  transition:transform .7s cubic-bezier(.22,.72,.3,1);
}
.paper-table-shadow {
  opacity:1;
  transition:opacity .7s,transform .7s;
  transform-box:view-box;
  transform-origin:397px 353px;
}
.paper-leaf,
.flying-paper,
.paper-surface {
  transform-box:view-box;
  transform-origin:397px 341px;
}
.paper-leaf {
  --leaf-x:0px;
  --leaf-y:0px;
  --leaf-turn:0deg;
  transform:translate(var(--leaf-x),var(--leaf-y)) rotate(var(--leaf-turn));
  transition:transform .6s cubic-bezier(.22,.72,.3,1);
}
.paper-four {
  --leaf-x:1px;
  --leaf-y:5px;
  --leaf-turn:.4deg;
}
.paper-three {
  --leaf-x:-1px;
  --leaf-y:3.5px;
  --leaf-turn:-.5deg;
}
.paper-two {
  --leaf-x:1px;
  --leaf-y:1.5px;
  --leaf-turn:.6deg;
}
.paper-surface {
  filter:url(#worksheet-shadow);
}
.flying-paper {
  opacity:1;
}
#paper-corner {
  transform-box:view-box;
  transform-origin:349px 331px;
  transform:rotate(0deg) skewY(0deg);
  transition:transform .6s cubic-bezier(.22,.72,.3,1);
}
.classroom:is([data-state="running"],[data-state="failed"]) .paper-launch-frame {
  transform:translate(calc(var(--flutter) * -13px),calc(var(--flutter) * -3px)) rotate(calc(var(--flutter) * -3deg));
  transition:none;
}
.classroom:is([data-state="running"],[data-state="failed"]) .paper-reserve {
  transform:translate(calc(var(--flutter) * -3px),0);
  transition:none;
}
.classroom:is([data-state="running"],[data-state="failed"]) .paper-one {
  --leaf-x:calc(var(--flutter) * -9px);
  --leaf-y:calc(var(--flutter) * -9px);
  --leaf-turn:calc(var(--flutter) * -4deg);
  transition:none;
}
.classroom:is([data-state="running"],[data-state="failed"]) .paper-two {
  --leaf-x:calc(1px - var(--flutter) * 5px);
  --leaf-y:calc(1.5px - var(--flutter) * 5px);
  --leaf-turn:calc(.6deg - var(--flutter) * 2deg);
  transition:none;
}
.classroom:is([data-state="running"],[data-state="failed"]) .paper-three {
  --leaf-x:calc(-1px - var(--flutter) * 2px);
  --leaf-y:calc(3.5px - var(--flutter) * 2px);
  --leaf-turn:calc(-.5deg - var(--flutter) * 1deg);
  transition:none;
}
.classroom[data-state="running"]:is([data-stage="flutter"],[data-stage="sliding"],[data-stage="critical"]) #paper-corner {
  animation:worksheet-corner .36s ease-in-out infinite alternate;
}
.classroom[data-state="running"]:is([data-stage="sliding"],[data-stage="critical"]) .paper-one .paper-surface {
  animation:worksheet-ripple .44s ease-in-out infinite alternate;
}
.classroom[data-state="running"][data-stage="critical"] .paper-two .paper-surface {
  animation:worksheet-ripple .36s -.16s ease-in-out infinite alternate;
}
.classroom[data-state="running"][data-stage="critical"] .paper-three .paper-surface {
  animation:worksheet-ripple .52s -.3s ease-in-out infinite alternate;
}
.classroom[data-state="failed"] .paper-reserve {
  opacity:.45;
  transition:opacity .55s;
}
.classroom[data-state="failed"] .paper-table-shadow {
  opacity:.25;
  transform:scaleX(.84);
}
/* WAAPI supplies one continuous flight curve. The CSS result is also the
   no-animation fallback and remains correct when an animation is cancelled. */
.classroom[data-state="failed"] .flying-paper {
  opacity:0;
}
.classroom[data-state="failed"] .paper-surface {
  filter:none;
}
@keyframes worksheet-corner {
  from { transform:rotate(calc(-4deg - var(--flutter) * 13deg)) skewY(-5deg); }
  to { transform:rotate(calc(-9deg - var(--flutter) * 20deg)) skewY(-16deg); }
}
@keyframes worksheet-ripple {
  from { transform:translateY(0) skewY(-.5deg); }
  to { transform:translateY(calc(-1px - var(--flutter) * 1.5px)) skewY(-2.8deg); }
}
@media(prefers-reduced-motion:reduce) {
  .paper-reserve,
  .paper-launch-frame,
  .paper-leaf,
  .paper-surface,
  .paper-table-shadow,
  #paper-corner,
  .flying-paper {
    animation:none!important;
    transition:none!important;
  }
  .classroom[data-state="failed"] .flying-paper {
    opacity:0;
    transform:none;
  }
  .classroom[data-state="running"]:is([data-stage="flutter"],[data-stage="sliding"],[data-stage="critical"]) #paper-corner {
    transform:rotate(-24deg) skewY(-8deg);
  }
}