:root{--bg:#0b0e15;--panel:#121723;--line:#232a3a;--text:#e9eaee;--muted:#9aa1b2;--accent:#7fe3d0;--observed:#7fe3d0;--derived:#f2c66d;--modelled:#c49bf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0;font-family:Hiragino Sans,Noto Sans JP,Yu Gothic UI,system-ui,sans-serif;line-height:1.85}main{max-width:820px;margin:0 auto;padding:40px 16px 64px}a{color:var(--accent)}.how-nav{flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:14px;display:flex}.kicker{color:var(--muted);letter-spacing:.2em;margin:28px 0 4px;font-size:12px}h1{margin:0 0 16px;font-size:clamp(26px,6vw,38px);line-height:1.3}.lead{margin:0 0 20px;font-size:17px}h2{border-bottom:1px solid var(--line);margin:52px 0 12px;padding-bottom:8px;font-size:20px;line-height:1.5}h2 .num{color:var(--muted);margin-right:.5em;font-weight:400}h3{margin:24px 0 4px;font-size:16px}p,li{overflow-wrap:anywhere}ul{padding-left:1.2em}.toc{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:0;padding:12px 16px 12px 36px}.toc li{margin:2px 0}.formula{background:var(--panel);border:1px solid var(--line);white-space:pre;border-radius:6px;padding:10px 14px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px;overflow-x:auto}.src{color:var(--muted);font-size:13px}.tag{vertical-align:.1em;border:1px solid;border-radius:999px;margin-right:6px;padding:0 8px;font-size:12px;line-height:1.6;display:inline-block}.tag.observed{color:var(--observed)}.tag.derived{color:var(--derived)}.tag.modelled{color:var(--modelled)}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:8px 10px}th{color:var(--muted);font-weight:600}.btn{background:var(--text);min-height:44px;color:var(--bg);border-radius:6px;align-items:center;padding:0 20px;font-weight:600;text-decoration:none;display:inline-flex}footer{color:var(--muted);margin-top:56px;font-size:13px}.lab{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:16px 0 8px;padding:16px;display:none}.how-js .lab{display:block}.lab-title{color:var(--muted);margin:0 0 12px;font-size:14px;font-weight:600}.lab-row{align-items:center;gap:16px;display:flex}.lab input[type=range]{min-width:0;accent-color:var(--accent);flex:1;height:32px}.how-readout{font-variant-numeric:tabular-nums;text-align:right;min-width:6.5em;font-weight:600}.how-swatch{--star:#fff;background:radial-gradient(circle, #fff 0 12%, var(--star) 34%, transparent 70%);border-radius:50%;flex:none;width:64px;height:64px}.lab-marks{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.lab-marks button{--star:#fff;min-height:36px;font:inherit;color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:8px;padding:0 12px;font-size:13px;display:inline-flex}.lab-marks button:before{content:"";background:var(--star);border-radius:50%;width:12px;height:12px}.how-dotbox{flex:none;place-items:center;width:64px;height:64px;display:grid}.how-dot{background:#fff;border-radius:50%;width:18px;height:18px;box-shadow:0 0 12px 4px #fff9}.lab-note{color:var(--muted);margin:10px 0 0;font-size:13px}@media (max-width:560px){main{padding-top:24px}.lab-row{flex-wrap:wrap}.how-readout{text-align:left;flex-basis:100%;min-width:0}table,thead,tbody,tr,th,td{display:block}thead{display:none}td{border:0;padding:2px 0}tr{border-bottom:1px solid var(--line);padding:8px 0}td:first-child{font-weight:600}}
