:root{--ink:#243942;--teal:#167778;--mint:#69ddc7;--muted:#5f6d77;--line:#e2e9ec}*{box-sizing:border-box}body{margin:0;font:13px Arial,sans-serif;background:#f3f7f9;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);padding:9px 12px;background:#fff;border-radius:5px;color:inherit}button:hover{background:#edf7f4}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #71bdb0;outline-offset:2px}a{color:inherit;text-decoration:none}.platform{height:34px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#f8f9fc;border-bottom:1px solid var(--line)}.platform b{font-size:16px;letter-spacing:-.7px}.platform button{border:0;background:none;font-size:11px;padding:0}header{height:79px;display:flex;align-items:center;gap:14px;padding:0 24px;background:white;border-bottom:1px solid var(--line)}.icon{width:38px;height:40px;border-radius:10px;background:#15323c;color:#8ce4cb;font-size:29px;text-align:center;line-height:40px}h1{font-size:22px;margin:0 0 5px;letter-spacing:-.6px}header small{font-size:11px;color:var(--muted);letter-spacing:1px}header p{border-left:1px solid var(--line);padding-left:22px;margin-left:10px;color:var(--muted);font-size:12px}.languages{margin-left:auto;display:flex;background:#f4f7f7;border-radius:5px;padding:3px}.languages button{padding:6px;border:0;background:none;font-size:11px}.languages button[aria-pressed=true]{background:white;color:var(--teal);box-shadow:0 1px 4px #1232}main{height:calc(100dvh - 113px);display:grid;grid-template-columns:190px minmax(0,1fr) 250px}.library,aside{padding:24px 18px;overflow:auto;background:white}h2{font-size:13px;margin:0 0 14px}h3{font-size:11px;color:var(--muted);font-weight:400;margin-top:30px}.muted{font-size:11px;color:var(--muted);line-height:1.65}.library{display:flex;flex-direction:column}.library nav{display:grid;gap:7px;margin-top:10px}nav button{text-align:left;display:flex;align-items:center;gap:10px;background:#f8fafb;border-color:transparent;padding:13px 8px}nav button span{font-size:26px;color:var(--teal)}nav b{font-size:12px}nav small{display:block;color:var(--muted);font-size:11px;line-height:1.4;margin-top:5px}nav button[aria-pressed=true]{background:#eaf5f1;border-color:#bcded3}.challenge{border:0;border-bottom:1px solid var(--line);font-size:11px;text-align:left;line-height:1.6;border-radius:0}.formula{margin-top:24px;padding:15px 10px;background:#f4f8f8;border-radius:7px}.formula small{font-size:11px;color:var(--muted)}.formula strong{display:block;font:italic 16px Georgia,serif;color:var(--teal);margin:14px 0}.formula sup{font-size:11px}.formula p{font-size:11px;line-height:1.6;color:var(--muted)}.local{font-size:11px;line-height:1.6;color:var(--muted);margin-top:auto;padding-top:22px}.stage{background:#101f2c;color:#b8cbd3;min-width:0;min-height:0;display:grid;grid-template-rows:54px minmax(0,1fr) 48px 80px 124px 28px}.toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid #29404c;background:#192e3b}.toolbar button{background:#223e49;border-color:#385560;color:#bce6df;font-size:11px}.toolbar .primary{background:var(--teal);color:white;border-color:var(--teal)}.toolbar>span{margin-left:auto;font-size:11px;color:#8ca7b2}.visuals{display:grid;grid-template-columns:1fr 1.12fr;min-height:0;min-width:0}.panel{display:flex;flex-direction:column;min-width:0;min-height:0}.atoms-panel{border-right:1px solid #29404c;background:radial-gradient(ellipse at center,#163c45,#0f222e 80%)}.panel-head{display:flex;justify-content:space-between;padding:20px 18px 10px;font-size:11px;gap:10px}.panel-head b{color:#9ce8d4;font-weight:400}.canvas-box{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;padding:12px 15px;min-height:34px;color:#95aab7}.legend span:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;background:#6bdbbf}.legend .dim:before{background:#416071}.legend .gold:before{background:#f1c276}.legend .purple:before{background:#baa5f5}.timeline{display:flex;align-items:center;gap:14px;padding:10px 18px;border-top:1px solid #29404c;font-size:11px;background:#182d3a}.timeline input{flex:1;min-width:30px;margin:0}.timeline output{color:#b1ddcf;width:70px;white-space:nowrap;text-align:right}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #29404c;padding:16px 20px;gap:12px}.metrics div+div{border-left:1px solid #29404c;padding-left:14px}.metrics small{display:block;font-size:11px;letter-spacing:.6px;color:#91a6b2;margin-bottom:7px}.metrics strong{font-size:23px;font-weight:400;color:#edfaf5;font-variant-numeric:tabular-nums}.comparison{display:grid;grid-template-columns:1fr 1fr;padding:14px 20px;border-top:1px solid #29404c;background:#0d1c28;gap:15px;min-height:0}.comparison b{font-size:11px;font-weight:400;color:#c8bcf4}.comparison p{font-size:11px;line-height:1.5;margin:8px 0;color:#b1c3cf}.comparison small{font-size:11px;color:#768f9e;line-height:1.5}.histogram{position:relative;min-height:0}.status{font-size:11px;display:flex;align-items:center;padding:0 16px;background:#182d3a;color:#8fa6b0}aside label{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:600;margin-top:25px}output{color:var(--teal)}input[type=range]{width:100%;accent-color:var(--teal);margin:15px 0 5px;cursor:pointer}select{width:100%;padding:9px;background:#f7f9fa;border:1px solid var(--line);border-radius:4px;color:var(--ink);margin-top:10px}.check{justify-content:flex-start;align-items:center;font-weight:400;line-height:1.5}.check input{accent-color:var(--teal)}hr{border:0;border-top:1px solid var(--line);margin:24px 0}.wide{width:100%;font-size:11px;margin:4px 0}.note{padding:14px;background:#eef7f3;border:1px solid #d8e9e0;border-radius:6px;margin-top:20px}.note b{font-size:12px;color:#226d5d}.note p{font-size:11px;line-height:1.6;color:#55695f;margin-bottom:0}dialog{max-width:600px;border:1px solid #dbe7e3;border-radius:12px;padding:28px;line-height:1.8;color:var(--ink)}dialog::backdrop{background:#041421aa;backdrop-filter:blur(4px)}dialog button{float:right}dialog p{font-size:13px}dialog a{color:var(--teal);text-decoration:underline}
@media(max-width:1150px){main{grid-template-columns:160px minmax(0,1fr) 220px}.library,aside{padding:18px 12px}header p{display:none}.metrics{padding:12px}.metrics strong{font-size:20px}.legend{font-size:11px;padding:10px}.panel-head{padding:16px 12px 8px;font-size:11px}.comparison{padding:12px}.visuals{grid-template-columns:1fr 1fr}}
@media(min-width:801px) and (max-height:720px){header{height:64px}.platform{height:30px}main{height:calc(100dvh - 94px)}.stage{grid-template-rows:46px minmax(0,1fr) 40px 64px 100px 24px}.metrics{padding:10px 14px}.metrics strong{font-size:19px}.comparison{padding:10px 14px}.comparison small{font-size:11px}.panel-head{padding-top:12px}.legend{padding:8px}}
@media(max-width:800px){header{padding:14px;gap:9px;height:auto;flex-wrap:wrap}header h1{font-size:19px}header small{font-size:11px}.languages{margin-left:auto}.icon{width:32px}main{height:auto;display:flex;flex-direction:column}.library{padding:12px}.library h2,.library>.muted,.library h3,.challenge,.formula,.local{display:none}.library nav{display:flex;margin:0;gap:5px}nav button{flex:1;min-width:0;padding:9px 7px}nav small{font-size:11px}nav b{font-size:11px}nav button span{font-size:20px}.stage{height:850px;grid-template-rows:50px minmax(0,1fr) 44px 70px 110px 28px}.visuals{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.atoms-panel{border:0;border-bottom:1px solid #29404c}.panel-head{padding:12px 14px 6px}.legend{padding:7px 14px;min-height:25px}.metrics{gap:5px;padding:12px 10px}.metrics div+div{padding-left:7px}.metrics small{font-size:7px;letter-spacing:0}.metrics strong{font-size:18px}.comparison{gap:8px;padding:10px}.comparison small{font-size:11px}.comparison p{font-size:11px}.toolbar{padding:8px 10px}.toolbar>span{font-size:11px}.timeline{padding:8px 12px}.timeline label{display:none}aside{padding:24px}.status{font-size:11px}.platform{padding:0 14px}}
.stage{grid-template-rows:52px minmax(0,1fr) 44px 80px 148px 28px}.visuals{grid-template-columns:.8fr 1.2fr}.comparison{grid-template-columns:.85fr 1.15fr}.tick-card{background:#f5f8fa;border:1px solid #e0e8ec;border-radius:6px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:12px}.tick-card small{font-size:11px;line-height:1.5;color:#5f6d77}.tick-card b{font-weight:400;color:#167778;font-size:17px}.speed-presets{display:flex;gap:5px;margin-top:14px}.speed-presets button{flex:1;padding:7px 3px;font-size:11px}.range-ends{display:flex;justify-content:space-between;font-size:11px;color:#5f6d77}.formula strong{font-size:15px}.metrics strong{font-size:22px}.legend{font-size:11px}.toolbar>span{max-width:35%;text-align:right}.panel-head{font-size:11px}.comparison p{line-height:1.6}.icon{color:#eed092}input[type=range]{accent-color:#167778}
@media(min-width:801px) and (max-height:720px){.stage{grid-template-rows:46px minmax(0,1fr) 40px 64px 116px 24px}.metrics strong{font-size:18px}}
@media(max-width:800px){.stage{height:880px;grid-template-rows:50px minmax(0,1fr) 44px 68px 125px 30px}.visuals{grid-template-columns:1fr;grid-template-rows:1fr 1.2fr}.toolbar button{font-size:11px;padding:8px}.toolbar>span{display:none}.comparison{grid-template-columns:.8fr 1.2fr}.metrics strong{font-size:17px}.legend{font-size:11px}.library nav button{padding:10px}.library nav b{font-size:12px}}