*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;background:#000;width:100%;height:100%;font-family:Orbitron,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#canvas-container{z-index:1;position:absolute;inset:0}#canvas-container canvas{display:block;width:100%!important;height:100%!important}#ui-overlay{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;padding:20px;display:flex;position:absolute;inset:0}#header{text-align:center;-webkit-backdrop-filter:blur(10px);background:#00000080;border:1px solid #ffffff1a;border-radius:8px;padding:12px 28px}#header-title{letter-spacing:8px;background:linear-gradient(135deg,#f44,#f80,#f44);-webkit-text-fill-color:transparent;background-clip:text;font-family:Noto Serif JP,serif;font-size:28px;font-weight:900}#header-subtitle{letter-spacing:6px;color:#ffffff80;margin-top:4px;font-size:10px}#header-status{letter-spacing:3px;color:#ffffff4d;border-top:1px solid #ffffff1a;margin-top:8px;padding-top:8px;font-size:11px}#technique-name{text-align:center;opacity:0;pointer-events:none;transition:opacity .3s ease-out,transform .3s ease-out;transform:scale(.5)}#technique-name.visible{opacity:1;transform:scale(1)}#technique-kanji{text-shadow:0 0 40px,0 0 80px;font-family:Noto Serif JP,serif;font-size:120px;font-weight:900}#technique-label{letter-spacing:12px;margin-top:-10px;font-family:Orbitron,sans-serif;font-size:24px;font-weight:700}#technique-name.red{color:#f33}#technique-name.blue{color:#36f}#technique-name.purple{color:#a2f}#hand-status{letter-spacing:3px;-webkit-backdrop-filter:blur(8px);background:#0006;border:1px solid #ffffff14;border-radius:6px;gap:40px;padding:10px 24px;font-size:12px;display:flex}.dot{color:#ffffff4d;font-size:8px}.dot.active{color:#0f8}.dot.red{color:#f33}.dot.blue{color:#36f}.dot.purple{color:#a2f}.status-text{color:#fff6}#loading-screen{z-index:100;background:#000;flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s;display:flex;position:absolute;inset:0}#loading-screen.hidden{opacity:0;pointer-events:none}#loading-text{letter-spacing:12px;background:linear-gradient(135deg,#f44,#a2f,#36f);-webkit-text-fill-color:transparent;background-clip:text;font-family:Noto Serif JP,serif;font-size:48px;font-weight:900}#loading-subtitle{letter-spacing:4px;color:#fff6;margin-top:12px;font-size:12px}#loading-bar{background:#ffffff1a;border-radius:1px;width:200px;height:2px;margin-top:24px;overflow:hidden}#loading-fill{background:linear-gradient(90deg,#f44,#a2f,#36f);width:0%;height:100%;transition:width .3s}#app.flash{animation:.3s ease-out screenFlash}@keyframes screenFlash{0%{filter:brightness(3)saturate(.5)}to{filter:brightness()saturate()}}#guide-open-btn{z-index:15;color:#fff;letter-spacing:2px;cursor:pointer;-webkit-backdrop-filter:blur(8px);pointer-events:auto;background:#000000a6;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:8px;padding:10px 18px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:20px;left:20px;box-shadow:0 4px 20px #0000004d}#guide-open-btn:hover{background:#ffffff1a;border-color:#fff6;transform:translateY(-2px);box-shadow:0 0 15px #fff3}#guide-open-btn.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}#guide-panel{z-index:20;-webkit-backdrop-filter:blur(20px);pointer-events:auto;background:#08080ce0;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;width:380px;padding:24px;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;display:flex;position:absolute;top:100px;bottom:100px;left:20px;box-shadow:0 10px 30px #00000080,inset 0 0 0 1px #ffffff0d}#guide-panel:not(.visible){opacity:0;pointer-events:none;transform:translate(-420px)}#guide-close-btn{color:#fff6;cursor:pointer;background:0 0;border:none;font-size:24px;line-height:1;transition:color .2s;position:absolute;top:16px;right:16px}#guide-close-btn:hover{color:#fff}.guide-header{border-bottom:1px solid #ffffff1a;margin-bottom:20px;padding-bottom:12px}.guide-title{letter-spacing:2px;color:#fff;text-shadow:0 0 10px #ffffff1a;font-family:Noto Serif JP,serif;font-size:18px;font-weight:900}.guide-subtitle{letter-spacing:1px;color:#fff6;margin-top:4px;font-size:10px}.guide-content{flex-direction:column;flex:1;gap:14px;padding-right:4px;display:flex;overflow-y:auto}.guide-content::-webkit-scrollbar{width:4px}.guide-content::-webkit-scrollbar-track{background:#ffffff05}.guide-content::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.guide-content::-webkit-scrollbar-thumb:hover{background:#ffffff59}.guide-card{background:#ffffff05;border:1px solid #ffffff0a;border-radius:8px;padding:12px 16px;transition:all .3s;position:relative;overflow:hidden}.guide-card:before{content:"";width:4px;transition:all .3s;position:absolute;top:0;bottom:0;left:0}.guide-card.red-theme:before{background:#f33}.guide-card.red-theme:hover{background:#ff333308;border-color:#f333;box-shadow:0 4px 15px #ff33330d}.guide-card.blue-theme:before{background:#36f}.guide-card.blue-theme:hover{background:#3366ff08;border-color:#36f3;box-shadow:0 4px 15px #3366ff0d}.guide-card.purple-theme:before{background:#a2f}.guide-card.purple-theme:hover{background:#aa22ff08;border-color:#a2f3;box-shadow:0 4px 15px #aa22ff0d}.guide-card.hollow-theme:before{background:linear-gradient(#f33,#a2f,#36f)}.guide-card.hollow-theme:hover{background:#aa22ff0a;border-color:#aa22ff4d;box-shadow:0 4px 20px #aa22ff14}.guide-card-header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.guide-card-header .kanji{white-space:nowrap;background:#ffffff0d;border-radius:4px;justify-content:center;align-items:center;width:auto;min-width:28px;height:28px;padding:0 6px;font-family:Noto Serif JP,serif;font-size:16px;font-weight:900;display:flex}.red-theme .kanji{color:#f33;text-shadow:0 0 5px #ff333380}.blue-theme .kanji{color:#36f;text-shadow:0 0 5px #3366ff80}.purple-theme .kanji{color:#a2f;text-shadow:0 0 5px #aa22ff80}.hollow-theme .kanji{color:#fff;background:linear-gradient(135deg,#f33,#36f);border-radius:4px;font-size:16px}.title-group{flex-direction:column;display:flex}.tech-title{letter-spacing:1px;font-size:11px;font-weight:700}.hand-label{color:#fff6;letter-spacing:1.5px;margin-top:2px;font-size:8px}.gesture-visual{align-items:center;gap:12px;display:flex}.gesture-icon{color:#ffffffb3;background:#ffffff08;border:1px solid #ffffff0d;border-radius:6px;flex-shrink:0;width:32px;height:32px;padding:4px}.red-theme .gesture-icon{color:#f55}.blue-theme .gesture-icon{color:#58f}.purple-theme .gesture-icon{color:#c6f}.hollow-theme .gesture-icon{color:#d9f}.gesture-desc{color:#ffffffbf;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9.5px;line-height:1.4}#guide-close-bottom-btn{color:#fff;cursor:pointer;letter-spacing:2px;background:linear-gradient(90deg,#ffffff0d 0%,#ffffff1a 50%,#ffffff0d 100%);border:1px solid #ffffff26;border-radius:6px;margin-top:16px;padding:10px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;transition:all .2s}#guide-close-bottom-btn:hover{letter-spacing:3px;background:#ffffff26;border-color:#ffffff59}#camera-toggle-btn{z-index:15;color:#fff;letter-spacing:2px;cursor:pointer;-webkit-backdrop-filter:blur(8px);pointer-events:auto;background:#000000a6;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:8px;padding:10px 18px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:20px;right:20px;box-shadow:0 4px 20px #0000004d}#camera-toggle-btn:hover{background:#ffffff1a;border-color:#fff6;transform:translateY(-2px);box-shadow:0 0 15px #fff3}.camera-icon{stroke:currentColor;width:16px;height:16px}@media (width<=768px){body,html,#app{height:100svh}#header{padding:8px 16px}#header-title{letter-spacing:4px;font-size:20px}#technique-kanji{font-size:72px}#technique-label{letter-spacing:8px;font-size:16px}#hand-status{gap:16px;padding:10px 16px;font-size:10px}#loading-text{letter-spacing:8px;font-size:36px}#guide-panel{width:auto;padding:16px;inset:90px 10px}#guide-panel:not(.visible){opacity:0;transform:translateY(110%)}.guide-title{font-size:16px}.gesture-desc{font-size:9px}#guide-open-btn{padding:8px 12px;font-size:10px;bottom:10px;left:10px}#camera-toggle-btn{padding:8px 12px;font-size:10px;bottom:10px;right:10px}}