:root{--bg:#f4f4f5;--card:#fff;--text:#070b1d;--muted:#5c5c5c;--yellow:#f9c400;--line:#dedede;--radius:24px;--shadow:0 8px 20px rgba(0,0,0,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--text)}.page{max-width:980px;margin:0 auto;padding:28px 18px 60px}.hero{text-align:center}.logo{width:190px;max-width:70%;margin:0 auto 14px;display:block}.hero h1{font-size:clamp(36px,6vw,62px);line-height:.98;margin:0 0 22px;font-weight:950;letter-spacing:-1.5px}.hero p{font-size:clamp(18px,2.5vw,24px);color:var(--muted);margin:0 auto 34px;max-width:700px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin:24px 0;border:1px solid #eee}h2{font-size:32px;margin:0 0 24px}label{display:block;font-weight:800;font-size:20px;margin:22px 0 12px}input{width:100%;border:1px solid #d4d4d4;border-radius:18px;padding:20px 22px;font-size:24px;margin-top:14px}button{border:0;border-radius:18px;padding:18px 22px;font-size:20px;font-weight:900;cursor:pointer;transition:.15s}button:active{transform:scale(.98)}button:disabled{opacity:.45;cursor:not-allowed}.primary{width:100%;background:#000;color:#fff;margin-top:24px}.secondary{width:100%;background:#efefef;color:#999;margin-top:18px}.secondary.small{font-size:16px;padding:12px 18px;width:auto;color:#111}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:20px}.segmented button{background:#e5e5e5;color:#080b1b}.segmented button.active{background:var(--yellow)}.segmented.compact{grid-template-columns:repeat(3,1fr);gap:10px;max-width:450px}.segmented.compact button{font-size:16px;padding:12px}.palette{display:flex;flex-wrap:wrap;gap:16px}.swatch{width:54px;height:54px;border-radius:14px;border:3px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}.swatch.active{border-color:#000;transform:scale(1.08)}.muted{color:var(--muted);font-size:18px}.viewer-head{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.zoom-controls{display:flex;align-items:center;gap:10px}.zoom-controls button{font-size:16px;padding:12px 14px;background:#111;color:#fff}.zoom-controls span{font-weight:900;min-width:58px;text-align:center}.canvas-wrap{margin-top:20px;background:#e9e9e9;border-radius:20px;overflow:auto;max-height:72vh;padding:18px;touch-action:none;border:1px solid #ddd}canvas{display:block;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12);image-rendering:crisp-edges}.hint{font-size:16px;color:#666}.summary{display:grid;gap:10px;font-size:20px}.summary-row{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #eee;padding:9px 0}.summary-row strong{font-weight:950}.color-dot{display:inline-block;width:16px;height:16px;border-radius:5px;margin-right:8px;vertical-align:-2px;border:1px solid #bbb}@media(max-width:640px){.page{padding:20px 18px 40px}.card{padding:24px 22px;border-radius:22px}h2{font-size:28px}.segmented{gap:16px}button{font-size:18px}.canvas-wrap{padding:12px}}