*{box-sizing:border-box}body{margin:0;overflow:hidden;font:13px/1.6 system-ui,"Microsoft YaHei",sans-serif;color:#283630;background:#e9ece7}#viewport{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:38px;left:42px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:3px;color:#5b6d62}h1{font-size:34px;font-weight:500;letter-spacing:3px;margin:8px 0 0}h1 span{font:12px monospace;vertical-align:top;letter-spacing:0;margin:8px 0 0 14px;display:inline-block;color:#748475}header p{margin:2px 0;color:#6b796f;letter-spacing:2px}aside{position:absolute;right:28px;top:36px;width:228px;padding:22px;background:#f9faf5e8;border:1px solid #fff;border-radius:16px;box-shadow:0 12px 50px #263d2610;backdrop-filter:blur(12px)}.section-title{font-weight:600;margin:0 0 12px}.section-title:not(:first-child){margin-top:23px}.section-title span{float:right;font:9px/22px monospace;color:#89978b;letter-spacing:1px}button{font:inherit;cursor:pointer;border:1px solid #d5ddd4;background:transparent;color:inherit;border-radius:6px;padding:7px 10px}button:hover{background:#e5ebe2}button.active{background:#344c3c;color:white;border-color:#344c3c}.views{display:grid;grid-template-columns:1fr 1fr;gap:6px}label{display:flex;align-items:center;justify-content:space-between;margin:10px 0}input{accent-color:#3e5c45}input[type=range]{width:88px}.swatch{width:100%;display:flex;align-items:center;gap:9px;border:0;text-align:left;padding:6px;margin:2px 0}.swatch i{height:17px;width:17px;border-radius:50%;border:1px solid #0002;flex-shrink:0}.note{font-size:11px;color:#839083;line-height:1.8}#reset{width:100%;margin-top:8px}footer{position:absolute;bottom:20px;left:38px;right:28px;display:flex;justify-content:space-between;color:#6b7d70;font-size:11px}footer b{font-weight:500;color:#344d3c}.disclaimer{position:absolute;left:38px;bottom:49px;font-size:10px;color:#879388}#picked{position:absolute;left:38px;top:166px;font-size:11px;max-width:290px;color:#617569}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 30px;background:#ffffffee;border-radius:12px;box-shadow:0 8px 36px #0001}#loading[hidden]{display:none}@media(max-width:700px){header{top:18px;left:20px}h1{font-size:25px}aside{right:12px;top:120px;width:164px;padding:13px}.section-title span{display:none}.section-title:not(:first-child){margin-top:13px}.swatch{font-size:11px}.note{display:none}label{font-size:11px}input[type=range]{width:64px}footer{left:16px;bottom:10px;font-size:9px}footer #stats{display:none}.disclaimer{left:16px;bottom:32px;font-size:9px}#picked{left:20px;top:100px;max-width:180px;font-size:10px}}
body.dark-background{background:#202830}body.dark-background header h1{color:#eef2ec}body.dark-background .eyebrow,body.dark-background header p,body.dark-background h1 span,body.dark-background #picked,body.dark-background footer,body.dark-background .disclaimer{color:#acbabd}body.dark-background footer b{color:#e4ece9}