@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.block{display:block}.flex{display:flex}.h-full{height:100%}.min-h-full{min-height:100%}.flex-col{flex-direction:column}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--ink:#17211d;--paper:#fffdf5;--rail:#223b35;--coral:#df5c43;--yellow:#f3c94c;--mint:#9fd5bd;--line:#d8d8c8}*{box-sizing:border-box}html{background:var(--paper)}body{background:var(--paper);color:var(--ink);font-family:var(--font-noto-sans-hk),sans-serif;margin:0}button,a,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline-offset:3px;outline:4px solid #16709a}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.eyebrow{color:#49625a;font:800 .78rem/1 var(--font-nunito),sans-serif;text-transform:uppercase;margin:0 0 .35rem}.home-shell{min-height:100dvh;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:radial-gradient(circle at 10% 10%,#fff 0 7%,#0000 7.2%),linear-gradient(150deg,#fffdf5 0 60%,#e7f1e8 60%)}.home-header{justify-content:space-between;align-items:center;max-width:1050px;margin:auto;display:flex}.brand-mark{color:#fff;background:var(--rail);border-radius:6px;place-items:center;width:48px;height:48px;font-size:1.5rem;display:grid}.adult-link,.adult-nav a{color:var(--ink);text-underline-offset:4px;font-weight:750}.home-hero{grid-template-columns:1fr 1.15fr;align-items:center;gap:3rem;max-width:1050px;min-height:min(48dvh,440px);margin:auto;display:grid}.hero-copy h1{max-width:7ch;font:900 clamp(3.2rem,7vw,6.7rem)/.96 var(--font-nunito),sans-serif;letter-spacing:0;margin:0}.hero-copy>p:last-child{max-width:25rem;margin:1.2rem 0 0;font-size:1.2rem;line-height:1.6}.hero-train{border-bottom:8px double var(--rail);align-items:end;height:220px;padding:0 0 42px 28px;display:flex;position:relative}.hero-engine,.hero-car{border:5px solid var(--ink);height:112px;font:900 2rem var(--font-nunito);place-items:center;display:grid;position:relative;box-shadow:8px 8px #b7cfc1}.hero-engine{background:var(--coral);border-radius:50px 10px 8px 8px;width:190px}.hero-engine:before{content:"";background:var(--rail);border-radius:4px 4px 0 0;width:42px;height:55px;position:absolute;top:-54px;left:28px}.hero-car{background:var(--yellow);border-radius:6px;width:150px;margin-left:22px}.hero-engine i,.hero-car i,.engine i,.carriage i{background:var(--paper);border:6px solid var(--ink);border-radius:50%;width:40px;height:40px;position:absolute;bottom:-25px}.hero-engine i:first-of-type,.hero-car i:first-of-type{left:24px}.hero-engine i:last-of-type,.hero-car i:last-of-type{right:24px}.hero-smoke{border:4px solid var(--ink);background:#dcece8;border-radius:50%;position:absolute}.smoke-one{width:43px;height:43px;top:18px;left:33px}.smoke-two{width:26px;height:26px;top:0;left:71px}.mode-list{grid-template-columns:repeat(3,1fr);gap:12px;max-width:1050px;margin:0 auto;display:grid}.mode-link{border:3px solid var(--ink);min-height:124px;color:var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:7px;grid-template-columns:auto 1fr;align-content:center;gap:4px 14px;padding:18px;text-decoration:none;display:grid}.mode-link>span{font:900 1.4rem var(--font-nunito);grid-row:1/3}.mode-link strong{font-size:1.15rem}.mode-link small{line-height:1.35}.practice-link{background:#f7d970}.train-link{background:#add8c4}.check-link{background:#b4d6e7}.game-shell{min-height:100dvh;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:linear-gradient(#f6f2df 0 33%,var(--paper) 33%);grid-template-rows:auto auto 1fr auto;gap:.55rem;display:grid}.game-header{justify-content:space-between;align-items:center;width:min(960px,100%);margin:auto;display:flex}.game-header h1{font:900 clamp(1.6rem,3vw,2.4rem) var(--font-nunito);margin:0}.exit-button{min-width:76px;min-height:52px;color:var(--ink);border:2px solid var(--ink);border-radius:5px;place-items:center;font-weight:800;display:grid}.notation-area{align-content:center;place-items:center;width:min(960px,100%);min-height:260px;margin:auto;display:grid;position:relative}.staff-frame{width:min(760px,100%);position:relative}.staff-svg{aspect-ratio:620/230;width:100%}.staff-svg svg{width:100%;height:100%;display:block;overflow:visible}.staff-highlight{background:#fff2a9;border-radius:5px}.location-marker{background:var(--yellow);border:2px solid var(--ink);padding:.35rem .6rem;font-weight:800;position:absolute;top:12%;right:5%}.demonstration{align-items:center;gap:1rem;min-height:68px;display:flex}.demonstration p{font-size:1.25rem}.feedback{text-align:center;border-left:5px solid var(--mint);min-height:2.6rem;margin:.15rem 0;padding:.5rem .8rem;font-weight:800}.feedback.needs-retry{border-color:var(--yellow)}.answer-area{width:min(960px,100%);margin:auto}.answer-grid{grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.note-button{border:3px solid var(--ink);min-height:72px;color:var(--ink);box-shadow:0 5px 0 var(--ink);font:900 clamp(1.45rem,4vw,2.2rem) var(--font-nunito);background:#fff;border-radius:6px}.note-button:active:not(:disabled){box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.note-button:disabled{opacity:.55}.round-actions{justify-content:center;gap:12px;min-height:70px;padding-top:12px;display:flex}.primary-button,.secondary-button,.help-button,.danger-button{border:2px solid var(--ink);border-radius:5px;place-items:center;min-height:56px;padding:.75rem 1.15rem;font-weight:850;text-decoration:none;display:inline-grid}.primary-button{background:var(--rail);color:#fff}.secondary-button,.help-button{color:var(--ink);background:#fff}.danger-button{color:#9e281d;background:#fff1ee;border-color:#9e281d}.action-row{flex-wrap:wrap;gap:10px;display:flex}.train-track{border-bottom:5px double var(--ink);align-items:end;gap:10px;width:min(960px,100%);min-height:74px;margin:auto;padding:0 12px 13px;display:flex;overflow:hidden}.engine,.carriage{border:3px solid var(--ink);place-items:center;height:48px;display:grid;position:relative}.engine{background:var(--coral);border-radius:22px 5px 3px 3px;width:80px}.carriage{background:var(--yellow);width:68px}.chimney{background:var(--rail);width:17px;height:23px;position:absolute;top:-22px;left:14px}.window{border:2px solid var(--ink);background:#d8eff5;width:22px;height:20px;margin-left:30px}.engine i,.carriage i{border-width:3px;width:18px;height:18px;bottom:-12px}.engine i:first-of-type,.carriage i:first-of-type{left:9px}.engine i:last-of-type,.carriage i:last-of-type{right:9px}.completion{text-align:center;place-content:center}.completion h1{max-width:18ch;font:900 clamp(2.3rem,6vw,4.7rem)/1.1 var(--font-nunito)}.completion .action-row{justify-content:center}.adult-shell{min-height:100dvh;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:linear-gradient(90deg,#edf4ee 0 18%,var(--paper) 18%)}.adult-nav,.adult-heading,.settings-stack,.progress-stack,.prose-block{width:min(920px,100%);margin-inline:auto}.adult-nav{flex-wrap:wrap;gap:1.4rem;padding:1rem 0;display:flex}.adult-heading{border-bottom:4px solid var(--ink);padding:3rem 0 1.5rem}.adult-heading h1{font:900 clamp(2.4rem,6vw,4.8rem) var(--font-nunito);margin:0}.settings-stack,.progress-stack,.prose-block{gap:18px;padding-top:1.5rem;display:grid}.settings-section,.report-section,.prose-block section{border-bottom:1px solid var(--line);padding:1.2rem 0 1.5rem}.settings-section h2,.report-section h2,.prose-block h2{margin-top:0}.setting-note,.report-section small,.limitation-note{color:#53645d;line-height:1.6}.segmented{border:2px solid var(--ink);grid-template-columns:1fr 1fr;display:inline-grid}.segmented button{background:#fff;border:0;min-height:50px;padding:.5rem 1rem}.segmented button[aria-pressed=true]{background:var(--rail);color:#fff}.toggle-row{align-items:center;gap:.7rem;min-height:52px;font-weight:700;display:flex}.toggle-row input{width:24px;height:24px;accent-color:var(--rail)}.staff-picker{border:2px solid var(--ink);background:#fff;margin:1rem 0;padding:28px 12px;position:relative;overflow-x:auto}.staff-lines{pointer-events:none;flex-direction:column;justify-content:space-between;height:96px;display:flex;position:absolute;inset:34px 0 auto}.staff-lines i{border-top:2px solid #777}.pitch-options{z-index:1;align-items:center;gap:9px;min-width:620px;display:flex;position:relative}.pitch-options button{border:2px solid var(--ink);background:#fffdf5;width:52px;min-height:70px;padding:4px}.pitch-options button[aria-pressed=true]{color:#fff;background:var(--coral)}.pitch-options span,.pitch-options small{display:block}.pitch-options span{font:900 1.3rem var(--font-nunito)}.preset-list{flex-wrap:wrap;gap:10px;display:flex}.preset-list button{border:2px solid var(--ink);background:#fff;border-radius:4px;min-height:50px;padding:.6rem .8rem}.settings-grid{gap:8px;display:grid}.settings-grid select{min-height:44px;margin-left:.5rem}.warning-banner,.notice{border:2px solid var(--ink);background:#fff2a9;padding:.8rem 1rem}.notice{background:#e1f2e9}.metric-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.metric-grid article{border:2px solid var(--ink);background:#fff;flex-direction:column;min-height:150px;padding:1rem;display:flex}.metric-grid strong{font:900 2.2rem var(--font-nunito)}.metric-grid span{margin-top:auto;font-weight:750}.metric-grid small{color:#5d6964}.report-section ul{padding:0;list-style:none}.report-section li{border-bottom:1px solid var(--line);justify-content:space-between;padding:.7rem 0;display:flex}.prose-block{max-width:760px;line-height:1.75}@media (max-width:700px){.home-hero{grid-template-columns:1fr;gap:1.5rem;min-height:auto;padding:2.5rem 0}.hero-copy h1{font-size:clamp(3.2rem,15vw,5rem)}.hero-train{transform-origin:0 100%;width:125%;height:175px;transform:scale(.8)}.mode-list{grid-template-columns:1fr}.mode-link{min-height:96px}.notation-area{min-height:225px}.answer-grid{grid-template-columns:repeat(4,1fr)}.note-button{min-height:64px}.answer-grid .note-button:last-child{grid-column:2/4}.demonstration{flex-direction:column;gap:0}.metric-grid{grid-template-columns:1fr 1fr}.adult-shell{background:var(--paper)}.adult-heading{padding-top:2rem}}@media (orientation:landscape) and (max-height:700px){.game-shell{grid-template-rows:auto 1fr;grid-template-columns:1.15fr .85fr}.game-header,.train-track{grid-column:1/-1}.notation-area{min-height:0}.answer-area{align-self:center}.answer-grid{grid-template-columns:repeat(4,1fr)}.note-button{min-height:64px}.round-actions{min-height:56px}.staff-frame{max-width:620px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}