:root{--brand:#10b981;--brand-dark:#700070;--brand-light:#c026d3;--brand-surface:#f5e8ff;--teal:#4ecdc4;--teal-surface:#e6faf9;--slate:#1e293b;--text:#111;--muted:#6b7280;--light:#9ca3af;--border:#e5e7eb;--surface:#fafafa;--white:#fff;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--green:#00ff41}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}.hero{color:var(--text);text-align:center;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f5e8ff 0%,#fafafa 100%);padding:120px 60px 100px;position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(circle at 30% 70%,rgba(16,185,129,.03) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(16,185,129,.02) 0%,transparent 40%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.hero-logo-box{border-radius:24px;justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:32px;display:inline-flex;position:relative}.hero-logo{border-radius:20px;width:120px;height:auto}.hero h1{letter-spacing:-.5px;color:#10b981;margin-bottom:16px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:64px;font-weight:900;position:relative}.hero .tagline{letter-spacing:-1px;opacity:.9;color:var(--text);margin-bottom:8px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:36px;font-weight:300;position:relative}.hero .version{opacity:.5;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:32px;font-size:13px;font-weight:700;position:relative}.container{max-width:1040px;margin:0 auto;padding:0 48px}.section{padding:80px 0}.section+.section{border-top:1px solid var(--border)}.section-number{letter-spacing:3px;text-transform:uppercase;color:var(--brand);margin-bottom:12px;font-size:11px;font-weight:800}.section-title{letter-spacing:-2px;color:var(--text);margin-bottom:32px;font-size:42px;font-weight:900}.section-intro{color:var(--muted);max-width:680px;margin-bottom:48px;font-size:18px;font-weight:500;line-height:28px}.subsection{margin-bottom:56px}.subsection:last-child{margin-bottom:0}.subsection-title{letter-spacing:-.5px;color:var(--text);margin-bottom:16px;font-size:20px;font-weight:800}.subsection p,.subsection li{color:var(--muted);font-size:18px;font-weight:500;line-height:28px}.subsection ul{padding:0;list-style:none}.subsection ul li{padding:4px 0 4px 20px;position:relative}.subsection ul li:before{content:"→";color:var(--brand);font-weight:600;position:absolute;left:0}.brand-quote{border-left:4px solid var(--brand);background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-radius:0 16px 16px 0;margin:24px 0;padding:32px 36px}.brand-quote p{color:var(--brand);font-size:22px;font-style:italic;font-weight:700}.brand-quote .hashtag{color:var(--brand);background:rgba(16,185,129,.1);border-radius:999px;margin-top:12px;padding:4px 12px;font-size:14px;font-style:normal;font-weight:800;display:inline-block}.logo-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0;display:grid}.logo-grid.logo-grid-2{grid-template-columns:repeat(2,1fr);max-width:560px}.logo-card{border:1px solid var(--border);text-align:center;border-radius:20px;padding:40px 24px;transition:all .3s}.logo-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08)}.logo-card.dark{background:#0d1117;border-color:#21262d}.logo-card img{object-fit:contain;width:120px;height:120px;margin-bottom:16px}.logo-card .label{letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:700}.logo-card.dark .label{color:#8b949e}.lockup-card{border:1px solid var(--border);text-align:center;background:var(--surface);border-radius:20px;margin:32px 0;padding:48px}.lockup-card img{object-fit:contain;width:100%;max-width:480px;height:auto}.color-section{margin:32px 0}.color-row{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.color-swatch{border:1px solid var(--border);border-radius:16px;transition:all .3s;overflow:hidden}.color-swatch:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}.color-preview{width:100%;height:80px}.color-info{background:#fff;padding:12px 16px}.color-name{color:var(--text);font-size:13px;font-weight:700}.color-hex{color:var(--muted);font-family:Courier New,monospace;font-size:12px;font-weight:500}.brand-table{border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;width:100%;margin:24px 0;overflow:hidden}.brand-table th{background:var(--surface);letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1px solid var(--border);padding:14px 20px;font-size:11px;font-weight:800}.brand-table td{color:var(--text);border-bottom:1px solid var(--border);padding:14px 20px;font-size:14px}.brand-table tr:last-child td{border-bottom:none}.brand-table code{background:var(--surface);color:var(--brand);border-radius:6px;padding:2px 8px;font-family:Courier New,monospace;font-size:12px}.personality-grid{grid-template-columns:repeat(5,1fr);gap:16px;margin:32px 0;display:grid}.personality-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;padding:24px 16px;transition:all .3s}.personality-card:hover{border-color:var(--brand);background:var(--brand-surface)}.personality-card .card-icon{width:32px;height:32px;color:var(--brand);margin:0 auto 12px}.personality-card:hover .card-icon{color:var(--brand-dark)}.personality-card .trait{color:var(--text);margin-bottom:6px;font-size:13px;font-weight:800}.personality-card .desc{color:var(--muted);font-size:11px;line-height:1.5}.do-dont-grid{grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;display:grid}.do-col,.dont-col{border-radius:16px;padding:28px}.do-col{background:#ecfdf5;border:1px solid #a7f3d0}.dont-col{background:#fef2f2;border:1px solid #fecaca}.do-col h4,.dont-col h4{margin-bottom:16px;font-size:14px;font-weight:800}.do-col h4{color:var(--success)}.dont-col h4{color:var(--error)}.do-col li,.dont-col li{color:var(--text);padding:6px 0;font-size:14px;list-style:none}.do-col li:before{content:"✓ ";color:var(--success);font-weight:700}.dont-col li:before{content:"✕ ";color:var(--error);font-weight:700}.type-specimen{background:var(--surface);border:1px solid var(--border);border-radius:20px;margin:24px 0;padding:48px}.type-courier{color:var(--brand);letter-spacing:-1px;margin-bottom:16px;font-family:Inter,sans-serif;font-size:48px;font-weight:900}.type-inter{color:var(--text);letter-spacing:-1px;font-family:Inter,sans-serif;font-size:36px;font-weight:300}.gradient-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;display:grid}.gradient-card{border:1px solid var(--border);border-radius:16px;overflow:hidden}.gradient-preview{height:100px}.gradient-label{background:#fff;padding:14px 16px}.gradient-label .name{font-size:13px;font-weight:700}.gradient-label code{color:var(--muted);margin-top:4px;font-family:Courier New,monospace;font-size:11px;display:block}.clearspace-diagram{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;margin:24px 0;padding:48px}.clearspace-diagram .inner{border:2px dashed var(--brand);border-radius:12px;padding:40px 60px;display:inline-block;position:relative}.clearspace-diagram img{height:96px}.clearspace-diagram .measure{color:var(--brand);letter-spacing:1px;font-size:10px;font-weight:700;position:absolute}.clearspace-diagram .top-m{top:8px;left:50%;transform:translate(-50%)}.clearspace-diagram .bot-m{bottom:8px;left:50%;transform:translate(-50%)}.clearspace-diagram .left-m{top:50%;left:8px;transform:translateY(-50%)rotate(-90deg)}.clearspace-diagram .right-m{top:50%;right:8px;transform:translateY(-50%)rotate(90deg)}.segment-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0;display:grid}.segment-card{color:#fff;border-radius:20px;padding:32px 24px;position:relative;overflow:hidden}.segment-card.circles{background:linear-gradient(135deg,#10b981,#d946ef)}.segment-card.workplace{background:linear-gradient(135deg,#0f172a,#1e293b)}.segment-card.api{background:linear-gradient(135deg,#059669,#10b981)}.segment-card .seg-label{letter-spacing:2px;text-transform:uppercase;opacity:.7;font-size:11px;font-weight:800}.segment-card .seg-name{margin:8px 0;font-size:24px;font-weight:900}.segment-card .seg-audience{opacity:.8;font-size:13px}.segment-card .seg-accent{background:rgba(255,255,255,.15);border-radius:6px;margin-top:12px;padding:4px 10px;font-family:monospace;font-size:11px;font-weight:700;display:inline-block}.misuse-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;display:grid}.misuse-card{text-align:center;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:20px}.misuse-card .misuse-icon{width:28px;height:28px;color:var(--error);margin:0 auto 10px}.misuse-card .rule{color:var(--error);font-size:13px;font-weight:600}.download-bar{z-index:100;position:fixed;bottom:24px;right:24px}.download-btn{background:var(--brand);color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:14px 28px;font-size:14px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 8px 32px rgba(153,0,153,.35)}.download-btn:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 12px 40px rgba(153,0,153,.45)}.download-btn svg{width:18px;height:18px}@media print{.download-bar{display:none}}.footer{background:var(--slate);color:#fff;text-align:center;padding:64px 0}.footer .tagline{margin-bottom:8px;font-size:28px;font-weight:800}.footer .copy{opacity:.5;font-size:13px}.footer .contact{margin-top:24px}.footer .contact a{color:var(--brand-light);font-size:14px;font-weight:600;text-decoration:none}@media print{[data-testid],[class*=css-]{flex:none!important;height:auto!important;max-height:none!important;position:static!important;overflow:visible!important}html,body,#root,#root>div,#root>div>div{height:auto!important;overflow:visible!important}.hero{break-after:page;padding:60px 40px 50px}.hero h1{font-size:48px}.section{break-inside:avoid;padding:40px 0}.subsection{break-inside:avoid}.logo-card:hover,.color-swatch:hover,.personality-card:hover{box-shadow:none;transform:none}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.download-bar{display:none!important}}@media (width<=768px){.hero{padding:80px 24px 60px}.hero h1{font-size:36px}.container{padding:0 24px}.section-title{font-size:32px}.logo-grid,.logo-grid.logo-grid-2,.gradient-grid,.misuse-grid,.segment-grid{grid-template-columns:1fr}.color-row,.personality-grid{grid-template-columns:repeat(2,1fr)}.do-dont-grid{grid-template-columns:1fr}.brand-table{white-space:nowrap;display:block;overflow-x:auto}.type-courier{font-size:32px}.type-inter{font-size:24px}.clearspace-diagram .inner{padding:24px 40px}}