:root{font-family:system-ui,-apple-system,sans-serif;color:#222c30;background:#f6f3eb}*{box-sizing:border-box}body{margin:0}header,main{max-width:1180px;margin:auto;padding:24px}header{padding-bottom:8px}header a{color:#286c65}h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.045em;margin:12px 0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:750;color:#47766e}p{line-height:1.6}.workbench{border:1px solid #cbcfc6;border-radius:18px;overflow:hidden;background:white;box-shadow:0 14px 36px #26392a0b}.toolbar,.controls{padding:14px 18px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid #dfe1d8}label{font-size:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}label:has(select){display:block}select{display:block;max-width:360px;margin-top:5px;font:inherit;padding:8px;border:1px solid #bfc9c3;border-radius:7px;background:#fbfcf9;color:#26342f}button{border:1px solid #adc0b6;border-radius:8px;padding:9px 14px;background:#eff5ed;color:#244f44;cursor:pointer}#stage{height:650px;position:relative;background:#f2efe6;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}#overlay{position:absolute;left:22px;top:18px;right:24px;display:grid;gap:7px;pointer-events:none;max-width:730px}#overlay strong{font-size:20px;color:#193e38;text-shadow:0 1px #fff}#detail{font-size:13px;line-height:1.55;max-width:600px;color:#3a5148;background:#ffffffe0;width:fit-content;padding:7px 10px;border-radius:5px}#legend{position:absolute;right:20px;bottom:18px;width:210px;background:#fffffff2;padding:11px;border:1px solid #cdd1c9;border-radius:8px;font-size:11px}.gradient{height:13px;margin:7px 0;background:linear-gradient(90deg,#1b2360,#2077b5,#20b8aa,#a5dc45,#f1cf39,#ef7029,#b52325)}.ticks{display:flex;justify-content:space-between}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffffffdc;padding:18px;border-radius:10px;color:#4e675d}input[type=range]{width:250px;accent-color:#408c7c}input[type=number]{width:85px;padding:6px;border:1px solid #bdc8be;border-radius:5px}input[type=checkbox]{accent-color:#408c7c}.scope{font-size:12px;padding:0 18px;color:#53665d}.controls{border-top:1px solid #dfe1d8;border-bottom:0;align-items:center}section:not(.workbench){margin:30px 0}h2{font-size:26px;letter-spacing:-.025em}h3{margin-top:28px}.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.film{border:1px solid #ced5ca;background:white;border-radius:12px;overflow:hidden}.film video,.film img{width:100%;display:block}.film h3,.film p{margin:12px 16px}.film p{font-size:13px}.film a{color:#2b756a}footer{font-size:12px;line-height:1.7;border-top:1px solid #ccd5ca;padding-top:20px;color:#54685c}table{border-collapse:collapse;width:100%;font-size:13px;margin:16px 0}td,th{text-align:left;border-bottom:1px solid #d8ddd5;padding:10px}th{background:#eaf0e7}.notice{padding:16px;border-left:4px solid #a27925;background:#faf1d9}.scroll{overflow:auto}a{color:#277568}[hidden]{display:none!important}@media(max-width:650px){header,main{padding:16px}#stage{height:520px}.toolbar{gap:8px}.toolbar label{flex:1;min-width:150px}select{max-width:100%;width:100%}#overlay{left:14px;top:14px}#overlay strong{font-size:16px}#detail{font-size:11px}#legend{width:180px;right:10px;bottom:10px}input[type=range]{width:170px}.controls{gap:10px;padding:12px}}
code{overflow-wrap:anywhere;font-size:.9em}img{max-width:100%}