@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{--brand-ink: #1f2028;--brand-paper: #f8fbfb;--brand-canvas: #c7e5e1;--brand-pink: #d9308b;--brand-pink-soft: #f8d9e9;--brand-blue: #4a8ad4;--brand-blue-deep: #286cae;--brand-blue-soft: #e1eefb;--brand-yellow: #f9df6f;--brand-gold: #f7ce46;font-family:Manrope,sans-serif;color:var(--brand-ink);background:var(--brand-canvas);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:70px;padding:0 max(24px,calc((100vw - 1400px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9d4c8;background:#f4f1e9f0;position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;color:#17231e;font-weight:800;letter-spacing:.12em;text-decoration:none}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#f4f1e9;background:#17231e}.topbar nav{display:flex;gap:34px}.topbar nav a{color:#536059;font-size:13px;font-weight:700;text-decoration:none}.course-tag{border:1px solid #c9c3b7;border-radius:999px;padding:8px 13px;font:500 11px DM Mono,monospace;text-transform:uppercase}.hero{max-width:900px;margin:0 auto;padding:90px 24px 72px;text-align:center}.eyebrow,.step-label{color:#33705d;display:inline-flex;align-items:center;gap:8px;font:500 11px DM Mono,monospace;letter-spacing:.12em}.hero h1{margin:20px 0 16px;font-size:clamp(48px,7vw,86px);line-height:.98;letter-spacing:-.065em}.hero p{max-width:650px;margin:0 auto;color:#59655f;font-size:18px;line-height:1.65}.hero-link{display:inline-flex;align-items:center;gap:8px;margin-top:30px;color:#17231e;font-weight:800;text-underline-offset:5px}.lab{width:min(1400px,calc(100% - 34px));margin:0 auto;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden;border:1px solid #cfc9bc;border-radius:18px;background:#faf8f2;box-shadow:0 24px 70px #28302b1a}.control-panel{padding:28px;border-right:1px solid #d8d3c7;background:#ede8dd}.section-heading,.visualizer-heading{display:flex;gap:13px;align-items:flex-start}.section-heading{padding-bottom:24px;border-bottom:1px solid #d4cec1}.section-heading>span,.visualizer-heading>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;color:#fff;font:500 11px/1 DM Mono}.section-heading p,.section-heading h2,.visualizer-heading p,.visualizer-heading h2{margin:0}.section-heading p,.visualizer-heading p{color:#69736e;font-size:11px;line-height:normal;text-transform:uppercase;letter-spacing:.08em}.section-heading h2,.visualizer-heading h2{margin-top:3px;font-size:20px;line-height:normal}.field{display:grid;gap:8px;margin-top:23px}.field>span{font-size:12px;font-weight:800}.field small{color:#68736d;font-size:11px;line-height:1.5}.field textarea,.field select,.capacity-grid input{width:100%;border:1px solid #c8c2b6;border-radius:9px;color:#17231e;background:#faf8f2;outline:none}.field textarea:focus,.field select:focus,.capacity-grid input:focus{border-color:#397664;box-shadow:0 0 0 3px #3976641f}.field textarea{height:80px;resize:vertical;padding:12px;font:500 13px/1.6 DM Mono,monospace}.select-wrap{position:relative}.select-wrap select{height:44px;padding:0 38px 0 12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:13px;font-weight:700}.select-wrap svg{position:absolute;right:12px;top:14px;pointer-events:none}.example-row{display:flex;gap:6px;margin-top:9px}.example-row button{border:1px solid #ccc5b9;border-radius:999px;background:transparent;padding:6px 9px;color:#59645e;font-size:10px;font-weight:700}.example-row button:hover{background:#faf8f2;color:#17231e}.capacity-settings{margin-top:22px;padding:14px 0;border-top:1px solid #d4cec1;border-bottom:1px solid #d4cec1}.capacity-settings summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:12px;font-weight:800}.capacity-settings summary svg:last-child{margin-left:auto}.capacity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.capacity-grid label span{display:block;margin-bottom:5px;color:#68736d;font-size:10px}.capacity-grid input{height:36px;padding:0 8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:41px;border:1px solid #bdb7ac;border-radius:8px;background:transparent;color:#344139;font-size:12px;font-weight:800}.actions .primary{grid-column:1 / -1;border-color:#1c4b3d;color:#fff;background:#1c4b3d}.actions button:disabled{opacity:.45;cursor:not-allowed}.error-banner{padding:10px;border-radius:8px;color:#9c3327;background:#f9ded5;font-size:11px}.visualizer{min-width:0;padding:30px}.visualizer-header{display:flex;align-items:flex-end;justify-content:space-between}.visualizer-heading>span{background:var(--brand-blue)}.progress-label{color:#66716b;font:500 11px DM Mono}.progress-track{height:3px;margin:18px 0 26px;overflow:hidden;background:#dfdbd2}.progress-track span{display:block;height:100%;background:#3b7966;transition:width .25s ease}.memory-flow{display:flex;align-items:stretch;min-width:0;overflow-x:auto;padding:5px 0 15px}.resource-card{flex:1 0 150px;min-width:0;border:1px solid #cdd8d3;border-radius:12px;padding:13px;background:#f3f6f4}.resource-card.mint{background:#eef6ef;border-color:#bfd2c2}.resource-card.peach{background:#f7eee6;border-color:#decbbb}.resource-card header{display:flex;align-items:center;gap:9px}.resource-card header>span{display:grid;place-items:center;width:31px;height:31px;flex:0 0 auto;border-radius:8px;background:#fffc}.resource-card h3,.resource-card p{margin:0}.resource-card h3{font-size:12px}.resource-card header p{color:#6a746f;font-size:9px;margin-top:2px}.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:14px}.slots>span{position:relative;height:36px;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd2ce;border-radius:6px;color:#9ca49f;font:500 14px DM Mono}.slots>span small{position:absolute;top:2px;left:4px;font-size:6px;opacity:.6}.slots>span.filled{border-style:solid;color:#26382f;background:#ffffffbf}.slots>span.active,.mapping-rows .active{border-color:#e89452;color:#5a2f0e;background:#ffd9af;box-shadow:0 0 0 3px #e8945226}.flow-arrow{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b948f}.flow-arrow span{margin-bottom:5px;font:400 7px DM Mono;text-transform:uppercase}.mapping-card{flex-basis:160px;background:#f4f2f7;border-color:#d4cedc}.mapping-head{display:flex;justify-content:space-between;margin:15px 4px 5px;color:#8a938e;font:500 7px DM Mono}.mapping-rows{display:grid;gap:4px}.mapping-rows>div{height:25px;display:grid;grid-template-columns:1fr 12px 1fr;align-items:center;text-align:center;border-radius:5px;background:#ffffffb3;font:500 10px DM Mono}.mapping-rows p{margin-top:15px;color:#9aa19e;font-size:9px;text-align:center}.explanation-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin-top:12px;padding:15px;border:1px solid #d8d4ca;border-radius:10px;background:#fffdf8}.outcome-dot{width:10px;height:10px;border-radius:50%;background:#aeb6b2;box-shadow:0 0 0 6px #eef0ee}.outcome-dot.cache_hit{background:#338467}.outcome-dot.tlb_hit,.outcome-dot.page_table_hit{background:#6c6bb0}.outcome-dot.page_fault{background:#d86f43}.explanation-card span{font-size:11px;font-weight:800}.explanation-card p{margin:3px 0 0;color:#67716c;font-size:10px;line-height:1.5}.explanation-card>strong{color:#a75c32;font:500 9px DM Mono}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.stat{padding:13px;border:1px solid #d7d4cb;border-radius:9px;background:#f7f5ef}.stat span{display:block;color:#6a746f;font-size:9px}.stat strong{display:block;margin-top:5px;font:500 19px DM Mono}.stat.accent strong{color:#bb5f3a}.learn-section{width:min(1100px,calc(100% - 40px));margin:52px auto 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.learn-section>div{max-width:670px}.learn-section h2{margin:10px 0;font-size:clamp(32px,4vw,52px);letter-spacing:-.045em}.learn-section p{color:#5e6963;line-height:1.7}.learn-section button{display:flex;align-items:center;gap:8px;white-space:nowrap;border:0;border-bottom:1px solid #17231e;padding:8px 0;background:transparent;font-weight:800}.comparison{width:min(1100px,calc(100% - 40px));margin:0 auto 100px}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.comparison article{padding:23px;border:1px solid #d2cdc1;border-radius:12px;background:#faf8f2}.comparison article.winner{border-color:#55907d;background:#edf4ed}.comparison article>span{color:#527062;font:500 9px DM Mono}.comparison h3{margin:7px 0 20px}.comparison article>strong{font:500 44px DM Mono}.comparison article p{color:#69736e;font-size:11px}.fault-bar{height:4px;margin-top:16px;overflow:hidden;border-radius:4px;background:#ddd8cd}.fault-bar span{display:block;height:100%;background:#d17048}footer{display:flex;align-items:center;justify-content:space-between;padding:30px max(24px,calc((100vw - 1400px)/2));border-top:1px solid #d6d1c6;color:#647069;font-size:11px}footer span{color:#17231e;font-weight:800;letter-spacing:.12em}@media(max-width:1000px){.lab{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid #d8d3c7}.memory-flow{padding-bottom:20px}.topbar nav{display:none}}@media(max-width:650px){.course-tag{display:none}.hero{padding-top:60px}.lab{width:calc(100% - 20px)}.control-panel,.visualizer{padding:20px}.memory-flow{align-items:stretch}.resource-card{flex-basis:145px}.stats-grid{grid-template-columns:repeat(2,1fr)}.learn-section{margin-top:36px;display:block}.comparison-grid{grid-template-columns:1fr}.learn-section button{margin-top:20px}.visualizer-header{align-items:flex-start;gap:10px}.progress-label{white-space:nowrap}footer{align-items:flex-start;gap:15px}}.topbar{border-color:#9fcac5;background:#c7e5e1f0}.brand{color:var(--brand-ink)}.brand-mark{width:38px;height:38px;overflow:hidden;border-radius:11px;background:var(--brand-ink)}.brand-mark img{display:block;width:100%;height:100%}.course-tag{border-color:#83bcb5;background:#ffffff59}.eyebrow{color:var(--brand-pink)}.eyebrow svg{color:var(--brand-pink)}.step-label{color:var(--brand-blue-deep)}.hero-link{color:var(--brand-ink);text-decoration-color:var(--brand-pink)}.lab{border-color:#8fc5be;background:var(--brand-paper);box-shadow:0 24px 70px #1f202824}.control-panel{border-color:#acd3ce;background:#eaf5f3}.section-heading>span{color:#fff;background:var(--brand-pink)}.field textarea,.field select,.capacity-grid input{border-color:#9fcac5;color:var(--brand-ink);background:var(--brand-paper)}.field textarea:focus,.field select:focus,.capacity-grid input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px #4a8ad429}.example-row button:hover{border-color:var(--brand-pink);color:var(--brand-ink);background:var(--brand-pink-soft)}.actions .primary{border-color:var(--brand-blue-deep);background:var(--brand-blue);box-shadow:0 6px 18px #4a8ad440}.progress-track span{background:linear-gradient(90deg,var(--brand-blue),var(--brand-pink))}.resource-card{border-color:#b9d5ee;background:var(--brand-blue-soft)}.resource-card.mint{border-color:#abd6d0;background:#eef9f7}.resource-card.peach{border-color:var(--brand-yellow);background:#fff8d9}.slots>span.active,.mapping-rows .active{border-color:var(--brand-pink);color:#6f1747;background:var(--brand-pink-soft);box-shadow:0 0 0 3px #d9308b24}.mapping-card{border-color:#b9d5ee;background:#f0f6fc}.outcome-dot.cache_hit{background:var(--brand-blue)}.outcome-dot.tlb_hit,.outcome-dot.page_table_hit{background:var(--brand-pink)}.outcome-dot.page_fault,.stat.accent strong{color:#7a5b00;background:var(--brand-gold)}.stat.accent strong{background:transparent}.learn-section button{border-bottom:2px solid var(--brand-pink)}.learn-section .step-label{color:var(--brand-ink);font-weight:800}.comparison article{border-color:#9fcac5;background:var(--brand-paper)}.comparison article.winner{border-color:var(--brand-blue);background:var(--brand-blue-soft)}.comparison article>span{color:var(--brand-blue-deep)}.fault-bar{background:#d7e6e4}.fault-bar span{background:var(--brand-gold)}footer{border-color:#9fcac5}footer span{color:var(--brand-ink)}