:root{font-family:"Microsoft YaHei",system-ui,sans-serif;color:#173847;background:#fff;font-size:15px;line-height:1.65}*{box-sizing:border-box}body{margin:0}main{padding:20px;max-width:1050px;margin:auto}h1{font-size:23px;line-height:1.4;margin:0 0 8px}p{margin:8px 0 14px}.kicker{color:#087c86;font-weight:700;letter-spacing:.07em;font-size:12px}.intro{color:#536b77}label{display:block;font-weight:600}input[type=range]{width:100%;accent-color:#087f8c}select,button{font:inherit;border:1px solid #a6bcc6;border-radius:6px;background:white;padding:7px 10px;color:inherit}button{cursor:pointer}button.active{background:#173847;color:white}.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#eef5f6;padding:15px;border-radius:9px}.readings{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.readings article{border-left:3px solid #087f8c;padding:8px 12px;background:#f6f9fa}.readings b{display:block;font-size:21px}.readings small{color:#4e6875}.scene{border:1px solid #d8e4e9;border-radius:9px;width:100%;display:block;margin:14px 0;background:#fafcfd}.scene text{font-family:inherit;font-size:15px;fill:#183b4b}.scene .minor{font-size:12px;fill:#5a7480}.scene .label{font-weight:700}.scene .warm{fill:#b34e32}.scene .cool{fill:#087f8c}.explain{padding:12px 15px;background:#f1f6f8;border-radius:8px}.note{font-size:13px;color:#536b77}.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}.swatch{display:inline-block;width:28px;vertical-align:middle;border-top:3px solid #087f8c}.swatch.exact{border-top:2px dashed #b34e32}table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px;font-variant-numeric:tabular-nums}th,td{text-align:right;padding:8px 6px;border-bottom:1px solid #dce6eb}th:first-child,td:first-child{text-align:left}th{background:#f0f5f7}caption{text-align:left;font-weight:600;padding:7px 0}.paired{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{border:1px solid #dbe6eb;border-radius:8px;padding:13px}.card h2{font-size:18px;margin:0 0 8px}.card strong{font-size:23px}.status{padding:9px 0;color:#315864}code{font:inherit;color:#355a6a}.row{display:flex;gap:8px;align-items:center}output{font-variant-numeric:tabular-nums}.scene [role=slider]{cursor:ew-resize;touch-action:none}.scene [role=slider]:focus{outline:3px solid #dba74a}a{color:#087f8c}