:root{font-family:system-ui,sans-serif;color:#332c34;background:#f3ece1;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#e9c6b8,transparent 50%),#f3ece1}main{max-width:1000px;margin:auto;padding:28px 24px}header{margin-bottom:20px}.kicker{font-size:11px;letter-spacing:.2em;color:#975643}h1{font:54px Georgia,serif;margin:9px 0}header p{font:18px Georgia;line-height:1.5;margin:0}.brief{background:#eadccc;padding:16px 20px;border-left:4px solid #b7694a;border-radius:0 8px 8px 0}.brief p{font-size:14px;line-height:1.5;margin:8px 0 0}.toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:18px 0}label{font-size:12px}select,button{font:inherit;padding:11px 14px;border:1px solid #a69b90;background:#fffaf2;color:#332c34;border-radius:7px;min-height:44px}select{display:block;margin-top:6px}button{cursor:pointer}button:hover{background:#e7d4bc}button:focus-visible,select:focus-visible{outline:3px solid #24888b;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.testbay{border-radius:12px;overflow:hidden;background:#2c3739;border:1px solid #3e4a4b;color:#f6ede0}.bayhead{padding:14px 18px;display:flex;justify-content:space-between;font-size:12px;gap:10px;letter-spacing:.04em}canvas{display:block;width:100%;background:#e4dfd4}#feedback{padding:15px 18px;font-size:15px;line-height:1.5;min-height:65px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.metric{background:#fff9ef;border:1px solid #c8bbac;padding:13px;border-radius:9px}.metric b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.metric strong{display:block;font:24px Georgia;margin:6px 0}.metric small{font-size:12px;color:#665f57}.metric.pass{border-color:#39836d;background:#e2ede2}.metric.fail{border-color:#b65c48;background:#f5ded4}.direction{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em;margin:22px 0 12px;color:#6e584a}.direction span{font-size:12px;text-transform:none;letter-spacing:0}.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.layer{background:#fffaf0;border:1px solid #c7b5a0;border-radius:9px;overflow:hidden}.swatch{height:75px;background-image:url('materials.webp');background-size:200% 200%;position:relative}.swatch b{display:block;position:absolute;top:8px;left:8px;background:#fff9ed;color:#3e3330;border-radius:20px;width:26px;height:26px;text-align:center;padding-top:3px}.layer .body{padding:12px}.layer select{width:100%;font-size:13px;padding:10px 5px;margin:0}.layer p{font-size:12px;line-height:1.5;color:#66594f;margin-bottom:0;min-height:36px}.swap{font-size:11px;width:100%;margin-top:10px;padding:7px;min-height:34px}.runbar{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 12px}#run{background:#a8583f;color:#fff;border-color:#a8583f;font-weight:700;padding:13px 24px}#next{background:#3c7463;color:white}#progress{font-size:12px;color:#73645b}details{font-size:13px;line-height:1.6;border-top:1px solid #c6b7a5;padding-top:16px;margin-top:24px;color:#6e6157}summary{cursor:pointer}a{color:#6c4e48}[hidden]{display:none!important}@media(max-width:600px){main{padding:22px 12px}h1{font-size:42px}.brief{padding:14px}.toolbar button{font-size:12px;padding:10px}.toolbar label{flex-basis:100%}.toolbar select{width:100%}.metrics{grid-template-columns:repeat(2,1fr);gap:8px}.metric strong{font-size:22px}.layers{grid-template-columns:repeat(2,1fr);gap:10px}.direction{font-size:9px}.direction span{font-size:10px}.bayhead{font-size:10px;padding:12px;letter-spacing:0}#feedback{font-size:14px}.runbar button{flex:1;font-size:13px}.runbar #run{flex-basis:100%}.swatch{height:65px}}