@charset "UTF-8";
:root{--paper:#f6f4ed;--ink:#253743;--muted:#69716c;--line:#dcded4;--purple:#6b65a4;--coral:#ea8d72;--serif:"Yu Mincho","Hiragino Mincho ProN",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #857ac7;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}button,a,input{touch-action:manipulation}.wrap{width:min(1232px,calc(100% - 96px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;height:108px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:21px;font-weight:650;letter-spacing:.09em}.brand small{display:block;font-size:8px;letter-spacing:.19em;font-weight:500;margin-top:7px}.brand-mark{display:flex;align-items:center;gap:4px;width:36px;height:44px;transform:rotate(-8deg)}.brand-mark i{width:5px;border-radius:6px;background:#7772ac;height:21px}.brand-mark i:nth-child(2){height:38px;background:#b5bf91}.brand-mark i:nth-child(3){height:29px;background:#e29378}.brand-mark i:nth-child(4){height:15px}.site-header nav{display:flex;gap:36px;align-items:center;font-size:12px}.text-button{background:transparent;padding:7px 0;font-size:11px}.site-header .text-button{font-size:12px}.text-button:hover,a:hover{color:var(--purple)}.site-header nav span{margin-left:6px}.intro{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;min-height:351px;padding-block:41px 36px;gap:36px}.eyebrow{font-size:9px;letter-spacing:.18em;font-weight:650;margin:0 0 17px}.tiny-star{color:#7974ac;font-size:21px;vertical-align:middle;margin-right:6px}h1{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.48;letter-spacing:.12em;margin:0 0 16px}.intro-description{font-size:12px;line-height:2.05;color:#636c67;margin:0 0 18px}.intro-link{font-size:11px;font-weight:600;display:flex;gap:28px;width:max-content;border-bottom:1px solid #92988c;padding-bottom:7px}.intro-art{position:relative;align-self:stretch;display:flex;align-items:center}.intro-art svg{width:100%;max-height:280px}.art-caption{position:absolute;right:0;bottom:7px;font-family:var(--serif);font-size:11px;letter-spacing:.08em;writing-mode:vertical-rl}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:19px}.section-heading h2{font-size:16px;font-weight:600;letter-spacing:.04em;margin:0}.step{display:inline-block;margin-right:11px;font-size:10px;font-weight:400;letter-spacing:.08em;color:#777c71;border:1px solid #bec4b3;border-radius:50%;width:27px;line-height:26px;text-align:center;vertical-align:1px}.section-note{font-size:10px;color:var(--muted)}.piece-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.piece-card{display:flex;text-align:left;align-items:center;background:#eeeee5;border:1px solid transparent;border-radius:9px;padding:17px 15px;gap:15px;min-height:111px;position:relative;transition:background .2s,transform .2s,border .2s}.piece-card:hover{transform:translateY(-3px);background:#e8e9e1}.piece-card.selected{border-color:#8c947d;background:#eeeee3}.piece-art{width:73px;height:73px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}.piece-art svg{width:61px;height:61px;fill:none;stroke-width:1.5;stroke:currentColor}.piece-art.elise{background:#f0c3a1;color:#a45a3f}.piece-art.twinkle{background:#d9d9ef;color:#7871a6}.piece-art.turkish{background:#cbd8cb;color:#557a73}.piece-text{display:flex;flex-direction:column;gap:5px}.piece-text small{font-size:8px;letter-spacing:.13em;color:#71746d}.piece-text strong{font-size:15px;font-weight:600}.piece-text>span{font-size:10px;color:#74796e}.piece-choice{position:absolute;right:12px;top:12px;background:#727f64;color:white;font-size:9px;width:17px;line-height:17px;text-align:center;border-radius:50%;opacity:0}.selected .piece-choice{opacity:1}.atelier{margin-top:41px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 314px;background:#fffefa;border:1px solid #dfe0d5;border-radius:12px;overflow:hidden}.stage-column{padding:17px 17px 0;min-width:0}.stage{position:relative;width:100%;aspect-ratio:1.61;border-radius:7px;overflow:hidden;isolation:isolate;background:#eae8dc;--stage-ink:#3c574c}#landscape{display:block;position:absolute;inset:0;width:100%;height:100%}.stage-top{position:absolute;top:18px;left:21px;right:16px;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none;color:var(--stage-ink)}.scene-label{font-size:8px;letter-spacing:.19em;display:flex;gap:7px;align-items:center}.live-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.stage-icon{width:35px;height:35px;display:grid;place-items:center;background:#ffffff75;border-radius:50%;pointer-events:auto;color:var(--stage-ink)}.stage-icon:hover{background:#ffffffc0}.stage-hint{position:absolute;z-index:2;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid #ffffff5c;background:#faf9efdd;color:#46624e;box-shadow:0 6px 30px #3045350a;border-radius:40px;padding:12px 19px;font-size:11px;white-space:nowrap;pointer-events:none;transition:opacity .5s}.stage-hint>span{font-size:18px;vertical-align:-2px;margin-right:6px}.stage-hint.hidden{opacity:0}.touch-surface{position:absolute;z-index:1;inset:0;background:transparent;width:100%;height:100%;cursor:crosshair;touch-action:none;border-radius:7px}.touch-surface:focus-visible{outline-offset:-5px}.stage-bottom{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:var(--stage-ink);z-index:2}#touch-feedback{font-size:9px;letter-spacing:.05em}.beat-dots{display:flex;gap:6px}.beat-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.2;transition:opacity .1s,transform .1s}.beat-dots i.active{opacity:1;transform:scale(1.5)}.player{display:flex;align-items:center;gap:14px;position:relative;padding:19px 5px 23px}.play-button{border-radius:50%;background:#303f42;color:#fffdf1;width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;transition:transform .2s,background .2s}.play-button:hover{background:#616982;transform:scale(1.05)}.now-playing{display:flex;flex-direction:column;gap:3px}.now-playing small{font-size:8px;color:#7d8075}.now-playing strong{font-size:14px;font-weight:600}.now-playing>span{font-size:9px;color:#7d8075}.player-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-left:auto}.loop{padding:0;font-size:17px;line-height:1;color:#747d6b}.loop span{font-size:9px;vertical-align:2px;margin-left:3px}.loop[aria-pressed=false]{opacity:.45}.player-right>span{font-size:9px;color:#84877c;font-variant-numeric:tabular-nums}.progress-track{height:2px;position:absolute;bottom:6px;left:5px;right:5px;background:#e8e8de;border-radius:4px;overflow:hidden}#progress{height:100%;background:#919c80;width:0}.sound-note{font-size:9px;color:#7e8378;margin:10px 5px 15px;line-height:1.8}.controls{padding:25px 23px;background:#f2f2e9;border-left:1px solid #dfe0d5;display:flex;flex-direction:column;gap:22px}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:11px}.control-heading h3,.control-heading label{font-size:12px;font-weight:600;letter-spacing:.02em;margin:0}.control-heading>span,.control-heading output{font-size:9px;color:#7c8176}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.instrument{background:transparent;display:flex;align-items:center;flex-direction:column;gap:4px;padding:8px 0;border-radius:6px;border:1px solid #d7dbcf;min-height:69px;transition:background .15s,border .15s}.instrument:hover{background:#e4e8da}.instrument.selected{background:#dfe5d2;border-color:#8d9b79}.instrument svg{width:32px;height:31px;fill:none;stroke:#526248;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.instrument .filled{fill:#526248;stroke:none}.instrument span{font-size:8px;white-space:nowrap}.instrument-description{font-size:9px;color:#75806d;margin:9px 0 0;line-height:1.7;min-height:15px}.segmented{display:flex;background:#e6e8dc;padding:3px;border-radius:6px;gap:2px}.segmented button{background:transparent;flex:1;padding:8px 2px;font-size:10px;border-radius:4px;white-space:nowrap}.segmented button.selected{background:#fffef7;box-shadow:0 1px 4px #3141300c}.segmented span{margin-right:3px;font-size:13px}.palette-row{display:flex;gap:10px}.palette{display:flex;align-items:center;gap:0;padding:5px;background:transparent;border:1px solid transparent;border-radius:30px;position:relative}.palette.selected{border-color:#8b947d}.palette>i{width:13px;height:23px;display:block;background:#e58a72}.palette>i:first-child{border-radius:20px 0 0 20px;background:#eece96}.palette>i:nth-child(3){border-radius:0 20px 20px 0;background:#adbf94}.palette.cool i:first-child{background:#a3d4d5}.palette.cool i:nth-child(2){background:#769dbb}.palette.cool i:nth-child(3){background:#c1c3e6}.palette.dream i:first-child{background:#d7b3d2}.palette.dream i:nth-child(2){background:#a89acb}.palette.dream i:nth-child(3){background:#eecca7}.palette.forest i:first-child{background:#d1d598}.palette.forest i:nth-child(2){background:#7d9a78}.palette.forest i:nth-child(3){background:#547d7a}.palette-check{position:absolute;width:12px;line-height:12px;background:#3c5039;border-radius:50%;color:#fff;font-size:8px;bottom:0;right:0;display:none}.palette.selected .palette-check{display:block}input[type=range]{display:block;width:100%;height:4px;margin:15px 0 7px;accent-color:#798765;cursor:pointer;-webkit-appearance:none;appearance:none;background:#d7dccb;border-radius:5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#6e7c5c;border:2px solid #f7f7f0;border-radius:50%;box-shadow:0 0 0 1px #8b977b}input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#6e7c5c;border:2px solid #f7f7f0;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:8px;color:#838a77;margin-top:10px}.volume-group .control-heading{margin-bottom:0}.volume-group .text-button{font-size:9px;padding:0}.volume-group input{margin-top:15px}.surprise{background:transparent;border:1px solid #aeb69e;border-radius:5px;padding:12px;font-size:10px;display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:auto}.surprise:hover{background:#e4e8d8}.surprise>span:first-child{font-size:17px}.discovery{display:grid;grid-template-columns:.86fr 1fr 1fr;gap:22px;margin-top:63px;margin-bottom:58px}.discovery-intro{padding:12px 0}.discovery-intro .eyebrow{font-size:8px;color:#7c8275;margin-bottom:15px}.discovery-intro h2{font-family:var(--serif);font-size:23px;line-height:1.7;font-weight:500;letter-spacing:.06em;margin:0 0 13px}.discovery-intro>p:last-child{font-size:10px;line-height:1.9;color:#7b8177}.challenge{position:relative;border-radius:8px;background:#e5e5f0;padding:28px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}.challenge.peach{background:#f0e4d5}.challenge-number{font-size:8px;letter-spacing:.15em;color:#747386}.challenge h3{font-size:16px;font-weight:600;letter-spacing:.03em;margin:27px 0 10px;z-index:1}.challenge p{font-size:10px;line-height:1.9;color:#71747a;margin:0 0 24px;z-index:1}.challenge-button{background:transparent;font-size:9px;border-bottom:1px solid #a9a6b7;padding:0 0 7px;position:relative;z-index:1;display:flex;justify-content:space-between;width:100%;margin-top:auto}.challenge-button:hover{color:#7971a7}.challenge-doodle{position:absolute;width:82px;height:82px;top:10px;right:10px;fill:none;stroke:#b6b5d3;stroke-width:1.1;opacity:.8}.peach .challenge-doodle{stroke:#cfa88c}.site-footer{border-top:1px solid var(--line);padding-block:27px 35px;display:flex;align-items:center;gap:30px;justify-content:space-between}.footer-brand{font-size:13px;font-weight:600;letter-spacing:.05em}.footer-brand>span{display:block;font-size:8px;font-weight:400;letter-spacing:.03em;color:#7a8074;margin-top:7px}.site-footer p{font-size:8px;line-height:1.9;color:#7a8074;margin:0}.site-footer .text-button{font-size:9px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#2e4344;color:white;padding:12px 22px;border-radius:30px;font-size:11px;z-index:20;transition:opacity .2s,transform .2s;max-width:90vw;width:max-content;box-shadow:0 3px 25px #27393826}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #dce0d3;border-radius:14px;background:#f9f8f1;color:var(--ink);padding:42px;width:min(510px,calc(100vw - 32px));max-height:85vh;box-shadow:0 30px 120px #1b353433}dialog::backdrop{background:#1c303a80;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:14px;top:10px;background:transparent;font-size:26px;color:#7b8277;width:36px;height:36px}dialog h2{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 0 26px}dialog ol{padding-left:20px;margin:0}dialog li{padding-left:8px;margin-bottom:22px;font-size:13px}dialog li span{display:block;color:#75806f;font-size:11px;line-height:1.9;margin-top:6px}dialog p:not(.eyebrow){font-size:12px;line-height:2;color:#647264}dialog .dialog-note{font-size:10px!important;border-top:1px solid #dce0d3;padding-top:17px}.primary{border-radius:5px;background:#41554c;color:white;font-size:12px;padding:13px 24px;margin-top:12px}.skip-link{position:fixed;left:12px;top:-80px;z-index:40;padding:14px;background:white}.skip-link:focus{top:10px}
@media(min-width:1400px){.intro{min-height:370px}h1{font-size:48px}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.studio{grid-template-columns:minmax(0,1fr) 285px}.controls{padding:22px 18px;gap:21px}.stage{aspect-ratio:1.3}.piece-card{gap:10px;padding:16px 12px}.piece-art{width:59px;height:59px}.piece-art svg{width:50px}.piece-text strong{font-size:13px}.intro{grid-template-columns:1fr 1.15fr;gap:10px}h1{font-size:39px}.challenge{padding:23px}.challenge h3{font-size:14px}.discovery{gap:16px}.instrument span{font-size:7px}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.site-header{height:83px}.brand{font-size:17px;gap:9px}.brand small{font-size:6px}.brand-mark{transform:scale(.85) rotate(-8deg);width:29px}.site-header nav{gap:18px}.site-header nav>a{display:none}.site-header nav .text-button{font-size:10px}.intro{min-height:0;padding-block:28px 30px;grid-template-columns:1.1fr 1fr;position:relative;gap:0}h1{font-size:30px;line-height:1.5;letter-spacing:.06em}.intro .eyebrow{font-size:7px;letter-spacing:.12em;white-space:nowrap}.tiny-star{font-size:17px}.intro-description{font-size:10px;line-height:1.9;position:relative;z-index:1;width:215px}.intro-art{margin-left:-24px;align-self:start;margin-top:28px}.intro-art svg{overflow:visible}.art-caption{display:none}.intro-link{font-size:10px;gap:18px}.section-heading{margin-bottom:14px}.section-heading h2{font-size:13px}.step{width:23px;line-height:22px;margin-right:6px;font-size:9px}.section-note{display:none}.piece-grid{gap:8px}.piece-card{padding:13px 7px;flex-direction:column;gap:11px;text-align:center;min-height:158px}.piece-art{width:55px;height:55px}.piece-art svg{width:45px;height:45px}.piece-text{gap:6px}.piece-text small{font-size:6px;letter-spacing:.06em}.piece-text strong{font-size:11px;letter-spacing:-.03em}.piece-text>span{font-size:8px}.piece-choice{width:13px;line-height:13px;font-size:8px;top:7px;right:7px}.atelier{margin-top:31px}.atelier .section-heading>.text-button{font-size:9px}.studio{grid-template-columns:1fr}.stage-column{padding:11px 11px 0}.stage{aspect-ratio:1.25}.stage-hint{font-size:9px;padding:10px 13px}.stage-top{top:12px;left:15px;right:10px}.scene-label{font-size:7px}.stage-bottom{left:15px;right:15px;bottom:14px}#touch-feedback{font-size:8px}.player{gap:11px;padding-block:17px 22px}.now-playing strong{font-size:13px}.now-playing>span{font-size:8px}.play-button{width:44px;height:44px}.player-right>span{font-size:8px}.sound-note{font-size:8px;margin-bottom:13px}.controls{border-left:0;border-top:1px solid #dfe0d5;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:23px 18px}.instrument-group{grid-column:1/-1}.instrument-grid{gap:9px}.instrument{padding:10px 0;min-height:77px}.instrument svg{width:36px;height:33px}.instrument span{font-size:9px}.instrument-description{font-size:10px;margin-top:10px}.control-heading{min-height:19px}.control-heading h3,.control-heading label{font-size:11px}.control-heading span,.control-heading output{font-size:8px}.control-heading:has(#palette-label){flex-wrap:wrap;gap:5px}.palette-row{gap:3px;justify-content:space-between}.palette{padding:4px}.palette>i{width:10px;height:22px}.segmented button{font-size:9px;padding:9px 2px}.segmented span{display:block;font-size:14px;margin:0 0 3px}.volume-group .control-heading{margin-bottom:11px}.surprise{grid-column:1/-1;justify-content:center;font-size:11px;gap:21px;padding:11px}.discovery{grid-template-columns:1fr 1fr;margin-block:36px;gap:12px}.discovery-intro{grid-column:1/-1;padding-bottom:12px}.discovery-intro h2{font-size:23px;margin:0;line-height:1.6}.discovery-intro h2 br{display:none}.discovery-intro>p:last-child{margin-bottom:0}.discovery-intro>p:last-child br{display:none}.discovery-intro .eyebrow{margin-bottom:10px}.challenge{padding:20px 16px;min-height:240px}.challenge h3{font-size:12px;margin-top:43px}.challenge p{font-size:9px}.challenge-button{font-size:8px;gap:3px;align-items:flex-end;line-height:1.7;text-align:left}.challenge-doodle{width:65px;height:65px}.site-footer{display:grid;grid-template-columns:1fr auto;gap:17px;padding-block:25px}.site-footer p{grid-row:2;grid-column:1/-1;font-size:8px}.site-footer .text-button{font-size:8px}.footer-brand{font-size:12px}.footer-brand>span{font-size:7px}dialog{padding:36px 25px}dialog h2{font-size:21px}.toast{font-size:10px;padding:11px 16px}}
@media(max-width:360px){.wrap{width:calc(100% - 24px)}h1{font-size:27px}.intro-art{opacity:.65}.controls{padding:17px;column-gap:10px}.piece-text strong{font-size:10px}.palette>i{width:9px}.control-heading output{font-size:7px}.challenge{padding:17px 12px}.challenge h3{font-size:11px}.section-heading h2{font-size:12px}.atelier .section-heading>.text-button{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.piece-card:hover{transform:none}}

/* Concert identity stays visible above the playful gallery. */
.concert-banner{margin-top:24px;padding:17px 22px;border:1px solid #d6ddc9;border-radius:8px;background:#e9eddf;display:flex;align-items:center;justify-content:space-between;gap:20px}.concert-kicker{margin:0 0 7px;font-size:8px;letter-spacing:.18em;color:#75816c}.concert-name{margin:0;font-size:18px;font-weight:600;letter-spacing:.06em;line-height:1.7}.concert-welcome{display:flex;align-items:center;gap:18px;margin:0;font-size:11px;white-space:nowrap;color:#66765a}.concert-welcome span{color:#bc866b;font-size:27px}.beat-dots i[hidden]{display:none}@media(max-width:760px){.concert-banner{margin-top:18px;padding:15px 16px;display:block}.concert-kicker{font-size:7px;margin-bottom:7px}.concert-name{font-size:15px;letter-spacing:.01em;line-height:1.8}.concert-welcome{font-size:9px;gap:10px;margin-top:7px}.concert-welcome span{font-size:17px}}