:root{--focus-primary: #3b82f6;--focus-secondary: #8b5cf6;--focus-accent: #06b6d4;--focus-success: #10b981;--focus-warning: #f59e0b;--focus-error: #ef4444;--focus-light: #ffffff;--focus-dark: #1e293b;--focus-gray-50: #f8fafc;--focus-gray-100: #f1f5f9;--focus-gray-200: #e2e8f0;--focus-gray-300: #cbd5e1;--focus-gray-400: #94a3b8;--focus-gray-500: #64748b;--focus-gray-600: #475569;--focus-gray-700: #334155;--focus-gray-800: #1e293b;--focus-gray-900: #0f172a}body{background:radial-gradient(ellipse 800px 600px at 20% 20%,rgba(59,130,246,.15),transparent 50%),radial-gradient(ellipse 600px 400px at 80% 80%,rgba(139,92,246,.12),transparent 50%),radial-gradient(ellipse 400px 300px at 50% 50%,rgba(6,182,212,.08),transparent 50%),linear-gradient(135deg,#f8fafc,#e2e8f0);background-attachment:fixed;color:var(--focus-gray-800)}main.container{background:#fffc;backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.3);box-shadow:0 25px 50px -12px #0000001a,0 0 0 1px #ffffff1a;padding:20px;max-width:1200px}h1{background:linear-gradient(135deg,var(--focus-primary),var(--focus-secondary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:3rem;font-weight:800;text-align:center;margin-bottom:1.5rem;position:relative}h1:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:4px;background:linear-gradient(90deg,var(--focus-primary),var(--focus-secondary));border-radius:2px}h2{background:linear-gradient(135deg,var(--focus-gray-700),var(--focus-gray-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:2rem;font-weight:700;margin:2.5rem 0 1rem;position:relative}h2:before{content:"🎯";margin-right:.5rem;font-size:1.5rem}.description{background:linear-gradient(135deg,#3b82f60d,#8b5cf60d);border:1px solid rgba(59,130,246,.1);border-radius:16px;padding:2rem;margin:2rem 0;position:relative;overflow:hidden}.description:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--focus-primary),var(--focus-secondary),var(--focus-accent))}pre{background:linear-gradient(135deg,var(--focus-gray-900),var(--focus-gray-800));border-radius:12px;padding:1.5rem;margin:1.5rem 0;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003}pre:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--focus-success),var(--focus-accent),var(--focus-primary))}code{color:#e2e8f0;font-family:Fira Code,Monaco,Consolas,monospace;font-size:.9rem;line-height:1.5}:not(pre)>code{background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);color:var(--focus-primary);padding:.2rem .4rem;border-radius:6px;font-size:.9rem;border:1px solid rgba(59,130,246,.2)}img{border-radius:16px;box-shadow:0 20px 40px #3b82f626,0 0 0 1px #3b82f61a;transition:transform .3s ease,box-shadow .3s ease;margin:2rem 0}img:hover{transform:translateY(-5px);box-shadow:0 25px 50px #3b82f633,0 0 0 1px #3b82f626}ul,ol{background:#fff9;border-radius:12px;margin:1.5rem 0}li{margin:.5rem 0;position:relative}li::marker{color:var(--focus-primary);font-weight:700}blockquote{background:linear-gradient(135deg,#06b6d40d,#3b82f60d);border-left:4px solid var(--focus-accent);border-radius:0 12px 12px 0;padding:1.5rem;margin:2rem 0;position:relative}blockquote:before{content:"💡";position:absolute;top:-10px;left:-10px;background:#fff;border-radius:50%;padding:5px;font-size:1.2rem}figure{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:16px;padding:2rem;margin:2rem 0;border:1px solid rgba(59,130,246,.1);box-shadow:0 10px 25px #00000014;position:relative;overflow:hidden}figure:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--focus-success),var(--focus-accent),var(--focus-primary))}figcaption{color:var(--focus-gray-600);text-align:center;margin-top:1rem;padding:1rem;background:#3b82f60d;border-radius:8px}button{background:linear-gradient(135deg,var(--focus-primary),var(--focus-secondary));color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #3b82f64d}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}input[type=text]{background:#fffc;border:2px solid var(--focus-gray-200);border-radius:8px;padding:.75rem 1rem;font-size:1rem}a{color:var(--focus-primary);text-decoration:none;background:linear-gradient(currentColor,currentColor);background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;padding:.2rem 0}a:hover{color:var(--focus-secondary);background-size:100% 2px}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.5rem}pre{padding:1rem;font-size:.8rem}}@media (prefers-color-scheme: dark){body{background:radial-gradient(ellipse 800px 600px at 20% 20%,rgba(59,130,246,.2),transparent 50%),radial-gradient(ellipse 600px 400px at 80% 80%,rgba(139,92,246,.15),transparent 50%),radial-gradient(ellipse 400px 300px at 50% 50%,rgba(6,182,212,.1),transparent 50%),linear-gradient(135deg,#0f172a,#1e293b);color:var(--focus-gray-100)}main.container{background:#1e293bcc;border:1px solid rgba(59,130,246,.2)}.description,section,figure{background:#1e293b99;border-color:#3b82f633}ul,ol{background:#1e293b99}input[type=text]{background:#1e293bcc;border-color:var(--focus-gray-600);color:var(--focus-gray-100)}}