*{box-sizing:border-box;margin:0;padding:0}html,body,#root,.spell-stage{width:100%;min-width:100%;height:100%;min-height:100%;overflow:hidden}body{background:radial-gradient(ellipse at center,#0a1628,#000);color:#fff;font-family:PingFang SC,Microsoft YaHei,sans-serif}.spell-stage{position:relative}.spell-stage canvas{display:block;width:100%!important;height:100%!important}.webcam{position:fixed;top:10px;right:10px;z-index:10;width:120px;height:90px;opacity:0;transform:scaleX(-1);border:2px solid rgba(255,100,100,.5);border-radius:8px;pointer-events:none}.webcam-ready{border-color:#00ff8880}.status-indicator{position:fixed;top:10px;left:10px;z-index:10;padding:8px 16px;border-radius:20px;background:#00000080;font-size:12px;transition:color .3s}.spell-copy{position:fixed;bottom:30px;left:50%;z-index:10;width:min(92vw,32rem);transform:translate(-50%);text-align:center;text-shadow:0 0 10px #00ff88}.spell-copy h1{margin-bottom:8px;font-size:clamp(1.5rem,4vw,1.75rem);transition:color .3s}.spell-copy p{font-size:clamp(.78rem,2.5vw,.9rem);opacity:.72}.hand-preview{position:fixed;bottom:1.5rem;left:1.5rem;z-index:12;width:min(20.625rem,calc(100vw - 3rem));overflow:hidden;border:1px solid rgba(132,255,208,.32);border-radius:.9rem;background:#010d10b8;box-shadow:0 20px 48px #00000052,inset 0 0 36px #26b6880d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none}.hand-preview-head,.hand-preview-foot{display:flex;align-items:center;justify-content:space-between;padding:.58rem .72rem;font-size:.68rem;letter-spacing:.14em}.hand-preview-head{color:#ddffeff2;border-bottom:1px solid rgba(151,255,216,.12)}.hand-preview-head i{color:#8effc3;font-size:.56rem;font-style:normal;letter-spacing:.12em}.hand-preview-frame{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:#061114}.hand-preview-frame canvas{display:block;width:100%;height:100%}.hand-preview-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(117,255,195,.11) 50%,transparent 100%),repeating-linear-gradient(180deg,rgba(222,255,244,.045) 0 1px,transparent 1px 5px);background-size:100% 42%,100% 100%;background-repeat:no-repeat,repeat;animation:handScan 3.8s linear infinite;mix-blend-mode:screen}.hand-preview-corner{position:absolute;width:1.3rem;height:1.3rem;border-color:#b5ffdcb8}.hand-preview-corner-a{top:.58rem;left:.58rem;border-top:1px solid;border-left:1px solid}.hand-preview-corner-b{right:.58rem;bottom:.58rem;border-right:1px solid;border-bottom:1px solid}.hand-preview-foot{color:#b1d5c9db;border-top:1px solid rgba(151,255,216,.12);letter-spacing:.04em}.hand-preview-foot strong{color:#f4e29a;font-weight:500}@keyframes handScan{0%{background-position:0 -45%,0 0}to{background-position:0 145%,0 0}}@media(max-width:640px){.hand-preview{bottom:1rem;left:1rem;width:min(16rem,calc(100vw - 2rem))}.spell-copy{bottom:1.2rem;left:auto;right:1rem;width:min(45vw,13rem);transform:none;text-align:right}}