:root{color:#171717;font-synthesis:none;background:#f3f3ef;font-family:Inter,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}main{max-width:1160px;margin:auto;padding:30px 28px 60px}header{border-top:7px solid #171717;grid-template-columns:120px 1fr auto;align-items:start;padding-top:18px;display:grid}.logo{letter-spacing:-.08em;font-size:24px;font-weight:900;line-height:.9}header p,.number{letter-spacing:.16em;margin:0 0 12px;font-size:11px;font-weight:800}h1{letter-spacing:-.055em;margin:0 0 38px;font-size:clamp(36px,6vw,74px);line-height:.94}.mode{cursor:pointer;background:#f3f3ef;border:2px solid #171717;padding:10px 16px;font-weight:800}.studio{border:2px solid #171717;grid-template-columns:1.15fr .85fr;display:grid}.target-panel,.controls{padding:22px}.target-panel{border-right:2px solid #171717}.target{align-items:flex-end;height:350px;padding:18px;display:flex}.target span{background:#f3f3ef;padding:8px 11px;font-size:12px;font-weight:700}.target-panel>p{max-width:480px;font-size:13px;line-height:1.55}.controls label{border-top:1px solid #aaa;grid-template-columns:30px 1fr 45px;align-items:center;gap:12px;padding:19px 0;display:grid}.controls label span{font-size:20px;font-weight:900}.controls output{text-align:right;font-variant-numeric:tabular-nums}.controls input{width:100%}.hidden-preview{color:#777;background:repeating-linear-gradient(135deg,#edede8 0 8px,#f3f3ef 8px 16px);border:1px dashed #888;place-items:center;height:74px;margin:8px 0 20px;font-size:12px;display:grid}.submit{color:#fff;text-align:left;cursor:pointer;background:#171717;border:0;width:100%;padding:17px 20px;font-weight:800}.submit span{float:right}.result{border:2px solid #171717;border-top:0;grid-template-columns:1.2fr .8fr;padding:22px;display:grid}.swatches{grid-template-columns:1fr 1fr;height:270px;display:grid}.swatches div{align-items:flex-end;padding:12px;display:flex}.swatches span{background:#fff;padding:7px;font-size:11px}.score{text-align:center;padding:0 25px}.score canvas{width:180px;height:180px}.score p{margin:0}.score small{color:#555;max-width:250px;min-height:38px;margin:8px auto;display:block}.score button{cursor:pointer;background:0 0;border:1px solid #171717;padding:10px 16px}.history{border-top:2px solid #171717;margin-top:26px;padding-top:16px}.history>p{color:#777;font-size:13px}.history-list{gap:8px;display:flex;overflow:auto}.history-list div{border:1px solid #aaa;grid-template-columns:35px 1fr 18px 18px;align-items:center;gap:4px;min-width:145px;padding:10px;display:grid}.history-list b{font-size:22px}.history-list span{font-size:10px}.history-list i{border:1px solid #aaa;border-radius:50%;height:18px}@media (width<=720px){main{padding:18px 14px 40px}header{grid-template-columns:70px 1fr}.mode{grid-column:2;justify-self:start;margin-bottom:18px}h1{margin-bottom:18px}.studio,.result{grid-template-columns:1fr}.target-panel{border-bottom:2px solid #171717;border-right:0}.target{height:250px}.result{gap:25px}.swatches{height:210px}}