:root{
  color-scheme:dark;
  --bg:#07110f;
  --panel:#0d1c18;
  --panel2:#122720;
  --ink:#f1fff8;
  --muted:#9db8ad;
  --line:rgba(204,255,231,.13);
  --mint:#72ffc2;
  --mint2:#21d98b;
  --amber:#ffca66;
  --red:#ff7c83;
  --shadow:0 24px 80px rgba(0,0,0,.32);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#18372b 0,#07110f 42%,#040907 100%);color:var(--ink);font-family:Inter,"Hiragino Sans","Yu Gothic",system-ui,sans-serif}
body{min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
.app{width:min(100%,500px);min-height:100dvh;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.app:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(114,255,194,.025) 49% 51%,transparent 52% 100%);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.topbar{height:42px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20;flex:none}
.home-link,.stats-btn{height:36px;border:1px solid var(--line);border-radius:12px;background:rgba(13,28,24,.72);backdrop-filter:blur(12px);display:flex;align-items:center;gap:7px;padding:0 11px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.04em}
.stats-btn{cursor:pointer}
.brand-mini{font-size:12px;letter-spacing:.22em;font-weight:1000;color:var(--muted)}
.screen{display:none;flex:1;min-height:0;padding:22px 0 0;animation:screenIn .26s ease both}
.screen.active{display:flex;flex-direction:column}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 10px;color:var(--mint);font-size:12px;letter-spacing:.22em;font-weight:1000}
h1,h2,p{margin-top:0}
h1{font-size:clamp(50px,15vw,78px);line-height:.9;letter-spacing:-.07em;margin:0 0 18px;font-weight:1000}h1 span{color:var(--mint);font-size:.78em;letter-spacing:-.04em}
h2{font-size:clamp(34px,10vw,48px);line-height:1.04;letter-spacing:-.055em;margin:0 0 12px;font-weight:1000}h2 strong{color:var(--mint)}
.lead{font-size:18px;line-height:1.6;color:#cbe1d7;margin-bottom:24px}.lead strong{color:#fff}
.microcopy,.privacy-note{color:var(--muted);font-size:12px;line-height:1.65;text-align:center;margin:12px 12px 0}
.screen-copy p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px}.screen-copy.centered{text-align:center}.screen-copy.compact h2{font-size:32px}
.hero-visual{height:188px;position:relative;display:grid;place-items:center;margin:2px 0 10px}
.wheel{position:absolute;border-radius:50%;display:grid;place-items:center}.wheel-outer{width:164px;height:164px;border:1px solid rgba(114,255,194,.22);box-shadow:0 0 80px rgba(114,255,194,.1);animation:spin 22s linear infinite}.wheel-outer:before,.wheel-outer:after{content:"";position:absolute;inset:22px;border:1px dashed rgba(114,255,194,.22);border-radius:50%}.wheel-outer:after{inset:47px;border-style:solid}.wheel-outer i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}.wheel-outer i:nth-child(1){top:-4px}.wheel-outer i:nth-child(2){right:-4px}.wheel-outer i:nth-child(3){bottom:-4px}.wheel-outer i:nth-child(4){left:-4px}
.wheel-inner{width:76px;height:76px;background:radial-gradient(circle,#163a2e,#0a1713 70%);border:1px solid rgba(114,255,194,.38);box-shadow:inset 0 0 30px rgba(114,255,194,.1),0 0 45px rgba(114,255,194,.12)}.wheel-inner span{font-size:18px;font-weight:1000;letter-spacing:.12em;color:var(--mint)}
.approval-orbit b{position:absolute;padding:7px 10px;border-radius:999px;background:#131d1a;border:1px solid var(--line);font-size:12px;color:#869c93;font-weight:900}.approval-orbit b:nth-child(1){left:24px;top:38px;transform:rotate(-9deg)}.approval-orbit b:nth-child(2){right:18px;top:70px;transform:rotate(7deg)}.approval-orbit b:nth-child(3){left:56px;bottom:6px;transform:rotate(4deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.primary-btn,.secondary-btn,.text-btn{width:100%;border:0;cursor:pointer}.primary-btn{min-height:58px;border-radius:18px;background:linear-gradient(135deg,var(--mint),#57efa9);color:#04110b;font-weight:1000;font-size:16px;display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 14px 36px rgba(33,217,139,.16);transition:.15s}.primary-btn b{font-size:20px}.primary-btn:active{transform:scale(.985)}.primary-btn:disabled{opacity:.34;filter:saturate(.4);box-shadow:none;cursor:default}.secondary-btn{margin-top:10px;min-height:52px;border-radius:17px;border:1px solid var(--line);background:rgba(14,30,25,.88);font-weight:900;font-size:14px}.text-btn{min-height:42px;background:transparent;color:var(--muted);font-size:12px;font-weight:900;margin-top:8px}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:3px 0 18px}.who-grid button{height:50px;border:1px solid var(--line);border-radius:15px;background:var(--panel);font-weight:900;cursor:pointer;transition:.15s}.who-grid button.selected{background:rgba(114,255,194,.12);border-color:rgba(114,255,194,.62);color:var(--mint);transform:translateY(-2px)}
.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:900;margin-bottom:8px}.field-label span{font-size:12px;color:var(--muted);font-weight:700}.text-input{width:100%;height:54px;border-radius:16px;border:1px solid var(--line);background:#091612;color:#fff;padding:0 15px;outline:0;margin-bottom:14px}.text-input:focus{border-color:rgba(114,255,194,.62);box-shadow:0 0 0 3px rgba(114,255,194,.07)}
.axis-stage{height:360px;position:relative;border-radius:28px;border:1px solid var(--line);background:radial-gradient(circle at 50% 55%,rgba(114,255,194,.08),transparent 42%),linear-gradient(90deg,rgba(114,255,194,.04),transparent 48%,rgba(255,124,131,.035));overflow:hidden;display:grid;place-items:center;touch-action:none;box-shadow:var(--shadow)}.axis-stage:after{content:"";position:absolute;top:52px;bottom:42px;left:50%;border-left:1px dashed rgba(255,255,255,.12)}.axis-label,.train-axis{position:absolute;top:18px;font-size:12px;font-weight:1000;letter-spacing:.05em;color:var(--muted)}.axis-label.self,.train-axis.self{left:14px;color:#8fe8bd}.axis-label.other,.train-axis.other{right:14px;color:#e7a2a4}
.approval-card,.train-card{width:78%;min-height:168px;border-radius:23px;padding:21px;background:linear-gradient(155deg,#1a2824,#0e1714);border:1px solid rgba(255,255,255,.11);box-shadow:0 25px 55px rgba(0,0,0,.34);display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;z-index:3;user-select:none;touch-action:none;cursor:grab;transition:box-shadow .15s}.approval-card.dragging,.train-card.dragging{box-shadow:0 34px 74px rgba(0,0,0,.5);cursor:grabbing}.approval-card small,.train-card small{font-size:12px;color:var(--muted);font-weight:900;margin-bottom:10px}.approval-card strong,.train-card strong{font-size:24px;line-height:1.35;letter-spacing:-.03em}.approval-card span{font-size:12px;color:var(--muted);margin-top:12px}.swipe-hint{position:absolute;bottom:18px;color:#e0a0a1;font-size:12px;font-weight:900;animation:pulse 1.5s ease-in-out infinite}.axis-stage.done .swipe-hint{opacity:0}
@keyframes pulse{50%{opacity:.45;transform:translateX(4px)}}
.standard-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}.standard-grid button{min-height:84px;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:13px;text-align:left;cursor:pointer}.standard-grid button b{display:block;font-size:14px;margin-bottom:7px}.standard-grid button span{display:block;font-size:12px;color:var(--muted)}.standard-grid button.selected{border-color:rgba(114,255,194,.65);background:rgba(114,255,194,.1);box-shadow:inset 0 0 0 1px rgba(114,255,194,.16)}.standard-grid button.selected b{color:var(--mint)}
.lock-screen{text-align:center;justify-content:center}.lock-visual{height:220px;position:relative;display:grid;place-items:center;margin-top:-12px}.lock-ring{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--mint);box-shadow:0 0 65px rgba(114,255,194,.18),inset 0 0 42px rgba(114,255,194,.08);animation:lockIn .65s cubic-bezier(.2,.8,.2,1) both}.lock-ring:before{content:"";position:absolute;width:96px;height:96px;border-radius:50%;border:1px dashed rgba(114,255,194,.42);animation:spin 13s linear infinite}.lock-ring span{font-size:15px;letter-spacing:.18em;font-weight:1000;color:var(--mint)}.released-tags i{position:absolute;font-style:normal;font-size:12px;color:#6f827a;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#0b1512;animation:release .8s ease both}.released-tags i:nth-child(1){left:28px;top:34px;--x:-40px;--y:-25px}.released-tags i:nth-child(2){right:25px;top:72px;--x:38px;--y:-10px}.released-tags i:nth-child(3){left:60px;bottom:15px;--x:-20px;--y:28px}@keyframes release{from{opacity:1;transform:translate(0,0)}to{opacity:.45;transform:translate(var(--x),var(--y)) scale(.9)}}@keyframes lockIn{from{opacity:0;transform:scale(.6) rotate(-18deg)}to{opacity:1;transform:none}}
.locked-standard{margin:10px 0 16px;padding:15px;border-radius:18px;border:1px solid rgba(114,255,194,.25);background:rgba(114,255,194,.065)}.locked-standard span{display:block;color:var(--muted);font-size:12px;font-weight:900;margin-bottom:6px}.locked-standard b{font-size:18px;color:var(--mint)}.lock-copy{color:#bfd4cb;font-size:13px;line-height:1.7;margin-bottom:20px}
.training-screen{padding-top:12px}.training-head>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:1000;color:var(--muted)}.timer{height:4px;border-radius:10px;background:#14201c;margin:10px 0 20px;overflow:hidden}.timer i{display:block;height:100%;width:100%;background:var(--mint);transform-origin:left center}.training-stage{position:relative;height:345px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(90deg,rgba(114,255,194,.045),transparent 48%,rgba(255,124,131,.04));display:grid;place-items:center;overflow:hidden;touch-action:none}.training-stage:after{content:"";position:absolute;top:45px;bottom:26px;left:50%;border-left:1px dashed rgba(255,255,255,.1)}.train-card{min-height:176px}.feedback{position:absolute;bottom:20px;left:18px;right:18px;min-height:28px;text-align:center;font-size:12px;font-weight:900;z-index:5}.feedback.correct{color:var(--mint)}.feedback.wrong{color:var(--red)}.training-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.answer{height:54px;border-radius:16px;font-weight:1000;border:1px solid var(--line);background:var(--panel);cursor:pointer}.self-answer{color:#92e9c0}.other-answer{color:#f1a5a8}
.result-screen{text-align:center}.result-screen h2{font-size:36px}.score-ring{width:150px;height:150px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:conic-gradient(var(--mint) var(--score,0%),#16231e 0);position:relative;box-shadow:0 0 55px rgba(114,255,194,.11)}.score-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#07110f}.score-ring span{position:relative;z-index:2}.score-ring b{font-size:48px;line-height:1}.score-ring small{font-size:12px;color:var(--muted);font-weight:900}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:13px}.result-stats div{padding:13px 6px;border-radius:15px;background:var(--panel);border:1px solid var(--line)}.result-stats b{display:block;font-size:16px}.result-stats span{display:block;font-size:12px;color:var(--muted);font-weight:900;margin-top:4px}.reflex-card{padding:16px;border-radius:18px;border:1px solid rgba(114,255,194,.24);background:rgba(114,255,194,.06);margin-bottom:12px}.reflex-card span{display:block;font-size:12px;color:var(--muted);font-weight:900;margin-bottom:6px}.reflex-card strong{font-size:15px;color:var(--mint)}.result-actions{margin-top:auto}
.stats-screen{justify-content:center}.stats-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0 22px}.stats-panel div{min-height:104px;border-radius:18px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center}.stats-panel span{font-size:12px;color:var(--muted);font-weight:1000}.stats-panel b{font-size:25px;margin:7px 0 3px}.stats-panel small{font-size:12px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translate(-50%,10px);background:#f1fff8;color:#06100c;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:1000;opacity:0;pointer-events:none;transition:.2s;z-index:80;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:730px){.screen{padding-top:12px}.hero-visual{height:150px}.wheel-outer{width:132px;height:132px}.wheel-inner{width:64px;height:64px}h1{font-size:52px}.lead{font-size:15px;margin-bottom:15px}.axis-stage{height:310px}.approval-card{min-height:145px}.training-stage{height:290px}.train-card{min-height:145px}.standard-grid button{min-height:70px}.lock-visual{height:160px}.lock-ring{width:110px;height:110px}.lock-ring:before{width:75px;height:75px}.score-ring{width:122px;height:122px}.score-ring b{font-size:40px}}
@media(max-width:360px){.app{padding-left:14px;padding-right:14px}.who-grid{gap:6px}.standard-grid{gap:7px}.approval-card,.train-card{width:83%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}