@import"https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;700&family=Cormorant+Garamond:wght@300;400;600&display=swap";@font-face{font-family:Streetbrush;src:url(/assets/Streetbrush-BRWqsWjZ.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}:root{--bg-primary: #f5f0e8;--bg-secondary: #ebe4d8;--ink-primary: #1a1a1a;--ink-secondary: #3d3d3d;--ink-faded: #6b6b6b;--accent: #8b4d3b;--accent-glow: rgba(139, 77, 59, .3);--ui-bg: rgba(245, 240, 232, .85);--ui-border: rgba(26, 26, 26, .15);--ui-text: #2a2a2a;--ui-text-muted: #666;--transition-fast: .15s ease;--transition-smooth: .4s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary: #0d0d0d;--bg-secondary: #1a1a1a;--ink-primary: #e8e4dc;--ink-secondary: #c4c0b8;--ink-faded: #8a8680;--accent: #c9a89a;--accent-glow: rgba(201, 168, 154, .3);--ui-bg: rgba(13, 13, 13, .9);--ui-border: rgba(232, 228, 220, .1);--ui-text: #e8e4dc;--ui-text-muted: #999}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%}body{width:100%;height:100%;overflow:hidden;color:var(--ui-text);font-family:Cormorant Garamond,Georgia,serif;background:var(--bg-primary)}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:transparent}#canvas-container canvas{display:block;width:100%;height:100%;background:transparent}#ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}#ui-overlay>*{pointer-events:auto}#logo-container{position:fixed;top:0;left:0;z-index:20;pointer-events:none;transform:translate(calc(50vw - 50%),calc(42vh - 50%)) scale(1);transform-origin:left top;transition:transform 1s cubic-bezier(.4,0,.2,1);opacity:0;visibility:hidden}#logo-container.font-loaded{visibility:visible;animation:logo-fade-in .6s ease-out forwards}@keyframes logo-fade-in{0%{opacity:0}to{opacity:1}}#logo-container.active{transform:translate(1.5rem,calc(100vh - 90px)) scale(.25)}#start-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:transparent;transition:opacity .6s ease,visibility .6s ease;padding-top:calc(42vh + 4rem)}#start-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-content{text-align:center;max-width:480px;padding:2rem}@media (max-height: 600px){#start-screen{padding-top:calc(42vh + 2rem)}}@media (max-height: 500px){#start-screen{padding-top:calc(42vh + 1rem)}}.title{font-family:Streetbrush,cursive;font-size:clamp(3.5rem,12vw,6rem);font-weight:400;color:var(--ink-primary);line-height:1;letter-spacing:.02em;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}.tagline{font-family:Cormorant Garamond,serif;font-size:1.1rem;font-weight:300;font-style:italic;color:var(--ink-secondary);margin-bottom:2.5rem;letter-spacing:.02em;line-height:1.5}#footer-credit{position:absolute;bottom:1.5rem;right:1.5rem;font-family:Cormorant Garamond,serif;font-size:.85rem;color:var(--ink-faded);text-decoration:none;opacity:.6;transition:opacity .3s ease,color .3s ease;z-index:5}#footer-credit:hover{opacity:1;color:var(--accent)}#start-btn{font-family:Cormorant Garamond,serif;font-size:1.125rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;padding:1rem 3rem;background:transparent;color:var(--ink-primary);border:1px solid rgba(26,26,26,.15);border-radius:10px;cursor:pointer;transition:background .5s ease,color .5s ease,border-color .5s ease;animation:subtle-pulse 3s ease-in-out infinite}#build-info{margin-top:1.25rem;font-family:Monaco,Menlo,monospace;font-size:.65rem;color:var(--ink-faded);opacity:.4;letter-spacing:.05em}.keyboard-hints{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem;font-family:Cormorant Garamond,serif;font-size:.8rem;color:var(--ink-faded);opacity:.6}.keyboard-hints span{letter-spacing:.05em}.keyboard-hints .hint-title{margin-bottom:.25rem;opacity:.8}@keyframes subtle-pulse{0%,to{opacity:1}50%{opacity:.7}}#start-btn:hover{background:var(--ink-primary);color:var(--bg-primary);border-color:var(--ink-primary);animation:none}#start-btn:active{transform:scale(.98)}#controls{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;gap:1rem;padding:.75rem 1.5rem;background:var(--ui-bg);border:1px solid var(--ui-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:var(--transition-smooth)}#controls.hidden{opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.control-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ui-border);color:var(--ui-text);cursor:pointer;transition:var(--transition-fast);font-size:1rem}.control-btn:hover:not(:disabled){background:var(--ink-primary);color:var(--bg-primary);border-color:var(--ink-primary)}.control-btn:disabled{opacity:.3;cursor:not-allowed}.control-btn.recording{background:#c44;border-color:#c44;color:#fff;animation:pulse-recording 1s ease infinite}@keyframes pulse-recording{0%,to{opacity:1}50%{opacity:.7}}#status-bar{position:absolute;top:1.5rem;right:1.5rem;display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--ui-bg);border:1px solid var(--ui-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:var(--transition-smooth)}#status-bar.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.indicator{display:flex;align-items:center;gap:.5rem}#audio-indicator:before{content:"";display:block;width:8px;height:8px;background:var(--ink-faded);border-radius:50%;transition:var(--transition-fast)}#audio-indicator.active:before{background:#4a4;box-shadow:0 0 8px #4a4}#recording-indicator{color:#c44;font-weight:600;animation:pulse-recording 1s ease infinite}#recording-indicator.hidden{display:none}#audio-visualizer{position:absolute;bottom:1.5rem;left:1.5rem;display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--ui-bg);border:1px solid var(--ui-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:var(--transition-smooth);min-width:180px}#audio-visualizer.hidden{opacity:0;transform:translateY(20px);pointer-events:none}#visualizer-canvas{width:160px;height:48px;display:block}#note-display{display:flex;align-items:baseline;gap:.25rem;padding:.25rem 0;border-bottom:1px solid var(--ui-border);margin-bottom:.25rem}#note-name{font-family:Streetbrush,cursive;font-size:1.8rem;color:var(--ink-primary);line-height:1;min-width:2.5ch;text-align:center;transition:color .15s ease}#note-name.active{color:var(--accent)}#note-octave{font-family:Cormorant Garamond,serif;font-size:.9rem;color:var(--ink-secondary);margin-left:-.1rem}#note-freq{font-family:Monaco,Menlo,monospace;font-size:.6rem;color:var(--ink-faded);margin-left:auto}#intensity-meter{position:relative;height:8px;background:var(--ui-border);margin-bottom:.25rem;overflow:hidden}#intensity-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,var(--ink-secondary) 0%,var(--accent) 60%,#c44 100%);transition:width 80ms ease-out}#intensity-meter .meter-label{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faded);font-family:Cormorant Garamond,serif;z-index:1;mix-blend-mode:difference}#audio-levels{display:flex;gap:.5rem}.level-bar{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}.level-bar .level-fill{width:100%;height:4px;background:var(--ui-border);position:relative;overflow:hidden}.level-bar .level-fill:after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--level-width, 0%);background:var(--ink-primary);transition:width 60ms ease-out}.level-bar.active .level-fill:after{background:var(--accent)}.level-label{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faded);font-family:Cormorant Garamond,serif}#audio-visualizer-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.4rem;margin-bottom:.4rem;border-bottom:1px solid var(--ui-border)}.visualizer-title{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faded);font-family:Cormorant Garamond,serif}.header-buttons{display:flex;gap:.35rem;align-items:center}.toggle-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ui-border);color:var(--ink-faded);font-size:.6rem;cursor:pointer;transition:var(--transition-fast);border-radius:3px}.toggle-btn:hover{background:var(--ink-primary);color:var(--bg-primary);border-color:var(--ink-primary)}.toggle-btn .toggle-icon{transition:transform .2s ease;display:inline-block}.toggle-btn.active .toggle-icon{transform:rotate(90deg)}#audio-settings-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ui-border);color:var(--ink-faded);font-size:.9rem;cursor:pointer;transition:var(--transition-fast);border-radius:3px}#audio-settings-btn:hover{background:var(--ink-primary);color:var(--bg-primary);border-color:var(--ink-primary)}#audio-visualizer.collapsed{min-width:auto}#audio-visualizer.collapsed #audio-visualizer-header{padding-bottom:0;margin-bottom:0;border-bottom:none}#audio-visualizer.collapsed #visualizer-canvas,#audio-visualizer.collapsed #note-display,#audio-visualizer.collapsed #intensity-meter,#audio-visualizer.collapsed #audio-levels{display:none}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,visibility .2s ease}.modal.hidden{opacity:0;visibility:hidden;pointer-events:none}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--ui-bg);border:1px solid var(--ui-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:320px;max-width:90vw;max-height:90vh;overflow:auto;animation:modal-slide-in .2s ease}@keyframes modal-slide-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--ui-border)}.modal-header h2{font-family:Streetbrush,cursive;font-size:1.5rem;font-weight:400;color:var(--ink-primary);margin:0}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--ink-faded);font-size:1.5rem;cursor:pointer;transition:var(--transition-fast)}.modal-close:hover{color:var(--ink-primary)}.modal-body{padding:1.25rem}.setting-group{margin-bottom:1rem}.setting-group label{display:block;font-family:Cormorant Garamond,serif;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-secondary);margin-bottom:.5rem}.setting-group select{width:100%;font-family:Cormorant Garamond,serif;font-size:1rem;padding:.6rem .75rem;background:var(--bg-primary);color:var(--ui-text);border:1px solid var(--ui-border);cursor:pointer;transition:var(--transition-fast)}.setting-group select:hover{border-color:var(--ink-secondary)}.setting-group select:focus{outline:none;border-color:var(--accent)}.setting-hint{font-size:.75rem;color:var(--ink-faded);margin-top:.4rem;font-style:italic}#current-device-info{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--bg-secondary);border:1px solid var(--ui-border);margin-top:.5rem}.device-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faded)}#current-device-name{font-family:Monaco,Menlo,monospace;font-size:.8rem;color:var(--accent)}#music-player{position:absolute;bottom:1.5rem;left:1.5rem;display:flex;align-items:center;gap:.6rem;padding:0;background:transparent;border:none;transition:var(--transition-smooth);opacity:0;transform:translateY(10px)}#music-player.visible{opacity:1;transform:translateY(0)}.wave-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0}.wave-icon{display:flex;align-items:center;justify-content:center;gap:2px;height:16px}.wave-bar{display:block;width:3px;height:4px;background:var(--ink-faded);transition:height .15s ease,background .15s ease}.wave-btn:not(.playing) .wave-bar{height:4px}.wave-btn:hover .wave-bar{background:var(--ink-primary)}.wave-btn.playing .wave-bar{background:var(--accent);animation:wave-animation .8s ease-in-out infinite}.wave-btn.playing .wave-bar:nth-child(1){animation-delay:0s}.wave-btn.playing .wave-bar:nth-child(2){animation-delay:.15s}.wave-btn.playing .wave-bar:nth-child(3){animation-delay:.3s}.wave-btn.playing .wave-bar:nth-child(4){animation-delay:.45s}@keyframes wave-animation{0%,to{height:4px}50%{height:14px}}#progress-bar{width:60px;height:2px;background:var(--ui-border);cursor:pointer;position:relative;overflow:hidden}#progress-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--ink-secondary);transition:width .1s linear}#progress-bar:hover{height:3px}#progress-bar:hover #progress-fill{background:var(--accent)}.skip-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--ink-faded);font-size:.6rem;cursor:pointer;transition:var(--transition-fast);padding:0}.skip-btn svg{width:12px;height:12px}.skip-btn:hover{color:var(--ink-primary)}#top-controls{position:fixed;top:1.5rem;right:1.5rem;display:flex;gap:.75rem;z-index:50}.control-icon{width:20px;height:20px;color:var(--ink-faded);cursor:pointer;transition:var(--transition-fast);opacity:.6}.control-icon:hover{color:var(--ink-primary);opacity:1}.icon-moon,[data-theme=dark] .icon-sun{display:none}[data-theme=dark] .icon-moon{display:block}.icon-compress,body.is-fullscreen .icon-expand{display:none}body.is-fullscreen .icon-compress{display:block}.hidden{opacity:0;visibility:hidden;pointer-events:none}#ui-overlay:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none;z-index:-1}