:root { --ink:#10212f; --paper:#f2f5f3; --card:#fff; --muted:#62737d; --line:#cad4d7; --signal:#15a7a0; --signal-pale:#d5f2ed; --sun:#edb95e; --danger:#9c3d35; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(120deg,#e5ece9 0%,var(--paper) 42%,#edf1ed 100%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
.shell { width:min(1120px,calc(100% - 36px)); margin:0 auto; padding:28px 0 64px; }
.masthead { display:flex; justify-content:space-between; align-items:center; padding-bottom:26px; border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; font-weight:800; font-size:14px; letter-spacing:.14em; } .wordmark i { color:var(--signal); font-style:normal; }
.masthead p,.eyebrow,.state-kicker,.location p { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; letter-spacing:.09em; color:var(--muted); } .masthead span { color:var(--signal); padding:0 5px; }
.hero { display:grid; grid-template-columns:1fr 310px; align-items:end; padding:64px 0 42px; gap:36px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--signal); } .eyebrow span { display:inline-block; width:8px; height:8px; background:var(--signal); border-radius:50%; box-shadow:0 0 0 4px var(--signal-pale); }
h1 { margin:16px 0 0; max-width:620px; font-size:clamp(52px,8vw,94px); line-height:.88; letter-spacing:-.07em; font-weight:800; } h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.09em; color:var(--signal); }
.hero-note { margin:0 0 3px; padding-left:20px; border-left:2px solid var(--sun); color:var(--muted); line-height:1.55; font-size:14px; }
.request-panel { padding:25px; background:var(--ink); color:white; box-shadow:8px 8px 0 rgba(16,33,47,.12); } label { display:block; margin-bottom:10px; font-size:13px; font-weight:700; } .input-row { display:flex; gap:10px; } input { min-width:0; flex:1; border:1px solid #75858c; background:#fff; color:var(--ink); padding:15px; border-radius:2px; outline:0; } input:focus { box-shadow:0 0 0 3px var(--sun); } button { border:0; border-radius:2px; padding:0 18px; cursor:pointer; font-weight:800; } #extract-button { min-width:172px; color:var(--ink); background:var(--signal); } #extract-button:hover:not(:disabled) { background:#79d9cd; } #extract-button:disabled { opacity:.65; cursor:wait; } #extract-button b { font-size:18px; margin-left:10px; } .input-help { margin:11px 0 0; color:#bdd1d5; font-size:12px; } code { color:#fff; }
.state-card { display:flex; align-items:flex-start; gap:15px; margin-top:24px; padding:23px 25px; border:1px dashed var(--line); background:rgba(255,255,255,.45); } .state-card p { margin:0; } .state-card p:last-child { color:var(--muted); line-height:1.55; } .state-kicker { min-width:112px; padding-top:3px; color:var(--signal); } .error { border-color:#ddb4af; background:#fff9f8; } .error .state-kicker { color:var(--danger); } .spinner { flex:0 0 20px; width:20px; height:20px; border:2px solid var(--line); border-top-color:var(--signal); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} }
.hidden { display:none!important; }
.result { margin-top:30px; } .result-banner { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border:1px solid #a8dcd5; background:var(--signal-pale); } .result-banner p:last-child { margin:6px 0 0; font-family:ui-monospace,monospace; font-size:12px; font-weight:800; letter-spacing:.08em; } #download-button { padding:10px 13px; color:white; background:var(--ink); font-size:12px; } #download-button:hover { background:#284958; }
.profile-head { display:grid; grid-template-columns:88px 1fr auto; gap:20px; align-items:center; padding:31px 0; border-bottom:1px solid var(--line); } .avatar { display:grid; place-items:center; overflow:hidden; width:76px; height:76px; border-radius:50%; color:var(--signal); background:var(--ink); font-size:30px; font-weight:800; } .avatar img { width:100%; height:100%; object-fit:cover; } h2 { margin:0; font-size:clamp(26px,4vw,40px); letter-spacing:-.05em; } .profile-head div:nth-child(2)>p { max-width:600px; margin:5px 0 7px; color:var(--muted); } #profile-link { color:var(--signal); font-size:13px; font-weight:800; } #profile-link.disabled { pointer-events:none; opacity:.6; } .location { min-width:150px; padding:4px 0 4px 20px; border-left:1px solid var(--line); } .location strong { display:block; margin:5px 0 17px; font-size:14px; } .location .followers { color:var(--muted); font-size:12px; font-family:inherit; letter-spacing:0; font-weight:400; } .followers span { color:var(--ink); font-weight:800; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); } .metrics div { padding:21px 20px; border-right:1px solid var(--line); } .metrics div:first-child { padding-left:0; } .metrics div:last-child { border:0; } .metrics strong,.metrics span { display:block; } .metrics strong { color:var(--signal); font-family:Georgia,serif; font-size:34px; font-weight:400; } .metrics span { margin-top:2px; color:var(--muted); font-size:12px; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:54px; padding:34px 0; } h3 { margin:0 0 18px; font-size:14px; letter-spacing:.01em; } .timeline { margin:0; padding:0; list-style:none; } .timeline li { position:relative; margin-left:4px; padding:0 0 20px 20px; border-left:1px solid var(--line); } .timeline li:before { content:''; position:absolute; top:4px; left:-4px; width:7px; height:7px; border-radius:50%; background:var(--signal); } .timeline strong,.timeline span,.timeline small { display:block; } .timeline strong { font-size:14px; } .timeline span { margin-top:3px; color:var(--muted); font-size:13px; } .timeline small { margin-top:5px; color:#87969d; font-family:ui-monospace,monospace; font-size:10px; }
.coverage { padding:23px; background:#fffdf8; border-left:4px solid var(--sun); } .coverage h3 { margin-bottom:10px; } .coverage ul { margin:0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.6; } .raw { margin-top:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } summary { display:flex; justify-content:space-between; padding:16px 0; cursor:pointer; font-size:13px; font-weight:800; } pre { max-height:420px; overflow:auto; margin:0 0 18px; padding:16px; background:var(--ink); color:#d5f2ed; font-size:11px; line-height:1.45; }
@media (max-width:680px) { .shell { width:min(100% - 24px,1120px); padding-top:18px; } .masthead p { display:none; } .hero { grid-template-columns:1fr; padding:44px 0 30px; gap:25px; } .input-row { display:block; } #extract-button { width:100%; margin-top:10px; height:48px; } .profile-head { grid-template-columns:68px 1fr; gap:14px; } .avatar { width:58px; height:58px; } .location { grid-column:1/-1; min-width:0; padding:15px 0 0; border-left:0; border-top:1px solid var(--line); } .location strong { margin-bottom:10px; } .metrics { grid-template-columns:1fr; } .metrics div,.metrics div:first-child { padding:16px 0; border-right:0; border-bottom:1px solid var(--line); } .metrics div:last-child { border-bottom:0; } .result-grid { grid-template-columns:1fr; gap:12px; } .result-banner { align-items:flex-start; gap:10px; } .result-banner button { white-space:nowrap; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; scroll-behavior:auto!important; } }