/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, 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;--spacing:.25rem;--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,ui-sans-serif, system-ui, 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{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}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}}:root{--paper:#f6f0e5;--ink:#2f3432;--muted-ink:#766f64;--line:#8a8174;--coral:#e97862;--sky:#69a9c8;--ochre:#d6a743;--grass:#79a267;--soft-shadow:#d9cfbe;--font-round:ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif}*{box-sizing:border-box}html{background:var(--paper);min-height:100%}body{background:var(--paper);min-height:100%;color:var(--ink);font-family:var(--font-round);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #2f3432}.oto-app{width:100%;height:100dvh;min-height:420px;padding:max(14px, env(safe-area-inset-top)) max(clamp(14px, 3vw, 44px), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(clamp(14px, 3vw, 44px), env(safe-area-inset-left));background:var(--paper);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.6vh,18px);display:grid;overflow:hidden}.app-header{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:clamp(18px,4vw,64px);min-width:0;display:grid}.instrument-picker{align-items:flex-start;gap:clamp(8px,1.5vw,20px);min-width:0;display:flex}.instrument-choice{cursor:pointer;background:0 0;border:0;justify-items:center;gap:7px;width:clamp(64px,7vw,94px);padding:0;display:grid}.instrument-orb{aspect-ratio:1;border:1.5px solid var(--line);background:var(--paper);border-radius:50%;place-items:center;width:clamp(58px,6vw,82px);transition:transform .14s,border-color .14s,box-shadow .14s;display:grid;position:relative}.instrument-choice:hover .instrument-orb{transform:translateY(-2px)}.instrument-choice:active .instrument-orb{transform:translateY(2px)scale(.98)}.instrument-choice.is-selected .instrument-orb{border:3px solid var(--ink);box-shadow:0 3px 0 var(--soft-shadow)}.instrument-icon{width:70%;height:70%;color:var(--choice-color)}.selection-dot{background:var(--ink);opacity:0;border-radius:50%;width:13px;height:13px;transition:opacity .14s,transform .14s;position:absolute;top:-2px;right:3px;transform:scale(.5)}.instrument-choice.is-selected .selection-dot{opacity:1;transform:scale(1)}.instrument-label{letter-spacing:.01em;white-space:nowrap;font-size:clamp(.76rem,1.25vw,1.05rem);font-weight:750;line-height:1}.mode-switch{border:1.5px solid var(--line);background:var(--paper);width:clamp(250px,26vw,360px);height:clamp(54px,5.4vw,70px);box-shadow:0 3px 0 var(--soft-shadow);border-radius:999px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.mode-switch button{cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;min-width:0;font-size:clamp(.88rem,1.4vw,1.18rem);font-weight:780;transition:background-color .15s,color .15s,transform .1s;display:flex}.mode-switch button+button{border-left:1.5px solid var(--line)}.mode-switch button.is-selected{background:var(--coral);color:#fffaf2}.mode-switch button:active{transform:translateY(2px)}.mode-switch svg{flex:none;width:23px;height:23px}.play-region{min-width:0;min-height:0;position:relative}.instrument-stage{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;place-items:center;width:100%;height:100%;min-height:0;display:grid;position:relative;overflow:hidden}.rhythm-strip{z-index:20;border:1.5px solid var(--line);background:var(--paper);min-height:40px;box-shadow:0 3px 0 var(--soft-shadow);border-radius:999px;align-items:center;gap:11px;padding:6px 8px 6px 14px;display:flex;position:absolute;top:2px;left:50%;transform:translate(-50%)}.rhythm-word{text-align:center;width:3.5em;font-size:.82rem;font-weight:780}.beat-dots{align-items:center;gap:7px;display:flex}.beat-dots span{border:1.5px solid var(--line);background:var(--paper);border-radius:50%;width:11px;height:11px;transition:transform .14s,background-color .14s}.beat-dots span.is-active{background:var(--coral);transform:translateY(-3px)}.rhythm-repeat{cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:30px;height:30px;padding:0;display:grid}.rhythm-repeat:hover{background:#eae2d4}.rhythm-repeat svg{width:21px;height:21px}.xylophone-board{grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:clamp(7px,1.35vw,19px);width:100%;height:100%;max-height:620px;padding:clamp(12px,3.2vh,32px) 0 clamp(8px,2vh,18px);display:grid}.xylophone-key{width:100%;height:var(--key-height);background:var(--key-color);min-height:72px;box-shadow:0 6px 0 var(--soft-shadow);cursor:pointer;border:2px solid #484842;border-radius:clamp(18px,2vw,32px);padding:0;transition:transform 90ms,box-shadow 90ms,filter 90ms;display:block;position:relative}.xylophone-key:hover{filter:saturate(1.05)}.xylophone-key.is-pressed,.xylophone-key:active{box-shadow:0 2px 0 var(--soft-shadow);transform:translateY(4px)scale(.985)}.xylophone-pin{aspect-ratio:1;background:var(--paper);border:1.5px solid #5c574d;border-radius:50%;width:clamp(11px,1.25vw,17px);position:absolute;left:50%;transform:translate(-50%)}.pin-top{top:clamp(12px,2.1vh,24px)}.pin-bottom{bottom:clamp(12px,2.1vh,24px)}.drum-board{grid-template-columns:.82fr 1.2fr .72fr;align-items:center;gap:clamp(12px,3vw,42px);width:min(100%,980px);height:100%;max-height:620px;padding:clamp(12px,3vh,34px) clamp(4px,2vw,20px);display:grid}.drum-pad{aspect-ratio:1;background:var(--pad-color);width:100%;box-shadow:0 8px 0 var(--soft-shadow);cursor:pointer;border:3px solid #474741;border-radius:50%;place-items:center;padding:0;transition:transform 90ms,box-shadow 90ms;display:grid;position:relative}.drum-low{max-width:410px}.drum-mid{max-width:290px}.drum-high{max-width:240px}.drum-pad.is-pressed,.drum-pad:active{box-shadow:0 3px 0 var(--soft-shadow);transform:translateY(5px)scale(.985)}.drum-ring{border:2px solid #fffaf2bd;border-radius:50%;position:absolute;inset:8%}.drum-center{aspect-ratio:1;background:var(--paper);border:2px solid #5b564d;border-radius:50%;width:15%}.piano-board{width:min(100%,1060px);height:min(94%,570px);min-height:160px;box-shadow:0 7px 0 var(--soft-shadow);background:#4c4943;border:3px solid #44443f;border-radius:clamp(18px,2vw,30px);position:relative;overflow:hidden}.white-keys{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;width:100%;height:100%;display:grid}.piano-white-key{min-width:0;color:var(--muted-ink);cursor:pointer;background:#fffdf8;border:0;border-radius:0 0 13px 13px;justify-content:center;align-items:flex-end;padding:0 0 6%;font-size:clamp(.66rem,1.2vw,.95rem);font-weight:720;transition:transform 80ms,background-color 80ms;display:flex;position:relative;box-shadow:inset 0 -5px #e4dbcd}.piano-white-key.is-pressed,.piano-white-key:active{background:#f3eadb;transform:translateY(4px)}.black-keys{pointer-events:none;position:absolute;inset:0}.piano-black-key{z-index:2;top:0;left:var(--key-left);pointer-events:auto;cursor:pointer;background:#414541;border:2px solid #292a28;border-top:0;border-radius:0 0 10px 10px;width:clamp(24px,6.4%,64px);height:61%;padding:0;transition:height 80ms,background-color 80ms,box-shadow 80ms;position:absolute;transform:translate(-50%);box-shadow:0 5px #282a28}.piano-black-key.is-pressed,.piano-black-key:active{background:#5d625d;height:62%;box-shadow:0 2px #282a28}.bells-board{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(3,minmax(100px,1fr));place-items:center;gap:clamp(4px,1.5vw,20px);width:min(100%,920px);height:100%;max-height:600px;padding:clamp(8px,2vh,20px) clamp(16px,4vw,50px);display:grid}.bell-pad{aspect-ratio:1;width:min(72%,190px);transform:scale(var(--bell-scale));cursor:pointer;background:0 0;border:0;place-items:center;padding:0;transition:transform .1s;display:grid;position:relative}.bell-pad:hover{transform:scale(calc(var(--bell-scale) * 1.025)) rotate(-1deg)}.bell-pad.is-pressed,.bell-pad:active{transform:translateY(4px) scale(calc(var(--bell-scale) * .975)) rotate(2deg)}.bell-handle{border:5px solid var(--bell-color);border-bottom:0;border-radius:999px 999px 0 0;width:23%;height:22%;position:absolute;top:7%;left:50%;transform:translate(-50%)}.bell-body{background:var(--bell-color);width:76%;height:67%;box-shadow:0 6px 0 var(--soft-shadow);border:3px solid #4a4943;border-radius:48% 48% 20% 20%/48% 48% 15% 15%;margin-top:15%;display:block;position:relative}.bell-body:after{content:"";background:var(--bell-color);border:3px solid #4a4943;border-radius:999px;height:15%;position:absolute;bottom:3%;left:-7%;right:-7%}.bell-clapper{z-index:2;aspect-ratio:1;background:var(--paper);border:2px solid #4a4943;border-radius:50%;width:17%;position:absolute;bottom:-11%;left:50%;transform:translate(-50%)}.burst-layer{z-index:12;pointer-events:none;position:absolute;inset:0;overflow:hidden}.sound-burst{left:var(--burst-x);top:var(--burst-y);width:18px;height:18px;color:var(--burst-color);transform:translate(-50%, -50%) rotate(var(--burst-turn));animation:.6s ease-out both burst-ring;position:absolute}.sound-burst:before{content:"";border:3px solid;border-radius:50%;animation:.52s ease-out both ring-open;position:absolute;inset:-7px}.sound-burst i{background:currentColor;border-radius:50%;width:10px;height:10px;animation:.58s ease-out both shape-float;display:block;position:absolute}.sound-burst i:first-child{--float-x:-28px;--float-y:-20px}.sound-burst i:nth-child(2){--float-x:26px;--float-y:-30px;animation-delay:30ms}.sound-burst i:nth-child(3){--float-x:20px;--float-y:22px;animation-delay:55ms}.sound-burst.shape-square i{border-radius:2px}.sound-burst.shape-triangle i{background:0 0;border-bottom:11px solid;border-left:6px solid #0000;border-right:6px solid #0000;border-radius:1px;width:0;height:0}@keyframes ring-open{0%{opacity:.7;transform:scale(.45)}to{opacity:0;transform:scale(3.1)}}@keyframes shape-float{0%{opacity:0;transform:translate(0)scale(.7)}18%{opacity:.9}to{opacity:0;transform:translate(var(--float-x), var(--float-y)) scale(.95)}}@keyframes burst-ring{0%{opacity:.9}to{opacity:0}}.transport-bar{grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:clamp(18px,3vw,48px);min-width:0;display:grid}.transport-buttons{align-items:flex-end;gap:clamp(7px,1vw,14px);display:flex}.transport-button{cursor:pointer;background:0 0;border:0;grid-template-rows:1fr auto;justify-items:center;gap:5px;width:clamp(52px,5.4vw,72px);height:clamp(64px,6.5vw,86px);padding:0;font-size:clamp(.66rem,1vw,.83rem);font-weight:760;display:grid}.transport-button svg{aspect-ratio:1;border:1.5px solid var(--line);background:var(--paper);width:clamp(48px,5.2vw,68px);box-shadow:0 3px 0 var(--soft-shadow);border-radius:50%;padding:14px;transition:transform 90ms,box-shadow 90ms,background-color .12s,color .12s}.record-button svg{color:#fffaf2;background:var(--coral)}.play-button svg{color:#fffaf2;background:var(--sky)}.stop-button svg{color:var(--ink)}.transport-button:active:not(:disabled) svg,.transport-button.is-active svg{box-shadow:0 1px 0 var(--soft-shadow);transform:translateY(3px)scale(.98)}.record-button.is-active svg{color:var(--coral);border-color:var(--coral);background:#fffaf2}.transport-button:disabled{opacity:.38;cursor:default}.recording-trail{justify-content:center;align-items:center;gap:clamp(4px,.75vw,10px);min-width:0;height:44px;display:flex;overflow:hidden}.recording-trail span{aspect-ratio:1;background:#e5dccd;border:1px solid #c9bead;border-radius:50%;flex:none;width:clamp(7px,.8vw,11px);transition:background-color .14s,transform .14s}.recording-trail span.has-note{background:var(--trail-color);border-color:#6f685e;transform:translateY(-2px)}.volume-control{width:clamp(150px,18vw,250px);color:var(--ink);grid-template-rows:auto auto;grid-template-columns:30px 1fr;align-items:center;gap:3px 10px;display:grid}.volume-control svg{grid-row:1;width:29px;height:29px}.volume-control input{width:100%;height:30px;accent-color:var(--ink);cursor:pointer;margin:0}.volume-control>span{text-align:center;grid-column:1/-1;font-size:.78rem;font-weight:760}.sr-status{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}@media (width<=760px){.oto-app{padding-top:max(8px, env(safe-area-inset-top));padding-right:max(10px, env(safe-area-inset-right));padding-bottom:max(7px, env(safe-area-inset-bottom));padding-left:max(10px, env(safe-area-inset-left));gap:8px}.app-header{grid-template-columns:1fr;gap:7px}.instrument-picker{justify-content:space-between;gap:4px}.instrument-choice{gap:3px;width:min(22vw,72px)}.instrument-orb{width:clamp(44px,13vw,60px)}.selection-dot{width:10px;height:10px}.instrument-label{font-size:clamp(.66rem,3vw,.78rem)}.mode-switch{width:100%;height:42px}.mode-switch button{gap:5px;font-size:.82rem}.mode-switch svg{width:18px;height:18px}.rhythm-strip{gap:7px;min-height:34px;padding:3px 5px 3px 9px;top:1px}.rhythm-word{font-size:.7rem}.beat-dots{gap:5px}.beat-dots span{width:9px;height:9px}.rhythm-repeat{width:27px;height:27px}.xylophone-board{gap:clamp(4px,1.8vw,8px);padding:9px 0 5px}.xylophone-key{min-height:60px;box-shadow:0 4px 0 var(--soft-shadow);border-width:1.5px;border-radius:clamp(11px,3.5vw,18px)}.xylophone-pin{width:clamp(8px,2.6vw,12px)}.pin-top{top:10px}.pin-bottom{bottom:10px}.drum-board{grid-template-columns:.85fr 1.15fr .76fr;gap:clamp(6px,2.2vw,12px);padding:12px 2px}.drum-pad{box-shadow:0 5px 0 var(--soft-shadow);border-width:2px}.piano-board{border-width:2px;width:100%;height:92%;min-height:130px}.piano-white-key{font-size:clamp(.55rem,2.2vw,.72rem)}.bells-board{grid-template-columns:repeat(3,minmax(72px,1fr));gap:2px;padding:4px 8px}.bell-pad{width:min(82%,138px)}.bell-body,.bell-body:after{border-width:2px}.transport-bar{grid-template-rows:auto 13px;grid-template-columns:auto minmax(82px,1fr);gap:2px 10px}.transport-buttons{gap:4px}.transport-button{gap:1px;width:clamp(43px,13vw,54px);height:54px;font-size:.58rem}.transport-button svg{width:clamp(40px,11vw,48px);padding:11px}.recording-trail{grid-area:2/1/auto/-1;gap:4px;height:11px}.recording-trail span{width:6px}.volume-control{grid-template-columns:24px 1fr;gap:0 5px;width:100%}.volume-control svg{width:23px;height:23px}.volume-control input{height:24px}.volume-control>span{display:none}}@media (height<=620px) and (width>=761px){.oto-app{padding-top:max(7px, env(safe-area-inset-top));padding-bottom:max(6px, env(safe-area-inset-bottom));gap:5px}.app-header{align-items:center}.instrument-choice{grid-template-columns:46px;gap:1px;width:62px}.instrument-orb{width:46px}.instrument-label{font-size:.64rem}.mode-switch{width:250px;height:44px}.transport-button{width:46px;height:46px}.transport-button svg{width:43px;padding:10px}.transport-button span,.volume-control>span{display:none}.xylophone-board{padding-block:5px}.rhythm-strip{min-height:34px;padding-block:3px}}@media (width<=430px) and (height<=720px){.instrument-orb{width:42px}.instrument-label{font-size:.62rem}.mode-switch{height:38px}.transport-button span{display:none}.transport-button{height:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}.instrument-orb,.instrument-choice,.mode-switch button,.xylophone-key,.drum-pad,.piano-white-key,.piano-black-key,.bell-pad,.transport-button svg,.beat-dots span{transition-duration:.01ms!important}.sound-burst{animation:.26s linear both burst-ring}.sound-burst:before{opacity:.55;animation:none;transform:scale(1.3)}.sound-burst i{opacity:0;animation:none}}