:root{color-scheme:light;font-family:Helvetica Neue,Helvetica,Arial,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Malgun Gothic,sans-serif;background:#eeeeee;color:#111;--surface: #eeeeee;--surface-high: #e3e3e3;--surface-top: #fafafa;--ink: #111111;--muted: #535353;--primary: #9376e0;--on-primary: #fafafa;--secondary: #14248a;--outline: #7d7d7d;--correct: #9ffa80;--present: #ffe58a;--absent: #d8d8d8;--danger: #ed3226}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;background:radial-gradient(circle at top left,rgba(147,118,224,.18),transparent 30rem),linear-gradient(180deg,#f7f7f7 0%,var(--surface) 32%);overflow:hidden}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-frame{height:100vh;height:100dvh;min-height:620px;max-height:100vh;max-height:100dvh;max-width:680px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto 1fr;gap:12px}.topbar{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{min-width:0;display:flex;align-items:center;gap:10px}.brand img{border-radius:8px;box-shadow:0 6px 20px #1111111f}.brand h1{margin:0;font-size:20px;line-height:1.1;font-weight:700;letter-spacing:0}.topbar-actions{display:flex;align-items:center;gap:8px}.icon-button{position:relative;width:42px;height:42px;border:1px solid rgba(125,125,125,.45);border-radius:999px;background:rgba(250,250,250,.86);color:var(--ink);font-weight:600;cursor:pointer;box-shadow:0 4px 16px #11111114;display:grid;place-items:center;padding:0}.material-icon{width:26px;height:26px;display:block;fill:currentColor;pointer-events:none}.icon-button:active,.level-switch button:active,.key:active,.enter-pill:active,.delete-fab:active{transform:translateY(1px)}.streak-button small{position:absolute;top:-5px;right:-4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:700;line-height:1;border:2px solid var(--surface)}.top-controls{display:grid;gap:10px}.level-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.level-switch button{min-height:42px;border:1px solid rgba(125,125,125,.42);border-radius:8px;background:rgba(250,250,250,.7);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}.level-switch .selected{color:var(--on-primary);background:var(--primary);border-color:var(--primary);box-shadow:0 10px 24px #9376e047}.board-shell{min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}.install-banner{min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(125,125,125,.42);border-radius:8px;background:rgba(250,250,250,.82);box-shadow:0 8px 22px #11111114}.install-banner img{border-radius:8px}.install-copy{min-width:0;display:grid;gap:4px}.install-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.1;font-weight:600}.install-copy a{color:var(--secondary);font-size:14px;font-weight:700;line-height:1.15;text-decoration:none}.install-dismiss{width:34px;height:34px;border:0;border-radius:999px;background:rgba(227,227,227,.88);color:var(--muted);font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer}.status-line{min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;font-weight:500}.rows{flex:1 1 auto;min-height:0;overflow:auto;padding:8px 0 88px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;scrollbar-width:thin}.quiz-row{width:100%;display:grid;grid-template-columns:repeat(var(--syllable-count),var(--block-size));justify-content:center;align-items:center;gap:8px;padding:0 2px;opacity:.72}.quiz-row.active{opacity:1}.quiz-row.locked{opacity:.92}.syllable{width:var(--block-size);aspect-ratio:1;display:grid;gap:2px;padding:0;border:1px solid var(--outline);border-radius:0;background:#f7f7f7;overflow:hidden}.active .syllable{background:#ececec}.syllable.vertical,.syllable.split-initial.vertical{grid-template-columns:1fr 1fr}.syllable.split-initial.vertical,.syllable.split-initial.combined{grid-template-columns:1fr 1fr 1fr}.syllable.horizontal{grid-template-rows:1fr 1fr}.syllable.combined{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.syllable.has-final.vertical{grid-template-rows:5fr 4fr}.syllable.has-final.horizontal,.syllable.has-final.combined{grid-template-rows:1fr 1fr 1fr}.syllable.vertical .slot.final,.syllable.horizontal .slot.medial,.syllable.horizontal .slot.final,.syllable.combined .slot.final{grid-column:1 / -1}.syllable.vertical.final-count-2 .slot.final,.syllable.horizontal.final-count-2 .slot.final,.syllable.combined.final-count-2 .slot.final{grid-column:auto}.syllable.horizontal .slot.initial{grid-column:1 / -1}.syllable.horizontal.initial-count-2 .slot.initial{grid-column:auto}.syllable.combined .slot.initial{grid-row:1}.syllable.combined .slot.medial-1{grid-row:1;grid-column:-2 / -1}.syllable.combined .slot.medial-0{grid-row:2;grid-column:1 / -1}.syllable.combined .slot.final{grid-row:3}.syllable.combined.final-count-2 .slot.final-0{grid-column:1}.syllable.combined.final-count-2 .slot.final-1{grid-column:2}.slot{min-width:0;min-height:0;width:100%;height:100%;border:0;border-radius:0;background:var(--surface-high);color:var(--ink);font-size:calc(var(--block-size) * .42);font-weight:600;line-height:1;display:grid;place-items:center;cursor:pointer;overflow:hidden}.slot-content,.key-content{display:block;position:relative;left:var(--fit-x, 0);top:var(--fit-y, 0);line-height:1;transform:scale(var(--fit-scale, 1));transform-origin:center;will-change:transform}.slot:disabled{cursor:default}.active .slot{background:var(--surface-top)}.slot.correct,.key.correct{background:var(--correct)}.slot.present,.key.present{background:var(--present)}.slot.absent,.key.absent{background:var(--absent)}.controls{min-height:48px;position:relative;display:grid;place-items:center}.delete-fab{position:absolute;left:0;width:44px;height:44px;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:22px;font-weight:600;cursor:pointer;box-shadow:0 8px 18px #9376e04d}.delete-fab:disabled{opacity:.28;cursor:default}.enter-pill{min-width:116px;height:42px;padding:0 24px;border:0;border-radius:999px;background:rgba(147,118,224,.86);color:var(--on-primary);font-size:14px;font-weight:700;cursor:pointer;display:grid;place-items:center}.enter-pill.ghost{visibility:hidden}.keyboard{width:min(100%,560px);align-self:center;display:grid;gap:5px}.keyboard-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.key{aspect-ratio:1;min-width:0;border:1px solid rgba(125,125,125,.52);border-radius:12px;background:rgba(250,250,250,.68);color:var(--ink);font-size:clamp(20px,6vw,32px);font-weight:600;cursor:grab;box-shadow:0 2px 8px #1111110d;overflow:hidden}.key:active{cursor:grabbing}.center-state{min-height:55dvh;display:grid;place-items:center;align-content:center;gap:18px;color:var(--muted);font-weight:500}.toast{position:fixed;z-index:20;top:calc(env(safe-area-inset-top) + 72px);left:50%;width:min(420px,calc(100vw - 40px));transform:translate(-50%);padding:14px 18px;border-radius:24px;background:rgba(147,118,224,.94);color:var(--on-primary);text-align:center;font-size:14px;font-weight:600;box-shadow:0 14px 34px #1113}.sheet-overlay{position:fixed;inset:0;z-index:30;display:grid;align-items:end;background:rgba(17,17,17,.24)}.sheet-panel{width:min(680px,100%);margin:0 auto;max-height:min(86dvh,720px);overflow:auto;border-radius:24px 24px 0 0;background:var(--surface-high);box-shadow:0 -20px 60px #1111113d;padding:10px 24px max(28px,env(safe-area-inset-bottom))}.sheet-grabber{width:54px;height:6px;display:block;margin:0 auto 18px;border:0;border-radius:999px;background:rgba(83,83,83,.4);cursor:pointer}.sheet-copy{display:grid;gap:12px}.sheet-copy h2,.sheet-copy h3,.sheet-copy p{margin:0}.sheet-copy h2{text-align:center;font-size:22px}.sheet-copy h3{font-size:17px}.sheet-copy p{color:#252525;line-height:1.45}.streak-card,.result-word-card{border:1px solid rgba(125,125,125,.42);border-radius:8px;background:var(--surface-top);padding:16px}.streak-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.streak-card span{font-weight:600}.streak-card strong{color:var(--primary);font-size:28px}.sheet-muted{color:var(--muted);font-size:12px;word-break:break-all}.result-mark{text-align:center;color:var(--primary);font-size:28px;font-weight:700}.result-subtitle{text-align:center}.result-word-card{display:grid;gap:8px;text-align:center}.result-word-card strong{color:var(--primary);font-size:30px}.result-word-card span{font-weight:500}.sheet-primary,.sheet-secondary{min-height:44px;border-radius:999px;font-weight:700;cursor:pointer}.sheet-primary{border:0;background:var(--secondary);color:#fff}.sheet-secondary{border:1px solid rgba(125,125,125,.52);background:transparent;color:var(--ink)}@media (min-width: 720px){.app-frame{padding-top:24px}.rows,.quiz-row{gap:8px}.keyboard{max-width:560px;width:100%;justify-self:center}}@media (max-width: 380px){.app-frame{padding-left:10px;padding-right:10px}.brand h1{font-size:17px}.icon-button{width:38px;height:38px}.level-switch button{font-size:12px}}