:root{color:#eefcff;background:#020608;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.app-shell{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(210,255,255,.2),transparent 11%),radial-gradient(circle at 50% 44%,rgba(56,215,255,.32),transparent 32%),radial-gradient(circle at 76% 26%,rgba(187,93,255,.16),transparent 28%),radial-gradient(circle at 22% 74%,rgba(255,209,102,.12),transparent 26%),linear-gradient(145deg,#020608,#031519 48%,#050611)}.camera-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.38;filter:saturate(1.16) contrast(1.18) brightness(.68)}.particle-stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.particle-stage canvas{display:block;width:100%;height:100%}.scanline-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at center,transparent 0%,transparent 58%,rgba(0,0,0,.5) 100%);background-size:100% 5px,100% 100%;mix-blend-mode:screen;opacity:.3}.effect-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .16s ease}.effect-overlay.live{opacity:1}.energy-core{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(214,255,255,.98) 10%,rgba(105,240,255,.74) 28%,rgba(64,208,255,.24) 52%,transparent 72%);box-shadow:0 0 22px #ffffffe6,0 0 54px #6fefffd1,0 0 104px #38d7ff75,0 0 168px #b36bff47;mix-blend-mode:screen;animation:corePulse 1.15s ease-in-out infinite alternate}.effect-overlay.mode-1 .energy-core{background:radial-gradient(circle,#fff 0%,#fff5bf 12%,rgba(255,209,102,.7) 30%,rgba(77,220,255,.18) 56%,transparent 75%);box-shadow:0 0 24px #fff,0 0 64px #ffd166d1,0 0 132px #5ddbff57}.effect-overlay.mode-2 .energy-core{background:radial-gradient(circle,#fff 0%,#f2ddff 12%,rgba(190,112,255,.78) 30%,rgba(105,229,255,.2) 58%,transparent 76%);box-shadow:0 0 24px #fff,0 0 68px #be70ffdb,0 0 138px #5ddbff52}.effect-overlay.mode-3 .energy-core{background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.96) 16%,rgba(155,255,235,.58) 36%,rgba(255,209,102,.2) 58%,transparent 76%);box-shadow:0 0 28px #fff,0 0 76px #ffffffc2,0 0 148px #9bffeb5c}.energy-bridge{position:absolute;height:14px;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),rgba(112,240,255,.92),rgba(255,209,102,.48),transparent);box-shadow:0 0 22px #70f0ffc7,0 0 70px #b36bff57;mix-blend-mode:screen;animation:bridgePulse .62s ease-in-out infinite alternate}.holo-number{position:absolute;z-index:2;min-width:.7em;transform:translate(-50%,-58%);color:#f1ffffe6;font-family:SFMono-Regular,Consolas,monospace;font-size:clamp(86px,26vw,240px);font-weight:900;line-height:.82;text-align:center;text-shadow:0 0 12px #fff,0 0 38px rgba(111,239,255,.92),0 0 92px rgba(179,107,255,.62);opacity:.78;mix-blend-mode:screen}.number-equation{position:absolute;z-index:3;transform:translate(-50%,calc(-50% + clamp(58px,14vw,116px)));border:1px solid rgba(155,255,235,.44);border-radius:7px;padding:5px 9px;color:#dfffff;background:#0010146b;box-shadow:0 0 20px #6fefff42;font-size:12px;line-height:1.2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.finger-beam{position:absolute;height:6px;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(106,229,255,.96),transparent);box-shadow:0 0 20px #6ae5fff2,0 0 58px #6ae5ff94;mix-blend-mode:screen;animation:beamPulse .5s ease-in-out infinite alternate}.finger-beam.gold{background:linear-gradient(90deg,#fff7d1,#ffd166,transparent);box-shadow:0 0 20px #ffd166f2,0 0 58px #ff883899}.finger-beam.arc{background:linear-gradient(90deg,#fff,#b36bff,transparent);box-shadow:0 0 20px #b36bfff2,0 0 60px #ff58e880}.finger-orb{position:absolute;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;animation:fingerOrb .86s ease-in-out infinite alternate}.finger-orb.all{width:14px;height:14px;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(114,226,255,.48) 42%,transparent 74%);box-shadow:0 0 14px #72e2ff9e,0 0 34px #72e2ff52}.finger-orb.active{width:24px;height:24px;background:radial-gradient(circle,#fff,#9bffeb 34%,rgba(86,200,255,.12) 72%,transparent);box-shadow:0 0 24px #9bffebfa,0 0 58px #56c8ff94}.swipe-wave{position:absolute;top:0;bottom:0;width:32vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),rgba(106,229,255,.34),transparent);filter:blur(2px);opacity:0;mix-blend-mode:screen}.effect-overlay.swipe-left .swipe-wave{animation:swipeLeft .74s ease-out}.effect-overlay.swipe-right .swipe-wave{animation:swipeRight .74s ease-out}.shockwave{position:absolute;left:50%;top:45%;width:min(116vw,920px);aspect-ratio:1;border:1px solid rgba(155,255,235,.52);border-radius:50%;transform:translate(-50%,-50%) scale(.28);opacity:0;box-shadow:inset 0 0 34px #56c8ff2e,0 0 58px #56c8ff40}.effect-overlay.press .shockwave-one,.effect-overlay.heart .shockwave-one,.effect-overlay.lift .shockwave-one,.effect-overlay.swipe-left .shockwave-one,.effect-overlay.swipe-right .shockwave-one{animation:shockwave .9s ease-out infinite}.effect-overlay.heart .shockwave-two,.effect-overlay.expand .shockwave-two,.effect-overlay.pinch .shockwave-two{animation:shockwave 1.2s ease-out infinite .22s}.energy-cracks{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(34deg,transparent 42%,rgba(255,255,255,.32) 42.3%,transparent 43%),linear-gradient(141deg,transparent 46%,rgba(179,107,255,.36) 46.2%,transparent 46.9%),linear-gradient(74deg,transparent 52%,rgba(155,255,235,.3) 52.2%,transparent 53%);mix-blend-mode:screen}.effect-overlay.press .energy-cracks,.effect-overlay.arc .energy-cracks,.effect-overlay.heart .energy-cracks{opacity:.78;animation:crackBlink .78s steps(2,end) infinite}.screen-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.74),transparent 20%),radial-gradient(circle at 50% 50%,rgba(106,229,255,.28),transparent 56%);mix-blend-mode:screen;transition:opacity .12s ease}.hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.top-bar{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.brand-chip,.status-chip,.metrics-panel,.gesture-panel,.number-guide,.compat-panel,.error-panel,.tutorial-panel{border:1px solid rgba(125,255,221,.26);background:#020c0f85;box-shadow:0 0 24px #3cd9ff24,inset 0 0 18px #7dffdd14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.compat-panel~.tutorial-panel{top:118px}.compat-panel{position:absolute;left:50%;top:max(56px,calc(env(safe-area-inset-top) + 50px));display:flex;align-items:center;gap:8px;width:min(560px,calc(100vw - 28px));transform:translate(-50%);border-color:#ffd1666b;border-radius:8px;padding:10px 12px;color:#fff3c4;font-size:12px;line-height:1.45}.brand-chip,.status-chip{display:flex;align-items:center;min-width:0;min-height:36px;gap:8px;border-radius:7px;padding:8px 10px;color:#d9fffb;font-size:12px;line-height:1.25}.brand-chip span,.status-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-chip{flex:0 0 auto;color:#96ffe8}.status-chip{justify-content:flex-end;max-width:min(58vw,560px);text-align:right;color:#d8f4ff}.status-chip.ready{border-color:#7cffb25c}.status-chip.error{border-color:#ff707085;color:#ffd1d1}.start-panel{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));width:min(560px,calc(100vw - 28px));transform:translate(-50%);pointer-events:auto;border:1px solid rgba(125,255,221,.34);border-radius:8px;padding:20px;background:#010c0fad;box-shadow:0 18px 56px #00000059,0 0 72px #56c8ff2e,inset 0 0 34px #56c8ff14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.start-mark{display:grid;width:58px;height:58px;place-items:center;margin-bottom:14px;border-radius:50%;color:#a3fff0;background:radial-gradient(circle,rgba(125,255,221,.22),rgba(86,200,255,.07) 64%,transparent);box-shadow:0 0 42px #56c8ff5c}.start-panel h1{margin:0;font-size:clamp(28px,6vw,46px);line-height:1.04}.start-panel p{max-width:38rem;margin:12px 0 18px;color:#c7e4eb;font-size:15px;line-height:1.65}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;min-width:148px;border:1px solid rgba(155,255,235,.72);border-radius:7px;padding:0 18px;color:#021014;background:linear-gradient(135deg,#a2ffee,#65d7ff);box-shadow:0 0 28px #65d7ff57;cursor:pointer}.tutorial-panel{position:absolute;right:max(14px,env(safe-area-inset-right));top:62px;width:min(330px,calc(100vw - 28px));border-color:#ffd16657;border-radius:8px;padding:12px;color:#f4fffb}.tutorial-kicker,.guide-title{display:flex;align-items:center;gap:7px;min-height:24px;color:#ffd166;font-size:12px}.tutorial-panel h2{margin:5px 0 7px;font-size:20px;line-height:1.15}.tutorial-panel p{margin:4px 0;color:#d7edf2;font-size:12px;line-height:1.42}.effect-line{margin-top:8px;border-left:2px solid #9bffeb;padding-left:8px;color:#9bffeb;font-size:12px;line-height:1.35}.tutorial-progress{display:flex;gap:5px;margin-top:10px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:#ffffff2e}.tutorial-dot.current{background:#ffd166;box-shadow:0 0 14px #ffd166d9}.tutorial-dot.matched{background:#9bffeb;box-shadow:0 0 16px #9bffebe6}.gesture-panel{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:min(430px,calc(100vw - 28px));border-radius:8px;padding:11px}.gesture-title{display:flex;align-items:center;gap:8px;min-height:26px;color:#e6fffb;font-size:13px}.number-readout{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center;margin:8px 0}.number-readout strong{grid-row:span 2;min-width:58px;color:#fff;font-family:SFMono-Regular,Consolas,monospace;font-size:52px;line-height:.9;text-shadow:0 0 22px rgba(155,255,235,.78)}.number-readout span{color:#9bffeb;font-size:12px}.number-readout em{color:#ddfff9b8;font-size:12px;font-style:normal}.cluster-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.cluster-chip,.gesture-pill{min-height:24px;border:1px solid rgba(185,242,255,.16);border-radius:6px;padding:4px 7px;color:#dcf8ff9e;background:#ffffff0a;font-size:12px;line-height:1.2}.cluster-chip.active,.gesture-pill.active{color:#041417;border-color:#9bffebeb;background:#9bffeb;box-shadow:0 0 18px #9bffeb59}.gesture-grid{display:flex;flex-wrap:wrap;gap:5px}.number-guide{position:absolute;left:max(14px,env(safe-area-inset-left));top:62px;display:grid;gap:5px;width:min(360px,calc(100vw - 28px));border-radius:8px;padding:10px;color:#ddfff9c7;font-size:12px;line-height:1.35}.metrics-panel{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;min-height:36px;border-radius:7px;padding:8px;color:#bfeefa;font-family:SFMono-Regular,Consolas,monospace;font-size:12px}.metrics-panel span{padding:4px 6px;border-radius:5px;background:#ffffff0b}.error-panel{position:absolute;left:50%;top:88px;display:flex;align-items:center;gap:8px;width:min(520px,calc(100vw - 28px));transform:translate(-50%);border-color:#ff707085;border-radius:8px;padding:12px;color:#ffd1d1;font-size:13px}.signature-system{--sig-x: 50%;--sig-y: 46%;position:absolute;left:var(--sig-x);top:var(--sig-y);z-index:4;width:clamp(230px,54vw,520px);height:clamp(230px,54vw,520px);transform:translate(-50%,-50%);pointer-events:none;opacity:.54;mix-blend-mode:screen}.signature-system.live{opacity:.82}.signature-ring{width:100%;height:100%;animation:signatureSpin 18s linear infinite;filter:drop-shadow(0 0 16px rgba(125,255,221,.85))}.signature-ring text{fill:#b7fff1db;font-size:11px;font-weight:700}.signature-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ddfff9bd;font-family:SFMono-Regular,Consolas,monospace;font-size:clamp(11px,2.5vw,16px);text-shadow:0 0 16px rgba(125,255,221,.72)}.signature-flash{position:absolute;left:50%;top:50%;z-index:6;pointer-events:none;color:#f4fffb;font-family:SFMono-Regular,Consolas,monospace;font-size:clamp(34px,12vw,96px);font-weight:800;text-shadow:0 0 22px rgba(255,255,255,.95),0 0 56px rgba(155,255,235,.92),0 0 92px rgba(179,107,255,.62)}@keyframes corePulse{0%{filter:brightness(1);transform:translate(-50%,-50%) scale(.92)}to{filter:brightness(1.28);transform:translate(-50%,-50%) scale(1.08)}}@keyframes bridgePulse{0%{opacity:.55}to{opacity:1}}@keyframes beamPulse{0%{opacity:.72;filter:brightness(1)}to{opacity:1;filter:brightness(1.55)}}@keyframes fingerOrb{0%{transform:translate(-50%,-50%) scale(.78)}to{transform:translate(-50%,-50%) scale(1.22)}}@keyframes swipeLeft{0%{left:100%;opacity:0}18%{opacity:.82}to{left:-35%;opacity:0}}@keyframes swipeRight{0%{left:-35%;opacity:0}18%{opacity:.82}to{left:100%;opacity:0}}@keyframes shockwave{0%{opacity:.85;transform:translate(-50%,-50%) scale(.26)}to{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}@keyframes crackBlink{0%,to{opacity:.25}50%{opacity:.8}}@keyframes signatureSpin{to{transform:rotate(360deg)}}@media(orientation:landscape)and (max-height:540px){.start-panel{right:16px;left:auto;bottom:16px;width:min(440px,44vw);transform:none;padding:16px}.start-panel p{font-size:13px;line-height:1.5}.gesture-panel{width:min(400px,42vw)}.tutorial-panel{top:58px;width:min(320px,34vw)}.number-guide{display:none}}@media(max-width:720px){.status-chip{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));justify-content:center;width:auto;max-width:52vw;font-size:11px}.brand-chip{max-width:46vw;font-size:11px}.metrics-panel{display:none}.tutorial-panel{top:56px;right:12px;width:min(280px,calc(100vw - 24px));padding:10px}.compat-panel~.tutorial-panel{top:112px}.tutorial-panel h2{font-size:18px}.tutorial-panel p,.effect-line,.number-guide{font-size:11px}.gesture-panel{left:12px;bottom:12px;width:calc(100vw - 24px);padding:10px}.number-guide{top:auto;bottom:206px;left:12px;width:calc(100vw - 24px);grid-template-columns:repeat(2,minmax(0,1fr))}.guide-title{grid-column:1 / -1}}@media(max-height:760px)and (orientation:portrait){.tutorial-panel{width:min(245px,calc(100vw - 24px))}.tutorial-panel p:nth-of-type(2),.effect-line,.gesture-grid{display:none}.number-guide{display:none}.gesture-panel{max-height:168px;overflow:hidden}}