:root{--bg:#fff;--surface:#fff;--line:#e8e8e8;--text:#1c1c1c;--muted:#6c6c6c;--ink:#141414;--radius:14px;--font-display:"Suez One", serif;--font-body:"Assistant", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;font-size:17px;line-height:1.65}.grain{pointer-events:none;z-index:50;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}a{color:inherit;text-decoration:none}h1,h2,h3,.brand-text,.poster-letter,.poster-name{font-family:var(--font-display);letter-spacing:.01em;font-weight:400}.site-header{z-index:40;background:color-mix(in srgb, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-end:1px solid var(--line);justify-content:space-between;align-items:center;padding:14px clamp(20px,5vw,56px);display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-logo{block-size:34px;inline-size:auto}.brand-text{flex-direction:column;font-size:22px;line-height:1.1;display:flex}.brand-text small{font-family:var(--font-body);color:var(--muted);letter-spacing:.04em;font-size:12.5px;font-weight:600}.home{max-inline-size:1200px;margin-inline:auto;padding:clamp(24px,4vw,48px) clamp(20px,5vw,56px) 32px}.hero{border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);background:radial-gradient(120% 160% at 85% -20%, hsl(var(--hue) 75% 88% / .6), transparent 55%), var(--surface);grid-template-columns:minmax(240px,420px) 1fr;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(24px,4vw,48px);animation:.6s both fadeUp;display:grid;overflow:hidden;box-shadow:0 24px 48px -32px #00000024}.hero-body h1{margin-block:6px 10px;font-size:clamp(40px,6vw,72px);line-height:1.05}.hero-kicker{color:var(--text);letter-spacing:.03em;font-size:15px;font-weight:700}.hero-tagline{color:var(--muted);max-inline-size:52ch;margin-block-end:22px;font-size:clamp(17px,2vw,21px)}.btn-primary{color:#fff;background:var(--ink);border-radius:999px;padding:12px 26px;font-size:16px;font-weight:700;transition:transform .18s,box-shadow .18s;display:inline-block;box-shadow:0 4px 16px #0000002e}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000047}.btn-outline{color:var(--ink);border:1.5px solid var(--ink);background:0 0;border-radius:999px;padding:11px 26px;font-size:16px;font-weight:700;transition:background .18s,color .18s,transform .18s;display:inline-block}.btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}.hero-poster,.poster{aspect-ratio:16/9;border-radius:var(--radius);background:radial-gradient(140% 100% at 20% 0%, hsl(var(--hue) 75% 55% / .9), transparent 60%), linear-gradient(160deg, hsl(var(--hue) 65% 32%), hsl(var(--hue) 80% 12%));box-shadow:inset 0 0 0 1px hsl(var(--hue) 60% 60% / .25), 0 18px 36px -18px hsl(var(--hue) 60% 35% / .45);place-items:center;display:grid;position:relative;overflow:hidden}.poster-letter{color:hsl(var(--hue) 80% 85% / .16);-webkit-user-select:none;user-select:none;font-size:clamp(120px,16vw,220px);line-height:1;position:absolute;inset-block-end:-14%;inset-inline-start:-4%}.poster-name{color:hsl(var(--hue) 70% 92%);text-shadow:0 2px 18px hsl(var(--hue) 80% 10% / .8);direction:ltr;font-size:clamp(22px,2.4vw,30px)}.poster-img{object-fit:cover;block-size:100%;inline-size:100%;position:absolute;inset:0}.card-name{text-align:end;direction:ltr;margin-block-start:2px;font-size:21px;line-height:1.2}.library{margin-block-start:clamp(36px,6vw,64px)}.library h2{margin-block-end:20px;font-size:clamp(24px,3vw,32px)}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(16px,2.5vw,28px);display:grid}.tool-card{flex-direction:column;gap:10px;animation:.55s both fadeUp;display:flex}.tool-card .poster{transition:transform .22s,box-shadow .22s}.tool-card:hover .poster{box-shadow:inset 0 0 0 1px hsl(var(--hue) 70% 65% / .5), 0 26px 48px -18px hsl(var(--hue) 65% 40% / .5);transform:translateY(-6px)scale(1.02)}.card-meta{color:var(--muted);justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.chip{border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);color:var(--text);background:0 0;border-radius:999px;padding:3px 10px;font-size:12px}.card-tagline{color:var(--muted);font-size:14.5px;line-height:1.5}.tool-page{max-inline-size:820px;margin-inline:auto;padding:clamp(24px,4vw,48px) clamp(20px,5vw,56px) 48px}.tool-banner{border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);background:radial-gradient(120% 180% at 80% -30%, hsl(var(--hue) 75% 86% / .65), transparent 60%), var(--surface);margin-block-end:36px;padding:clamp(28px,4vw,48px);animation:.5s both fadeUp;box-shadow:0 24px 48px -32px #00000024}.tool-banner h1{margin-block:6px 8px;font-size:clamp(38px,6vw,64px);line-height:1.05}.back-btn{border:1.5px solid var(--ink);color:var(--ink);background:0 0;border-radius:999px;align-items:center;gap:8px;margin-block-end:20px;padding:8px 20px;font-size:14.5px;font-weight:700;transition:background .15s,color .15s,transform .15s;display:inline-flex}.back-btn:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}.tool-content{flex-direction:column;gap:34px;animation:.55s .1s both fadeUp;display:flex}.tool-content h2{color:var(--text);margin-block-end:8px;font-size:24px}.tool-content p{color:color-mix(in srgb, var(--text) 82%, var(--muted))}.steps{flex-direction:column;gap:14px;margin-block-start:14px;list-style:none;display:flex}.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);gap:16px;padding:18px 20px;display:flex;box-shadow:0 4px 14px #0000000a}.step-num{block-size:34px;inline-size:34px;font-family:var(--font-display);color:#fff;background:var(--ink);border-radius:50%;flex-shrink:0;place-items:center;font-size:17px;display:grid}.step h3{margin-block-end:2px;font-size:18px}.step p{color:var(--muted);font-size:15.5px}.tip{border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--ink) 25%, var(--line));background:color-mix(in srgb, var(--ink) 4%, var(--surface));padding:20px 22px}.tip strong{color:var(--text);margin-block-end:6px;display:block}.site-footer{text-align:center;color:var(--muted);border-block-start:1px solid var(--line);margin-block-start:48px;padding:40px 20px 28px;font-size:14px}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.hero{grid-template-columns:1fr}.hero-poster{inline-size:100%;max-inline-size:340px;margin-inline:auto}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
