:root{--ink:#28232d;--paper:#fffdf8;--cream:#f7f0df;--blue:#2588e9;--pink:#ed559d;--yellow:#f3cf2a;--line:#ded7ca}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,5vw,70px);border-bottom:1px solid var(--line);background:#fffdf8ee;backdrop-filter:blur(12px)}header b{text-transform:uppercase;letter-spacing:.06em}header i{color:var(--pink);font-style:normal}header span{display:grid;text-align:right;font-size:.7rem;text-transform:uppercase}header strong{font-size:1.1rem}main{width:min(1160px,92vw);margin:auto;padding-bottom:70px}.hero{padding:clamp(55px,9vw,105px) 0 48px}.hero small,aside>small{font-weight:900;letter-spacing:.15em}.hero h1{margin:8px 0 24px;font-size:clamp(2.7rem,8vw,6.5rem);line-height:.9;letter-spacing:-.065em}.hero em{color:var(--blue);font-style:normal}.hero p{font-size:1.2rem}.panel,aside{padding:clamp(18px,4vw,36px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 14px 45px #30261912}.title,.title h2,.checkout h2{display:flex;align-items:center;gap:10px}.title{justify-content:space-between}.title h2,.checkout h2{margin:0 0 22px}.title h2 span,.checkout h2 span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:1rem}#add{padding:10px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px var(--ink);font-weight:800}#names{display:grid;gap:18px}.name{padding:clamp(16px,3vw,27px);border-radius:18px;background:var(--cream)}label{display:block;font-weight:750}.nameTop{display:flex;align-items:end;gap:12px}.nameTop label{flex:1}.nameInput{font-size:clamp(1.6rem,5vw,2.7rem);font-weight:950;text-transform:uppercase;background:transparent;border:0;border-bottom:3px solid var(--ink);border-radius:0}.remove{width:40px;height:40px;border:0;border-radius:50%;background:#fff;font-size:1.5rem}input,select,textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #cec5b6;border-radius:10px;background:#fff}.preview{display:flex;min-height:108px;margin:22px -7px;padding:25px 18px;overflow-x:auto;border-radius:15px;background:linear-gradient(135deg,#c5ecff,#eee1ff);filter:drop-shadow(0 6px 4px #0002)}.block{position:relative;display:grid;place-items:center;flex:0 0 58px;height:58px;margin-right:-3px;padding:0;border:2px solid #d7d8de;border-radius:10px;background:linear-gradient(145deg,#fff,#e4e5e9);box-shadow:inset -4px -4px 7px #d2d3d8,inset 3px 3px 5px #fff;color:var(--color);font-size:2rem;font-weight:1000}.block:after{content:"";position:absolute;right:-9px;width:10px;height:14px;border-radius:3px;background:#d5d6db;z-index:-1}.block.special{outline:2px dashed #e37818}.empty{margin:auto;color:#655e68;font-weight:700}.settings{display:grid;grid-template-columns:1fr 1fr;gap:22px}fieldset{min-width:0;padding:0;border:0}legend{margin-bottom:10px;font-weight:850}fieldset small,.desc{display:block;color:#6b6470;font-size:.8rem}.colors{display:flex;gap:11px;margin-bottom:9px}.color{width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:var(--color);box-shadow:0 0 0 1px #aaa}.color.on{box-shadow:0 0 0 3px var(--ink)}.attachment{margin:0}.desc{margin-top:8px}.emoji{display:flex;justify-content:space-between;align-items:center;margin:20px 0;padding-top:18px;border-top:1px solid #d8cfbf}.emoji button{width:40px;height:40px;margin-left:5px;border:1px solid #ccc3b4;border-radius:10px;background:#fff;font-size:1.2rem}.checkout{display:grid;grid-template-columns:1.5fr .7fr;gap:22px;margin-top:22px;align-items:start}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.checkout label{margin-bottom:15px}.primary{width:100%;padding:14px;border:2px solid var(--ink);border-radius:11px;background:var(--yellow);box-shadow:5px 5px var(--ink);font-weight:950}#status{color:#28633a;font-weight:750}aside{position:sticky;top:80px;background:var(--ink);color:#fff}aside p,.line,.total{display:flex;justify-content:space-between;gap:12px;padding:10px 0}.line{border-bottom:1px solid #4e4752;font-size:.9rem}.line small{color:#bbb3bf}.total{margin-top:10px;border-top:2px solid #fff;font-size:1.3rem}aside>small:last-child{display:block;color:#bbb3bf;font-size:.7rem;line-height:1.5;letter-spacing:0}@media(max-width:740px){.checkout,.settings,.grid{grid-template-columns:1fr}aside{position:static}.title{align-items:flex-start}#add{font-size:.78rem}.emoji{align-items:flex-start;flex-direction:column;gap:10px}header{position:relative}.block{flex-basis:52px;height:52px}}