*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--navy: #1a2744;--navy-lt: #e8ecf4;--text: #1c1c1c;--muted: #666;--border: #dde1ea;--bg: #f7f8fb;--white: #ffffff;--radius: 12px;--shadow: 0 2px 16px rgba(26, 39, 68, .1);--person: #cc0000;--org: #0055cc;--event: #7700bb;--concept: #007777;--date: #cc6600}html{font-size:16px}body{font-family:Inter,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.page{max-width:960px;margin:0 auto;padding:0 1.5rem 4rem}.hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--border);margin-bottom:2.5rem}.hero-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}.hero-title{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;color:var(--navy);margin-bottom:.75rem;line-height:1.2}.hero-sub{max-width:60ch;color:var(--muted);font-size:1rem;margin-bottom:1.6rem}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-size:.82rem}.legend-label{font-weight:600;color:var(--muted)}.legend-item{display:flex;align-items:center;gap:.35rem;font-weight:500}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem;margin-bottom:3rem}.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow);transition:box-shadow .2s}.card:hover{box-shadow:0 4px 24px #1a274424}.card-icon{font-size:2.2rem;line-height:1}.card-title{font-size:1.25rem;font-weight:700;color:var(--navy)}.card-desc{font-size:.9rem;color:var(--muted);flex-grow:1}.card-meta{display:flex;gap:.5rem;flex-wrap:wrap}.badge{font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:4px;background:var(--navy-lt);color:var(--navy);font-family:Courier New,monospace}.btn{margin-top:.5rem;padding:.7rem 1.4rem;border-radius:8px;border:none;font-size:.95rem;font-weight:600;cursor:pointer;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .15s,opacity .15s;width:100%}.btn:hover:not(:disabled){background:#253566}.btn:disabled{opacity:.7;cursor:not-allowed}.btn-loading{background:#4a5568}.btn-done{background:#1a7a40}.btn-error{background:#b91c1c}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.info{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;margin-bottom:2rem}.info h2{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:1.25rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.info-item{display:flex;gap:.9rem;align-items:flex-start}.info-swatch{width:16px;height:16px;border-radius:4px;flex-shrink:0;margin-top:3px}.info-item strong{display:block;font-size:.9rem;margin-bottom:.15rem}.info-example{font-size:.78rem;color:var(--muted);font-style:italic}.footer{text-align:center;font-size:.78rem;color:var(--muted);padding-top:1.5rem;border-top:1px solid var(--border)}@media (max-width: 640px){.cards,.info-grid{grid-template-columns:1fr}.legend{gap:.4rem .9rem}}