:root{color-scheme:dark;--bg:#090c12;--ink:#edf4ff;--muted:#7e8b9f;--blue:#5ba9ff;--line:#202835}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait}button,a,select,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}header{max-width:1080px;margin:auto;padding:0 35px;height:80px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;font:600 24px 'Space Grotesk',sans-serif;letter-spacing:-1px}.brand>span:first-child{font-size:35px;color:var(--blue);margin-right:8px;font-weight:400}.brand>span:last-child{font-weight:400}.method-link{font-size:11px;color:#a1aec0}main{max-width:780px;margin:auto;padding:0 25px}.test-screen{padding:16px 0 27px}.intro{text-align:center}.eyebrow{font-size:8px;letter-spacing:2px;color:#8799b0;display:inline-flex;gap:8px;align-items:center}.eyebrow i,.bottom-note i{width:5px;height:5px;background:var(--blue);border-radius:50%;box-shadow:0 0 9px #5ba9ff66}h1{font:400 clamp(23px,3vw,32px) 'Space Grotesk',sans-serif;letter-spacing:-1.1px;margin:12px 0 0}.visualizer{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate}.ambient{position:absolute;inset:0 -100px 0;background:radial-gradient(ellipse at 50% 43%,#2b74df13,transparent 60%);z-index:-1;pointer-events:none}.gauge{position:relative;width:310px;height:310px;margin:12px auto -22px}.gauge>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ticks{stroke:#354458;stroke-width:1;transition:stroke .3s}.arc-track,.arc-fill{fill:none;stroke-width:3;stroke-linecap:round}.arc-track{stroke:#253448}.arc-fill{stroke:url(#arcGradient);stroke-dasharray:100;stroke-dashoffset:82;filter:drop-shadow(0 0 6px #4291ff85)}.inner-orbit{stroke:#33415944;stroke-width:.7;fill:#0b111b55}.gauge-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:1px}.gauge-content>span{color:#8193ad;font-size:8px;letter-spacing:1.7px;margin-bottom:18px}#calculate{background:none;border:0;color:#f7fbff;font:500 29px 'Space Grotesk',sans-serif;letter-spacing:.8px;display:flex;flex-direction:column;align-items:center;padding:15px;min-width:200px;min-height:100px;transition:color .2s}#calculate:hover{color:var(--blue)}.start-arrow{color:var(--blue);font-size:30px;margin-top:6px;font-weight:400}.energy-result{text-align:center}.energy-result strong{display:block;font:500 66px/.95 'Space Grotesk',sans-serif;letter-spacing:-3px;font-variant-numeric:tabular-nums}.energy-result>span{display:block;font-size:11px;color:var(--muted);margin-top:10px}#repeat{background:transparent;color:var(--blue);font-size:8px;letter-spacing:1.1px;border:0;margin-top:20px;padding:8px}.gauge-edge{position:absolute;bottom:30px;font-size:6px;letter-spacing:1px;color:#566780}.gauge-edge.left{left:35px}.gauge-edge.right{right:35px}#feedback{max-width:530px;text-align:center;font-size:11px;line-height:1.7;color:#9aabc0;margin:6px 0 21px;min-height:19px}.macro-strip{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:500px;margin:0 0 20px;text-align:center}.macro-strip>div+div{border-left:1px solid var(--line)}.macro-strip span{display:block;font-size:8px;letter-spacing:1.5px;color:#8e9fb5}.macro-strip strong{display:inline-block;font:400 31px 'Space Grotesk',sans-serif;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-1px}.macro-strip small{font-size:9px;color:#7a8ca5;margin-left:5px}.secondary-results{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;color:#75859c;font-size:9px;line-height:1.7;text-align:center;margin-bottom:21px}.secondary-results b{font-weight:500;color:#becbde;margin:0 4px}form{max-width:560px;margin:auto}.profile-divider{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;margin:0 0 15px}.profile-divider span:first-child{font-size:8px;letter-spacing:1.5px;color:#a3b0c3}.profile-divider span:last-child{font-size:7px;letter-spacing:1px;color:#5c6e87}.mixer-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:430px;margin:auto}.dial-control{text-align:center;--sweep:0deg;--rotation:-140deg;min-width:0}.dial-name{font-size:10px;color:#95a7bf;display:block;margin-bottom:7px}.knob-wrap{position:relative;width:100%;max-width:94px;aspect-ratio:1;margin:auto}.knob{position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}.knob *{pointer-events:none;user-select:none;-webkit-user-select:none}.knob-arc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 220deg,var(--blue) 0deg var(--sweep),#29384c var(--sweep) 280deg,transparent 280deg);mask:radial-gradient(transparent 65%,#000 66% 69%,transparent 70%)}.knob-body{position:absolute;inset:12%;border-radius:50%;background:linear-gradient(145deg,#1d293b,#101723);box-shadow:0 4px 10px #0006,inset 0 1px 1px #ffffff0d;border:1px solid #354154;isolation:isolate;transition:border-color .2s,box-shadow .2s}.knob-grip{position:absolute;inset:1%;border-radius:50%;background:repeating-conic-gradient(#9caec44a 0deg 1deg,#101a29 2deg 4deg,#354359 5deg 6deg);mask:radial-gradient(transparent 61%,#000 63%);transform:rotate(var(--rotation));opacity:.5}.knob-body:after{content:'';position:absolute;inset:10%;border-radius:50%;background:repeating-linear-gradient(0deg,#ffffff03 0px,#ffffff03 1px,#00000003 1px,#00000003 2px),linear-gradient(145deg,#1b2638,#111b2b);border:1px solid #2e3b4c;z-index:1}.knob-pointer{position:absolute;inset:0;transform:rotate(var(--rotation));z-index:3}.knob-pointer:before{content:'';position:absolute;top:6%;left:calc(50% - 1px);width:2px;height:10%;border-radius:2px;background:var(--blue)}.knob-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:3px;z-index:2}.knob-number{font:500 24px/1 'Space Grotesk',sans-serif;letter-spacing:-1px;font-variant-numeric:tabular-nums}.dial-unit{font-size:6px;color:#8093ad;margin-top:5px}.knob:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.knob:hover .knob-body,.dragging .knob-body{border-color:var(--blue);box-shadow:0 0 20px #5ba9ff19}.dragging .knob{cursor:grabbing}.dragging .knob-number{color:var(--blue)}#dialHelp{font-size:8px;color:#657790;text-align:center;line-height:1.8;margin:10px 0 17px}.settings{border:1px solid var(--line);border-radius:8px;background:#0e141e}.settings>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;font-size:10px;line-height:1.6;color:#a3b3c9}.settings-change{white-space:nowrap;color:var(--blue);font-size:7px;letter-spacing:1px}.settings-change b{font-weight:400;font-size:13px;margin-left:5px}.settings-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:0 16px 15px;align-items:end}.settings label{font-size:9px;color:#869bb8;min-width:0}.settings select{width:100%;min-height:43px;background:#101b2b;color:#cfdef2;border:1px solid #293a53;border-radius:5px;padding:9px 8px;font-size:10px;margin-top:7px;text-overflow:ellipsis}.settings-content button{grid-column:1/-1;background:#192d49;color:#9fcbff;border:1px solid #2d4f7b;border-radius:5px;min-height:38px;font-size:11px}.adult-note{font-size:8px;line-height:1.8;color:#63758d;margin:12px 0 0;text-align:center}.bottom-note{display:flex;align-items:center;justify-content:center;gap:25px;color:#4f627d;font-size:6px;letter-spacing:1px;margin-top:24px}.bottom-note span:first-child{display:flex;gap:6px;align-items:center}.bottom-note i{width:4px;height:4px;box-shadow:none}#method{max-width:560px;margin:6px auto 0;border-top:1px solid #192331;border-bottom:1px solid #192331}#method>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:15px 0;color:#70859f;font-size:10px;cursor:pointer}#method>summary span{color:var(--blue)}.method-content{font-size:11px;line-height:1.9;color:#879bb5;padding-bottom:12px}.method-content a{color:var(--blue);text-decoration:underline}footer{display:flex;justify-content:space-between;gap:20px;max-width:560px;margin:auto;padding:19px 0 25px;font-size:8px;color:#4d607a}.running .ticks{stroke:#4486d3}.running .inner-orbit{stroke:#3c6eaa66}.running .ambient{animation:ambient-pulse .8s ease-in-out infinite alternate}.running #calculate{font-size:17px;color:var(--blue);letter-spacing:1px}.running .start-arrow{animation:spin 1.5s linear infinite}.ready .macro-strip>div{animation:result-enter .4s both}.ready .macro-strip>div:nth-child(2){animation-delay:.08s}.ready .macro-strip>div:nth-child(3){animation-delay:.16s}.ready .energy-result{animation:result-enter .4s both}[hidden]{display:none!important}@keyframes ambient-pulse{to{opacity:.4;transform:scale(1.12)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes result-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(min-height:900px) and (min-width:600px){.test-screen{padding-top:35px}.gauge{width:340px;height:340px;margin-top:18px;margin-bottom:-18px}#feedback{margin-bottom:25px}.profile-divider{padding-top:20px}.knob-wrap{max-width:103px}.knob-number{font-size:26px}.bottom-note{margin-top:27px}}@media(max-width:600px){header{height:64px;padding:0 22px}.brand{font-size:22px}.brand>span:first-child{font-size:30px}.method-link{font-size:10px}main{padding:0 21px}.test-screen{padding-top:14px}h1{font-size:26px}.eyebrow{font-size:7px;letter-spacing:1.6px}.gauge{width:290px;height:290px;margin-top:10px}.gauge-content>span{font-size:7px}#calculate{font-size:27px}.energy-result strong{font-size:62px}#feedback{font-size:10px;margin-bottom:19px}.macro-strip{margin-bottom:16px}.macro-strip span{font-size:7px;letter-spacing:1px}.macro-strip strong{font-size:28px}.macro-strip small{font-size:8px;margin-left:3px}.secondary-results{font-size:8px;gap:7px 15px;margin-bottom:18px}.mixer-fields{gap:18px;max-width:340px}.knob-wrap{max-width:96px}.profile-divider{padding-top:15px;margin-bottom:14px}.profile-divider span:last-child{font-size:6px}.dial-name{font-size:10px}.knob-number{font-size:25px}#dialHelp{font-size:8px;max-width:300px;margin:11px auto 15px}.settings>summary{padding:12px 13px;font-size:9px}.settings-content{grid-template-columns:1fr;gap:13px;padding:2px 13px 14px}.settings label{font-size:11px}.settings select{font-size:12px}.settings-content button{min-height:43px}.adult-note{font-size:8px}.bottom-note{gap:18px;font-size:6px;margin-top:20px}}@media(max-width:360px){main{padding:0 17px}header{padding:0 17px}h1{font-size:23px}.gauge{width:270px;height:270px}.mixer-fields{gap:13px}.knob-number{font-size:23px}.macro-strip strong{font-size:25px}.macro-strip small{display:block;margin:2px 0 0}.settings-change{font-size:6px}.bottom-note{letter-spacing:.7px;gap:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.ambient{inset:0;max-width:100%}
.brand>span.brand-flame{width:24px;height:32px;font-size:0;margin-right:9px;display:flex;align-items:center}.brand-flame svg{width:24px;height:30px}.fitness-subtitle{font-size:11px;line-height:1.7;color:#7d91ad;margin:10px auto 0;text-align:center;max-width:430px}.start-arrow{width:43px;height:35px;display:block;margin-top:10px}.start-arrow svg{width:100%;height:100%}.gauge-flame{position:absolute;width:24px;height:30px;left:calc(50% - 12px);bottom:27px;color:#5ba9ff;opacity:.55;pointer-events:none}.gauge-flame svg{width:100%;height:100%}.running .start-arrow{animation:training-pulse .5s ease-in-out infinite alternate}.running .gauge-flame{opacity:1}.ready .gauge-flame{opacity:.8}@keyframes training-pulse{to{transform:translateY(-3px);filter:drop-shadow(0 0 7px #5ba9ff88)}}@media(max-width:600px){.intro h1{font-size:23px;letter-spacing:-.9px}.fitness-subtitle{font-size:10px;max-width:290px;margin-top:9px}.eyebrow{font-size:6px;letter-spacing:1.5px}.gauge-edge.left{left:26px}.gauge-edge.right{right:30px}.gauge-flame{width:21px;height:27px;left:calc(50% - 10.5px);bottom:24px}}@media(max-width:360px){.intro h1{font-size:21px}.fitness-subtitle{font-size:9px;max-width:270px}}
.settings-content{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding-top:4px}.choice-group{border:0;padding:0;margin:0;min-width:0}.choice-group legend{font-size:10px;color:#8ca2bf;margin-bottom:9px;line-height:1.6}.choices{display:grid;gap:7px}.sex-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.goal-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.choice{position:relative;min-width:0;cursor:pointer}.choice input{position:absolute;width:1px;height:1px;opacity:0;margin:0;bottom:50%;left:50%}.choice>span{border:1px solid #29384e;background:#101925;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:10px 7px;border-radius:6px;transition:background .15s,border-color .15s,color .15s;text-align:center;color:#8ca0bc}.choice b{font-size:10px;font-weight:500;line-height:1.5}.choice small{font-size:8px;color:#6d829f;line-height:1.5}.choice input:checked+span{border-color:#5ba9ff;background:#172e4b;color:#d5eaff;box-shadow:inset 0 0 0 1px #5ba9ff22}.choice input:checked+span small{color:#8cb5e5}.choice input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}.choice:hover>span{border-color:#48668e}.activity-choices .choice:last-child{grid-column:span 2}.settings-content #applySettings{width:100%;min-height:43px;margin-top:0}@media(max-width:600px){.choice-group legend{font-size:11px}.choice b{font-size:11px}.choice small{font-size:9px}.activity-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-choices .choice:last-child{grid-column:span 2}.goal-choices .choice b{font-size:10px}.choice>span{min-height:48px;padding:11px 6px}}
/* Legible labels and supporting text across screen sizes. */
.method-link, #feedback, .fitness-subtitle, .dial-name, .choice-group legend,
.choice b, .settings > summary, .settings-content #applySettings, #method > summary {
  font-size: 14px;
}
.eyebrow, .gauge-content > span, .gauge-edge, #repeat,
.macro-strip span, .macro-strip small, .secondary-results,
.profile-divider span:first-child, .profile-divider span:last-child,
#dialHelp, .choice small, .settings-change, .adult-note, .bottom-note, footer {
  font-size: 11px;
}
.dial-unit { font-size: 9px; }
.method-content { font-size: 14px; }
.sex-choices .choice b { font-size: 16px; }
.goal-choices .choice b { font-size: 13px; }
.choice > span { overflow-wrap: anywhere; }
.bottom-note { flex-wrap: wrap; gap: 8px 20px; }
#dialHelp, .adult-note { line-height: 1.6; }
@media (max-width: 360px) {
  .method-link, .settings > summary { font-size: 12px; }
  .profile-divider span:last-child, .gauge-edge { font-size: 10px; }
  .gauge { max-width: 100%; }
}
/* Compact horizontal profile choices. */
.settings-content { gap: 12px; }
.choice-group legend { margin-bottom: 6px; }
.sex-choices .choice > span {
  flex-direction: row;
  gap: 9px;
  min-height: 44px;
  padding: 6px 10px;
}
.sex-icon {
  flex: none;
  width: 19px;
  height: 26px;
  fill: currentColor;
  color: #6aaeff;
}
.sex-choices .choice:last-child .sex-icon { color: #f484ca; }
.sex-choices input:checked + span .sex-icon {
  filter: drop-shadow(0 0 5px currentColor);
}
.activity-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.activity-choices .choice:last-child { grid-column: auto; }
.activity-choices .choice > span { min-height: 58px; padding: 5px 4px; }
.activity-choices .choice b { font-size: 12px; }
.goal-choices .choice > span { min-height: 44px; padding-block: 6px; }
@media (max-width: 500px) {
  .activity-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .activity-choices .choice { grid-column: span 2; }
  .activity-choices .choice:nth-child(n+4) { grid-column: span 3; }
  .sex-choices .choice b { font-size: 14px; }
}
.settings-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e141e;
  color: #a3b3c9;
  font-size: 13px;
  text-align: left;
}
dialog.settings {
  width: min(740px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  color: var(--ink);
}
dialog.settings::backdrop { background: #05080dba; }
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.settings-header h2 { font-size: 17px; margin: 0; }
#closeSettings { min-width: 34px; min-height: 34px; border: 0; border-radius: 6px; background: #192638; color: var(--ink); font-size: 20px; }
.settings .settings-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 10px 12px;
  padding: 0;
}
.settings .choice-group { grid-column: auto; }
.settings .choice-group:nth-child(3) { grid-column: 1 / -1; }
.settings .choice-group legend { font-size: 12px; margin-bottom: 5px; }
.settings .choice > span { min-height: 42px; padding: 5px; }
.settings .sex-choices .choice b { font-size: 12px; }
.settings .sex-icon { width: 14px; height: 21px; }
.settings .activity-choices .choice > span { height: 100%; }
.settings-content #applySettings { width: auto; min-width: 88px; min-height: 40px; justify-self: end; }
@media (max-width: 560px) {
  .settings .settings-content { grid-template-columns: 1fr; }
}
.ruler-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ruler {
  min-width: 0;
  padding: 11px 8px 8px;
  background: linear-gradient(165deg, #152234, #0e141e 72%);
  border: 1px solid #29394e;
  border-radius: 10px;
  text-align: center;
}
.ruler label { display: block; color: #a3b3c9; font-size: 12px; margin-bottom: 4px; }
.ruler-readout { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.ruler-readout button {
  flex: none; width: 28px; height: 36px; border: 1px solid #2a3c54; border-radius: 6px;
  background: #142033; color: #9bcbff; font-size: 16px;
}
.ruler-readout button:hover:not(:disabled) { background: #203752; }
.ruler-readout button:disabled { opacity: .4; cursor: default; }
.ruler-value { min-width: 0; flex: 1; }
.ruler-value input {
  display: block; width: 100%; appearance: textfield; background: transparent; border: 0;
  padding: 2px 0; color: var(--ink); text-align: center; font: 500 clamp(16px, 4vw, 27px) 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -.08em; border-radius: 4px;
}
.ruler-value input::-webkit-inner-spin-button, .ruler-value input::-webkit-outer-spin-button { appearance: none; }
.ruler-value input:invalid { color: #ffb7b7; }
.ruler-value span, .ruler-limits { font-size: 10px; color: #91a5c0; }
.ruler input[type=range] {
  appearance: none; width: 100%; height: 28px; margin: 5px 0 0; cursor: ew-resize;
  background: repeating-linear-gradient(90deg,#56779d 0 1px,transparent 1px 8px) center / 100% 12px no-repeat,
    linear-gradient(90deg, #5ba9ff var(--fill), #26374e var(--fill)) center / 100% 3px no-repeat;
  border-radius: 5px; touch-action: pan-y;
}
.ruler input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 7px; height: 21px; border-radius: 3px; background: #c7e8ff;
  box-shadow: 0 0 8px #5ba9ff;
}
.ruler input[type=range]::-moz-range-thumb {
  width: 7px; height: 21px; border: 0; border-radius: 3px; background: #c7e8ff; box-shadow: 0 0 8px #5ba9ff;
}
.ruler input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ruler-limits { display: flex; justify-content: space-between; }
@media (max-width: 480px) {
  .ruler-fields { grid-template-columns: 1fr; gap: 6px; }
  .ruler { display: grid; grid-template-columns: 44px 116px minmax(0, 1fr); gap: 7px; align-items: center; padding: 6px 8px; }
  .ruler label, .ruler input[type=range] { margin: 0; }
  .ruler-value input { font-size: 20px; }
  .ruler-readout button { width: 26px; }
  .ruler-limits { display: none; }
}
/* The completed arc maps to the same energy shares as the macro results. */
.macro-spectrum {
  opacity: 0;
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: opacity .25s ease;
}
.spectrum-protein { stroke: #7cafff; stroke-dasharray: 23 77; stroke-dashoffset: -1; }
.spectrum-carbs { stroke: #5ceac9; stroke-dasharray: 43 57; stroke-dashoffset: -26; }
.spectrum-fat { stroke: #f5bd7a; stroke-dasharray: 28 72; stroke-dashoffset: -71; }
.ready .macro-spectrum { opacity: 1; filter: drop-shadow(0 0 5px #80caff66); }
.arc-fill { transition: opacity .25s ease; }
.idle-sweep { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .visualizer:not(.running, .ready) .idle-sweep {
    display:inline;
    fill:none;
    stroke:#8ad9ff;
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:11 100;
    opacity:0;
    filter:drop-shadow(0 0 5px #5ba9ff);
    animation:idle-sweep 2.4s ease-in-out 2;
  }
  @keyframes idle-sweep {
    0%, 12% { stroke-dashoffset:11; opacity:0; }
    25%, 64% { opacity:.75; }
    83%, 100% { stroke-dashoffset:-100; opacity:0; }
  }
}
.ready .arc-fill { opacity: 0; }
.running .arc-fill { stroke-width: 5; filter: drop-shadow(0 0 10px #5ba9ffaa); }
.running .inner-orbit { animation: orbit-breathe .55s ease-in-out infinite alternate; transform-origin: center; }
@keyframes orbit-breathe {
  to { transform: scale(.92); stroke: #5ba9ff80; }
}
.ready .macro-strip {
  position: relative;
  padding-top: 14px;
  background: linear-gradient(90deg, #7cafff 25%, #5ceac9 25% 70%, #f5bd7a 70%) top / 100% 2px no-repeat;
  animation: spectrum-reveal .42s cubic-bezier(.2,.8,.2,1) both;
}
.ready .macro-strip > div:nth-child(1) > span { color: #7cafff; }
.ready .macro-strip > div:nth-child(2) > span { color: #5ceac9; }
.ready .macro-strip > div:nth-child(3) > span { color: #f5bd7a; }
@keyframes spectrum-reveal {
  from { background-size: 0 2px; opacity: 0; transform: translateY(-6px); }
  to { background-size: 100% 2px; opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .running .inner-orbit, .ready .macro-strip { animation: none; }
  .arc-fill, .macro-spectrum { transition: none; }
}
.goal-compare {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0 3px;
}
.goal-compare button {
  min-height: 42px;
  padding: 6px 11px;
  border: 1px solid #29384e;
  border-radius: 7px;
  background: #101925;
  color: #a3b3c9;
  font-size: 12px;
}
.goal-compare button[aria-pressed="true"] {
  border-color: var(--blue);
  color: #d5eaff;
  background: #172e4b;
}
.header-actions { display:flex; align-items:center; gap:16px; }
.language-toggle { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; }
.language-toggle button { min-width:42px; min-height:40px; border:0; border-radius:7px; background:transparent; color:#a3b3c9; font-size:13px; font-weight:700; }
.language-toggle button[aria-pressed="true"] { background:#172e4b; color:#d5eaff; }
.tool-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.tool-nav a, .muscle-views button {
  display:inline-flex; align-items:center; min-height:44px; padding:6px 12px;
  border:1px solid #29384e; border-radius:8px; background:#101925; color:#b9d9ff;
}
.tool-nav a:hover, .muscle-views button:hover { border-color:var(--blue); }
.tool-nav [aria-current="page"], .muscle-views [aria-pressed="true"] { border-color:#5ba9ff; background:#172e4b; color:#edf4ff; }
.tool-intro { text-align:center; margin:24px auto; }
.tool-intro p { color:#a3b3c9; line-height:1.55; }
.supplements { margin:28px 0; padding:clamp(15px,4vw,26px); border:1px solid #29384e; border-radius:14px; background:#0e141e; scroll-margin-top:16px; }
.supplements-kicker { margin:0 0 8px; color:#7ec8ff; font-size:11px; font-weight:700; letter-spacing:.14em; }
.supplements h2 { margin:0; font:500 clamp(23px,4vw,30px)/1.15 'Space Grotesk',sans-serif; }
.supplements-intro, .creatine-note { color:#a3b3c9; line-height:1.55; }
.creatine-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:14px; margin-block:18px; }
.creatine-controls, .creatine-results > div { padding:14px; background:#111b29; border:1px solid #26364b; border-radius:10px; }
.creatine-controls label, .creatine-caption { color:#c4d8ef; font-weight:600; }
.creatine-input { display:flex; align-items:center; gap:8px; margin-top:8px; padding:0 10px; border:1px solid #365276; border-radius:7px; color:#a3b3c9; background:#0b111b; }
.creatine-input:focus-within { outline:2px solid var(--blue); outline-offset:2px; }
.creatine-input input { width:100%; min-width:0; min-height:44px; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:18px; }
.creatine-input input:invalid { color:#ffb7b7; }
#creatine-hint, .creatine-explanation { margin:8px 0 0; color:#a3b3c9; font-size:13px; line-height:1.45; }
.creatine-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.creatine-number { margin:9px 0 0; color:#a4d9ff; }
.creatine-number output, .creatine-number strong { font:500 32px/1 'Space Grotesk',sans-serif; }
.creatine-sources { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:0; color:#a3b3c9; font-size:13px; }
.creatine-sources a { color:#9bcbff; text-decoration:underline; text-underline-offset:3px; }
.catalog-group { margin:26px 0; }
.catalog-group h2 { font:500 22px 'Space Grotesk',sans-serif; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.catalog-grid article, .muscle-figure, .muscle-details { padding:16px; border:1px solid #29384e; border-radius:12px; background:#101925; }
.catalog-grid h3 { margin:0 0 6px; font-size:16px; }
.catalog-grid p, .muscle-info p { margin:0; color:#b4c4d8; line-height:1.55; }
.atlas-intro { margin:28px auto 20px; }
.atlas-intro .atlas-kicker { color:#8ec7ff; font-size:11px; letter-spacing:.16em; font-weight:700; }
.muscle-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px; align-items:start; margin-bottom:24px; }
.muscle-figure { background:radial-gradient(ellipse at 50% 55%,#16283c,#0e1724 73%); }
.atlas-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.muscle-views { display:flex; gap:4px; padding:3px; background:#0b111b; border:1px solid #29384e; border-radius:10px; }
.muscle-views button { min-height:40px; border-color:transparent; background:transparent; }
#muscle-zoom { min-height:44px; padding:0 10px; border:1px solid #365276; border-radius:8px; background:#101925; color:#b9d9ff; }
.muscle-figure svg { display:block; width:100%; height:min(560px,65vh); min-height:330px; margin-top:12px; overflow:hidden; }
#anatomy-plate { pointer-events:none; }
#anatomy-regions path { fill:#0d1a29; fill-opacity:.12; stroke:#e5efff; stroke-opacity:.23; stroke-width:1px; vector-effect:non-scaling-stroke; cursor:pointer; }
@media (hover:hover) {
  #anatomy-regions g:hover path { fill:#4abdfc; fill-opacity:.42; stroke:#bcecff; stroke-opacity:.85; }
}
#anatomy-regions g.selected path { fill:#36bfff; fill-opacity:.62; stroke:#cdf0ff; stroke-opacity:1; stroke-width:1.5px; }
.anatomy-selection { min-height:1.4em; margin:10px 0 0; color:#c1e9ff; text-align:center; font:500 17px/1.4 'Space Grotesk',sans-serif; }
.anatomy-credit { color:#a3b3c9; font-size:12px; line-height:1.6; margin:16px 0 0; }
.muscle-details label { display:block; margin-bottom:8px; color:#c4d8ef; font-weight:600; }
.muscle-details input { width:100%; min-height:44px; padding:8px 10px; border:1px solid #365276; border-radius:7px; background:#0b111b; color:var(--ink); font:inherit; }
.atlas-count { color:#9eb1c9; font-size:12px; margin:12px 0 8px; }
.atlas-list { display:grid; gap:4px; }
.atlas-list button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 10px; border:1px solid #29384e; border-radius:7px; background:#0d1623; color:#dce8f7; text-align:left; }
.atlas-list button:hover, .atlas-list button[aria-pressed="true"] { border-color:#5ba9ff; background:#172e4b; }
.atlas-list small { color:#a7bdd8; }
.muscle-details a { color:#9bcbff; text-decoration:underline; }
@media (max-width:600px) {
  .creatine-panel { grid-template-columns:1fr; }
  .creatine-results > div { padding:10px; }
  .catalog-grid, .muscle-layout { grid-template-columns:1fr; }
  .muscle-figure svg { height:min(450px,58vh); }
  .atlas-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .atlas-list button { flex-wrap:wrap; }
  .tool-nav { gap:5px; }
  .tool-nav a { padding-inline:8px; font-size:12px; }
}

@media (max-width: 600px) {
  header { padding-inline:16px; height:62px; }
  .header-actions { gap:9px; }
  .brand { font-size:21px; }
  .method-link { font-size:12px; text-align:right; }
  main { padding-inline:clamp(12px, 4vw, 22px); }
  .test-screen { padding-top:8px; }
  .intro h1 { font-size:clamp(23px, 6.2vw, 30px); line-height:1.12; text-wrap:balance; }
  .fitness-subtitle { font-size:14px; line-height:1.45; max-width:36ch; }
  .gauge { width:min(270px, 100%); height:auto; aspect-ratio:1; margin-top:10px; }
  .ready #gaugeLabel {
    position:absolute;
    top:28%;
    inset-inline:15%;
    margin:0;
    text-align:center;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.08em;
    color:#a3b3c9;
  }
  .ready .energy-result { position:absolute; top:39%; }
  .ready .energy-result strong { font-size:56px; }
  .ready .energy-result > span { margin-top:6px; }
  .ready #repeat {
    position:absolute;
    bottom:15%;
    min-height:44px;
    margin:0;
    font-size:10px;
    letter-spacing:.06em;
  }
  #feedback { font-size:13px; line-height:1.4; margin-bottom:12px; }
  .goal-compare { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .goal-compare button { min-height:44px; padding-inline:4px; }
  .macro-strip span { font-size:10px; letter-spacing:.06em; }
  .macro-strip small { display:block; margin:0; }
  .secondary-results { gap:4px 12px; }
  .ruler-fields { grid-template-columns:1fr; gap:6px; }
  .ruler { display:grid; grid-template-columns:minmax(42px,.65fr) minmax(140px,1.8fr) minmax(64px,1.5fr); align-items:center; gap:6px; padding:4px 7px; }
  .ruler label { margin:0; text-align:left; font-size:13px; }
  .ruler-readout button { width:40px; height:44px; }
  .ruler-value input { font-size:20px; letter-spacing:-.04em; }
  .ruler input[type=range] { margin:0; height:44px; }
  .ruler input[type=range]::-webkit-slider-thumb { width:12px; height:23px; }
  .ruler input[type=range]::-moz-range-thumb { width:12px; height:23px; }
  .ruler-limits { display:none; }
  .settings-trigger { font-size:14px; min-height:48px; }
  .settings-change { flex:none; }
  dialog.settings { max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; }
  .settings .choice > span { min-height:44px; }
  .settings .settings-content #applySettings { width:100%; min-height:44px; }
  #closeSettings { min-width:44px; min-height:44px; }
}
@media (max-width: 360px) {
  .header-actions .method-link { display:none; }
  .ruler { grid-template-columns:42px minmax(134px,1.8fr) minmax(58px,1.5fr); }
  .ruler-readout button { width:38px; }
  .ruler-value input { font-size:18px; }
}