.br-root{--br-green:oklch(78% .2 140);--br-green-deep:oklch(48% .15 150);--br-gold:oklch(88% .14 90);--br-white:oklch(99% .01 100);--br-ink:oklch(22% .04 160);background:var(--br-ink);color:var(--br-white);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;justify-content:center;font-family:Nunito,Quicksand,system-ui,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.br-backdrop{filter:blur(30px)brightness(.55);background-position:50%;background-size:cover;position:absolute;inset:-40px;transform:scale(1.1)}.br-stage{width:100%;max-width:520px;height:100dvh;position:relative;overflow:hidden;box-shadow:0 0 80px oklch(0% 0 0/.5)}.br-bg{object-fit:cover;object-position:50% 44%;width:100%;height:100%;position:absolute;inset:0}.br-vignette{pointer-events:none;background:linear-gradient(oklch(20% .05 260/.45),#0000 22% 70%,oklch(15% .05 160/.55));position:absolute;inset:0}.br-circle{pointer-events:none;will-change:transform,opacity;transform-origin:50%;border-radius:50%;position:absolute;top:0;left:0}.br-ring{border:2.5px solid color-mix(in oklab,var(--br-white) 70%,var(--br-gold));background:radial-gradient(circle,transparent 55%,color-mix(in oklab,var(--br-green) 22%,transparent) 72%,color-mix(in oklab,var(--br-gold) 30%,transparent) 88%,transparent 100%);box-shadow:0 0 28px 6px color-mix(in oklab,var(--br-green) 70%,transparent),0 0 70px 18px color-mix(in oklab,var(--br-gold) 35%,transparent),inset 0 0 40px 8px color-mix(in oklab,var(--br-green) 45%,transparent);border-radius:50%;position:absolute;inset:0}.br-ring2{border:1px solid color-mix(in oklab,var(--br-white) 35%,transparent);filter:blur(.5px);border-radius:50%;position:absolute;inset:-6%}.br-top{top:max(env(safe-area-inset-top),18px);flex-direction:column;align-items:center;gap:6px;padding-top:10px;display:flex;position:absolute;left:0;right:0}.br-phase{letter-spacing:.08em;text-shadow:0 2px 18px oklch(20% .08 260/.6),0 0 30px color-mix(in oklab,var(--br-gold) 50%,transparent);font-size:clamp(34px,9vw,48px);font-weight:300;transition:opacity .6s}.br-timer{font-variant-numeric:tabular-nums;letter-spacing:.18em;opacity:.85;-webkit-backdrop-filter:blur(8px);background:oklch(100% 0 0/.12);border-radius:999px;padding:4px 14px;font-size:15px}.br-sound{top:max(env(safe-area-inset-top),18px);-webkit-backdrop-filter:blur(8px);width:42px;height:42px;color:var(--br-white);cursor:pointer;background:oklch(100% 0 0/.14);border:1px solid oklch(100% 0 0/.3);border-radius:50%;place-items:center;margin-top:10px;display:grid;position:absolute;right:16px}.br-bottom{bottom:max(env(safe-area-inset-bottom),22px);justify-content:center;padding-bottom:18px;display:flex;position:absolute;left:0;right:0}.br-btn{font:inherit;letter-spacing:.02em;color:var(--br-white);cursor:pointer;background:linear-gradient(135deg,var(--br-green) 0%,var(--br-green-deep) 100%);box-shadow:0 0 0 1px oklch(100% 0 0/.25) inset,0 10px 30px -6px color-mix(in oklab,var(--br-green) 75%,transparent),0 0 40px color-mix(in oklab,var(--br-green) 40%,transparent);border:none;border-radius:999px;align-items:center;gap:10px;padding:17px 40px;font-size:18px;font-weight:700;transition:transform .18s,box-shadow .18s;display:inline-flex}.br-btn:active{transform:scale(.95)}.br-btn.ghost{-webkit-backdrop-filter:blur(10px);background:oklch(100% 0 0/.16);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.35)}.br-skip{right:20px;bottom:max(env(safe-area-inset-bottom),22px);color:var(--br-white);opacity:.75;font:inherit;cursor:pointer;text-shadow:0 1px 6px oklch(0% 0 0/.5);background:0 0;border:none;margin-bottom:-4px;font-size:14px;position:absolute}.br-end{padding:0 28px calc(max(env(safe-area-inset-bottom),22px) + 40px);text-align:center;background:linear-gradient(#0000,oklch(18% .06 160/.2) 40%,oklch(18% .06 160/.85));flex-direction:column;justify-content:flex-end;align-items:center;gap:22px;animation:.8s both br-fade;display:flex;position:absolute;inset:0}.br-end p{text-shadow:0 2px 14px oklch(0% 0 0/.5);margin:0;font-size:22px;font-weight:600;line-height:1.4}.br-end small{opacity:.8;font-size:14px}@keyframes br-fade{0%{opacity:0}to{opacity:1}}.br-root{z-index:60}.br-back{top:max(env(safe-area-inset-top),18px);-webkit-backdrop-filter:blur(8px);width:42px;height:42px;color:var(--br-white);cursor:pointer;z-index:2;background:oklch(100% 0 0/.14);border:1px solid oklch(100% 0 0/.3);border-radius:50%;place-items:center;margin-top:10px;display:grid;position:absolute;left:16px}.br-intro{text-align:center;padding:28px 26px calc(max(env(safe-area-inset-bottom),22px) + 56px);background:linear-gradient(#0000,oklch(16% .06 160/.55) 38%,oklch(16% .06 160/.92));flex-direction:column;align-items:center;gap:12px;animation:.8s both br-fade;display:flex;position:absolute;bottom:0;left:0;right:0}.br-intro h1{text-shadow:0 2px 14px oklch(0% 0 0/.45);margin:0;font-size:clamp(24px,6.6vw,30px);font-weight:800;line-height:1.2}.br-intro p{text-shadow:0 1px 10px oklch(0% 0 0/.5);max-width:30ch;margin:0;font-size:16px;line-height:1.5}.br-intro p.soft{opacity:.82;font-size:14.5px}.br-intro .br-btn{margin-top:10px}.br-btn:disabled{opacity:.6;cursor:default}
