*{box-sizing:border-box}body{margin:0;background:#e9e7e1;color:#252b29;font:14px Arimo,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #176e8c;outline-offset:3px}header{height:52px;border-bottom:1px solid #c9c6bd;display:flex;align-items:center;justify-content:space-between;padding:0 24px}header>a:first-child{font:italic bold 25px Gelasio,Georgia,serif}header>span{font:10px Cousine,monospace;text-transform:uppercase;letter-spacing:2px}header>a:last-child{font-size:12px}main{max-width:1600px;margin:auto}.choices{padding:18px 24px 12px}.choice-title{display:flex;align-items:baseline;gap:20px;margin-bottom:14px}h1{font:32px Gelasio,Georgia,serif;margin:0}.choice-title>span{color:#5c625d;font-size:12px}.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.materials button{border:1px solid #b7b6ae;background:#f5f3ed;padding:8px;display:flex;align-items:center;gap:14px;text-align:left;border-radius:3px}.materials button[aria-pressed=true]{outline:2px solid #263d3c;outline-offset:1px}.materials span{font-weight:bold}.materials small{display:block;font-weight:normal;font-size:11px;margin-top:4px;color:#62655f}.sample{width:56px;height:48px;display:grid;place-items:center;font:italic bold 25px Gelasio,Georgia,serif}.paper{background:repeating-linear-gradient(0deg,#c5a274 0 2px,#d5b68a 2px 5px);color:#4e3c29;box-shadow:2px 3px 0 #96744e}.enamel{background:linear-gradient(135deg,#fff8e5,#d9d1b9);border-radius:12px;border:1px solid #b7b0a0;box-shadow:inset 2px 2px 3px #fff,1px 2px 2px #9996;color:#586647}.precision{background:#151c24;color:#dfb25c;border:1px solid #4e5c6c;font:23px Cousine,monospace}.hybrid{background:linear-gradient(90deg,#c5a274 0 14%,#182b2f 14% 86%,#c5a274 86%);color:#d6d4b5;border:2px solid #b28b58}.bottom-row{display:flex;justify-content:space-between;gap:15px;margin-top:16px;align-items:center}.palettes{display:flex;gap:8px;flex-wrap:wrap}.palettes button{width:48px;height:30px;padding:0;display:flex;border:2px solid #e9e7e1;outline:1px solid transparent;border-radius:3px;overflow:hidden}.palettes button[aria-pressed=true]{outline-color:#263d3c}.palettes i{height:100%;flex:1}.compare{display:flex;gap:6px}.compare button{background:transparent;border:1px solid #b6b7af;padding:7px 12px;border-radius:3px;font-size:12px}.compare button:disabled{opacity:.4;cursor:default}#reference{font-size:11px;color:#505a55;margin:12px 0 0;min-height:14px}#status{font-size:11px;position:fixed;bottom:10px;right:10px;background:#263d3c;color:white;padding:8px;z-index:3}#status:empty{display:none}.preview{margin:0 24px;background:#ccc;box-shadow:0 8px 30px #242a2920;height:760px;border-radius:5px;overflow:hidden}iframe{display:block;border:0;width:100%;height:100%}footer{padding:14px 24px;font-size:11px;color:#62655f}@media(min-width:1100px){main{display:grid;grid-template-columns:300px 1fr;gap:0;padding:24px}.choices{padding:0 24px 0 0}.choice-title{display:block}.choice-title>span{display:block;margin-top:8px}.materials{grid-template-columns:1fr}.bottom-row{display:block}.compare{flex-wrap:wrap;margin-top:20px}.preview{margin:0;height:calc(100dvh - 104px);min-height:650px}footer{grid-column:2;padding:12px 0}.materials button{padding:12px}}@media(max-width:600px){header{padding:0 14px;height:44px}header>span{display:none}.choices{padding:14px 12px 12px}.choice-title{justify-content:space-between;gap:8px}h1{font-size:24px}.choice-title>span{font-size:10px}.materials{gap:6px}.materials button{display:block;padding:6px;text-align:center}.sample{width:100%;height:36px;font-size:22px;margin-bottom:8px}.materials span{font-size:11px}.materials small{font-size:10px}.bottom-row{align-items:flex-start;flex-direction:column;gap:10px}.palettes button{height:32px;width:44px}.compare{width:100%}.compare button{flex:1;min-height:36px}.preview{margin:0 8px;height:740px}footer{padding:12px}#reference{min-height:26px;line-height:1.4}}
@media(max-width:600px){.compare{position:fixed;bottom:0;left:0;width:100%;padding:8px 12px max(8px,env(safe-area-inset-bottom));background:#e9e7e1;border-top:1px solid #b7b6ae;z-index:5}.compare button{background:#f5f3ed}.bottom-row{margin-top:12px}main{padding-bottom:60px}#status{bottom:65px}}