.flow-page{min-height:85vh;padding:135px 20px 90px;color:#f4eee0;background:radial-gradient(ellipse at 35% 25%,#173d52 0,#0b1d2d 38%,#070e18 78%);font-family:inherit}
.flow-shell{max-width:1240px;margin:auto}.flow-intro{max-width:760px;margin-bottom:34px}.flow-eyebrow{font-size:12px;letter-spacing:.19em;color:#e7c47b;font-weight:700}.flow-intro h1{font-size:clamp(36px,5vw,72px);line-height:1.04;color:#fff;margin:13px 0}.flow-intro>p{color:#c5d4dc;line-height:1.7}.flow-alert{padding:12px 16px;border:1px solid #af8d56;border-radius:12px;font-size:13px;background:#252d34}
.flow-studio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:42px;align-items:center;padding:30px;border:1px solid #54708388;background:#081b2bb3;box-shadow:0 30px 80px #0007;border-radius:28px}
.flow-stage{position:relative;max-width:610px;width:100%;aspect-ratio:1;margin:auto;display:grid;place-items:center}.flow-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#e3bd5933 5%,#2b7f9b10 55%,transparent 70%);filter:blur(12px)}
.flow-pan{position:relative;width:85%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 33% 29%,#637d8c 0%,#294454 24%,#152939 56%,#081621 86%);border:8px solid #b78c53;box-shadow:inset 0 0 0 7px #233b4b,inset 12px 15px 35px #d9ecff22,inset -17px -20px 35px #000b,0 0 0 1px #e0b975,0 25px 60px #000a}
.flow-note{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:18%;aspect-ratio:1;border-radius:50%;border:1px solid #d4aa6e88;background:radial-gradient(circle at 30% 25%,#8aa9b8,#325264 40%,#112b3a 78%);color:#ffedc7;font-size:clamp(12px,1.5vw,18px);font-weight:800;box-shadow:inset 0 3px 8px #dce8ee55,0 5px 17px #0008;cursor:pointer;touch-action:manipulation;user-select:none;transition:box-shadow .13s,background .13s}
.flow-note.flow-ding{width:25%;background:radial-gradient(circle at 31% 28%,#c5af86,#80653e 43%,#392e25 83%);border-color:#eed7a7}.flow-note:hover,.flow-note:focus-visible,.flow-note.is-hit{outline:2px solid #f9d58c;outline-offset:2px;box-shadow:0 0 30px #ffe0a77c,inset 0 3px 8px #eaf4fc77}
.flow-panel h2{font-size:clamp(25px,2.8vw,38px);color:#fff;margin:12px 0}.flow-panel p{color:#b8cbd3;line-height:1.75}.flow-stat{display:flex;gap:14px;align-items:center;margin:28px 0;border-block:1px solid #66808c55;padding:18px 0}.flow-stat strong{font-size:48px;color:#e9c782}.flow-stat span{color:#c4d2dc}.flow-panel label{display:flex;justify-content:space-between;color:#e7d7ba;font-weight:700}.flow-panel input{width:100%;accent-color:#e5bd74;margin:15px 0 26px}.flow-control{display:flex;gap:11px;flex-wrap:wrap}.flow-primary,.flow-secondary{padding:13px 23px;border-radius:11px;font-weight:800;cursor:pointer}.flow-primary{background:#e9c47b;color:#0c1924;border:0}.flow-secondary{background:transparent;border:1px solid #8499a8;color:#f6f3ec}.flow-primary:focus-visible,.flow-secondary:focus-visible{outline:3px solid #e9c47b;outline-offset:3px}.flow-status{min-height:30px;color:#eecf92;margin-top:22px}.flow-hint{font-size:13px}
@media(max-width:900px){.flow-studio{grid-template-columns:1fr;padding:20px;gap:18px}.flow-page{padding-top:110px}.flow-stage{max-width:480px}.flow-note{font-size:clamp(11px,2vw,17px)}}
@media(max-width:450px){.flow-page{padding-inline:10px}.flow-studio{padding:11px}.flow-note{width:19%;font-size:11px}.flow-note.flow-ding{width:26%}}
@media(prefers-reduced-motion:reduce){.flow-note{transition:none}}


/* Flow Lab: scoped rhythm practice controls. */
.flow-training{margin:28px 0 22px;padding:22px 0;border-top:1px solid #66808c55;border-bottom:1px solid #66808c55}
.flow-training h3{font-size:25px;color:#fff;margin:12px 0}
.flow-training-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.flow-training-grid>div{display:flex;flex-direction:column;gap:6px;border:1px solid #6f8f9b55;background:#102b3ba6;border-radius:12px;padding:12px}
.flow-training-grid strong{color:#f9d89e;font-size:24px;line-height:1.2}
.flow-mini-label{font-size:10px;letter-spacing:.12em;color:#c6d4db}
.flow-training select{width:100%;padding:9px 7px;border-radius:8px;border:1px solid #8499a8;color:#fff;background:#17394b}
.flow-training button:disabled{opacity:.45;cursor:not-allowed}
.flow-result{min-height:24px;color:#f6d492!important;font-weight:700}
.flow-calibration{border:1px solid #7d94875c;border-radius:13px;margin-top:20px;padding:12px 15px;color:#e4e8e9}
.flow-calibration summary{cursor:pointer;font-weight:750;color:#e0c483}
.flow-calibration summary:focus-visible{outline:2px solid #e6c17c;outline-offset:3px}
.flow-calibration[open] summary{margin-bottom:12px}
.flow-note.flow-cue{outline:3px solid #f1d18d;outline-offset:3px;box-shadow:0 0 40px #ffe49ea8,inset 0 3px 8px #eaf4fc77}
@media(max-width:500px){.flow-training{padding-inline:2px}.flow-training-grid strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.flow-note.flow-cue{transition:none}}


/* Provisional server-attempt opt-in, independently keyboard-accessible. */
.flow-server-option{display:flex;flex-direction:column;gap:9px;padding:15px;margin:18px 0;border:1px solid #a9cba374;border-radius:12px;background:#183a35a8}
.flow-server-option label{color:#f5eee0;font-size:14px;font-weight:700}
.flow-server-option label:first-child{display:flex;gap:10px;align-items:center;cursor:pointer}
.flow-server-option input[type=checkbox]{accent-color:#ecd48d;width:19px;height:19px}
.flow-server-option select{width:100%;color:#fff;background:#153b43;border:1px solid #8fa5a0;padding:11px;border-radius:8px}
.flow-server-option select:disabled,.flow-server-option input:disabled{opacity:.55}
.flow-server-option .flow-mini-label{line-height:1.55;letter-spacing:normal;font-size:12px}
.flow-history{margin:20px 0;padding:14px;border:1px solid #799a977a;border-radius:12px}
.flow-history summary{cursor:pointer;color:#e6d1a3;font-weight:700}
.flow-history button{margin:12px 0}
.flow-history ol{margin:12px 0;padding-inline-start:23px;line-height:1.9;color:#e9f2ee}
.flow-hint a{color:#f0d397;text-decoration:underline}