/* toys.css
   'Try it' teaching toys inside readouts, plus the spill and pull identities of the DDI's two factors (loss of control, habitual checking) on the dashboard tile.
*/

/* ---- teaching toys ---- */
.is-toy{outline:2px dashed color-mix(in srgb,var(--fd-tint) 45%,transparent);outline-offset:-7px;}
.is-toy .fd-led.info{animation:fdBlink 1.2s ease-in-out infinite;}
.fd-card-icon svg{width:26px;opacity:.9;}
.fd-top .fd-card-icon{flex:0 0 auto;margin-right:2px;}
.fd-top:has(.fd-card-icon){justify-content:flex-start;}
.fd-top:has(.fd-card-icon) .fd-led{margin-left:auto;}
.fd-sublabel{display:block;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:0;color:var(--fd-dim);}
.toy-side{display:grid;gap:10px;align-content:start;min-width:0;}
.toy-copy{font-size:14.5px;line-height:1.45;font-weight:500;color:var(--fd-ink);}
.toy-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.toy-buttons button,.toy-chip{
  border:2px solid #cad3cd;border-radius:0;padding:8px 14px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--fd-ink);background:#fff;
  box-shadow:none;
  transition:border-color .15s ease,background .2s ease,color .2s ease;
}
.toy-buttons button:hover,.toy-chip:hover{border-color:#0f1a17;}
.toy-buttons button:active,.toy-chip:active{transform:translateY(1px);}
.toy-buttons button:disabled{opacity:.45;cursor:default;transform:none;}
.toy-buttons button.calm{background:#dce5df;}
.toy-toggle.is-on,.toy-chip[aria-pressed="true"]{background:#0f1a17;border-color:#0f1a17;color:#f1f3ee;}
.toy-chip.drain[aria-pressed="true"]{background:#f2b33d;border-color:#8a5e0e;color:#0f1a17;}
.toy-chips{display:flex;flex-wrap:wrap;gap:6px;}
.toy-slider{display:grid;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-dim);}
.toy-slider b{color:var(--fd-ink);}
.toy-slider input{width:100%;accent-color:#f2b33d;cursor:pointer;}
.toy-status{min-height:38px;font-size:13px;line-height:1.45;font-weight:650;color:var(--fd-dim);}
.toy-status.is-changing{animation:sartDetailIn .3s ease both;}
.toy-stress,.toy-mood,.toy-lonely,.toy-ladder,.toy-table{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;}
/* stress bucket */
.bucket{position:relative;width:130px;height:170px;margin:26px 22px 4px 10px;border:5px solid rgba(15,26,23,.72);border-top:0;border-radius:0 0 26px 26px;background:rgba(255,255,255,.65);}
.bucket-water{position:absolute;left:0;right:0;bottom:0;max-height:100%;border-radius:0 0 20px 20px;background:#a3c2b4;transition:height .6s cubic-bezier(.3,1.4,.5,1),background .3s;}
.bucket-water::before{content:"";position:absolute;left:0;right:0;top:-6px;height:10px;background:radial-gradient(circle at 10px 10px,transparent 8px,#a3c2b4 8.5px) 0 0/20px 12px repeat-x;animation:waveSlide 1.6s linear infinite;}
.toy-stress.is-over .bucket-water{background:#ffc966;}
.toy-stress.is-over .bucket-water::before{background:radial-gradient(circle at 10px 10px,transparent 8px,#ffc966 8.5px) 0 0/20px 12px repeat-x;}
.bucket-rim{position:absolute;left:-14px;right:-14px;height:0;border-top:3px dashed #f2b33d;transition:bottom .5s cubic-bezier(.3,1.4,.5,1);z-index:2;}
.bucket-rim em{position:absolute;right:0;bottom:3px;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a5e0e;white-space:nowrap;}
.bucket-chips i{position:absolute;top:-34px;z-index:3;padding:3px 9px;border-radius:0;background:#fff;box-shadow:inset 0 0 0 1px #d6ddd8;font-style:normal;font-size:11px;font-weight:700;white-space:nowrap;animation:chipDrop 1.4s ease-in forwards;}
.bucket-spill{position:absolute;right:-22px;top:-4px;width:14px;height:120px;display:none;}
.toy-stress.is-over .bucket-spill{display:block;}
.bucket-spill i{position:absolute;left:3px;top:0;width:8px;height:11px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#ffc966;animation:dropFall 1s ease-in infinite;}
.bucket-spill i:nth-child(2){animation-delay:.33s;left:0;}
.bucket-spill i:nth-child(3){animation-delay:.66s;left:6px;}
@keyframes waveSlide{to{background-position:20px 0;}}
@keyframes chipDrop{0%{opacity:0;transform:translateY(-10px);}20%{opacity:1;}100%{opacity:0;transform:translateY(120px) scale(.6);}}
@keyframes dropFall{0%{opacity:0;transform:translateY(0);}20%{opacity:1;}100%{opacity:0;transform:translateY(110px);}}
/* anxiety alarm */
.toy-alarm{gap:12px;}
.alarm-monitor{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 16px;border-radius:0;background:#0f1a17;color:#a3c2b4;transition:background .3s,color .3s;}
.alarm-line{height:60px;overflow:hidden;}
.alarm-line svg{width:200%;height:100%;display:block;will-change:transform;}
.alarm-readout{display:grid;text-align:right;}
.alarm-bpm{font-size:34px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;}
.alarm-readout small{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.75;}
.alarm-bell .dash-icon{color:inherit;}
.alarm-bell svg{width:34px;filter:none;}
.toy-alarm.is-ringing .alarm-monitor{background:#0f1a17;color:#ffc966;}
.toy-alarm.is-ringing .alarm-bell svg{animation:bellShake .25s linear infinite;}
@keyframes bellShake{25%{transform:rotate(-14deg);}75%{transform:rotate(14deg);}}
/* mood plant */
.plant{position:relative;width:150px;height:200px;filter:saturate(calc(.35 + var(--grow) * 1.1));transition:filter .6s;}
.plant-sun{position:absolute;top:0;right:4px;width:34px;height:34px;border-radius:50%;background:#a3c2b4;box-shadow:0 0 24px #a3c2b4;opacity:var(--grow);transition:opacity .6s;}
.plant-pot{position:absolute;bottom:0;left:35px;width:80px;height:46px;border-radius:6px 6px 18px 18px;background:#f2b33d;box-shadow:none;}
.plant-stem{position:absolute;bottom:42px;left:72px;width:6px;height:calc(var(--grow) * 120px + 14px);border-radius:3px;background:#8aa699;transform-origin:bottom center;transform:rotate(calc(var(--droop) * .45));transition:height .8s cubic-bezier(.3,1.4,.5,1),transform .8s ease;}
.leaf{position:absolute;width:32px;height:15px;border-radius:0 100% 0 100%;background:#8aa699;transform-origin:right center;transition:transform .8s ease;}
.leaf.l{right:4px;top:28%;transform:rotate(calc(-18deg + var(--droop)));}
.leaf.l2{right:4px;top:62%;transform:rotate(calc(-10deg + var(--droop)));}
.leaf.r,.leaf.r2{left:4px;transform-origin:left center;border-radius:100% 0 100% 0;}
.leaf.r{top:45%;transform:rotate(calc(18deg - var(--droop)));}
.leaf.r2{top:12%;transform:rotate(calc(10deg - var(--droop)));}
.plant-flower{position:absolute;top:-18px;left:-14px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#a3c2b4 0 28%,#f2b33d 30% 58%,transparent 60%);transform:scale(0);transition:transform .7s cubic-bezier(.3,1.6,.5,1);}
.toy-mood.is-bloom .plant-flower{transform:scale(1);animation:spin 8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* sleep night */
.toy-sleep{gap:10px;}
.night-labels{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--fd-faint);}
.night-bar{position:relative;height:48px;border-radius:0;overflow:hidden;background:#15231f;}
.night-glow{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(140,180,255,.6) 0 6px,rgba(140,180,255,.35) 6px 12px);transition:width .5s ease;}
.night-lag{position:absolute;top:0;bottom:0;background:rgba(255,200,120,.35);transition:left .5s ease,width .5s ease;}
.night-sleep{position:absolute;top:9px;bottom:9px;border-radius:0;background:#86d4b4;box-shadow:none;transition:left .5s ease,width .5s ease;}
.night-wakes i{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:#a3c2b4;box-shadow:0 0 10px #a3c2b4;animation:fdBlink 1s ease-in-out infinite;}
.night-stats{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--fd-dim);}
.night-stats b{font-size:24px;color:var(--fd-ink);font-variant-numeric:tabular-nums;}
/* loneliness web */
.web{width:200px;height:200px;overflow:visible;}
.web-line{stroke:rgba(15,26,23,.14);stroke-width:.8;stroke-dasharray:2 2;}
.web-line.flicker{animation:webFlicker 1.8s ease-out both;}
.web-line.strong{stroke:var(--fd-tint);stroke-width:2.6;stroke-dasharray:none;animation:none;}
.web-node circle{fill:#fff;stroke:rgba(15,26,23,.22);stroke-width:.8;}
.web-node text{font-size:3.6px;font-weight:700;fill:var(--fd-ink);}
.web-you circle{fill:#0f1a17;}
.web-you text{font-size:4.4px;font-weight:700;fill:#fff;}
.gap-meter{position:relative;height:12px;border-radius:0;background:rgba(15,26,23,.08);}
.gap-have{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0;background:var(--fd-tint);transition:width .5s cubic-bezier(.3,1.4,.5,1);}
.gap-want{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;border-radius:0;background:#f2b33d;transition:left .4s ease;}
@keyframes webFlicker{0%{stroke:#86d4b4;stroke-width:2;stroke-dasharray:none;opacity:1;}100%{stroke:rgba(15,26,23,.14);stroke-width:.8;opacity:.5;}}
/* purpose compass */
.toy-compass{justify-items:center;text-align:left;}
.compass{position:relative;width:150px;height:150px;}
.compass-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 55%,#f5f7f3 56%);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--fd-tint) 40%,#fff),0 6px 16px rgba(54,48,110,.15);}
.compass-ring b{position:absolute;font-size:11px;font-weight:700;color:var(--fd-dim);}
.compass-ring b:nth-child(1){top:12px;left:50%;transform:translateX(-50%);color:#ffc966;}
.compass-ring b:nth-child(2){right:14px;top:50%;transform:translateY(-50%);}
.compass-ring b:nth-child(3){bottom:12px;left:50%;transform:translateX(-50%);}
.compass-ring b:nth-child(4){left:14px;top:50%;transform:translateY(-50%);}
.compass-sweep{position:absolute;inset:12px;border-radius:50%;background:conic-gradient(from 0deg,rgba(242,179,61,.45),transparent 28%);opacity:var(--sweep);animation:spin 2.4s linear infinite;transition:opacity .4s;}
.toy-compass .compass-needle{position:absolute;left:50%;top:50%;width:14px;height:104px;margin:-52px 0 0 -7px;border-radius:0;transform-origin:50% 50%;background:linear-gradient(180deg,#ffc966 0 50%,#0f1a17 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:needleWobble 1.8s ease-in-out infinite alternate;}
.toy-compass .toy-slider,.toy-compass .toy-status{width:100%;}
@keyframes needleWobble{from{transform:rotate(calc(var(--wobble) * -1));}to{transform:rotate(var(--wobble));}}
/* life ladder */
.ladder{position:relative;width:120px;height:210px;margin:6px 10px;}
.ladder::before,.ladder::after{content:"";position:absolute;top:0;bottom:0;width:6px;border-radius:3px;background:#8a5e0e;}
.ladder::before{left:22px;}
.ladder::after{right:22px;}
.ladder-rungs i{position:absolute;left:22px;right:22px;height:4px;margin-bottom:-2px;border-radius:2px;background:#ffc966;}
.ladder-rungs em{position:absolute;left:-20px;top:-6px;font-style:normal;font-size:9px;font-weight:700;color:var(--fd-faint);}
.ladder-gap{position:absolute;left:30px;right:30px;border:2px dashed #f2b33d;border-radius:0;background:rgba(242,179,61,.18);transition:bottom .5s ease,height .5s ease;}
.ladder-now,.ladder-ideal{position:absolute;left:50%;transform:translate(-50%,50%);transition:bottom .55s cubic-bezier(.3,1.4,.5,1);z-index:2;}
.ladder-now{width:22px;height:22px;border-radius:50%;background:#0f1a17;border:3px solid #fff;box-shadow:0 3px 8px rgba(15,26,23,.3);}
.ladder-ideal{width:26px;height:18px;background:#f2b33d;clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%);}
.ladder-now em,.ladder-ideal em{position:absolute;left:calc(100% + 20px);top:50%;transform:translateY(-50%);white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.ladder-ideal em{color:#8a5e0e;}
.ladder-now em{color:var(--fd-ink);}
/* phones at the table */
.table-scene{position:relative;width:230px;height:210px;}
.table-top{position:absolute;inset:44px;border-radius:50%;background:#dce5df;box-shadow:inset 0 0 0 3px #a3c2b4;}
.table-bubbles i{position:absolute;width:28px;height:17px;border-radius:0;background:#fff;box-shadow:inset 0 0 0 1px #d6ddd8;opacity:calc(.15 + var(--talk,0) * .85);transform:scale(calc(.55 + var(--talk,0) * .5));transition:opacity .5s,transform .5s;animation:heroBob 2.6s ease-in-out infinite;}
.table-bubbles i:nth-child(1){left:14%;top:22%;}
.table-bubbles i:nth-child(2){left:52%;top:14%;animation-delay:-.6s;}
.table-bubbles i:nth-child(3){left:30%;top:50%;animation-delay:-1.2s;}
.table-bubbles i:nth-child(4){left:60%;top:56%;animation-delay:-1.8s;}
.table-bubbles i:nth-child(5){left:40%;top:76%;animation-delay:-.9s;}
.seat{position:absolute;display:grid;justify-items:center;gap:3px;}
.seat.s0{left:50%;top:0;transform:translateX(-50%);}
.seat.s1{right:0;top:50%;transform:translateY(-50%);}
.seat.s2{left:50%;bottom:0;transform:translateX(-50%);}
.seat.s3{left:0;top:50%;transform:translateY(-50%);}
.seat-face{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:color-mix(in srgb,var(--fd-tint) 35%,#fff);box-shadow:0 3px 0 color-mix(in srgb,var(--fd-tint) 45%,#fff);}
.seat-phone{width:26px;height:30px;padding:0;border:0;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:rgba(15,26,23,.35);background:rgba(255,255,255,.6);transition:background .25s,color .25s,box-shadow .25s;}
.seat-phone.is-out{color:#fff;background:#0f1a17;box-shadow:0 0 14px rgba(111,141,128,.65);}
.mini-phone{display:block;width:12px;height:19px;border:2px solid currentColor;border-radius:3px;}
.seat-phone.is-out .mini-phone{background:#6f8d80;}
.depth-meter{display:grid;gap:5px;}
.depth-meter em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-dim);}
.depth-meter span{position:relative;height:12px;border-radius:0;background:rgba(15,26,23,.08);overflow:hidden;}
.depth-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:0;background:#8aa699;transition:width .5s cubic-bezier(.3,1.4,.5,1);}
/* DDI spill vs pull */
.spill-pull{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sp-half{gap:10px;}
.sp-head{display:flex;align-items:center;gap:10px;}
.sp-head .dash-icon svg{width:36px;}
.sp-spill .sp-head .dash-icon{color:#f2b33d;}
.sp-pull .sp-head .dash-icon{color:#1d6e55;}
.sp-head b{display:block;font-size:19px;font-weight:700;color:var(--fd-ink);}
.sp-head small{display:block;font-size:11px;font-weight:700;color:var(--fd-dim);}
.sp-scene{position:relative;height:170px;}
.sp-pull .sp-scene{height:250px;}
.sp-spill .sp-scene{display:flex;align-items:flex-end;gap:16px;padding:0 6px;}
.sp-tank{position:relative;flex:0 0 auto;width:66px;height:120px;border:4px solid rgba(15,26,23,.72);border-top:0;border-radius:0 0 14px 14px;background:#fff;}
.sp-tank-water{position:absolute;left:0;right:0;bottom:0;height:calc(40% + var(--spill) * 60%);border-radius:0 0 10px 10px;background:#f2b33d;transition:height .5s ease;}
.sp-drip{position:absolute;right:-16px;top:-6px;width:12px;height:110px;opacity:calc((var(--spill) - .4) * 3);}
.sp-drip i{position:absolute;left:2px;top:0;width:8px;height:11px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#f2b33d;animation:dropFall calc(1.6s - var(--spill) * .9s) ease-in infinite;}
.sp-drip i:nth-child(2){animation-delay:-.4s;}
.sp-drip i:nth-child(3){animation-delay:-.8s;}
.sp-jars{flex:1;display:flex;justify-content:space-around;align-items:flex-end;gap:8px;}
.sp-jar{display:grid;justify-items:center;gap:4px;}
.sp-jar > span{position:relative;width:36px;height:76px;overflow:hidden;border:3px solid rgba(15,26,23,.55);border-top-width:0;border-radius:0 0 10px 10px;background:#fff;}
.sp-jar i{position:absolute;left:0;right:0;bottom:0;height:calc(100% - var(--spill) * 82%);background:#8aa699;transition:height .5s ease;}
.sp-jar em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fd-dim);}
.sp-phone{position:absolute;left:50%;top:50%;width:34px;height:58px;margin:-29px 0 0 -17px;border-radius:9px;background:#0f1a17;border:3px solid #24362f;box-shadow:0 0 calc(var(--pull) * 46px) rgba(29,110,85,.85);animation:phonePulse calc(2.8s - var(--pull) * 1.8s) ease-in-out infinite;}
.sp-orbit i{
  position:absolute;left:50%;top:50%;
  padding:3px 9px;border-radius:0;white-space:nowrap;
  font-style:normal;font-size:11px;font-weight:700;color:#14503e;background:#fff;
  box-shadow:inset 0 0 0 1px #d6ddd8;
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--orb)) rotate(calc(var(--a) * -1));
  animation:orbPull calc(3.4s - var(--pull) * 2.2s) ease-in-out infinite alternate;
  animation-delay:var(--d);
}
@property --orb{syntax:'<length>';inherits:false;initial-value:96px;}
@keyframes orbPull{
  from{--orb:calc(118px - var(--pull) * 26px);}
  to{--orb:calc(92px - var(--pull) * 52px);}
}
@keyframes phonePulse{50%{transform:scale(1.08);}}
.sp-copy{font-size:12.5px;line-height:1.45;font-weight:650;color:var(--fd-dim);}
.sp-foot{display:block;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--fd-ink);padding:0 4px;}
/* About you spread */
.spread-field{position:relative;height:160px;margin:18px 6px 0;border-bottom:2px solid rgba(15,26,23,.15);}
.spread-dot{position:absolute;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:color-mix(in srgb,var(--fd-tint) 55%,#fff);animation:crowdIn .4s both;animation-delay:calc(var(--i) * 14ms);transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s;}
.spread-dot.is-picked{z-index:2;background:#0f1a17;transform:scale(1.9);box-shadow:0 0 0 4px rgba(242,179,61,.5);}
.spread-mean{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;border-radius:0;background:var(--fd-tint);}
.spread-mean em,.spread-you em{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.spread-mean em{top:-16px;color:var(--fd-ink);}
.spread-you{position:absolute;bottom:-10px;width:0;height:0;border:8px solid transparent;border-bottom-color:#f2b33d;margin-left:-8px;}
.spread-you em{top:16px;color:#8a5e0e;}
.spread-axis{display:flex;justify-content:space-between;margin-top:14px;font-size:10px;font-weight:700;color:var(--fd-faint);}
/* logic rule finder */
.lg-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.lg-box{min-width:52px;height:52px;padding:0 8px;border-radius:0;display:grid;place-items:center;font-size:22px;font-weight:700;background:#fff;box-shadow:inset 0 0 0 2px #d6ddd8;animation:chipIn .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 80ms);}
.lg-q{color:#fff;background:var(--fd-tint);animation:qPulse 1.4s ease-in-out infinite;}
.lg-step{font-size:12px;font-weight:700;color:#8a5e0e;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;transition-delay:calc(var(--i) * 90ms);}
.toy-logic.show-steps .lg-step,.toy-logic.is-solved .lg-step{opacity:1;transform:none;}
.toy-logic.is-solved .lg-q{animation:popIn .5s cubic-bezier(.3,1.6,.5,1);background:#8aa699;}
.toy-logic button.is-wrong{background:#f5f7f3;animation:shake .4s;}
@keyframes qPulse{50%{transform:scale(1.08);}}
@keyframes popIn{0%{transform:scale(.6);}100%{transform:scale(1);}}
@keyframes shake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
/* speed tradeoff */
.belt{height:46px;overflow:hidden;border-radius:0;background:rgba(15,26,23,.06);}
.belt-track{display:flex;gap:10px;width:max-content;padding:8px;animation:beltMove 3.5s linear infinite;}
.belt-track i{width:28px;height:28px;border-radius:0;background:#fff;box-shadow:inset 0 0 0 2px rgba(15,26,23,.12);}
.belt-track i.bad{background:#f5f7f3;box-shadow:inset 0 0 0 2px #ffc966;}
@keyframes beltMove{to{transform:translateX(-152px);}}
.speed-bars{display:grid;gap:7px;}
.speed-bars > span{display:grid;grid-template-columns:80px 1fr 38px;align-items:center;gap:10px;}
.speed-bars em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fd-dim);}
.speed-bars b{position:relative;height:13px;border-radius:0;overflow:hidden;background:rgba(15,26,23,.07);}
.speed-bars b i{position:absolute;left:0;top:0;bottom:0;border-radius:0;transition:width .4s cubic-bezier(.3,1.3,.5,1);}
.sb-c i{background:#8aa699;}
.sb-w i{background:#ffc966;}
.sb-n i{background:#f2b33d;}
.speed-bars strong{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.sb-net-row em{color:var(--fd-ink);}
/* stroop and sart minis */
.toy-stroop,.toy-sart{justify-items:center;text-align:center;}
.stroop-word{min-height:58px;font-size:46px;font-weight:700;letter-spacing:.05em;line-height:1.2;}
.stroop-word.pop,.sart-mini-digit.pop{animation:popIn .3s cubic-bezier(.3,1.6,.5,1);}
.toy-buttons button.stroop-pick{color:#fff;background:var(--c);box-shadow:0 3px 0 rgba(0,0,0,.18);text-transform:capitalize;}
.flash-ok{animation:flashOk .35s ease;}
.flash-bad{animation:shake .35s ease;}
@keyframes flashOk{50%{transform:scale(1.12);}}
.stroop-results{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.stroop-results span{display:grid;gap:2px;padding:8px 14px;border-radius:0;background:#fff;box-shadow:inset 0 0 0 1px #d6ddd8;animation:chipIn .4s both;}
.stroop-results em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-faint);}
.stroop-results b{font-size:18px;font-variant-numeric:tabular-nums;}
.sart-mini-digit{min-height:72px;font-size:66px;font-weight:700;line-height:1.1;color:var(--fd-ink);}
.toy-buttons button.sart-mini-tap{min-width:130px;background:var(--fd-tint);color:#fff;}
/* pvt mini */
.toy-pvt{gap:18px;}
.pvt-target{justify-self:center;width:110px;height:110px;border:0;border-radius:50%;cursor:pointer;font:inherit;font-size:16px;font-weight:700;color:var(--fd-ink);background:#e1e6e2;box-shadow:0 6px 0 #e1e6e2;transition:background .1s,box-shadow .1s,transform .1s;}
.pvt-target:active{transform:translateY(4px);box-shadow:0 2px 0 #e1e6e2;}
.pvt-target.is-lit{color:#fff;background:#f2b33d;box-shadow:0 6px 0 #f2b33d,0 0 34px rgba(242,179,61,.85);}
.pvt-track{position:relative;height:26px;margin:0 8px 16px;border-radius:0;background:linear-gradient(90deg,rgba(111,141,128,.22) 0 31.5%,rgba(255,201,102,.18) 31.5%);}
.pvt-lapse{position:absolute;left:31.5%;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;border-radius:0;background:#ffc966;}
.pvt-lapse em{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a5e0e;}
.pvt-marks i{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#6f8d80;border:2px solid #fff;animation:chipIn .4s both;}
.pvt-marks i.slow{background:#8a5e0e;}
/* dashboard DDI tile: spill and pull identities */
.dash-factor-head{display:flex;align-items:center;gap:10px;}
.dash-factor-icon svg{width:30px;}
.is-spill .dash-factor-icon{color:#f2b33d;}
.is-pull .dash-factor-icon{color:#1d6e55;}
.is-spill .dash-factor-icon svg{transform-origin:20% 90%;animation:spillTip 3s ease-in-out infinite;}
.is-pull .dash-factor-icon svg{animation:magnetPulse 1.8s ease-in-out infinite;}
.dash-factor-name{display:grid;line-height:1.1;}
.dash-factor-name b{font-size:16px;font-weight:700;color:#0f1a17;}
.dash-factor-name small{font-size:10.5px;font-weight:700;color:#44524c;}
.dash-factor-score{margin-left:auto;font-size:19px!important;}
.is-spill .dash-meter-fill{background:#ffc966;}
.is-pull .dash-meter-fill{background:#86d4b4;}
@keyframes spillTip{0%,60%,100%{transform:rotate(0);}75%{transform:rotate(-12deg);}}
@keyframes magnetPulse{50%{transform:scale(1.1);filter:drop-shadow(0 0 6px rgba(29,110,85,.7));}}
@media (max-width:620px){
  .dash-ddi-factors{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;}
  .dash-ddi-factors .dash-meter,.dash-ddi-factors .dash-factor-note,.dash-factor-name small{display:none;}
  .dash-factor{padding:6px 8px;}
  .dash-factor-icon svg{width:20px;}
  .dash-factor-name b{font-size:12px;}
  .dash-factor-score{font-size:14px!important;}
}
@media (max-width:560px){
  .toy-stress,.toy-mood,.toy-lonely,.toy-ladder,.toy-table{grid-template-columns:1fr;justify-items:center;}
  .spill-pull{grid-template-columns:1fr;}
  .alarm-monitor{grid-template-columns:1fr auto;}
  .alarm-bell{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .bucket-water::before,.bucket-spill i,.alarm-line svg,.toy-mood.is-bloom .plant-flower,.night-wakes i,.web-line.flicker,.compass-sweep,.compass-needle,.table-bubbles i,.sp-drip i,.sp-phone,.sp-orbit i,.spread-dot,.lg-box,.lg-q,.belt-track,.is-spill .dash-factor-icon svg,.is-pull .dash-factor-icon svg,.is-toy .fd-led.info{animation:none;}
}