@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
.hidden-ball{position:absolute;left:66.5%;bottom:70px;transform:translateX(-50%);white-space:nowrap;font-size:8px;letter-spacing:1.5px;color:#edc680b3;pointer-events:none;padding:8px 12px;border:1px solid #edc68022;border-radius:20px;background:#171414c9}.hidden-ball[hidden]{display:none}@media(max-width:800px){.hidden-ball{left:50%;bottom:37px;font-size:7px;letter-spacing:1px}.start-wrap{bottom:8px!important}h1{font-size:44px!important}}
:root{color-scheme:dark;--bg:#100f12;--line:#ffffff13;--muted:#968d83;--mint:#edc680;--white:#f3ede3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.app{max-width:1440px;margin:auto;padding:0 6%;position:relative}header{height:105px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:25px;font-weight:800;letter-spacing:3px;display:flex;align-items:center;gap:9px}.brandmark{color:var(--mint);font-size:39px;line-height:1}.brand-dot{color:var(--mint);margin-left:-9px}.edition{font-size:9px;letter-spacing:2px;color:#8895a4;margin-left:auto}header .icon-btn{margin-left:24px}.icon-btn{border:1px solid #ffffff20;border-radius:50%;background:transparent;width:38px;height:38px;display:inline-grid;place-items:center;font-size:18px;flex:none;transition:background .2s}.icon-btn:hover{background:#ffffff0c}.intro{position:absolute;top:160px;left:6%;pointer-events:none;z-index:2}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:#a3b1bd;display:flex;align-items:center;gap:9px}.eyebrow>span{width:5px;height:5px;border-radius:50%;background:var(--mint)}h1{font-size:clamp(48px,6.5vw,88px);line-height:1.07;letter-spacing:-5px;font-weight:500;margin:26px 0}h1 em{font-style:normal;color:var(--mint)}.intro p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}.playground{height:590px;position:relative;isolation:isolate;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}.playground:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 66% 50%,#d6ac500c,transparent 55%);pointer-events:none}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.game-top{position:absolute;top:35px;left:45%;right:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:9px;letter-spacing:1.5px;color:#9aa8b7}.level{display:flex;align-items:center;gap:8px}.tiny-square{width:5px;height:5px;background:var(--mint)}.live{display:flex;gap:6px;align-items:center;font-size:8px}.live i{width:4px;height:4px;background:var(--mint);border-radius:50%}.axis-label{position:absolute;right:0;bottom:35px;font-size:8px;letter-spacing:1.5px;color:#647180;pointer-events:none}.axis-label span{margin-left:16px;color:#a2b0bc}.gravity{position:absolute;right:0;top:48%;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.7px;color:#7b8997;writing-mode:vertical-rl;pointer-events:none}.gravity span{font-size:25px;writing-mode:horizontal-tb;color:var(--mint)}.start-wrap{position:absolute;bottom:38px;left:0;display:flex;flex-direction:column;align-items:center;gap:13px}.primary{border:0;background:var(--mint);color:#2b1e0d;padding:17px 23px;border-radius:6px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:40px;transition:transform .2s,background .2s}.primary:hover{background:#ffe2a4;transform:translateY(-1px)}.primary span{font-size:19px}.start-wrap>span{font-size:9px;color:#71808e}.dashboard{display:flex;align-items:center;gap:70px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:95px}.metric{display:flex;flex-direction:column;gap:10px}.metric-label{font-size:8px;color:#8592a1;letter-spacing:1.7px}.metric strong{font-size:22px;line-height:1;font-weight:500;letter-spacing:2px;font-variant-numeric:tabular-nums}#beacons{display:flex;align-items:center;gap:9px;height:22px}#beacons i{width:9px;height:9px;transform:rotate(45deg);border:1px solid #a5adba55}#beacons i.filled{background:#ffce80;border-color:#ffce80;box-shadow:0 0 13px #ffce8050}#beacons span{font-size:10px;color:#a2adba;margin-left:12px;font-variant-numeric:tabular-nums}.tools{margin-left:auto;display:flex;align-items:center;gap:12px}.tool{border:1px solid #ffffff20;border-radius:25px;background:transparent;padding:10px 17px;font-size:11px;display:flex;align-items:center;gap:9px}.tool span{font-size:19px;color:var(--mint)}.tool:hover{background:#ffffff08}footer{display:flex;align-items:center;gap:20px;padding:23px 0 30px}.gesture{font-size:30px;color:#8e9ba9}footer p{font-size:10px;line-height:1.8;color:#788694;margin:0}footer b{color:#b5c1cd;font-weight:500}.foot-note{margin-left:auto;font-size:8px;color:#51606f;letter-spacing:1.8px}.toast{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);padding:13px 20px;border:1px solid #edc68033;border-radius:30px;background:#282015f5;color:var(--mint);font-size:12px;opacity:0;transition:opacity .25s,transform .25s;z-index:10;pointer-events:none;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.win{position:absolute;inset:65px 0 35px 42%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#100f12ed;border:1px solid #edc6802c;border-radius:15px;backdrop-filter:blur(12px);z-index:5}.win[hidden]{display:none}.win-mark{color:var(--mint);font-size:45px;margin-bottom:15px}.win h2{font-size:30px;font-weight:500;letter-spacing:-1px;line-height:1.15}.win p{font-size:12px;color:var(--muted);margin:0 0 24px}dialog{max-width:440px;width:calc(100% - 36px);border:1px solid #edc68030;border-radius:16px;padding:36px;background:#1c1919;color:var(--white)}dialog::backdrop{background:#03070bd9;backdrop-filter:blur(6px)}dialog h2{font-size:32px;letter-spacing:-1.5px;font-weight:500}dialog p,dialog li{font-size:12px;line-height:1.8;color:#a5b2c0}dialog ol{padding-left:18px}dialog li{padding-left:4px;margin:12px 0}dialog .close{position:absolute;right:15px;top:15px}dialog .primary{margin-top:24px;width:100%}
@media(min-width:1450px){.intro{top:175px}.playground{height:650px}}@media(max-width:800px){.app{padding:0 6%}header{height:76px}.brand{font-size:20px}.brandmark{font-size:30px}.edition{display:none}header .icon-btn{margin-left:auto;width:31px;height:31px;font-size:14px}.intro{position:relative;top:auto;left:auto;padding:27px 0 0}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:48px;letter-spacing:-2.7px;margin:18px 0 13px;line-height:1.04}h1 br{display:none}.intro p{font-size:11px;line-height:1.7}.intro p br{display:none}.playground{height:clamp(330px,47svh,510px);margin:15px -4% 0}.game-top{top:5px;left:4%;right:4%;font-size:8px;letter-spacing:1px}.gravity{right:2%;font-size:7px;gap:5px}.gravity span{font-size:21px}.axis-label{right:4%;bottom:13px;font-size:7px;letter-spacing:1px}.axis-label span{margin-left:9px}.start-wrap{left:50%;transform:translateX(-50%);bottom:28px;white-space:nowrap;gap:8px}.primary{padding:13px 19px;font-size:11px;gap:28px}.start-wrap>span{font-size:8px}.dashboard{height:85px;gap:32px}.metric-label{font-size:7px}.metric strong{font-size:20px}.tools{gap:8px}.tool{font-size:0;padding:0;border-radius:50%;width:34px;height:34px;justify-content:center;gap:0}.tool span{font-size:22px}.tools .icon-btn{width:34px;height:34px;font-size:18px}.metric{gap:8px}#beacons{gap:7px}#beacons i{width:7px;height:7px}#beacons span{font-size:9px;margin-left:5px}.foot-note{display:none}footer{padding:19px 0 calc(22px + env(safe-area-inset-bottom));gap:13px}footer p{font-size:9px}.gesture{font-size:25px}.win{inset:28px 3% 26px}.win h2{font-size:27px}}@media(max-width:360px){h1{font-size:42px}.dashboard{gap:20px}.tools{gap:6px}.tools .icon-btn,.tool{width:30px;height:30px}#beacons span{display:none}.playground{height:330px}}