:root {
  color-scheme: light;
  --ink: #1e2927; --muted: #77827d; --paper: #f5f6f3; --line: #e2e7e1;
  --green: #93aa84; --forest: #30493e; --mint: #dce8d6; --orange: #e3a167;
  --shadow: 0 12px 38px rgba(34,50,43,.07);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.shell { max-width: 1320px; margin: auto; padding: 0 64px; }
.topbar { height: 84px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: var(--forest); color: #fff; font-size: 21px; line-height: 1; }
.brand-mark span { color: #b9d09e; }
.topbar-meta, .eyebrow, .summary-label, footer, .note-count { font-family: "DM Mono", monospace; letter-spacing: .1em; font-size: 10px; }
.topbar-meta { display: flex; align-items: center; gap: 9px; color: #52615b; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7caf73; box-shadow: 0 0 0 4px #e2edde; }
.date { margin-left: 12px; color: #9aa39e; }
.intro { position: relative; min-height: 328px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.eyebrow { color: #7c8d79; margin: 0 0 17px; }
.intro h1 { font-size: clamp(46px,6vw,72px); line-height: .99; letter-spacing: -.075em; margin: 0; font-weight: 600; }
.intro h1 em { font-family: Georgia,serif; color: #829879; font-weight: 400; letter-spacing: -.055em; }
.lede { color: var(--muted); font-size: 14px; margin: 22px 0 0; }
.intro-art { position: absolute; width: 330px; height: 260px; right: 7%; top: 22px; opacity: .8; }
.orbit { position: absolute; border: 1px solid #d7e0d2; border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { inset: 26px 15px 42px 50px; }
.orbit-two { inset: 50px 0 26px 70px; transform: rotate(30deg); }
.orbit-three { inset: 4px 42px 67px 28px; transform: rotate(69deg); }
.orbit-core { position: absolute; top: 107px; left: 147px; width: 22px; height: 22px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 11px #e4ebe0,0 0 0 22px rgba(215,224,210,.45); }
.orbit-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px #f6eade; }
.point-one { top: 47px; left: 87px; }
.point-two { top: 179px; right: 36px; background: #86a479; box-shadow: 0 0 0 6px #e5ede0; }
.point-three { bottom: 39px; left: 79px; background: #c8a175; box-shadow: 0 0 0 6px #f0e6da; }
.summary { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 23px 0 27px; }
.summary-label { display: block; color: #89938d; margin-bottom: 8px; }
.summary-value { font-size: 13px; }
.summary-value b { font-size: 23px; letter-spacing: -.05em; }
.summary-value span { color: #7e8983; margin-left: 5px; }
.summary-right { text-align: right; }
.mono { font: 11px "DM Mono", monospace; color: #7d8982; }
.summary-rule { height: 2px; background: #e4e9e3; position: absolute; bottom: 0; left: 0; right: 0; }
.summary-rule:before { content: ""; display: block; width: 100%; height: 2px; background: #789272; }
.section-heading { display: flex; align-items: end; justify-content: space-between; padding: 36px 0 20px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading h2 { font-size: 24px; letter-spacing: -.055em; margin: 0; font-weight: 600; }
.section-heading h2 span { font: 11px "DM Mono",monospace; color: #849187; margin-left: 7px; }
.site-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }
.site-card { min-width: 0; background: #fff; border: 1px solid #e8ece7; border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s,box-shadow .2s; }
.site-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(34,50,43,.11); }
.preview { position: relative; aspect-ratio: 1.57; background: #edf1eb; overflow: hidden; border-bottom: 1px solid #edf0eb; }
.preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.preview-empty { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #849083; font-size: 11px; }
.loader { width: 20px; height: 20px; border: 2px solid #d6e0d2; border-top-color: #789272; border-radius: 50%; animation: spin .8s linear infinite; }
.preview-empty.failed .loader { display: none; }
.preview-badge { position: absolute; top: 12px; left: 12px; border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-radius: 99px; padding: 6px 9px; display: flex; gap: 6px; align-items: center; font: 9px "DM Mono",monospace; color: #5b6a60; }
.preview-badge i { width: 6px; height: 6px; border-radius: 50%; background: #76a578; }
.preview-badge.loading i { background: #d7a15e; }
.card-content { padding: 15px 16px 14px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.site-name { font-size: 15px; font-weight: 700; letter-spacing: -.035em; margin: 0 0 4px; }
.site-host { font: 10px "DM Mono",monospace; color: #849088; }
.open-link { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; text-decoration: none; border: 1px solid #e6ebe4; border-radius: 50%; color: #71816f; font-size: 13px; transition: .2s; }
.open-link:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 11px; border-top: 1px solid #eff1ee; }
.captured { font: 9px "DM Mono",monospace; color: #9aa39d; }
.cache-note { font: 9px "DM Mono",monospace; color: #789071; letter-spacing: .04em; }
.skeleton-card { background: #fff; border: 1px solid #e8ece7; border-radius: 13px; padding-bottom: 16px; overflow: hidden; }
.skeleton-image { height: 190px; background: linear-gradient(100deg,#edf0eb 25%,#f6f7f4 43%,#edf0eb 65%); background-size: 300% 100%; animation: shimmer 1.5s infinite; }
.skeleton-line { height: 10px; border-radius: 8px; margin: 17px 16px 0; width: 46%; background: #edf0eb; }
.skeleton-line.short { width: 30%; margin-top: 9px; }
.note { display: flex; align-items: center; gap: 12px; border: 1px solid #dfe7db; background: #edf2e9; border-radius: 10px; padding: 13px 15px; margin: 30px 0 57px; color: #697a67; }
.note-mark { font-size: 17px; color: #849b7d; }
.note p { margin: 0; font-size: 11px; flex: 1; }
.note p strong { color: #435842; }
.note-count { color: #879580; font-size: 9px; }
footer { height: 58px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #9aa49e; font-size: 9px; }
.footer-dot { color: #75a979; font-size: 8px; margin-left: 5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -150% 0; } }
@media (max-width:980px) { .shell { padding: 0 38px; } .intro-art { right: 0; transform: scale(.82); transform-origin: center right; } .site-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .shell { padding: 0 21px; } .topbar { height: 69px; } .topbar-meta { font-size: 8px; gap: 7px; } .date { display: none; }
  .intro { min-height: 286px; align-items: flex-start; padding-top: 52px; } .intro h1 { font-size: 53px; } .lede { max-width: 260px; font-size: 12px; line-height: 1.6; }
  .intro-art { width: 230px; height: 190px; right: -76px; top: 100px; opacity: .45; } .orbit-core { top: 79px; left: 104px; } .point-one { top: 34px; left: 56px; } .point-two { top: 132px; right: 27px; } .point-three { bottom: 24px; left: 56px; }
  .summary { padding: 19px 0 22px; } .summary-value { font-size: 11px; } .summary-value b { font-size: 20px; } .section-heading { padding: 29px 0 16px; } .section-heading h2 { font-size: 20px; }
  .site-grid { grid-template-columns: 1fr; gap: 14px; } .preview { aspect-ratio: 1.5; } .card-content { padding: 14px; } .note { margin: 23px 0 40px; align-items: flex-start; } .note-count { display: none; } footer { font-size: 8px; }
}