:root{--bg:#061016;--panel:#0b1c24;--line:rgba(255,255,255,.1);--text:#f4fbff;--muted:#9eb2bc;--cyan:#2fd2ff;--pink:#ff4081}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#123844 0,var(--bg) 48%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh}button{font:inherit;color:inherit}.app-shell{width:min(100%,760px);min-height:100vh;margin:auto;padding:18px 16px 94px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.eyebrow,.kicker,.label{margin:0;color:var(--cyan);font-size:.66rem;font-weight:800;letter-spacing:.14em}h1{margin:4px 0 0;font-size:1.7rem;letter-spacing:.04em}h1 span{color:var(--cyan)}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--panel);cursor:pointer}.hero-card,.engineer-card,.learning-loop,.levels{border:1px solid var(--line);background:linear-gradient(145deg,rgba(18,45,56,.96),rgba(7,20,27,.96));border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.22)}.hero-card{padding:24px;position:relative;overflow:hidden}.hero-mark{font-size:3.2rem;margin-bottom:10px}h2{margin:8px 0 10px;font-size:clamp(1.55rem,5vw,2.25rem);line-height:1.08}h2 strong{color:var(--cyan)}.hero-copy{color:var(--muted);line-height:1.5;margin:0 0 20px}.primary-button{width:100%;border:0;border-radius:14px;padding:14px 16px;background:linear-gradient(90deg,var(--cyan),#68e0ff);color:#031017;font-weight:900;letter-spacing:.03em;cursor:pointer}.engineer-card{display:flex;align-items:center;gap:14px;margin-top:14px;padding:16px}.avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:rgba(47,210,255,.12);font-size:1.7rem}.engineer-info{flex:1;min-width:0}.engineer-info strong{display:block;margin:4px 0 9px}.xp-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem;font-weight:700}.progress-track{height:7px;background:#071116;border-radius:99px;overflow:hidden;margin-top:6px}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--pink));border-radius:inherit;transition:width .35s ease}.learning-loop,.levels{margin-top:14px;padding:16px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--text);font-size:.74rem;font-weight:900;letter-spacing:.12em}.section-heading small{color:var(--muted);font-size:.7rem;letter-spacing:0}.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.loop-grid div{min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.loop-grid b{font-size:1.3rem}.loop-grid span{font-size:.58rem;font-weight:900;letter-spacing:.08em;color:var(--muted)}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.level-card{text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px;cursor:pointer;min-height:112px}.level-card.unlocked{border-color:rgba(47,210,255,.38)}.level-card.locked{opacity:.52;cursor:not-allowed}.level-number{color:var(--cyan);font-size:.65rem;font-weight:900;letter-spacing:.1em}.level-icon{float:right;font-size:1.5rem}.level-card h3{margin:10px 0 4px;font-size:1rem}.level-card p{margin:0;color:var(--muted);font-size:.73rem;line-height:1.35}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(5,14,19,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line)}.nav-item{border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:800;padding:4px;cursor:pointer}.nav-item span{display:block;font-size:1.1rem;margin-bottom:2px}.nav-item.active{color:var(--cyan)}.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#122630;border:1px solid var(--line);padding:10px 14px;border-radius:12px;color:var(--text);font-size:.78rem;transition:.2s;max-width:calc(100% - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:600px){.app-shell{padding-top:28px}.level-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:380px){.loop-grid{grid-template-columns:1fr 1fr}.hero-card{padding:20px}}