*{box-sizing:border-box}
html,body{margin:0;height:100%;color:#12333c;font-family:'Grandstander',system-ui,sans-serif;-webkit-text-size-adjust:100%;background:linear-gradient(180deg,#f3fbfa 0%,#dff2f3 55%,#cbe9ee 100%) fixed}
a{color:#006986}a:hover{color:#f18a80}
button,input{font-family:inherit}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #43c0c9;outline-offset:2px}
.bb-app{height:100dvh;display:flex;flex-direction:column}
.bb-stripe{flex:none;height:8px;display:flex}.bb-stripe i{flex:1}
.bb-stripe i:nth-child(1){background:#43c0c9}.bb-stripe i:nth-child(2){background:#f18a80}.bb-stripe i:nth-child(3){background:#ffe094}.bb-stripe i:nth-child(4){background:#6fc0b2}
.bb-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px clamp(14px,3vw,28px) 0}
.bb-back{font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.bb-tabs{display:flex;gap:2px;background:rgba(255,255,255,.75);border-radius:999px;padding:3px;box-shadow:0 4px 16px rgba(0,105,134,.10)}
.bb-tabs button{border:0;cursor:pointer;min-height:38px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:800;white-space:nowrap;background:transparent;color:#006986}
.bb-tabs button.on{background:#006986;color:#fff}
.bb-head{flex:none;padding:30px clamp(18px,4vw,40px) 0;display:flex;flex-direction:column;gap:4px;text-align:center;align-items:center}
.bb-kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4f8a92}
.bb-h1{margin:0;font-size:clamp(26px,3.6vw,38px);line-height:1.08;font-weight:800;color:#006986;text-wrap:balance}
.bb-sub{margin:0;font-size:16px;line-height:1.45;font-weight:500;color:#4c6f76;max-width:520px;text-wrap:pretty}
.bb-stage{flex:1;position:relative;min-height:0}
.bb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.bb-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:24px}
.bb-phase{font-size:clamp(26px,4vw,36px);font-weight:800;color:#006986;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.bb-count{font-size:clamp(40px,7vw,64px);font-weight:800;line-height:1;color:#006986;opacity:.8}
.bb-empty{font-size:18px;font-weight:700;color:#4c6f76;max-width:300px;line-height:1.45}
.bb-ctl{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 16px calc(20px + env(safe-area-inset-bottom))}
.bb-pats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.bb-pat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:6px 16px;line-height:1.15;border:0;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.8);color:#006986;box-shadow:0 2px 10px rgba(0,105,134,.10)}
.bb-pat b{font-size:15px;font-weight:800;white-space:nowrap}.bb-pat span{font-size:12.5px;font-weight:600;opacity:.8;white-space:nowrap}
.bb-pat.on{background:#006986;color:#fff;box-shadow:none}
.bb-row{display:flex;align-items:center;gap:14px}
.bb-go{min-width:150px;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:#006986;color:#fff;font-size:17px;font-weight:800;cursor:pointer;white-space:nowrap}.bb-go:hover{background:#00546b}
.bb-breaths{font-size:15px;font-weight:700;color:#4c6f76;white-space:nowrap;min-width:84px}
.bb-form{display:flex;gap:8px;width:100%;max-width:520px}
.bb-form input{flex:1;min-width:0;min-height:52px;border:0;border-radius:999px;padding:0 20px;font-size:16px;color:#12333c;background:#fff;box-shadow:0 4px 16px rgba(0,105,134,.12)}
.bb-form input::placeholder{color:#7f9aa0}
.bb-form button{flex:none;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:#006986;color:#fff;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap}.bb-form button:hover{background:#00546b}
.bb-note{font-size:14px;font-weight:600;color:#4c6f76;text-align:center}