@import"https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Outfit:wght@300;400;600&display=swap";:root{--color-bg: #f4f0fb;--color-bg-soft: #fff7fd;--color-bg-glow: rgba(232, 223, 255, .9);--color-blob-1: rgba(176, 152, 255, .35);--color-blob-2: rgba(243, 186, 203, .35);--color-blob-3: rgba(173, 216, 210, .35);--color-fg: #1c1a26;--color-primary: #9f86ff;--color-primary-bright: #c9b2ff;--color-on-primary: #fefbff;--color-muted: #6b6378;--color-card: #ffffff;--color-border: #e4daf4;--color-accent: #f3b3c7;--color-on-accent: #2c1733;--color-error: #b42364;--color-error-bg: rgba(180, 35, 100, .12);--color-error-border: rgba(180, 35, 100, .3);--radius: 18px;--font-display: "DM Serif Display", serif;--font-body: "Outfit", sans-serif;--shadow: 0 24px 60px rgba(96, 76, 160, .18)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);color:var(--color-fg);background:radial-gradient(circle at 15% 15%,var(--color-blob-1),transparent 55%),radial-gradient(circle at 85% 10%,var(--color-blob-2),transparent 50%),radial-gradient(circle at 10% 85%,var(--color-blob-3),transparent 52%),radial-gradient(circle at top,var(--color-bg-glow),transparent 55%),linear-gradient(130deg,var(--color-bg),var(--color-bg-soft) 60%);min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid color-mix(in srgb,var(--color-accent) 70%,var(--color-primary));outline-offset:3px}h1,h2,h3{font-family:var(--font-display);margin:0 0 .5rem}p{margin:0 0 1rem}.page{display:flex;flex-direction:column;min-height:100vh;position:relative;overflow-x:hidden}.banner{background:linear-gradient(90deg,var(--color-primary-bright),var(--color-primary));color:var(--color-on-primary);text-align:center;padding:.4rem 1rem;letter-spacing:.2em;font-size:.75rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 4vw;gap:1.5rem;border-bottom:1px solid var(--color-border);width:min(1120px,100%);margin:0 auto}.header nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.header nav a{font-weight:600;padding:.4rem .8rem;border-radius:999px;background:var(--color-card);border:1px solid var(--color-border);transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 12px 26px color-mix(in srgb,var(--color-primary) 10%,transparent)}.header nav a:hover{background:color-mix(in srgb,var(--color-primary) 12%,var(--color-card));border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px)}.brand{display:flex;align-items:center;gap:1rem}.brand-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--color-primary-bright),var(--color-primary));color:var(--color-on-primary);font-weight:600;letter-spacing:.1em}.content{flex:1;padding:0 4vw 3rem;width:min(1120px,100%);margin:0 auto}.hero{display:grid;gap:2rem;animation:fadeIn .8s ease-out}.hero-text{max-width:560px}.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem;animation:rise .8s ease;transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 28px 70px color-mix(in srgb,var(--color-primary) 16%,transparent)}.card-meta{display:flex;justify-content:space-between;font-weight:600;color:var(--color-muted)}.button{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.2rem;border-radius:999px;border:none;background:linear-gradient(135deg,var(--color-primary-bright),var(--color-primary));color:var(--color-on-primary);font-weight:600;cursor:pointer;box-shadow:0 14px 32px color-mix(in srgb,var(--color-primary) 28%,transparent);transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-2px);box-shadow:0 18px 36px color-mix(in srgb,var(--color-primary) 34%,transparent)}.button:focus-visible{outline:2px solid color-mix(in srgb,var(--color-primary) 70%,transparent);outline-offset:2px}.button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.panel{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}.flow{display:grid;gap:1.5rem}.flow-header p{color:var(--color-muted)}.field{display:grid;gap:.4rem;font-weight:600}.field input,.field select{padding:.6rem .8rem;border-radius:12px;border:1px solid var(--color-border);font-family:var(--font-body);background:var(--color-bg-soft);color:var(--color-fg);transition:border-color .2s ease,box-shadow .2s ease}.field input:focus,.field select:focus{outline:none;border-color:color-mix(in srgb,var(--color-primary) 50%,var(--color-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 25%,transparent)}.field small{color:var(--color-error)}input[type=checkbox]{accent-color:var(--color-primary)}.checkbox{display:flex;align-items:center;gap:.6rem;margin-top:1rem}.form{display:grid;gap:1rem}.grid.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.slots{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.slot{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--color-border);background:transparent;cursor:pointer;color:var(--color-fg);font-weight:600;transition:transform .2s ease,border-color .2s ease,background .2s ease}.slot:not(.active):hover{background:color-mix(in srgb,var(--color-accent) 20%,var(--color-card));border-color:color-mix(in srgb,var(--color-accent) 60%,var(--color-border));transform:translateY(-1px)}button:focus-visible,.slot:focus-visible,.theme-switcher select:focus-visible{outline:2px solid color-mix(in srgb,var(--color-accent) 70%,var(--color-primary));outline-offset:3px}.slot.active{background:var(--color-accent);color:var(--color-on-accent);border-color:transparent}.theme-switcher{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.theme-switcher select{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-card);font-family:var(--font-body);color:var(--color-fg)}.error{background:var(--color-error-bg);border:1px solid var(--color-error-border);padding:.75rem 1rem;border-radius:12px;color:var(--color-error)}.muted{color:var(--color-muted)}.footer{padding:1.5rem 4vw;font-size:.85rem;color:var(--color-muted);border-top:1px solid var(--color-border);width:min(1120px,100%);margin:0 auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width: 720px){.header{flex-direction:column;align-items:flex-start}.header nav{width:100%;justify-content:space-between}}@media (min-width: 980px){.hero{grid-template-columns:minmax(0,.45fr) minmax(0,.55fr);align-items:start}.hero-text{grid-column:1;grid-row:1}.grid{grid-column:2;grid-row:1;align-self:start}.error{grid-column:1 / -1}}@media (max-width: 560px){.header{padding:1.25rem 6vw}.header nav{gap:.5rem}.brand{flex-direction:column;align-items:flex-start}.button{width:100%}.slots{gap:.4rem}}
