:root{--font-body: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-heading: "Trebuchet MS", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;--ink: #1f2933;--muted: #52606d;--paper-strong: #ffffff;--brand: #d46a1f;--brand-dark: #ad5418;--accent: #0d7b76;--shadow: 0 12px 30px rgba(31, 41, 51, .12);font-family:var(--font-body);line-height:1.4;font-weight:500;color:var(--ink);background-color:#edf0eb;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 12% 18%,rgba(212,106,31,.2),transparent 30%),radial-gradient(circle at 88% 20%,rgba(13,123,118,.22),transparent 28%),linear-gradient(180deg,#eef2ea,#f8f9f6 52%,#eef0ea)}#app{width:min(1220px,100% - 2.4rem);margin:1.2rem auto 2.2rem}.page-shell{display:grid;gap:1.2rem}.hero{background:linear-gradient(135deg,#fffffff5,#fbf8f4f2);border:1px solid rgba(31,41,51,.08);border-radius:20px;box-shadow:var(--shadow);padding:clamp(1rem,2vw,1.6rem)}.eyebrow{margin:0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800}h1{margin:.45rem 0 0;font-family:var(--font-heading);font-size:clamp(1.5rem,3.1vw,2.4rem);line-height:1.1}.subtitle{margin:.65rem 0 0;color:var(--muted);max-width:78ch}.hero-controls{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.62rem}.hero-links{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.75rem}.inline-link{color:#0b5f5b;text-decoration:none;font-size:.84rem;font-weight:700}.inline-link:hover{text-decoration:underline}.share-menu{position:relative}.share-menu>summary{list-style:none}.share-menu>summary::-webkit-details-marker{display:none}.share-popover{position:absolute;top:calc(100% + .45rem);left:0;z-index:5;min-width:196px;border-radius:12px;border:1px solid rgba(31,41,51,.16);background:#fffffffa;box-shadow:0 12px 24px #1f293324;padding:.45rem;display:grid;gap:.34rem}.share-popover .btn{width:100%;justify-content:flex-start}.workspace{display:grid;gap:1rem;grid-template-columns:1fr 340px}.palette-area{display:grid;gap:.6rem}.palette-toolbar{border-radius:12px;border:1px solid rgba(31,41,51,.1);background:#ffffffe0;padding:.6rem .72rem}.palette-toolbar p{margin:0;color:#465868;font-size:.84rem}.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}.swatch-card{border:1px solid rgba(31,41,51,.11);border-radius:16px;overflow:hidden;background:var(--paper-strong);box-shadow:0 7px 20px #1f293314;animation:cardIn .48s ease both;animation-delay:var(--delay)}.swatch-card.is-locked{border-color:#d46a1fa6}.swatch-top{display:flex;justify-content:space-between;gap:.35rem;padding:.5rem;background:#fffffff7;border-bottom:1px solid rgba(31,41,51,.07)}.swatch-block{width:100%;height:160px;border:0;cursor:copy;background:var(--swatch)}.swatch-meta{padding:.65rem;background:#fff;display:grid;gap:.34rem}.swatch-meta span{color:#5d6974;font-size:.75rem}.swatch-meta code{display:inline-block;font-family:var(--font-mono);font-size:.88rem;color:#25303b;word-break:break-word}.swatch-input{height:34px;border:1px solid rgba(31,41,51,.15);border-radius:8px;padding:0 .56rem;font-family:var(--font-mono);font-size:.82rem}.swatch-input:focus-visible{outline:3px solid rgba(13,123,118,.26);outline-offset:1px}.panel{background:#fffffff2;border:1px solid rgba(31,41,51,.1);border-radius:16px;box-shadow:0 8px 24px #1f293312;padding:1rem;align-self:start}.panel h2{margin:0;font-family:var(--font-heading)}.panel p{margin:.45rem 0 0;color:var(--muted);font-size:.88rem}.export-actions{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.4rem}.export-preview{margin:.8rem 0;min-height:176px;max-height:240px;overflow:auto;background:#0f1720;color:#d5e2ea;border-radius:12px;border:1px solid rgba(15,23,32,.85);padding:.7rem;font-family:var(--font-mono);font-size:.78rem;line-height:1.45}.export-cta{margin-top:.7rem;padding-top:.75rem;border-top:1px dashed rgba(31,41,51,.16);display:grid;gap:.55rem}.export-cta p{margin:0;color:#4d5c68;font-size:.82rem}.newsletter-form{display:flex;gap:.45rem}.newsletter-input{flex:1;min-width:0;height:40px;border:1px solid rgba(31,41,51,.2);border-radius:999px;padding:0 .82rem;font-family:inherit;font-size:.84rem}.newsletter-input:focus-visible{outline:3px solid rgba(13,123,118,.3);outline-offset:2px}.newsletter-input:disabled{cursor:not-allowed;background:#f4f5f6}.newsletter-form .btn{width:auto;flex-shrink:0}.newsletter-form .btn:disabled{opacity:.58;cursor:not-allowed}.newsletter-target{display:none}.newsletter-status{margin:0;min-height:1.1rem;color:#0b5f5b;font-size:.78rem;font-weight:700}.preview-section{background:#fffffff0;border:1px solid rgba(31,41,51,.1);border-radius:16px;box-shadow:0 8px 24px #1f293312;padding:1rem;display:grid;gap:.8rem}.preview-head h2{margin:0;font-family:var(--font-heading)}.preview-head p{margin:.4rem 0 0;color:var(--muted);font-size:.88rem}.preview-tabs{display:flex;gap:.45rem;flex-wrap:wrap}.preview-canvas{border:1px solid rgba(31,41,51,.1);border-radius:14px;overflow:hidden;background:#fbfcfd;min-height:280px}.use-case-section{background:#fffffff0;border:1px solid rgba(31,41,51,.1);border-radius:16px;box-shadow:0 8px 24px #1f293312;padding:1rem;display:grid;gap:.9rem}.use-case-head h2{margin:0;font-family:var(--font-heading)}.use-case-head p{margin:.45rem 0 0;color:var(--muted);font-size:.88rem}.use-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem}.use-case-card{border:1px solid rgba(31,41,51,.11);border-radius:14px;background:#fcfdfc;padding:.8rem;display:grid;gap:.6rem}.use-case-card h3{margin:0;font-family:var(--font-heading);font-size:1rem}.use-case-card p{margin:0;color:#4f5d6a;font-size:.84rem}.mini-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.34rem}.mini-strip span{height:22px;border-radius:8px;background:var(--tone);border:1px solid rgba(31,41,51,.12)}.use-case-card .btn{justify-self:start}.use-case-actions{display:flex;justify-content:flex-start}.scene{height:100%;min-height:280px;padding:1rem}.scene-landing{background:linear-gradient(135deg,var(--c1a),rgba(255,255,255,.95))}.landing-nav{display:flex;align-items:center;gap:.5rem;color:#203240;font-weight:700}.landing-nav .brand-dot{width:10px;height:10px;border-radius:999px;background:var(--c1)}.landing-nav button{margin-left:auto;border:0;border-radius:999px;padding:.38rem .8rem;background:var(--c2);color:#fff;font-weight:700}.landing-body{margin-top:.8rem;display:grid;grid-template-columns:1fr 220px;gap:.8rem}.hero-block{border-radius:12px;background:#fff;border:1px solid rgba(31,41,51,.08);padding:1rem}.hero-block h3{margin:0;font-family:var(--font-heading);color:#13212d}.hero-block p{margin:.52rem 0 0;color:#566473}.cta-row{margin-top:.72rem;display:flex;gap:.5rem}.cta-row button{border-radius:10px;border:1px solid transparent;padding:.44rem .74rem;font-weight:700}.cta-row .solid{background:var(--c1);color:#fff}.cta-row .outline{background:#fff;border-color:var(--c3);color:#1f2933}.mock-card{border-radius:12px;background:linear-gradient(145deg,var(--c4),var(--c2));color:#fff;padding:.85rem}.mock-card p{margin:0;opacity:.85}.mock-card strong{margin-top:.5rem;display:inline-block;font-family:var(--font-mono)}.scene-dashboard{background:linear-gradient(170deg,var(--c2a),rgba(255,255,255,.94))}.dashboard-header{display:flex;align-items:center;gap:.5rem}.dashboard-header .badge{border-radius:999px;background:var(--c3);color:#fff;padding:.28rem .62rem;font-size:.76rem;font-weight:700}.dashboard-header button{margin-left:auto;border:0;border-radius:999px;background:var(--c1);color:#fff;padding:.35rem .72rem;font-weight:700}.dashboard-grid{margin-top:.9rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.stat-card{border-radius:12px;border:1px solid rgba(31,41,51,.09);background:#fff;padding:.72rem}.stat-card.alt{background:var(--c5)}.stat-card.soft{background:var(--c1a)}.stat-card p{margin:0;color:#4f5d6a;font-size:.8rem}.stat-card strong{margin-top:.4rem;display:inline-block;font-family:var(--font-mono);color:#10202e}.scene-mobile{background:radial-gradient(circle at 10% 10%,var(--c1a),#f8fafb 70%);display:grid;place-items:center}.phone-shell{width:230px;border-radius:24px;border:7px solid #151f28;background:#fff;padding:.62rem}.phone-top{width:80px;height:8px;border-radius:999px;background:#1f2933;margin:0 auto .62rem}.phone-card{border-radius:12px;background:linear-gradient(155deg,var(--c1),var(--c3));color:#fff;padding:.72rem}.phone-card h3{margin:0;font-size:.95rem}.phone-card p{margin:.42rem 0 0;opacity:.9;font-size:.8rem}.phone-card button{margin-top:.62rem;width:100%;border:0;border-radius:10px;padding:.35rem 0;font-weight:700;background:#fff;color:#1b2a37}.phone-pill-row{margin-top:.6rem;display:flex;gap:.35rem}.phone-pill-row span{height:8px;flex:1;border-radius:999px;background:var(--c2)}.phone-pill-row span:nth-child(2){background:var(--c4)}.phone-pill-row span:nth-child(3){background:var(--c5)}.footer-note{display:flex;flex-direction:column;gap:.35rem}.footer-note p{margin:0;color:#4d5965;font-size:.9rem}.status{min-height:1.1rem;color:var(--accent);font-weight:700}.btn,.chip{border:1px solid rgba(31,41,51,.2);background:#fff;color:var(--ink);border-radius:999px;padding:.5rem .82rem;font-family:inherit;font-size:.84rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn:hover,.chip:hover{transform:translateY(-1px);border-color:#1f293373}.btn:focus-visible,.chip:focus-visible,.swatch-block:focus-visible{outline:3px solid rgba(13,123,118,.35);outline-offset:2px}.btn-primary{color:#fff;border-color:var(--brand-dark);background:linear-gradient(180deg,var(--brand),var(--brand-dark))}.btn-ghost{background:#fff9f3;border-color:#d46a1f59;color:#8e4612}.chip.lock.is-locked,.chip.is-active{background:#ecf6f5;border-color:#0d7b767a;color:#0b5f5b}kbd{font-family:var(--font-mono);background:#1f2933;color:#fff;border-radius:5px;padding:.1rem .35rem;font-size:.76rem}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.panel{order:2}.landing-body{grid-template-columns:1fr}}@media(max-width:860px){#app{width:min(100% - 1.35rem,900px)}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-block{height:128px}.dashboard-grid,.use-case-grid{grid-template-columns:1fr}}@media(max-width:520px){.hero-controls{display:grid;grid-template-columns:1fr}.btn,.share-menu{width:100%}.hero-links{flex-direction:column;gap:.42rem}.newsletter-form{flex-direction:column}.newsletter-form .btn{width:100%}.palette-grid{grid-template-columns:1fr}}