:root{--paper:#f7f6f1;--text:#1c302e;--muted:#526760;--line:#d8e3db;--green:#145e51;--soft:#eaf2ec;--warm:#b55d35;--blue:#376ca2;--card:white}
*{box-sizing:border-box}body{background:var(--paper);color:var(--text);margin:0;font:16px/1.55 system-ui,-apple-system,"Noto Sans CJK JP","Noto Sans CJK SC",sans-serif}
main{max-width:1160px;margin:auto;padding:28px 22px 80px}a{color:var(--green);text-underline-offset:3px}h1{font-size:clamp(34px,5.8vw,64px);line-height:1.1;letter-spacing:-.04em;margin:8px 0 18px}h2{font-size:clamp(22px,3vw,29px);line-height:1.2;margin:6px 0 14px}h3{font-size:17px;margin:9px 0}p{margin:8px 0 15px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:750}.muted,.hint{color:var(--muted)}.hint{font-size:13px}.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:30px}.topbar select{font-size:14px}.lead{font-size:19px;max-width:820px;color:var(--muted)}section.panel{margin-top:28px;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:26px;box-shadow:0 4px 18px #204c3707}.panel-head{max-width:840px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.chip{background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--green)}.controls{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end;padding:13px 0}.control{display:flex;flex-direction:column;gap:5px;min-width:150px;flex:1 1 175px}.control label{font-size:13px;font-weight:700}.control input[type=range]{width:100%;accent-color:var(--green)}select,button{font:inherit;color:var(--text);background:white;border:1px solid #a1b8aa;padding:9px 12px;border-radius:9px}button{cursor:pointer}button:hover,button:focus-visible{border-color:var(--green)}button.primary{background:var(--green);color:white;border-color:var(--green)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8ec9ae;outline-offset:2px}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.raster{border:1px solid var(--line);border-radius:13px;margin:0;padding:14px;background:#fbfcfa;text-align:center}.raster canvas{width:100%;max-width:320px;height:auto;aspect-ratio:1;display:block;margin:6px auto;image-rendering:auto}.raster figcaption{font-weight:700;font-size:14px}.raster .hint{min-height:44px}.legend{display:flex;align-items:center;justify-content:center;gap:18px;font-size:12px;color:var(--muted)}.swatch{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px}.warm{background:var(--warm)}.cool{background:var(--blue)}.metric-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:17px}.metric{background:var(--soft);border-radius:12px;padding:12px 18px;min-width:165px}.metric b{display:block;font-size:23px;font-variant-numeric:tabular-nums}.metric small{color:var(--muted)}.formula{background:#eef3f0;border-radius:11px;padding:15px 17px;font-family:ui-monospace,Consolas,monospace;font-size:clamp(12px,1.5vw,15px);overflow:auto}.callout{border-left:3px solid var(--warm);padding:12px 17px;background:#fff9f3;color:#654c39;margin:20px 0;border-radius:7px}.graph{margin:12px 0 16px}.bar-row{display:grid;grid-template-columns:155px 1fr 66px;gap:13px;align-items:center;margin:12px 0}.track{height:18px;background:#edf1ed;border-radius:20px;overflow:hidden}.fill{height:100%;background:var(--green);border-radius:20px;width:0;transition:width .25s}.fill.orange{background:var(--warm)}.bar-row output{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.width-canvas{width:100%;max-width:570px;display:block;margin:auto}.result{font-size:20px;font-weight:750;color:var(--green)}.links{display:flex;flex-wrap:wrap;gap:10px 20px}.fields canvas{display:block;width:min(100%,310px);aspect-ratio:1;margin:auto;border-radius:12px;border:1px solid var(--line);background:#fbfcfa}.fields article{border:1px solid var(--line);border-radius:14px;padding:16px}.footer{border-top:1px solid var(--line);margin-top:38px;padding-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:760px){main{padding:19px 14px 55px}.three{grid-template-columns:1fr}.two{grid-template-columns:1fr}.three .raster{display:grid;grid-template-columns:1fr minmax(0,1fr);align-items:center}.raster figcaption,.raster .hint{grid-column:1}.raster canvas{grid-column:2;grid-row:1/4}.bar-row{grid-template-columns:110px 1fr 45px;gap:8px}.panel{padding:17px!important}}
@media(prefers-reduced-motion:reduce){.fill{transition:none}}