:root{color:#39251c;background:#f1eadf;font-family:Inter,Arial,PingFang SC,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}header{color:#fff;background:#39251c;justify-content:space-between;align-items:center;height:74px;padding:0 4vw;display:flex}.logo{align-items:center;gap:12px;display:flex}.logo i{border:6px dotted #ffcb56;border-radius:50%;width:23px;height:23px}.logo b{font-size:19px}header p{letter-spacing:.2em;color:#c7b9ad;font-size:9px}main{grid-template-columns:320px minmax(390px,1fr) 300px;min-height:calc(100vh - 74px);display:grid}.control{background:#fff7eb;border-right:1px solid #d6c7b9;padding:42px 34px}.eyebrow{letter-spacing:.19em;color:#b34b37;font-size:9px;font-weight:700}h1{margin:13px 0 34px;font-family:Georgia,Songti SC,serif;font-size:39px;line-height:1.1}h1 em{color:#e7543d;font-style:normal}.control label{margin:15px 0;font-size:11px;font-weight:700;display:block}.control input,.control select{background:0 0;border:0;border-bottom:1px solid #8e7969;outline:none;width:100%;padding:10px 3px}.twins{grid-template-columns:1fr 1fr;gap:14px;display:grid}.swatches{gap:9px;margin:20px 0;display:flex}.swatches button{background:var(--c);border:3px solid #fff;border-radius:50%;width:26px;height:26px;box-shadow:0 0 0 1px #b8aa9e}.swatches button.on{box-shadow:0 0 0 3px #39251c}.tips{background:#f5dcc1;margin-top:35px;padding:18px;font:12px/1.6 Georgia,serif}.tips p{margin:7px 0}.actions{gap:8px;margin-top:20px;display:flex}.actions button{background:0 0;border:1px solid;padding:8px 10px}.stage{background:#ddd0c2;flex-direction:column;min-width:0;padding:28px;display:flex}.canvas-head{justify-content:space-between;align-items:end;display:flex}.canvas-head small{letter-spacing:.12em;font-size:9px}.canvas-head h2{margin:5px 0;font:26px Georgia}.canvas-head>span{font-size:11px}canvas{aspect-ratio:1;touch-action:none;cursor:crosshair;align-self:center;width:min(66vh,100%)}.legend{flex-wrap:wrap;gap:8px;min-height:22px;display:flex}.legend span{background:#fff9;padding:5px 8px;font-size:10px}aside{background:#f8f2e9;border-left:1px solid #d6c7b9;padding:35px 25px;overflow:auto}.metric{border-bottom:1px solid #c8b8aa;justify-content:space-between;align-items:end;padding:17px 0;display:flex}.metric strong{color:#e7543d;font-size:39px}.metric p{font-size:10px}aside h3{margin-top:25px;font-size:12px}.sectors{align-items:flex-end;gap:6px;height:100px;display:flex}.sectors div{text-align:center;flex:1;font-size:8px}.sectors i{background:#ffcb56;max-height:70px;margin:3px 0;display:block}.sectors span{font-size:11px}.rate{margin:30px 0 15px;font-size:11px;display:block}.rate output{float:right}.rate input{accent-color:#e7543d;width:100%}.save{color:#fff;background:#39251c;border:0;width:100%;padding:13px}.status{color:#b34b37;min-height:17px;font-size:11px}details{border-top:1px solid;padding-top:13px}summary{cursor:pointer;font-size:11px}.past{text-align:left;background:0 0;border:0;border-bottom:1px solid #ddd0c2;justify-content:space-between;width:100%;padding:10px 0;display:flex}.past span{font-size:9px}@media (width<=980px){main{grid-template-columns:280px 1fr}.stage{min-height:650px}aside{grid-column:1/-1;grid-template-columns:repeat(2,1fr);gap:10px 30px;display:grid}.sectors,.rate,.save,.status,details,aside h3{grid-column:1/-1}}@media (width<=650px){header p{display:none}main{display:block}.control{padding:30px 20px}.stage{min-height:auto;padding:20px}aside{display:block}.canvas-head>span{display:none}canvas{width:100%}}