/* baseline reset (auto-injected) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:root{--color-primary:#3B82F6;--color-accent:#FF0000;--color-bg:#000000;--color-surface:#FFFFFF;--color-text:#000000;--color-muted:#52525B;--radius:16px}html,body{background:var(--color-bg)}.hidden{display:none!important}.body{display:block;position:relative;height:100vh;height:100dvh;min-height:100vh;font-family:-apple-system,Roboto,Helvetica,sans-serif;cursor:pointer;padding:20px;background:radial-gradient(circle at 50% 40%,#1f1f1f 0%,#000 75%);overflow:hidden;user-select:none}.body *{box-sizing:border-box}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:5}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;width:min(380px,calc(100vw - 32px));background:var(--color-surface);color:var(--color-text);border-radius:var(--radius);padding:28px 24px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:24px}.modal__img{display:block;pointer-events:none;user-select:none}.modal__img.close{position:fixed;top:12px;right:12px;width:20px;height:20px}.modal__img.bell{width:44px;height:44px;flex-shrink:0}.modal__text-wrapper{display:flex;align-items:center;gap:16px;min-width:0}.modal__text{font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.35;color:var(--color-text);overflow-wrap:anywhere;min-width:0}.modal__btns{display:flex;gap:12px}.button{flex:1;min-height:48px;padding:12px 16px;border-radius:12px;border:1px solid #d4d4d8;background:#f4f4f5;color:var(--color-muted);font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.button:hover{opacity:.85}.button:active{transform:scale(.97)}.button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.button--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.play-button{position:absolute;top:50%;left:50%;width:84px;height:84px;transform:translate(-50%,-50%);pointer-events:none;user-select:none;z-index:1}.toolbar{position:absolute;left:0;right:0;bottom:0;padding:0 20px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:1;pointer-events:none}.progress{width:100%;height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin-bottom:8px}.bar{width:11%;height:100%;background:var(--color-accent);border-radius:2px}.controls,.settings{display:flex;align-items:center;gap:16px}.control-img{width:24px;height:24px;pointer-events:none;user-select:none}.time{color:#fff;font-size:14px}@media (min-width:480px){[dir=rtl] .modal{top:50%;left:50%;right:auto;transform:translate(-50%,-50%)}}[dir=rtl] .modal__img.close{right:auto;left:12px}@media (prefers-reduced-motion:reduce){.button{transition:none}}

html,
body {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}