:root{font-family:Arial,Helvetica,sans-serif;color:#1d1d1d;background:#fff;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body,#root{width:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none}button{font:inherit;border:0;cursor:pointer;touch-action:none}.app{width:100vw;height:100dvh;position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;overflow:hidden}.stage{position:absolute;top:0;right:0;bottom:0;left:0}canvas{display:block;touch-action:none}.hud{position:absolute;top:max(16px,env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-weight:800;font-size:13px;letter-spacing:.08em}.hud button{pointer-events:auto}.icon-button{width:38px;height:38px;border-radius:50%;background:#242424;color:#fff;font-size:20px}.keypad{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;width:min(252px,68vw);height:188px;transform:translate(-50%);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px}.key{background:#1c1c1ceb;color:#fff;border-radius:15px;font-weight:800;font-size:25px;box-shadow:0 3px #050505}.key:active{transform:translateY(3px);box-shadow:none;background:#e54736}.key:disabled{opacity:.45}.key-8{grid-column:2;grid-row:1}.key-4{grid-column:1;grid-row:2}.key-6{grid-column:3;grid-row:2}.key-1{grid-column:1;grid-row:3}.key-3{grid-column:3;grid-row:3}.panel,.result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:32px;background:#fff;text-align:center}.panel button,.result button{width:min(280px,80vw);min-height:52px;border-radius:12px;background:#e54736;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.secondary{background:#242424!important}.brand{font-size:54px;line-height:.8;letter-spacing:-.08em;font-style:italic;display:flex;flex-direction:column;align-items:center}.brand strong{color:#e54736}.menu p{font-size:11px;letter-spacing:.22em;margin:8px 0 26px}.menu small{margin-top:10px;font-weight:700}.track-preview{width:88vw;max-width:420px;height:50px;margin-top:28px;border-bottom:5px solid #222;border-radius:50%;transform:rotate(-2deg)}.settings{justify-content:flex-start;padding-top:max(50px,env(safe-area-inset-top))}.settings h1{margin-bottom:25px}.settings label{width:min(360px,88vw);display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:16px;font-weight:700;border-bottom:1px solid #ddd}.toggle{width:50px;height:29px;border-radius:20px;background:#aaa;padding:3px}.toggle i{display:block;width:23px;height:23px;background:#fff;border-radius:50%;transition:transform .15s}.toggle.on{background:#e54736}.toggle.on i{transform:translate(21px)}.help{display:grid;gap:8px;width:min(360px,88vw);text-align:left;margin:26px 0 20px}.help b{margin-bottom:5px}.help em{display:inline-block;width:72px;color:#e54736;font-style:normal;font-weight:700}.result{background:#fffffff0;z-index:3}.result h2{margin:0;font-size:34px;letter-spacing:.08em}.result p{font-size:27px;margin:0 0 4px}.result small{color:#e54736;font-weight:700;margin-bottom:14px}@media (max-height: 620px){.keypad{height:150px;bottom:10px}.key{font-size:21px}.brand{font-size:43px}}