:root{--ink: #08080c;--ink-surface: #0e0e16;--ink-card: #14141f;--ink-card-hover: #1a1a28;--gold: #c8a44e;--gold-bright: #d4b86a;--gold-pale: #e8d5a3;--gold-dim: #8a7238;--gold-wash: rgba(200, 164, 78, .06);--gold-glow: rgba(200, 164, 78, .12);--text-primary: #f0ebe0;--text-secondary: #a09880;--text-muted: #6b6458;--text-inverse: #0a0a0f;--border-subtle: rgba(200, 164, 78, .08);--border-default: rgba(200, 164, 78, .14);--border-emphasis: rgba(200, 164, 78, .25);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--max-width: 1200px;--max-width-narrow: 800px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-quint: cubic-bezier(.22, 1, .36, 1);--transition-fast: .15s var(--ease-out-expo);--transition-base: .3s var(--ease-out-expo);--transition-slow: .6s var(--ease-out-expo)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary);background:var(--ink);line-height:1.7;font-size:16px;font-weight:400;min-height:100vh;display:flex;flex-direction:column;position:relative}body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,164,78,.03) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 85% 85%,rgba(200,164,78,.02) 0%,transparent 60%),var(--ink)}body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");background-size:200px 200px}header{position:sticky;top:0;z-index:100;background:#08080cd9;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-subtle);animation:headerSlideIn .8s var(--ease-out-expo) both}@keyframes headerSlideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}header nav{max-width:var(--max-width);margin:0 auto;padding:0 2rem;height:64px;display:flex;justify-content:space-between;align-items:center}header .logo{text-decoration:none;font-family:Playfair Display,Georgia,serif;font-weight:600;font-size:1.25rem;color:var(--text-primary);letter-spacing:.02em;transition:color var(--transition-fast);position:relative}header .logo:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--gold);transition:width var(--transition-base)}header .logo:hover{color:var(--gold-bright)}header .logo:hover:after{width:100%}header .nav-links{display:flex;gap:2rem;align-items:center}header .nav-links a{text-decoration:none;color:var(--text-secondary);font-size:.875rem;font-weight:400;letter-spacing:.03em;text-transform:uppercase;transition:color var(--transition-fast);position:relative}header .nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width var(--transition-base)}header .nav-links a:hover{color:var(--gold-bright)}header .nav-links a:hover:after{width:100%}main{flex:1;max-width:var(--max-width);width:100%;margin:0 auto;padding:2rem 2rem 6rem;animation:contentFadeIn .6s var(--ease-out-expo) .2s both}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}main.wide{max-width:96vw;padding:1.5rem 2rem 4rem}h1,h2,h3,h4{font-family:Playfair Display,Georgia,serif;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--text-primary)}h1{font-size:2.5rem;margin:.5rem 0 1.25rem}h2{font-size:1.75rem;margin:3rem 0 1rem;position:relative;padding-bottom:.75rem}h2:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gold);border-radius:1px}h3{font-size:1.25rem;margin:1.5rem 0 .5rem;font-weight:500}p{margin:.75rem 0;color:var(--text-secondary);line-height:1.75}a{color:var(--gold);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--gold-bright)}ul,ol{margin:.75rem 0;padding-left:1.5rem;color:var(--text-secondary)}li{margin:.4rem 0}li strong{color:var(--text-primary);font-weight:500}table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem}th,td{border:1px solid var(--border-default);padding:.7rem 1rem;text-align:left}th{background:var(--ink-surface);font-weight:500;font-family:DM Sans,sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}td{color:var(--text-secondary)}.callout{background:var(--gold-wash);border:1px solid var(--border-emphasis);border-left:3px solid var(--gold);padding:1.2rem 1.5rem;margin:2rem 0;border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-primary);font-size:.95rem}.callout strong{color:var(--gold-bright)}.hero{text-align:center;padding:4rem 1rem 3rem;position:relative}.hero:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(200,164,78,.04) 0%,transparent 70%);pointer-events:none}.hero h1{font-size:3.2rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,var(--gold-pale) 0%,var(--gold) 40%,var(--gold-bright) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:heroReveal .8s var(--ease-out-expo) both}@keyframes heroReveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero p{font-size:1.15rem;color:var(--text-secondary);max-width:640px;margin:0 auto;animation:heroReveal .8s var(--ease-out-expo) .15s both;line-height:1.8}.hero .hero-accent{display:inline-block;width:60px;height:2px;background:var(--gold);margin:1.5rem auto 0;border-radius:1px;animation:heroReveal .8s var(--ease-out-expo) .25s both}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin:2rem 0 3rem}.tool-card{position:relative;background:var(--ink-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.75rem;transition:border-color var(--transition-base),background var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base);cursor:pointer;overflow:hidden}.tool-card:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,var(--gold-glow) 0%,transparent 100%);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.tool-card:hover{border-color:var(--border-emphasis);background:var(--ink-card-hover);transform:translateY(-3px);box-shadow:0 12px 40px #0006,0 0 0 1px var(--border-emphasis)}.tool-card:hover:before{opacity:1}.tool-card{animation:cardReveal .6s var(--ease-out-expo) both}.tool-card:nth-child(1){animation-delay:.1s}.tool-card:nth-child(2){animation-delay:.15s}.tool-card:nth-child(3){animation-delay:.2s}.tool-card:nth-child(4){animation-delay:.25s}.tool-card:nth-child(5){animation-delay:.3s}.tool-card:nth-child(6){animation-delay:.35s}.tool-card:nth-child(7){animation-delay:.4s}.tool-card:nth-child(8){animation-delay:.45s}.tool-card:nth-child(9){animation-delay:.5s}.tool-card:nth-child(10){animation-delay:.55s}.tool-card:nth-child(11){animation-delay:.6s}.tool-card:nth-child(12){animation-delay:.65s}@keyframes cardReveal{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.tool-card .icon{font-size:1.75rem;margin-bottom:1rem;filter:grayscale(.5);transition:filter var(--transition-base)}.tool-card:hover .icon{filter:grayscale(0)}.tool-card h3{margin:0 0 .4rem;font-size:1.1rem;font-weight:600}.tool-card h3 a{color:var(--text-primary);transition:color var(--transition-fast)}.tool-card h3 a:hover{color:var(--gold-bright);text-decoration:none}.tool-card p{color:var(--text-muted);font-size:.875rem;margin:0 0 1.25rem;line-height:1.6}.tool-card .tag{display:inline-block;font-family:JetBrains Mono,Fira Code,monospace;font-size:.7rem;font-weight:500;color:var(--gold-dim);background:var(--gold-wash);border:1px solid var(--border-default);padding:.25rem .65rem;border-radius:var(--radius-sm);letter-spacing:.05em;text-transform:uppercase;transition:all var(--transition-fast)}.tool-card:hover .tag{color:var(--gold);border-color:var(--border-emphasis);background:var(--gold-glow)}.btn{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:.65rem 1.5rem;border-radius:var(--radius-sm);font-family:DM Sans,sans-serif;font-size:.85rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base);z-index:-1}.btn:hover{color:var(--text-inverse);text-decoration:none}.btn:hover:before{transform:scaleX(1)}.btn-primary{background:var(--gold);color:var(--text-inverse);border-color:var(--gold)}.btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--text-inverse)}hr{border:none;height:1px;background:linear-gradient(to right,var(--border-emphasis),var(--border-subtle),transparent);margin:3rem 0}footer{border-top:1px solid var(--border-subtle);text-align:center;padding:2.5rem 2rem;font-size:.8rem;color:var(--text-muted);max-width:var(--max-width);width:100%;margin:0 auto;letter-spacing:.03em}footer a{color:var(--text-muted);margin:0 .75rem;transition:color var(--transition-fast);text-decoration:none}footer a:hover{color:var(--gold)}footer .footer-divider{display:inline-block;width:20px;height:1px;background:var(--border-default);vertical-align:middle;margin:0 .25rem}footer p{margin:.5rem 0}.rating{color:var(--gold);font-weight:500}@media(max-width:768px){h1{font-size:1.8rem}h2{font-size:1.4rem}.hero h1{font-size:2.2rem}.hero{padding:2.5rem 1rem 2rem}header nav{padding:0 1.25rem;height:56px}header .nav-links{gap:1.25rem}header .nav-links a{font-size:.75rem}.tool-grid{grid-template-columns:1fr;gap:1rem}main{padding:1.5rem 1.25rem 4rem}.btn{padding:.55rem 1.2rem;font-size:.8rem}}@media(max-width:480px){.hero h1{font-size:1.8rem}header .nav-links{gap:.8rem}header .logo{font-size:1.1rem}}
