:where([data-browser-app-page]){& .page-wrapper{width:min(72rem,100% - 2.5rem);margin-inline:auto;padding-block:clamp(1.5rem,3vw,2.5rem) 4rem}& .app-intro{justify-content:space-between;align-items:end;gap:1rem 2rem;margin-bottom:1.5rem;display:flex}& .app-kicker{color:hsl(var(--brand));letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5rem;font-size:.7rem;font-weight:600}& .app-title{letter-spacing:-.045em;margin:0;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;line-height:1.15}& .app-description{max-width:58ch;color:hsl(var(--ink-soft));margin:.65rem 0 0;font-size:.875rem;line-height:1.6}& .privacy-note{color:hsl(var(--ink-soft));flex-shrink:0;align-items:center;gap:.4rem;padding-block:.2rem;font-size:.75rem;line-height:1.5;display:flex}& .privacy-note [data-slot=icon]{color:hsl(var(--brand))}& .app-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:1.5rem;display:grid}& .left-panel{border-radius:1.5rem;gap:0;min-width:0;padding:clamp(1.25rem,2.5vw,2rem)}& .session-heading,& .history-card-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}& .session-title,& .history-title{letter-spacing:-.025em;margin:0;font-size:1rem;font-weight:600}& .session-helper{min-height:1.5em;color:hsl(var(--ink-soft));margin:.4rem 0 0;font-size:.8125rem;line-height:1.5}& .session-status{white-space:nowrap;gap:.4rem}& .session-status:before{content:"";background:currentColor;border-radius:50%;width:.4rem;height:.4rem}& .session-status[data-recording=true]{background:hsl(var(--brand-soft));color:hsl(var(--brand));border-color:hsl(var(--brand) / .25)}& .timer-area{isolation:isolate;place-items:center;padding-block:2rem;display:grid;position:relative}& .pulse-rings{pointer-events:none;z-index:-1;place-items:center;display:grid;position:absolute;inset:1rem}& .pulse-ring{aspect-ratio:1;border:1px solid hsl(var(--brand) / .18);border-radius:50%;width:15.5rem;position:absolute}& .pulse-ring-2{border-color:hsl(var(--brand) / .09);width:17rem}& .pulse-rings.is-active .pulse-ring{animation:3s ease-in-out infinite timer-breathe}& .pulse-rings.is-active .pulse-ring-2{animation-delay:.3s}& .main-btn{border:1px solid hsl(var(--brand-solid));background:hsl(var(--brand-solid));width:14rem;height:14rem;color:hsl(var(--on-brand));box-shadow:0 .6rem 1.6rem hsl(var(--brand-solid) / .18);cursor:pointer;border-radius:50%;padding:1rem;transition:background .18s,color .18s,transform .18s}& .main-btn:hover{background:hsl(var(--brand-solid));transform:translateY(-2px)}& .main-btn:active{transform:scale(.98)}& .main-btn.is-active{background:hsl(var(--ink));color:hsl(var(--canvas));border-color:hsl(var(--ink));box-shadow:none}& .main-btn:focus-visible{outline:3px solid hsl(var(--brand));outline-offset:7px}& .timer-button-copy{justify-items:center;gap:.8rem;display:grid}& .btn-status{font-size:.875rem;font-weight:600}& .btn-timer{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:2.75rem;font-weight:400;line-height:1}& .btn-hint{white-space:normal;text-align:center;max-width:9rem;font-size:.7rem;font-weight:400;line-height:1.5}& .stats-row{border-block:1px solid hsl(var(--line));grid-template-columns:repeat(3,minmax(0,1fr));padding-block:1rem;display:grid}& .stat-card{text-align:center;gap:.6rem;min-width:0;padding:.15rem .5rem}& .stat-card+.stat-card{border-left:1px solid hsl(var(--line))}& .stat-label{color:hsl(var(--ink-soft));font-size:.6875rem;line-height:1.4}& .stat-value{color:hsl(var(--ink));font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.375rem;line-height:1.2}& .rule-progress{margin-top:1.5rem}& .rule-progress-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1.1rem;display:flex}& .rule-progress-title{margin:0;font-size:.875rem;font-weight:600}& .rule-progress-badge.met{color:hsl(var(--success));background:hsl(var(--success) / .1);border-color:hsl(var(--success) / .3)}& .rule-bars{gap:.9rem;display:grid}& .rule-bar-row{grid-template-columns:minmax(0,1fr) auto;gap:.4rem .75rem;display:grid}& .rule-bar-label{color:hsl(var(--ink-soft));font-size:.75rem}& .rule-bar-val{color:hsl(var(--ink));font:.75rem var(--font-mono);grid-area:1/2}& .rule-bar-track{background:hsl(var(--surface-muted));border-radius:1rem;grid-column:1/-1;height:.25rem;overflow:hidden}& .rule-bar-fill{background:hsl(var(--brand));width:0%;height:100%;transition:width .2s}& .rule-bar-fill.met{background:hsl(var(--success))}& .rule-bar-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}& .right-panel{gap:1.25rem;min-width:0;display:grid}& .history-card{border-radius:1.5rem;gap:0;padding:0;overflow:hidden}& .history-card-header{flex-wrap:wrap;padding:1.5rem}& .history-title-group,& .history-actions{align-items:center;gap:.4rem;display:flex}& .history-count-badge,& .undo-btn,& .clear-btn{display:none}& .history-count-badge.visible,& .undo-btn.visible,& .clear-btn.visible{display:inline-flex}& .undo-btn,& .clear-btn{min-height:2.75rem;padding-inline:.65rem;font-size:.75rem}& .clear-btn{color:hsl(var(--danger))}& .history-col-headers{background:hsl(var(--surface-muted));grid-template-columns:1.75rem minmax(0,1fr) minmax(4.5rem,auto) minmax(4.5rem,auto);gap:.75rem;padding:.75rem 1.5rem;display:none}& .history-col-headers.visible{display:grid}& .col-header{color:hsl(var(--ink-soft));font-size:.7rem}& .col-header.right{text-align:right}& .empty-state{background:0 0;border:0;border-radius:0;padding:3rem 1.5rem 3.5rem}& .empty-icon{background:hsl(var(--brand-soft));width:3rem;height:3rem;color:hsl(var(--brand));border-radius:1rem;place-items:center;margin:0 auto 1rem;display:grid}& .empty-text{color:hsl(var(--ink-soft));text-align:center;margin:0;font-size:.875rem;line-height:1.8}& .history-list{margin:0;padding:0;list-style:none}& .history-item{border-top:1px solid hsl(var(--line) / .6);grid-template-columns:1.75rem minmax(0,1fr) minmax(4.5rem,auto) minmax(4.5rem,auto);align-items:center;gap:.75rem;padding:1rem 1.5rem;display:grid}& .item-index{background:hsl(var(--surface-muted));width:1.75rem;height:1.75rem;color:hsl(var(--ink-muted));font:.6875rem var(--font-mono);border-radius:50%;place-items:center;display:grid}& .item-index.newest{color:hsl(var(--brand));background:hsl(var(--brand-soft))}& .item-time-col,& .item-dur-col,& .item-freq-col{gap:.35rem;min-width:0;display:grid}& .item-dur-col,& .item-freq-col{text-align:right}& .item-clock{white-space:nowrap;font-size:.875rem;font-weight:500}& .item-relative,& .item-col-label{color:hsl(var(--ink-muted));font-size:.6875rem}& .item-dur,& .item-freq{font:.9375rem var(--font-mono);color:hsl(var(--ink));font-variant-numeric:tabular-nums}& .history-guide{padding:.25rem 1.5rem}& .history-guide h3{color:hsl(var(--ink));margin:0 0 .75rem;font-size:.875rem;font-weight:500}& .history-guide dl{grid-template-columns:auto 1fr;gap:.5rem .75rem;margin:0;font-size:.75rem;line-height:1.6;display:grid}& .history-guide dt{color:hsl(var(--ink));font-weight:500}& .history-guide dd{color:hsl(var(--ink-soft));margin:0}& .history-guide a{min-height:2.75rem;color:hsl(var(--brand));align-items:center;margin-top:.5rem;font-size:.75rem;display:inline-flex}& .alert-banner{align-items:center;gap:1rem;margin-bottom:1rem;display:none}& .alert-banner.visible{display:flex}& .alert-title{font-size:1rem;font-weight:600}& .alert-sub{margin-top:.25rem;font-size:.875rem;line-height:1.5}@media (width<=56rem){& .app-grid{grid-template-columns:minmax(0,1fr)}& .app-intro{gap:.75rem;display:grid}& .left-panel{padding:1.25rem}& .timer-area{padding-block:1.75rem}& .main-btn{width:12rem;height:12rem}& .pulse-ring{width:13rem}& .pulse-ring-2{width:14rem}& .history-guide{padding-inline:.5rem}}@media (width<=30rem){& .page-wrapper{padding-top:1.25rem}& .app-intro{margin-bottom:1rem}& .app-title{font-size:1.75rem}& .app-description{font-size:.8125rem}& .session-title{font-size:.9375rem}& .session-helper{font-size:.75rem}& .session-status{font-size:.65rem}& .stat-card{padding-inline:.25rem}& .stat-value{font-size:1.125rem}& .history-card-header{padding:1.1rem}& .history-col-headers.visible{display:none}& .history-item{grid-template-columns:1.75rem 1fr 1fr;gap:.75rem;padding:1rem 1.1rem}& .item-time-col{flex-wrap:wrap;grid-column:2/-1;justify-content:space-between;align-items:baseline;display:flex}& .item-dur-col{text-align:left;grid-column:2}& .item-freq-col{grid-column:3}}@media (prefers-reduced-motion:reduce){& .pulse-ring{animation:none!important}}}@keyframes timer-breathe{50%{opacity:.45;transform:scale(1.025)}}