:root{--ink:#111;--muted:#9a9a9f;--line:#ececef;--panel:#f6f6f7;--mint:#31bea6;--danger:#ef6676;--nav-h:86px;--r:22px}*{box-sizing:border-box}html{background:#e8e9ec}body{margin:0;font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);background:#e8e9ec;font-size:16px}.app-shell{width:min(100%,640px);min-height:100dvh;margin:auto;background:#fff;box-shadow:0 0 40px #00000018;position:relative;overflow:hidden}.view{display:none;min-height:100dvh;padding:26px 28px calc(var(--nav-h) + 28px);animation:pageIn .28s cubic-bezier(.2,.85,.3,1)}.view.active{display:block}@keyframes pageIn{from{opacity:.3;transform:translateX(22px)}to{opacity:1;transform:none}}button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}.page-title,.simple-head{display:flex;align-items:center;gap:12px;margin-bottom:28px}.page-title strong,.simple-head h1{font-size:1.55rem;margin:0;font-weight:800}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#111;color:#fff;font-weight:800}.icon-btn{margin-left:auto;width:42px;height:42px;border-radius:50%;background:#f3f3f4}.hero-card{min-height:232px;border-radius:26px;background:#111;color:#fff;padding:26px;position:relative;overflow:hidden;display:flex;align-items:flex-start}.hero-card:after{content:"";position:absolute;inset:auto -80px -140px auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#8cf1de,#16aa92 45%,#0a493e 71%)}.eyebrow{font-size:.72rem;letter-spacing:.14em;color:#88e4d4;font-weight:800}.hero-card h1{font-size:2.2rem;line-height:1.05;margin:12px 0 20px;letter-spacing:-.05em}.ghost-btn{border:1px solid #ffffff7a;border-radius:12px;padding:10px 14px;color:#fff}.hero-orbit{position:absolute;z-index:2;right:55px;top:60px;width:108px;height:108px;border-radius:50%;background:linear-gradient(145deg,#ffe597,#c89a28);border:10px solid #2f2f31;display:grid;place-items:center;font-size:2.8rem;font-weight:800;box-shadow:0 16px 40px #0008}.carousel-dots{position:absolute;z-index:3;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.carousel-dots i{width:7px;height:7px;border-radius:9px;background:#777}.carousel-dots i.active{width:24px;background:#fff}.ratio-card{display:grid;grid-template-columns:1.45fr 1fr;margin-top:18px;background:var(--panel);border-radius:20px;padding:22px 24px;gap:20px}.ratio-card>div+div{border-left:1px solid #ddd;padding-left:22px}.ratio-card small,.ratio-card span{display:block}.ratio-card small{font-weight:800;margin-bottom:18px}.ratio-card strong{font-size:1.26rem;display:block}.ratio-card span{color:var(--muted);font-size:.82rem;margin-top:6px}.ratio-card>div:last-child strong{font-size:2.2rem}.primary-btn{background:#111;color:#fff;padding:18px 24px;border-radius:16px;font-weight:800}.primary-btn.wide{width:100%;margin:18px 0;position:relative}.primary-btn.wide span{position:absolute;right:12px;top:-8px;font-size:.67rem;padding:5px 8px;border-radius:10px;background:#e4bb54;color:#111;transform:rotate(8deg)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;padding:12px}.stats-grid button{text-align:left;position:relative;padding:14px}.stats-grid small{display:block;color:var(--muted);font-weight:700}.stats-grid strong{font-size:1.05rem;margin-top:4px;display:block}.stats-grid i{position:absolute;right:8px;top:25px;color:#aaa;font-size:1.5rem}h2{font-size:1.35rem;margin:28px 0 14px}.tutorial-card{border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;align-items:center;justify-content:space-between}.tutorial-card h3{margin:10px 0 4px}.tutorial-card p{margin:0 0 14px;color:var(--muted);font-size:.86rem}.tutorial-card button{font-weight:800}.play{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #222;border-radius:50%;font-size:.72rem}.tutorial-art{width:110px;height:110px;border-radius:22px;background:linear-gradient(145deg,#212121,#515154);color:#7ff0d9;display:grid;place-items:center;font-weight:800;font-size:1.45rem}.placeholder-card{margin-top:90px;background:var(--panel);padding:28px;border-radius:24px}.placeholder-card h2{margin-top:0}.placeholder-card p{color:var(--muted);line-height:1.6}.bottom-nav{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,640px);height:var(--nav-h);background:#fffc;border-top:1px solid var(--line);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 14px max(10px,env(safe-area-inset-bottom))}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9b9b9f;font-size:.72rem;font-weight:700}.bottom-nav b{height:36px;min-width:40px;display:grid;place-items:center;border-radius:13px;font-size:1.35rem}.bottom-nav button.active{color:#111}.bottom-nav button.active b{background:#111;color:#fff}@media(max-width:480px){.view{padding:22px 18px calc(var(--nav-h) + 22px)}.hero-card{min-height:210px;padding:22px}.hero-card h1{font-size:1.85rem}.hero-orbit{right:24px;top:72px;width:92px;height:92px}.ratio-card{padding:18px}.ratio-card strong{font-size:1rem}.tutorial-art{width:90px;height:100px}.bottom-nav{padding-inline:8px}}