:root{
  color-scheme:dark;
  --bg:#071117;
  --bg2:#0b1a20;
  --paper:#eaf6f4;
  --muted:#8ea8a8;
  --line:rgba(189,235,227,.14);
  --mint:#8ff0d2;
  --mint2:#c8ffef;
  --amber:#ffd58a;
  --danger:#ff927f;
  --shadow:0 28px 70px rgba(0,0,0,.34);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{min-height:100svh;background:
  radial-gradient(circle at 82% 8%,rgba(103,231,195,.10),transparent 28%),
  radial-gradient(circle at 15% 94%,rgba(77,145,151,.13),transparent 34%),
  linear-gradient(180deg,#071117 0%,#071319 60%,#050c11 100%)}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit;text-decoration:none}
.app{position:relative;width:min(100%,520px);min-height:100svh;margin:0 auto;overflow:hidden;padding:env(safe-area-inset-top) 20px max(22px,env(safe-area-inset-bottom));isolation:isolate}
.app:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-1}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:20}
.home-link{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:850;letter-spacing:.12em;color:#b7c9c8}
.home-mark{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--mint2)}
.top-status{display:flex;align-items:baseline;gap:5px;border:1px solid var(--line);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.025)}
.top-status span{font-size:12px;letter-spacing:.08em;color:#82999a;font-weight:800}.top-status b{font-size:14px;color:var(--mint2)}
.sound-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.02);cursor:pointer;font-weight:900;color:#b7c9c8}.sound-btn:active{transform:scale(.94)}
.screen{display:none;min-height:calc(100svh - 86px);padding:8px 0 16px;animation:screenIn .4s cubic-bezier(.2,.75,.25,1) both}.screen.active{display:flex;flex-direction:column}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 15px;font-size:12px;font-weight:900;letter-spacing:.2em;color:#78a49d}
.start-screen{justify-content:flex-start;position:relative}
.ambient{position:absolute;inset:0;pointer-events:none;z-index:-1}.ambient i{position:absolute;border:1px solid rgba(143,240,210,.12);border-radius:50%;animation:drift 9s ease-in-out infinite}.ambient i:nth-child(1){width:180px;height:180px;right:-90px;top:16%}.ambient i:nth-child(2){width:90px;height:90px;left:-30px;top:48%;animation-delay:-4s}.ambient i:nth-child(3){width:16px;height:16px;right:20%;top:61%;background:rgba(143,240,210,.08);border:0;animation-delay:-7s}.ambient i:nth-child(4){width:240px;height:42px;left:-100px;bottom:7%;border-radius:50%;transform:rotate(-12deg);animation-delay:-2s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8px,12px,0) scale(1.05)}}
.hero{padding-top:5px}.hero h1{font-size:clamp(64px,20vw,98px);line-height:.82;letter-spacing:-.08em;margin:0;font-weight:950}.hero h1 span{color:var(--mint)}
.lead{font-size:13px;line-height:1.9;color:#91a8a7;margin:22px 0 0}.lead strong{color:#e6f7f4;font-weight:800}
.stage-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:24px 0 14px}.stage-strip>div{position:relative;border:1px solid var(--line);border-radius:14px;min-height:67px;padding:10px 9px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.018);overflow:hidden}.stage-strip span{font-size:12px;letter-spacing:.14em;color:#587177;font-weight:900}.stage-strip b{font-size:12px;line-height:1.2}.stage-strip .active{border-color:rgba(143,240,210,.4);background:linear-gradient(160deg,rgba(143,240,210,.12),rgba(143,240,210,.025));box-shadow:inset 0 0 0 1px rgba(143,240,210,.05)}.stage-strip .active:after{content:"";position:absolute;width:45px;height:45px;border:1px solid rgba(143,240,210,.28);border-radius:50%;right:-18px;top:-17px}.stage-strip em{position:absolute;right:7px;top:6px;font-size:12px;font-style:normal;letter-spacing:.12em;color:var(--mint)}
.rule-card{display:grid;grid-template-columns:64px 1fr;gap:13px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(3,10,13,.28);margin-bottom:13px}.rule-card small{display:block;color:#6e8d8b;font-size:12px;font-weight:850;letter-spacing:.08em;margin-bottom:4px}.rule-card strong{font-size:13px;line-height:1.55;letter-spacing:-.01em}.rule-visual{height:54px;position:relative;border-radius:13px;background:radial-gradient(circle at center,rgba(143,240,210,.08),transparent 60%);overflow:hidden}.signal-dot{position:absolute;width:12px;height:12px;background:var(--mint);border-radius:50%;left:12px;top:21px;box-shadow:0 0 0 7px rgba(143,240,210,.08),0 0 24px rgba(143,240,210,.35)}.noise-line{position:absolute;width:36px;height:1px;background:linear-gradient(90deg,transparent,#5f7a79,transparent);right:-3px;top:27px;animation:noisePass 2.2s linear infinite}@keyframes noisePass{from{transform:translateX(-6px);opacity:0}20%{opacity:1}to{transform:translateX(30px);opacity:0}}
.primary-btn{border:0;width:100%;min-height:62px;border-radius:18px;background:var(--mint);color:#072018;display:flex;align-items:center;justify-content:space-between;padding:0 20px;cursor:pointer;font-weight:900;box-shadow:0 14px 35px rgba(81,224,182,.12);transition:transform .12s ease,filter .12s ease}.primary-btn span{font-size:15px;letter-spacing:-.01em}.primary-btn b{font-size:20px}.primary-btn:active{transform:scale(.985);filter:brightness(.94)}
.microcopy{text-align:center;color:#5f7a79;font-size:12px;line-height:1.6;margin:10px 0 0}
.local-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}.local-stats>div{border-top:1px solid var(--line);padding-top:10px}.local-stats span{display:block;font-size:12px;letter-spacing:.12em;color:#5e7778;font-weight:850}.local-stats b{display:inline-block;font-size:18px;margin-top:4px}.local-stats small{font-size:12px;color:#77908f}
.training-screen{padding-top:2px}.training-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.round-label span{display:block;font-size:17px;font-weight:900;letter-spacing:-.03em}.round-label b{display:block;font-size:12px;letter-spacing:.16em;color:#607e7b;margin-top:3px}.score-live{text-align:right}.score-live span{display:block;font-size:12px;color:#607e7b;letter-spacing:.09em}.score-live b{display:block;font-size:24px;line-height:1;color:var(--mint2);margin-top:2px}
.progress-track{height:2px;background:rgba(255,255,255,.06);margin:13px 0 14px;border-radius:99px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:var(--mint);box-shadow:0 0 12px rgba(143,240,210,.65);transition:width .22s ease}
.attention-field{position:relative;height:min(55svh,430px);min-height:330px;border:1px solid rgba(142,189,182,.11);border-radius:30px;overflow:hidden;background:radial-gradient(circle at center,rgba(35,82,79,.18),transparent 48%),linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));display:grid;place-items:center;isolation:isolate}
.field-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(143,240,210,.13) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at center,black,transparent 72%);opacity:.32}.field-orbit{position:absolute;border:1px solid rgba(143,240,210,.10);border-radius:50%;pointer-events:none}.orbit-a{width:280px;height:280px;animation:orbit 10s linear infinite}.orbit-b{width:400px;height:150px;transform:rotate(-18deg);animation:orbit2 13s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes orbit2{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
.event-card{position:relative;width:calc(100% - 46px);min-height:210px;border:1px solid rgba(190,236,228,.16);border-radius:25px;padding:18px;background:linear-gradient(155deg,rgba(17,43,46,.92),rgba(8,25,30,.96));box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;transform-origin:center;will-change:transform,opacity;z-index:4}.event-card.enter{animation:cardEnter .34s cubic-bezier(.18,.82,.2,1) both}.event-card.pass{animation:cardPass .42s cubic-bezier(.4,0,.7,.2) both}.event-card.pick{animation:cardPick .34s cubic-bezier(.16,.85,.35,1) both}.event-card.wrong{animation:cardWrong .38s ease both}@keyframes cardEnter{from{opacity:0;transform:translate3d(28px,9px,0) rotate(2deg) scale(.96)}to{opacity:1;transform:none}}@keyframes cardPass{to{opacity:0;transform:translate3d(-70px,-6px,0) rotate(-4deg) scale(.88);filter:blur(2px)}}@keyframes cardPick{35%{transform:scale(1.035);border-color:rgba(143,240,210,.55)}to{opacity:0;transform:translate3d(0,-50px,0) scale(.86)}}@keyframes cardWrong{25%{transform:translateX(-6px)}55%{transform:translateX(6px)}to{opacity:0;transform:translateX(0) scale(.93)}}
.event-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.event-tag{font-size:12px;font-weight:900;letter-spacing:.13em;color:#7e9c99;text-transform:uppercase}.timer-number{font-variant-numeric:tabular-nums;font-size:12px;color:#7f9d9b;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px 8px;min-width:42px;text-align:center}.event-card p{font-size:clamp(23px,6.6vw,32px);line-height:1.32;letter-spacing:-.045em;font-weight:850;margin:20px 0 18px;text-wrap:balance}.card-horizon{height:25px;position:relative;overflow:hidden}.card-horizon i{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(143,240,210,.22),transparent);width:65%;right:-12%;top:12px}.card-horizon i:nth-child(2){width:38%;top:4px;right:20%;opacity:.5}.card-horizon i:nth-child(3){width:24%;top:20px;right:42%;opacity:.28}
.feedback{position:absolute;z-index:8;inset:auto 22px 22px 22px;min-height:72px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(6,18,22,.94);backdrop-filter:blur(18px);padding:13px 15px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.feedback.show{opacity:1;transform:none}.feedback b{font-size:16px;letter-spacing:-.02em}.feedback span{font-size:12px;line-height:1.5;color:#8ea8a6;margin-top:3px}.feedback.good b{color:var(--mint2)}.feedback.bad b{color:var(--danger)}
.pick-btn{margin-top:12px;width:100%;min-height:67px;border:1px solid rgba(143,240,210,.22);border-radius:20px;background:linear-gradient(180deg,rgba(143,240,210,.09),rgba(143,240,210,.035));display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:transform .1s ease,background .1s ease}.pick-btn:active{transform:scale(.985);background:rgba(143,240,210,.13)}.pick-btn:disabled{opacity:.45;pointer-events:none}.pick-icon{width:33px;height:33px;border:1px solid rgba(143,240,210,.38);border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--mint)}.pick-btn small{display:block;text-align:left;color:#6f908d;font-size:12px;letter-spacing:.08em}.pick-btn strong{display:block;text-align:left;font-size:17px;line-height:1.05;margin-top:2px}.training-hint{text-align:center;color:#5e7778;font-size:12px;margin:8px 0 0;min-height:15px}
.result-screen{padding-top:8px;position:relative}.result-halo{position:absolute;right:-70px;top:20px;width:230px;height:230px;pointer-events:none}.result-halo i{position:absolute;inset:0;border:1px solid rgba(143,240,210,.09);border-radius:50%;animation:halo 8s linear infinite}.result-halo i:nth-child(2){inset:35px;animation-direction:reverse;animation-duration:6s}.result-halo i:nth-child(3){inset:82px;background:rgba(143,240,210,.04);border-color:rgba(143,240,210,.2)}@keyframes halo{to{transform:rotate(360deg)}}
.result-title{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line);padding:2px 0 14px;margin-bottom:18px;position:relative;z-index:2}.result-title>span{font-size:12px;color:#8aa3a1;font-weight:800;padding-bottom:6px}.result-title strong{display:flex;align-items:flex-end;line-height:.8}.result-title strong b{font-size:76px;letter-spacing:-.08em}.result-title strong small{font-size:16px;color:#6f8a87;margin-left:5px;padding-bottom:5px}
.result-bars{display:grid;gap:13px}.bar-copy{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#8aa3a1}.bar-copy b{color:#d6eeea}.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden;margin-top:7px}.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4c887c,var(--mint));border-radius:99px;transition:width .8s cubic-bezier(.18,.82,.2,1)}
.level-card{position:relative;margin-top:17px;border:1px solid rgba(143,240,210,.18);border-radius:22px;padding:16px 17px;overflow:hidden;background:linear-gradient(140deg,rgba(143,240,210,.08),rgba(255,255,255,.014))}.level-card small{font-size:12px;color:#6e8b88;letter-spacing:.13em;font-weight:900}.level-card strong{display:block;font-size:26px;line-height:1;margin-top:5px}.level-card p{font-size:12px;line-height:1.65;color:#8fa6a4;margin:9px 0 0;max-width:82%}.level-orbit{position:absolute;width:100px;height:35px;border:1px solid rgba(143,240,210,.22);border-radius:50%;right:-17px;top:27px;transform:rotate(-18deg)}
.real-world{margin:14px 0;border-left:2px solid rgba(143,240,210,.6);padding:10px 0 10px 14px}.real-world small{font-size:12px;letter-spacing:.15em;color:#619087;font-weight:900}.real-world strong{display:block;font-size:14px;line-height:1.45;margin-top:5px}.real-world p{font-size:12px;line-height:1.65;color:#718c8a;margin:5px 0 0}
.result-actions{display:grid;gap:9px;margin-top:auto}.secondary-link{height:44px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;font-size:12px;color:#8da4a2;font-weight:850}.privacy-note{text-align:center;font-size:12px;line-height:1.55;color:#526a6b;margin:9px 0 0}
.screen-flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:100;background:rgba(143,240,210,.12)}.screen-flash.on{animation:flash .28s ease}@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@media(max-height:720px){.topbar{height:54px}.screen{min-height:calc(100svh - 70px)}.hero h1{font-size:64px}.lead{margin-top:14px}.stage-strip{margin-top:17px}.attention-field{min-height:300px;height:49svh}.result-title strong b{font-size:60px}.level-card{padding:13px 15px}.real-world{margin:10px 0}}
@media(min-width:700px){body{padding:20px 0}.app{min-height:calc(100svh - 40px);border:1px solid rgba(255,255,255,.07);border-radius:34px;box-shadow:0 40px 100px rgba(0,0,0,.3)}.screen{min-height:calc(100svh - 130px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}