:root{--cyan:#5eeaff;--blue:#147cff;--ink:#030b18;--panel:rgba(9,31,55,.72)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#ecfbff;background:#020817}body{overflow-x:hidden}#app{width:min(100%,1100px);min-height:100vh;margin:auto;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 28%,#12396a 0,#061329 35%,#020817 72%)}#app:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(94,234,255,.08) 50%,transparent 50.2%),linear-gradient(rgba(94,234,255,.03) 1px,transparent 1px);background-size:100% 100%,100% 6px;pointer-events:none}.noise{position:absolute;inset:0;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");pointer-events:none}.scan{position:absolute;z-index:4;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px var(--cyan);animation:scan 6s linear infinite;opacity:.5;pointer-events:none}@keyframes scan{from{top:0}to{top:100%}}header{height:70px;padding:25px 5vw;display:flex;justify-content:space-between;color:#8bb9d8;letter-spacing:3px;font-size:12px;position:relative;z-index:3}header b{color:var(--cyan)}.screen{display:none;min-height:calc(100vh - 70px);padding:6vh 7vw 8vh;position:relative;z-index:2;text-align:center;align-items:center;justify-content:center;flex-direction:column;animation:enter .55s ease}.screen.active{display:flex}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}h1{font-size:clamp(46px,9vw,90px);margin:12px 0;letter-spacing:.22em;text-indent:.22em;text-shadow:0 0 22px #198fff}h2{font-size:clamp(28px,5vw,52px);letter-spacing:.12em;margin:12px 0 30px}.eyebrow{font-size:12px;letter-spacing:.45em;color:#7edfff}.sub{color:#91abc0;line-height:1.8;letter-spacing:.12em}.primary,button,a.primary{border:1px solid var(--cyan);color:#eaffff;background:linear-gradient(90deg,rgba(15,94,155,.65),rgba(7,38,74,.8));padding:15px 34px;border-radius:3px;letter-spacing:.2em;font-size:16px;box-shadow:0 0 24px rgba(50,190,255,.22),inset 0 0 14px rgba(48,173,255,.16);cursor:pointer;text-decoration:none;margin-top:28px}.portal{width:min(52vw,360px);aspect-ratio:1;position:relative;display:grid;place-items:center}.portal.small{width:230px}.orb{width:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 55% 42%,#eaffff 0,#5de9ff 8%,#337bf8 27%,#192562 54%,transparent 70%);box-shadow:0 0 35px #51dcff,0 0 100px #1b46e0}.orbit{position:absolute;border:2px solid rgba(105,222,255,.7);border-radius:50%;inset:13%;box-shadow:0 0 15px #36bfff;animation:spin 9s linear infinite}.o2{inset:5%;border-style:dashed;animation-direction:reverse;animation-duration:15s}@keyframes spin{to{transform:rotate(360deg)}}input:not([type=range]){width:min(680px,90%);padding:18px;border:1px solid #4ab7ef;background:rgba(2,17,37,.75);color:white;font-size:28px;text-align:center;outline:none;box-shadow:inset 0 0 18px #082d55}.keys{margin:30px 0;color:#60839e;line-height:2.3;word-spacing:18px;letter-spacing:7px}.choice{display:flex;gap:28px}.choice button{width:150px;height:150px;font-size:58px;background:var(--panel);color:#8eb8d8;border:1px solid #315c7c}.choice button small{display:block;font-size:14px}.choice button.selected,.career.selected{border-color:var(--cyan);color:white;box-shadow:0 0 25px #1686cb}.age{width:min(500px,90%);margin:35px}.age output{font-size:30px;color:var(--cyan);margin-left:20px}.age input{width:100%;accent-color:var(--cyan)}.dna{width:min(550px,90%);padding:55px 20px;border:1px solid #2878aa;background:var(--panel);font-size:16px;color:#8da9bf;box-shadow:0 0 50px rgba(27,128,211,.2)}.dna b{display:block;color:white;font-size:30px;margin-top:14px}.career-grid{display:grid;grid-template-columns:repeat(3,minmax(135px,1fr));gap:15px;width:min(760px,100%)}.career{min-height:126px;padding:22px 8px;margin:0;background:var(--panel);border:1px solid #244f70;color:#afc7d9}.career b{display:block;font-size:28px;color:#67e5ff;margin-bottom:12px}.idcard{width:min(650px,100%);padding:45px;text-align:left;border:1px solid #5dcde6;background:linear-gradient(135deg,rgba(9,36,56,.94),rgba(5,13,28,.95));clip-path:polygon(0 0,92% 0,100% 14%,100% 100%,8% 100%,0 86%);position:relative}.idcard span{color:#5ceaff;letter-spacing:6px}.idcard h2{margin:40px 0 12px}.seal{position:absolute;right:7%;top:18%;width:100px;height:100px;border:2px solid #51d3e6;border-radius:50%;display:grid;place-items:center;text-align:center;color:#58dbea;font-size:12px;transform:rotate(-12deg)}.camera{width:min(480px,82vw);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;border:2px solid #54dbff;box-shadow:0 0 34px #147bd2;background:#031124}.camera video,.camera img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.reticle{position:absolute;inset:8%;border:1px dashed rgba(111,234,255,.75);border-radius:50%}.reticle:before,.reticle:after{content:"";position:absolute;background:#5deaff}.reticle:before{left:50%;top:-10%;bottom:-10%;width:1px}.reticle:after{top:50%;left:-10%;right:-10%;height:1px}.actions{display:flex;gap:20px}.actions button,#restart{background:transparent;border:1px solid #42647c;color:#abc6d8;padding:14px 25px;margin-top:28px}.progress{width:min(500px,80%);height:5px;background:#13293c;margin:25px}.progress i{display:block;height:100%;width:15%;background:var(--cyan);box-shadow:0 0 20px #5eeaff;animation:load 3.2s ease forwards}@keyframes load{to{width:100%}}.result{display:flex;gap:40px;align-items:center;justify-content:center}.result>img{max-height:58vh;max-width:45%;box-shadow:0 0 28px #1469a6}.result>div{max-width:280px}.result #qr{width:220px;max-width:100%;background:white;padding:8px}.result p{color:#a8c2d3;line-height:1.8}.result .primary{display:block;margin-top:18px}@media(max-width:650px){.career-grid{grid-template-columns:repeat(2,1fr)}.result{gap:18px}.result>img{max-width:52%}.result #qr{width:150px}.screen{padding-left:5vw;padding-right:5vw}.idcard{padding:30px}.seal{width:74px;height:74px}.keys{font-size:11px;word-spacing:8px;letter-spacing:3px}}