:root{color-scheme:dark;--ink:#eef3ff;--soft:rgba(236,242,255,.78);--muted:rgba(236,242,255,.55);--line:rgba(173,196,255,.13);--line-strong:rgba(173,196,255,.25);--accent:#a9bfff;--paper:#f1f5ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% 34%,rgba(41,74,184,.13),transparent 23%),radial-gradient(circle at 88% 12%,rgba(73,118,255,.08),transparent 20%),linear-gradient(180deg,#02040d,#030611 50%,#020612)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.11;background-image:radial-gradient(rgba(255,255,255,.4) .6px,transparent .7px);background-size:4px 4px}
button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,4vw,58px);background:rgba(4,7,17,.74);backdrop-filter:blur(18px)}
.back{text-decoration:none;font-size:.91rem;font-weight:690}.back span{margin-left:7px}.back:hover,.closing a:hover{color:#bcd0ff}
.top-label{font-size:.64rem;letter-spacing:.17em;font-weight:750;color:var(--muted)}.top-light,.led,.live-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#a5bbff;box-shadow:0 0 14px rgba(142,171,255,.8)}
.shell{width:min(100% - 40px,1240px);margin:auto}.intro{padding:56px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:0 50px}
.eyebrow,.session,.studio-head strong,.camera-top,.camera-bottom small,.wave-heading>div>span,.wave-badges,.wave-footer,.finger-title>span,.panel-title>span,.closing>span,.piano-top{font-size:.65rem;letter-spacing:.16em;font-weight:750}
.eyebrow{grid-column:1;grid-row:1;color:var(--accent);margin:0 0 14px}.intro h1{grid-column:1;grid-row:2;font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.7rem,5vw,5rem);font-weight:400;letter-spacing:-.055em;line-height:.98;margin:0}.intro h1 em{font-weight:400;color:#a7baf0}
.intro>p:not(.eyebrow){grid-column:2;grid-row:2;align-self:end;max-width:390px;color:var(--soft);font-size:1.03rem;line-height:1.6;margin:0 0 8px}.mode-tabs{grid-column:1/-1;grid-row:3;display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 20px}
.mode-tab,.outline-button,.solid-button{min-height:43px;border:1px solid var(--line-strong);border-radius:100px;background:rgba(255,255,255,.025);color:var(--ink);font-weight:680;transition:border-color .18s,background .18s,transform .18s}.mode-tab{padding:10px 19px;font-size:.82rem}.mode-tab span{font-size:.66rem;color:#8eaaf3;margin-right:9px}.mode-tab.active{background:var(--paper);border-color:var(--paper);color:#09111f}.mode-tab.active span{color:#526da7}.mode-tab:hover,.outline-button:hover,.solid-button:hover{border-color:#a6bdf5;transform:translateY(-1px)}
.studio{background:transparent}.studio-head{min-height:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 5px}.studio-head>div{display:flex;align-items:center;gap:10px}.studio-head strong{color:#dfe9ff}.studio-head small{font-size:.73rem;color:var(--muted);margin-left:6px}.session{color:var(--muted)}
.performance{padding:16px 0 0}.camera-main{position:relative;width:100%;aspect-ratio:16/8.25;min-height:400px;overflow:hidden;border-radius:17px;border:1px solid var(--line-strong);background:radial-gradient(circle at 50% 50%,rgba(51,77,137,.16),transparent 46%),#090d18;box-shadow:0 25px 80px rgba(0,0,0,.22)}
.camera-main:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(150,170,224,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(150,170,224,.025) 1px,transparent 1px);background-size:42px 42px;pointer-events:none}.camera-main video,.camera-main canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-main canvas{pointer-events:none}
.camera-empty{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;color:#a9bbdf}.camera-empty[hidden]{display:none}.camera-empty span{font-size:2.4rem;color:#a9bfff;text-shadow:0 0 35px rgba(145,174,255,.65)}.camera-empty b{font:400 clamp(1.8rem,3.6vw,3.5rem) Georgia,"Times New Roman",serif;letter-spacing:-.04em;color:#e9f0ff}.camera-empty small{font-size:.84rem;color:var(--muted)}
.camera-empty .solid-button{justify-self:center;padding:10px 20px;margin-top:4px}
.camera-top,.camera-bottom{position:absolute;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}.camera-top{top:18px}.camera-top>span,.camera-bottom>div,.camera-bottom>span{background:rgba(4,7,17,.62);border:1px solid rgba(202,219,255,.19);backdrop-filter:blur(14px);border-radius:9px;padding:9px 11px}.camera-top>span{display:flex;align-items:center;gap:8px}.camera-top b{color:#dbe5ff}.camera-bottom{bottom:18px;justify-content:flex-start}.camera-bottom>div{min-width:104px;display:grid;gap:3px}.camera-bottom small{color:#b9c9eb}.camera-bottom strong{font-size:1.7rem;line-height:1;letter-spacing:-.04em}.camera-bottom>span{margin-left:auto;color:#d7e2fa}.camera-actions{display:flex;align-items:center;gap:16px;padding:14px 2px 22px}.camera-actions button{padding:10px 20px}.camera-actions p{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0}.solid-button{background:var(--paper);border-color:var(--paper);color:#09111f}.outline-button{padding:10px 20px}
.wave-section{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.018);overflow:hidden}.wave-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:21px 25px 0}.wave-heading>div>span,.finger-title>span,.panel-title>span{color:#9cb5fb}.wave-heading h2,.panel-title h2{font:400 clamp(1.45rem,2.4vw,2.25rem) Georgia,"Times New Roman",serif;letter-spacing:-.04em;margin:6px 0 0}.wave-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;color:var(--muted)}.wave-badges span{border:1px solid var(--line);border-radius:100px;padding:7px 11px;letter-spacing:.07em}.wave-section canvas{display:block;width:100%;height:235px}.wave-footer{display:flex;justify-content:space-between;gap:12px;padding:0 25px 19px;color:var(--muted)}.wave-footer i{display:inline-block;width:68px;height:3px;margin-left:8px;vertical-align:middle;background:rgba(172,196,247,.15);border-radius:9px;overflow:hidden}.wave-footer i:before{content:"";display:block;width:var(--level,0%);height:100%;border-radius:9px;background:#a9bfff;transition:width .1s}
.finger-map{display:grid;grid-template-columns:235px 1fr;gap:28px;align-items:center;margin:14px 0 0;padding:20px 23px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.012)}.finger-title p{color:var(--soft);font-size:.83rem;line-height:1.5;margin:7px 0 0}.finger-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.finger-steps>div{display:grid;place-content:center;gap:4px;min-height:70px;text-align:center;border:1px solid transparent;border-radius:10px;color:var(--muted);transition:background .18s,border-color .18s}.finger-steps b{font-size:1.2rem;color:var(--ink)}.finger-steps span{font-size:.64rem}.finger-steps>div.current{border-color:rgba(159,185,255,.38);background:rgba(136,163,236,.10);color:#dce7ff}
.panel{margin-top:22px;padding:30px 26px 34px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.012)}.panel[hidden]{display:none}.panel-title p{max-width:780px;color:var(--soft);font-size:.9rem;line-height:1.6;margin:11px 0 22px}.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 20px;border-bottom:1px solid var(--line)}.transport>span{font-size:.78rem;color:var(--muted);margin-left:auto}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}.control-item{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:110px;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.014);font-size:.66rem;letter-spacing:.12em;font-weight:750;color:#aebde0}.control-item select,.piano-controls select{width:100%;border:1px solid var(--line-strong);border-radius:8px;background:#111827;color:var(--ink);padding:9px 11px;font-size:.95rem;letter-spacing:0}.control-item output{font-size:.88rem;letter-spacing:0;color:#e7eeff;font-weight:580}input[type=range]{width:100%;accent-color:#9eb7ff}.segmented{display:flex;gap:6px}.segmented button{flex:1;min-height:34px;padding:7px 4px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;color:var(--soft);font-size:.73rem}.segmented button.chosen{background:#dce6ff;color:#101828;border-color:#dce6ff}.fineprint{font-size:.74rem;color:var(--muted);line-height:1.55;margin:20px 2px 0}
.keyboard-wrap{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.018);padding:17px;margin-top:18px}.piano-top{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:12px}.keyboard{display:flex;height:210px;user-select:none;touch-action:manipulation}.key{position:relative;display:flex;flex:1;min-width:0;align-items:end;justify-content:center;padding-bottom:15px;border:1px solid #a9b9d0;border-bottom:7px solid #9cacc5;border-radius:0 0 6px 6px;background:linear-gradient(#f5f7ff,#dbe3f2);color:#394b67;font-size:.69rem;font-weight:750}.key:hover,.key.active{background:#bad1ff}.key.black{z-index:2;flex:0 0 5%;height:59%;margin-left:-2.5%;margin-right:-2.5%;border-color:#030816;border-bottom:6px solid #01040a;background:linear-gradient(#27354e,#0b1325);color:#fff}.key.black:hover,.key.black.active{background:#5576b7}.piano-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:20px}.piano-controls label{display:grid;gap:8px;color:var(--soft);font-size:.78rem}
.closing{max-width:740px;padding:58px 0 90px}.closing>span{color:#9eb7ff}.closing p{font:400 clamp(1.55rem,2.7vw,2.4rem)/1.28 Georgia,"Times New Roman",serif;letter-spacing:-.02em;color:#dce6fb}.closing a{font-size:.88rem;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:5px}
@media(max-width:900px){.intro{grid-template-columns:1fr;padding-top:36px}.eyebrow,.intro h1,.intro>p:not(.eyebrow),.mode-tabs{grid-column:1;grid-row:auto}.intro h1{font-size:clamp(3rem,8vw,4.5rem)}.intro>p:not(.eyebrow){margin:17px 0 0}.mode-tabs{margin:22px 0 16px}.camera-main{aspect-ratio:4/3;min-height:360px}.finger-map{grid-template-columns:1fr;gap:10px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.piano-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.topbar{height:58px}.top-label{display:none}.shell{width:calc(100% - 30px)}.intro{padding-top:22px}.eyebrow{font-size:.59rem;margin-bottom:10px}.intro h1{font-size:clamp(2.6rem,11.3vw,3.15rem)}.intro>p:not(.eyebrow){font-size:.88rem;line-height:1.45;margin:12px 0 0}.mode-tabs{gap:6px;flex-wrap:nowrap;margin:16px 0 12px}.mode-tab{min-height:37px;padding:8px 10px;white-space:nowrap;font-size:.76rem}.mode-tab span{margin-right:5px}.studio-head{min-height:53px}.studio-head small,.session{display:none}.performance{padding-top:10px}.camera-main{aspect-ratio:3/4;min-height:445px;border-radius:13px}.camera-empty{gap:9px;padding:0 16px}.camera-empty b{font-size:2rem}.camera-empty small{font-size:.76rem}.camera-top,.camera-bottom{left:10px;right:10px}.camera-top{top:10px}.camera-bottom{bottom:10px}.camera-top>span,.camera-bottom>div,.camera-bottom>span{padding:7px 8px}.camera-top>span{font-size:.52rem;letter-spacing:.1em}.camera-bottom>div{min-width:82px}.camera-bottom small{font-size:.47rem;letter-spacing:.11em}.camera-bottom strong{font-size:1.5rem}.camera-bottom>span{font-size:.52rem}.camera-actions{display:grid;gap:8px;padding:11px 2px 16px}.camera-actions button{width:100%}.camera-actions p{font-size:.72rem}.wave-heading{display:block;padding:18px 17px 0}.wave-badges{justify-content:flex-start;margin-top:13px}.wave-section canvas{height:210px}.wave-footer{padding:0 17px 16px;font-size:.59rem}.wave-footer i{width:43px}.finger-map{padding:16px 12px}.finger-steps{gap:2px}.finger-steps>div{min-height:59px}.finger-steps b{font-size:1rem}.finger-steps span{font-size:.49rem}.panel{padding:22px 14px;margin-top:14px}.panel-title p{font-size:.83rem}.transport>span{width:100%;margin-left:0}.transport button{width:100%}.controls{gap:7px}.control-item{min-height:105px;padding:12px;font-size:.58rem}.control-item output{font-size:.78rem}.shape-control{grid-column:1/-1}.keyboard-wrap{padding:12px}.keyboard{height:162px}.key{font-size:.57rem;padding-bottom:8px}.key.black{flex-basis:6%;margin-left:-3%;margin-right:-3%}.piano-controls{gap:18px}.closing{padding:48px 0 70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Portfolio treatment: quieter typography and open sections. */
body:before,.camera-main:before{display:none}.intro{padding-top:32px}.intro h1{font-size:clamp(2.7rem,4vw,4rem)}.eyebrow,.top-label{letter-spacing:.08em}.top-light,.session,.camera-empty>span{display:none}.mode-tabs{margin-top:22px}.studio-head{border-top:0}.camera-main{background:#080b13;border-radius:8px;box-shadow:none;aspect-ratio:16/9}.camera-main video,.camera-main canvas{object-fit:contain}.camera-empty b{font-size:2.2rem}.wave-section,.finger-map,.panel{background:transparent;border-radius:0;border:0;border-bottom:1px solid var(--line)}.wave-heading{padding:20px 0 0}.wave-section canvas{height:170px}.wave-heading h2{font-family:inherit;font-size:1.1rem;letter-spacing:0}.wave-heading>div>span{display:none}.wave-badges span{border:0;padding:0}.wave-footer{padding-left:0;padding-right:0}.finger-map{padding:20px 0}.panel{padding:26px 0}.panel-title h2{font-size:1.9rem}.control-item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 4px}.solid-button,.outline-button,.mode-tab{border-radius:8px}.camera-top>span,.camera-bottom>div,.camera-bottom>span{backdrop-filter:none;background:rgba(5,8,15,.8)}.closing{padding:35px 0 55px}.closing p{font-family:inherit;font-size:1rem;line-height:1.6;letter-spacing:0}.closing>span{display:none}.finger-steps>div.current{border-color:transparent;border-radius:4px;background:rgba(136,163,236,.1)}
@media(max-width:640px){.intro{padding-top:22px}.intro h1{font-size:2.8rem}.camera-main{aspect-ratio:3/4}.camera-empty b{font-size:1.75rem}.camera-empty small{font-size:.73rem}.wave-section canvas{height:180px}.panel{padding:24px 0}.shape-control{grid-column:auto}.segmented{flex-wrap:wrap}.segmented button{min-width:45px}.finger-title p{font-size:.77rem}}
.compare-original{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--soft);padding:10px}.compare-original input{accent-color:var(--accent);width:18px;height:18px}