:root{font-family:Inter,ui-rounded,SF Pro Rounded,Avenir Next,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;--paper: #f2ead8;--paper-soft: #fbf6ea;--ink: #1c2925;--ink-muted: #59655f;--line: #b8aa8d;--board: #d8c293;--board-deep: #bfa16e;--board-dot: rgba(78, 64, 42, .16);--shadow: rgba(60, 45, 25, .16);--hit-zone: rgba(18, 22, 20, .001);--amber: #d56e35;--amber-soft: #efb071;--teal: #167d7d;--teal-soft: #77c5b6;--rose: #b94e63;--rose-soft: #e18b9b;--indigo: #5557a6;--indigo-soft: #9296dc;--focus: #146a75;color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:280px;min-height:100vh;min-height:100svh;overflow-x:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,[role=button]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.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}.app-shell{min-height:100vh;min-height:100svh;padding:max(22px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));background:radial-gradient(circle at 12% 8%,var(--paper-soft) 0 18%,transparent 42%),var(--paper)}.masthead{width:min(100%,920px);margin:0 auto 18px;padding-right:96px;display:grid;gap:8px}.eyebrow,.micro-label{margin:0;color:var(--ink-muted);font-size:.72rem;font-weight:800;line-height:1.35;letter-spacing:.16em;text-transform:uppercase}h1,h2,p{overflow-wrap:anywhere}h1{margin:3px 0 0;font-size:clamp(2.35rem,10vw,4.8rem);line-height:1.05;letter-spacing:-.055em}.intro{margin:0;max-width:34rem;color:var(--ink-muted);font-size:clamp(1rem,4.4vw,1.25rem);line-height:1.45}.studio-layout{width:min(100%,920px);margin:0 auto;display:grid;gap:14px}.instrument-panel,.control-panel,.pitch-card,.audio-card{min-width:0}.instrument-panel{padding:14px;border:1px solid var(--line);border-radius:28px;background:var(--paper-soft);box-shadow:0 18px 48px var(--shadow)}.panel-heading{min-height:50px;padding:0 4px 12px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}.panel-heading h2{min-width:max-content;margin:3px 0 0;font-size:1.2rem;line-height:1.35;overflow-wrap:normal}.gesture-key{flex:0 0 auto;margin-left:auto;color:var(--ink-muted);font-size:.68rem;font-weight:800;line-height:1.4;letter-spacing:.12em}.instrument-board{position:relative;width:100%;aspect-ratio:1000 / 680;min-height:196px;overflow:hidden;border:1px solid var(--board-deep);border-radius:22px;background:radial-gradient(circle,var(--board-dot) 0 2px,transparent 2.5px) 0 0 / 34px 34px,linear-gradient(145deg,var(--board),var(--board-deep));touch-action:none;user-select:none;-webkit-user-select:none}.string-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.string-underlay,.string-core,.vibration,.string-hit{fill:none;vector-effect:non-scaling-stroke}.string-underlay{stroke:var(--shadow);stroke-width:12;transform:translateY(5px)}.string-core{stroke-width:7;stroke-linecap:round;transition:stroke-width .14s ease,opacity .14s ease}.band-0 .string-core,.band-0 .vibration{stroke:var(--amber)}.band-1 .string-core,.band-1 .vibration{stroke:var(--teal)}.band-2 .string-core,.band-2 .vibration{stroke:var(--rose)}.band-3 .string-core,.band-3 .vibration{stroke:var(--indigo)}.band-selected .string-core{stroke-width:9}.string-hit{stroke:var(--hit-zone);stroke-width:56;stroke-linecap:round;cursor:grab;pointer-events:stroke}.string-hit:active{cursor:grabbing}.string-hit:focus-visible{stroke:var(--focus);stroke-opacity:.28}.vibration{stroke-width:5;stroke-linecap:round;opacity:0;pointer-events:none}.vibration-a{animation:vibration-a var(--vibration-duration) cubic-bezier(.2,.8,.2,1) both}.vibration-b{animation:vibration-b var(--vibration-duration) cubic-bezier(.2,.8,.2,1) both}@keyframes vibration-a{0%,to{opacity:0}10%,38%,66%{opacity:.78}24%,52%,82%{opacity:.12}}@keyframes vibration-b{0%,12%,to{opacity:0}24%,52%,80%{opacity:.68}38%,66%,92%{opacity:.08}}.peg{position:absolute;z-index:4;width:52px;height:52px;min-width:52px;min-height:52px;padding:0;border:1px solid var(--ink);border-radius:50%;background:var(--paper-soft);box-shadow:0 7px 0 var(--shadow);transform:translate(-50%,-50%);touch-action:none;cursor:grab}.peg:before,.peg span[aria-hidden=true]{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--ink)}.peg:active{transform:translate(-50%,calc(-50% + 3px));box-shadow:0 4px 0 var(--shadow);cursor:grabbing}.peg-selected{border-color:var(--focus)}.peg-0{color:var(--amber)}.peg-1{color:var(--teal)}.peg-2{color:var(--rose)}.peg-3{color:var(--indigo)}.peg-0:after,.peg-1:after,.peg-2:after,.peg-3:after{content:"";position:absolute;inset:17px;border-radius:50%;background:currentColor}.board-instruction{position:absolute;left:50%;bottom:10px;z-index:3;margin:0;padding:5px 10px;border-radius:999px;color:var(--ink-muted);background:var(--paper-soft);font-size:.64rem;font-weight:900;line-height:1.4;letter-spacing:.13em;transform:translate(-50%)}.control-panel{display:grid;gap:10px}.pitch-card,.audio-card{border:1px solid var(--line);border-radius:20px;background:var(--paper-soft)}.pitch-card{min-height:104px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px}.pitch-card strong{display:block;margin-top:4px;font-size:1rem;line-height:1.45}.pitch-card>p{grid-column:1 / -1;margin:0;color:var(--ink-muted);font-size:.76rem;line-height:1.45}.pitch-reading{text-align:right}.pitch-reading strong{margin:0;font-size:2rem;line-height:1.15;letter-spacing:-.04em}.pitch-reading span{display:block;color:var(--ink-muted);font-size:.76rem;line-height:1.45}.action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action-row button{min-height:52px;padding:10px 12px;border:1px solid var(--ink);border-radius:16px;background:var(--ink);color:var(--paper-soft);font-weight:800;line-height:1.3;cursor:pointer}.action-row .secondary-action{background:var(--paper-soft);color:var(--ink)}.action-row button:active:not(:disabled){transform:translateY(2px)}.action-row button:disabled{border-color:var(--line);background:var(--line);color:var(--ink-muted);cursor:not-allowed}.audio-card{min-height:72px;padding:13px 15px;display:flex;align-items:center;gap:12px}.audio-card strong{display:block;margin-top:2px;font-size:.9rem;line-height:1.4}.sound-mark{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at center,var(--teal) 0 4px,transparent 5px),repeating-radial-gradient(circle at center,transparent 0 7px,var(--teal-soft) 8px 9px,transparent 10px 13px)}.audio-playing .sound-mark{animation:sound-ring .7s ease-out infinite}@keyframes sound-ring{0%,to{transform:scale(.92)}50%{transform:scale(1.05)}}.audio-unavailable .sound-mark,.audio-suspended .sound-mark{filter:grayscale(1)}.storage-note,.status-line{margin:0;color:var(--ink-muted);font-size:.76rem;line-height:1.5}.storage-note{padding:0 4px}.storage-unavailable,.storage-recovered{color:var(--ink);font-weight:700}.status-line{width:min(100%,920px);min-height:42px;margin:10px auto 0;padding:10px 12px;border-top:1px solid var(--line)}.gallery-shell{min-height:100vh;min-height:100svh;padding:34px 22px 26px;display:grid;grid-template-rows:auto minmax(210px,1fr) auto;gap:18px;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 15% 10%,var(--paper-soft) 0 16%,transparent 44%),var(--paper)}.gallery-copy{max-width:25rem}.gallery-copy h1{font-size:clamp(2.5rem,13vw,4.6rem)}.gallery-copy>p:last-child,.gallery-note{margin:8px 0 0;color:var(--ink-muted);font-size:1rem;line-height:1.45}.gallery-board{width:100%;align-self:center;aspect-ratio:1000 / 680;border:1px solid var(--board-deep);border-radius:26px;background:radial-gradient(circle,var(--board-dot) 0 2px,transparent 2.5px) 0 0 / 34px 34px,linear-gradient(145deg,var(--board),var(--board-deep));box-shadow:0 18px 48px var(--shadow)}.gallery-board svg{width:100%;height:100%;overflow:visible}.gallery-shadow,.gallery-string,.gallery-pulse{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}.gallery-shadow{stroke:var(--shadow);stroke-width:14}.gallery-string{stroke-width:8}.gallery-string-one{stroke:var(--amber)}.gallery-string-two{stroke:var(--teal)}.gallery-pulse{stroke-width:5;stroke-dasharray:26 44;opacity:.72}.gallery-pulse-one{stroke:var(--amber-soft);animation:gallery-pulse-one 2.8s linear infinite}.gallery-pulse-two{stroke:var(--teal-soft);animation:gallery-pulse-two 3.3s .38s linear infinite}.gallery-peg{fill:var(--paper-soft);stroke:var(--ink);stroke-width:5}@keyframes gallery-pulse-one{0%{stroke-dashoffset:0;opacity:.26}22%{opacity:.82}58%{opacity:.62}to{stroke-dashoffset:-280;opacity:.26}}@keyframes gallery-pulse-two{0%{stroke-dashoffset:0;opacity:.24}28%{opacity:.74}64%{opacity:.58}to{stroke-dashoffset:280;opacity:.24}}@media(min-width:620px){.control-panel{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}.action-row,.storage-note{grid-column:2}.pitch-card{grid-row:span 2}}@media(min-width:560px)and (max-height:520px)and (min-aspect-ratio:3 / 2)and (max-aspect-ratio:3 / 1){.app-shell{position:relative;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}.masthead{position:absolute;top:18px;left:24px;z-index:5;width:min(34vw,290px);margin:0;padding:8px 12px;border-radius:14px;background:var(--paper-soft);box-shadow:0 8px 24px var(--shadow);pointer-events:none}.masthead h1{font-size:clamp(1.55rem,4.8vw,2.4rem)}.masthead .intro{display:none}.studio-layout{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(248px,34vw);align-items:stretch}.instrument-panel{min-height:calc(100svh - 20px);padding:8px;display:grid;place-items:center}.panel-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.instrument-board{width:min(100%,calc((100svh - 38px) * 1000 / 680));min-height:0;max-height:calc(100svh - 38px)}.control-panel{max-height:calc(100svh - 20px);padding-top:58px;display:flex;flex-direction:column;overflow-y:auto}.pitch-card{min-height:92px;padding:12px}.audio-card{min-height:64px;padding:10px 12px}.status-line{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.gallery-shell{grid-template-columns:minmax(220px,.45fr) minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;padding:18px 24px}.gallery-board{max-height:calc(100svh - 36px)}.gallery-note{grid-column:1}}@media(prefers-color-scheme:dark){:root{--paper: #151a19;--paper-soft: #202725;--ink: #f2ead8;--ink-muted: #b8c1bb;--line: #49534e;--board: #66583e;--board-deep: #443c2c;--board-dot: rgba(245, 236, 214, .12);--shadow: rgba(0, 0, 0, .34);--hit-zone: rgba(255, 255, 255, .001);--amber: #f2a15f;--amber-soft: #fac58e;--teal: #68c7bc;--teal-soft: #94ddd2;--rose: #ec8fa1;--rose-soft: #f4b4c0;--indigo: #adb1ff;--indigo-soft: #d0d2ff;--focus: #8de6ee;color-scheme:dark}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important}.gallery-pulse,.audio-playing .sound-mark{animation:none}.gallery-pulse{opacity:.55}.vibration{animation:none;opacity:.58;stroke-width:8}}@media(forced-colors:active){.instrument-board,.gallery-board{background:Canvas}.string-core,.vibration,.gallery-string,.gallery-pulse{stroke:ButtonText}.peg,.action-row button{forced-color-adjust:none;border-color:ButtonText;background:ButtonFace;color:ButtonText}}