:root {
  color-scheme: light;
  --paper: #f4f1e8;
  --ink: #22231d;
  --muted: #67665a;
  --line: #d7d1c3;
  --red: #b53c2c;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.shell { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) 44px; }
.masthead { display: flex; justify-content: space-between; align-items: center; min-height: 80px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; gap: 10px; align-items: center; font-weight: 750; font-size: 15px; }
.layout { display: grid; grid-template-columns: minmax(225px, .75fr) minmax(0, 1.45fr); gap: clamp(30px, 6vw, 92px); align-items: start; margin-top: clamp(30px, 7vh, 82px); }
.intro { padding-top: clamp(14px, 5vh, 60px); }
.eyebrow { display: flex; gap: 9px; align-items: center; color: var(--red); font-size: 14px; font-weight: 750; margin: 0 0 20px; }
.eyebrow span { width: 8px; height: 8px; background: currentColor; }
h1 { margin: 0; font-size: clamp(40px, 5.25vw, 78px); font-weight: 900; letter-spacing: -.06em; line-height: 1.1; }
h1 span { color: var(--red); white-space: nowrap; }
.intro-copy { margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.55vw, 19px); line-height: 1.75; }
.board { padding: 15px; background: #fbf9f1; border: 1px solid #aaa398; border-radius: 13px; box-shadow: 0 5px 0 #e1dbcf; }
.board-top, .board-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-top { padding: 0 2px 12px; }
h2 { margin: 0; font-size: 15px; }
.hint { font-size: 12px; color: var(--muted); }
.paper { position: relative; overflow: hidden; background: #fffdf7 radial-gradient(#dcd6c8 1px, transparent 1px) center / 19px 19px; border: 1px solid #d8d2c5; border-radius: 6px; }
#pad { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; cursor: crosshair; user-select: none; }
.placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: #777365; font-size: 13px; pointer-events: none; }
.board-bottom { padding-top: 13px; }
button { min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 5px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
button span { margin-left: 4px; }
.secondary { color: var(--ink); background: transparent; border-color: var(--line); }
.secondary span { margin: 0 4px 0 0; }
.secondary:hover:enabled { background: var(--paper); }
.primary { margin-left: auto; min-width: 93px; background: var(--red); color: white; }
.primary:hover:enabled { background: #973124; }
button:disabled { opacity: .54; cursor: default; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 710px) {
  .shell { padding-inline: 17px; }
  .masthead { min-height: 59px; }
  .layout { display: flex; flex-direction: column; align-items: stretch; gap: 15px; margin-top: 23px; }
  .intro { display: contents; }
  .eyebrow { margin: 0; font-size: 12px; }
  h1 { margin-top: -7px; font-size: clamp(35px, 9.4vw, 60px); }
  .intro-copy { margin: -4px 0 0; font-size: 15px; }
  .board { padding: 10px; }
}
@media (min-width: 711px) and (min-height: 560px) {
  .board { width: min(100%, calc((100svh - 245px) * 4 / 3 + 32px)); }
}

#result {
  width: min(520px, calc(100% - 30px));
  max-height: calc(100dvh - 30px);
  padding: clamp(16px, 4vw, 30px);
  color: var(--ink);
  background: #fbf9f1;
  border: 1px solid #aaa398;
  border-radius: 13px;
}
#result::backdrop { background: #22231d75; }
#verdict { font-size: clamp(24px, 6vw, 38px); line-height: 1.15; color: var(--red); }
.reveal-copy { margin: 10px 0 16px; color: var(--muted); }
.demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.demo { margin: 0; padding: 10px 6px; text-align: center; border: 1px solid var(--line); border-radius: 6px; }
.demo figcaption { font-size: 14px; font-weight: 750; }
.demo p { margin: 0; font-size: 12px; color: var(--muted); }
.demo svg { display: block; width: 100%; max-width: 175px; margin: 0 auto; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.demo .outline { stroke: var(--line); stroke-dasharray: 3 6; }
.demo .trace { stroke: var(--red); stroke-dasharray: 1; stroke-dashoffset: 1; }
.loop .trace { stroke: #465f70; }
.playing .left { animation: draw .65s linear forwards; }
.playing .fold { animation: draw 1.3s .9s linear forwards; }
.playing .bottom { animation: draw .65s 2.45s linear forwards; }
.playing .around { animation: draw 3.1s linear forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.result-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .playing .trace { animation: none; stroke-dashoffset: 0; }
}