:root{--color-bg-top: #1a1625;--color-bg-bottom: #122b26;--color-bg-overlay: rgba(10, 15, 20, .65);--color-primary: #ffde8f;--color-primary-hover: #ffe8a3;--color-primary-active: #f5d07a;--color-secondary: #7db69e;--color-secondary-hover: #8dc7ae;--color-text-main: #f4f9f6;--color-text-sub: #b8d0c6;--color-text-muted: #8ba89d;--color-text-inverse: #12221e;--color-danger: #ff8080;--color-pulse: #fff2b8;--ui-glass-bg: rgba(18, 28, 34, .65);--ui-glass-border: rgba(255, 255, 255, .12);--ui-glass-shadow: 0 8px 32px rgba(0, 0, 0, .3);--ui-panel-bg: rgba(22, 32, 38, .85);--ui-panel-border: rgba(125, 182, 154, .25);--fog-purple: rgba(162, 136, 227, .25);--fog-green: rgba(115, 194, 155, .22);--fog-blue: rgba(136, 178, 227, .15);--font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: clamp(2.5rem, 6vw, 4rem);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--text-main: var(--color-text-main);--text-sub: var(--color-text-sub);--accent: var(--color-primary);--danger: var(--color-danger);--pulse-color: var(--color-pulse);--ui-glass: var(--ui-glass-bg);--ui-border: var(--ui-glass-border);--bg-top: var(--color-bg-top);--bg-bottom: var(--color-bg-bottom)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{font-family:var(--font-family);background:var(--color-bg-top);color:var(--color-text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.scene{position:relative;isolation:isolate;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(180deg,var(--color-bg-top) 0%,var(--color-bg-bottom) 100%)}.scene-scroll{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto}.scene-scroll .layer-background{position:fixed}.scene[data-fever=on]{filter:saturate(1.28) hue-rotate(18deg) brightness(1.05)}.scene[data-mode=magic]{--color-bg-top: #16334a;--color-bg-bottom: #1c4f3d;--fog-purple: rgba(148, 188, 240, .22);--fog-green: rgba(165, 221, 157, .2);--color-pulse: #fff2b8}.layer{position:absolute;inset:0}.layer-background{z-index:1;pointer-events:none}.bg-video-wrap{position:absolute;inset:0;overflow:hidden}.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);filter:saturate(1.1) contrast(1.05) brightness(.9);opacity:0;transition:opacity .52s linear}.bg-video.is-active{opacity:1}.bg-video.is-preload{opacity:0}.forest-silhouette{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:1;display:none}.fog{position:absolute;pointer-events:none}.fog-a{width:52vw;height:32vh;top:-8vh;left:-10vw;background:radial-gradient(ellipse at center,var(--fog-purple) 0%,transparent 70%);animation:fogDriftA 20s ease-in-out infinite}.fog-b{width:46vw;height:30vh;right:-12vw;top:18vh;background:radial-gradient(ellipse at center,var(--fog-green) 0%,transparent 70%);animation:fogDriftB 26s ease-in-out infinite}.fog-c{width:65vw;height:36vh;left:20vw;bottom:-16vh;background:radial-gradient(ellipse at center,rgba(169,191,231,.12) 0%,transparent 70%);animation:fogDriftC 24s ease-in-out infinite}.layer-middleground{z-index:3;pointer-events:none;display:flex;justify-content:center;align-items:center;width:100%;height:100%}#instrumentLayer{display:grid;grid-template-columns:repeat(3,min(18vw,160px));grid-template-rows:repeat(2,min(18vw,160px));gap:clamp(24px,5vw,60px);justify-content:center;align-content:center;justify-items:center;align-items:center;width:100%;max-width:900px;margin:0 auto;padding:var(--spacing-xl);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.landing-overlay:not(.is-hidden)~.layer-middleground .instrument{display:none}.instrument{border:0;background:transparent;pointer-events:none;transform-origin:center;filter:drop-shadow(0 16px 24px rgba(0,0,0,.34)) saturate(1) contrast(1) brightness(1);opacity:1;transition:transform .16s ease,filter .16s ease}.instrument:not(.mvp-button){position:absolute;width:min(26vw,220px)}.instrument.is-hidden-variant{display:none}.instrument:before,.instrument:after{content:"";position:absolute;opacity:0;pointer-events:none;z-index:2}.instrument-art{display:block;width:100%;height:auto;object-fit:contain;background:transparent;border:0;box-shadow:none;transform-origin:center 72%;position:relative;z-index:1;will-change:transform,filter}.instrument-video-source{position:absolute;inset:0;opacity:0;pointer-events:none}.instrument-art-canvas{width:100%;height:100%}video.instrument-art,video.object-thumbnail{background:transparent!important;mix-blend-mode:screen}video.instrument-art::-webkit-media-controls,video.object-thumbnail::-webkit-media-controls{display:none!important}.instrument-hedgehog1 .instrument-art{background:transparent}.instrument-drum:before,.instrument-drum:after{top:14%;width:22%;height:.5rem;border-radius:999px;background:linear-gradient(90deg,#f7e9bf 0%,#c78f56 100%);box-shadow:0 0 10px #ffd68f47,0 0 18px #ffd68f2e}.instrument-drum:before{left:14%;transform:rotate(-28deg)}.instrument-drum:after{right:14%;transform:rotate(28deg)}.instrument-label{display:block;text-align:center;margin-top:6px;color:#f0f7d7;font-size:clamp(.8rem,1.5vw,.98rem);font-weight:700;text-shadow:0 2px 8px rgba(8,10,14,.8)}.instrument-squirrel{left:24vw;bottom:7vh;width:min(24vw,200px);height:min(24vw,200px)}.instrument-cat{left:62vw;bottom:5vh;width:min(26vw,220px);height:min(26vw,220px)}.instrument-penguin{left:12vw;bottom:2vh;width:min(30vw,260px);height:min(30vw,260px)}.instrument-penguin1 .instrument-art{background:transparent}.instrument-drum{left:10vw;bottom:14vh}.instrument-xylophone{left:38vw;bottom:22vh}.instrument-tambourine{left:68vw;bottom:18vh}.instrument-squirrel .instrument-art,.instrument-cat .instrument-art{width:100%;height:100%;object-fit:contain}.instrument-cat .instrument-art{mix-blend-mode:screen}.instrument-fern .instrument-art.is-gesture-variant{transform:scale(1.14)}.instrument.active{transform:scale(1.08) translateY(-6px);filter:drop-shadow(0 18px 26px rgba(255,231,170,.28)) saturate(.95) contrast(1) brightness(1.05)}.mvp-button{width:min(18vw,160px)!important;height:min(18vw,160px)!important;border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(22,32,38,.92) 0%,rgba(32,48,55,.88) 100%);border:3px solid rgba(125,182,154,.4);box-shadow:0 8px 24px #0006,inset 0 2px 8px #ffffff14;backdrop-filter:blur(8px);transition:all .22s cubic-bezier(.34,1.56,.64,1);cursor:pointer}.mvp-button:hover{transform:scale(1.05);border-color:#b4ffd299;box-shadow:0 12px 32px #7db69a4d,inset 0 2px 12px #ffffff1f}.mvp-button.active{transform:scale(1.15) translateY(-8px)!important;border-color:#ffe664e6!important;background:linear-gradient(135deg,rgba(42,62,68,.95) 0%,rgba(52,78,85,.92) 100%);box-shadow:0 16px 48px #ffdc6466,0 0 32px #ffe6964d,inset 0 2px 16px #fffff033!important;filter:brightness(1.2) saturate(1.1)!important}.mvp-button-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:12px}.mvp-animal{font-size:clamp(2.5rem,8vw,4rem);line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.mvp-instrument{font-size:clamp(1.5rem,5vw,2.5rem);line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));opacity:.9;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.mvp-button.active .mvp-animal{transform:scale(1.2) rotate(12deg);animation:mvpBounce .4s ease-out}.mvp-button.active .mvp-instrument{transform:scale(1.15);opacity:1}@keyframes mvpBounce{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(15deg)}to{transform:scale(1.2) rotate(12deg)}}.scene[data-admin=on] .instrument{pointer-events:auto!important;cursor:grab!important;touch-action:none!important;transition:none!important;animation:none!important;transform:none!important;transform-origin:0 0!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))!important;-webkit-tap-highlight-color:transparent;will-change:left,bottom!important}.scene[data-admin=on] .instrument .instrument-art{transform:none!important}.scene[data-admin=on] .instrument.is-dragging{cursor:grabbing!important;z-index:9999!important;opacity:.85!important;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))!important}.instrument-drum.active{animation:bounceDrum .34s ease-out}.instrument-drum.active .instrument-art{animation:hedgehogDrumHit .34s cubic-bezier(.2,.75,.22,1);filter:brightness(1.08) saturate(1.08)}.instrument-drum.active:before{animation:drumStickLeft .34s ease-out}.instrument-drum.active:after{animation:drumStickRight .34s ease-out}.instrument-xylophone.active{animation:glowSweep .52s ease-out}.instrument-tambourine.active{animation:shakeFlower .4s ease-out}.instrument-squirrel.active{animation:bounceDrum .38s ease-out}.instrument-cat.active{animation:shakeFlower .42s ease-out}.instrument-penguin.active{animation:bounceDrum .4s ease-out}.layer-foreground{z-index:4;pointer-events:none;display:grid;place-items:center}.camera-shell{position:relative;width:min(62vw,720px);height:min(66vh,520px);border-radius:46% 54% 44% 56%/45% 48% 52% 55%;overflow:hidden;border:2px solid rgba(238,251,247,.28);background:rgba(255,255,255,.03);box-shadow:0 16px 44px #090f1273;transition:opacity .18s ease}.camera-shell.is-muted,#handCanvas.is-muted{opacity:0}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.4;mix-blend-mode:soft-light}.scene.hide-camera .camera-shell{display:none}.scene.hide-camera #webcam{position:absolute;width:1px;height:1px;left:-9999px;top:-9999px;opacity:0;pointer-events:none}.guide-silhouette{position:absolute;width:min(28vw,300px);height:min(56vh,430px);border:3px dashed rgba(215,230,238,.36);border-radius:48% 52% 42% 58%/30% 32% 68% 70%;opacity:.55}.guide-silhouette{display:none}.pulse-message{position:absolute;top:30px;bottom:auto;left:50%;transform:translate(-50%);margin:0;font-size:clamp(1.45rem,3.8vw,2.45rem);font-weight:800;letter-spacing:.02em;color:var(--pulse-color);text-shadow:0 6px 20px rgba(13,19,15,.72);animation:messageBeat 1s ease-in-out infinite}.gesture-squirrel{position:absolute;z-index:6;right:8vw;bottom:12vh;font-size:clamp(5rem,14vw,10rem);opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4));display:none}.gesture-squirrel.is-visible{animation:squirrelPop .76s ease-out}.landing-overlay:not(.is-hidden)~.hud{display:none}.hud{position:absolute;z-index:6;top:var(--spacing-md);left:var(--spacing-md);max-width:min(92vw,460px);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--ui-glass-border);backdrop-filter:blur(12px);background:var(--ui-glass-bg);color:var(--color-text-main);box-shadow:var(--ui-glass-shadow);transition:var(--transition-normal)}.hud h2{margin:0 0 var(--spacing-sm);font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary)}.status{margin:0;color:var(--color-text-sub);font-size:var(--font-size-sm);font-weight:500}.sound-unlock{margin-top:var(--spacing-md);border:0;border-radius:var(--radius-pill);padding:var(--spacing-sm) var(--spacing-lg);font-weight:700;font-size:var(--font-size-sm);cursor:pointer;color:var(--color-text-inverse);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);box-shadow:0 4px 12px #7db69a33;transition:var(--transition-normal)}.sound-unlock:hover{transform:translateY(-1px);box-shadow:0 6px 16px #7db69a4d}.test-mode-toggle{margin-top:var(--spacing-sm);margin-left:var(--spacing-sm);border:1px solid rgba(255,222,143,.24);border-radius:var(--radius-pill);padding:var(--spacing-sm) var(--spacing-md);font-weight:700;font-size:var(--font-size-xs);cursor:pointer;color:var(--color-text-main);background:linear-gradient(135deg,rgba(255,222,143,.14) 0%,rgba(125,182,154,.16) 100%);box-shadow:0 6px 18px #0000002e;transition:var(--transition-normal)}.test-mode-toggle:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(255,222,143,.2) 0%,rgba(125,182,154,.22) 100%)}.hud-settings-toggle{margin-top:var(--spacing-sm);margin-left:var(--spacing-sm);border:1px solid rgba(170,214,223,.24);border-radius:var(--radius-pill);padding:var(--spacing-sm) var(--spacing-md);font-weight:700;font-size:var(--font-size-xs);cursor:pointer;color:var(--color-text-main);background:linear-gradient(135deg,rgba(154,211,226,.12) 0%,rgba(125,182,154,.14) 100%);box-shadow:0 6px 18px #0000002e;transition:var(--transition-normal)}.hud-settings-toggle:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(154,211,226,.18) 0%,rgba(125,182,154,.2) 100%)}.sound-settings-panel{margin-top:var(--spacing-md);padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(6,14,18,.42);box-shadow:inset 0 1px #ffffff0f;max-height:min(48vh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}.sound-settings-panel::-webkit-scrollbar{width:8px}.sound-settings-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;border:2px solid transparent;background-clip:padding-box}.sound-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.sound-settings-head-mapping{margin-top:16px}.sound-settings-title{margin:0;font-size:var(--font-size-sm);font-weight:800;color:var(--color-text-main)}.sound-settings-reset{border:0;border-radius:999px;padding:8px 12px;font-size:.75rem;font-weight:700;color:#f8f6ef;background:rgba(255,255,255,.08);cursor:pointer;transition:var(--transition-normal)}.sound-settings-reset:hover{background:rgba(255,255,255,.14)}.sound-settings-list{display:grid;gap:10px}.sound-settings-list-mapping{gap:12px}.sound-settings-item{display:grid;gap:6px}.sound-settings-item-select{gap:8px}.sound-settings-label{font-size:.82rem;font-weight:700;color:var(--color-text-sub)}.sound-settings-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.sound-settings-range{width:100%;accent-color:#8cc7ac;cursor:pointer}.sound-settings-value{min-width:48px;text-align:right;font-size:.76rem;font-weight:800;color:#fff6d4}.sound-settings-select{width:100%;min-height:38px;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:0 12px;background:rgba(255,255,255,.08);color:var(--color-text-main);font-size:.85rem;font-weight:600;cursor:pointer}.sound-settings-select option{color:#111}.hud-exit-button{margin-top:var(--spacing-sm);margin-left:var(--spacing-sm);border:1px solid rgba(255,128,128,.34);border-radius:var(--radius-pill);padding:var(--spacing-sm) var(--spacing-md);font-weight:700;font-size:var(--font-size-xs);cursor:pointer;color:#ffe7e7;background:linear-gradient(135deg,rgba(110,24,24,.72) 0%,rgba(64,12,12,.82) 100%);box-shadow:0 6px 18px #00000038;transition:var(--transition-normal)}.hud-exit-button:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(138,28,28,.82) 0%,rgba(82,16,16,.9) 100%);box-shadow:0 8px 22px #00000047}.hud-main-link{display:inline-flex;margin-top:var(--spacing-sm);margin-right:var(--spacing-xs);border-radius:var(--radius-pill);border:1px solid var(--ui-glass-border);padding:var(--spacing-xs) var(--spacing-md);text-decoration:none;font-weight:600;font-size:var(--font-size-xs);color:var(--color-text-sub);background:rgba(255,255,255,.05);transition:var(--transition-normal)}.hud-main-link:hover{background:rgba(255,255,255,.1);color:var(--color-text-main)}.privacy-note{margin:var(--spacing-md) 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.4}.test-mode-dock{position:absolute;z-index:8;top:var(--spacing-md);right:var(--spacing-md);width:min(92vw,540px);border-radius:20px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(18,30,38,.9) 0%,rgba(10,18,24,.94) 100%),radial-gradient(circle at top right,rgba(255,222,143,.12) 0%,transparent 42%);backdrop-filter:blur(14px);box-shadow:0 18px 48px #00000057;padding:16px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - (var(--spacing-md) * 2));overflow:auto}.test-mode-dock.is-hidden{display:none}.test-mode-panel,.test-mode-vision{position:static;width:auto;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}.test-mode-vision-head{margin-bottom:10px}.test-mode-vision-summary{margin:6px 0 0;font-size:var(--font-size-xs);color:var(--color-text-sub)}.test-mode-vision-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px}.test-mode-vision-card{border-radius:14px;padding:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.test-mode-vision-card h3{margin:0 0 8px;font-size:var(--font-size-sm);color:var(--color-primary)}.test-mode-vision-gesture-display{margin:0 0 10px;min-height:2.4em;padding:10px 12px;border-radius:12px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-align:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05)}.test-mode-vision-gesture-display.is-idle{color:var(--color-text-muted)}.test-mode-vision-gesture-display.is-active{color:#fff3c4;background:radial-gradient(circle at top,rgba(255,222,143,.18) 0%,rgba(255,255,255,.06) 55%),rgba(255,255,255,.05);border-color:#ffde8f47}.test-mode-preview-shell{position:relative;overflow:hidden;border-radius:12px;background:rgba(5,8,12,.8);aspect-ratio:16 / 9;border:1px solid rgba(255,255,255,.08)}#testModeWebcamPreview,#testModeRawCanvas{position:absolute;inset:0;width:100%;height:100%}#testModeWebcamPreview{object-fit:cover;transform:scaleX(-1);filter:saturate(1.05) contrast(1.02) brightness(.88)}#testModeRawCanvas{pointer-events:none}.test-mode-normalized-canvas{display:block;width:100%;aspect-ratio:1 / 1;border-radius:12px;background:radial-gradient(circle at center,rgba(255,222,143,.08) 0%,rgba(14,22,28,.92) 58%,rgba(7,12,16,.98) 100%);border:1px solid rgba(255,255,255,.08)}.test-mode-head{margin-bottom:12px}.test-mode-eyebrow{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffe7a7}.test-mode-summary{margin:6px 0 0;font-size:var(--font-size-sm);color:var(--color-text-sub)}.test-mode-panel{border-top:1px solid rgba(255,255,255,.08);padding-top:18px}.test-mode-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.test-mode-columns-right-only{grid-template-columns:minmax(0,1fr)}.test-mode-card{border-radius:14px;padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.test-mode-card-hidden{display:none}.test-mode-card h3{margin:0 0 10px;font-size:var(--font-size-sm);color:var(--color-primary)}.test-mode-gesture-display{margin:0 0 12px;min-height:2.6em;padding:10px 12px;border-radius:12px;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-align:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05)}.test-mode-gesture-display.is-idle{color:var(--color-text-muted);background:rgba(255,255,255,.04)}.test-mode-gesture-display.is-active{color:#fff3c4;background:radial-gradient(circle at top,rgba(255,222,143,.18) 0%,rgba(255,255,255,.06) 55%),rgba(255,255,255,.05);border-color:#ffde8f47;box-shadow:inset 0 0 0 1px #ffffff08}.test-mode-grid{margin:0;display:grid;grid-template-columns:62px 1fr;gap:6px 10px;font-size:.82rem}.test-mode-grid dt{color:var(--color-text-muted)}.test-mode-grid dd{margin:0;font-weight:700;color:var(--color-text-main);word-break:break-word}.test-mode-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.test-mode-action-button{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 12px;background:rgba(255,231,167,.12);color:#fff3c4;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.test-mode-action-button:hover{background:rgba(255,231,167,.18);border-color:#ffe7a747;transform:translateY(-1px)}.test-mode-action-button.is-secondary{background:rgba(255,255,255,.06);color:var(--color-text-main)}.test-mode-action-button.is-secondary:hover{background:rgba(255,255,255,.1);border-color:#ffffff2e}.admin-floating-controls{display:none;position:absolute;z-index:9;right:var(--spacing-md);top:var(--spacing-md);max-width:min(92vw,420px);border-radius:var(--radius-lg);padding:var(--spacing-md);border:1px solid var(--ui-glass-border);background:var(--ui-panel-bg);backdrop-filter:blur(12px);box-shadow:var(--ui-glass-shadow)}.admin-floating-controls.is-visible{display:block;animation:slideInRight var(--transition-normal)}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.admin-floating-controls p{margin:0 0 var(--spacing-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-main)}.admin-floating-controls div{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.admin-floating-controls button,.admin-floating-controls a{border:0;border-radius:var(--radius-pill);padding:var(--spacing-sm) var(--spacing-md);font-weight:600;font-size:var(--font-size-sm);text-decoration:none;cursor:pointer;transition:var(--transition-normal)}#adminSaveButton{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:var(--color-text-inverse);box-shadow:0 4px 12px #7db69a33}#adminSaveButton:hover{transform:translateY(-1px);box-shadow:0 6px 16px #7db69a4d}#adminResetButton{background:rgba(255,255,255,.1);color:var(--color-text-main);border:1px solid var(--ui-glass-border)}#adminResetButton:hover{background:rgba(255,255,255,.15)}.admin-floating-controls a{background:rgba(255,255,255,.05);color:var(--color-text-sub);border:1px solid var(--ui-glass-border)}.admin-floating-controls a:hover{background:rgba(255,255,255,.1);color:var(--color-text-main)}#handCanvas,#effectCanvas{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}.hand-cursor{position:absolute;z-index:7;width:62px;height:214px;opacity:0;transform:translate(-50%,-86%);transform-origin:50% 86%;pointer-events:none;will-change:left,top,transform,opacity;filter:drop-shadow(0 0 20px rgba(255,214,122,.3))}.hand-cursor img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,247,214,.95)) drop-shadow(0 0 28px rgba(255,214,126,.55)) drop-shadow(0 14px 24px rgba(20,18,15,.45));pointer-events:none;user-select:none;animation:batonPulse 1.05s ease-in-out infinite}.hand-cursor:before{content:"";position:absolute;left:50%;top:50%;width:94px;height:188px;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(ellipse at center,rgba(255,240,190,.32) 0%,rgba(255,217,120,.16) 42%,rgba(255,194,102,.04) 72%,transparent 100%);filter:blur(10px);opacity:.95;pointer-events:none;animation:batonAura 1.2s ease-in-out infinite}.hand-cursor:after{content:"";position:absolute;left:50%;top:2px;width:20px;height:20px;background:radial-gradient(circle at 40% 40%,rgba(255,249,220,1) 0%,rgba(255,230,156,.95) 55%,rgba(255,200,92,.7) 100%);border:3px solid rgba(255,246,210,.98);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px #ffec90,0 0 42px #ffd268c7,0 0 68px #ffc25e66,inset 0 0 8px #fffaeab8;pointer-events:none;animation:batonTipBlink .95s ease-in-out infinite}.landing-overlay{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:var(--color-bg-overlay);backdrop-filter:blur(8px);transition:opacity .8s ease-out,transform 1.2s cubic-bezier(.22,1,.36,1);overflow:hidden}.landing-overlay.is-hidden{opacity:0;pointer-events:none;transform:scale(1.1)}.landing-panel{width:min(90vw,480px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-xl);text-align:center;background:radial-gradient(circle at 20% 12%,rgba(255,222,143,.05) 0%,transparent 45%),linear-gradient(165deg,rgba(24,35,42,.25) 0%,rgba(16,26,31,.2) 100%);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);box-shadow:0 12px 60px #00000080;position:relative;z-index:10;backdrop-filter:blur(32px)!important}.landing-kicker{margin:0;color:var(--color-secondary);letter-spacing:.25em;font-size:var(--font-size-sm);font-weight:700;text-transform:uppercase}.landing-panel h1{margin:var(--spacing-sm) 0 var(--spacing-md);font-size:var(--font-size-4xl);font-weight:800;color:var(--color-text-main);text-shadow:0 4px 12px rgba(0,0,0,.4);line-height:1.1}.landing-panel p{margin:0;color:var(--color-text-sub);font-size:var(--font-size-lg)}.landing-privacy{margin-top:var(--spacing-md);font-size:var(--font-size-xs);color:var(--color-text-muted)}#landingStartButton,.landing-exit-button,.landing-credits-button{margin-top:var(--spacing-xl);border:0;border-radius:var(--radius-pill);min-width:240px;height:60px;padding:0 28px;cursor:pointer;font-size:var(--font-size-lg);font-weight:800;letter-spacing:-.015em;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 32px #050a0e47,inset 0 1px #ffffff29,inset 0 -1px #090e1238;text-shadow:0 1px 0 rgba(255,255,255,.08);filter:saturate(.9) brightness(.94);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .22s ease,filter .22s ease,background .22s ease}.landing-exit-button{margin-top:var(--spacing-sm);color:#fff8f5;background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.02) 36%),linear-gradient(135deg,#bc908f 0%,#c89c8f 44%,#b18379 100%);border-color:#ffece838;box-shadow:0 16px 30px #7a4e483d,inset 0 1px #fff6f452,inset 0 -1px #88585038}.landing-credits-button{margin-top:var(--spacing-sm);color:#f8fbff;background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.02) 36%),linear-gradient(135deg,#a29dc1 0%,#95abc0 46%,#96af9f 100%);border-color:#eef3ff38;box-shadow:0 16px 30px #5c6c883d,inset 0 1px #fafcff52,inset 0 -1px #687a9438}#landingStartButton{color:#354237;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.04) 34%),linear-gradient(135deg,#ece3ca 0%,#ddd3b2 34%,#b3c3af 100%);border-color:#fff8e13d;box-shadow:0 18px 34px #8492763d,inset 0 1px #fffcf06b,inset 0 -1px #91a38838}#landingStartButton:hover{transform:translateY(-2px) scale(1.02);filter:saturate(.94) brightness(.97);border-color:#fff9e457;box-shadow:0 20px 40px #8492764d,inset 0 1px #fffdf375,inset 0 -1px #91a3882e}.landing-exit-button:hover{transform:translateY(-2px) scale(1.02);filter:saturate(.94) brightness(.98);border-color:#fff0ec52;box-shadow:0 20px 38px #7a4e4852,inset 0 1px #fff8f657,inset 0 -1px #88585033}.landing-credits-button:hover{transform:translateY(-2px) scale(1.02);filter:saturate(.94) brightness(.98);border-color:#f3f6ff52;box-shadow:0 20px 38px #5c6c8852,inset 0 1px #fcfdff57,inset 0 -1px #687a9433}#landingStartButton:active,.landing-exit-button:active,.landing-credits-button:active{transform:translateY(1px) scale(.98)}.landing-logo-container{width:100%;margin-bottom:var(--spacing-lg);padding:0;background:transparent;border-radius:var(--radius-md);border:none}.landing-logo{display:block;margin:0 auto;max-width:100%;max-height:240px;width:auto;height:auto;object-fit:contain;border-radius:var(--radius-sm);filter:saturate(.86) brightness(.92) drop-shadow(0 8px 16px rgba(0,0,0,.18))}.landing-model-select{width:100%;margin:16px 0 10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.landing-model-label{display:block;margin-bottom:8px;color:#fff;font-size:.95rem;font-weight:600;text-align:left;text-shadow:0 2px 4px rgba(0,0,0,.5)}.landing-model-field{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.9);color:#333;font-size:.9rem;font-weight:500;cursor:pointer}.landing-model-field:disabled{cursor:wait;opacity:.8}.landing-model-field option{color:#111}.landing-model-loading{margin:8px 0 0;font-size:.85rem;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5)}.bgm-horizontal-player{position:absolute;left:50%;bottom:24px;z-index:100;display:flex;align-items:center;gap:14px;width:fit-content;padding:10px 20px;transform:translate(-50%);border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(9,18,20,.58);backdrop-filter:blur(12px);box-shadow:0 12px 30px #00000038}.scene[data-bgm=off] .bgm-horizontal-player{border-color:#ffffff14;background:rgba(9,18,20,.48)}.bgm-player-track{display:flex;align-items:center;gap:8px}.bgm-player-icon,.bgm-player-toggle,.bgm-player-volume-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}.bgm-player-icon{font-size:1.1rem}.bgm-player-text{display:flex;flex-direction:column;gap:2px}.bgm-player-title{font-size:.95rem;color:#fff;font-weight:700;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.6)}.bgm-player-mode{font-size:.72rem;color:#ffffffb8;letter-spacing:.04em}.bgm-player-divider{width:1px;height:14px;background:rgba(255,255,255,.4);box-shadow:0 0 4px #00000080}.bgm-player-select{min-width:132px;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:600;outline:none;cursor:pointer}.bgm-player-select option{color:#111}.bgm-player-toggle{flex-shrink:0;padding:0;border:none;background:transparent;color:#fff;font-size:1.25rem;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.bgm-player-toggle:hover{transform:scale(1.05)}.scene[data-bgm=off] .bgm-player-toggle{color:#ccc}.bgm-player-volume{display:flex;align-items:center;gap:6px}.bgm-player-volume.is-disabled{opacity:.45}.bgm-player-range{width:70px;cursor:grab;accent-color:#7db69e}.bgm-player-range:disabled{cursor:not-allowed}#landingStartButton:focus-visible,.landing-exit-button:focus-visible,.landing-credits-button:focus-visible,.sound-unlock:focus-visible,.test-mode-toggle:focus-visible,.hud-main-link:focus-visible,.admin-floating-controls button:focus-visible,.admin-floating-controls a:focus-visible{outline:2px solid rgba(255,232,163,.95);outline-offset:3px}@keyframes fogDriftA{0%,to{transform:translate(0) scale(1);opacity:.56}50%{transform:translate(8vw,2vh) scale(1.08);opacity:.78}}@keyframes fogDriftB{0%,to{transform:translate(0) scale(1);opacity:.48}50%{transform:translate(-9vw,-3vh) scale(1.06);opacity:.75}}@keyframes fogDriftC{0%,to{transform:translate(0);opacity:.44}50%{transform:translate(4vw,-4vh);opacity:.66}}@keyframes bounceDrum{0%{transform:scale(1)}40%{transform:translateY(-12px) scale(1.08)}70%{transform:translateY(4px) scale(.96)}to{transform:scale(1)}}@keyframes hedgehogDrumHit{0%{transform:rotate(0) translateY(0) scale(1);filter:brightness(1)}15%{transform:rotate(-10deg) translate(-4px,-8px) scale(1.04);filter:brightness(1.1)}35%{transform:rotate(12deg) translate(4px,8px) scale(.96);filter:brightness(1.15)}60%{transform:rotate(-6deg) translate(-2px,-2px) scale(1.02);filter:brightness(1.05)}to{transform:rotate(0) translateY(0) scale(1);filter:brightness(1)}}@keyframes drumStickLeft{0%{opacity:0;transform:translate(0) rotate(-28deg) scaleX(.9)}20%{opacity:1;transform:translate(12px,-16px) rotate(-60deg) scaleX(1.05)}45%{opacity:1;transform:translate(28px,16px) rotate(20deg) scaleX(1.1)}to{opacity:0;transform:translate(12px,4px) rotate(-10deg) scaleX(.95)}}@keyframes drumStickRight{0%{opacity:0;transform:translate(0) rotate(28deg) scaleX(.9)}20%{opacity:1;transform:translate(-12px,-16px) rotate(60deg) scaleX(1.05)}45%{opacity:1;transform:translate(-28px,16px) rotate(-20deg) scaleX(1.1)}to{opacity:0;transform:translate(-12px,4px) rotate(10deg) scaleX(.95)}}@keyframes glowSweep{0%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}50%{filter:drop-shadow(0 16px 32px rgba(125,182,154,.6))}to{filter:drop-shadow(0 12px 20px rgba(0,0,0,.28))}}@keyframes shakeFlower{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-6deg) scale(1.08)}40%{transform:rotate(6deg) scale(1.08)}60%{transform:rotate(-4deg) scale(1.04)}80%{transform:rotate(4deg) scale(1.04)}to{transform:rotate(0) scale(1)}}@keyframes messageBeat{0%,to{opacity:.6;transform:translate(-50%) scale(1)}50%{opacity:1;transform:translate(-50%) scale(1.05);text-shadow:0 8px 24px rgba(255,222,143,.4)}}@keyframes squirrelPop{0%{opacity:0;transform:translateY(24px) scale(.8)}25%{opacity:1;transform:translateY(-4px) scale(1.05)}65%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-12px) scale(.9)}}.scene[data-fever=on] .fog{opacity:.9;filter:hue-rotate(25deg) brightness(1.3);transition:opacity .4s ease,filter .4s ease}.scene[data-fever=on] .instrument{filter:drop-shadow(0 12px 30px rgba(255,220,130,.45)) saturate(1.05) contrast(1.05) brightness(1.1);animation:feverGlow .8s ease-in-out infinite alternate}.scene[data-fever=on] .pulse-message{color:#fff8d6;text-shadow:0 0 12px rgba(255,230,100,.9),0 0 32px rgba(255,200,80,.5),0 6px 20px rgba(13,19,15,.72);animation:messageBeat .6s ease-in-out infinite}.scene[data-fever=on] .hand-cursor img{filter:drop-shadow(0 0 20px rgba(255,244,198,1)) drop-shadow(0 0 44px rgba(255,212,130,.82)) drop-shadow(0 14px 24px rgba(20,18,15,.48))}.scene[data-fever=on] .hand-cursor:before{width:106px;height:202px;background:radial-gradient(ellipse at center,rgba(255,245,205,.42) 0%,rgba(255,218,132,.24) 42%,rgba(255,194,102,.06) 74%,transparent 100%);filter:blur(12px)}.scene[data-fever=on] .hand-cursor:after{width:24px;height:24px;border-color:#fff6d2;background:radial-gradient(circle at 40% 40%,rgba(255,255,245,1) 0%,rgba(255,242,198,.98) 48%,rgba(255,214,118,.76) 100%);box-shadow:0 0 24px #ffec90,0 0 52px #ffd676eb,0 0 82px #ffbe5c80,inset 0 0 8px #fffff599}@keyframes batonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes batonAura{0%,to{opacity:.74;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}@keyframes batonTipBlink{0%,to{opacity:.92}50%{opacity:1}}@keyframes feverGlow{0%{filter:drop-shadow(0 12px 30px rgba(255,220,130,.45)) saturate(1.05) contrast(1.05) brightness(1.1)}to{filter:drop-shadow(0 16px 36px rgba(255,200,90,.65)) saturate(1.15) contrast(1.1) brightness(1.2)}}@media (max-width: 860px){#instrumentLayer{grid-template-columns:repeat(3,min(24vw,120px));grid-template-rows:repeat(2,min(24vw,120px));gap:clamp(16px,3vw,32px);padding:var(--spacing-md)}.mvp-button{width:min(24vw,120px)!important;height:min(24vw,120px)!important}.mvp-animal{font-size:clamp(2rem,6vw,3rem)}.mvp-instrument{font-size:clamp(1.2rem,4vw,2rem)}.instrument:not(.mvp-button){width:min(34vw,180px)}.instrument-drum{left:4vw;bottom:18vh}.instrument-xylophone{left:34vw;bottom:26vh}.instrument-tambourine{left:62vw;bottom:20vh}.instrument-fern{left:48vw;bottom:8vh;width:min(30vw,142px);height:min(30vw,142px)}.instrument-owl{left:14vw;bottom:7vh;width:min(30vw,142px);height:min(30vw,142px)}.camera-shell{width:min(82vw,560px);height:min(54vh,420px)}.pulse-message{top:var(--spacing-lg);bottom:auto;width:90vw;text-align:center;font-size:var(--font-size-2xl)}.gesture-squirrel{right:4vw;font-size:clamp(4rem,18vw,8rem)}.landing-panel{width:90vw;padding:var(--spacing-lg)}.landing-panel h1{font-size:var(--font-size-3xl)}.landing-logo{max-height:200px}.landing-model-select{margin:14px 0 6px}#landingStartButton,.landing-exit-button,.landing-credits-button{width:min(84vw,320px);min-width:0}.hud{top:var(--spacing-sm);left:var(--spacing-sm);max-width:calc(100vw - var(--spacing-lg));padding:var(--spacing-sm) var(--spacing-md)}.test-mode-toggle,.hud-settings-toggle{margin-left:0;width:100%}.sound-settings-panel{max-height:min(44vh,360px)}.hud-exit-button{margin-left:0;width:100%}.bgm-horizontal-player{left:50%;bottom:16px;gap:10px;max-width:calc(100vw - 24px);padding:10px 14px}.bgm-player-track{min-width:0}.bgm-player-title{max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bgm-player-select{min-width:108px;max-width:28vw}.test-mode-dock{left:var(--spacing-sm);right:var(--spacing-sm);top:auto;bottom:var(--spacing-sm);width:auto;max-height:82vh;overflow:auto}.test-mode-columns,.test-mode-vision-grid{grid-template-columns:1fr}.admin-floating-controls{top:auto;bottom:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm);max-width:none}}.credits-overlay{position:fixed;inset:0;z-index:1110;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);background:rgba(3,8,14,.84);backdrop-filter:blur(16px);animation:tutorialFadeIn .35s ease-out}.credits-side-video{position:absolute;top:50%;width:min(18vw,240px);aspect-ratio:3 / 4;transform:translateY(-50%);pointer-events:none;opacity:.9;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}.credits-side-video-left{left:clamp(20px,6vw,92px)}.credits-side-video-right{right:clamp(20px,6vw,92px)}.credits-side-video video{width:100%;height:100%;object-fit:contain;border-radius:28px;background:radial-gradient(circle at center,rgba(255,255,255,.08) 0%,transparent 72%);mix-blend-mode:screen}.credits-modal{width:min(92vw,560px);min-height:min(76vh,720px);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-2xl) var(--spacing-xl);border-radius:32px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at top,rgba(255,222,143,.12) 0%,transparent 34%),linear-gradient(180deg,rgba(17,27,35,.97) 0%,rgba(8,15,22,.98) 100%);box-shadow:0 40px 100px #000000b8,0 0 52px #7db69a1f;overflow:hidden}.credits-header{text-align:center}.credits-kicker{margin:0 0 var(--spacing-xs);font-size:var(--font-size-sm);letter-spacing:.24em;text-transform:uppercase;color:var(--color-secondary)}.credits-title{margin:0;font-size:clamp(2rem,5vw,2.8rem);font-weight:900;color:#fff8e4;text-shadow:0 10px 30px rgba(0,0,0,.4)}.credits-roll-viewport{position:relative;width:100%;flex:1;min-height:320px;overflow:hidden;border-radius:24px;border:1px solid rgba(125,182,154,.22);background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 18%,transparent 82%,rgba(255,255,255,.05) 100%),rgba(5,10,16,.46)}.credits-roll-track{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2xl);padding:120% var(--spacing-lg) 20%;animation:creditsRoll 22s linear infinite}.credits-group{text-align:center}.credits-group h3{margin:0 0 var(--spacing-sm);color:var(--color-primary);font-size:var(--font-size-xl);letter-spacing:.08em;text-transform:uppercase}.credits-group p{margin:0;color:var(--color-text-main);font-size:clamp(1rem,2.6vw,1.35rem);font-weight:700;line-height:1.7}.credits-group-end p{color:var(--color-text-sub);font-style:italic}.credits-close-button{border:0;border-radius:var(--radius-pill);min-width:180px;height:52px;padding:0 var(--spacing-xl);font-size:var(--font-size-lg);font-weight:800;color:var(--color-text-inverse);cursor:pointer;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);box-shadow:0 12px 28px #7db69a47;transition:var(--transition-normal)}.credits-close-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 34px #7db69a66}.credits-close-button:active{transform:translateY(1px) scale(.98)}.credits-close-button:focus-visible{outline:2px solid rgba(255,232,163,.95);outline-offset:3px}@media (max-width: 768px){.credits-overlay{padding:var(--spacing-md)}.credits-side-video{display:none}.credits-modal{width:100%;min-height:min(82vh,720px);padding:var(--spacing-xl) var(--spacing-md)}.credits-roll-track{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.credits-close-button{width:100%}.tutorial-action-row,.tutorial-vision-grid{grid-template-columns:1fr}.tutorial-practice-button,.tutorial-skip-button,.tutorial-close-button{width:100%}}.admin-shell{position:absolute;z-index:7;top:50%;left:50%;transform:translate(-50%,-50%);width:min(95vw,980px);max-height:92vh;overflow:auto;padding:20px;border-radius:18px;border:1px solid rgba(210,232,224,.28);background:rgba(10,20,26,.68);backdrop-filter:blur(10px)}.admin-shell h1{margin:0;font-size:clamp(1.4rem,3vw,2rem)}.admin-row{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-panel{border-radius:14px;border:1px solid rgba(210,232,224,.22);background:rgba(255,255,255,.03);padding:12px}.admin-panel.sound-only{grid-column:1 / -1;max-width:800px;margin:0 auto}.admin-preview{position:relative;height:min(58vh,520px);border-radius:14px;overflow:hidden}.admin-stage{position:absolute;inset:0}.admin-inst{position:absolute;width:min(22vw,170px);pointer-events:none}.admin-inst img{width:100%;height:auto;display:block}.admin-controls{display:grid;gap:10px}.mapping-shell{position:relative;z-index:6;width:min(94vw,1080px);margin:34px auto;padding:24px;border-radius:24px;border:1px solid rgba(214,237,228,.22);background:rgba(8,16,20,.72);backdrop-filter:blur(14px)}.mapping-header h1{margin:0;font-size:clamp(1.5rem,3vw,2.2rem)}.mapping-header p{margin:8px 0 0;color:var(--text-sub)}.mapping-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.mapping-panel{padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.mapping-panel h2{margin:0 0 14px;font-size:1.08rem}.gesture-mapping-group{display:grid;gap:6px;margin-bottom:12px}.gesture-mapping-group label{font-size:.94rem;color:var(--text-sub)}.gesture-mapping-group select{width:100%;border:1px solid rgba(214,237,228,.24);border-radius:12px;padding:10px 12px;background:rgba(14,26,30,.9);color:var(--text-main)}.mapping-select-hidden{display:none}.mapping-button-group{display:flex;flex-wrap:wrap;gap:8px}.mapping-option-button{border:1px solid rgba(214,237,228,.2);border-radius:999px;padding:8px 12px;background:rgba(17,30,35,.84);color:var(--text-sub);cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease,color .14s ease}.mapping-option-button:hover{transform:translateY(-1px);border-color:#ffde8f5c;color:var(--text-main)}.mapping-option-button.is-active{background:linear-gradient(135deg,rgba(255,232,163,.92) 0%,rgba(203,243,212,.9) 100%);border-color:#fff5dab8;color:#163330;box-shadow:0 8px 18px #0000002e}.mapping-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.admin-controls label{display:grid;gap:4px;font-size:.9rem}.admin-controls input[type=range]{width:100%}.sound-mapping-group{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(214,237,228,.15)}.sound-mapping-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.object-thumbnail{width:60px;height:60px;object-fit:contain;background:transparent;border-radius:8px;padding:0;border:0}.sound-mapping-header label{font-weight:700;font-size:1.05rem;color:var(--text-main);margin:0}.sound-mapping-group label{font-weight:600;margin-bottom:4px}.sound-mapping-group select{padding:8px;border-radius:6px;border:1px solid rgba(214,237,228,.3);background:rgba(15,24,30,.6);color:var(--text-main);font-size:.95rem;cursor:pointer}.sound-mapping-group select:hover{border-color:#d6ede480}.sound-mapping-group input[type=file]{padding:8px;border-radius:6px;border:1px dashed rgba(214,237,228,.3);background:rgba(15,24,30,.4);color:var(--text-sub);font-size:.85rem;cursor:pointer}.sound-mapping-group input[type=file]:hover{border-color:#d6ede480;background:rgba(15,24,30,.6)}.test-sound-btn{padding:8px 16px;border:0;border-radius:6px;background:linear-gradient(135deg,#7db69e,#5a9e85);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease}.test-sound-btn:hover{background:linear-gradient(135deg,#8dc7ae,#6aae95);transform:translateY(-1px);box-shadow:0 4px 8px #0003}.test-sound-btn:active{transform:translateY(0)}.admin-actions{margin-top:12px;display:flex;gap:8px}.admin-actions button,.admin-actions a{border:0;border-radius:10px;padding:10px 12px;font-weight:700;text-decoration:none;cursor:pointer}.admin-save{color:#173835;background:linear-gradient(135deg,#ffe8a3,#cbf3d4)}.admin-reset{color:#ddeee7;background:rgba(255,255,255,.1)}.admin-back{color:#d8ece2;background:rgba(31,61,55,.6)}@media (max-width: 860px){.admin-row{grid-template-columns:1fr}.admin-inst{width:min(30vw,142px)}}.theme-scene{background:linear-gradient(180deg,#1c1938 0%,#183a32 100%)}.theme-shell{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);width:min(94vw,760px);padding:26px;border-radius:24px;border:1px solid rgba(214,237,228,.28);background:rgba(13,24,30,.64);backdrop-filter:blur(12px);box-shadow:0 22px 50px #070b0e75}.theme-shell h1{margin:10px 0 6px;font-size:clamp(1.7rem,4vw,2.4rem)}.theme-sub{margin:0;color:#c8d9d2}.theme-status{margin:10px 0 0;color:#e3f0cc;font-weight:700}.theme-quick-nav{margin-top:10px}.theme-main-link{display:inline-flex;align-items:center;text-decoration:none;border-radius:999px;border:1px solid rgba(214,237,228,.36);padding:6px 12px;color:#d8ece2;font-weight:700;background:rgba(16,34,37,.44)}.theme-main-link:hover{transform:scale(1.03)}.global-main-link{position:absolute;z-index:12;right:16px;bottom:16px;border-radius:999px;border:1px solid rgba(214,237,228,.45);padding:10px 14px;text-decoration:none;color:#e3f3ec;font-weight:800;background:rgba(11,28,29,.75)}.theme-back-link{display:inline-flex;align-items:center;text-decoration:none;color:#d7ebec;font-weight:700;border-radius:999px;border:1px solid rgba(215,235,236,.34);padding:6px 12px;transition:transform .14s ease,background .14s ease}.theme-back-link.is-hovered,.theme-back-link:hover{transform:scale(1.04);background:rgba(215,235,236,.14)}.theme-mode-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theme-mode-card{border:1px solid rgba(230,239,232,.18);border-radius:18px;background:rgba(255,255,255,.04);color:#eef8f2;text-align:left;padding:12px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.theme-mode-card strong,.theme-mode-card small{display:block}.theme-mode-card small{margin-top:4px;color:#c7d7df}.theme-mode-card.is-hovered,.theme-mode-card:hover{transform:translateY(-4px);border-color:#ffe49aa6;box-shadow:0 14px 30px #ffde8e33}.theme-chip{display:block;width:100%;height:62px;border-radius:12px;margin-bottom:10px}.theme-chip.calm{background:radial-gradient(circle at 24% 22%,rgba(167,144,218,.56) 0%,transparent 36%),linear-gradient(180deg,#2a2950 0%,#1f3c36 100%)}.theme-chip.magic{background:radial-gradient(circle at 66% 32%,rgba(255,225,137,.52) 0%,transparent 34%),linear-gradient(180deg,#1f3b5d 0%,#1f5b4a 100%)}@media (max-width: 860px){.theme-mode-grid{grid-template-columns:1fr}}.admin-shell{padding:var(--spacing-lg);border-radius:var(--radius-xl);border:1px solid var(--ui-panel-border);background:radial-gradient(circle at 12% 8%,rgba(255,222,143,.09) 0%,transparent 48%),linear-gradient(160deg,rgba(13,25,32,.9) 0%,rgba(11,20,26,.84) 100%);backdrop-filter:blur(12px);box-shadow:var(--ui-glass-shadow)}.admin-shell h1{color:var(--color-text-main)}.admin-shell>p{margin:var(--spacing-sm) 0 0;color:var(--color-text-sub);font-size:var(--font-size-sm)}.admin-row{margin-top:var(--spacing-md);gap:var(--spacing-md)}.admin-panel{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);padding:var(--spacing-md)}.mapping-shell{padding:var(--spacing-lg);border-radius:var(--radius-xl);border:1px solid var(--ui-panel-border);background:radial-gradient(circle at 84% 10%,rgba(125,182,154,.14) 0%,transparent 42%),linear-gradient(158deg,rgba(10,20,26,.9) 0%,rgba(9,17,22,.82) 100%);box-shadow:var(--ui-glass-shadow)}.mapping-header h1,.mapping-panel h2,.sound-mapping-header label{color:var(--color-text-main)}.mapping-header p,.gesture-mapping-group label,.sound-mapping-group label{color:var(--color-text-sub)}.mapping-grid{gap:var(--spacing-md);margin-top:var(--spacing-lg)}.mapping-panel{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1)}.gesture-mapping-group select,.sound-mapping-group select{border-radius:var(--radius-sm);background:rgba(14,26,30,.9);color:var(--color-text-main)}.mapping-option-button{border-radius:var(--radius-pill);color:var(--color-text-sub);transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.mapping-option-button:hover{box-shadow:0 4px 12px #00000029}.sound-mapping-group{gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-md);background:rgba(255,255,255,.045)}.object-thumbnail{border-radius:var(--radius-sm)}.test-sound-btn{border-radius:var(--radius-pill);font-weight:700;transition:transform var(--transition-fast),box-shadow var(--transition-fast),filter var(--transition-fast)}.test-sound-btn:hover{box-shadow:0 6px 12px #00000038;filter:brightness(1.06)}.admin-actions{gap:var(--spacing-sm);flex-wrap:wrap}.admin-actions button,.admin-actions a{border-radius:var(--radius-md);transition:transform var(--transition-fast),filter var(--transition-fast),box-shadow var(--transition-fast)}.admin-actions button:hover,.admin-actions a:hover{transform:translateY(-1px);box-shadow:0 6px 14px #0003}.admin-reset{color:var(--color-text-main);background:rgba(255,255,255,.13)}.theme-scene{background:linear-gradient(180deg,#1b1b34 0%,#17382f 100%)}.theme-shell{padding:var(--spacing-lg);border-radius:var(--radius-xl);border:1px solid var(--ui-panel-border);background:radial-gradient(circle at 14% 10%,rgba(255,222,143,.1) 0%,transparent 40%),linear-gradient(160deg,rgba(14,25,32,.88) 0%,rgba(11,20,26,.82) 100%)}.theme-shell h1{color:var(--color-text-main)}.theme-sub{color:var(--color-text-sub)}.theme-main-link,.theme-back-link,.global-main-link{border-radius:var(--radius-pill);transition:transform var(--transition-fast),background var(--transition-fast),color var(--transition-fast)}.theme-main-link:hover,.theme-back-link:hover,.theme-back-link.is-hovered,.global-main-link:hover{transform:translateY(-1px);color:var(--color-text-main)}.theme-mode-grid{margin-top:var(--spacing-md);gap:var(--spacing-sm)}.theme-mode-card{border-radius:var(--radius-lg);background:rgba(255,255,255,.045);transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.theme-mode-card:hover,.theme-mode-card.is-hovered{background:rgba(255,255,255,.085)}.theme-chip{border-radius:var(--radius-md)}.gesture-mapping-group select:focus-visible,.sound-mapping-group select:focus-visible,.sound-mapping-group input[type=file]:focus-visible,.test-sound-btn:focus-visible,.admin-actions button:focus-visible,.admin-actions a:focus-visible,.theme-main-link:focus-visible,.theme-back-link:focus-visible,.global-main-link:focus-visible,.theme-mode-card:focus-visible{outline:2px solid rgba(255,232,163,.95);outline-offset:2px}@media (max-width: 860px){.admin-shell,.mapping-shell,.theme-shell{width:min(95vw,780px);padding:var(--spacing-md)}.mapping-grid,.theme-mode-grid{grid-template-columns:1fr}.global-main-link{right:var(--spacing-sm);bottom:var(--spacing-sm)}}.tutorial-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);padding:var(--spacing-xl);animation:tutorialFadeIn .4s ease-out;pointer-events:auto}.tutorial-modal{background:linear-gradient(135deg,rgba(32,48,55,.95) 0%,rgba(22,32,38,.98) 100%);border:1px solid rgba(255,255,255,.15);border-radius:32px;padding:var(--spacing-2xl);max-width:680px;width:95%;max-height:90vh;box-shadow:0 40px 100px #000c,0 0 60px #7db69a26;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--spacing-xl);position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:tutorialSlideUp .6s cubic-bezier(.34,1.56,.64,1);pointer-events:auto}.tutorial-modal::-webkit-scrollbar{width:8px}.tutorial-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px;border:2px solid transparent;background-clip:padding-box}.tutorial-header{display:flex;flex-direction:column;align-items:center;gap:12px}.tutorial-icon{font-size:3.5rem;filter:drop-shadow(0 0 15px var(--color-primary));animation:tutorialIconFloat 3s ease-in-out infinite}.tutorial-title{margin:0;font-size:clamp(2rem,5vw,2.8rem);font-weight:900;color:#fff;text-align:center;background:linear-gradient(90deg,var(--color-primary),#fff,var(--color-primary));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:tutorialShine 6s linear infinite}.tutorial-description{margin:0;font-size:var(--font-size-xl);color:var(--color-text-sub);text-align:center;font-weight:600;max-width:600px;line-height:1.5}.tutorial-interactive-area,.tutorial-interactive-zone{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%;align-items:center}.tutorial-vision-head{width:100%;text-align:center}.tutorial-vision-summary{margin:6px 0 0;color:var(--color-text-sub);font-size:var(--font-size-sm)}.tutorial-vision-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:stretch}.tutorial-vision-grid-single{grid-template-columns:minmax(0,1fr);max-width:320px;margin:0 auto}.tutorial-vision-card{border-radius:18px;padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.tutorial-vision-title{margin:0 0 14px;text-align:center}.tutorial-vision-card h3{margin:0 0 10px;font-size:var(--font-size-sm);color:var(--color-primary)}.tutorial-gesture-preview{position:relative}.tutorial-gesture-preview .tutorial-normalized-canvas{width:100%;height:auto;aspect-ratio:1 / 1}.tutorial-gesture-result{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:8px 18px;border-radius:20px;background:rgba(0,0,0,.6);color:#fff;font-size:1.05rem;font-weight:800;white-space:nowrap;opacity:0;transition:all .3s ease;pointer-events:none}.tutorial-mirror-zone{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid rgba(125,182,154,.4);box-shadow:0 12px 32px #0006;background:rgba(0,0,0,.2)}.tutorial-camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:var(--spacing-lg);text-align:center;background:radial-gradient(circle at top,rgba(255,222,143,.12) 0%,transparent 36%),linear-gradient(180deg,rgba(19,31,38,.94) 0%,rgba(10,18,23,.96) 100%);color:var(--color-text-sub);font-size:var(--font-size-lg);font-weight:700;line-height:1.6}.tutorial-mirror-zone .camera-shell,.tutorial-camera-shell,.tutorial-mirror-zone #webcam,.tutorial-mirror-zone #handCanvas,.tutorial-hand-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block!important;border:none!important;border-radius:0!important}.tutorial-mirror-zone #webcam{object-fit:cover;transform:scaleX(-1);opacity:1!important;mix-blend-mode:normal!important}.tutorial-mirror-zone #handCanvas,.tutorial-hand-canvas{z-index:2;pointer-events:none}.tutorial-normalized-canvas{height:100%;min-height:280px}.tutorial-image-container{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto}.tutorial-image{width:auto;max-width:100%;max-height:55vh;display:block;object-fit:contain;border-radius:20px;background:#fff;border:1px solid rgba(125,182,154,.3);box-shadow:0 12px 36px #00000073;transition:transform .5s ease}.tutorial-modal:hover .tutorial-image{transform:scale(1.02)}.tutorial-action-stack{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.tutorial-practice-note{margin:0;text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.tutorial-action-row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-md)}.tutorial-practice-button,.tutorial-skip-button,.tutorial-close-button{border:0;border-radius:100px;padding:20px 32px;font-weight:800;font-size:1.15rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.tutorial-practice-button{width:min(100%,360px);color:#12221e;background:linear-gradient(135deg,#ffde8f 0%,#7db69e 100%);box-shadow:0 12px 32px #7db69a66}.tutorial-skip-button{color:#f5efe7;background:linear-gradient(135deg,rgba(66,83,97,.96) 0%,rgba(91,117,128,.95) 100%);box-shadow:0 12px 30px #2d3a444d}.tutorial-close-button{color:#12221e;background:linear-gradient(135deg,#ffde8f 0%,#7db69e 100%);box-shadow:0 12px 32px #7db69a66;transition:all .3s cubic-bezier(.4,0,.2,1)}.tutorial-practice-button:hover,.tutorial-close-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 48px #7db69a99;filter:brightness(1.1)}.tutorial-skip-button:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 42px #2d3a446b;filter:brightness(1.08)}.tutorial-practice-button:active,.tutorial-skip-button:active,.tutorial-close-button:active{transform:translateY(0) scale(.98)}.tutorial-practice-button:disabled,.tutorial-close-button:disabled{cursor:default;opacity:.66;transform:none;filter:none;box-shadow:0 8px 20px #7db69a2e}@keyframes tutorialFadeIn{0%{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(14px)}}@keyframes tutorialSlideUp{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes tutorialIconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes tutorialShine{to{background-position:200% center}}@keyframes creditsRoll{0%{transform:translateY(0)}to{transform:translateY(-68%)}}