@import url(/assets/site-nav.css?v=63614f5f8067);
/* Brand theme for the free tools. It overrides the inline tool styles, so the
   games read as part of the site: paper, dark ink and crayon colours. */
:root{
  --ink:#243e36;--paper:#faf7ef;--card:#fffdf8;--line:#dddccf;--muted:#5b6b61;--green:#245447;--orange:#a84625;
  --r1:#C93A45;--r2:#EE8B3A;--r3:#F2C53D;--r4:#2F8553;--r5:#5BB8D6;--r6:#3D5FC4;--r7:#7E52BA;--r8:#B8437C;
  --rainbow-soft:linear-gradient(90deg,#f9e1dc,#fbe9d3,#fbf1cf,#e2efdf,#dcedf3,#e0e5f6,#ebe1f3);
  --bar:68px;
}
html{scroll-padding-top:calc(var(--bar) + 12px)}
body{background:var(--paper);color:var(--ink);padding:0 0 56px;line-height:1.4}
main{max-width:672px;padding:0 16px}
.ribbon{display:none}
.skip{position:fixed;top:12px;left:12px;z-index:99;padding:12px 16px;border-radius:10px;background:#fff;color:var(--ink);font-weight:600}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}

/* Titles and text */
h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.04em;line-height:1.05;color:var(--ink);text-shadow:none;font-size:clamp(40px,7vw,58px);margin:30px 0 12px}
h1::after{display:none}
.lead{color:var(--ink);text-shadow:none;font-size:1.25rem;margin:0 0 6px}
.points-rule{text-align:center;color:var(--muted);font-size:15px;margin:0 0 4px}
section{margin-top:44px}
h2{color:var(--ink);text-shadow:none;font-weight:600;font-size:1.6rem;scroll-margin-top:calc(var(--bar) + 12px)}
h2::before{width:10px;height:26px}
.hint,.label,ol.steps li{color:var(--ink);text-shadow:none}
.hint{font-size:1.1rem}
.mini{border-color:var(--card);box-shadow:0 0 0 1px var(--line)}

/* Sticky play bar: voice, parts of the game and points stay in reach. */
.playbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;min-height:var(--bar);margin:18px -16px 0;padding:10px 16px;background:rgba(250,247,239,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.playbar #sound{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.playbar #sound[aria-pressed="false"]{background:#efeadb;color:var(--muted)}
.jump{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600}
.jump a:hover{background:#efeadb}
.score{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:999px;background:#fff1bf;box-shadow:inset 0 0 0 1px #e9cf75;font-size:17px}
.score::before{content:"★";color:#b97d00;font-size:18px}
.score strong{font-weight:700;white-space:nowrap}

/* Cards and buttons */
.card{background:var(--card);border:1px solid #e3dccb;border-radius:24px;box-shadow:0 1px 0 #ebe6d6,0 18px 40px -26px rgba(36,62,54,.45);color:var(--ink)}
.btn{background:var(--green);color:#fff;text-shadow:none;font-weight:600;box-shadow:0 4px 0 #173a30}
.btn:hover{background:#1d4a3e}
.btn:active{box-shadow:0 1px 0 #173a30}
.btn.quiet{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 #ddd7c5}
.btn.quiet:hover{background:#f6f2e7}
.btn[disabled]{opacity:.55}
.pill{color:var(--ink);background:#fff;font-weight:600;box-shadow:inset 0 0 0 1px var(--line),0 2px 0 #e2ddca}
.pill[aria-pressed="false"]{background:#efeadb;color:var(--muted)}
button:focus-visible,a:focus-visible,.btn:focus-visible,.pill:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
button{min-height:44px}
#audio-status:empty{display:none}
#audio-status{margin:12px 0 0;background:#fff;color:var(--ink);padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
#say{min-height:2.5em}
#stars,.stars{color:var(--ink);overflow-wrap:anywhere}
.hint-pulse{outline:4px solid var(--r3);outline-offset:4px}

/* Quest */
.quest{display:flex;align-items:center;gap:16px;margin-top:16px;padding:14px 14px 14px 18px;border-radius:16px;background:#e6ece2;color:var(--ink);font-size:17px}
.quest span{flex:1}
.quest button{flex-shrink:0;padding:10px 18px}

/* Letter tiles */
.grid button{border-width:3px;box-shadow:0 3px 0 rgba(36,62,54,.16)}
.grid button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px var(--ink),0 4px 0 rgba(36,62,54,.25)}
.grid button:focus-visible,.picker button:focus-visible,.shapes button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.keys{grid-template-columns:repeat(auto-fill,minmax(max(44px,calc((100% - 36px) / 7)),1fr))}
.keys button{min-width:44px;min-height:44px}
.slot{border-color:#cfc8b4;background:#f6f2e7}
/* Number pickers: one row of ten when it fits, otherwise two rows of five. */
.picker{display:grid;grid-template-columns:repeat(5,56px);gap:10px 12px}
@media(min-width:690px){.picker{grid-template-columns:repeat(10,56px);gap:8px}}
.built{background:#f6f2e7}
.built .empty{color:var(--muted)}

/* Drawing modes: one segmented control for one letter, a letter line, or guess. */
.practice-modes{display:flex;gap:4px;width:fit-content;max-width:100%;margin:0 auto 18px;padding:5px;border-radius:999px;background:#efeadb}
.practice-modes button{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:6px 18px 6px 7px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:1.05rem;font-weight:600}
.practice-modes button:hover{color:var(--ink)}
.practice-modes button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 2px 0 #d9d4c3}
.mode-ico{display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:10px;background:#fff;border:2px solid var(--line);font-size:.95rem;font-weight:700;letter-spacing:1px;color:var(--ink)}
#modeTrace .mode-ico{border-color:var(--r1)}
#modeRow .mode-ico{border-color:var(--r4);letter-spacing:0;font-size:.8rem;background:linear-gradient(transparent 70%,#e9a58b 70%,#e9a58b 76%,transparent 76%),#fff}
#modeGuess .mode-ico{border-color:var(--r7)}
.practice-modes [aria-pressed="true"] .mode-ico{background-color:#fff9df}

/* Single letter board: warm paper with a soft grid, never taller than the screen. */
.board{max-width:min(100%,56vh);min-width:260px;margin:0 auto;background-color:#fffef8;background-image:linear-gradient(#efe9da 1px,transparent 1px),linear-gradient(90deg,#efe9da 1px,transparent 1px);box-shadow:inset 0 0 0 1px #e6e0cf}

/* Letter line: model and four slots on ruled lines, like a practice book.
   Each slot is 1.15 times as high as it is wide. The letter then reaches the
   cap line, because the height limit is always smaller than the width limit. */
#row-practice .card{padding:18px}
#row-practice .row-heading{color:var(--ink);font-weight:600;margin-bottom:14px}
#row-practice #letter-row{container-type:inline-size;border:1px solid #e3dccb;border-radius:14px;overflow:hidden;background:#fffef8}
#row-practice .row-canvas{height:auto;aspect-ratio:20/23;border-right:1px dashed #d6d0bf}
#row-practice .row-cell:last-child .row-canvas{border-right:0}
#row-practice .row-cell:first-child .row-canvas{border-left:0}
#row-practice .row-model .row-canvas{border-right:2px solid #d6d0bf}
#row-practice .row-cell-label{min-height:36px;padding:8px 4px 4px;font-size:13px;color:var(--ink)}
#row-practice .row-model .row-cell-label{font-weight:600;color:var(--muted)}
#row-practice .row-clear{margin-bottom:6px;padding:0 10px;font-size:14px;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
#row-practice .row-clear:hover{color:var(--ink)}
#row-practice .complete .row-canvas{outline:3px solid var(--r4);outline-offset:-3px}
#row-practice #row-status{color:var(--ink)}
#row-practice .row-model{text-align:center}

/* Grown-up notes and the next game */
.grownups{margin-top:44px;border-top:1px solid var(--line);padding-top:8px;font-family:system-ui,-apple-system,sans-serif;color:var(--ink)}
.grownups summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;list-style:none}
.grownups summary::-webkit-details-marker{display:none}
.grownups summary::before{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px #b6c0b3;font-size:17px;line-height:1}
.grownups[open] summary::before{content:"−"}
.grownups p{margin:8px 0 0 36px;font-size:15px;line-height:1.6;color:var(--muted);max-width:56ch}
.next-tool{display:flex;align-items:center;gap:14px;margin:28px 0 40px;padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);text-decoration:none;font-size:1.25rem;font-weight:600;transition:border-color .2s,transform .2s}
.next-tool:hover{border-color:#b6c0b3;transform:translateY(-2px)}
.next-tool small{display:block;font:600 12px/1.4 system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.next-tool .ts-icon{width:52px;height:52px;font-size:18px}
.next-arrow{margin-left:auto;font-size:1.4rem;color:var(--orange)}
.site-footer{margin-top:0}

/* Save-progress offer: a quiet note for adults inside the page, never a modal. */
.progress-offer{margin-top:16px;padding:18px 20px;border:1px dashed #cfc6ae;border-radius:20px;background:#f3efe2;color:var(--ink);font-family:var(--sb-sans)}
.progress-offer h3{margin:0;font:600 13px/1.3 var(--sb-sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.progress-offer p{margin:6px 0 0;font-size:16px;line-height:1.5;text-shadow:none}
.progress-offer .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.progress-offer .btn{padding:10px 18px;font-size:15px;box-shadow:0 3px 0 #173a30}
.progress-offer .btn.quiet{box-shadow:inset 0 0 0 1.5px var(--ink)}
.progress-offer [role=status]{font-size:14px;color:var(--orange)}
.progress-offer [role=status]:empty{display:none}
html:is(:lang(ja),:lang(ko)) .progress-offer h3{text-transform:none;letter-spacing:.08em}

@media(max-width:560px){
  .practice-modes{width:100%;border-radius:20px}
  .practice-modes button{flex:1 1 0;flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;border-radius:16px;font-size:.95rem;line-height:1.1}
  /* The model gets its own ruled strip, so four slots share the full width. */
  #row-practice .card{padding:14px 10px}
  #row-practice #letter-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  #row-practice .row-model{grid-column:1/-1;display:flex;align-items:stretch;border-bottom:2px solid #d6d0bf}
  #row-practice .row-model .row-canvas{flex:1;width:auto;aspect-ratio:auto;height:calc(25cqw * 23 / 20);border-right:0}
  #row-practice .row-model .row-cell-label{order:-1;display:grid;place-items:center;min-width:64px;padding:0 8px;border-right:1px dashed #d6d0bf;background:#f6f2e7}
  .jump{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:24px}
}
@media(max-width:480px){
  :root{--bar:60px}
  main{padding:0 12px}
  .playbar{margin:16px -12px 0;padding:8px 12px;gap:6px}
  /* The voice button shows only its speaker icon. Its name still says on or off. */
  .playbar #sound{width:44px;padding:0 0 0 12px;overflow:hidden;word-spacing:60px}
  .jump a{padding:0 10px;font-size:15px}
  .score{padding:0 12px;font-size:16px}
  .quest{flex-direction:column;align-items:stretch;gap:10px}
  .card{border-radius:20px}
  .grownups p{margin-left:0}
}
@media(max-width:400px){
  /* Five word tiles fit on one line at 360px. */
  .tray{gap:8px}
  .tile{width:52px;height:60px;font-size:1.9rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Language typography for the tools. See site.css for the reasons. */
html:lang(de) body{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
html:not(:lang(en)) h1{text-wrap:balance}
html:lang(de) :is(h1,h2){hyphens:manual;-webkit-hyphens:manual}
html:is(:lang(ja),:lang(ko)) body{font-family:var(--sb-round);line-height:1.6}
html:is(:lang(ja),:lang(ko)) h1{font-family:var(--sb-serif);letter-spacing:0;line-height:1.25}
html:lang(ko) h1{font-weight:700}
html:is(:lang(ja),:lang(ko)) :is(.grownups,.next-tool small,.points-rule){font-family:var(--sb-sans)}
html:is(:lang(ja),:lang(ko)) .next-tool small{letter-spacing:.08em}
/* Child text in Japanese puts spaces between phrases, so lines break only there.
   Grown-up text has no spaces and uses phrase detection instead. */
html:lang(ja) body{line-break:strict;word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) :is(.grownups p,.next-tool small,.progress-offer p){word-break:auto-phrase}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
html:is(:lang(ja),:lang(ko)) .actions .btn{font-size:1.08rem;padding-inline:8px}