:root{font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:#163848;background:#f5f9fb}*{box-sizing:border-box}body{margin:0;background:linear-gradient(150deg,#e8f6f7,#f8faff 43%,#fff)}a{color:#075f76}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #a8cbd5;background:#fff;color:#163848;border-radius:12px;min-height:48px;padding:10px 16px;font-weight:700}button:hover,button:focus-visible,a:focus-visible{outline:3px solid #f3ae3e;outline-offset:2px}header{background:#fff;box-shadow:0 2px 18px #17465b16;padding:12px max(16px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:18px;min-height:68px}header a{font-weight:800;text-decoration:none}header .brand{color:#134559;font-size:1.15rem}header .back{margin-left:auto;background:#ecf7f8;border-radius:999px;padding:9px 14px}main{max-width:1120px;margin:auto;padding:28px 18px 70px}.eyebrow{font-weight:800;color:#167d92;letter-spacing:.07em;text-transform:uppercase;font-size:.82rem}h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;margin:.3em 0}h2{font-size:1.4rem}.lead{max-width:700px;color:#476473;font-size:1.1rem}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:26px 0}.tool-card{display:flex;flex-direction:column;text-decoration:none;color:#173848;border:1px solid #d5e5ed;border-radius:24px;background:#fff;padding:22px;min-height:205px;box-shadow:0 10px 30px #173a5010}.tool-card:nth-child(1){background:#e8f7f3}.tool-card:nth-child(2){background:#eef0ff}.tool-card:nth-child(3){background:#fff2e6}.tool-card:nth-child(4){background:#f2ecfb}.tool-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #173a5028}.tool-card .emoji{font-size:2.4rem}.tool-card strong{font-size:1.3rem;margin-top:8px}.tool-card span:last-child{margin-top:5px;color:#476473}.panel{background:#fff;border:1px solid #d7e7ed;border-radius:22px;padding:22px;margin:18px 0;box-shadow:0 8px 25px #173a500b}.panel h2{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.form-grid label{display:grid;gap:6px;font-weight:700}.form-grid input,.form-grid select{width:100%;min-height:48px;border:1.5px solid #a8c6d0;border-radius:11px;padding:8px 12px;background:#fff}.primary{background:#087d93;border-color:#087d93;color:#fff}.secondary{background:#eaf5f7}.notice{background:#fff6dc;border-left:4px solid #e5a135;padding:13px 16px;border-radius:10px;color:#473b20}.result-head{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.result-head h2{margin:0}.result-head .total{margin-left:auto;font-size:1.45rem;font-weight:800}.total.good{color:#13744a}.total.over{color:#ad3b32}.meal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.meal{background:#f1f8fa;border:1px solid #d4e8ec;border-radius:14px;padding:14px}.meal h3{margin:0 0 6px}.meal p{margin:5px 0;color:#435e6a}.meal details{margin-top:9px}.meal summary{cursor:pointer;font-weight:700}.basket{width:100%;border-collapse:collapse}.basket th,.basket td{text-align:left;padding:9px;border-bottom:1px solid #d9e8ed}.basket input{width:88px;border:1px solid #a9c6d0;border-radius:8px;padding:6px}.basket td:last-child{text-align:right}.small{font-size:.9rem;color:#506a75}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.game-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game-options button{min-height:115px;font-size:1.25rem;border-radius:18px;background:#eef7f8}.game-options button.correct{background:#d4f1df;border-color:#61ab77}.game-options button.wrong{background:#ffe9e5;border-color:#c9685d}.game-prompt{font-size:1.4rem;font-weight:800}.feedback{min-height:2em;font-weight:800;color:#136a77}.game-tabs{display:flex;gap:8px;flex-wrap:wrap}.game-tabs button[aria-current=true]{background:#087d93;color:#fff}.word-visual{font-size:3.2rem}.footer{margin-top:28px;color:#60747e;font-size:.92rem}section[hidden]{display:none!important}@media(max-width:700px){header{gap:8px;padding:8px 12px}header .brand{font-size:1rem}header .back{font-size:.85rem}main{padding:20px 12px}.tool-grid,.meal-grid{grid-template-columns:1fr}.tool-card{min-height:150px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid button{grid-column:1/-1}.basket{font-size:.84rem}.basket input{width:65px}.basket th,.basket td{padding:6px 3px}.game-options{gap:6px}.game-options button{min-height:90px;font-size:1rem}}@media print{header,.form-grid,.actions,.footer,.notice,.game-tabs{display:none!important}body{background:white}main{padding:0}.panel{border:0;box-shadow:none;padding:0}.meal{break-inside:avoid}.basket input{border:0}}
.schedule-row{display:grid;grid-template-columns:90px 56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #d6e6e9;border-radius:14px;margin:8px 0;background:#f2faf9}.schedule-row strong{font-size:1.1rem}.schedule-icon{font-size:2rem}.schedule-controls{display:flex;gap:4px}.schedule-controls button{padding:4px 9px;min-height:38px}.schedule-controls button:disabled{opacity:.45}@media(max-width:600px){.schedule-row{grid-template-columns:60px 40px minmax(0,1fr);gap:5px;padding:7px}.schedule-controls{grid-column:1/-1;justify-content:flex-end}.schedule-controls button{min-width:48px}}@media print{.schedule-controls{display:none}.schedule-row{break-inside:avoid}}
.meal label{display:grid;gap:4px;font-weight:700;font-size:.9rem;margin-top:10px}.meal select{width:100%;min-height:44px;border:1px solid #a8cbd5;border-radius:10px;background:white;padding:7px}.meal select:focus-visible{outline:3px solid #f3ae3e}

.tool-card:nth-child(5){background:#e9f5e8}.activity-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.activity-options label{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid #cbdfe5;border-radius:12px;background:#f6fbfc;cursor:pointer}.activity-options input{width:20px;height:20px;flex:none}.activity-options label:has(input:checked){background:#ddf5ed;border-color:#499986}.activity-options label:focus-within{outline:3px solid #f3ae3e}.week-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.week-day{background:#f1f8fa;border:1px solid #d4e8ec;border-radius:14px;padding:14px}.week-day h3{margin:0 0 8px}.week-day label{display:grid;gap:4px;font-weight:700;margin:8px 0}.week-day select,.week-day input{width:100%;min-height:44px;border:1px solid #a8cbd5;border-radius:10px;padding:7px;background:white}.week-day p{margin:7px 0}.source-list{padding-left:1.4em}.source-list li{margin:6px 0}@media(max-width:700px){.activity-options,.week-grid{grid-template-columns:1fr}}@media print{.activity-options,.source-list{display:none!important}.week-day{break-inside:avoid}}

.word-visual{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:96px;margin:10px 0}.game-picture{display:grid;place-items:center;width:76px;height:76px;flex:0 0 76px;background:#fff;border:1px solid #d0e3e9;border-radius:15px;font-size:2.4rem;line-height:1}.game-options button{min-height:108px;overflow-wrap:anywhere}@media(max-width:500px){.game-picture{width:58px;height:58px;flex-basis:58px;font-size:2rem}.word-visual{min-height:72px;gap:5px}.game-options{grid-template-columns:1fr}.game-options button{min-height:60px}}
/* Compact app launcher shared with the working surfaces. */
:root{color:#142e43;background:#eef4fb}body{background:radial-gradient(circle at 12% 5%,#d6e8ff 0,transparent 34%),radial-gradient(circle at 92% 18%,#dcf6f3 0,transparent 30%),#f4f7fc;min-height:100vh}header{background:#ffffffdc;backdrop-filter:blur(16px);border-bottom:1px solid #dfe8f2;box-shadow:0 5px 22px #163a5010}main{max-width:1160px}h1{letter-spacing:-.035em}.panel{border-color:#e4ebf4;border-radius:25px;box-shadow:0 12px 32px #18395c0e}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}.tool-card,.tool-card:nth-child(n){background:#ffffffdd;min-height:210px;border-color:#e2eaf3;border-radius:26px;align-items:center;text-align:center;justify-content:center;box-shadow:0 12px 28px #193f6011;transition:transform .18s ease,box-shadow .18s ease}.tool-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px #193f6027}.tool-card .emoji{display:grid;place-items:center;width:84px;height:84px;border-radius:25px;background:linear-gradient(145deg,#53b3d1,#1678a9);font-size:2.65rem;line-height:1;box-shadow:0 9px 18px #267da642}.tool-card:nth-child(2) .emoji{background:linear-gradient(145deg,#9a92e7,#655ac5)}.tool-card:nth-child(3) .emoji{background:linear-gradient(145deg,#ffc272,#ed825d)}.tool-card:nth-child(4) .emoji{background:linear-gradient(145deg,#85caec,#568ee0)}.tool-card:nth-child(5) .emoji{background:linear-gradient(145deg,#9cd598,#49a77f)}.tool-card:nth-child(6) .emoji{background:linear-gradient(145deg,#f1a9ca,#cb70ae)}.tool-card strong{font-size:1.2rem;margin-top:13px}.tool-card span:last-child{font-size:.91rem;max-width:28ch}.game-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.game-tabs button{border-radius:16px;min-height:64px;background:#f1f5fb}.game-tabs button[aria-current=true]{background:#175d8d;border-color:#175d8d;box-shadow:0 7px 16px #175d8d30}.memory-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:610px}.memory-card{aspect-ratio:1;min-height:0!important;font-size:2.6rem!important;background:#e5eefb!important;border:2px solid #a8c7df!important;transition:background .16s}.memory-card[aria-pressed=true]{background:#fff!important}.memory-card:disabled{background:#dcf5e9!important;color:#163848;opacity:1}.word-entry{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.word-entry input{flex:1 1 220px;min-height:55px;border:2px solid #9cb8ce;border-radius:14px;padding:12px;font:inherit;font-size:1.2rem}.word-entry button{min-height:55px}.word-entry input:focus-visible{outline:3px solid #e5a135}@media(max-width:850px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:500px){.tool-grid{gap:10px}.tool-card,.tool-card:nth-child(n){min-height:160px;padding:12px;border-radius:20px}.tool-card .emoji{width:64px;height:64px;border-radius:20px;font-size:2rem}.tool-card strong{font-size:1rem;margin-top:8px}.tool-card span:last-child{font-size:.79rem;line-height:1.25}.memory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.memory-card{font-size:1.8rem!important;padding:0}.game-tabs button{font-size:.85rem;padding:6px;min-height:54px}}@media(prefers-reduced-motion:reduce){.tool-card,.memory-card{transition:none}}
/* Image-inspired home screen: saturated wallpaper, search and compact app icons. */
body{background:radial-gradient(ellipse 52% 50% at 79% 1%,#f06b4e 0%,transparent 68%),radial-gradient(ellipse 75% 65% at 8% 54%,#394e9d 0%,transparent 65%),linear-gradient(145deg,#14243c 0%,#23365c 52%,#111e35 100%);background-attachment:fixed}header{background:#111f38d9;border-bottom:1px solid #ffffff29;color:white}header .brand,header .back{color:#fff}header .back{background:#ffffff22}main>.eyebrow,main>h1,main>.lead,main>.footer{color:#fff}main>.eyebrow{color:#e3f6ff}main>.lead{color:#e0e9f8}.panel{background:#ffffffed;backdrop-filter:blur(16px);box-shadow:0 15px 35px #08162935;border-color:#ffffffa8}.tool-card,.tool-card:nth-child(n){background:#ffffffeb;border-color:#ffffff7a;box-shadow:0 12px 28px #08162955}.tool-card[hidden]{display:none!important}.launcher-search{display:flex;align-items:center;gap:10px;max-width:560px;min-height:56px;margin-top:24px;padding:6px 18px;border:1px solid #ffffff70;border-radius:999px;background:#ffffffec;color:#37516a;box-shadow:0 10px 30px #09162740}.launcher-search span{font-size:1.7rem;line-height:1}.launcher-search input{width:100%;border:0;outline:none;background:transparent;color:#142e43;font:inherit;font-size:1.06rem}.launcher-search:focus-within{outline:3px solid #ffbd59;outline-offset:3px}.launcher-search input::placeholder{color:#526a78}#tool-search-status{color:#fff;min-height:1.2em;margin:4px 0}.game-tabs button{background:#eef4fb}.meal,.week-day,.schedule-row,.activity-options label{box-shadow:0 4px 12px #173a5010}@media(max-width:600px){main{padding-top:26px}.tool-grid{gap:12px}.tool-card,.tool-card:nth-child(n){min-height:134px;padding:10px 8px;justify-content:flex-start}.tool-card .emoji{width:60px;height:60px;border-radius:18px;font-size:2rem}.tool-card strong{font-size:.96rem;line-height:1.2}.tool-card span:last-child{display:none}}
@media print{body{background:#fff!important}main>.eyebrow,main>h1,main>.lead{color:#142e43}header{background:#fff;color:#142e43}}
.tool-card:nth-child(7) .emoji{background:linear-gradient(145deg,#f0bf70,#d17e5d)}.focus-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0 8px}.focus-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:82px;background:#ffffffed;border:1px solid #ffffffb0;border-radius:22px;box-shadow:0 10px 25px #08162935}.focus-tabs button span{font-size:1.8rem}.focus-tabs button[aria-current=true]{background:#e0f4fa;border:3px solid #137b9b}.focus-form{display:grid;gap:14px}.focus-form label{display:grid;gap:6px;font-weight:700}.focus-form input,.focus-form textarea,.focus-form select{font:inherit;width:100%;min-height:48px;border:1.5px solid #a8c6d0;border-radius:12px;padding:10px;background:white}.focus-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.focus-form>.primary{justify-self:start}.step-list{padding-left:1.7em}.step-card{padding:12px 14px;margin:10px 0;border:1px solid #d4e6ed;border-radius:16px;background:#f3f9fb;break-inside:avoid}.step-card.done{background:#e3f5e9}.step-main{display:flex;align-items:flex-start;gap:10px}.step-main input{width:23px;height:23px;flex:none;margin-top:10px}.step-main textarea{font:inherit;flex:1;min-height:72px;resize:vertical;border:1px solid #afc9d1;border-radius:10px;padding:8px;background:#fff}.step-controls{display:flex;gap:6px;justify-content:flex-end;margin-top:5px}.step-controls button{min-height:38px;padding:5px 12px}.step-controls button:disabled{opacity:.45}@media(max-width:600px){.focus-tabs{grid-template-columns:1fr;gap:8px}.focus-tabs button{min-height:58px;justify-content:flex-start}.focus-form-row{grid-template-columns:1fr}}@media print{.focus-tabs,.focus-form,.step-controls{display:none!important}.step-card{background:#fff}.step-main textarea{border:0;resize:none}}
.page-language{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:8px 0 16px;padding:7px 10px 7px 16px;color:#fff;background:#ffffff27;border:1px solid #ffffff70;border-radius:999px;font-weight:700}.page-language select{max-width:160px;min-height:42px;border:0;border-radius:999px;padding:5px 12px;background:#fff;color:#173848}.page-language select:focus-visible{outline:3px solid #ffbd59}@media(max-width:600px){.page-language{font-size:.9rem}}
.lang-flag{display:inline-block;vertical-align:middle;width:32px;height:22px;flex:none;object-fit:cover;border-radius:4px;box-shadow:0 1px 3px #14243c55}.page-language{gap:9px}.tool-card strong,.tool-card span:last-child{font-size:1rem;line-height:1.35;text-align:center}.tool-card strong{font-weight:800}.tool-card,.tool-card:nth-child(n){justify-content:center}.game-tabs button,.focus-tabs button,.game-options button{font-size:1rem;text-align:center;justify-content:center}.game-options button{display:grid;place-items:center}.meal-grid .meal,.week-grid .week-day{text-align:center}.meal label,.week-day label{text-align:left}@media(max-width:600px){.tool-card strong{font-size:1rem}.game-tabs button,.focus-tabs button,.game-options button{font-size:1rem}}
.meal h3,.meal p,.week-day h3,.week-day p,.schedule-row,.step-card,.activity-options label,.basket th,.basket td{font-size:1rem;line-height:1.4}.meal h3,.week-day h3{font-weight:800}.step-main textarea{font-size:1rem}@media(max-width:700px){.basket{font-size:1rem}}
.focus-tabs .tab-label{font-size:1rem;line-height:1.3;text-align:center}.focus-tabs button{font-weight:700}.tool-card span:last-child{display:block}@media(max-width:600px){.tool-card span:last-child{display:none}}
.tool-card:nth-child(8) .emoji{background:linear-gradient(145deg,#6f88d9,#344b9b)}.tool-card:nth-child(9) .emoji{background:linear-gradient(145deg,#ffae87,#e07388)}.sleep-form{display:grid;gap:14px}.sleep-form label{display:grid;gap:6px;font-weight:700}.sleep-form input{font:inherit;min-height:48px;border:1.5px solid #a8c6d0;border-radius:12px;padding:10px;background:white}.sleep-form>.primary{justify-self:start}.sleep-form fieldset{border:1px solid #cbdfe5;border-radius:16px;padding:14px}.sleep-form legend{font-weight:800}.sleep-step,.memory-group{background:#f3f9fb;border:1px solid #d4e6ed;border-radius:16px;padding:13px 16px;margin:10px 0;break-inside:avoid}.sleep-step h3,.memory-group h3{font-size:1rem;text-align:center;margin:2px 0 8px}.sleep-step li{font-size:1rem;margin:4px 0}.memory-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.memory-group{min-width:0}.memory-list{padding:0;list-style:none}.memory-item{display:flex;align-items:flex-start;gap:7px;padding:8px 0;border-bottom:1px solid #d3e4e9;font-size:1rem}.memory-item input{width:21px;height:21px;flex:none}.memory-item span{flex:1;overflow-wrap:anywhere}.memory-item.done span{text-decoration:line-through;color:#536d73}.memory-item button{min-height:34px;padding:3px 8px;font-size:.9rem}@media(max-width:800px){.memory-groups{grid-template-columns:1fr}}@media print{.sleep-form,.memory-item button{display:none!important}.memory-groups{display:block}.sleep-step,.memory-group{background:#fff}}
.tool-card:nth-child(10) .emoji{background:linear-gradient(145deg,#8ad0c0,#3d9b91)}.tool-card:nth-child(11) .emoji{background:linear-gradient(145deg,#8bb2ee,#4c70ba)}.mini-app,.mini-app:nth-child(n){min-height:150px;gap:3px}.mini-app .emoji{width:54px;height:54px;border-radius:17px;font-size:1.8rem}.mini-app strong{margin-top:4px}.focus-tabs:has(.mini-app){grid-template-columns:repeat(4,minmax(0,1fr))}.calc-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.calc-result>div{display:grid;gap:4px;text-align:center;background:#eef7f9;padding:15px;border:1px solid #d4e5ec;border-radius:15px}.calc-result strong{font-size:1.4rem}.calc-result span{font-size:1rem}.cost-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.cost-grid label{display:grid;gap:5px;font-weight:700}.cost-grid input,.assessment-row select{font:inherit;min-height:44px;padding:7px;border:1px solid #a8c6d0;border-radius:10px;background:#fff}.access-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.access-checks label{background:#eff8fa;padding:10px;border-radius:11px}.needs-field{border:1px solid #d4e5ec;border-radius:14px;padding:12px}.needs-field legend{font-weight:800}.assessment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}.assessment-group{background:#f1f8fa;border:1px solid #d4e5ec;border-radius:16px;padding:14px}.assessment-group h3{font-size:1.1rem;margin:0 0 8px}.assessment-row{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid #d9e8ed;font-size:1rem}.assessment-row select{width:100%}.toilet-filters{display:flex;flex-wrap:wrap;gap:15px}.toilet-filters label{display:flex;align-items:center;gap:6px}.toilet-filters input{width:20px;height:20px}.toilet-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.toilet-card{background:#f1f8fa;border:1px solid #d4e6ed;border-radius:16px;padding:15px;overflow-wrap:anywhere}.toilet-card h3{font-size:1rem;margin:0 0 8px}.toilet-card p{font-size:1rem;margin:6px 0}@media(max-width:850px){.focus-tabs:has(.mini-app),.calc-result,.assessment-list,.toilet-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.focus-tabs:has(.mini-app){grid-template-columns:repeat(2,minmax(0,1fr))}.cost-grid,.access-checks,.assessment-list,.toilet-list{grid-template-columns:1fr}.calc-result{grid-template-columns:1fr}.assessment-row{grid-template-columns:1fr}}
.tool-card:nth-child(9) .emoji{background:linear-gradient(145deg,#70c7a9,#368b89)}.tool-card:nth-child(10) .emoji{background:linear-gradient(145deg,#87baf2,#5370c3)}.tool-card:nth-child(11) .emoji{background:linear-gradient(145deg,#f0a9c8,#bf70ae)}

.site-label{display:grid;gap:6px;font-weight:700;max-width:580px}.site-label input,.assessment-controls input{font:inherit;min-height:44px;padding:8px;border:1px solid #a8c6d0;border-radius:10px;max-width:100%}.assessment-row strong,.assessment-row small{display:block}.assessment-row small{font-size:.86rem;font-weight:400;margin-top:4px;line-height:1.35}.assessment-controls{display:grid;gap:5px}.assessment-controls input,.assessment-controls select{width:100%;min-width:0}.measurement-status{font-size:.88rem;font-weight:700;color:#315873}.measurement-status[data-status="Selvitettävä"]{color:#a13434}.measurement-status[data-status="Mittarajan mukainen"]{color:#126946}
.piano-keys{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;margin:16px 0;padding:4px 4px 10px;align-items:flex-start}.piano-key{flex:0 0 70px;min-width:70px;min-height:120px;background:#fff;border:2px solid #9db7c4;border-radius:0 0 12px 12px;box-shadow:0 4px 0 #cbd9df}.piano-key:active{transform:translateY(3px);box-shadow:0 1px 0 #cbd9df;background:#def3eb}.note-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.note-guide span{padding:12px;background:#eef7f8;border-radius:12px;text-align:center}.staff{display:block;width:100%;max-height:180px;margin:18px 0;color:#163848}.composer-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}.composer-controls label{display:grid;gap:5px;font-weight:700}.composer-controls select{min-height:48px;border:1px solid #a8c6d0;border-radius:10px;padding:8px}.song-staff{overflow-x:auto;min-height:190px;margin-top:15px;padding:10px;border:1px solid #d4e5ec;border-radius:14px;background:#f7fbfc}.song-staff .staff{min-width:700px}@media(max-width:600px){.note-guide{grid-template-columns:1fr 1fr}.composer-controls{grid-template-columns:1fr}.piano-key{flex-basis:58px;min-width:58px;min-height:100px}}
@media print{.piano-keys,.composer-controls,.note-guide,.footer{display:none!important}.song-staff{border:0}.panel{box-shadow:none}}
.piano-keys{align-items:flex-start}.piano-key{display:flex;align-items:center;justify-content:center;text-align:center;font-size:1rem;line-height:1.15;padding:8px;box-sizing:border-box}.piano-key.black-key{flex:0 0 70px;min-width:70px;min-height:120px;margin:0;background:#173848;color:#fff;border-color:#102a36;z-index:2;font-size:.9rem}.piano-key.black-key:active{background:#087d93}
.note-guide span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:82px}.note-guide .note-glyph{font-family:"Times New Roman",serif;font-size:2.5rem;line-height:1;font-weight:400;color:#163848}.note-guide small{font-size:.9rem;font-weight:400}
@media print{body:has(#song-staff) main>section:not(:has(#song-staff)){display:none!important}body:has(#song-staff) header,body:has(#song-staff) main>p:not(.footer){display:none!important}body:has(#song-staff) #song-staff{min-height:0!important;overflow:visible!important}body:has(#song-staff) #song-staff svg{display:block;min-width:0!important;width:100%!important;height:auto!important;margin:0 0 16px}
}
.practice-target{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:14px 0;background:#eef7f8;border-radius:14px}.practice-target strong{font-size:2rem;min-width:100px;text-align:center;color:#163848}.piano-key.correct{background:#b9edc9!important;border-color:#239447!important;color:#124d28!important}.piano-key.wrong{background:#ffc1c1!important;border-color:#c43d3d!important;color:#6e1717!important}.correct-text{background:#e4f8e9!important;border-color:#6ac285!important}.wrong-text{background:#fff0f0!important;border-color:#e07979!important}
.practice-staff{display:flex;justify-content:center;overflow-x:auto;margin:0 auto 12px}.practice-staff .staff{width:min(100%,620px);max-height:190px}.piano-practice{padding-top:18px}.piano-practice .piano-keys{margin-top:8px}
.game-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.game-bar strong{font-size:1.2rem}.game-bar span{font-weight:700;color:#163848}.game-bar button{min-height:42px}
.tool-intro{max-width:none;margin:20px 0 26px;padding:22px 26px;border:1px solid #a9dbe6;border-left:6px solid #1687a3;border-radius:18px;background:#fff;box-shadow:0 10px 26px #08162930;color:#142e43;font-size:1.1rem;line-height:1.7;font-weight:600;text-align:left}
@media(max-width:600px){.tool-intro{margin:16px 0 20px;padding:17px 18px;font-size:1rem;line-height:1.6}}