.cfd .wrap {max-width:var(--cf-max-width);margin:0 auto;padding:0 var(--cf-space-5)}
.cfd main {font-family: var(--cf-font);color:var(--cf-color-text-primary);font-size:17px;line-height:1.6}
.cfd main h1, .cfd main h2, .cfd main h3 {color:var(--cf-color-primary-900);font-weight:700;letter-spacing:-0.02em;text-wrap:balance;margin:0}
.cfd main h3 {font-weight:600;letter-spacing:-0.01em}
.cfd main h2 {font-size:clamp(26px,3.4vw,40px);line-height:1.15}
.cfd main p {margin:0}
.cfd main a:not(:where(.cf-btn)) {overflow-wrap:anywhere}
.cfd .sec {padding:clamp(56px,8vw,120px) 0}
.cfd .sec--blue {background:var(--cf-color-background-blue)}
.cfd .sec-head {margin-bottom:var(--cf-space-10)}
.cfd .sec-head .cf-lead {margin-top:var(--cf-space-4);color:var(--cf-color-text-secondary)}
.cfd .prose p+p {margin-top:var(--cf-space-4)}
.cfd sup a:not(:where(.cf-btn)) {font-size:14px;color:var(--cf-color-link);text-decoration:none;padding:0 2px}
.cfd sup a:not(:where(.cf-btn)):hover {color:var(--cf-color-link-hover);text-decoration:underline}
.cfd a:not(:where(.cf-btn)):focus-visible, .cfd button:focus-visible, .cfd summary:focus-visible {outline:3px solid var(--cf-color-focus);outline-offset:3px}
.cfd .hero {background:linear-gradient(180deg,var(--cf-color-background-blue),var(--cf-color-background-page));padding:var(--cf-space-8) 0 var(--cf-space-12)}
.cfd .hero-grid {display:grid;gap:var(--cf-space-8)}
.cfd .hero h1 {font-size:clamp(34px,4vw,48px);line-height:1.1}
.cfd .hero .cf-lead {margin-top:var(--cf-space-4);color:var(--cf-color-text-secondary);max-width:46ch}
.cfd .hero .cf-actions {margin-top:var(--cf-space-6)}
.cfd .hero-start.cf-btn {width:100%;max-width:420px;min-height:60px;font-size:20px;font-weight:700;justify-content:center;align-items:center;gap:var(--cf-space-3);box-shadow:var(--cf-shadow-medium);transition:transform .2s ease,box-shadow .2s ease}
.cfd .hero-start.cf-btn:hover {transform:translateY(-2px);box-shadow:var(--cf-shadow-large)}
.cfd .hero-start i {display:inline-flex;width:22px;height:22px}
.cfd .micro {margin-top:var(--cf-space-3);font-size:16px;color:var(--cf-color-text-secondary)}
.cfd .launcher {width:100%}
.cfd .launcher iframe {display:block;width:100%;max-width:680px;height:780px;border:0;margin:0 auto;border-radius:var(--cf-radius-large);background:var(--cf-color-surface)}
.cfd .poster {background:var(--cf-color-primary-900);border-radius:var(--cf-radius-large);box-shadow:var(--cf-shadow-medium);padding:var(--cf-space-8) var(--cf-space-5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cf-space-6);text-align:center;max-height:560px}
.cfd .poster-instr {color:var(--cf-color-text-inverse);font-size:17px;font-weight:500}
.cfd .arrows {display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;width:100%;max-width:420px}
.cfd .arr {color:var(--cf-color-text-inverse);font-size:clamp(38px,7vw,60px);line-height:1;font-weight:700}
.cfd .bar {display:block;width:.8em;height:.14em;background:var(--cf-color-text-inverse);border-radius:var(--cf-radius-small);font-size:clamp(38px,7vw,60px)}
.cfd .resp-row {display:flex;gap:var(--cf-space-4);justify-content:center;width:100%}
.cfd .resp {display:inline-flex;align-items:center;justify-content:center;gap:var(--cf-space-2);min-width:112px;min-height:48px;padding:0 var(--cf-space-4);border-radius:var(--cf-radius-button);background:var(--cf-color-primary-800);color:var(--cf-color-text-inverse);font-size:17px;font-weight:500;border:2px solid var(--cf-color-primary-700)}
.cfd .resp i {display:inline-flex;width:20px;height:20px}
.cfd .resp--ok {background:var(--cf-color-surface);color:var(--cf-color-primary-900);border-color:var(--cf-color-surface)}
.cfd .play {width:76px;height:76px;border-radius:50%;border:0;background:var(--cf-color-cta);color:var(--cf-color-text-inverse);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--cf-shadow-small);transition:transform .2s ease,background .2s ease}
.cfd .play:hover {background:var(--cf-color-cta-deep);transform:scale(1.05)}
.cfd .play i {display:inline-flex;width:32px;height:32px}
.cfd .steps {list-style:none;margin:0;padding:0;display:grid;gap:0}
.cfd .steps li {position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:var(--cf-space-4);padding-bottom:var(--cf-space-6)}
.cfd .steps li:last-child {padding-bottom:0}
.cfd .steps li:not(:last-child)::after {content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--cf-color-border-strong)}
.cfd .step-n {grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.cfd .steps strong {display:block;color:var(--cf-color-primary-900);font-size:18px;line-height:1.3;padding-top:var(--cf-space-2)}
.cfd .steps span.step-t {color:var(--cf-color-text-secondary);font-size:17px}
.cfd .hero-steps {margin-top:var(--cf-space-10)}
.cfd .nudge {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--cf-space-4) var(--cf-space-6);width:100%;margin-top:var(--cf-space-12);padding-top:var(--cf-space-6);border-top:1px solid var(--cf-color-border)}
.cfd .nudge p {color:var(--cf-color-text-secondary);font-size:17px;max-width:none}
.cfd .nudge .cf-actions {margin-top:0}
.cfd .nudge .cf-btn {min-height:44px}
.cfd .answer {padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(40px,6vw,80px)}
.cfd .answer .big {font-size:clamp(19px,2vw,22px);line-height:1.55;margin-top:var(--cf-space-5)}
.cfd [role="tablist"] {display:flex;flex-wrap:wrap;gap:var(--cf-space-2);margin-bottom:var(--cf-space-6)}
.cfd [data-cf-tab] {min-height:44px;padding:0 var(--cf-space-5);font:inherit;font-size:17px;font-weight:500;color:var(--cf-color-primary-900);background:var(--cf-color-surface);border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-button);cursor:pointer}
.cfd [data-cf-tab][aria-selected="true"] {background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);border-color:var(--cf-color-primary-900)}
.cfd .panel {display:grid;gap:var(--cf-space-6)}
.cfd .panel+.panel {margin-top:var(--cf-space-8)}
.cfd .trial {background:var(--cf-color-primary-900);border-radius:var(--cf-radius-large);padding:var(--cf-space-8) var(--cf-space-4);display:flex;flex-direction:column;align-items:center;gap:var(--cf-space-5)}
.cfd .trial .arrows {row-gap:var(--cf-space-3)}
.cfd .lab {font-size:14px;color:var(--cf-color-primary-100);text-align:center;border-bottom:2px solid var(--cf-color-primary-100);padding-bottom:var(--cf-space-1);width:88%;justify-self:center}
.cfd .lab--ign {grid-column:span 2}
.cfd .lab--tgt {color:var(--cf-color-accent-500);border-color:var(--cf-color-accent-500)}
.cfd .fix {color:var(--cf-color-primary-100);font-size:14px}
.cfd .panel-text h3 {font-size:24px;margin-bottom:var(--cf-space-3)}
.cfd .panel-text p {color:var(--cf-color-text-secondary);max-width:52ch}
.cfd .panel-text p+p {margin-top:var(--cf-space-3)}
.cfd .flow {margin-top:var(--cf-space-12)}
.cfd .flow h3 {font-size:22px;margin-bottom:var(--cf-space-6)}
.cfd .abil {display:grid;gap:var(--cf-space-8);align-items:start}
.cfd .photo img {display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--cf-radius-large)}
.cfd .abil dl {margin:0}
.cfd .abil dt {font-weight:700;color:var(--cf-color-primary-900);font-size:19px;line-height:1.3}
.cfd .abil dd {margin:var(--cf-space-1) 0 0;color:var(--cf-color-text-secondary)}
.cfd .abil dd em {display:block;font-style:normal;color:var(--cf-color-text-primary);margin-top:var(--cf-space-1)}
.cfd .abil .item {padding:var(--cf-space-5) 0;border-top:1px solid var(--cf-color-border)}
.cfd .abil .item:first-child {border-top:0;padding-top:0}
.cfd .sub {margin:var(--cf-space-6) 0 var(--cf-space-2);font-size:16px;font-weight:700;color:var(--cf-color-primary-700)}
.cfd .equation {display:grid;gap:var(--cf-space-3);align-items:center;background:var(--cf-color-primary-050);border-radius:var(--cf-radius-large);padding:var(--cf-space-8) var(--cf-space-5)}
.cfd .term {background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-medium);padding:var(--cf-space-5);text-align:center}
.cfd .term small {display:block;font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .term b {display:block;font-size:22px;color:var(--cf-color-primary-900);line-height:1.3}
.cfd .term--res {background:var(--cf-color-primary-900);border-color:var(--cf-color-primary-900)}
.cfd .term--res small {color:var(--cf-color-primary-100)}
.cfd .term--res b {color:var(--cf-color-text-inverse)}
.cfd .op {font-size:40px;font-weight:700;line-height:1;text-align:center;color:var(--cf-color-primary-700)}
.cfd .op--eq {color:var(--cf-color-accent-700)}
.cfd .eq-note {margin-top:var(--cf-space-5);max-width:none;color:var(--cf-color-text-secondary)}
.cfd main section#reading-results .wrap .equation+p.eq-note {margin-top:var(--cf-space-8)}
.cfd .measures {display:grid;gap:var(--cf-space-6);margin-top:var(--cf-space-12)}
.cfd .measure h3 {font-size:21px}
.cfd .measure .what {display:block;font-size:16px;color:var(--cf-color-primary-700);font-weight:500;margin-top:var(--cf-space-1)}
.cfd .measure p {margin-top:var(--cf-space-2);color:var(--cf-color-text-secondary)}
.cfd .measure .dir {color:var(--cf-color-text-primary);font-weight:500}
.cfd .measure {padding-top:var(--cf-space-5);border-top:2px solid var(--cf-color-primary-900)}
.cfd .results-where {margin-top:var(--cf-space-10);max-width:none}
.cfd .timeline {list-style:none;margin:var(--cf-space-10) 0 0;padding:0;display:grid;gap:var(--cf-space-6);position:relative}
.cfd .timeline li {position:relative;padding-left:var(--cf-space-8)}
.cfd .timeline li::before {content:"";position:absolute;left:0;top:10px;width:14px;height:14px;border-radius:50%;background:var(--cf-color-surface);border:3px solid var(--cf-color-primary-600)}
.cfd .timeline li:first-child::before {border-color:var(--cf-color-accent-600);background:var(--cf-color-accent-600)}
.cfd .timeline::before {content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;background:var(--cf-color-border-strong)}
.cfd .yr {display:block;font-size:30px;font-weight:700;color:var(--cf-color-primary-900);letter-spacing:-0.02em;line-height:1.2}
.cfd .timeline b {display:block;color:var(--cf-color-text-primary);font-weight:500}
.cfd .timeline span.tl {color:var(--cf-color-text-secondary)}
.cfd .wide {margin:var(--cf-space-12) 0 0}
.cfd .wide img {display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--cf-radius-large)}
.cfd .cannot {margin-top:var(--cf-space-10);display:grid;gap:var(--cf-space-6)}
.cfd .cannot h3 {font-size:22px;margin-bottom:var(--cf-space-2)}
.cfd .cannot p {color:var(--cf-color-text-secondary)}
.cfd details.more {margin-top:var(--cf-space-8);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-medium);background:var(--cf-color-surface);max-width:none}
.cfd details summary {cursor:pointer;min-height:44px;padding:var(--cf-space-4) var(--cf-space-5);font-weight:600;color:var(--cf-color-primary-900);font-size:18px}
.cfd details .inner {padding:0 var(--cf-space-5) var(--cf-space-5);color:var(--cf-color-text-secondary)}
.cfd details .inner p+p {margin-top:var(--cf-space-3)}
.cfd .faq {max-width:none}
.cfd .faq details {border-top:1px solid var(--cf-color-border)}
.cfd .faq details:last-child {border-bottom:1px solid var(--cf-color-border)}
.cfd .faq summary {padding-left:0;padding-right:0}
.cfd .faq details div {padding:0 0 var(--cf-space-5);color:var(--cf-color-text-secondary);max-width:68ch}
.cfd .close {background:var(--cf-color-primary-900);position:relative;overflow:hidden}
.cfd .close h2 {color:var(--cf-color-text-inverse);max-width:760px}
.cfd .close p {color:var(--cf-color-primary-100);max-width:60ch;margin-top:var(--cf-space-4);font-size:18px}
.cfd .close .cf-actions {margin-top:var(--cf-space-8)}
.cfd .close .cf-btn {min-height:48px}
.cfd .close .more-link {margin-top:var(--cf-space-8);font-size:17px}
.cfd .close .more-link a:not(:where(.cf-btn)) {color:var(--cf-color-text-inverse);text-decoration:underline}
.cfd .close .inner-wrap {position:relative}
.cfd .ring {display:none}
.cfd .sources {padding:clamp(56px,6vw,80px) 0}
.cfd .sources h2 {font-size:clamp(24px,2.6vw,30px)}
.cfd .sources ol {margin:var(--cf-space-6) 0 0;padding-left:var(--cf-space-6);max-width:none;color:var(--cf-color-text-secondary)}
.cfd .sources li {margin-bottom:var(--cf-space-3);font-size:16px}
.cfd .sources a:not(:where(.cf-btn)) {color:var(--cf-color-link)}
.cfd .sources a:not(:where(.cf-btn)):hover {color:var(--cf-color-link-hover)}
.cfd .related {margin-top:var(--cf-space-6);font-size:17px}
.cfd .notice {margin-top:var(--cf-space-8);padding:var(--cf-space-5);background:var(--cf-color-background-soft);border-radius:var(--cf-radius-medium);max-width:none;font-size:16px;color:var(--cf-color-text-secondary)}
@media (min-width:720px) {.cfd .wrap {padding:0 var(--cf-space-8)}
.cfd .nudge {flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center}
.cfd .nudge p {flex:1 1 auto;min-width:0}
.cfd .nudge .cf-actions {flex:0 0 auto}
.cfd .poster {aspect-ratio:4/3;padding:var(--cf-space-8)}
.cfd .trial {padding:var(--cf-space-10) var(--cf-space-8)}
.cfd .equation {grid-template-columns:1fr auto 1fr auto 1fr;padding:var(--cf-space-10) var(--cf-space-8)}
.cfd main section#reading-results .wrap .equation+p.eq-note {margin-top:var(--cf-space-10)}
.cfd .measures {grid-template-columns:repeat(3,1fr);gap:var(--cf-space-8)}
.cfd .wide img {aspect-ratio:21/9}
.cfd .cannot {grid-template-columns:1fr 1fr;gap:var(--cf-space-10)}}
@media (min-width:960px) {.cfd .hero {padding:var(--cf-space-10) 0 var(--cf-space-12)}
.cfd .hero-grid {grid-template-columns:45fr 55fr;gap:var(--cf-space-12);align-items:center}
.cfd .steps {grid-template-columns:repeat(3,1fr);gap:var(--cf-space-8)}
.cfd .steps li {grid-template-columns:1fr;padding-bottom:0;align-content:start}
.cfd .step-n {grid-row:auto;margin-bottom:var(--cf-space-3)}
.cfd .steps li:not(:last-child)::after {left:52px;right:calc(-1 * var(--cf-space-8) + 12px);top:19px;bottom:auto;width:auto;height:2px}
.cfd .steps strong {padding-top:0}}
@media (min-width:1080px) {.cfd .panel {grid-template-columns:7fr 5fr;gap:var(--cf-space-10);align-items:center}
.cfd .abil {grid-template-columns:1fr 1fr;gap:var(--cf-space-12)}
.cfd .timeline {grid-template-columns:repeat(4,1fr);gap:var(--cf-space-6)}
.cfd .timeline::before {left:0;right:0;top:6px;bottom:auto;width:auto;height:2px}
.cfd .timeline li {padding-left:0;padding-top:var(--cf-space-8)}
.cfd .timeline li::before {top:0}
.cfd .ring {display:block;position:absolute;right:-120px;top:50%;width:420px;height:420px;margin-top:-210px;border-radius:50%;border:40px solid var(--cf-color-primary-800)}
.cfd .close .inner-wrap>* {max-width:640px}}
@media (prefers-reduced-motion:reduce) {.cfd .hero-start.cf-btn, .cfd .play {transition:none}
.cfd .hero-start.cf-btn:hover, .cfd .play:hover {transform:none}}