@font-face{font-family:Fredoka;src:url('assets/fredoka.ttf')}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;color:#10477a;font-family:Fredoka,system-ui,sans-serif}body{background:radial-gradient(ellipse at 50% 0,#c6f8ff 0,#4ec7f7 38%,#078be2 100%)}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:4px solid #ffbf00;outline-offset:4px}button{border:0}h1,h2,p{margin:0}button svg,a svg{width:23px;height:23px;flex:none}svg{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}#app{height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px;max-width:1600px;margin:auto;min-height:0}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.brand{font-weight:650;color:white;font-size:20px;letter-spacing:.5px;text-shadow:0 2px 0 #0068b4}.top-controls{display:flex;gap:8px}.icon,.pill,.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:46px;border-radius:16px;font-weight:600;padding:10px 18px;box-shadow:0 4px 0 #075fa866;border:2px solid #ffffff80;background:#fff}.icon{width:46px;padding:9px}.primary{background:linear-gradient(#ffed50,#ffcd08);color:#16477b;border-color:#fff695;box-shadow:0 5px 0 #d89900}.secondary{background:#087ddd;color:white;border-color:#60caff;box-shadow:0 5px 0 #075fa8}.pill{box-shadow:none;border:2px solid #d8e9f4;background:#f6fbff;padding:7px 14px;font-size:15px}.icon:hover,.primary:hover,.secondary:hover,.mode:hover,.level:hover{filter:brightness(1.04);translate:0 -1px}.home{min-height:0;flex:1;display:grid;grid-template-columns:1fr .75fr;grid-template-rows:minmax(0,1fr) auto auto;gap:18px 28px;padding:0 clamp(0px,3vw,50px)}.hero-copy{align-self:center;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#ffffffc9;padding:8px 16px;border-radius:99px;font-size:16px;margin-bottom:16px}.title{font-size:clamp(50px,7.1vw,104px);line-height:.95;color:#fff23f;letter-spacing:-2px;-webkit-text-stroke:2px #056abe;paint-order:stroke fill;text-shadow:0 5px 0 #e6a300,0 9px 0 #075ac5,0 13px 0 #004997,0 16px 15px #006bb280;font-weight:700}.title span{display:block;color:white;font-size:.85em;margin-top:12px}.tagline{font-size:clamp(17px,2.1vw,25px);max-width:560px;line-height:1.4;margin-top:28px}.hero-art{min-height:0;display:flex;align-items:center;justify-content:center}.hero-art img{object-fit:contain;width:100%;height:100%;max-height:40dvh;filter:drop-shadow(0 15px 12px #0068b455)}.levels{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.level{text-align:left;background:#fff;border:3px solid #ffffff80;border-radius:23px;padding:15px 18px;box-shadow:0 6px 0 #0470bb55;display:grid;grid-template-columns:48px 1fr;gap:5px 12px;align-items:center}.level b{font-size:21px}.level small{font-size:15px;line-height:1.3}.level .number{grid-row:span 2;background:var(--c);width:46px;height:46px;display:grid;place-items:center;border-radius:16px;color:white;font-size:30px;font-weight:650;box-shadow:inset 0 3px 0 #fff6}.level.active{border-color:#fff353;background:#fffee9;box-shadow:0 6px 0 #daa707}.modes{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}.mode{border:3px solid #fff8;border-radius:24px;padding:17px 22px;text-align:left;display:flex;gap:17px;align-items:center;color:white;box-shadow:0 6px 0 #075daa80;background:linear-gradient(125deg,#077edc,#06b5e4)}.mode.challenge{background:linear-gradient(125deg,#8635d2,#b650e8)}.mode>svg{width:43px;height:43px}.mode b{display:block;font-size:25px}.mode small{font-size:16px;display:block;margin-top:4px}.home-footer{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:14px;flex:none}.home-footer a{color:white}.play-head{display:flex;justify-content:space-between;align-items:center;flex:none;color:white;gap:12px}.play-head h1{font-size:clamp(22px,2.5vw,32px);text-shadow:0 2px #0871c4}.progress{display:flex;gap:6px;align-items:center}.progress i{width:21px;height:9px;background:#fff6;border-radius:10px}.progress i.done{background:#fff046}.progress i.current{background:white;box-shadow:0 0 0 2px #fff9}.progress span{margin-left:8px;font-size:16px}.workspace{background:#fff;border:3px solid #ffffffb3;box-shadow:0 8px 0 #0069b34d;border-radius:28px;padding:clamp(13px,2vw,28px);flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.instruction{display:flex;align-items:center;justify-content:space-between;gap:16px}.instruction h2{font-size:clamp(19px,2.3vw,28px);font-weight:550}.step-badge{font-size:14px;color:#517591;margin-bottom:4px}.canvas{flex:1;min-height:185px;display:flex;align-items:center;position:relative;overflow-x:auto;overflow-y:hidden;border-radius:20px;background:linear-gradient(#f2faff,#fff);border:2px solid #e2f0f8;padding:10px 12px}.analysis{display:grid;grid-template-rows:62px repeat(3,44px);column-gap:4px;row-gap:7px;align-content:center;width:max-content;min-width:100%;touch-action:none;user-select:none}.word{grid-row:1;white-space:nowrap;background:transparent;border-radius:10px;padding:7px 6px;font-weight:500;font-size:clamp(18px,2.4vw,31px);min-width:38px;min-height:44px;transition:background .1s}.word.mark{background:#ffed89;box-shadow:inset 0 -3px #ffc80d}.box{height:38px;align-self:center;margin:0 1px;padding:3px 6px;border:2px solid var(--c);border-top:5px solid var(--c);border-radius:4px 4px 11px 11px;background:color-mix(in srgb,var(--c) 13%,white);color:var(--c);font-size:clamp(12px,1.4vw,17px);font-weight:600;white-space:nowrap;position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis}.box.wrong{border-style:dashed;background:#fff1eb;color:#b84b35}.box.correct:after{content:' ✓';font-size:13px}.box.editing{outline:3px solid #ffc700;outline-offset:2px}.omitted-row{display:flex;align-items:center;gap:8px;min-height:24px;font-size:14px}.omitted-row button{font-size:14px;min-height:34px}.tool-label{font-size:14px;color:#60829b;display:flex;justify-content:space-between;align-items:center}.tools{display:flex;flex-wrap:wrap;gap:7px}.tool{min-height:44px;padding:8px 14px;border:2px solid var(--c);border-bottom-width:5px;border-radius:14px;background:color-mix(in srgb,var(--c) 9%,white);color:var(--c);font-weight:550;font-size:15px;display:flex;align-items:center;gap:7px}.tool.active{background:var(--c);color:white;box-shadow:0 0 0 3px #ffdb3f}.tool-guide{height:8px;width:8px;border-radius:50%;background:#ffed30;box-shadow:0 0 0 3px #ffeb5250}.actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none}.action-left{display:flex;gap:7px;flex-wrap:wrap}.feedback{display:flex;align-items:center;gap:14px;flex:none;border-radius:22px;padding:13px 18px;border:2px solid #fff8;background:#e8f8ff;min-height:90px;box-shadow:0 5px 0 #006abd44}.feedback img{width:72px;height:72px;object-fit:contain;flex:none}.feedback .copy{flex:1;min-width:0}.feedback strong{display:block;font-size:19px;margin-bottom:4px}.feedback p{font-size:16px;line-height:1.35}.feedback.success{background:#eafbd4}.feedback.review{background:#fff7d9}.feedback .primary{flex:none}.results{flex:1;min-height:0;display:grid;place-content:center;gap:20px;text-align:center;background:#fffc;border:3px solid white;border-radius:30px;padding:24px}.results h1{font-size:clamp(30px,4vw,53px)}.results img{height:23dvh;max-height:210px;object-fit:contain;margin:auto;max-width:100%}.stats{display:flex;gap:16px;justify-content:center}.stats div{background:white;border:2px solid #d5effa;border-radius:20px;padding:14px 22px}.stats b{display:block;font-size:36px;color:#087ddd}.result-buttons{display:flex;justify-content:center;gap:12px}.results p{font-size:18px}.overlay{position:fixed;inset:0;background:#0039639c;backdrop-filter:blur(6px);z-index:10;display:grid;place-items:center;padding:20px}.dialog{width:min(720px,100%);max-height:85dvh;overflow:auto;border:4px solid white;border-radius:28px;background:#f3fbff;padding:26px;box-shadow:0 18px 60px #02427266;display:flex;flex-direction:column;gap:16px}.dialog h2{font-size:28px}.dialog p{font-size:18px;line-height:1.5}.dialog .example{background:#fff;border:2px solid #d8ebf5;padding:14px;border-radius:15px}.dialog footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.explanation-list{display:grid;gap:14px;overflow:auto}.explanation-list section{padding:12px;background:white;border-radius:14px;border-left:6px solid var(--c)}.explanation-list strong{font-size:19px}.explanation-list p{font-size:16px;margin-top:5px}.editor{display:flex;flex-wrap:wrap;gap:10px}.editor fieldset{border:2px solid #c9e5f5;border-radius:14px;display:flex;align-items:center;gap:10px}.editor legend{font-size:15px}.editor button{width:44px;min-height:44px;border-radius:12px;background:#fff;color:#007aca;font-size:24px}.confetti{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}.confetti i{position:absolute;top:-20px;width:12px;height:19px;background:var(--c);left:var(--x);animation:fall 2s var(--delay) both ease-in;rotate:25deg}@keyframes fall{to{translate:0 110dvh;rotate:560deg}}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.toast{position:fixed;bottom:20px;left:50%;translate:-50% 0;background:#073b69;color:white;border-radius:15px;padding:13px 22px;z-index:30}.guide-prompt{font-size:14px;color:#66849c}.tool.active .guide-prompt{color:white}
@media (min-width:800px) and (max-height:700px){#app{gap:8px;padding-top:8px;padding-bottom:8px}.home{gap:12px 22px}.eyebrow{margin-bottom:10px}.title{font-size:70px}.tagline{margin-top:20px;font-size:19px}.level{padding:10px 15px}.mode{padding:12px 18px}.hero-art img{max-height:34dvh}.workspace{gap:8px;padding:13px 20px}.analysis{grid-template-rows:50px repeat(3,37px);row-gap:3px}.box{height:33px;font-size:14px}.canvas{min-height:170px;padding:7px 10px}.feedback{min-height:75px;padding:8px 14px}.feedback img{width:56px;height:56px}.feedback p{font-size:15px}.feedback strong{font-size:17px}.tool{font-size:14px;padding:6px 10px;min-height:44px}.instruction h2{font-size:21px}.play-head h1{font-size:24px}.tool-label{font-size:13px}.results{gap:12px}.results img{height:18dvh}.stats div{padding:9px 20px}}
@media(max-width:799px),(orientation:portrait){#app{height:auto;min-height:100dvh;padding:12px;gap:12px}.brand{font-size:17px}.home{grid-template-columns:1fr;gap:20px;padding:5px}.hero-copy{text-align:center}.title{font-size:clamp(48px,13vw,85px)}.tagline{font-size:18px;margin:24px auto 0}.hero-art{grid-row:2;max-height:23dvh}.hero-art img{max-height:23dvh}.levels{grid-template-columns:1fr;gap:10px}.level{padding:12px 16px;grid-template-columns:40px 1fr}.level .number{width:40px;height:40px;font-size:26px}.level b{font-size:19px}.level small{font-size:14px}.modes{grid-template-columns:1fr;gap:12px}.mode{padding:16px}.mode b{font-size:23px}.home-footer{font-size:12px}.top-controls{gap:5px}.icon{width:44px;min-height:44px;padding:10px}.workspace{flex:none;padding:13px;border-radius:22px}.canvas{min-height:220px;padding:8px}.analysis{grid-template-rows:52px repeat(3,40px);gap:4px}.word{font-size:21px;padding:6px}.box{font-size:13px;height:34px}.instruction{align-items:flex-start}.instruction h2{font-size:20px}.instruction .pill{padding:8px;font-size:0}.play-head h1{font-size:21px}.progress i{width:12px}.progress span{font-size:13px}.tool{font-size:14px;padding:7px 10px}.tool-label{font-size:12px}.actions{flex-wrap:wrap;justify-content:center}.action-left{justify-content:center}.feedback{flex-wrap:wrap;padding:12px;gap:9px}.feedback img{width:48px;height:48px}.feedback .copy{flex-basis:calc(100% - 60px)}.feedback .primary{margin-left:auto}.feedback p{font-size:15px}.feedback strong{font-size:17px}.stats{gap:7px}.stats div{padding:10px}.stats b{font-size:30px}.stats span{font-size:14px}.result-buttons{flex-wrap:wrap}.dialog{padding:18px}.dialog p{font-size:16px}.top .exit-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}

/* The sentence and its actions stay visible; functions use a compact side panel. */
@media(min-width:800px) and (orientation:landscape){
 .workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px 16px}
 .instruction{grid-column:1/-1;grid-row:1}.canvas{grid-column:1;grid-row:2;min-width:0}
 .omitted-row{grid-column:1;grid-row:3}.actions{grid-column:1/-1;grid-row:4}
 .tool-panel{grid-column:2;grid-row:2/4;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;border-left:2px solid #e1eff8;padding-left:14px}
 .tool-panel .tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .tool-panel .tool{justify-content:center;padding:7px 4px;font-size:14px;min-width:0}
 .tool-panel .cc-tool{grid-column:1/-1}.tool-panel .tool-label{flex:none;font-size:14px}
 .tool-panel .pill{padding:6px 8px;min-height:44px;font-size:14px}
 .tool-panel .pill svg{width:19px;height:19px}
 .selection-note{font-size:14px;color:#5a7d99;margin-top:5px}
}
.cc-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cc-options .tool{justify-content:center;min-height:54px}
@media(max-width:799px),(orientation:portrait){.tool-panel{display:flex;flex-direction:column;gap:10px}.selection-note{font-size:13px;color:#5a7d99;margin-top:7px}.cc-options{grid-template-columns:1fr}}
@media(min-width:800px) and (max-height:700px){.workspace{gap:8px 12px}.selection-note{font-size:13px}.instruction .step-badge{display:none}.tool-panel{gap:7px}.tool-panel .tools{gap:6px}}

.title{font-size:clamp(42px,5.6vw,76px)}.title span{font-size:.68em;margin-top:10px}@media(min-width:800px) and (max-height:700px){.title{font-size:58px}.hero-copy .eyebrow{margin-bottom:7px}.tagline{margin-top:20px}}@media(max-width:799px),(orientation:portrait){.title{font-size:clamp(42px,12vw,68px)}}
/* Brackets are drawn on the blank writing area, never on the sentence. */
.canvas{display:block;min-height:220px}
.analysis{height:100%;grid-template-rows:56px minmax(130px,1fr);row-gap:8px;align-content:stretch;touch-action:auto}
.word{display:flex;align-items:center;justify-content:center;cursor:default;user-select:none}
.drawing-surface{grid-row:2;grid-column:1/-1;position:relative;min-width:0;min-height:130px;touch-action:none;user-select:none;cursor:crosshair;border-radius:14px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#d6e9f33d 44px,transparent 45px)}
.drawing-surface:focus-visible{outline:3px solid #ffcd21;outline-offset:3px}
.draw-instruction{position:absolute;inset:35% 0 auto;text-align:center;font-size:14px;color:#7192ac;pointer-events:none}
.draw-preview{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;z-index:4;stroke-width:3;fill:none}
.draw-preview.visible{opacity:1}.draw-preview path{vector-effect:non-scaling-stroke}
.bracket.box{position:absolute;align-self:auto;transform:translateY(-14px);height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--c);white-space:normal;overflow:visible;box-shadow:none;z-index:2;cursor:pointer}
.bracket-line{position:absolute;top:0;left:0;right:0;height:14px;border:solid currentColor;border-width:0 3px 3px;pointer-events:none}
.bracket-label{position:absolute;top:18px;left:0;right:0;padding:2px 1px;border-radius:5px;background:#ffffffd9;line-height:1.08;font-size:clamp(11px,1.2vw,15px);max-height:30px;overflow:hidden;text-align:center;pointer-events:none}
.bracket.correct:after{content:none}.bracket.wrong .bracket-line{border-style:dashed;color:#b84b35}.bracket:focus-visible{outline:3px solid #ffc700;outline-offset:2px}
.draw-cursor{position:absolute;top:45%;width:11px;height:11px;border-radius:50%;background:currentColor;translate:-50% 0;pointer-events:none;box-shadow:0 0 0 4px #ffdd3c80}
.drawing-surface:has(.draw-preview.visible) .draw-instruction{visibility:hidden}
@media(min-width:800px) and (max-height:700px){.canvas{min-height:200px}.analysis{grid-template-rows:44px minmax(130px,1fr);row-gap:6px}.bracket-label{font-size:12px}}
@media(max-width:799px),(orientation:portrait){.canvas{min-height:250px;height:270px}.analysis{grid-template-rows:48px minmax(160px,1fr)}.drawing-surface{min-height:160px}.draw-instruction{font-size:13px}.bracket-label{font-size:12px}}
/* Measure the glyph span, rather than the stretched grid cell. Start drawing
   immediately below the words; committed brackets form a compact hierarchy. */
.analysis{grid-template-rows:38px minmax(140px,1fr);row-gap:0}
.word{width:max-content;justify-self:center;align-self:end;padding:0 4px;min-width:0;min-height:0;line-height:1.2}
.word [data-word-text]{display:inline-block}
.drawing-surface{min-height:140px}
.canvas{overflow-y:auto}
.bracket-label{top:17px;line-height:1.05;padding:1px;max-height:26px}
@media(min-width:800px) and (max-height:700px){.analysis{grid-template-rows:34px minmax(140px,1fr);row-gap:0}.canvas{min-height:200px}}
@media(max-width:799px),(orientation:portrait){.analysis{grid-template-rows:30px minmax(160px,1fr);row-gap:0}.word{padding:0 4px}}
/* Keep blank space above an existing line available for the next inner bracket.
   Editing remains available on the label and through keyboard focus. */
.bracket.box{pointer-events:none}
.bracket-label{pointer-events:auto;cursor:pointer}
/* Labels remain legible under short words without stretching the bracket. */
.bracket-label{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:160px;white-space:nowrap;padding:1px 3px}

/* Give the task and drawing instruction a clear, shared visual focus. */
.instruction>div{flex:1;min-width:0;padding:10px 14px;background:#fff9d7;border:2px solid #ffdf55;border-left:6px solid #ffc800;border-radius:16px}
.instruction h2{color:#10477a;font-weight:650}
.instruction .selection-note{color:#244e70;font-size:clamp(15px,1.3vw,18px);font-weight:500;line-height:1.35;margin-top:6px}
.instruction .step-badge{color:#466681}
.instruction>.pill{flex:none}
@media(min-width:800px) and (max-height:700px){.instruction>div{padding:7px 11px}.instruction .selection-note{font-size:15px;margin-top:4px}}
@media(max-width:799px),(orientation:portrait){.instruction{gap:8px}.instruction>div{padding:9px 10px}.instruction .selection-note{font-size:15px}}