:root { --ink:#eaf0f4; --muted:#aebcc7; --canvas:#071019; --panel:#0d1a25; --panel-2:#102230; --line:rgba(211,232,240,.13); --teal:#70ead7; --gold:#f1c977; --coral:#fb937f; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:var(--sans); } button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .hidden { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero { min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column; background:radial-gradient(circle at 70% 25%,rgba(24,91,101,.34),transparent 30%), radial-gradient(circle at 13% 75%,rgba(178,114,50,.18),transparent 26%), linear-gradient(135deg,#071019,#0b1c28 65%,#112431); }
.nav { width:min(1200px,calc(100% - 48px)); margin:0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; font-size:13px; color:#c9d4dc; }.nav a:last-child { border-bottom:1px solid var(--teal); padding-bottom:3px; }.brand { font-family:var(--mono); font-size:14px; color:#fff; }.brand span { color:var(--teal); font-size:20px; vertical-align:-2px; }
.hero-content { width:min(900px,calc(100% - 40px)); margin:auto; text-align:center; position:relative; z-index:1; padding:78px 0 118px; }.eyebrow,.overline { margin:0; color:var(--teal); font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.13em; text-transform:uppercase; }.hero h1 { max-width:790px; margin:18px auto 20px; font-family:"Playfair Display",serif; font-size:clamp(48px,8vw,86px); line-height:.99; letter-spacing:-.045em; }.hero h1 em { color:var(--gold); }.lede { max-width:620px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.7; }.search-panel { width:min(760px,100%); margin:42px auto 12px; padding:8px; display:flex; gap:8px; background:rgba(6,18,28,.78); border:1px solid rgba(159,219,224,.24); box-shadow:0 20px 50px rgba(0,0,0,.22); border-radius:16px; backdrop-filter:blur(12px); }.url-input-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0 15px; }.input-mark { color:var(--gold); font-family:var(--mono); }.url-input-wrap input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-family:var(--mono); font-size:13px; }.url-input-wrap input::placeholder { color:#718290; }.search-panel button { border:0; border-radius:10px; padding:14px 19px; display:flex; gap:18px; align-items:center; justify-content:center; color:#071019; background:var(--teal); font-weight:800; font-size:13px; transition:transform .2s,background .2s; }.search-panel button:hover { transform:translateY(-2px); background:#a0f4e5; }.search-panel button:disabled { cursor:wait; opacity:.72; transform:none; }.form-status { min-height:20px; color:var(--gold); font-size:13px; }.form-status.error { color:var(--coral); }.sample-links { margin-top:18px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; color:#8fa0ad; font-size:12px; }.sample-links button { padding:2px 0; color:#c8d5db; background:transparent; border:0; border-bottom:1px solid rgba(112,234,215,.55); }.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:#91a6b3; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.scroll-cue span { margin-left:8px; color:var(--teal); font-size:16px; }.hero-orbit { position:absolute; border:1px solid rgba(112,234,215,.13); border-radius:50%; pointer-events:none; }.orbit-one { width:520px; height:520px; right:-200px; top:70px; }.orbit-two { width:800px; height:800px; left:-525px; bottom:-400px; border-color:rgba(241,201,119,.12); }
.dashboard { background:linear-gradient(180deg,#0b1822,#071019); border-top:1px solid var(--line); }.dashboard-inner { width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:88px 0 100px; }.repo-banner { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:42px; }.repo-identity { display:flex; align-items:flex-start; gap:20px; }.avatar { width:80px; height:80px; border:2px solid var(--teal); border-radius:15px; background:#15313d; }.repo-identity h2 { margin:5px 0 8px; font-size:clamp(30px,4vw,44px); letter-spacing:-.04em; }.repo-description { max-width:680px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.badge { padding:4px 8px; border:1px solid rgba(112,234,215,.25); border-radius:99px; color:#a9eadd; font-family:var(--mono); font-size:10px; }.outline-link { flex:none; padding:11px 13px; border:1px solid var(--line); border-radius:8px; color:#d6e1e5; font-size:12px; transition:border-color .2s,color .2s; }.outline-link:hover { border-color:var(--teal); color:var(--teal); }
.score-strip { display:grid; grid-template-columns:132px minmax(120px,1fr) 130px minmax(250px,1.2fr); gap:25px; align-items:center; margin-bottom:22px; padding:23px 26px; border:1px solid rgba(112,234,215,.17); border-radius:13px; background:linear-gradient(100deg,rgba(16,48,56,.62),rgba(15,30,40,.7)); }.health-intro { display:flex; align-items:baseline; gap:3px; }.health-intro .overline { position:absolute; transform:translateY(-23px); }.health-intro strong { color:var(--gold); font-size:34px; line-height:1; }.health-intro span { color:#9eb0ba; font-family:var(--mono); font-size:11px; }.health-bar { overflow:hidden; height:8px; background:#162b37; border-radius:9px; }.health-bar div { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--teal)); transition:width .8s ease; }.health-label { margin:0; color:#d7e4e8; font-size:13px; font-weight:700; }.health-signals { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }.health-signals li { color:#a2bac2; font-family:var(--mono); font-size:10px; }.health-signals li::before { content:"●"; margin-right:5px; color:var(--teal); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }.stat-card { min-height:130px; padding:21px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }.stat-card span { color:var(--gold); font-size:17px; }.stat-card p { margin:15px 0 6px; color:#91a5b1; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.stat-card strong { font-family:var(--mono); font-size:22px; font-weight:500; }.analysis-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin-top:22px; }.panel { padding:29px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }.panel-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:24px; }.panel-heading h3 { margin:5px 0 0; font-size:21px; letter-spacing:-.025em; }.panel-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(112,234,215,.12); color:var(--teal); font-size:18px; }.story { min-height:84px; margin:0; color:#d8e1e6; font-size:15px; line-height:1.8; }.story-facts { display:flex; flex-wrap:wrap; gap:9px; margin-top:23px; }.fact { padding:7px 9px; color:#b3c7ce; background:#102430; border-radius:5px; font-family:var(--mono); font-size:10px; }.stack-list { display:flex; flex-wrap:wrap; gap:8px; }.stack-item { padding:8px 10px; color:#dbedf0; background:#102936; border:1px solid rgba(112,234,215,.12); border-radius:6px; font-family:var(--mono); font-size:11px; }.stack-item span { color:var(--teal); margin-right:5px; }.license-row { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:9px; align-items:center; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); color:#91a5b1; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }.license-row strong { color:#dce8eb; font-family:var(--mono); font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; }.explorer-grid { grid-template-columns:1.05fr .95fr; }.panel-note { margin:-11px 0 18px; color:#91a5b1; font-size:12px; }.file-tree { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.tree-item { display:flex; min-width:0; align-items:center; gap:8px; padding:9px; color:#c3d2d7; border-radius:5px; background:#0b1a25; font-family:var(--mono); font-size:11px; }.tree-item span { color:var(--gold); }.tree-item.file span { color:var(--teal); }.tree-item b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }.language-row { display:grid; grid-template-columns:minmax(65px,.4fr) 1fr 42px; gap:10px; align-items:center; margin:12px 0; color:#c7d6da; font-family:var(--mono); font-size:11px; }.language-bar { height:6px; overflow:hidden; border-radius:8px; background:#19303c; }.language-bar i { display:block; height:100%; border-radius:inherit; background:var(--teal); }.language-row:nth-child(2) .language-bar i { background:var(--gold); }.language-row:nth-child(3) .language-bar i { background:var(--coral); }.language-row span:last-child { text-align:right; color:#91a5b1; }.onboarding { margin-top:27px; padding:17px; border-left:2px solid var(--gold); background:#10202c; }.onboarding p:last-child { margin:8px 0 0; color:#c8d5d9; font-size:13px; line-height:1.6; }
.features { padding:100px max(24px,calc((100% - 1200px)/2)); background:#061019; }.section-heading { max-width:610px; }.section-heading h2 { margin:14px 0 43px; font-family:"Playfair Display",serif; font-size:clamp(38px,5vw,59px); letter-spacing:-.04em; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.feature-grid article { min-height:220px; padding:27px 27px 20px; border-right:1px solid var(--line); }.feature-grid article:first-child { border-left:1px solid var(--line); }.feature-grid span { color:var(--gold); font-family:var(--mono); font-size:11px; }.feature-grid h3 { margin:44px 0 9px; font-size:18px; }.feature-grid p { margin:0; color:#94a8b3; font-size:13px; line-height:1.7; }
.ask-panel { margin-top:22px; }.question-list { display:flex; flex-wrap:wrap; gap:8px; }.question-list button { padding:9px 12px; border:1px solid rgba(112,234,215,.24); border-radius:7px; color:#c8d9de; background:#102430; font-size:12px; transition:.2s; }.question-list button:hover,.question-list button.active { border-color:var(--teal); color:var(--teal); background:#13313a; }.answer-box { min-height:52px; margin-top:15px; padding:15px 17px; border-left:2px solid var(--gold); color:#d8e4e7; background:#10202c; font-size:13px; line-height:1.7; }
@media (max-width:820px) { .score-strip { grid-template-columns:120px 1fr; }.health-label,.health-signals { grid-column:span 1; }.stats-grid { grid-template-columns:repeat(2,1fr); }.analysis-grid,.explorer-grid { grid-template-columns:1fr; }.file-tree { grid-template-columns:1fr; } }
@media (max-width:580px) { .nav,.dashboard-inner { width:calc(100% - 32px); }.nav { height:68px; }.nav a:last-child { display:none; }.hero-content { width:calc(100% - 32px); padding-top:40px; }.search-panel { display:block; padding:7px; }.url-input-wrap { height:44px; }.search-panel button { width:100%; margin-top:7px; }.repo-banner { display:block; }.repo-identity { gap:13px; }.avatar { width:58px; height:58px; }.outline-link { display:inline-block; margin:20px 0 0 71px; }.score-strip { display:block; }.health-intro { margin-top:12px; }.health-bar { margin:22px 0 10px; }.health-signals { margin-top:13px; }.stats-grid { gap:9px; }.stat-card { min-height:105px; padding:15px; }.stat-card p { margin-top:8px; }.stat-card strong { font-size:18px; }.panel { padding:20px; }.license-row { grid-template-columns:auto 1fr; }.license-row span:nth-of-type(2) { margin-top:8px; }.license-row strong:nth-of-type(2) { margin-top:8px; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { min-height:160px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-grid h3 { margin-top:22px; } }