@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');
:root{--ink:#25272b;--green:#b9f45c;--purple:#7854e8;--border:#dedfe0}*{box-sizing:border-box}body{margin:0;background:#fafafa;color:var(--ink);font:16px 'Noto Sans SC',sans-serif}button,input,select{font:inherit}button,a,label.upload{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}header{height:88px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:white}a{color:inherit;text-decoration:none}.brand{font-size:24px;font-weight:900;display:flex;align-items:center;gap:10px}.brand small{font-size:13px;letter-spacing:1px}.brandmark{background:var(--green);border:2px solid var(--ink);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:30px}.header-note{font-size:14px;color:#686b72}.help{font-size:14px}main{max-width:1440px;margin:auto;padding:38px 5% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#73767c}h1{font-size:42px;letter-spacing:-1px;margin:10px 0 12px;line-height:1.4}h1 span{color:var(--purple)}.intro p{margin:0;color:#70737a}.pill{border:1px solid var(--ink);border-radius:40px;background:var(--green);padding:12px 20px;font-size:14px;transform:rotate(-3deg)}.workspace{display:grid;grid-template-columns:310px 1fr;gap:22px}.settings,.studio{border:1px solid var(--border);border-radius:18px;background:white;overflow:hidden}.settings{padding:24px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}h2{font-size:20px;margin:0}.section-title>span{font-size:12px;color:#999}.upload{border:1.5px dashed #c3c5c8;border-radius:12px;background:#f8f8fa;display:flex;align-items:center;flex-direction:column;padding:22px 10px;gap:8px;cursor:pointer;position:relative}.upload:hover,.upload.drag{border-color:var(--purple);background:#f0ecff}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.upload:focus-within{outline:3px solid #7854e8}.upload-icon{height:38px;width:38px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:28px;background:white}.upload b{font-size:16px}.upload>span:not(.upload-icon){font-size:14px;color:#777}.upload small{font-size:12px;color:#999}.privacy{font-size:12px;color:#777;margin:10px 0 24px}.field{margin:0 0 23px}.field label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:14px}.field output{color:var(--purple);background:#f0ebff;padding:1px 9px;border-radius:5px}input[type=range]{width:100%;accent-color:var(--purple);cursor:pointer}.scale{display:flex;justify-content:space-between;font-size:12px;color:#91949a;margin-top:7px}select{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;background:white;font-size:14px}.primary{background:var(--ink);color:white;border:0;border-radius:10px;padding:14px;width:100%;display:flex;justify-content:space-between}.primary span{color:var(--green)}#message{font-size:12px;line-height:1.7;color:#767980;min-height:22px}.tip{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}.tip b{font-size:14px}.tip p{font-size:13px;line-height:1.8;color:#777;margin-bottom:0}.studio-toolbar{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:10px;font-size:14px}.studio-toolbar>div:first-child{display:flex;align-items:center;gap:9px;min-width:0}.studio-toolbar b{max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.live-dot{width:8px;height:8px;background:var(--purple);border-radius:50%;flex-shrink:0}.segmented{display:flex;background:#f0f0f2;padding:3px;border-radius:8px}.segmented button{border:0;background:none;color:#7b7b81;padding:8px 12px;font-size:13px;border-radius:6px;white-space:nowrap}.segmented .active{background:white;color:var(--ink);box-shadow:0 1px 3px #0001}.canvas-wrap{height:470px;display:flex;align-items:center;justify-content:center;position:relative;background-color:#eeecf5;background-image:radial-gradient(#b6b3c3 0.7px,transparent 0.7px);background-size:16px 16px;padding:45px}.canvas-label,.canvas-bottom{position:absolute;font-size:11px;letter-spacing:2px;color:#92909e}.canvas-label{top:18px;left:22px}.canvas-bottom{bottom:16px;right:22px;letter-spacing:1px}canvas{max-height:100%;max-width:100%;object-fit:contain;background:white;box-shadow:0 12px 32px #29203920;border:10px solid white;border-radius:4px}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:23px 12px;border-bottom:1px solid var(--border)}.stats div{display:flex;align-items:center;flex-direction:column;gap:6px;border-right:1px solid var(--border)}.stats div:last-child{border:0}.stats strong{font-size:22px;font-variant-numeric:tabular-nums}.stats span{font-size:12px;color:#888}.download-row{padding:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}.download-row p{font-size:13px;color:#82848b}.download-row button{background:var(--green);border:1px solid var(--ink);padding:12px 16px;border-radius:8px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}.palette-section{margin-top:40px}.palette-head{display:flex;justify-content:space-between;align-items:center}.palette-head h2{margin-top:8px}.palette-head h2 span{font-size:12px;font-weight:400;color:#90939b;margin-left:10px}.text-button{border:0;background:none;font-size:14px}.palette-note{color:#888;font-size:13px}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px}.color-card{border:1px solid var(--border);border-radius:10px;background:white;display:flex;gap:10px;padding:13px;align-items:center}.swatch{width:33px;height:33px;border-radius:50%;border:1px solid #0002;display:grid;place-items:center;flex-shrink:0}.swatch:after{content:'';width:10px;height:10px;background:white;border-radius:50%;box-shadow:inset 0 1px 3px #0003}.color-card b{font-size:13px}.color-card small{display:block;font-size:12px;color:#9698a0}.guide{margin-top:45px;border-top:1px solid var(--border);display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px;padding:36px 0}.guide h2{font-size:24px;line-height:1.7}.guide h2 span{color:#919399}.guide b{color:var(--purple);font-size:16px}.guide b span{color:var(--ink);font-size:14px;margin-left:9px}.guide p{font-size:13px;line-height:1.9;color:#888}footer{max-width:1440px;margin:auto;padding:25px 5%;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;color:#9699a0;font-size:12px}footer .brand{font-size:18px;color:var(--ink)}button:hover{filter:brightness(.95)}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}@media(min-width:1450px){.canvas-wrap{height:510px}}@media(max-width:1050px){.palette{grid-template-columns:repeat(4,1fr)}.download-row p{display:none}.stats strong{font-size:18px}.workspace{grid-template-columns:280px 1fr}.canvas-wrap{padding:42px 24px}}@media(max-width:760px){header{height:70px}.header-note,.pill{display:none}.brand{font-size:21px}main{padding:28px 5% 0}h1{font-size:31px}.workspace{grid-template-columns:1fr}.settings{padding:20px}.upload{padding:16px}.field{margin-bottom:18px}.tip{display:none}.canvas-wrap{height:390px}.studio-toolbar{padding:14px 12px;flex-wrap:wrap}.stats{padding:19px 6px}.stats strong{font-size:16px}.stats span{font-size:11px}.download-row{justify-content:center}.palette{grid-template-columns:repeat(3,1fr)}.color-card{padding:10px;gap:6px}.swatch{width:25px;height:25px}.guide{grid-template-columns:1fr;gap:12px}.guide h2 br{display:none}.guide p{margin-top:8px}.palette-head{gap:8px}.palette-head h2{font-size:18px}.palette-head h2 span{display:block;margin:5px 0}.text-button{font-size:13px;padding:0}footer>span:last-child{display:none}footer{gap:10px}.brand small{font-size:10px}}@media(prefers-reduced-motion:no-preference){button{transition:filter .15s}.color-card{animation:appear .3s ease both}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}}