:root{--black:#111;--white:#fff;--yellow:#f5ff00;--gray:#efefed}*{box-sizing:border-box}body{color:var(--black);background:#fff;margin:0;font-family:Arial,PingFang SC,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.mast{border-bottom:1px solid #111;justify-content:space-between;align-items:center;height:80px;padding:0 34px;display:flex}.logo{letter-spacing:-.08em;font-size:30px;font-weight:900}.logo i{color:#8e4fff;font-style:normal}.mast p{text-transform:uppercase;letter-spacing:.17em;font-size:11px}.layout{grid-template-columns:390px 1fr;min-height:calc(100vh - 80px);display:grid}.editor{background:var(--gray);border-right:1px solid #111;padding:32px}.editor-head{justify-content:space-between;align-items:start;display:flex}.editor h1{margin:0;font-size:22px}.editor-head span{border:1px solid #111;border-radius:50%;place-items:center;width:38px;height:38px;font-size:10px;display:grid}.desc{color:#656565;margin-bottom:27px;font-size:12px;line-height:1.6}.field{margin:15px 0}.field label{letter-spacing:.08em;margin-bottom:6px;font-size:10px;font-weight:800;display:block}.field input,.field textarea{background:#fff;border:1px solid #111;border-radius:0;outline:0;width:100%;padding:11px}.field textarea{resize:vertical;height:70px}.color-row{grid-template-columns:50px 1fr;gap:8px;display:grid}.color-row input[type=color]{height:42px;padding:3px}.error{color:#d82020;min-height:15px;font-size:11px}.add{background:var(--black);color:#fff;border:0;width:100%;padding:14px;font-weight:800}.options{border-top:1px solid #bbb;margin-top:28px;padding-top:17px}.check{align-items:center;gap:8px;margin-top:12px;font-size:11px;display:flex}.check input{accent-color:#111}.workspace{background-color:#fff;background-image:linear-gradient(#eee 1px,#0000 1px),linear-gradient(90deg,#eee 1px,#0000 1px);background-size:24px 24px;padding:30px 3.5vw;overflow:auto}.toolbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.toolbar h2{margin:0;font-size:13px}.toolbar-actions{gap:7px;display:flex}.toolbar button{background:#fff;border:1px solid #111;padding:9px 12px;font-size:11px}.toolbar button.active{background:var(--yellow)}.export{color:#fff;background:var(--black)!important}.sheet{background:#fff;border:1px solid #111;grid-template-columns:repeat(2,minmax(220px,1fr));align-content:start;gap:14px;min-height:520px;padding:25px;display:grid;box-shadow:8px 8px #111}.sheet.vertical{grid-template-columns:1fr;max-width:620px;margin:auto}.swatch{border:1px solid #111;flex-direction:column;justify-content:space-between;min-height:205px;padding:18px;display:flex;position:relative;overflow:hidden}.swatch:after{content:"";opacity:.28;pointer-events:none;border:1px solid;position:absolute;inset:7px}.swatch-top,.swatch-bottom{z-index:1;justify-content:space-between;display:flex;position:relative}.number{border:1px solid;border-radius:50%;place-items:center;width:34px;height:34px;font-size:12px;font-weight:900;display:grid}.remove{color:inherit;opacity:.65;background:0 0;border:0;font-size:17px}.swatch h3{letter-spacing:-.05em;z-index:1;overflow-wrap:anywhere;margin:auto 0 8px;font-size:clamp(25px,3vw,42px);position:relative}.hex{font:800 15px ui-monospace,monospace}.use{text-align:right;overflow-wrap:anywhere;max-width:55%;font-size:11px}.note{opacity:.72;z-index:1;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;position:relative}.empty{text-align:center;color:#888;grid-column:1/-1;place-content:center;min-height:430px;display:grid}.empty b{color:#ddd;font-size:75px}.empty p{font-size:12px}.badge{background:var(--yellow);color:#111;padding:2px 5px;display:inline-block}.toast{color:#fff;opacity:0;background:#111;padding:10px 15px;font-size:11px;transition:all .2s;position:fixed;bottom:25px;right:25px;transform:translateY(8px)}.toast.show{opacity:1;transform:none}@media (width<=800px){.layout{grid-template-columns:1fr}.editor{border-bottom:1px solid #111;border-right:0;padding:22px}.workspace{padding:22px}.sheet{grid-template-columns:1fr;padding:14px}.mast{padding:0 20px}.mast p{display:none}.toolbar{align-items:flex-start;gap:12px}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.swatch{min-height:180px}}