:root{--bg:#f5f5f7;--ink:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,0.08);--accent:#4f46e5}*{box-sizing:border-box}body,html{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased}header{max-width:1400px;margin:0 auto;padding:40px 32px 8px}h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}header p{color:var(--muted);margin:0;max-width:760px}.app{max-width:1400px;margin:0 auto;padding:16px 32px 32px;display:grid;grid-template-columns:360px 1fr;grid-gap:24px;gap:24px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.panel h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}.field{margin-bottom:14px;position:relative}.field-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.field label{font-size:13px;font-weight:500;cursor:help;border-bottom:1px dotted rgba(0,0,0,.2)}.field .value{font-size:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--muted)}.field label[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:10;background:#1d1d1f;color:#fff;padding:8px 10px;border-radius:6px;font-size:11px;font-weight:400;line-height:1.45;width:280px;white-space:normal;box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none}.field label[data-tip]:hover:before{content:"";position:absolute;left:14px;top:calc(100% + 1px);border:5px solid transparent;border-bottom-color:#1d1d1f;z-index:11;pointer-events:none}input[type=range]{width:100%;margin:0}.scheme-row{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;position:relative}.scheme-btn{font:inherit;font-size:12px;padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink);position:relative}.scheme-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scheme-btn:hover:not(.active){background:#f5f5f7}.scheme-btn[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:10;background:#1d1d1f;color:#fff;padding:8px 10px;border-radius:6px;font-size:11px;font-weight:400;line-height:1.45;width:260px;white-space:normal;box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none}.scheme-btn[data-tip]:hover:before{content:"";position:absolute;left:14px;top:100%;border:5px solid transparent;border-bottom-color:#1d1d1f;z-index:11;pointer-events:none}.perm-select{font:inherit;font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%;font-family:ui-monospace,SF Mono,Menlo,monospace}.preview{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;min-height:320px}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.logo{width:220px}.logo,.logo-sm{height:auto;display:block}.logo-sm{width:60px}.logo-xs{width:28px;height:auto;display:block}.logo .c-green{fill:var(--c-green)}.logo .c-red{fill:var(--c-red)}.logo .c-blue{fill:var(--c-blue)}.preview-row{padding-bottom:24px;border-bottom:1px solid var(--line)}.preview-inverse,.preview-row{display:flex;align-items:center;justify-content:center;gap:40px;margin-bottom:24px}.preview-inverse{background:#1d1d1f;border-radius:10px;padding:20px}.swatches{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}.swatch{display:flex;align-items:center;gap:8px;font-size:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--muted)}.swatch-dot{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.swatch-label{font-size:11px;color:var(--muted);font-family:-apple-system,sans-serif;margin-right:2px}.export{background:#f5f5f7;border-radius:8px;padding:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;color:var(--ink);white-space:pre;overflow-x:auto}.snapshots{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;grid-column:1/-1}.snapshots h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:600;display:flex;align-items:center;gap:12px}.snapshots .snap-btn{font:inherit;font-size:12px;padding:4px 10px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;cursor:pointer;text-transform:none;letter-spacing:0}.heart-btn{background:transparent!important;border:0!important;color:#c8c8cd!important;padding:4px!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,transform .1s}.heart-btn:hover{color:#ef4444!important}.heart-btn:active{transform:scale(.9)}.heart-btn svg{display:block}.snap-grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:12px;gap:12px}.snap-card{border:1px solid var(--line);border-radius:10px;padding:14px;position:relative;cursor:pointer;transition:background .15s,border-color .15s}.snap-card:hover{background:#f5f5f7;border-color:#bbb}.snap-card .snap-hint{position:absolute;bottom:8px;right:10px;font-size:10px;color:var(--muted);opacity:0;transition:opacity .15s}.snap-card:hover .snap-hint{opacity:1}.snap-card .snap-x{position:absolute;top:6px;right:8px;background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;line-height:1}.snap-card .snap-x:hover{color:#d11}.snap-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}.snap-swatches{display:flex;gap:6px;font-size:10px;font-family:ui-monospace,Menlo,monospace;color:var(--muted);flex-wrap:wrap}.snap-swatch{display:flex;align-items:center;gap:4px}.snap-swatch-dot{width:11px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.snap-card .logo{width:80px}.snap-card .logo-sm{width:20px}.snap-meta{margin-top:8px;font-size:11px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}.snap-saver{display:inline-block;font-size:10px;color:var(--muted);background:#f5f5f7;border-radius:999px;padding:2px 8px;margin-top:6px}@media (max-width:900px){.app{grid-template-columns:1fr}}