:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background-color:#0f172a;--card-bg: #0b1120;--border-subtle: #1e293b;--accent: #38bdf8;--accent-soft: rgba(56, 189, 248, .1);--clarity-high: #22c55e;--clarity-medium: #eab308;--clarity-low: #f97316;--clarity-very-low: #ef4444}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1e293b 0,#020617 55%);color:#e5e7eb}#root{min-height:100vh}.app{max-width:1000px;margin:0 auto;padding:2rem 1.25rem 3rem}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#fff}.app-header p{color:#9ca3af;max-width:480px;margin:.25rem auto 0}.app-main{display:grid;gap:1.25rem}.card{background:var(--card-bg);border-radius:1rem;padding:1.25rem 1rem;border:1px solid var(--border-subtle);box-shadow:0 18px 45px #0f172ae6}.card h2{margin-top:0;font-size:1.15rem;margin-bottom:.75rem}.form-grid{display:grid;gap:.75rem}label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}input[type=number]{padding:.4rem .5rem;border-radius:.5rem;border:1px solid #4b5563;background-color:#020617;color:#e5e7eb}input[type=number]:focus{outline:2px solid var(--accent);outline-offset:1px}.primary-button{margin-top:.5rem;padding:.5rem .8rem;border-radius:.75rem;border:none;background:linear-gradient(135deg,#38bdf8,#22c55e);color:#020617;font-weight:600;cursor:pointer}.primary-button:hover{filter:brightness(1.05)}.clarity-score{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem .75rem;border-radius:1rem;color:#020617}.clarity-number{font-size:2.75rem;font-weight:700}.clarity-label{font-size:.9rem;opacity:.9}.clarity-note{font-size:.85rem;color:#9ca3af;margin-top:.75rem}.trend-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.75rem;align-items:end}.trend-item{text-align:center;font-size:.75rem;color:#9ca3af}.trend-date{margin-bottom:.35rem}.trend-bar{width:100%;border-radius:999px;transition:height .25s ease,transform .15s ease}.trend-bar:hover{transform:translateY(-2px)}.trend-score{margin-top:.35rem;font-weight:500;color:#e5e7eb}.small-note{margin-top:.5rem;font-size:.8rem;color:#9ca3af}@media(min-width:768px){.app-main{grid-template-columns:repeat(2,minmax(0,1fr))}.card:nth-child(3){grid-column:1 / -1}.card:nth-child(4){grid-column:1 / -1}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}