/* =========================================================
   Differ worksheet (SVG from js/sheet-renderer.mjs)
   Shared by the web creator and the home page "Try it" teaser.
   ========================================================= */

@font-face {
  font-family: "DifferOriginal";
  src: url("../assets/fonts/DifferOriginal2026.woff2") format("woff2"),
       url("../assets/fonts/DifferOriginal2026.woff") format("woff");
  font-display: block;
}

.ws-sheet {
  display: block; width: 100%; height: auto;
  aspect-ratio: 620 / 877;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 30px 60px -28px rgba(78,58,30,.5);
}
.ws-sheet text { font-family: "DifferOriginal"; fill: #000; white-space: pre; }
.ws-sheet .mark { font-family: "Gochi Hand", cursive; fill: #333; }
.ws-sheet .note { font-family: "Lexend", sans-serif; fill: var(--ink-3); }
.ws-sheet .rule, .ws-sheet .margin { shape-rendering: geometricPrecision; }

/* write-in animation for freshly drawn ink */
.ws-sheet .fresh { animation: write .45s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.ws-sheet .hl { fill: var(--yellow); opacity: 0; transition: opacity .25s; }
.ws-sheet .hl.on { opacity: .28; }
.ws-sheet .hl.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 30% { opacity: .5; } 100% { opacity: 0; } }
@keyframes write {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.reduced .ws-sheet .fresh { animation: none; }

/* small ruled example strips (exampleStrip) used on answers */
.ex { display: block; background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .15); }
.ex__rules line { stroke: #00AEEF; stroke-width: .7; }
.ex text { font-family: "DifferOriginal"; fill: var(--ink); white-space: pre; }
.ex text.acc { fill: var(--accent); }