:root{--bg: #0B0F0D;--fg: #F4F6F2;--stage: #15181a}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--stage);color:var(--fg);font-family:Overpass,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font-family:inherit}a{color:#f5b841}.stage{min-height:100dvh;display:flex;align-items:center;justify-content:center;gap:40px;padding:32px 24px;background:radial-gradient(1200px 700px at 50% 40%,#1f2325,#121415 60%,#0c0d0e)}.device-wrap{flex:none}.device{width:390px;height:844px;border-radius:46px;background:var(--bg);overflow:hidden;position:relative;box-shadow:0 0 0 11px #1b1e1c,0 0 0 13px #30342f,0 40px 90px #000000a6;transform-origin:center center}.screen{width:390px;height:844px;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;overflow:hidden;position:relative;font-variant-numeric:tabular-nums}.screen main,.screen .scroll{scrollbar-width:none}.screen main::-webkit-scrollbar,.screen .scroll::-webkit-scrollbar{display:none}.demo{width:230px;flex:none;display:flex;flex-direction:column;gap:14px;color:#a9b3ad;font-size:13px}.demo h1{margin:0;font-size:22px;font-weight:900;color:#f4f6f2;letter-spacing:.01em}.demo p{margin:0;line-height:1.45}.demo h2{margin:6px 0 0;font-size:11px;font-weight:800;letter-spacing:.12em;color:#7e8a83}.demo .group{display:flex;flex-wrap:wrap;gap:6px}.demo button{height:34px;padding:0 11px;border-radius:9px;border:1px solid #30342f;background:#1b1e1c;color:#f4f6f2;font-size:13px;font-weight:700;cursor:pointer}.demo button:hover{border-color:#5a6058}.demo button[aria-pressed=true]{background:#f5b841;color:#14110a;border-color:#f5b841}.toast{position:absolute;left:16px;right:16px;top:16px;z-index:20;padding:12px 14px;border-radius:14px;background:#f4f6f2;color:#14110a;font-size:14px;font-weight:800;box-shadow:0 8px 30px #00000073;animation:toast-in .18s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media (max-width: 520px){.stage{padding:0;gap:0;min-height:100dvh;align-items:stretch;background:var(--bg)}.device-wrap{width:100%}.device{width:100%;height:100dvh;border-radius:0;box-shadow:none;transform:none!important}.screen{width:100%;height:100%}.demo{display:none}}