:root{font-family:ui-sans-serif,system-ui,-apple-system,PingFang SC,sans-serif;color:#241d18;background:#ece5da;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#ece5da}button,input{font:inherit}button{cursor:pointer}main{width:min(1220px,calc(100% - 48px));margin:auto;padding:26px 0 50px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #8f877d;padding-bottom:18px}.logo{font-family:Georgia,Times New Roman,serif;font-size:30px;font-style:italic}.logo span{display:inline-grid;place-items:center;width:37px;height:37px;border-radius:50% 45% 55% 48%;background:#241d18;color:#fff;margin-right:8px;font-style:normal}header p{font-size:10px;letter-spacing:.2em}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0}.intro h1{font-family:Georgia,Songti SC,serif;font-weight:400;font-size:clamp(37px,5vw,65px);line-height:1.08;margin:0}.intro p{max-width:540px;color:#6e665e}.stamp{border:2px solid #a04f3c;color:#a04f3c;border-radius:50%;width:120px;height:120px;display:grid;place-items:center;text-align:center;font:700 11px/1.6 monospace;transform:rotate(6deg)}.studio{display:grid;grid-template-columns:1fr .82fr;border:1px solid #6f675e;min-height:510px}.ingredients{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;padding:28px;background:#f6f1e8}.plus{display:grid;place-items:center;font-family:Georgia,serif;font-size:30px}.paint{display:flex;flex-direction:column;gap:16px}.paint-head{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em}.paint-head b{font-family:monospace}.color-well{flex:1;min-height:220px;border:1px solid #544e47;display:grid;place-items:center;cursor:pointer}.color-well input{position:absolute;opacity:0;width:1px}.color-well span{font-family:Georgia,serif;font-style:italic;font-size:14px;border-bottom:1px solid currentColor}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.swatches button{height:27px;border:1px solid #655e56}.swatches button.on{outline:3px solid #241d18;outline-offset:1px}.parts{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #aaa198;padding-top:14px}.parts>div{display:flex;border:1px solid #655e56}.parts button{width:34px;background:#e9e0d3;border:0}.parts input{width:46px;text-align:center;border:0;border-left:1px solid #655e56;border-right:1px solid #655e56;background:#fff}.result{padding:27px;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s}.result-label{font-size:10px;letter-spacing:.2em}.drop{display:grid;place-items:center}.drop div{width:190px;height:205px;background:currentColor;opacity:.09;border-radius:50% 48% 53% 44%;transform:rotate(15deg)}.result-bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px solid currentColor;padding-top:17px}.result-bottom small{display:block;opacity:.72}.result-bottom strong{font-family:Georgia,serif;font-size:35px}.result-bottom button{border:1px solid currentColor;background:transparent;color:inherit;padding:10px 14px}.recipe{padding:26px 0;border-bottom:1px solid #8f877d}.recipe-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.recipe-title strong{font-family:Georgia,serif;font-size:30px}.bar{display:flex;height:52px;border:1px solid #544e47}.bar div{display:grid;place-items:center;min-width:35px;transition:width .2s}.bar span{background:#f8f1e9;border:1px solid #544e47;padding:2px 5px;font-size:11px;color:#241d18}.measure{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#766e66}footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:22px}.caution{display:flex;align-items:center;gap:18px}.caution b{white-space:nowrap;border:1px solid #a04f3c;color:#a04f3c;padding:8px}.caution p{max-width:630px;font-size:12px;color:#716960;margin:0}footer label{white-space:nowrap;font-size:12px}footer input{accent-color:#a04f3c}@media(max-width:820px){main{width:min(100% - 22px,680px)}.intro{align-items:flex-start}.stamp{width:88px;height:88px;font-size:9px}.studio{grid-template-columns:1fr}.result{min-height:390px}.color-well{min-height:180px}footer{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.intro{padding:25px 0}.stamp{display:none}.ingredients{grid-template-columns:1fr;padding:17px}.plus{height:40px}.color-well{min-height:140px}.result{min-height:340px}.result-bottom strong{font-size:27px}.caution{align-items:flex-start;flex-direction:column;gap:8px}.recipe{padding-top:20px}}