:root{--background:#fff;--foreground:#17191c;--primary:#17191c;--primary-foreground:#fff;--border:#dce0e3;--muted:#edf0f2;--ring:#e86620;font-family:Arial,PingFang SC,sans-serif;color:#17191c;background:#fff}*{box-sizing:border-box}body{margin:0}header{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}.brand{font-size:23px;letter-spacing:8px;font-weight:600}.tag{font-size:14px;color:#777}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 345px;min-height:calc(100vh - 86px)}.viewer{position:relative;min-height:680px;background:#f4f5f6}.canvas{position:absolute;inset:0}.canvas canvas{display:block;touch-action:none}.hint{position:absolute;bottom:28px;left:32px;font-size:14px;color:#666;pointer-events:none}.tools{position:absolute;top:26px;left:28px;display:flex;gap:8px}.tools button{background:#ffffffdf;height:38px;padding:0 16px}aside{padding:60px 34px}.eyebrow{font-size:12px;letter-spacing:2px;color:#777}h1{font-size:42px;line-height:1.3;font-weight:500;letter-spacing:-1px;margin:22px 0}.intro{font-size:16px;color:#73777b;line-height:1.8}.divider{height:1px;background:#e7e8ea;margin:38px 0}.label{font-size:14px}.swatches{display:flex;gap:16px;margin-top:18px}.swatch{width:36px;height:36px;border:3px solid white;border-radius:50%;cursor:pointer;outline:1px solid #ddd}.swatch.active{outline:2px solid #25292c}.swatch:focus-visible{outline:3px solid #ef580a}.color-name{font-size:14px;color:#666;margin-top:14px}dl{margin-top:32px}dl div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #eee;font-size:14px}dt{color:#888}dd{margin:0}.note{font-size:12px;color:#888;margin-top:26px;line-height:1.7}@media(max-width:760px){header{height:66px}.workspace{display:flex;flex-direction:column}.viewer{min-height:580px;height:68vh}aside{padding:28px}h1{font-size:30px}h1 br{display:none}.divider{margin:22px 0}.hint{left:20px;font-size:13px}.tools{left:18px;top:18px}}header{display:none}.workspace{min-height:680px}.tools button{border:1px solid #ddd;border-radius:20px;cursor:pointer}.tools button:disabled{opacity:.5}.viewer{min-height:680px}aside{padding-top:32px}h1{font-size:28px}