:root { --ink:#2d1b28; --muted:#846c79; --line:#f0dce6; --panel:#fffafb; --a:#FA5DA8; --b:#F88CC0; --size:64px; --radius:24px; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#fff9fc; font-family:"Noto Sans SC", system-ui, sans-serif; }
button,input { font:inherit; }
.app-shell { width:min(1440px,100%); min-height:100vh; margin:auto; padding:30px 48px 48px; }
.topbar { height:50px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; width:max-content; gap:10px; color:var(--ink); text-decoration:none; font-family:"DM Mono",monospace; font-size:14px; letter-spacing:-.4px; }
.brand-mark { width:18px; height:18px; border-radius:5px; background:conic-gradient(from 90deg,var(--a) 0 25%,var(--b) 0 50%,var(--a) 0 75%,var(--b) 0); background-size:9px 9px; }
.page-nav { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:999px; background:#fff; }.page-tab { padding:5px 11px; border:0; border-radius:999px; color:#a18a96; background:transparent; font-size:11px; cursor:pointer; }.page-tab.is-active { color:#fff; background:var(--ink); }
.reset-button { justify-self:end; padding:7px 0; color:#967482; background:transparent; border:0; border-bottom:1px solid #d4b8c5; font-size:12px; cursor:pointer; }
.workspace { display:grid; grid-template-columns:340px minmax(0,1fr); gap:clamp(46px,7vw,112px); align-items:center; min-height:calc(100vh - 128px); padding:62px 0 38px; }
.page-view.is-hidden { display:none; }
.controls { width:100%; }
h1 { margin:0; font-size:clamp(34px,3.2vw,48px); line-height:1.1; letter-spacing:-2px; font-weight:700; }
.intro { margin:16px 0 42px; max-width:280px; color:var(--muted); font-size:14px; line-height:1.8; }
.control-group { margin-top:25px; }
label,.label-row { color:#6d5360; font-size:13px; font-weight:600; }
.color-row { display:flex; gap:11px; margin-top:10px; }
.color-b-label { display:flex; align-items:center; justify-content:space-between; }
.auto-color { display:flex; align-items:center; gap:6px; color:#9a7e8d; font-size:11px; font-weight:500; cursor:pointer; }
.auto-color input { position:absolute; opacity:0; pointer-events:none; }
.auto-color span { width:25px; height:15px; border-radius:99px; background:#e6ceda; transition:.2s; }
.auto-color span::after { content:""; display:block; width:11px; height:11px; margin:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #8a5b727a; transition:.2s; }
.auto-color input:checked + span { background:var(--a); }.auto-color input:checked + span::after { transform:translateX(10px); }
.color-group:has(#autoColor:checked) .color-row { opacity:.65; }.color-group:has(#autoColor:checked) .color-swatch,.color-group:has(#autoColor:checked) .hex-input { cursor:not-allowed; }
.color-swatch { width:44px; height:44px; padding:3px; overflow:hidden; border:1px solid #edd6e2; border-radius:13px; background:#fff; cursor:pointer; }
.color-swatch::-webkit-color-swatch-wrapper { padding:0; }.color-swatch::-webkit-color-swatch { border:0;border-radius:9px; }
.preset-group label { display:block; margin-bottom:10px; }.preset-select { width:100%; height:44px; padding:0 36px 0 14px; appearance:none; border:1px solid #edd6e2; border-radius:13px; outline:none; color:#513842; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23846c79' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 13px center/16px; font-size:12px; cursor:pointer; }.preset-select:focus { border-color:var(--a); box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 12%,transparent); }
.hex-input { width:calc(100% - 55px); padding:0 14px; border:1px solid #edd6e2; border-radius:13px; outline:none; background:#fff; color:#513842; font-family:"DM Mono",monospace; font-size:14px; text-transform:uppercase; }
.hex-input:focus { border-color:var(--a); box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 12%,transparent); }
.label-row { display:flex; justify-content:space-between; margin-bottom:10px; }.label-row output { color:#927685; font-family:"DM Mono",monospace; font-size:12px; font-weight:400; }
input[type=range] { width:100%; height:4px; appearance:none; border-radius:999px; outline:none; background:#f0dbe5; accent-color:var(--a); cursor:pointer; }
input[type=range]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:var(--a); box-shadow:0 1px 5px #b77b9c77; }
.texture-toggle { display:flex; justify-content:space-between; align-items:center; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.texture-toggle strong,.texture-toggle span { display:block; }.texture-toggle strong { color:#6d5360; font-size:13px; }.texture-toggle div>span { margin-top:3px; color:#a28996; font-size:11px; }
.switch input { display:none; }.switch span { position:relative; display:block; width:38px; height:22px; border-radius:99px; background:#e6ceda; cursor:pointer; transition:.2s; }.switch span::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #8a5b727a; transition:.2s; }.switch input:checked + span { background:var(--a); }.switch input:checked + span::after { transform:translateX(16px); }
.download-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:50px; margin-top:30px; border:0; border-radius:15px; color:#fff; background:var(--ink); font-size:14px; font-weight:600; cursor:pointer; transition:transform .2s,box-shadow .2s; }.download-button:hover { transform:translateY(-2px); box-shadow:0 10px 24px #34122024; }.download-button span { font-size:20px; font-weight:400; line-height:1; }.hint { margin:12px 3px; color:#a38a97; font-size:11px; line-height:1.6; }
.preview-side { min-width:0; }.preview-header,.preview-footer { display:flex; align-items:center; justify-content:space-between; }.preview-header { margin-bottom:14px; }.preview-header h2 { margin:0; font-size:14px; font-weight:600; }.preview-header span,.preview-footer { color:#a18a96; font-family:"DM Mono",monospace; font-size:11px; }.preview-frame { position:relative; aspect-ratio:3/2; overflow:hidden; margin-inline:auto; border-radius:var(--radius); isolation:isolate; background-color:var(--a); background-image:conic-gradient(from 90deg, var(--b) 25%, transparent 0 50%, var(--b) 0 75%, transparent 0); background-size:calc(var(--size) * 2) calc(var(--size) * 2); box-shadow:0 28px 60px color-mix(in srgb,var(--a) 26%,transparent); transition:border-radius .2s,background .2s; }
.preview-frame::before { content:""; position:absolute; inset:0; z-index:1; opacity:.34; mix-blend-mode:overlay; pointer-events:none; background-image:linear-gradient(112deg,rgba(255,255,255,.10),transparent 26%,rgba(0,0,0,.08) 52%,transparent 74%),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }.preview-frame.no-texture::before{display:none;}.preview-frame::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to bottom,transparent var(--checker-fade-start,.38),color-mix(in srgb,var(--a) 34%,transparent) calc(var(--checker-fade-start,.38) + 9%),var(--a) var(--checker-fade-end,.78)); }
.preview-note { position:absolute; right:24px; bottom:22px; z-index:4; padding:12px 14px; border:1px solid #fff7; border-radius:12px; background:#fff2; color:#fff; backdrop-filter:blur(6px); }.preview-note span,.preview-note b { display:block; }.preview-note span { margin-bottom:4px; font-family:"DM Mono",monospace; font-size:8px; letter-spacing:.8px; }.preview-note b { font-family:"DM Mono",monospace; font-size:12px; font-weight:500; }.preview-footer { margin-top:14px; }.preview-footer i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#71b875; }
.soft-preview-frame { --soft:#B6F59B; --dot:20px; --dot-zone:45%; position:relative; aspect-ratio:3/2; overflow:hidden; margin-inline:auto; border-radius:var(--soft-radius,24px); isolation:isolate; background:radial-gradient(ellipse 65% 72% at 50% 42%,#fff9 0%,#fff3 23%,transparent 68%),linear-gradient(135deg,color-mix(in srgb,var(--soft) 80%,white) 0%,var(--soft) 55%,color-mix(in srgb,var(--soft) 86%,black) 125%); box-shadow:0 28px 60px color-mix(in srgb,var(--soft) 30%,transparent); transition:.2s; }.soft-preview-frame::before { content:""; position:absolute; inset:0; z-index:1; opacity:.28; mix-blend-mode:overlay; pointer-events:none; background-image:linear-gradient(112deg,rgba(255,255,255,.10),transparent 26%,rgba(0,0,0,.08) 52%,transparent 74%),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }.soft-preview-frame.no-texture::before { display:none; }.soft-dots { position:absolute; z-index:2; width:var(--dot-zone); height:var(--dot-zone); opacity:.32; background-image:radial-gradient(circle,#fff 1.6px,transparent 1.8px); background-size:var(--dot) var(--dot); mask-image:radial-gradient(ellipse at center,#000 0%,transparent 72%); }.dots-left { top:-10%; left:-8%; }.dots-right { top:-8%; right:-8%; transform:rotate(180deg); }.soft-preview-note { position:absolute; right:24px; bottom:22px; z-index:3; padding:12px 14px; border:1px solid #fff7; border-radius:12px; background:#fff3; color:#fff; backdrop-filter:blur(6px); }.soft-preview-note span,.soft-preview-note b { display:block; }.soft-preview-note span { margin-bottom:4px; font-family:"DM Mono",monospace; font-size:8px; letter-spacing:.8px; }.soft-preview-note b { font-family:"DM Mono",monospace; font-size:12px; font-weight:500; }
@media (max-width:820px){.app-shell{padding:20px 22px 35px}.topbar{grid-template-columns:1fr auto}.topbar p{display:none}.workspace{grid-template-columns:1fr;gap:40px;padding:42px 0}.controls{max-width:520px}.intro{margin-bottom:32px}.preview-side{order:-1}.preview-frame{border-radius:20px}}
@media (max-width:430px){.brand{font-size:12px}.reset-button{font-size:11px}.preview-note{right:14px;bottom:14px}.preview-note b{font-size:10px}}