*,*:before,*:after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:root{--bg-deep: #0a1208;--bg-panel: rgba(10, 20, 8, .88);--bg-panel-solid: #0c1709;--text-primary: #f2ece0;--text-secondary: rgba(242, 236, 224, .65);--text-muted: rgba(242, 236, 224, .38);--accent-gold: #78b04a;--accent-gold-bright: #9fcf6f;--accent-gold-dim: rgba(120, 176, 74, .25);--border-subtle: rgba(120, 176, 74, .12);--border-active: rgba(120, 176, 74, .45);--staff-line: rgba(185, 220, 165, .5);--scan-line: rgba(170, 230, 140, .9);--note-glow: rgba(120, 176, 74, .8);--note-active: rgba(210, 248, 185, .92);--font-display: "Lora", Georgia, serif;--font-ui: "Montserrat", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}body{overscroll-behavior:none;touch-action:manipulation}button,.toolbar-btn,.segment-btn,.top-btn{-webkit-user-select:none;user-select:none}.splash{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(30,60,20,.7) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(20,50,15,.5) 0%,transparent 60%),var(--bg-deep);z-index:100;transition:opacity .7s ease;overflow:hidden}.splash:before,.splash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.splash:before{background-image:radial-gradient(1.5px 1.5px at 15% 25%,rgba(170,230,120,.55) 0%,transparent 100%),radial-gradient(1px 1px at 80% 15%,rgba(170,230,120,.4) 0%,transparent 100%),radial-gradient(2px 2px at 55% 70%,rgba(170,230,120,.45) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(170,230,120,.35) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 70% 45%,rgba(170,230,120,.5) 0%,transparent 100%),radial-gradient(1px 1px at 90% 70%,rgba(170,230,120,.3) 0%,transparent 100%),radial-gradient(1px 1px at 10% 85%,rgba(170,230,120,.4) 0%,transparent 100%);animation:fireflyFloat 8s ease-in-out infinite alternate}.splash:after{background-image:radial-gradient(1px 1px at 45% 20%,rgba(200,240,160,.4) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 25% 45%,rgba(200,240,160,.35) 0%,transparent 100%),radial-gradient(1px 1px at 75% 80%,rgba(200,240,160,.45) 0%,transparent 100%),radial-gradient(2px 2px at 60% 35%,rgba(200,240,160,.3) 0%,transparent 100%);animation:fireflyFloat 11s ease-in-out infinite alternate-reverse}@keyframes fireflyFloat{0%{opacity:.4;transform:translateY(0)}to{opacity:1;transform:translateY(-12px)}}.splash.hidden{opacity:0;pointer-events:none}.splash-title{font-family:var(--font-display);font-size:clamp(28px,7vw,46px);font-weight:400;font-style:italic;color:var(--accent-gold-bright);letter-spacing:.06em;text-align:center;text-shadow:0 0 40px rgba(120,176,74,.4);animation:fadeInUp 1.2s ease-out;position:relative;z-index:1}.splash-subtitle{font-family:var(--font-ui);font-weight:300;font-size:clamp(16px,3.9vw,17px);color:#f2ece0b8;margin-top:16px;text-align:center;padding:0 32px;letter-spacing:.04em;animation:fadeInUp 1.2s ease-out .3s both;position:relative;z-index:1}.splash-lang{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;animation:fadeInUp 1.2s ease-out 1s both;z-index:1}.lang-btn{padding:8px 16px;border:1px solid var(--border-subtle);border-radius:100px;background:transparent;color:var(--text-muted);font-family:var(--font-ui);font-size:13px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.lang-btn.active{border-color:#fff9;color:#ffffffe6}.splash-mist{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 80% 35% at 20% 90%,rgba(60,90,160,.18) 0%,transparent 70%),radial-gradient(ellipse 60% 25% at 80% 85%,rgba(80,60,140,.14) 0%,transparent 60%),radial-gradient(ellipse 100% 20% at 50% 100%,rgba(40,80,100,.22) 0%,transparent 80%);animation:mistBreath 7s ease-in-out infinite alternate}@keyframes mistBreath{0%{opacity:.6}to{opacity:1}}.kodama-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.kodama{position:absolute;background:radial-gradient(circle,rgba(255,255,230,.95) 0%,rgba(255,255,200,.4) 25%,transparent 65%);border-radius:0;box-shadow:none;animation:starTwinkle ease-in-out infinite}.kodama:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:1.5px;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,230,.7) 15%,rgba(255,255,255,1) 50%,rgba(255,255,230,.7) 85%,transparent 100%);border-radius:100px;box-shadow:0 0 5px 2px #ffffd28c}.kodama:after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:1.5px;background:linear-gradient(to right,transparent 0%,rgba(255,255,230,.7) 15%,rgba(255,255,255,1) 50%,rgba(255,255,230,.7) 85%,transparent 100%);border-radius:100px;box-shadow:0 0 5px 2px #ffffd28c}@keyframes starTwinkle{0%{opacity:.15;transform:scale(.5) rotate(0)}20%{opacity:1;transform:scale(1.1) rotate(12deg)}40%{opacity:.4;transform:scale(.7) rotate(24deg)}65%{opacity:1;transform:scale(1.3) rotate(38deg)}85%{opacity:.5;transform:scale(.8) rotate(42deg)}to{opacity:.15;transform:scale(.5) rotate(45deg)}}@keyframes kodamaAppear{0%{opacity:0;transform:scale(0) rotate(0)}to{opacity:1;transform:scale(1) rotate(0)}}.k1{left:9%;top:63%;width:28px;height:28px;animation:starTwinkle 3.5s 0s ease-in-out infinite,kodamaAppear .8s .4s both}.k2{left:76%;top:20%;width:42px;height:42px;animation:starTwinkle 4.8s .8s ease-in-out infinite,kodamaAppear .8s .7s both}.k3{left:84%;top:53%;width:22px;height:22px;animation:starTwinkle 3.1s 1.5s ease-in-out infinite,kodamaAppear .8s 1s both}.k4{left:27%;top:14%;width:18px;height:18px;animation:starTwinkle 4s .3s ease-in-out infinite,kodamaAppear .8s .9s both}.k5{left:54%;top:73%;width:32px;height:32px;animation:starTwinkle 5.2s 1.2s ease-in-out infinite,kodamaAppear .8s .6s both}.k6{left:5%;top:31%;width:16px;height:16px;animation:starTwinkle 3.8s 2.1s ease-in-out infinite,kodamaAppear .8s 1.3s both}.sparkle-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sp{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,240,1) 0%,rgba(255,255,210,.5) 40%,transparent 70%);box-shadow:0 0 4px 1px #ffffdc99;animation:spTwinkle ease-in-out infinite}@keyframes spTwinkle{0%,to{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}.sp1{width:4px;height:4px;left:18%;top:40%;animation-duration:2.1s;animation-delay:0s}.sp2{width:3px;height:3px;left:65%;top:18%;animation-duration:3s;animation-delay:.5s}.sp3{width:5px;height:5px;left:42%;top:55%;animation-duration:2.6s;animation-delay:1s}.sp4{width:3px;height:3px;left:90%;top:40%;animation-duration:1.9s;animation-delay:.3s}.sp5{width:4px;height:4px;left:33%;top:80%;animation-duration:3.3s;animation-delay:1.8s}.sp6{width:2px;height:2px;left:72%;top:65%;animation-duration:2.4s;animation-delay:.7s}.sp7{width:4px;height:4px;left:50%;top:30%;animation-duration:2.8s;animation-delay:1.4s}.sp8{width:3px;height:3px;left:12%;top:75%;animation-duration:2.2s;animation-delay:.9s}.sp9{width:5px;height:5px;left:80%;top:78%;animation-duration:3.5s;animation-delay:2.1s}.sp10{width:2px;height:2px;left:58%;top:48%;animation-duration:2s;animation-delay:.2s}.sp11{width:3px;height:3px;left:22%;top:25%;animation-duration:2.7s;animation-delay:1.6s}.sp12{width:4px;height:4px;left:46%;top:88%;animation-duration:3.1s;animation-delay:.6s}.splash-modes{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:44px;position:relative;z-index:1;animation:fadeInUp 1.2s ease-out .6s both}.splash-mode-label{font-family:var(--font-display);font-size:13px;font-weight:400;font-style:italic;color:#f2ece0a6;letter-spacing:.08em}.mode-cards-row{display:flex;gap:14px;width:100%;max-width:340px}.mode-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px 24px;border:1px solid var(--border-subtle);border-radius:18px;background:#ffffff08;cursor:pointer;transition:border-color .22s,background .22s;-webkit-tap-highlight-color:transparent;animation:cardEnter .5s ease-out both}.mode-card:nth-child(1){animation-delay:.05s}.mode-card:nth-child(2){animation-delay:.15s}.mode-card:hover,.mode-card:active{border-color:var(--border-active);background:var(--accent-gold-dim)}.mode-card svg{display:block}.mode-card-title{font-family:var(--font-ui);font-size:11px;font-weight:500;color:var(--text-secondary);letter-spacing:.18em;text-transform:uppercase}.camera-view{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;overflow:hidden;display:none}.camera-view.active{display:block}#zoomContainer{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;will-change:transform}.camera-video{width:100%;height:100%;object-fit:cover}.photo-preview{position:absolute;top:0;right:0;bottom:0;left:0;background-size:contain;background-position:center;background-repeat:no-repeat;display:none}.photo-preview.active{display:block}.staff-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.camera-error{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-deep);padding:32px;text-align:center;gap:12px}.camera-error.active{display:flex}.camera-error-text{color:var(--text-secondary);font-size:15px;line-height:1.6}.top-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));z-index:40}.top-btn{width:40px;height:40px;border-radius:50%;border:none;background:#00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-primary);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s}.top-btn:active{background:#d4a5744d}.mode-badge{padding:6px 14px;border-radius:100px;background:#00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:11px;font-weight:600;color:#ffffffe6;letter-spacing:.1em;text-transform:uppercase}.bottom-toolbar{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:14px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom));background:var(--bg-panel);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border-subtle);border-radius:20px 20px 0 0;z-index:50}.toolbar-capture-row{display:flex;justify-content:center;padding-bottom:12px}.toolbar-actions-row{display:flex;align-items:center;justify-content:space-around;width:100%}.toolbar-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;border:none;background:none;color:var(--text-secondary);font-family:var(--font-ui);font-size:11px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s;min-width:60px;min-height:44px}.toolbar-btn.active{color:#fffffff2}.toolbar-btn:active{color:#fff}.toolbar-btn-icon{font-size:22px;line-height:1}.capture-btn{width:64px;height:64px;border-radius:50%;border:3px solid var(--text-primary);background:transparent;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}.capture-btn:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;background:var(--text-primary);transition:transform .15s}.capture-btn:active:after{transform:scale(.85)}.capture-btn.retake{border-color:var(--accent-gold)}.capture-btn.retake:after{background:var(--accent-gold)}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;opacity:0;pointer-events:none;transition:opacity .35s;z-index:55}.settings-backdrop.open{opacity:1;pointer-events:auto}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--bg-panel-solid);border-left:1px solid var(--border-subtle);transform:translate(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:60;overflow-y:auto;padding:20px;padding-top:max(20px,env(safe-area-inset-top))}.settings-panel.open{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.settings-title{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary)}.settings-close{width:32px;height:32px;border-radius:50%;border:none;background:#ffffff0f;color:var(--text-secondary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.setting-group{margin-bottom:28px}.setting-label{font-family:var(--font-ui);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.segment-control{display:grid;gap:6px;background:#ffffff0a;border-radius:10px;padding:4px}.segment-control.cols-2{grid-template-columns:repeat(2,1fr)}.segment-control.cols-3{grid-template-columns:repeat(3,1fr)}.segment-control.cols-4{grid-template-columns:repeat(2,1fr)}.segment-btn{padding:10px 8px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font-ui);font-size:13px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;text-align:center}.segment-btn.active{background:var(--accent-gold-dim);color:#fffffff2}.slider-control{display:flex;align-items:center;gap:10px}.slider-control input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ffffff1a;border-radius:2px;outline:none}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent-gold);cursor:pointer}.slider-control input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent-gold);border:none;cursor:pointer}.slider-label{font-size:11px;color:var(--text-muted);min-width:30px;text-align:center}.settings-divider{border:none;border-top:1px solid var(--border-subtle);margin:4px 0 28px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}.toggle-row:last-child{border-bottom:none}.toggle-label{font-family:var(--font-ui);font-size:13px;color:var(--text-secondary)}.toggle-switch{position:relative;display:inline-block;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{display:block;width:44px;height:26px;border-radius:100px;background:#ffffff1a;transition:background .25s;position:relative}.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000059;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}.toggle-switch input:checked+.toggle-track{background:var(--accent-gold)}.toggle-switch input:checked+.toggle-track .toggle-knob{transform:translate(18px);background:#fff}.opencv-status{position:fixed;top:max(60px,calc(env(safe-area-inset-top) + 56px));left:50%;transform:translate(-50%);padding:5px 12px;border-radius:100px;background:var(--bg-panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:11px;color:var(--text-muted);z-index:45;transition:opacity .8s;white-space:nowrap}.opencv-status.loaded{opacity:0;pointer-events:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEnter{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%{transform:scale(1);opacity:1}to{transform:scale(2.5);opacity:0}}@keyframes leafSway{0%,to{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}@media (orientation: landscape) and (max-height: 500px){.splash-title{font-size:clamp(18px,5vh,28px)}.splash-subtitle{margin-top:8px;font-size:14px}.splash-start-btn{margin-top:20px;padding:10px 32px}.splash-lang{bottom:max(8px,env(safe-area-inset-bottom))}.mode-select{gap:10px;padding:16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left))}.mode-select-title{margin-bottom:8px}.mode-cards-row{max-width:480px}.mode-card{padding:18px 12px 14px;gap:10px}.top-bar{padding-top:8px;padding-bottom:8px;padding-left:max(16px,env(safe-area-inset-left));right:calc(64px + max(0px,env(safe-area-inset-right)))}.bottom-toolbar{bottom:0;top:0;left:auto;right:0;width:calc(64px + max(0px,env(safe-area-inset-right)));height:100%;flex-direction:column;padding:12px 0;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-right:max(8px,env(safe-area-inset-right));border-top:none;border-left:1px solid var(--border-subtle);justify-content:space-around}.toolbar-capture-row{padding-bottom:0}.toolbar-actions-row{flex-direction:column;width:auto}.toolbar-btn>span:last-child{display:none}.capture-btn{width:50px;height:50px}.toolbar-btn{padding:8px;min-width:auto;min-height:36px}}@media (min-width: 768px){.settings-panel{width:360px}.splash-title{font-size:56px}}.zoom-pill{position:fixed;bottom:calc(158px + max(0px,env(safe-area-inset-bottom)));left:50%;transform:translate(-50%);overflow:hidden;width:156px;box-sizing:border-box;background:#00000085;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:100px;padding:3px;border:1px solid rgba(255,255,255,.1);transition:opacity .35s ease;z-index:52;pointer-events:auto}.zoom-track{display:flex;gap:6px;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}.zoom-btn{width:46px;height:46px;border-radius:50%;border:none;background:none;color:#ffffffd9;font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation;transition:background .18s,color .18s,transform .12s;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent}.zoom-btn .zoom-x{font-size:11px;font-weight:400;opacity:.75}.zoom-btn.active{background:#ffd60038;color:#ffd600}.zoom-btn:active{transform:scale(.88)}@media (orientation: landscape) and (max-height: 500px){.zoom-pill{bottom:max(14px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:auto;transform:none}}.zoom-dial-overlay{position:fixed;bottom:0;left:0;right:0;height:200px;z-index:61;pointer-events:auto;transition:opacity .28s ease}#zoomDialCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.zoom-dial-value{position:absolute;top:36px;left:50%;transform:translate(-50%);font-family:var(--font-ui);font-size:28px;font-weight:700;color:#ffd600;letter-spacing:.02em;text-shadow:0 0 28px rgba(255,214,0,.55);pointer-events:none;white-space:nowrap}