:root { color-scheme: light; --ink:#172f35; --teal:#065c5b; --muted:#617374; --line:#dce5e0; --paper:#fffef9; --blue:#008cff; --pink:#ff168b; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; color:var(--ink); background:#f3f6f3; }
button, select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,select:focus-visible { outline:3px solid #1987d0; outline-offset:4px; }
button:disabled { cursor:default; opacity:.45; }
[hidden] { display:none!important; }
.wordmark { font-size:15px; letter-spacing:.14em; font-weight:700; color:var(--teal); white-space:nowrap; }
.wordmark span { display:block; font-size:11px; font-weight:400; letter-spacing:.04em; margin-top:5px; color:var(--muted); }
.welcome { min-height:100vh; padding:36px 5%; background:#fbfcf8; position:relative; overflow:hidden; }
.welcome-content { position:relative; z-index:1; margin:clamp(65px,10vh,130px) auto 65px; max-width:1050px; }
.eyebrow { font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 14px; }
h1 { font-family:Georgia,serif; font-size:clamp(44px,6.5vw,88px); font-weight:400; line-height:1.06; letter-spacing:-.045em; margin:20px 0 24px; }
.welcome-description { color:#526b6d; font-size:17px; line-height:1.7; margin:0 0 30px; }
.primary,.secondary,.quiet-button { border-radius:7px; min-height:44px; padding:12px 16px; border:1px solid transparent; font-size:13px; line-height:1.35; }
.primary { background:var(--teal); color:white; }
.primary:hover { background:#034744; }
.secondary { background:white; color:var(--ink); border-color:var(--line); }
.secondary:hover,.quiet-button:hover { background:#ecf2ef; }
.quiet-button { background:transparent; color:#405c60; }
.big-button { font-size:15px; padding:17px 24px; }
.big-button span { margin-left:22px; }
.lesson-choices { display:flex;gap:12px;flex-wrap:wrap; }
.lesson-number { margin:0 0 14px;font-size:17px;font-weight:600;color:var(--ink); }
.color-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.color-dot.pink { background:var(--pink); }
.color-dot.blue { background:var(--blue); }
.cursor-legend { display:flex; gap:22px; align-items:center; color:#4e686b; font-size:12px; margin-top:24px; }
.cursor-legend span { display:flex; gap:7px; align-items:center; }
.prototype-note { font-size:11px; color:#6b7d7c; margin-top:45px; }
.online-welcome .welcome-content { max-width:900px; }
.join-form { display:grid;gap:12px;max-width:360px;margin:28px 0; }
.join-form label,.password-sharing label { font-size:13px; }
.join-form input { min-height:52px;font:400 19px Arial,sans-serif;letter-spacing:.04em;padding:12px 14px;border:1px solid #b9ccc3;border-radius:7px;background:white;color:var(--ink);width:100%; }
.join-form input:focus-visible { outline:3px solid #1987d0;outline-offset:3px; }
.join-form .form-error { color:#9e3435;font-size:13px;line-height:1.6;min-height:22px;margin:0; }
.teacher-sign-in { display:inline-block;text-decoration:none; }
.recent-rooms { margin-top:40px;max-width:600px; }
.recent-rooms h2 { font-size:16px;margin:0 0 12px; }
.room-row { display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:14px 0;font-size:13px; }
.room-row a { color:var(--teal);font-weight:600; }
.password-sharing { border-top:1px solid var(--line);padding-top:16px;margin-top:18px; }
.password-sharing input { width:100%;font:400 14px/1.5 monospace;margin-top:8px;border:1px solid var(--line);background:#f6f8f3;border-radius:5px;padding:9px 7px;color:var(--ink); }
.sharing .studio-link { display:block;font-size:12px; }
.welcome-alphabet { position:absolute; right:2%; top:24%; width:36%; display:grid; grid-template-columns:1fr 1fr; gap:16px; transform:rotate(-9deg); }
.welcome-alphabet span { border:1px solid #d5e3d8; background:#f0f5ea; border-radius:12px; aspect-ratio:1; display:grid; place-items:center; font:400 clamp(30px,7vw,100px)/1 Verdana,sans-serif; color:#5d7a64; }
.welcome-alphabet span:nth-child(2) { background:#f7efd0; }
.welcome-alphabet span:nth-child(3) { background:#eff7f8; }
.app-header { height:78px; background:white; border-bottom:1px solid var(--line); padding:0 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header-center { display:flex; align-items:center; gap:8px; color:#576d70; font-size:12px; }
.header-center .color-dot:nth-of-type(2) { margin-left:14px; }
.connection { font-size:12px; color:#4b6467; white-space:nowrap; }
.connection::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#4f9375; margin-right:7px; }
.connection.disconnected::before { background:#b96f2a; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 238px; gap:24px; padding:20px 24px 24px; align-items:start; }
.activity-column { min-width:0; }
.activity-meta { display:flex; justify-content:space-between; gap:12px; color:#526a6c; font-size:12px; margin:0 0 12px; }
.activity-meta span:last-child { font-size:11px; color:#748583; }
#board-shell { display:flex; align-items:center; justify-content:center; min-width:0; }
#board { background:var(--paper); container-type:inline-size; position:relative; aspect-ratio:1200/850; border:1px solid #d8e1d9; border-radius:10px; box-shadow:0 3px 15px #1b403006; overflow:hidden; touch-action:none; user-select:none; flex:none; width:100%; cursor:none; }
#board * { cursor:none!important; }
#scene { position:absolute; inset:0; }
.activity-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#667b7b; font-size:11px; line-height:1.5; }
.activity-footer span:last-child { white-space:nowrap; }
#teacher-panel { background:#fff; border:1px solid var(--line); border-radius:10px; max-height:calc(100vh - 118px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.panel-section { padding:20px 17px; }
.panel-section+.panel-section { border-top:1px solid var(--line); }
#lesson-nav { display:flex; flex-direction:column; gap:5px; }
#lesson-nav button { border:0; border-radius:6px; background:transparent; padding:12px 9px; font-size:13px; text-align:left; display:flex; gap:11px; align-items:center; color:#597071; min-height:44px; }
#lesson-nav button span { font-size:10px; width:16px; color:#8a9a99; }
#lesson-nav button.active { color:var(--teal); background:#eaf3ee; font-weight:600; }
#lesson-nav button.active span { color:var(--teal); }
#lesson-nav button:hover { background:#f0f5f1; }
.step-controls h2 { font-size:15px; font-weight:600; line-height:1.5; margin:0 0 10px; }
.step-controls p { font-size:12px; color:#617778; line-height:1.65; margin:0 0 17px; }
.step-controls button { width:100%; text-align:left; margin-top:9px; }
.step-controls select { width:100%; font-size:12px; padding:9px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); margin:5px 0 4px; }
.step-controls label { font-size:11px; color:#617778; }
.step-controls .small-count { margin:14px 0 0; font-size:11px; }
.sharing button { width:100%; text-align:left; }
.sharing a { display:block; text-decoration:none; text-align:left; }
.sharing>label { display:block;margin:13px 0 7px;font-size:12px; }
.sharing>input,.sharing>textarea { width:100%;border:1px solid var(--line);border-radius:5px;padding:9px 7px;background:#f6f8f3;color:var(--ink);font:400 12px/1.6 Arial,sans-serif; }
.sharing>textarea { resize:vertical;min-height:140px; }
.small-muted { font-size:11px; color:#667b7b; line-height:1.5; margin:9px 0; }
.local-note { font-size:10px; color:#788887; line-height:1.6; margin:14px 0 0; }
body.student { background:#f9faf6; }
body.student .workspace { grid-template-columns:minmax(0,1fr); padding:16px 24px; }
body.student .app-header { height:60px; padding:0 24px; }
body.student .wordmark { font-size:11px; }
body.student .wordmark span { display:none; }
body.student .header-center { font-size:11px; }
body.student .activity-meta { display:none; }
body.student #board { border-color:transparent; box-shadow:none; }
body.student .activity-footer { display:none; }

/* All activity coordinates use one 1200 × 850 surface so both windows align. */
.alphabet-strip { position:absolute; left:2.4%; width:95.2%; height:10%; top:45%; display:grid; grid-template-columns:repeat(26,minmax(0,1fr)); align-items:center; background:transparent; }
.alphabet-strip.top-strip { top:2.3%; height:9%; }
.strip-letter { font:400 2.9cqw/1 Verdana,sans-serif; text-align:center; color:#22343b; display:grid; place-items:center; height:100%; }
.yellow-mat { position:absolute; left:4%; top:15%; width:92%; height:62%; background:#f7e780; border-radius:4px; }
.positioned { position:absolute; transform:translate(-50%,-50%); }
.mat-slot { width:4cqw; height:4cqw; display:grid; place-items:center; padding:0; background:transparent; border:0; font:400 3cqw/1 Verdana,sans-serif; color:#746b3b; }
.mat-slot.matched { color:#253239; -webkit-text-stroke:0; }
.piece { display:grid; place-items:center; padding:0; background:#fffefa; border:1px solid #c9d6cc; color:#1c3037; border-radius:5px; box-shadow:0 3px 0 #d9dfd4; font:400 3.6cqw/1 Verdana,sans-serif; touch-action:none; }
.letter-piece,.mat-placed-piece { width:3.666667cqw; height:3.666667cqw; font-size:2.65cqw; box-shadow:0 1px 0 #d9dfd4; }
.mat-placed-piece { pointer-events:none; }
.piece.is-dragging,.piece.remote-dragging { opacity:.18; }
.piece.picked { outline:3px solid var(--blue); outline-offset:3px; }
.word-target { position:absolute; transform:translate(-50%,-50%); width:17%; height:17%; background:#fff; border:1.5px solid #c9d5c9; box-shadow:0 3px 0 #e4e8dd; border-radius:7px; display:grid; place-items:center; font:400 4.5cqw/1 Verdana,sans-serif; color:#243740; }
.word-target.matched { background:#eff5eb; border-color:#a9bea6; }
.word-target .placed-word { width:80%; height:66%; background:#fff; border:1px solid #b8c9b6; border-radius:4px; display:grid; place-items:center; font-size:3.7cqw; }
.word-piece { width:13%; height:11%; font-size:3.7cqw; }
.reading-stack { position:absolute; width:9.5%; height:15%; transform:translate(-50%,-50%); }
.stack-base { position:absolute; inset:6px 4px -6px -4px; background:#e9eee2; border:1px solid #c8d3c2; border-radius:6px; font:400 5.8cqw/1 Verdana,sans-serif; display:grid; place-items:center; color:#495a4c; }
.reading-source { position:absolute; inset:0; width:100%; height:100%; font-size:5.8cqw; }
.reading-card { width:9.5%; height:15%; font-size:5.8cqw; }
.sound-guides { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
.sound-guides .dot { fill:#2d4247; }
.sound-guides .arrow { stroke:#2d4247; stroke-width:6px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.read-word { position:absolute; transform:translate(-50%,-50%); display:flex; justify-content:center; font:400 8.3cqw/1 Verdana,sans-serif; color:#1b3038; }
.read-word span { display:inline-block; padding:0 .18cqw; text-align:center; }
.build-word { font-size:10.8cqw; }
.build-word span { padding:0 .18cqw; }
.build-word .prefix { color:#1b3038; }
.ink-palette { position:absolute;top:5.3%;left:50%;transform:translateX(-50%);display:flex;gap:1.7cqw;z-index:12; }
.ink-color { width:6.5cqw;height:7.4cqw;min-width:43px;min-height:49px;padding:.7cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;background:transparent;border:2px solid transparent;border-radius:8px;color:var(--ink); }
.ink-color[aria-pressed="true"] { border-color:#304c55;background:#eef3ec; }
.ink-swatch { display:block;width:2.5cqw;height:2.5cqw;min-width:19px;min-height:19px;border-radius:50%; }
.ink-name { font:400 max(11px,1.4cqw)/1 Arial,sans-serif; }
.writing-panel { position:absolute;background:#fffefa;border:1px solid #dbe0da;border-radius:4px; }
.writing-panel svg { display:block;width:100%;height:100%;pointer-events:none;overflow:visible; }
.writing-guide { stroke:#c9cfca;stroke-width:1.5;vector-effect:non-scaling-stroke; }
.writing-guide.middle-guide { stroke:#d1d5d1;stroke-dasharray:8 7; }
.writing-guide.descender-guide { stroke:#cdd2cd;stroke-dasharray:5 6; }
.letter-model-stroke { fill:none;stroke:#26373d;stroke-width:7;stroke-linecap:round;stroke-linejoin:round; }
.letter-trace-stroke { fill:none;stroke:#8a9693;stroke-width:6;stroke-dasharray:1 11;stroke-linecap:round;stroke-linejoin:round; }
.letter-trace-dot { fill:#8a9693; }
.formation-number { font:400 22px Arial,sans-serif;fill:#26373d; }
.formation-start { fill:#26373d; }
.formation-direction { stroke:#63716d;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round; }
.writing-ink-layer { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10; }
.handwriting-stroke { fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round; }
.drag-ghost { position:absolute; transform:translate(-50%,-50%); z-index:20; width:3.666667cqw; height:3.666667cqw; background:#fffefb; color:#1c3037; border:2px solid var(--drag-color,#008cff); border-radius:5px; display:grid; place-items:center; font:400 2.65cqw/1 Verdana,sans-serif; box-shadow:0 5px 14px #1a3e2920; pointer-events:none; }
.drag-ghost.word-ghost { width:13%; height:11%; font-size:3.7cqw; }
.drag-ghost.reading-ghost { width:9.5%; height:15%; font-size:5.8cqw; }
.shared-cursor { position:absolute; z-index:40; pointer-events:none; width:25px; height:32px; color:var(--cursor-color); }
.shared-cursor svg { display:block; width:25px; height:32px; overflow:visible; filter:drop-shadow(0 1px 1px #21394244); }
.shared-cursor span { position:absolute; top:24px; left:15px; font:600 10px/1 Arial,sans-serif; padding:4px 6px; color:#fff; background:var(--cursor-color); border-radius:4px; white-space:nowrap; text-shadow:0 1px 1px #25404b70; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; background:#183e3c; color:#fff; padding:13px 20px; border-radius:8px; font-size:13px; box-shadow:0 4px 20px #15383222; max-width:90%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) {
  .workspace { grid-template-columns:minmax(0,1fr) 210px; gap:12px; padding:14px; }
  .panel-section { padding:16px 12px; }
  .app-header { padding:0 18px; }
  .header-center { display:none; }
  .activity-meta span:last-child { display:none; }
  .welcome-alphabet { opacity:.35; top:35%; right:-10%; }
  .welcome-content { margin-left:2%; }
}
@media (max-width:650px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  #teacher-panel { display:grid; grid-template-columns:1fr 1fr; max-height:none; }
  .panel-section+.panel-section { border-top:0; border-left:1px solid var(--line); }
  .sharing { grid-column:1/-1; border-left:0!important; border-top:1px solid var(--line)!important; }
  .welcome { padding:24px; }
  .welcome-alphabet { display:none; }
  .welcome-content { margin-top:75px; }
  .app-header { height:66px; gap:8px; }
  .wordmark { font-size:12px; }
  .connection { font-size:10px; }
  .activity-footer { flex-direction:column; gap:4px; }
  body.student .workspace { padding:8px; }
  body.student .app-header { padding:0 14px; }
}
/* The family entrance stays separate from the shared activity canvas. */
.family-hub{min-height:100svh;background:#f7f8f5;color:#183e3a;padding:42px clamp(24px,7vw,100px) 24px;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column}
.hub-brand{font-size:17px;font-weight:700;letter-spacing:.14em}
.hub-brand span{display:block;margin-top:8px;font-size:12px;font-weight:400;letter-spacing:.02em;color:#63726e}
.hub-content{width:min(100%,620px);margin:70px auto 50px}
.hub-eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#63726e}
.hub-content h1{font-family:Arial,Helvetica,sans-serif;margin:0 0 20px;font-size:clamp(38px,6vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.035em;color:#183e3a}
.hub-description{font-size:18px;line-height:1.65;color:#4c605a;margin:0 0 30px}
.hub-pin-form{max-width:420px;margin:28px 0 36px;display:grid;gap:12px}
.hub-pin-form label{font-size:16px;font-weight:600}
.hub-pin-form input{box-sizing:border-box;width:100%;height:58px;border:1px solid #aabbb1;border-radius:8px;background:white;color:#183e3a;font-size:25px;padding:12px 16px;letter-spacing:.14em}
.hub-primary{min-height:56px;border:0;border-radius:8px;background:#1c5148;color:#fff;padding:16px 22px;font-size:17px;cursor:pointer;text-align:center;font-weight:600}
.hub-primary:disabled,.hub-lesson:disabled{opacity:.5;cursor:wait}
.hub-choices{display:grid;gap:18px;margin:28px 0}
.hub-lesson{width:100%;min-height:98px;border:1px solid #b5c5bc;border-radius:10px;background:#fff;color:#183e3a;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:23px;font-weight:500;cursor:pointer;text-align:left}
.hub-lesson:hover{background:#eef3ee;border-color:#1c5148}
.family-hub :focus-visible{outline:3px solid #008cff;outline-offset:4px}
.hub-small{font-size:14px;line-height:1.6;color:#63726e;margin:0 0 12px}
.hub-back{display:inline-block;background:none;border:0;padding:10px 0;color:#385f52;font-size:15px;text-decoration:underline;cursor:pointer}
.hub-footer{margin-top:auto;text-align:center;font-size:13px;color:#63726e;padding-top:20px}
.hub-footer a{color:inherit}
.hub-error{font-size:16px;line-height:1.5;color:#9d2634;background:#fff0ef;padding:16px;border-radius:7px}
.hub-note{font-size:16px;line-height:1.5;background:#e9f1e8;padding:16px;border-radius:7px}
.hub-address{display:grid;gap:8px;border:1px solid #cbd8ce;border-radius:8px;padding:20px;background:#fff}
.hub-address span{font-size:13px;color:#63726e}.hub-address a{font-size:20px;color:#183e3a;overflow-wrap:anywhere}
.hub-address button{justify-self:start;border:0;background:none;color:#385f52;text-decoration:underline;padding:6px 0;font-size:14px;cursor:pointer}
@media(max-width:600px){.family-hub{padding:28px 22px 22px}.hub-content{margin:50px auto 36px}.hub-lesson{font-size:21px;padding:22px;min-height:90px}}