:root{--cp-ink:#261e21;--cp-muted:#766a6e;--cp-coral:#d65b62;--cp-dark:#963e58;--cp-line:#eadcdf;--cp-soft:#fff5f2;--cp-shadow:0 20px 55px rgba(92,49,60,.12)}body{background:linear-gradient(180deg,#fff7f3,#fff 530px);color:var(--cp-ink)}[hidden]{display:none!important}.cp-page{max-width:1160px;margin:auto;padding:0 24px 70px}.cp-hero{background:radial-gradient(circle at 84% 20%,rgba(255,255,255,.68),transparent 27%),linear-gradient(135deg,#ffe8df,#f7e5f5 52%,#e6f5f4);border-bottom:1px solid var(--cp-line)}.cp-hero .tool-hero-icon{width:88px;height:88px;border-radius:28px;background:linear-gradient(145deg,#e87262,var(--cp-dark));color:#fff;font-size:14px;letter-spacing:.08em;box-shadow:0 16px 31px rgba(150,62,88,.25)}.cp-banner{display:none;margin:24px 0 -8px;padding:13px 16px;border:1px solid #e7a9ac;border-radius:13px;background:#fff0f0;color:#892a32}.cp-banner.show{display:block}.cp-shell{margin-top:28px;overflow:hidden;border:1px solid var(--cp-line);border-radius:26px;background:#fff;box-shadow:var(--cp-shadow)}.cp-upload{position:relative;display:grid;place-items:center;min-height:350px;margin:18px;padding:38px;text-align:center;border:2px dashed #d7bfc4;border-radius:20px;background:linear-gradient(145deg,#fffafa,#fffdf8);transition:.2s}.cp-upload:hover,.cp-upload.drag{border-color:var(--cp-coral);background:#fff4f0;transform:translateY(-1px)}.cp-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.cp-upload h2{margin:21px 0 6px;font-size:28px}.cp-upload p{margin:0;color:var(--cp-muted)}.cp-upload em{margin:21px 0 12px;padding:11px 20px;border-radius:11px;background:linear-gradient(135deg,var(--cp-coral),var(--cp-dark));color:#fff;font-style:normal;font-weight:800}.cp-upload small{color:var(--cp-muted)}.cp-wheel{display:flex;overflow:hidden;width:122px;height:56px;border-radius:16px;transform:rotate(-3deg);box-shadow:0 10px 24px rgba(80,40,50,.16)}.cp-wheel i{flex:1}.cp-wheel i:nth-child(1){background:#ef675f}.cp-wheel i:nth-child(2){background:#f2ad52}.cp-wheel i:nth-child(3){background:#75b879}.cp-wheel i:nth-child(4){background:#4d9eb7}.cp-wheel i:nth-child(5){background:#8659a4}.cp-work{display:grid;grid-template-columns:290px 1fr;min-height:480px}.cp-work>aside{padding:22px;border-right:1px solid var(--cp-line);background:#fcfafb}.cp-preview{overflow:hidden;aspect-ratio:4/3;margin-bottom:14px;border-radius:16px;background:#eee}.cp-preview img{width:100%;height:100%;object-fit:contain}.cp-work aside strong,.cp-work aside span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-work aside span{margin-top:5px;color:var(--cp-muted);font-size:13px}.cp-work aside button{width:100%;margin-top:17px;padding:10px;border:1px solid #d8c7cb;border-radius:10px;background:#fff;color:var(--cp-dark);font-weight:800;cursor:pointer}.cp-work>section{min-width:0;padding:24px}.cp-controls{display:grid;grid-template-columns:1.5fr 1fr auto;align-items:end;gap:14px}.cp-controls label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:800}.cp-controls output{float:right;color:var(--cp-coral)}.cp-controls input[type=range]{width:100%;accent-color:var(--cp-coral)}.cp-controls select{height:43px;padding:0 11px;border:1px solid #d7c8cb;border-radius:10px;background:#fff}.cp-controls .cp-check{flex-direction:row;align-items:center;height:43px}.cp-check input{accent-color:var(--cp-coral)}.cp-controls>button{grid-column:1/-1;min-height:49px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--cp-coral),var(--cp-dark));color:#fff;font-size:16px;font-weight:800;cursor:pointer}.cp-controls>button:disabled{opacity:.6}.cp-status{margin:20px 0 13px;color:var(--cp-muted);font-size:13px}.cp-palette{display:grid;grid-template-columns:repeat(4,minmax(105px,1fr));gap:10px}.cp-swatch{overflow:hidden;border:1px solid rgba(0,0,0,.08);border-radius:15px;background:#fff;box-shadow:0 5px 15px rgba(44,25,31,.06)}.cp-color{height:96px}.cp-swatch>div:last-child{padding:11px}.cp-swatch strong,.cp-swatch small{display:block}.cp-swatch strong{font-family:ui-monospace,monospace;font-size:13px}.cp-swatch small{margin:4px 0 9px;color:var(--cp-muted);font-size:11px}.cp-swatch button{width:100%;padding:7px;border:1px solid var(--cp-line);border-radius:8px;background:#fff;font-size:11px;font-weight:800;cursor:pointer}.cp-exports{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--cp-line)}.cp-exports div{display:flex;flex-wrap:wrap;gap:8px}.cp-exports button{padding:9px 12px;border:1px solid #d7c8cb;border-radius:9px;background:#fff;color:var(--cp-dark);font-weight:800;cursor:pointer}.cp-reading,.cp-guide,.cp-faq{margin-top:56px}.cp-reading>div:first-child{max-width:720px}.cp-reading>div:first-child>span{color:var(--cp-coral);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.cp-reading h2,.cp-guide>h2,.cp-faq>h2{margin:7px 0 15px;font-size:30px}.cp-reading p,.cp-guide p,.cp-faq p{color:var(--cp-muted);line-height:1.65}.cp-reading>div:last-child,.cp-guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.cp-guide>div{grid-template-columns:repeat(4,1fr)}.cp-reading article,.cp-guide article{padding:22px;border:1px solid var(--cp-line);border-radius:17px;background:#fff}.cp-reading article>b,.cp-guide article>b{color:var(--cp-coral)}.cp-reading h3,.cp-guide h3{margin:12px 0 6px}.cp-reading article p,.cp-guide article p{margin:0}.cp-faq details{padding:17px 2px;border-bottom:1px solid var(--cp-line)}.cp-faq summary{cursor:pointer;font-weight:800}.cp-faq p{margin:10px 0 0}@media(max-width:850px){.cp-work{grid-template-columns:1fr}.cp-work>aside{border-right:0;border-bottom:1px solid var(--cp-line)}.cp-preview{max-height:280px}.cp-palette{grid-template-columns:repeat(3,1fr)}.cp-guide>div{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.cp-page{padding:0 14px 50px}.cp-upload{min-height:285px;margin:10px;padding:25px 14px}.cp-upload h2{font-size:23px}.cp-work>section{padding:18px 14px}.cp-controls{grid-template-columns:1fr}.cp-controls>button{grid-column:auto}.cp-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-exports{flex-direction:column}.cp-reading>div:last-child,.cp-guide>div{grid-template-columns:1fr}.cp-reading h2,.cp-guide>h2,.cp-faq>h2{font-size:26px}}