@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172923;--muted:#66746d;--line:#e2e6de;--paper:#f7f8f3;--purple:#6658dd;--purple-dark:#4336b4;--purple-light:#efedff;--green:#137a5b;--green-dark:#085f47;--green-light:#e6f5ed;--orange:#efb25b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope','DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e7a34b;outline-offset:3px}
.site-shell{max-width:1600px;margin:auto;padding:0 clamp(20px,5vw,82px)}
.topbar{height:88px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #dbe0d8}.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:900;letter-spacing:.12em;line-height:1.1}.brand small{display:block;font-size:10px;letter-spacing:.25em;margin-top:4px;color:#627169}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font-family:Georgia,serif;font-size:27px;letter-spacing:0}.lesson-badge{margin:auto;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:#466052;padding:10px 16px;background:#edf2e8;border:1px solid #dfe7d9;border-radius:100px}.live-dot{width:7px;height:7px;border-radius:50%;background:#42aa70;box-shadow:0 0 0 4px #d8edda}.top-link{font-size:12px;font-weight:800;border-bottom:1px solid #a9b4aa;padding-bottom:3px}
.hero{min-height:570px;display:grid;grid-template-columns:1fr .94fr;align-items:center;gap:30px;padding:70px 0 80px}.hero-copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:11px;color:#6c766c;font-size:11px;font-weight:900;letter-spacing:.18em}.eyebrow-line{height:2px;width:20px;background:var(--orange)}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{letter-spacing:-.055em}h1{font-size:clamp(53px,6.5vw,96px);line-height:1.06;margin:23px 0 29px;font-weight:800}h1 em{font-family:Georgia,serif;color:var(--purple);font-weight:400;font-style:italic;letter-spacing:-.065em}.hero-copy>p{font-size:17px;line-height:1.8;max-width:560px;color:#5d6962;margin-bottom:33px}.hero-actions{display:flex;align-items:center;gap:20px}.primary-link{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:white;border-radius:13px;padding:17px 22px;font-weight:800;font-size:13px;transition:transform .2s,background .2s}.primary-link:hover{transform:translateY(-3px);background:#325347}.hero-note{font-size:11px;color:#8b958b}
.hero-art{height:465px;position:relative;display:flex;align-items:center;justify-content:center;perspective:1000px}.art-orbit{position:absolute;border:1px solid #dfe3db;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:75%;height:80%}.orbit-two{width:95%;height:98%;border-style:dashed}.art-left,.art-right{position:absolute;width:235px;height:305px;padding:23px;border-radius:22px;box-shadow:0 30px 50px #29353016;display:flex;flex-direction:column;overflow:hidden}.art-left{background:#e6e2ff;color:#5140cb;transform:translate(-80px,14px) rotate(-10deg);z-index:2}.art-right{background:#b8e4ce;color:#0e654b;transform:translate(106px,-20px) rotate(9deg);z-index:1}.art-left span,.art-right span{font-size:9px;letter-spacing:.17em;font-weight:900}.art-left strong,.art-right strong{margin-top:70px;font-size:20px;letter-spacing:-.055em}.art-left small,.art-right small{font-size:11px;margin-top:5px;opacity:.75}.art-left b,.art-right b{position:absolute;bottom:-65px;right:-5px;font-size:225px;font-weight:400;line-height:1;opacity:.26}.art-coin{position:absolute;z-index:4;width:148px;height:148px;border-radius:50%;background:#f3bd66;color:#2f362b;box-shadow:0 18px 0 #dd9e46,0 32px 35px #36443038;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;font-weight:900;letter-spacing:-.08em;transform:translate(15px,70px) rotate(8deg)}.art-coin small{font-size:11px;letter-spacing:.08em;margin-top:3px}.art-spark{position:absolute;font-size:36px;color:#e0a548}.art-spark.a{top:20px;left:20%}.art-spark.b{right:4%;bottom:35px;font-size:20px}
.lab-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:52px 0 38px;border-top:1px solid #dbe0d8}.lab-intro h2,.results-header h2{font-size:clamp(34px,3.5vw,52px);line-height:1.12;margin:15px 0 0;font-weight:800}.lab-intro>p{max-width:420px;font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 6px}.lab-intro b{color:var(--ink)}
.period-bar{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#e9eee4;border:1px solid #dfe7da;border-radius:19px;padding:20px 27px;margin-bottom:20px}.period-title{display:flex;align-items:center;gap:16px}.period-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:#d7e1d0;color:#4d624a;font-size:24px}.period-title b,.period-title small{display:block}.period-title b{font-size:14px}.period-title small{font-size:11px;color:#748277;margin-top:3px}.period-control{display:flex;align-items:center;gap:20px;width:45%}.period-control input{width:100%;accent-color:var(--purple);cursor:pointer}.period-control output{white-space:nowrap;min-width:69px;font-size:15px;font-weight:900}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.model{min-width:0;border:1px solid #e3e6df;border-radius:22px;background:white;padding:clamp(22px,2.6vw,39px);box-shadow:0 15px 55px #21382606}.model-union{--accent:var(--purple);--pale:var(--purple-light);--soft:#f8f7ff}.model-bank{--accent:var(--green);--pale:var(--green-light);--soft:#f7fcf9}.model-top{display:flex;justify-content:space-between;align-items:start}.model-number{font-size:11px;color:#88958a;font-weight:900;letter-spacing:.16em}.model-symbol{width:57px;height:57px;background:var(--pale);color:var(--accent);display:grid;place-items:center;border-radius:17px;font-size:35px;line-height:1}.model-heading{margin-top:-20px;min-height:155px}.model-kicker{font-size:10px;letter-spacing:.17em;color:var(--accent);font-weight:900}.model-heading h3{font-size:clamp(31px,3vw,43px);line-height:1.1;margin:8px 0 12px}.model-heading p{font-size:13px;line-height:1.7;color:#768077;max-width:400px;margin:0}.model-rule{height:1px;background:#edf0e9;margin:25px 0}.step-heading{display:flex;align-items:start;gap:12px;margin-bottom:17px}.step-heading>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--pale);color:var(--accent);font-size:11px;font-weight:900;flex:none}.step-heading h4{margin:0 0 4px;font-size:15px;letter-spacing:-.02em}.step-heading p{color:#89948a;font-size:11px;margin:0;line-height:1.5}.formula-box{border:1px solid #dddfe0;background:var(--soft);border-radius:13px;padding:15px 16px;transition:border-color .2s}.formula-box:focus-within{border-color:var(--accent)}.formula-label{font-size:9px;letter-spacing:.14em;color:#92a095;font-weight:900;margin-bottom:9px}.formula-line{display:flex;align-items:center;gap:8px;min-height:31px}.formula-prefix{white-space:nowrap;font-family:Georgia,serif;color:var(--accent);font-size:22px;font-style:italic}.formula-prefix sub{font-family:inherit;font-size:11px}.formula-input{width:100%;border:0;outline:none!important;background:transparent;color:var(--ink);font-size:17px;font-weight:700;min-width:0}.formula-input::placeholder{font-size:11px;font-weight:500;color:#aab2a9}.formula-tools{margin-top:12px}.token-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}.token{min-width:35px;height:35px;border:1px solid #e2e7df;border-radius:9px;background:#fff;color:var(--accent);font-size:15px;font-weight:800;transition:transform .14s,background .14s}.token:hover{transform:translateY(-2px);background:var(--pale)}.token.operation{color:#657069;background:#f6f7f4}.token.operation:hover{background:#e9eee8}.token.delete{padding:0 10px;font-size:12px}.builder-actions{display:flex;gap:13px;flex-wrap:wrap;margin:5px 0 0}.text-button{border:0;padding:0;background:none;color:var(--accent);font-size:11px;font-weight:800;border-bottom:1px solid transparent}.text-button:hover{border-bottom-color:currentColor}.clear-button{margin-left:auto;color:#9aa59a}.hint{padding:12px 14px;border-radius:10px;background:var(--pale);color:#45554b;font-size:11px;line-height:1.6;margin:13px 0 0}.mode-switch{display:flex;gap:4px;background:#eef2ec;border-radius:10px;padding:4px;margin-bottom:12px;width:max-content;max-width:100%}.mode{border:0;background:transparent;border-radius:7px;color:#75847a;font-size:10px;font-weight:800;padding:8px 11px}.mode.active{color:var(--green);background:#fff;box-shadow:0 1px 5px #243e2c12}.inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.input-card{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid #e8ece5;border-radius:11px;background:#fff}.input-card.wide{grid-column:1/-1}.input-letter{display:grid;place-items:center;min-width:31px;height:31px;border-radius:8px;background:var(--pale);color:var(--accent);font-family:Georgia,serif;font-size:17px;font-style:italic}.input-content{flex:1;min-width:0}.input-content label{display:block;color:#7e8b81;font-size:10px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-content input{width:100%;border:0;outline:0;background:none;color:var(--ink);font-size:15px;font-weight:900;padding:0}.input-unit{font-size:10px;color:#a6b1a6;white-space:nowrap}.model-footnote{font-size:10px;line-height:1.65;color:#9ca69c;margin-top:17px}
.calculate-wrap{text-align:center;padding:38px 0 72px}.calculate-button{display:inline-flex;align-items:center;gap:15px;background:var(--ink);border:0;color:#fff;border-radius:15px;padding:14px 22px 14px 15px;font-weight:900;font-size:15px;box-shadow:0 15px 22px #17372921;transition:transform .2s,box-shadow .2s}.calculate-button:hover{transform:translateY(-3px);box-shadow:0 20px 28px #1737292e}.calculate-button>span:last-child{margin-left:20px}.calculate-icon{display:grid;place-items:center;background:#3d5f50;width:36px;height:36px;border-radius:10px;font-size:21px;font-weight:400}.error-message{color:#a13b32;font-size:12px;font-weight:700;min-height:18px;margin:13px 0 0}
.results{padding:62px 0 65px;border-top:1px solid #dbe0d8;animation:rise .65s ease both}.results-header{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:30px}.results-header>p{max-width:380px;color:#617067;font-size:14px;line-height:1.7;margin:0 0 4px}.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}.stat-card{border-radius:16px;padding:25px;min-height:164px;display:flex;flex-direction:column}.stat-card span{font-size:9px;letter-spacing:.15em;font-weight:900;opacity:.7}.stat-card strong{font-size:clamp(24px,2.8vw,40px);letter-spacing:-.055em;margin-top:auto;white-space:nowrap}.stat-card small{font-size:10px;opacity:.75;margin-top:4px}.union-stat{background:#ebe8ff;color:#584ac5}.bank-stat{background:#dff1e7;color:#0e7052}.difference-stat{background:#f0e6d7;color:#785525}.chart-card{background:white;border:1px solid #e3e8df;border-radius:19px;padding:26px 27px;margin:18px 0}.chart-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.chart-head h3{font-size:22px;margin:0 0 6px}.chart-head p{color:#89958b;font-size:11px;margin:0}.legend{display:flex;gap:16px;align-items:center;color:#758278;font-size:10px;font-weight:700;white-space:nowrap}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}.legend-union{background:var(--purple)}.legend-bank{background:var(--green)}.chart-wrap{position:relative;margin-top:10px}.chart-wrap svg{width:100%;height:auto;overflow:visible;display:block}.chart-tooltip{position:absolute;pointer-events:none;background:#24382e;color:#fff;padding:10px 12px;border-radius:8px;font-size:11px;line-height:1.65;box-shadow:0 10px 30px #203b2e33;z-index:3;white-space:nowrap}.chart-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart-line.union{stroke:var(--purple)}.chart-line.bank{stroke:var(--green)}.chart-fill.union{fill:#6b59e60e}.chart-fill.bank{fill:#14805d0c}.chart-grid{stroke:#e8ede6;stroke-width:1}.chart-label{font:11px 'Manrope',sans-serif;fill:#99a49a}.chart-hit{fill:transparent;cursor:crosshair}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.insight-grid>div{border:1px solid #e0e6dc;border-radius:13px;padding:18px 20px}.insight-grid span,.insight-grid strong,.insight-grid small{display:block}.insight-grid span{font-size:9px;font-weight:900;letter-spacing:.1em;color:#99a69a}.insight-grid strong{font-size:21px;letter-spacing:-.04em;margin:9px 0 2px}.insight-grid small{font-size:10px;color:#9ba79d}.discussion{display:flex;align-items:center;gap:17px;background:#e7ecdf;border-radius:15px;padding:19px 24px;margin-top:19px}.discussion-mark{font-family:Georgia,serif;font-size:37px;color:#779074}.discussion strong{font-size:12px}.discussion p{margin:4px 0 0;font-size:11px;color:#71806f;line-height:1.6}
.how{padding:60px 0 75px;border-top:1px solid #dbe0d8}.how h2{font-size:clamp(33px,3.5vw,48px);margin:14px 0 31px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.how-grid>div{border-top:2px solid #d7dfd4;padding-top:18px}.how-grid span{font-size:11px;color:#b4beb0;font-weight:800}.how-grid h3{font-size:19px;margin:12px 0 8px;letter-spacing:-.035em}.how-grid p{font-size:12px;color:#7c887d;line-height:1.8;max-width:350px}footer{display:flex;justify-content:space-between;gap:15px;padding:25px 0 35px;border-top:1px solid #dbe0d8;color:#8c978d;font-size:10px}footer span:first-child{color:#506351;font-weight:900;letter-spacing:.15em}footer a{font-weight:800;color:#4c6952}
[hidden]{display:none!important}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1050px){.hero{grid-template-columns:1fr .8fr}.hero-art{transform:scale(.83);transform-origin:center}.model-heading{margin-top:0}.period-control{width:50%}}@media(max-width:780px){.site-shell{padding:0 20px}.topbar{height:70px}.lesson-badge{margin-left:auto;margin-right:0}.top-link{display:none}.hero{grid-template-columns:1fr;gap:0;padding:54px 0 24px}.hero-art{height:330px;transform:scale(.78)}.hero-copy>p{max-width:620px}.lab-intro{display:block;padding-top:42px}.lab-intro>p{margin-top:15px;max-width:620px}.comparison{grid-template-columns:1fr}.model-heading{min-height:0}.model-rule{margin:23px 0}.period-bar{flex-wrap:wrap}.period-control{width:100%}.results-header{display:block}.results-header>p{margin-top:18px}.stat-grid,.insight-grid,.how-grid{grid-template-columns:1fr 1fr}.stat-card:last-child,.insight-grid>div:last-child,.how-grid>div:last-child{grid-column:1/-1}}@media(max-width:520px){.brand{font-size:10px}.brand-mark{width:34px;height:34px}.lesson-badge{font-size:9px;padding:8px 9px}.hero{padding:45px 0 16px}.hero h1{font-size:clamp(48px,14vw,67px)}.hero-copy>p{font-size:14px}.hero-actions{flex-wrap:wrap}.hero-art{height:300px;transform:scale(.67);margin:-15px -30px}.lab-intro h2,.results-header h2{font-size:36px}.period-bar{padding:17px}.model{padding:22px}.inputs-grid{gap:8px}.input-card{padding:9px 8px;gap:7px}.input-content label{font-size:9px}.input-content input{font-size:14px}.input-letter{min-width:26px;height:26px;font-size:14px}.input-unit{font-size:8px}.stat-grid,.insight-grid,.how-grid{grid-template-columns:1fr}.stat-card:last-child,.insight-grid>div:last-child,.how-grid>div:last-child{grid-column:auto}.stat-card{min-height:125px}.chart-card{padding:17px 13px}.chart-head{display:block}.legend{margin-top:15px}.chart-wrap svg{min-height:200px}.how{padding-bottom:42px}footer{flex-wrap:wrap}}