:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;color:#f7f8f4;background:#0a0d0b;--bg:#0a0d0b;--panel:#111713;--panel2:#151d17;--ink:#f7f8f4;--muted:#9aa598;--line:rgba(255,255,255,.105);--lime:#d8ff5b;--q1:#ff795f;--q2:#d8ff5b;--q3:#7fb7ff;--q4:#7f8782}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 85% -5%,rgba(216,255,91,.12),transparent 30%),linear-gradient(180deg,#0a0d0b 0%,#090b09 100%);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input{font:inherit}button{color:inherit}.app{width:min(680px,100%);min-height:100dvh;margin:auto;padding:calc(14px + env(safe-area-inset-top)) 14px calc(38px + env(safe-area-inset-bottom));position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{border:0;background:transparent;padding:8px 4px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:950;letter-spacing:.17em}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px rgba(216,255,91,.48)}.ghost-btn,.back-btn,.text-btn{border:0;background:transparent;color:#aeb8ab;padding:9px 4px;font-weight:800;font-size:12px}.ghost-btn{border:1px solid var(--line);border-radius:999px;padding:8px 12px}.screen{display:none}.screen.active{display:block;animation:screenIn .24s ease}.hero{padding:10px 2px 18px}.eyebrow,.tiny{font-size:12px;font-weight:950;letter-spacing:.18em;color:var(--lime)}.hero h1{margin:12px 0 13px;font-size:clamp(52px,15vw,82px);line-height:.84;letter-spacing:-.075em}.hero h1 em{font-style:normal;color:var(--lime)}.lead{margin:0;color:#c1c9be;font-size:15px;line-height:1.7;font-weight:700}.today-card{margin-top:10px;border:1px solid rgba(216,255,91,.22);border-radius:22px;padding:17px;background:linear-gradient(145deg,rgba(216,255,91,.08),rgba(255,255,255,.025));box-shadow:0 18px 45px rgba(0,0,0,.18)}.today-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.today-top>span:last-child{font-size:12px;color:#aab3a7}.today-card>strong{display:block;font-size:19px;line-height:1.35;letter-spacing:-.025em}.today-card>p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.today-actions{display:flex;gap:8px;margin-top:14px}.mini-primary,.mini-ghost{border:0;border-radius:13px;padding:11px 13px;font-size:12px;font-weight:900}.mini-primary{background:var(--lime);color:#0b0e0b}.mini-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line)}.hidden{display:none!important}.start-card{width:100%;margin-top:12px;text-align:left;border:1px solid var(--line);border-radius:24px;padding:20px 58px 20px 18px;background:linear-gradient(145deg,#171d18,#0e120f);position:relative;box-shadow:0 22px 60px rgba(0,0,0,.2)}.start-kicker{display:block;color:var(--lime);font-size:12px;font-weight:950;letter-spacing:.13em}.start-title{display:block;font-size:25px;font-weight:950;letter-spacing:-.045em;margin-top:8px}.start-copy{display:block;font-size:12px;line-height:1.55;color:#aeb7ac;margin-top:7px}.start-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#0a0d0b;font-weight:950}.matrix-preview,.drop-matrix{display:grid;grid-template-columns:1fr 1fr;gap:7px;position:relative}.matrix-preview{margin-top:18px;padding:18px 0 20px 15px}.matrix-cell,.drop{border-radius:16px;min-height:88px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left}.matrix-cell{border:1px solid var(--line);background:rgba(255,255,255,.025)}.matrix-cell span,.drop span{font-size:12px;font-weight:950;letter-spacing:.12em}.matrix-cell strong,.drop strong{font-size:13px;margin:4px 0}.matrix-cell small,.drop small{font-size:12px;color:#8d978c}.q1 span{color:var(--q1)}.q2 span{color:var(--q2)}.q3 span{color:var(--q3)}.q4 span{color:#a0a6a2}.axis{position:absolute;font-size:12px;color:#737d74;letter-spacing:.08em}.axis-y{left:0;top:45%;transform:rotate(-90deg) translateX(-50%);transform-origin:left top}.axis-x{bottom:3px;right:3px}.definition{margin:3px 4px 0;color:#778179;font-size:12px;line-height:1.55}.training-head{display:flex;justify-content:space-between;align-items:center}.training-head>div:first-child{display:flex;flex-direction:column;gap:3px}.training-head strong{font-size:17px}.score-chip{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#aeb7ac;font-size:12px}.score-chip strong{color:var(--lime);font-size:14px}.progress{height:3px;background:rgba(255,255,255,.06);border-radius:999px;margin:12px 0 18px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--lime);transition:width .25s ease}.task-card{min-height:224px;border:1px solid rgba(255,255,255,.13);border-radius:27px;padding:20px;background:linear-gradient(155deg,#1b231d,#101411);box-shadow:0 24px 64px rgba(0,0,0,.28);display:flex;flex-direction:column;justify-content:center;touch-action:none;user-select:none;transition:transform .18s ease,opacity .18s ease,border-color .18s ease}.task-card.dragging{transform:scale(.98);border-color:rgba(216,255,91,.44);opacity:.93}.scene-tag{align-self:flex-start;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:12px;color:#aeb8ac}.task-card p{font-size:clamp(21px,6vw,29px);line-height:1.38;font-weight:900;letter-spacing:-.035em;margin:18px 0}.task-card>small{margin-top:12px;color:#758078;font-size:12px}.signal-row{display:flex;gap:6px;flex-wrap:wrap}.signal-row span{font-size:12px;font-weight:850;color:#828d84;background:rgba(255,255,255,.04);border-radius:8px;padding:6px 8px}.drop-matrix{margin-top:10px}.drop{border:1px solid var(--line);background:rgba(255,255,255,.025);min-height:96px;transition:transform .15s ease,border-color .15s ease,background .15s ease}.drop:active,.drop.hover{transform:scale(.98);border-color:rgba(216,255,91,.42);background:rgba(216,255,91,.06)}.feedback{display:none;position:fixed;z-index:20;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(640px,calc(100% - 28px));border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:14px 16px;background:rgba(17,23,19,.96);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.45);align-items:flex-start;gap:12px}.feedback.show{display:flex;animation:feedbackIn .18s ease}.feedback-mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#0a0d0b;font-weight:950;flex:0 0 auto}.feedback.bad .feedback-mark{background:var(--q1);color:#160704}.feedback strong{font-size:13px}.feedback p{margin:3px 0 0;color:#aab4a9;font-size:12px;line-height:1.55}.screen h2{font-size:38px;line-height:1;letter-spacing:-.055em;margin:11px 0 10px}.sub{color:#9aa598;font-size:13px;line-height:1.65;margin:0 0 16px}.reserve-grid{display:grid;gap:8px}.reserve-option{border:1px solid var(--line);background:linear-gradient(145deg,#151b17,#0e120f);border-radius:18px;padding:15px;text-align:left;display:grid;grid-template-columns:45px 1fr auto;gap:11px;align-items:center}.reserve-option .reserve-icon{width:45px;height:45px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--lime);font-weight:950}.reserve-option strong{display:block;font-size:15px}.reserve-option small{display:block;color:#849087;margin-top:4px;font-size:12px;line-height:1.45}.reserve-option .chev{color:#768177}.when-panel{margin-top:12px;border:1px solid rgba(216,255,91,.2);border-radius:20px;padding:16px;background:rgba(216,255,91,.045)}.when-panel>strong{display:block;font-size:18px;margin:8px 0 12px}.when-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.when-grid button{border:1px solid var(--line);background:#151b16;border-radius:13px;padding:12px;font-weight:900}.result-screen{text-align:center;padding-top:20px}.result-screen h2{font-size:44px;margin-top:14px}.result-copy{color:#aab4a9;font-size:13px;line-height:1.7}.result-grid,.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.result-grid>div,.record-grid>div{border:1px solid var(--line);border-radius:17px;padding:15px 8px;background:rgba(255,255,255,.025)}.result-grid span,.record-grid span{display:block;color:#849087;font-size:12px}.result-grid strong,.record-grid strong{display:block;font-size:22px;margin-top:6px}.record-grid{grid-template-columns:1fr 1fr}.record-grid small{color:#7f8981;font-size:12px}.lesson-card,.rank-card{border:1px solid rgba(216,255,91,.2);border-radius:20px;padding:16px;background:rgba(216,255,91,.045);text-align:left;margin:12px 0 18px}.lesson-card strong,.rank-card strong{display:block;font-size:17px;color:#eef4e6}.lesson-card p,.rank-card p{margin:6px 0 0;color:#aab3a8;font-size:12px;line-height:1.6}.primary,.secondary{width:100%;border-radius:16px;padding:15px;border:0;font-weight:950;margin-top:8px}.primary{background:var(--lime);color:#0a0d0b}.secondary{background:#171d18;border:1px solid var(--line)}.text-btn{margin-top:10px}.danger{color:#b48782}.rank-card{margin-top:14px}.rank-card .tiny{margin-bottom:7px}.rank-card strong{font-size:21px}
@keyframes screenIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes feedbackIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:410px){.app{padding-left:11px;padding-right:11px}.hero h1{font-size:52px}.matrix-cell,.drop{padding:10px}.drop strong{font-size:12px}.task-card{min-height:210px;padding:17px}.task-card p{font-size:22px}.result-grid strong{font-size:19px}.reserve-option{grid-template-columns:40px 1fr auto}.reserve-option .reserve-icon{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}