/* 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-primary-dark:#2563EB;--color-accent:#FF0000;--color-bg:#000000;--color-surface:#FFFFFF;--color-text:#000000;--color-muted:#6B7280;--radius-md:14px;--space-sm:8px;--space-md:16px;--space-lg:24px;--shadow-modal:0 20px 60px rgba(0,0,0,.6)}.hidden{display:none!important}.body{position:relative;display:block;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;overflow:hidden;font-family:-apple-system,Roboto,Helvetica,sans-serif;cursor:pointer;padding:20px;background:radial-gradient(ellipse at 50% 40%,#1f1f24 0%,#0a0a0c 55%,var(--color-bg) 100%);user-select:none;-webkit-tap-highlight-color:transparent}.body *{box-sizing:border-box}.overlay{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.6)}.modal{position:fixed;top:50%;left:50%;z-index:20;transform:translate(-50%,-50%);width:min(380px,calc(100% - 32px));padding:var(--space-lg);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;gap:var(--space-lg)}.modal__img.close{position:absolute;top:4px;right:4px;width:44px;height:44px;padding:12px;opacity:.7;transition:opacity .2s ease}.modal__img.close:hover{opacity:1}[dir=rtl] .modal__img.close{right:auto;left:4px}.modal__text-wrapper{display:flex;align-items:center;gap:var(--space-md);padding-inline-end:28px;min-width:0}.modal__img.bell{flex:0 0 auto;width:44px;height:44px;object-fit:contain;pointer-events:none}.modal__copy{display:flex;flex-direction:column;gap:4px;min-width:0}.modal__label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}.modal__text{font-size:clamp(20px,5vw,24px);font-weight:700;line-height:1.25;overflow-wrap:anywhere;text-wrap:balance}.modal__btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.button{min-height:48px;padding:12px 16px;border:1px solid #D1D5DB;border-radius:10px;background:var(--color-surface);color:var(--color-text);font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}.button:hover{background:#F3F4F6}.button:active{transform:scale(.97)}.button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.button--primary{border-color:var(--color-primary);background:var(--color-primary);color:#fff;box-shadow:0 6px 16px rgba(59,130,246,.4)}.button--primary:hover{background:var(--color-primary-dark)}.play-button{position:absolute;top:50%;left:50%;width:clamp(72px,14vw,120px);height:clamp(72px,14vw,120px);padding:clamp(20px,4vw,34px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.5);pointer-events:none;user-select:none}.toolbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);padding:0 20px 14px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);pointer-events:none}.progress{position:relative;flex:0 0 100%;height:4px;margin-bottom:var(--space-sm);background:rgba(255,255,255,.3);border-radius:2px}.bar{width:11%;height:100%;background:var(--color-accent);border-radius:2px;position:relative}.bar::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--color-accent);transform:translateY(-50%)}.controls,.settings{display:flex;align-items:center;gap:var(--space-md)}.control-img{width:24px;height:24px;object-fit:contain;user-select:none}.time{color:#fff;font-size:13px;white-space:nowrap}@media (min-width:768px){.body{padding:32px}.toolbar{padding:0 32px 20px}.control-img{width:28px;height:28px}.modal{padding:32px}}@media (max-width:360px){.modal__btns{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.button,.modal__img.close{transition:none}}

html,
body {
  scrollbar-width: none;
}

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