/* A soft playable board: objects, not piano keys or hardware panels. */
:root{--surface:#fff1fa;--ink:#765c7e;--line:#d8bfd755}body{background:radial-gradient(at 10% 10%,#DBFDFF,transparent 55%),radial-gradient(at 90% 80%,#FFE2EC,transparent 65%),#FBE6FF;padding:0 24px 30px}.console{background:#fff8fd88;border:1px solid #fff9;border-radius:56px;box-shadow:inset 0 3px 3px white,0 18px 65px #88688b18;padding:24px 36px 0;backdrop-filter:blur(14px)}.console:before,.console:after{display:none}.console-top{border:0}.hardware-label{color:var(--muted)}.fidget-studio{grid-template-columns:1fr 1fr;gap:0}.fidget-studio .instrument{grid-column:auto;grid-row:auto;border:0;background:none;padding:24px 28px;filter:none;position:relative}.fidget-studio .instrument-top{font:11px Arial;letter-spacing:2px}.fidget-studio h2{display:block;font-size:15px;color:var(--muted);letter-spacing:0;margin:8px 0 0}.fidget-studio .instrument>p:not(.hint){display:none}.fidget-studio .rhythm-panel{border-right:1px dashed var(--line)}.fidget-studio .fx-panel{border-right:1px dashed var(--line)}.fidget-studio .fx-panel,.fidget-studio .vocal-panel{border-top:1px dashed var(--line)}.rhythm-bubbles{display:grid;grid-template-columns:repeat(3,1fr);max-width:390px;padding:28px 8px 20px;gap:22px;margin:auto}.instrument button.bubble{border:0!important;border-radius:50%!important;aspect-ratio:1;min-height:60px!important;background:radial-gradient(ellipse at 32% 20%,#fffc,transparent 52%),linear-gradient(140deg,#ffeaf7,#dcb2d3)!important;box-shadow:8px 10px 15px #b594af40,-4px -4px 10px #fff9,inset 2px 2px 3px white,inset -4px -5px 8px #b07d9f44!important;color:#8e6c87!important;font-size:11px!important;transition:transform .15s}.instrument button.bubble:nth-child(n+4){background:radial-gradient(ellipse at 32% 20%,#fffe,transparent 52%),linear-gradient(140deg,#e1ffff,#afdadc)!important}.instrument button.bubble[aria-pressed=true],.instrument button.bubble:active{transform:scale(.9);box-shadow:inset 5px 6px 14px #a6779944!important}.sample-fidgets{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;padding:30px 0 22px}.instrument button.sample-toy{height:105px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;border:0;border-radius:43% 57% 61% 39% / 50% 40% 60% 50%;background:radial-gradient(at 30% 20%,#fff,#dbfdff 40%,#a9cfd9);box-shadow:inset 3px 4px 7px #fff, inset -5px -7px 9px #7589a344,7px 10px 14px #9b85952a;color:#73899b;touch-action:none;user-select:none;transition:transform .2s}.sample-toy:nth-child(3n+2){background:radial-gradient(at 30% 20%,#fff,#FBE6FF 40%,#cfb2db)!important;border-radius:35% 45% 30% 40%!important;transform:rotate(8deg)}.sample-toy:nth-child(3n){background:radial-gradient(at 30% 20%,#fff,#FFE2EC 40%,#dcaabd)!important;border-radius:50% 45% 48% 25%!important;transform:rotate(-8deg)}.sample-toy b{font-size:30px;font-weight:400}.sample-toy small{font-size:10px}.instrument button.sample-toy.playing{transform:scale(.85) rotate(4deg);box-shadow:inset 5px 6px 15px #8f789455,0 0 28px #fff}.sample-tools{display:flex;gap:8px;flex-wrap:wrap}.instrument button:not(.bubble):not(.sample-toy):not(.rotary):not(.step),.intent button,.record{border-radius:22px!important;box-shadow:none!important;min-height:40px}.fine{margin-top:16px}.fine summary{font-size:11px;color:var(--muted);cursor:pointer;padding:10px 0}.fine .controls{padding-bottom:12px}.instrument select,.file-button{border-radius:18px}.silk{width:85%;max-width:380px;height:205px;border-radius:60px 90px 65px 75px;margin:30px auto}.ring-area{padding:22px}.ring{width:206px;height:206px}.ring-hole{width:124px;height:124px}.ring-mark{top:12px;transform-origin:4px 91px}.ring-hole span{font-size:14px}.fx-panel .controls{margin:18px auto}.mixer{border-color:var(--line)}.presets,.presets button{border-radius:30px}.intent button{border-color:var(--line);background:#fff5}.intent button[aria-pressed=true]{background:#dbfdff!important;color:#597e84}#status{background:transparent;color:var(--muted);box-shadow:none;font:11px Arial;padding:4px;min-width:0}.brand{font-family:Georgia,serif;font-size:30px}.brand span{font-family:Arial}.dark{--ink:#ebd6ef;--muted:#bba9ca;--line:#cfafe32b;--bg:#231d36;--surface:#332b47}.dark{background:radial-gradient(at 10% 10%,#304654,transparent 60%),radial-gradient(at 95% 95%,#543448,transparent 60%),#211c30}.dark .console{background:#292238bd;border:1px solid #9d77b42c;border-radius:56px;box-shadow:inset 0 2px #af8dc52a,0 18px 65px #08051044}.dark .intent button[aria-pressed=true]{background:#735678!important;color:#fbe6ff}.dark .instrument .controls label{color:var(--ink)}.dark .instrument button,.dark .instrument select{color:#6d567b}.dark .sample-toy,.dark .bubble,.dark .silk,.dark .ring{filter:brightness(.8) saturate(.8)}#visuals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:.6}.top-actions{position:relative;z-index:5}header,main{position:relative}.step{min-width:24px}.sequence-scroll{overflow:auto}.sequencer{min-width:530px}.sample-tools button.recording{background:#d78ba9!important;color:white!important}.instrument .hint{min-height:14px}.touch-active{box-shadow:0 0 50px #d7bbfaaa!important}
@media(max-width:850px){.console{padding:18px 18px 0}.fidget-studio .instrument{padding:22px 15px}.sample-fidgets{gap:18px 10px}.instrument button.sample-toy{height:86px}.rhythm-bubbles{gap:16px}.brand span{display:none}}
@media(max-width:620px){body{padding:0 10px 20px}.console,.dark .console{border-radius:32px;padding:16px 14px 0}.fidget-studio{grid-template-columns:minmax(0,1fr)}.fidget-studio .instrument{padding:22px 4px;border-right:0;border-top:1px dashed var(--line)}.sample-fidgets{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}.instrument button.sample-toy{height:90px;padding:6px}.rhythm-bubbles{max-width:330px}.silk{height:190px}.top-actions{gap:4px}.top-actions button{font-size:11px;padding:8px}.brand{font-size:25px}.deck-top{display:block}.toolbar{margin-top:14px}.mixer{grid-template-columns:repeat(3,minmax(0,1fr))}.mixer label{width:100%}.instrument .controls{flex-wrap:wrap}.file-button{min-height:44px}.ring{width:190px;height:190px}.ring-mark{transform-origin:4px 83px}.console-top{display:none}}