.web-back{display:inline-block;margin:19px 0 0;color:#9fb1c7;font-size:12px;font-weight:750;letter-spacing:.02em;text-decoration:none}
.web-back:hover{color:#f5b867}
.web-notice{background:rgba(109,221,210,.075);border-color:rgba(109,221,210,.3);color:#c8e5e1}
.web-notice strong{display:block;color:#e5faf7;margin-bottom:4px}
.web-notice a{color:#f5c982;font-weight:800;text-decoration:underline}
.web-notice button{display:inline-block;margin-top:8px;color:#6dddd2}
.web-modal-backdrop,.web-ring-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;background:rgba(4,9,16,.8);backdrop-filter:blur(10px)}
.web-modal-backdrop[hidden],.web-ring-overlay[hidden]{display:none!important}
.web-modal{width:min(100%,440px);padding:24px;border:1px solid rgba(183,211,231,.18);border-radius:25px;background:linear-gradient(155deg,#1e2e40,#121e2c);box-shadow:0 25px 80px rgba(0,0,0,.45)}
.web-modal-header{display:flex;align-items:start;justify-content:space-between;gap:15px}
.web-modal h2{margin:0;font-size:25px;letter-spacing:-.04em}
.web-modal-header>button{width:38px;height:38px;border:1px solid rgba(193,215,232,.15);border-radius:12px;background:#29394a;color:#d4e0e9;font-size:24px}
.web-modal p{color:#a3b4c4;margin:12px 0 18px;font-size:13px;line-height:1.55}
.web-sound-list{display:grid;gap:8px}
.web-sound-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:1px solid rgba(190,213,231,.13);border-radius:15px;background:#182638;color:#e9f1f5;text-align:left;font-size:14px;font-weight:700}
.web-sound-list button:hover,.web-sound-list button:focus-visible{border-color:rgba(245,184,103,.65);background:#26374a}
.web-sound-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(245,184,103,.12);color:#f5b867}
.web-sound-play{margin-left:auto;color:#84d8d0;font-size:11px}
.web-ring-overlay{z-index:100;padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);background:radial-gradient(circle at 50% 42%,#213449 0%,#101a29 46%,#0b111b 100%)}
.web-ring-content{width:min(100%,520px);min-height:min(100dvh,850px);display:flex;flex-direction:column;align-items:center;text-align:center;padding:35px 0 26px}
.web-ring-brand{font-size:16px;font-weight:900;letter-spacing:.36em;color:#6dddd2}
.web-ring-halo{flex:1;display:grid;place-items:center;min-height:200px}
.web-ring-halo>div{width:190px;height:190px;display:grid;place-items:center;border:2px solid #f5b867;border-radius:50%;box-shadow:0 0 0 22px rgba(109,221,210,.08),0 0 70px rgba(245,184,103,.18);color:#f5b867;font-size:100px;line-height:1}
.web-ring-time{font-size:clamp(68px,19vw,108px);font-weight:750;letter-spacing:-.075em;line-height:1;font-variant-numeric:tabular-nums}
.web-ring-content h2{margin:20px 0 0;color:#c9d6e2;font-size:25px;font-weight:550;overflow-wrap:anywhere}
.web-ring-actions{display:grid;gap:12px;width:100%;margin-top:auto;padding-top:55px}
.web-ring-actions button{min-height:64px;border:0;border-radius:18px;font-size:14px;font-weight:900;letter-spacing:.1em}
#webRingDismiss{background:#f5b867;color:#172333}
#webRingSnooze{background:#273b50;color:#f2f7fa}
@media(max-height:650px){.web-ring-content{min-height:100dvh;padding-top:25px}.web-ring-halo{min-height:90px}.web-ring-halo>div{width:100px;height:100px;font-size:55px}.web-ring-actions{padding-top:25px}.web-ring-actions button{min-height:52px}}