@layer components{.db{--db-soft:color-mix(in oklab, var(--color-surface-alt) 55%, var(--color-surface));--db-line:var(--color-border-strong);inline-size:100%;max-inline-size:34rem;margin-inline:auto;container:db/inline-size}.db h2{font-size:var(--text-2);margin-block-end:.75rem;line-height:1.2}.db h3{font-size:var(--text-1);margin-block:1.75rem .6rem;line-height:1.25}.db p{max-inline-size:none}.db .wide{inline-size:100%}.db-screen{display:none}.db-screen.is-active{display:block}.db-lead{color:var(--color-text-secondary)}.db-scale{gap:.5rem;margin-block:1.1rem .25rem;display:grid}.db-option{min-block-size:var(--tap);border:2px solid var(--db-line);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;align-items:center;gap:.75rem;padding:.55rem 1rem;font-weight:600;line-height:1.25;display:flex;position:relative}.db-option input{opacity:0;block-size:1px;inline-size:1px;margin:0;position:absolute;inset-block-start:50%;inset-inline-start:50%}.db-option:has(input:checked){background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}.db-option:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@media (hover:hover){.db-option:hover{border-color:var(--color-primary)}}.db-face{font-size:1.4rem;line-height:1}@container db (width>=32rem){.db-scale{grid-template-columns:repeat(5,1fr)}.db-option{text-align:center;flex-direction:column;justify-content:center;gap:.3rem;padding:.8rem .35rem;font-size:.88rem}}.db-chips{flex-wrap:wrap;gap:.5rem;margin-block-start:.9rem;display:flex}.db-chip{min-block-size:var(--tap);border:2px solid var(--db-line);border-radius:var(--pill);background:var(--color-surface);color:var(--color-text);cursor:pointer;touch-action:manipulation;padding:.5rem 1rem;font-weight:600;line-height:1.2}.db-chip[aria-pressed=true]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-on-primary)}@media (hover:hover){.db-chip:hover{border-color:var(--color-primary)}}.db-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-block-start:1.6rem;display:flex}.db-prep{counter-reset:prep;gap:.5rem;margin-block:1.1rem 1.25rem;display:grid}.db-prep li{counter-increment:prep;background:var(--db-soft);border-radius:var(--radius);align-items:flex-start;gap:.8rem;padding:.75rem .9rem;display:flex}.db-prep li:before{content:counter(prep);background:var(--color-surface);block-size:1.7rem;inline-size:1.7rem;color:var(--color-primary);border-radius:50%;flex:none;place-items:center;font-size:.9rem;font-weight:700;display:grid}.db-row{border-block-start:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1rem;padding-block:.85rem;display:flex}.db-row:first-child{border-block-start:0}.db-row-text{flex:14rem}.db-row-label{color:var(--color-primary);font-weight:700;display:block}.db-row-sub{color:var(--color-text-secondary);font-size:.92rem;display:block}.db-seg{border-radius:var(--pill);background:var(--db-soft);flex:none;gap:.25rem;padding:.25rem;display:inline-flex}.db-seg label{min-block-size:var(--tap);border-radius:var(--pill);cursor:pointer;justify-content:center;align-items:center;min-inline-size:4rem;padding:.4rem .9rem;font-size:.95rem;font-weight:600;display:inline-flex;position:relative}.db-seg input{opacity:0;block-size:1px;inline-size:1px;margin:0;position:absolute;inset-block-start:50%;inset-inline-start:50%}.db-seg label:has(input:checked){background:var(--color-primary);color:var(--color-text-on-primary)}.db-seg label:has(input:focus-visible){outline:3px solid var(--color-accent);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}.db details{border-block-start:1px solid var(--color-border);margin-block-start:.5rem}.db details:last-of-type{border-block-end:1px solid var(--color-border)}.db summary{min-block-size:var(--tap);cursor:pointer;color:var(--color-primary);justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem;font-weight:700;list-style:none;display:flex}.db summary::-webkit-details-marker{display:none}.db summary:after{content:"+";font-size:1.35rem;line-height:1}.db details[open] summary:after{content:"–"}.db details :is(p,li){color:var(--color-text-secondary);font-size:.95rem}.db details p{margin-block-end:.75rem}.db details ul{gap:.5rem;margin-block-end:.75rem;padding-inline-start:1.2rem;list-style:outside;display:grid}.db-visual{max-inline-size:26rem;margin-inline:auto}.db-visual svg{block-size:auto;inline-size:100%;overflow:visible}.db-stop-halo-in{stop-color:color-mix(in oklab, var(--color-secondary) 24%, var(--color-surface))}.db-stop-halo-mid{stop-color:color-mix(in oklab, var(--color-secondary) 12%, var(--color-surface))}.db-stop-halo-out{stop-color:color-mix(in oklab, var(--color-secondary) 12%, var(--color-surface));stop-opacity:0}.db-stop-body{stop-color:color-mix(in oklab, var(--color-surface-alt) 40%, var(--color-surface))}.db-stop-arm{stop-color:color-mix(in oklab, var(--color-surface-alt) 25%, var(--color-surface))}.db-stop-white{stop-color:var(--color-surface)}.db-stop-tide-top{stop-color:color-mix(in oklab, var(--color-secondary) 45%, var(--color-surface))}.db-stop-tide-mid{stop-color:var(--color-secondary)}.db-stop-tide-low{stop-color:var(--color-secondary-hover)}.db-halo{fill:url(#db-halo-fill);opacity:.95;transition:opacity .6s}.db-visual.at-rest .db-halo{opacity:.6}.db-chair{fill:var(--color-surface-alt)}.db-body{fill:url(#db-body-fill);stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linejoin:round}.db-limb{fill:color-mix(in oklab, var(--color-surface-alt) 45%, var(--color-surface));stroke:var(--color-border-strong);stroke-width:1.5px}.db-arm{fill:url(#db-arm-fill);stroke:var(--color-border-strong);stroke-width:1.5px}.db-tide{fill:url(#db-tide-fill)}.db-wave-crest{fill:none;stroke:#fff9;stroke-width:2px;stroke-linecap:round}.db-hand{fill:var(--color-border-strong);stroke:color-mix(in oklab, var(--color-border-strong) 70%, var(--color-text-secondary));stroke-width:1.5px;transition:fill .4s,stroke .4s}.db-hand.far{fill:color-mix(in oklab, var(--color-border-strong) 85%, var(--color-text-secondary))}.db-leader{stroke:var(--color-border-strong);stroke-width:1.5px;stroke-linecap:round;transition:stroke .4s}.db-zone-label{font-family:var(--font-body);fill:var(--color-text-secondary);font-size:17px;font-weight:600;transition:fill .4s}.db-visual:is(.at-belly,.at-chest) .db-hand.belly,.db-visual.at-chest .db-hand.chest{fill:var(--color-secondary);stroke:var(--color-secondary-hover)}.db-visual:is(.at-belly,.at-chest) .db-leader.belly,.db-visual.at-chest .db-leader.chest{stroke:var(--color-secondary)}.db-visual:is(.at-belly,.at-chest) .db-zone-label.belly,.db-visual.at-chest .db-zone-label.chest{fill:var(--color-primary)}.db-stepper{grid-template-columns:repeat(4,1fr);gap:.35rem;max-inline-size:23rem;margin:.5rem auto 0;display:grid}.db-stepper span{border-radius:var(--pill);background:var(--db-soft);color:var(--color-text);text-align:center;padding:.4rem .2rem;font-size:.82rem;font-weight:700;line-height:1.2;transition:background .3s,color .3s}.db-stepper span.is-on{background:var(--color-primary);color:var(--color-text-on-primary)}.db-stepper span.is-on[data-stage=rest]{background:var(--color-secondary-hover)}.db-cue{text-align:center;min-block-size:7.5rem;margin-block-start:1rem}.db-cue-stage{font-family:var(--font-display);font-size:var(--text-2);color:var(--color-primary);line-height:1.2}.db-cue-count{color:var(--color-primary);font-variant-numeric:tabular-nums;margin-block-start:.2rem;font-size:2.1rem;font-weight:800;line-height:1.15}.db-cue-hint{color:var(--color-text-secondary);margin-block-start:.35rem}.db-progress{margin-block-start:1rem}.db-progress-bar{border-radius:var(--pill);background:var(--db-soft);block-size:8px;overflow:hidden}.db-progress-fill{border-radius:var(--pill);background:var(--color-secondary);block-size:100%;inline-size:0;transition:inline-size .3s linear}.db-meta{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;margin-block-start:.4rem;font-size:.88rem;display:flex}.db-session-actions{justify-content:center}.db-dizzy{text-align:center;color:var(--color-text-secondary);margin-block-start:.75rem;font-size:.92rem}.db-link{min-block-size:var(--tap);color:var(--color-link);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;align-items:center;padding:0 .15rem;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}.db-notice{border-radius:var(--radius);background:var(--db-soft);margin-block-start:.5rem;padding:.75rem .9rem;font-size:.95rem;display:none}.db-notice.is-on{display:block}.db-compare{border-radius:var(--radius);background:var(--db-soft);text-align:center;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;margin-block:1rem .75rem;padding:1rem;display:grid}.db-compare .db-face{margin-block-end:.2rem;font-size:1.9rem;display:block}.db-compare small{color:var(--color-text-secondary);font-size:.85rem;display:block}.db-compare p>span:last-child{color:var(--color-primary);font-weight:700}.db-arrow{color:var(--color-primary);font-size:1.4rem}.db-tip{border-inline-start:4px solid var(--color-secondary);color:var(--color-text-secondary);margin-block:1rem;padding-inline-start:.9rem}.db-cta{border-radius:var(--radius);background:var(--color-primary);color:var(--color-text-on-primary-soft);margin-block-start:1.5rem;padding:1.4rem 1.25rem}.db-cta h3{color:var(--color-text-on-primary);margin-block:0 .6rem}.db-cta p{margin-block-end:1rem;font-size:.95rem}.db-cta .btn{inline-size:100%}}@layer motion{@media (prefers-reduced-motion:no-preference){.db-wave{animation:7s linear infinite db-drift}}@keyframes db-drift{0%{transform:translate(0)}to{transform:translate(-160px)}}@media (prefers-reduced-motion:reduce){.db-halo,.db-hand,.db-leader,.db-zone-label,.db-stepper span,.db-progress-fill{transition:none}}}