*{box-sizing:border-box}:root{color:#22213b;background:#f4f2ff;font-family:Arial Rounded MT Bold,PingFang SC,sans-serif}body{background:radial-gradient(circle at 83% 10%,#ffd8e8 0 12%,#0000 12.3%),radial-gradient(circle at 6% 40%,#c8f5ea 0 9%,#0000 9.2%),#f4f2ff;margin:0}button,input{font:inherit}main{width:min(1180px,100% - 32px);margin:auto;padding:35px 0 70px}header{grid-template-columns:92px 1fr auto;align-items:center;gap:25px;display:grid}.brand{aspect-ratio:1;grid-template-columns:1fr 1fr;width:86px;display:grid;transform:rotate(-5deg)}.brand span{color:#fff;background:#6658ef;border:3px solid #22213b;place-content:center;font-size:26px;display:grid}.brand span:last-child{color:#22213b;background:#ffcf4a;margin:10px 0 -10px}header p{letter-spacing:2px;color:#6e6b8b;margin:0 0 10px;font:700 11px/1.2 monospace}h1{letter-spacing:-3px;margin:0;font-size:clamp(36px,6vw,68px);line-height:1}h1 em{color:#6658ef;font-style:normal}header aside{border-left:2px solid #22213b;align-items:center;gap:10px;padding-left:20px;display:flex}header aside b{color:#ff538b;font-size:42px}header aside span{color:#6e6b8b;font-size:11px;line-height:1.4}.workbench{grid-template-columns:1.1fr .9fr;gap:24px;margin-top:40px;display:grid}.controls{background:#fff;border:3px solid #22213b;border-radius:32px 8px;padding:25px;box-shadow:8px 8px #22213b}.intro{border-bottom:2px solid #ddd9f5;justify-content:space-between;padding-bottom:17px;display:flex}.intro span{color:#77748e;font-size:12px}.dial-grid{grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;display:grid}.dial{background:conic-gradient(from 225deg,#6a5cf1 var(--angle),#e3e0f4 0deg 270deg,transparent 270deg);background-clip:padding-box;border:2px solid #22213b;border-radius:50% 50% 16px 16px;grid-template-columns:1fr auto auto;align-items:center;min-width:0;padding:17px;display:grid;position:relative}.dial:before{content:"";z-index:0;background:#fff;border-radius:50% 50% 10px 10px;position:absolute;inset:8px}.dial>*{position:relative}.dial>span{align-self:start;font-size:12px}.dial div{text-align:center;grid-column:1/-1;margin:5px 0}.dial strong{font-size:40px;line-height:1}.dial small{font-size:12px}.dial input{accent-color:#6658ef;grid-column:1/-1;width:100%}.dial i{color:#89859f;font:9px monospace}.dial i:last-child{text-align:right}.dial.pink{background-image:conic-gradient(from 225deg,#ff538b var(--angle),#f5dce7 0deg 270deg,transparent 270deg)}.dial.pink input{accent-color:#ff538b}.dial.yellow{background-image:conic-gradient(from 225deg,#ffcf4a var(--angle),#f5efd9 0deg 270deg,transparent 270deg)}.dial.yellow input{accent-color:#d99f00}.dial.dark{background-image:conic-gradient(from 225deg,#22213b var(--angle),#dedde8 0deg 270deg,transparent 270deg)}.dial.dark input{accent-color:#22213b}.answer{color:#fff;background:#6658ef;border:3px solid #22213b;border-radius:8px 32px;flex-direction:column;padding:30px;display:flex;box-shadow:8px 8px #ffcf4a}.label{letter-spacing:2px;margin:0;font:11px monospace}.water{align-items:start;margin:17px 0 5px;display:flex}.water strong{letter-spacing:-8px;font-size:clamp(76px,11vw,130px);line-height:.85}.water span{font-size:24px}.verdict{color:#22213b;background:#ffcf4a;border:2px solid #22213b;align-self:flex-start;padding:8px 12px;font-size:13px;transform:rotate(-1deg)}.formula{flex-wrap:wrap;gap:6px;margin:27px 0 22px;font:11px monospace;display:flex}.formula span,.formula b{background:#5749df;padding:6px}.formula i{padding:6px 0}.tap{border-top:1px solid #ffffff59;grid-template-columns:1fr auto;padding-top:20px;display:grid}.tap span{font-size:13px}.tap b{font-size:18px}.tap input{accent-color:#ffcf4a;grid-column:1/-1;width:100%;margin-top:12px}.difference{grid-template-columns:1fr 1fr;gap:8px;margin-top:15px;display:grid}.difference div{background:#5749df;padding:13px}.difference small,.difference b{display:block}.difference small{opacity:.75;font-size:10px}.difference b{margin-top:4px;font-size:18px}.notice{opacity:.7;margin:auto 0 0;padding-top:16px;font-size:10px;line-height:1.5}.save-panel{border-top:3px solid #22213b;grid-template-columns:1fr 1fr;align-items:end;gap:25px;margin-top:42px;padding-top:25px;display:grid}.save-panel p{letter-spacing:2px;color:#77748e;margin:0;font:11px monospace}.save-panel h2{margin:6px 0 0;font-size:26px}.save-panel form{grid-template-columns:1fr auto;display:grid}.save-panel input{background:#fff;border:2px solid #22213b;border-radius:0;min-width:0;padding:13px}.save-panel button{color:#22213b;cursor:pointer;background:#ff538b;border:2px solid #22213b;border-left:0;padding:0 20px;font-weight:700}.save-panel form span{color:#c33163;grid-column:1/-1;margin-top:7px;font-size:12px}.presets{grid-template-columns:repeat(3,1fr);gap:13px;margin-top:18px;display:grid}.presets article{background:#fff;border:2px solid #22213b;grid-template-columns:1fr 35px;display:grid}.apply{text-align:left;cursor:pointer;background:#fff;border:0;min-width:0;padding:15px;display:grid}.apply small{color:#87849b;font:9px monospace}.apply b{overflow-wrap:anywhere;margin:5px 0;font-size:16px}.apply span{color:#77748e;font-size:10px}.remove{cursor:pointer;background:#fff;border:0;border-left:1px dashed #aaa5c0;font-size:20px}.empty{text-align:center;color:#77748e;border:2px dashed #aaa5c0;grid-column:1/-1;padding:30px;font-size:13px}@media (width<=800px){header{grid-template-columns:70px 1fr}.brand{width:65px}header aside{display:none}.workbench{grid-template-columns:1fr}.dial-grid{gap:10px}.dial{padding:13px 10px}.dial strong{font-size:32px}.water strong{font-size:94px}.save-panel{grid-template-columns:1fr}.presets{grid-template-columns:1fr 1fr}}@media (width<=480px){main{width:calc(100% - 20px);padding-top:22px}.controls,.answer{padding:18px;box-shadow:5px 5px #22213b}.dial-grid{grid-template-columns:1fr 1fr}.dial>span{font-size:10px}.presets,.save-panel form{grid-template-columns:1fr}.save-panel button{border-top:0;border-left:2px solid #22213b;padding:12px}}