:root{color-scheme:light;--bg:#fff7ed;--panel:#fffdf7;--line:#d8c9df;--text:#554266;--muted:#82728e;--mint:#a9d9c1;--teal:#548e88;--purple:#b6a0d8;--pink:#c86c8d;--ink:#6a547d;--shadow:#e1d3e7}
*{box-sizing:border-box}body{margin:0;color:var(--text);background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23e8dccf' d='M11 11h2v2h-2z'/%3E%3C/svg%3E");font-family:'Trebuchet MS',Verdana,sans-serif;font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:var(--text)}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px dashed #9d639d;outline-offset:5px}button{transition:background .12s,transform .12s,box-shadow .12s}button:not(:disabled):active{transform:translate(2px,2px);box-shadow:none}svg{display:block}button svg{pointer-events:none}.shell{max-width:1240px;padding:0 42px;margin:auto}
.masthead{height:94px;border-bottom:2px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}.brand-icon{display:block;width:48px;flex-shrink:0}.brand-word{display:block;width:164px}.brand-word svg{width:100%;height:auto}.brand-en{display:block;font:10px 'Courier New',monospace;letter-spacing:3px;margin-top:10px;text-align:center}.edition{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.tiny-sprite{width:17px;display:inline-block}.header-actions{display:flex;align-items:center;gap:14px}.text-button{background:transparent;color:var(--muted);padding:8px;font-size:12px}.text-button:hover{color:var(--ink);background:#f1e5ed}.icon-button{width:32px;height:32px;background:#fffdf7;border:2px solid #a58dae;box-shadow:2px 2px #d9c4de;font:700 15px 'Courier New',monospace}.icon-button:hover{background:#f1e8fb}
.layout{display:grid;grid-template-columns:minmax(210px,1fr) minmax(320px,400px) 228px;gap:34px;align-items:start;padding:27px 0 35px}.intro{padding-top:20px}.eyebrow{font:9px 'Courier New',monospace;letter-spacing:1.2px;color:#8a748e;font-weight:bold}.eyebrow i{display:inline-block;width:6px;height:6px;background:#b590bd;margin-right:8px;box-shadow:2px 2px #e2c4e2}h1{display:flex;flex-direction:column;gap:15px;margin:27px 0 21px;max-width:306px}h1 [data-pixel-text]{display:block;width:100%}h1 svg{display:block;width:100%;height:auto}.pink{color:var(--pink)}.intro-copy{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.mascot-scene{height:130px;position:relative;max-width:305px;margin:10px 0 22px}.mascot-scene>span{position:absolute;display:block}.scene-cloud{width:80px;left:9px;top:13px;opacity:.6}.scene-star{width:80px;left:68px;top:32px;z-index:2;animation:star-bob 3s steps(3,end) infinite}.scene-flower{width:27px;right:28px;bottom:5px;z-index:2}.speech-bubble{top:10px;right:10px;font:11px 'Courier New',monospace;background:#fffdf7;border:2px solid #cdb5d4;padding:9px 10px;box-shadow:3px 3px #ecdcec}.speech-bubble:after{content:'';position:absolute;width:8px;height:8px;left:16px;bottom:-8px;background:#fffdf7;border-left:2px solid #cdb5d4;border-bottom:2px solid #cdb5d4}.scene-ground{bottom:0;left:15px;right:15px;height:10px;background:#d7e5cd;box-shadow:0 -4px #c5d6b9}.lesson{border-top:2px dashed var(--line);padding-top:20px;display:flex;align-items:center;gap:13px;min-width:0}.lesson>div{min-width:0}.lesson-number{font:700 30px 'Courier New',monospace;color:#a88abc;background:#f1e5f9;border:2px solid #d4bce2;box-shadow:3px 3px #e8d8ee;padding:5px 7px;line-height:1;flex-shrink:0}.lesson h2{font-size:16px;line-height:1.3;margin:7px 0 0}.level-hint{font-size:11px;line-height:1.9;color:var(--muted);margin:15px 0 19px;min-height:42px}.legend{display:flex;flex-direction:column;gap:11px;font-size:11px;color:#7a6788}.legend span{display:flex;align-items:center;gap:10px}.target-key{width:17px;height:11px;background:#f3b4c8;border:2px solid #a77c9e;box-shadow:2px 2px #e7c7d4}.mirror-key{width:18px;height:5px;background:#b6deca;border:1px solid #659d97;transform:rotate(-45deg)}.par{display:flex;flex-direction:column;gap:7px;margin-top:20px;font-size:10px;color:var(--muted)}.star{color:#c5924e;letter-spacing:3px}.intro-bottom{font:bold 11px 'Courier New',monospace;letter-spacing:1px;margin-top:24px;color:#9c798b}.intro-bottom span{display:block;font:8px 'Courier New',monospace;color:#9b8b9d;margin-top:8px;letter-spacing:1px}
.game-top{height:32px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.game-top>div{display:flex;gap:11px;align-items:center}.game-top #level-label{background:#f4dce8;border:1px solid #d6b5c9;padding:6px 7px;color:#956384;font:bold 11px 'Courier New',monospace}.micro{font:9px 'Courier New',monospace;letter-spacing:1px;color:#9682a1}.game-top .icon-button{width:27px;height:27px;font-size:12px}.board-wrap{position:relative;width:100%;aspect-ratio:420/560;border:4px solid #8e77a1;background:#fffaf1;box-shadow:5px 5px 0 #d2bfdf,0 0 0 3px #f2e8f9;overflow:hidden}.board-hud{position:absolute;left:21px;right:21px;top:19px;display:flex;justify-content:space-between;align-items:center;color:#8b708d;font:10px 'Courier New',monospace;pointer-events:none}.board-hud>span{background:#fffdf7;padding:5px 6px;border:1px solid #deccde;box-shadow:2px 2px #f0e2ec}.board-hud b{color:#654e77;font-size:12px;margin-left:4px}.tiny-diamond{display:inline-block;width:6px;height:6px;background:#c8afe0;margin-right:6px;box-shadow:2px -2px #f4d3e3}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges}.board-note{position:absolute;bottom:9px;width:100%;text-align:center;pointer-events:none;font:9px 'Courier New',monospace;color:#9982a0;letter-spacing:0;padding:0 6px}.combo{position:absolute;top:45%;left:0;right:0;text-align:center;font:bold 25px 'Courier New',monospace;color:#b77398;pointer-events:none;opacity:0;text-shadow:2px 2px #fffaf4,-2px -2px #fffaf4;transition:opacity .2s}.combo.show{opacity:1}.aim-controls{display:flex;align-items:center;gap:12px;margin:19px 0 16px;color:#927a99;font:10px 'Courier New',monospace}.aim-controls label{white-space:nowrap}.aim-controls input{width:100%;height:7px;appearance:none;-webkit-appearance:none;background:#e7d8ee;border:1px solid #b19bbe;border-radius:0;cursor:ew-resize}.aim-controls input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:17px;background:#b8d9bf;border:2px solid #72988a;box-shadow:2px 2px #d4c5db}.aim-controls input::-moz-range-thumb{width:12px;height:14px;background:#b8d9bf;border:2px solid #72988a;border-radius:0}.aim-controls output{min-width:30px;text-align:right;color:#805f92}.play-actions{display:flex;gap:12px}.primary-button{background:#b8dfc2;border:2px solid #749588;box-shadow:3px 3px #d3c2dd;color:#45655b;display:flex;align-items:center;justify-content:space-between;font:bold 14px 'Courier New',monospace;letter-spacing:1px;min-height:47px;padding:0 21px;width:100%}.primary-button:hover{background:#caebd0}.primary-button>span:last-child{font-size:22px;font-weight:400}.secondary-button{color:#8e739d;background:#f0e1f6;border:2px solid #ad94ba;box-shadow:3px 3px #dfcce6;min-width:87px;font-size:17px}.secondary-button span{font:bold 11px 'Courier New',monospace;margin-left:4px}.secondary-button:hover{background:#f8edfb}
.journey{padding:20px 0 0}.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.journey-heading .eyebrow{font-size:8px;letter-spacing:.8px}.journey-count{font:10px 'Courier New',monospace;color:#aa8cab;white-space:nowrap}.journey h2{font-size:18px;margin:20px 0 8px}.journey-description{font-size:11px;color:var(--muted);margin:0 0 24px}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.level-tile{position:relative;min-width:0;height:56px;border:2px solid #ccb6d8;box-shadow:2px 2px #eadbf0;background:#fffcf8;color:#a188b1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.level-tile .num{font:bold 12px 'Courier New',monospace}.level-tile .level-stars{display:flex;gap:3px}.level-tile .level-stars>span{display:block;width:4px;height:4px;background:#e2d4e8;font-size:0}.level-tile .level-stars .lit{background:#daa453;box-shadow:0 -1px #f5d888}.level-tile.active{border-color:#a287b4;background:#eadcf5;color:#765489;box-shadow:2px 2px #cbb0db}.level-tile:hover{background:#f5e5ef}.star-total{display:flex;gap:8px;align-items:baseline;margin-top:21px;color:#a38a9f;font-size:10px}.star-total strong{font:bold 19px 'Courier New',monospace;color:#ab7e95}.star-total .star{font-size:17px}.mirror-control{margin-top:28px;padding-top:24px;border-top:2px dashed var(--line)}.mirror-control h3{font-size:14px;margin:15px 0}.mirror-control p{font-size:11px;line-height:1.9;color:var(--muted)}.mirror-button{background:#dff0e2;color:#567f72;border:2px solid #9cbfb1;box-shadow:2px 2px #d9dfd0;padding:9px 9px;margin:0 6px 7px 0;font:bold 11px 'Courier New',monospace}.mirror-button:hover{background:#eaf6e8}.garden-friends{height:100px;display:flex;align-items:flex-end;justify-content:center;gap:28px;padding:10px 8px 6px;border-bottom:5px solid #c8d9bd;margin-top:17px;background:#f4f5e855}.garden-friends span{display:block;width:20px}.garden-friends span:nth-child(2){width:50px;align-self:center;animation:star-bob 4s steps(3,end) infinite}.garden-friends span:last-child{width:26px}
footer{border-top:2px dashed var(--line);padding:22px 0 24px;display:flex;justify-content:space-between;gap:20px;color:#a594a2;font:9px 'Courier New',monospace}.footer-dot{padding:0 7px;color:#bca8bc}.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}dialog{border:3px solid #a18bb2;padding:0;width:min(374px,calc(100vw - 40px));background:#fff9ef;color:var(--text);box-shadow:7px 7px #bca6c9;border-radius:0}dialog::backdrop{background:#74648180;backdrop-filter:blur(2px)}.modal-content{text-align:center;padding:30px 25px 22px;border:4px solid #f3e5ef}.modal-symbol{font:32px 'Courier New',monospace;color:#d4a457;letter-spacing:8px;margin:25px 0 22px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px}.modal-symbol svg{width:42px;height:42px}.modal-symbol svg.dim{filter:grayscale(1);opacity:.25}.modal-content h2{font-size:22px;line-height:1.35;margin:0 0 13px}.modal-content p{font-size:12px;color:#8b7593;line-height:1.9;white-space:pre-line}.modal-content .primary-button{justify-content:center;margin-top:25px;font-size:12px;letter-spacing:0}.modal-secondary{margin-top:15px;font-size:11px}.help-steps{text-align:left;margin-top:20px;display:grid;gap:16px}.help-steps div{font-size:12px;line-height:1.8;color:var(--muted)}.help-steps b{color:#b9819c;margin-right:9px}.help-steps small{display:block;margin-top:4px;color:#9c889f}.result-stat{display:flex;justify-content:center;gap:24px;margin-top:20px;font-size:10px;color:#9f869e}.result-stat strong{display:block;font:bold 23px 'Courier New',monospace;color:#a37bab;margin-bottom:7px}
@keyframes star-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(min-width:1100px) and (max-height:850px){.shell{max-width:1180px}.masthead{height:79px}.layout{grid-template-columns:minmax(210px,1fr) minmax(320px,360px) 222px;gap:32px;padding-top:22px}.intro{padding-top:17px}h1{max-width:260px;margin-top:22px;gap:13px}.mascot-scene{height:107px;margin:5px 0 19px}.scene-star{width:66px;top:28px}.scene-cloud{width:65px}.scene-flower{width:23px}.speech-bubble{font-size:10px;top:12px;right:3px}.level-hint{margin:12px 0}.intro-bottom{margin-top:20px}.par{margin-top:17px}.journey{padding-top:17px}}
@media(max-width:1099px){.shell{padding:0 27px}.layout{grid-template-columns:minmax(175px,1fr) minmax(300px,390px);gap:28px}.brand-word{width:145px}.brand-icon{width:40px}.edition{font-size:10px}.journey{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;column-gap:32px;position:relative;border-top:2px dashed var(--line);padding-top:24px}.journey-heading,.journey h2,.journey-description,.star-total{grid-column:1}.journey h2{margin-top:14px}.journey-description{margin-bottom:0}.level-grid{grid-column:2;grid-row:1/5;align-self:center}.mirror-control{grid-column:1/-1;margin-top:20px;display:flex;align-items:center;gap:20px;padding-top:18px}.mirror-control .eyebrow,.garden-friends{display:none}.mirror-control h3{margin:0}.mirror-control p{margin:0}.intro-bottom{margin-top:23px}.mascot-scene{height:116px}.speech-bubble{right:0;font-size:10px}.scene-star{left:33px;width:66px}.scene-flower{right:15px}}
@media(max-width:760px) and (min-width:641px){.edition{display:none}.mascot-scene{height:100px}.scene-star{left:20px;top:32px;width:57px}.scene-cloud{width:50px;left:0}.speech-bubble{font-size:9px;padding:6px}.scene-flower{width:20px;right:3px}.intro-copy{font-size:11px}.level-hint{font-size:10px}.legend{font-size:10px}}
@media(max-width:640px){.shell{padding:0 18px}.masthead{height:76px;gap:10px}.brand{gap:10px}.brand-icon{width:34px}.brand-word{width:123px}.brand-en{font-size:7px;letter-spacing:2px;margin-top:7px}.edition{display:none}.header-actions{gap:5px}.text-button{font-size:10px;padding:6px}.header-actions .icon-button{width:27px;height:27px;font-size:13px}.layout{display:flex;flex-direction:column;gap:0;padding:19px 0 25px}.intro{width:100%;padding:0;display:grid;grid-template-columns:1fr auto;gap:0 9px}.intro>.eyebrow,.intro h1,.intro-copy,.intro-bottom,.legend,.mascot-scene{display:none}.lesson{padding:0;border:0;gap:10px;grid-column:1}.lesson-number{font-size:22px;padding:5px}.lesson .eyebrow{font-size:8px;letter-spacing:1px}.lesson h2{font-size:14px;margin-top:4px;line-height:1.25}.par{grid-column:2;grid-row:1;margin:0;align-items:flex-end;align-self:center;font-size:9px;gap:6px}.par .star{font-size:12px}.level-hint{grid-column:1/-1;margin:14px 0 12px;min-height:0;font-size:11px;line-height:1.7}.play-area{width:100%;max-width:420px;align-self:center}.game-top{height:26px;margin-bottom:12px}.game-top #level-label{font-size:10px;padding:5px 6px}.micro{font-size:8px;letter-spacing:.7px}.board-wrap{border-width:3px;box-shadow:4px 4px #d2bfdf,0 0 0 2px #f2e8f9}.board-hud{left:17px;right:17px;top:15px;font-size:9px}.board-hud>span{padding:3px 4px}.board-hud b{font-size:11px}.tiny-diamond{width:5px;height:5px;margin-right:4px}.board-note{font-size:8px;bottom:8px}.aim-controls{margin:20px 0 16px;font-size:9px}.play-actions .primary-button{min-height:46px;font-size:13px}.journey{display:block;width:100%;padding-top:23px;margin-top:29px}.journey-heading{display:flex}.journey h2{font-size:17px;margin:16px 0 8px}.journey-description{font-size:11px;margin-bottom:20px}.level-grid{grid-template-columns:repeat(5,1fr);gap:9px}.level-tile{height:55px}.star-total{margin-top:18px}.mirror-control{display:block;margin-top:23px;padding-top:20px}.mirror-control h3{margin-bottom:15px}.mirror-control p{margin-top:7px;font-size:11px}.mirror-button{padding:11px 15px}.garden-friends{display:flex;height:70px;max-width:240px;margin:15px auto 0}.garden-friends span:nth-child(2){width:42px}.garden-friends span{width:18px}.garden-friends span:last-child{width:22px}footer{font-size:8px;gap:12px;flex-wrap:wrap;padding-top:18px}.footer-version{display:none}.modal-content{padding:27px 18px 20px}.modal-content h2{font-size:20px}}
@media(max-width:360px){.shell{padding:0 15px}.brand-icon{width:28px}.brand-word{width:102px}.brand-en{font-size:6px;letter-spacing:1.6px}.header-actions{gap:3px}.board-hud{left:13px;right:13px;font-size:8px}.par{font-size:8px}.lesson h2{font-size:12px}.lesson-number{font-size:20px}.lesson .eyebrow{font-size:7px}.level-hint{font-size:10px}.micro{letter-spacing:0}.board-note{font-size:7px}}
@media(prefers-reduced-motion:reduce){button,.combo{transition:none}.scene-star,.garden-friends span:nth-child(2){animation:none}}
@media(max-width:640px){.android-app .masthead{height:62px}.android-app .layout{padding-top:12px}.android-app .play-area{max-width:clamp(250px,calc((100dvh - 285px)*.75),420px)}.android-app .brand-en{letter-spacing:5px}.android-app .aim-controls{margin:15px 0 12px}.android-app .level-hint{margin:10px 0}.android-app footer{padding-bottom:16px}}


.studio-return{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:center;padding:10px 16px;background:#eee2f0;color:#655079;font:12px/1.5 Verdana,sans-serif}.studio-return a{color:inherit;text-decoration:none}.studio-return a:hover{text-decoration:underline}