:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #23354d;
  background: #f8fafc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible { outline: 3px solid #0a88ed; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .38; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.app-shell { max-width: 600px; margin:0 auto; padding: 22px 20px max(25px, env(safe-area-inset-bottom)); }
.masthead { display:flex; align-items:center; gap:13px; margin-bottom:23px; }
.brand-mark { width:54px; height:54px; flex:none; border-radius:17px; background:linear-gradient(135deg,#228cf2,#6178ee); color:white; display:flex; align-items:center; justify-content:center; gap:1px; box-shadow:0 5px 13px #236fda20; transform:rotate(-3deg); }
.brand-mark span:first-child { font-family:Georgia, serif; font-weight:700; font-size:30px; transform:translateY(-1px) rotate(-6deg); }
.brand-mark span:last-child { font-family:Georgia, serif; font-weight:700; font-style:italic; font-size:24px; transform:translateY(6px) rotate(7deg); }
.brand-copy h1 { font-size:23px; letter-spacing:-.9px; margin:0 0 3px; font-weight:760; }
.brand-copy p { margin:0; color:#7b8aa0; font-size:12.5px; }
.mode-switch { background:#e8edf5; display:grid; grid-template-columns: 1fr 1fr 1.15fr; gap:4px; border-radius:17px; padding:4px; margin-bottom:18px; }
.mode { border:0; min-height:53px; border-radius:13px; background:transparent; padding:7px 3px; color:#687b94; font-size:13px; font-weight:650; line-height:1.25; }
.mode span { display:block; font-size:11px; font-weight:480; opacity:.8; margin-top:2px; }
.mode.active { color:#137bd8; background:white; box-shadow:0 2px 8px #2f486020; }
.lesson-card { border-radius:23px; background:white; border:1px solid #e4eaf3; box-shadow:0 7px 28px #2b4c7610; padding:16px; }
.lesson-top { display:flex; gap:12px; align-items:stretch; justify-content:space-between; margin:0 0 14px; }
.target-picker { padding:4px 5px; display:flex; align-items:center; gap:10px; text-align:left; background:transparent; border:0; min-width:0; border-radius:10px; }
.target-picker:hover .picker-icon { background:#e7f1fc; }
.target-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.micro-label { font-size:10px; font-weight:800; color:#8da0b4; letter-spacing:1px; }
.target-symbol { font-size:47px; line-height:1.08; font-weight:750; color:#293b56; letter-spacing:-2px; margin-top:0; }
.example { font-size:12px; color:#8795a9; margin-top:1px; overflow-wrap:anywhere; }
.picker-icon { align-self:center; color:#95a5b8; background:#f2f6fb; height:32px; width:32px; display:grid; place-items:center; border-radius:10px; }
.picker-icon .icon { width:17px; height:17px; }
.sound-button { border:1px solid #dceafa; background:#f0f7ff; color:#1683dc; border-radius:17px; min-width:103px; align-self:center; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:5px; padding:12px 11px; font-size:12px; font-weight:700; }
.sound-button .icon { width:27px; height:27px; }
.sound-button:hover { background:#e4f1ff; }
.sound-button.speaking { background:#d7edff; }
.writing-stage { position:relative; height:clamp(310px, 46dvh, 470px); border-radius:17px; overflow:hidden; background: #fbfdff; border:2px dashed #dce5f0; }
.guide-svg, #drawCanvas { position:absolute; width:100%; height:100%; top:0; left:0; }
.guide-svg { pointer-events:none; }
#drawCanvas { touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; }
.school-line { stroke:#deebfa; stroke-width:1.1; stroke-dasharray:5 8; }
.school-line.baseline { stroke:#ccdcf1; stroke-dasharray:none; stroke-width:1.3; }
.guide-stroke { fill:none; stroke:#b2c5db; stroke-width:4.4; stroke-linecap:round; stroke-linejoin:round; opacity:.78; }
.demo-stroke { fill:none; stroke:#208af0; stroke-width:5.2; stroke-linecap:round; stroke-linejoin:round; }
.writing-stage.no-guide .guide-stroke, .writing-stage.no-guide .school-line { opacity:0; }
.stage-label { position:absolute; left:50%; top:12px; transform:translateX(-50%); pointer-events:none; display:flex; justify-content:center; align-items:center; gap:7px; white-space:nowrap; font-size:11.5px; color:#9aacc0; background:#fbfdffdc; padding:6px 11px; border-radius:100px; }
.stage-dot { width:6px; height:6px; border-radius:50%; background:#8bbdf0; }
.tools-row { margin:14px 2px 1px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.guide-toggle,.tool-button { display:flex; align-items:center; gap:9px; border:0; background:none; border-radius:12px; padding:6px 7px; font-size:13px; font-weight:600; }
.guide-toggle { color:#657991; }
.tool-button { color:#167fe0; }
.tool-button .icon { width:17px; height:17px; }
.toggle-track { width:38px; height:23px; border-radius:100px; background:#a7b3c3; padding:3px; transition:background .2s; flex-shrink:0; }
.toggle-knob { width:17px; height:17px; border-radius:100px; background:white; box-shadow:0 1px 3px #25384b30; display:block; transition:transform .2s; }
.guide-toggle[aria-checked="true"] .toggle-track { background:#258af0; }
.guide-toggle[aria-checked="true"] .toggle-knob { transform:translateX(15px); }
.action-row { display:flex; gap:10px; margin:17px 2px 0; }
.nav-arrow { width:57px; flex-shrink:0; background:white; border:1px solid #dce5f0; height:54px; border-radius:15px; display:grid; place-items:center; color:#4c6787; }
.nav-arrow.next { background:#248bf0; border-color:#248bf0; color:white; box-shadow:0 6px 14px #2585e634; }
.nav-arrow:hover { filter:brightness(.97); }
.action-button { background:white; border:1px solid #dce5f0; border-radius:15px; display:flex; align-items:center; justify-content:center; gap:7px; flex:1; min-width:0; padding:9px 3px; font-size:13px; font-weight:630; color:#576e89; }
.action-button .icon { width:18px; height:18px; }
.lesson-progress { margin:13px 0 3px; text-align:center; font-size:12px; font-weight:650; color:#8ba0b7; }
.help-note { text-align:center; margin:17px 0 0; color:#9bacc0; font-size:11.5px; }
.picker-dialog { width:min(550px, calc(100% - 24px)); max-height:min(85dvh, 820px); border:1px solid #dce5ef; border-radius:24px; padding:22px; box-shadow:0 26px 60px #172e4f40; background:#fff; color:#293b56; }
.picker-dialog::backdrop { background:#0a284b86; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:19px; }
.dialog-head h2 { font-size:22px; margin:0 0 4px; }
.dialog-head p { margin:0; font-size:12.5px; color:#7a8ca2; }
.close-button { background:#f0f4f9; border:0; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; }
.letter-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.letter-tile { min-height:61px; padding:5px 2px; border:1px solid #e0e8f0; border-radius:12px; background:#f8fafc; font-size:23px; font-weight:650; }
.letter-grid.pairs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.letter-grid.pairs .letter-tile { font-size:21px; }
.letter-tile.selected { color:#0d77d3; background:#eaf5ff; border-color:#86bdfa; }
.letter-tile:hover { background:#edf5ff; }
.toast { position:fixed; z-index:100; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translate(-50%,20px); pointer-events:none; opacity:0; transition:opacity .2s,transform .2s; background:#233b59; color:#fff; padding:11px 17px; border-radius:14px; font-size:12px; font-weight:600; box-shadow:0 7px 24px #18385930; max-width:min(90%,410px); text-align:center; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:370px) {
  .app-shell { padding:16px 12px 25px; }
  .brand-copy h1 { font-size:21px; }
  .brand-copy p { font-size:11px; }
  .mode { font-size:12px; }
  .lesson-card { padding:11px; }
  .writing-stage { height:330px; }
  .action-row { gap:6px; }
  .nav-arrow { width:47px; }
  .action-button { font-size:12px; gap:4px; }
  .target-symbol { font-size:42px; }
}
@media (min-width:760px) {
  .app-shell { padding-top:35px; }
  .writing-stage { height:460px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; scroll-behavior:auto !important; }
}