.animal-flow-premium{
  --flow-copper:#d69b67;
  --flow-copper-hi:#f0c39b;
  --flow-ink:#05090b;
  --flow-panel:rgba(12,19,23,.9);
  background:
    radial-gradient(circle at 78% -4%,rgba(214,155,103,.18),transparent 30rem),
    radial-gradient(circle at 12% 34%,rgba(116,151,137,.08),transparent 24rem),
    linear-gradient(180deg,#0b1216 0%,#070c0f 48%,#040708 100%);
}
.animal-flow-premium .shell{width:min(920px,100%)}
.animal-flow-premium .top{
  margin-bottom:18px;
  border-bottom:1px solid rgba(240,195,155,.08);
  background:linear-gradient(180deg,rgba(5,9,11,.94),rgba(5,9,11,.68),transparent);
}
.animal-flow-premium .brand{letter-spacing:.075em}
.animal-flow-premium .mark{
  border-color:rgba(240,195,155,.34);
  background:linear-gradient(145deg,#2a1d14,#131210);
  box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);
}
.animal-flow-premium .hero{
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:34px;
  border-color:rgba(240,195,155,.2);
  background:
    linear-gradient(180deg,transparent 0%,rgba(3,7,9,.2) 35%,rgba(3,7,9,.78) 100%),
    radial-gradient(circle at 78% 18%,rgba(214,155,103,.24),transparent 21rem),
    linear-gradient(135deg,#182125,#0d1418 58%,#090d0f);
  box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.045);
}
.animal-flow-premium .hero:before{
  content:"MOBILITY · CONTROL · FLOW";
  position:absolute;
  top:28px;
  right:30px;
  color:rgba(240,195,155,.7);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.animal-flow-premium .hero h1{max-width:660px;font-size:clamp(44px,8vw,72px)}
.animal-flow-premium .hero p{max-width:560px;font-size:15px;color:#d1d8d4}

.animal-flow-premium .flow-builder{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:16px;
  padding:18px;
  border-color:rgba(240,195,155,.16);
  background:linear-gradient(145deg,rgba(17,25,29,.96),rgba(8,13,16,.98));
  box-shadow:0 18px 52px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);
}
.animal-flow-premium .flow-duration-label{letter-spacing:.03em;color:#d6ddd8}
.animal-flow-premium .flow-duration-label:before{
  content:"SESSION LENGTH";
  color:var(--flow-copper-hi);
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
}
.animal-flow-premium .flow-builder .select{
  min-height:54px;
  border-color:rgba(240,195,155,.18);
  background:linear-gradient(180deg,#0b1317,#080e11);
  color:#f7f3ef;
  font-weight:850;
}
.animal-flow-premium .flow-build{min-width:180px;min-height:54px;border-radius:15px}

.animal-flow-premium .flow-player{
  position:relative;
  overflow:hidden;
  min-height:360px;
  padding:28px;
  border-color:rgba(240,195,155,.22);
  background:
    radial-gradient(circle at 86% 12%,rgba(214,155,103,.17),transparent 18rem),
    linear-gradient(145deg,rgba(16,24,28,.98),rgba(7,12,15,.99));
  box-shadow:0 30px 82px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.035);
}
.animal-flow-premium .flow-player:before{
  content:"LIVE SESSION";
  position:absolute;
  right:26px;
  bottom:22px;
  color:rgba(240,195,155,.16);
  font-size:46px;
  font-weight:1000;
  letter-spacing:-.06em;
  pointer-events:none;
}
.animal-flow-premium .flow-player-head{align-items:flex-start;position:relative;z-index:1}
.animal-flow-premium .flow-player h2{
  margin:8px 0 0;
  max-width:620px;
  font-size:clamp(28px,5vw,44px);
  line-height:1;
  letter-spacing:-.045em;
}
.animal-flow-premium .flow-player .pill{
  min-width:58px;
  justify-content:center;
  border-color:rgba(240,195,155,.28);
  background:rgba(214,155,103,.1);
  color:var(--flow-copper-hi);
}
.animal-flow-premium .flow-clock{
  margin:42px 0 6px;
  font-variant-numeric:tabular-nums;
  font-size:clamp(72px,15vw,132px);
  line-height:.82;
  letter-spacing:-.075em;
  color:#fff7f0;
  text-shadow:0 12px 46px rgba(214,155,103,.12);
}
.animal-flow-premium .flow-cue{
  max-width:640px;
  min-height:46px;
  margin:18px 0 28px;
  color:#c7d0ca;
  font-size:15px;
  line-height:1.6;
}

.animal-flow-premium .flow-controls{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:64px minmax(180px,1fr) 64px;
  align-items:center;
  gap:10px;
  width:min(520px,100%);
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
}
.animal-flow-premium .flow-controls .btn{min-height:56px;border-radius:17px}
.animal-flow-premium .flow-toggle{
  background:linear-gradient(180deg,#f2c9a5,#d59a66);
  box-shadow:0 14px 34px rgba(214,155,103,.2),inset 0 1px 0 rgba(255,255,255,.3);
}
.animal-flow-premium .flow-skip{
  width:64px;
  padding:0;
  border-color:rgba(240,195,155,.16);
  background:rgba(255,255,255,.035);
  font-size:20px;
}
.animal-flow-premium .flow-controls .btn:not(:disabled):active,
.animal-flow-premium .flow-build:active{transform:translateY(1px) scale(.985)}
.animal-flow-premium .flow-controls .btn:disabled{
  opacity:.28;
  filter:saturate(.45);
  box-shadow:none;
}

.animal-flow-premium .flow-builder,
.animal-flow-premium .flow-player,
.animal-flow-premium .flow-controls .btn,
.animal-flow-premium .flow-build,
.animal-flow-premium .select{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
@media(hover:hover){
  .animal-flow-premium .flow-builder:hover,
  .animal-flow-premium .flow-player:hover{border-color:rgba(240,195,155,.3)}
  .animal-flow-premium .flow-build:hover,
  .animal-flow-premium .flow-toggle:hover{box-shadow:0 17px 40px rgba(214,155,103,.27),inset 0 1px 0 rgba(255,255,255,.32)}
  .animal-flow-premium .flow-skip:not(:disabled):hover{background:rgba(240,195,155,.08);border-color:rgba(240,195,155,.3)}
}
.animal-flow-premium .flow-builder .select:focus-visible,
.animal-flow-premium .flow-controls .btn:focus-visible,
.animal-flow-premium .flow-build:focus-visible{
  outline:2px solid var(--flow-copper-hi);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(214,155,103,.1);
}
.animal-flow-premium ::selection{background:rgba(214,155,103,.32);color:#fff}

.animal-flow-premium .flow-build,
.animal-flow-premium .flow-controls .btn,
.animal-flow-premium .flow-builder .select{touch-action:manipulation}
@media(max-width:700px){
  .animal-flow-premium .shell{padding-bottom:max(44px,calc(env(safe-area-inset-bottom) + 30px))}
  .animal-flow-premium .hero{min-height:232px;padding:24px}
  .animal-flow-premium .hero:before{top:20px;right:22px;font-size:10px}
  .animal-flow-premium .hero h1{font-size:clamp(42px,13vw,58px)}
  .animal-flow-premium .flow-builder{grid-template-columns:1fr;padding:16px}
  .animal-flow-premium .flow-build{width:100%}
  .animal-flow-premium .flow-player{min-height:350px;padding:22px}
  .animal-flow-premium .flow-player-head{flex-direction:row;align-items:flex-start}
  .animal-flow-premium .flow-clock{margin-top:38px;font-size:clamp(70px,22vw,104px)}
  .animal-flow-premium .flow-controls{grid-template-columns:58px minmax(0,1fr) 58px;width:100%}
  .animal-flow-premium .flow-skip{width:58px}
}
@media(max-width:390px){
  .animal-flow-premium .hero{min-height:214px;padding:20px}
  .animal-flow-premium .hero:before{position:static;margin-bottom:auto;display:block}
  .animal-flow-premium .flow-player{padding:18px;border-radius:20px}
  .animal-flow-premium .flow-player:before{font-size:34px;right:16px;bottom:18px}
  .animal-flow-premium .flow-clock{font-size:clamp(66px,24vw,92px)}
  .animal-flow-premium .flow-cue{font-size:14px;margin-bottom:22px}
  .animal-flow-premium .flow-controls{grid-template-columns:54px minmax(0,1fr) 54px;gap:8px}
  .animal-flow-premium .flow-skip{width:54px}
}
@media(prefers-reduced-motion:reduce){
  .animal-flow-premium .flow-builder,
  .animal-flow-premium .flow-player,
  .animal-flow-premium .flow-controls .btn,
  .animal-flow-premium .flow-build,
  .animal-flow-premium .select{transition:none!important}
}
@media(prefers-contrast:more){
  .animal-flow-premium .hero,
  .animal-flow-premium .flow-builder,
  .animal-flow-premium .flow-player{border-width:2px;border-color:rgba(255,255,255,.48)}
  .animal-flow-premium .flow-cue{color:#f0f4f1}
  .animal-flow-premium .flow-player .pill{border-width:2px}
}


/* ANIMAL FLOW DESKTOP WORKSPACE X9 — wide live-session composition, mobile flow unchanged */
@media(min-width:1180px){
  .animal-flow-premium .shell{width:min(1180px,calc(100% - 180px));padding-bottom:56px}
  .animal-flow-premium .hero{min-height:300px;padding:38px}
  .animal-flow-premium .flow-builder{padding:20px 22px}
  .animal-flow-premium .flow-player{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px 28px;align-items:center;min-height:430px;padding:34px}
  .animal-flow-premium .flow-player-head{grid-column:1;grid-row:1}
  .animal-flow-premium .flow-cue{grid-column:1;grid-row:2;margin:0;align-self:start}
  .animal-flow-premium .flow-clock{grid-column:2;grid-row:1/span 2;margin:0;display:grid;place-items:center;align-self:stretch;font-size:clamp(86px,8vw,126px)}
  .animal-flow-premium .flow-controls{grid-column:1/-1;grid-row:3;width:min(620px,100%);margin-top:10px}
}


/* ANIMAL FLOW ENGINE MEDIA — approved exact stills + validated next transition. */
.animal-flow-premium .flow-media{display:grid;grid-template-columns:minmax(180px,.82fr) minmax(0,1fr);gap:16px;align-items:stretch;margin:18px 0 24px}.animal-flow-premium .flow-media>img{display:block;width:100%;height:100%;min-height:210px;max-height:290px;object-fit:contain;border:1px solid rgba(240,195,155,.16);border-radius:18px;background:linear-gradient(145deg,#0b1114,#070b0d);box-shadow:0 18px 46px rgba(0,0,0,.28)}.animal-flow-premium .flow-media-copy{display:flex;min-width:0;flex-direction:column;justify-content:center}.animal-flow-premium .flow-media .flow-cue{min-height:0;margin:0 0 12px}.animal-flow-premium .flow-transition{padding:13px 14px;border:1px solid rgba(240,195,155,.2);border-radius:15px;background:rgba(214,155,103,.065)}.animal-flow-premium .flow-transition small{display:block;color:var(--flow-copper-hi);font-size:10px;font-weight:950;letter-spacing:.12em}.animal-flow-premium .flow-transition strong{display:block;margin-top:5px;color:#f7f3ef;font-size:15px}.animal-flow-premium .flow-transition p{margin:6px 0 0;color:#aeb9b3;font-size:12px;line-height:1.45}@media(max-width:700px){.animal-flow-premium .flow-media{grid-template-columns:1fr;margin-top:14px}.animal-flow-premium .flow-media>img{min-height:200px;max-height:260px}}@media(min-width:1180px){.animal-flow-premium .flow-media{grid-column:1;grid-row:2;margin:0}.animal-flow-premium .flow-media>img{min-height:230px}.animal-flow-premium .flow-cue{grid-column:auto;grid-row:auto;align-self:auto}.animal-flow-premium .flow-clock{grid-column:2;grid-row:1/span 2}.animal-flow-premium .flow-controls{grid-column:1/-1;grid-row:3}}


/* ANIMAL FLOW LEVEL + TEMPO — remembered locally, Flow tempo only. */
.animal-flow-premium .flow-preferences{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;padding-top:3px}.animal-flow-premium .flow-preferences>div{min-width:0}.animal-flow-premium .flow-preferences small{display:block;margin-bottom:7px;color:var(--flow-copper-hi);font-size:10px;font-weight:950;letter-spacing:.12em}.animal-flow-premium .flow-level-grid,.animal-flow-premium .flow-tempo-grid{display:grid;gap:7px}.animal-flow-premium .flow-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.animal-flow-premium .flow-tempo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.animal-flow-premium .flow-level-grid button,.animal-flow-premium .flow-tempo-grid button{min-height:46px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#0b1215;color:#9ea9a3;font:inherit;font-size:11px;font-weight:900;cursor:pointer;touch-action:manipulation}.animal-flow-premium .flow-level-grid button[aria-pressed="true"],.animal-flow-premium .flow-tempo-grid button[aria-pressed="true"]{border-color:rgba(240,195,155,.48);background:rgba(214,155,103,.12);color:var(--flow-copper-hi);box-shadow:inset 0 0 0 1px rgba(240,195,155,.05)}.animal-flow-premium .flow-level-grid button:focus-visible,.animal-flow-premium .flow-tempo-grid button:focus-visible{outline:2px solid var(--flow-copper-hi);outline-offset:2px}@media(max-width:700px){.animal-flow-premium .flow-preferences{grid-template-columns:1fr}.animal-flow-premium .flow-tempo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:390px){.animal-flow-premium .flow-tempo-grid{grid-template-columns:1fr}.animal-flow-premium .flow-level-grid button,.animal-flow-premium .flow-tempo-grid button{min-height:48px}}


/* HANDS-FREE FLOW — final five seconds prepare the next validated transition. */
.animal-flow-premium .flow-player.is-transition .flow-transition{border-color:rgba(240,195,155,.58);background:rgba(214,155,103,.14);box-shadow:0 0 0 1px rgba(240,195,155,.08),0 14px 34px rgba(0,0,0,.2)}.animal-flow-premium .flow-player.is-transition .flow-transition strong{color:var(--flow-copper-hi)}@media(prefers-reduced-motion:reduce){.animal-flow-premium .flow-player.is-transition .flow-transition{box-shadow:none}}


/* ANIMAL FLOW PROGRESSION — local feedback only, read-only recommendations. */
.animal-flow-premium .flow-progress{grid-column:1/-1;padding:12px 14px;border:1px solid rgba(240,195,155,.16);border-radius:15px;background:rgba(214,155,103,.055)}.animal-flow-premium .flow-progress small{display:block;color:var(--flow-copper-hi);font-size:10px;font-weight:950;letter-spacing:.12em}.animal-flow-premium .flow-progress strong{display:block;margin-top:5px;color:#f7f3ef;font-size:15px}.animal-flow-premium .flow-progress p{margin:5px 0 0;color:#9fa9a4;font-size:12px;line-height:1.5}.animal-flow-premium .flow-feedback{margin-top:18px;padding:22px;border-color:rgba(240,195,155,.2);background:linear-gradient(145deg,rgba(16,24,28,.98),rgba(7,12,15,.99));box-shadow:0 22px 58px rgba(0,0,0,.3)}.animal-flow-premium .flow-feedback h2{margin:7px 0 8px;font-size:24px}.animal-flow-premium .flow-feedback>p{margin:0;color:#aeb8b2;font-size:13px;line-height:1.5}.animal-flow-premium .flow-feedback-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.animal-flow-premium .flow-feedback-grid button{min-height:48px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#0b1215;color:#d6ddd8;font:inherit;font-size:12px;font-weight:900;cursor:pointer}.animal-flow-premium .flow-feedback-grid button:hover,.animal-flow-premium .flow-feedback-grid button:focus-visible{border-color:rgba(240,195,155,.46);background:rgba(214,155,103,.1);color:var(--flow-copper-hi);outline:none}.animal-flow-premium .flow-feedback-grid button:focus-visible{box-shadow:0 0 0 2px #070c0f,0 0 0 4px var(--flow-copper-hi)}.animal-flow-premium .flow-feedback-state{min-height:18px;margin-top:10px;color:#99a59e;font-size:11px}.animal-flow-premium .flow-feedback[hidden]{display:none!important}@media(max-width:520px){.animal-flow-premium .flow-feedback-grid{grid-template-columns:1fr}.animal-flow-premium .flow-feedback-grid button{min-height:50px}}


/* ANIMAL FLOW REPLAY — exact local route only. */
.animal-flow-premium .flow-replay{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:18px 20px;border-color:rgba(240,195,155,.18);background:linear-gradient(145deg,rgba(16,24,28,.96),rgba(7,12,15,.98));box-shadow:0 18px 48px rgba(0,0,0,.26)}.animal-flow-premium .flow-replay>div{min-width:0}.animal-flow-premium .flow-replay strong{display:block;margin-top:5px;color:#f7f3ef;font-size:17px}.animal-flow-premium .flow-replay p{margin:5px 0 0;color:#9fa9a4;font-size:12px;line-height:1.45}.animal-flow-premium .flow-replay .btn{flex:0 0 auto;min-height:48px;white-space:nowrap}.animal-flow-premium .flow-replay[hidden]{display:none!important}@media(max-width:620px){.animal-flow-premium .flow-replay{align-items:stretch;flex-direction:column}.animal-flow-premium .flow-replay .btn{width:100%}}


/* ANIMAL FLOW ACTIVE RESUME — recent local checkpoint, never auto-start. */
.animal-flow-premium .flow-resume-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:18px;padding:18px 20px;border-color:rgba(240,195,155,.22);background:radial-gradient(circle at 100% 0,rgba(214,155,103,.1),transparent 16rem),linear-gradient(145deg,rgba(16,24,28,.98),rgba(7,12,15,.99));box-shadow:0 20px 54px rgba(0,0,0,.3)}.animal-flow-premium .flow-resume-card[hidden]{display:none!important}.animal-flow-premium .flow-resume-copy{min-width:0}.animal-flow-premium .flow-resume-copy strong{display:block;margin-top:5px;color:#f7f3ef;font-size:18px}.animal-flow-premium .flow-resume-copy p{margin:5px 0 0;color:#a6b0aa;font-size:12px;line-height:1.45}.animal-flow-premium .flow-resume-track{height:5px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}.animal-flow-premium .flow-resume-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b77a49,var(--flow-copper-hi));transition:width .2s ease}.animal-flow-premium .flow-resume-actions{display:flex;gap:8px}.animal-flow-premium .flow-resume-actions .btn{min-height:48px;white-space:nowrap}@media(max-width:680px){.animal-flow-premium .flow-resume-card{grid-template-columns:1fr}.animal-flow-premium .flow-resume-actions{display:grid;grid-template-columns:1fr 1fr}.animal-flow-premium .flow-resume-actions .btn{width:100%}}@media(max-width:390px){.animal-flow-premium .flow-resume-actions{grid-template-columns:1fr}}