:root{--cream:#f8f6f0;--ink:#171d1a;--muted:#626a62;--line:#dcded6;--green:#214f3e;--mint:#cce8c9;--pale:#e9f1e6;--orange:#c66e48;--white:#fffefa;--mono:"JetBrains Mono",monospace;--font:"DM Sans",system-ui,sans-serif;--display:"Space Grotesk",system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 var(--font)}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #74a786;outline-offset:3px}.container{width:min(1160px,calc(100% - 48px));margin:auto}.site-head{border-bottom:1px solid var(--line);background:var(--cream);position:relative;z-index:3}.head-inner{min-height:77px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{font:700 1.35rem var(--display);letter-spacing:-.055em;text-decoration:none}.brand span{color:var(--green)}.brand small{font:700 .64rem var(--mono);letter-spacing:.045em;color:var(--muted)}.site-head nav{display:flex;gap:22px;flex-wrap:wrap}.site-head nav a{font-weight:700;text-decoration:none;font-size:.78rem;color:#515a52}.site-head nav a:hover{color:var(--green)}.hero{padding:73px 0 63px}.eyebrow,.mini-label{font:700 .7rem var(--mono);letter-spacing:.13em;color:var(--green)}.eyebrow.muted{color:#637368}.dot{width:8px;height:8px;border-radius:50%;background:#699d71;display:inline-block;box-shadow:0 0 0 5px #e1efde;margin-right:11px}.hero-grid{display:grid;grid-template-columns:1.3fr .83fr;gap:62px;align-items:center}.hero h1{font:700 clamp(3.1rem,6.4vw,5.9rem)/1.02 var(--display);letter-spacing:-.073em;margin:18px 0 22px;max-width:820px}.hero h1 em{font-style:normal;color:#23725b}.sub{max-width:640px;color:#4e5750;font-size:1.09rem;line-height:1.65}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.hero-points span{font:700 .72rem var(--mono);color:#395642;border:1px solid #c7d7ca;background:#edf4e8;padding:8px 10px;border-radius:7px}.terminal{background:#192821;border-radius:16px;box-shadow:13px 13px 0 #e0e4d9;color:#ebf8e6;overflow:hidden;transform:rotate(1deg)}.terminal-top{padding:14px 18px;border-bottom:1px solid #3b5548;display:flex;justify-content:space-between;gap:10px;font:500 .68rem var(--mono);color:#a0b7aa}.terminal-top span:first-child{color:#b8e5a8;letter-spacing:.1em}.terminal pre{padding:24px 22px 15px;overflow:auto;font:500 .79rem/2 var(--mono)}.code-muted{color:#86a598}.code-key{color:#c7e9bc}.code-val{color:#f4b88d}.terminal-foot{border-top:1px solid #3b5548;padding:13px 18px;font:600 .67rem var(--mono);color:#b4c9bd;display:flex;justify-content:space-between}.terminal-foot b{font-size:1.1rem;color:#bfe6be}.course{padding:36px 0 65px;border-top:1px solid var(--line)}h2{font:700 clamp(1.55rem,2.9vw,2.4rem)/1.2 var(--display);letter-spacing:-.045em;margin:11px 0 25px}.track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.track-card{text-align:left;display:flex;min-height:278px;flex-direction:column;gap:12px;padding:24px;background:var(--white);border:1.5px solid var(--line);border-radius:13px;transition:transform .17s,border-color .17s,box-shadow .17s;color:var(--ink)}.track-card:hover,.track-card.selected{border-color:#658f77;box-shadow:4px 5px 0 #cfe3d2;transform:translateY(-2px)}.card-index{display:flex;justify-content:space-between;font:800 .75rem var(--mono);color:var(--green)}.card-index span{font:600 .64rem var(--mono);color:#7a867c}.card-symbol{font:500 2.4rem var(--display);color:#368064;line-height:1}.track-card strong{font:700 1.38rem/1.15 var(--display);letter-spacing:-.04em}.track-card>span:nth-last-child(2){color:#596258;font-size:.85rem;line-height:1.55;flex:1}.card-meta{font:700 .64rem var(--mono);color:#607365;display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid #e6e9e1}.card-meta b{font-size:.99rem}.work{border-top:1px solid var(--line);padding:48px 0 30px}.work-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.work-head h2{margin:8px 0}.work-head p:last-child{font-size:.86rem;color:var(--muted);margin:0}.progress-indicator{min-width:160px;font:700 .66rem var(--mono);color:#38634d;text-align:right}.progress-track{height:5px;background:#dce5d8;border-radius:9px;margin-top:9px;overflow:hidden}.progress-track i{height:100%;display:block;background:#2a775b;transition:width .2s}.work-grid{display:grid;grid-template-columns:202px minmax(0,1fr) 337px;gap:14px;align-items:stretch}.steps-box,.editor-panel,.preview-panel{border-radius:13px;border:1px solid var(--line);background:var(--white);min-width:0}.steps-box{padding:21px 12px}.steps-box .mini-label{padding:0 9px}.steps-box ol{list-style:none;padding:0;margin:17px 0 0}.steps-box li{margin:2px 0}.step-btn{display:flex;align-items:center;gap:9px;width:100%;padding:12px 9px;text-align:left;background:transparent;border:0;border-radius:7px;color:#6f756f;font-weight:700;font-size:.77rem;line-height:1.4}.step-btn .bubble{width:25px;height:25px;min-width:25px;display:grid;place-items:center;border-radius:7px;background:#eff0e9;color:#637467;font:700 .64rem var(--mono)}.step-btn.current{background:#e8f2e9;color:#1c503a}.step-btn.current .bubble{background:#2d684d;color:white}.step-btn.done .bubble{background:#d5ead3;color:#205641}.step-btn:disabled{opacity:.6;cursor:not-allowed}.privacy{border-top:1px solid var(--line);margin:25px 8px 0;padding-top:19px}.privacy b{font:700 .68rem var(--mono);color:#3b7951}.privacy p{color:var(--muted);font-size:.72rem;line-height:1.6;margin:8px 0}.editor-panel{padding:24px;min-height:535px}.panel-top,.preview-top{display:flex;justify-content:space-between;gap:12px;align-items:center;font:700 .65rem var(--mono);color:#597364;letter-spacing:.055em}.editor-panel h3{font:700 1.9rem/1.17 var(--display);letter-spacing:-.05em;margin:19px 0 9px}.editor-panel>p{font-size:.87rem;color:var(--muted);line-height:1.6}.field{margin:19px 0 0}.field label{display:block;font-size:.79rem;font-weight:800;margin-bottom:7px}.field .help{color:#66746a;font-size:.74rem;margin:5px 0 0}.field input:not([type=checkbox]),.field textarea,.field select{width:100%;background:#fff;border:1px solid #bec9bf;border-radius:7px;padding:11px 12px;color:#233129;font-size:.88rem}.field textarea{resize:vertical;min-height:94px;line-height:1.5}.field .checkrow{display:flex;gap:9px;align-items:flex-start;cursor:pointer}.field .checkrow input{margin-top:4px;accent-color:#226b4a;min-width:16px;min-height:16px}.field .mini{font:600 .7rem var(--mono);color:#536755}.editor-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px}.btn{border:1px solid transparent;border-radius:8px;padding:12px 15px;font-weight:800;font-size:.78rem;min-height:44px}.btn.primary{background:#215b43;color:#fff}.btn.primary:hover{background:#143f2e}.btn.ghost{background:#f1f3ec;border-color:#d6ddd1;color:#2a4435}.btn:disabled{opacity:.45;cursor:not-allowed}.tip{margin-top:25px;border-top:1px solid #e4e8e0;padding-top:16px}.tip span{font:700 .67rem var(--mono);color:#a45834}.tip p{font-size:.8rem;color:#5f655e;line-height:1.6;margin:8px 0 0}.error{color:#a33426!important;font-weight:700}.preview-panel{background:#f4f7f1;padding:20px;min-height:535px;overflow:hidden}.live{color:#47815b;font-size:.6rem}.live i{display:inline-block;width:6px;height:6px;background:#65a578;border-radius:50%;margin-right:4px}.preview-body{margin:22px 0 0}.preview-body h4{font:700 1.2rem var(--display);margin:7px 0}.preview-body p{font-size:.83rem;color:#556058;line-height:1.58}.flag{font:700 .65rem var(--mono);color:#397651;letter-spacing:.08em}.preview-card{background:white;border:1px solid #d6dfd4;border-radius:11px;padding:18px;margin:15px 0;overflow-wrap:anywhere}.preview-card small{display:block;font:.7rem var(--mono);color:#6d7a6f}.preview-card strong{display:block;font:700 1.08rem var(--display);margin:5px 0 12px}.flow-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.flow-row span{border:1px solid #bad4c0;border-radius:6px;background:#edf6ed;padding:7px;font:700 .64rem var(--mono)}.flow-row i{font-style:normal;color:#679079}.test-input{display:flex;gap:7px;margin-top:13px}.test-input input{min-width:0;flex:1;padding:10px 9px;border:1px solid #becbbf;border-radius:6px;font-size:.8rem;background:#fff}.test-input button{border:0;background:#215b43;color:#fff;border-radius:6px;padding:10px;font-weight:700;font-size:.73rem}.test-output{margin-top:12px;font-size:.8rem;line-height:1.55;background:white;border:1px solid #dce4d8;padding:13px;border-radius:8px;overflow-wrap:anywhere}.test-output b{color:#295c44}.test-output small{display:block;color:#677769;margin-bottom:5px}.trace-box{margin-top:16px;border:1px solid #d1dcd0;border-radius:10px;background:#fff;padding:12px}.trace-head{display:flex;justify-content:space-between;font:700 .63rem var(--mono);color:#42684e}.trace-head span{color:#8d5e3c}.trace-box ol{list-style:none;margin:8px 0 0;padding:0}.trace-box li{padding:8px 0;border-top:1px solid #eef0eb;font:.69rem/1.5 var(--mono);overflow-wrap:anywhere}.trace-box li strong{color:#245e44}.dash-value{font:700 3.1rem var(--display);letter-spacing:-.08em;line-height:1}.funnel-row{margin:13px 0;font-size:.73rem;font-weight:700}.funnel-line{height:15px;margin:5px 0;border-radius:4px;background:#e6ece3;overflow:hidden}.funnel-line i{display:block;height:100%;background:#33815c;border-radius:4px;min-width:1px}.funnel-row .subline{display:flex;justify-content:space-between}.code-note{font:.73rem/1.6 var(--mono);color:#5b755f;background:#e8f1e6;border:1px solid #cbdfc9;border-radius:9px;padding:12px}.export-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.export-actions button{border:1px solid #2e6a50;border-radius:7px;background:#255e46;color:white;padding:11px;font-weight:800;font-size:.73rem}.export-actions button.secondary{background:white;color:#285b45}.preview-card pre{white-space:pre-wrap;word-break:break-word;font:.69rem/1.5 var(--mono)}.build-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:19px 0;font-size:.8rem;color:#697168}.text-btn{background:none;border:0;color:#2c7056;text-decoration:underline;font-weight:700}.learn-more{padding:60px 0 30px;border-top:1px solid var(--line)}.learn-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:90px}.learn-grid p{color:#5a635b;line-height:1.7;font-size:.9rem}.reading{display:flex;flex-direction:column;gap:11px}.reading strong{font:700 .72rem var(--mono);color:#a2603e;margin-bottom:5px}.reading a{padding:11px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:.82rem;text-decoration:none;color:#21563e}.reading a:hover{text-decoration:underline}footer{border-top:1px solid var(--line);padding:24px 0;color:#6e766e;font-size:.71rem}.foot-inner{display:flex;justify-content:space-between;gap:24px}@media(max-width:1080px){.work-grid{grid-template-columns:178px minmax(0,1fr)}.preview-panel{grid-column:1/-1;min-height:auto}.steps-box{grid-row:1}.editor-panel{grid-row:1}.hero-grid{gap:30px}.terminal pre{font-size:.67rem}}@media(max-width:720px){.container{width:min(100% - 32px,1160px)}.head-inner{align-items:flex-start;padding:16px 0;flex-direction:column;gap:12px}.site-head nav{gap:15px}.site-head nav a{font-size:.69rem}.hero{padding:48px 0}.hero-grid,.track-grid,.work-grid,.learn-grid{grid-template-columns:1fr}.terminal{display:none}.hero h1{font-size:clamp(2.8rem,11.2vw,4.4rem)}.track-card{min-height:230px}.steps-box,.editor-panel,.preview-panel{grid-row:auto;grid-column:1}.steps-box{padding:12px}.steps-box ol{display:flex;overflow:auto;gap:4px;margin:8px 0}.step-btn{min-width:108px;font-size:.66rem;padding:8px 5px}.step-btn .bubble{width:20px;min-width:20px;height:20px}.privacy{margin:8px 8px 0;padding:10px 0 0}.privacy p{margin:3px 0}.editor-panel{min-height:0}.preview-panel{min-height:0}.work-head{align-items:start}.progress-indicator{min-width:95px}.build-bottom,.foot-inner{flex-direction:column;align-items:flex-start}.learn-grid{gap:23px}.hero-points{gap:6px}.hero-points span{font-size:.62rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}