:root { color-scheme: dark; --bg:#04060a; --panel:#090b13; --text:#f5f9ff; --muted:#8c9eb8; --line:#1f293d; --accent:#576bff; --cyan:#1fd1e0; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; color:var(--text); background:var(--bg); font-family:Inter,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
[hidden] { display:none !important; }
.site-header { height:64px; flex:none; margin:28px 64px 0; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.logo { font-size:15px; font-weight:600; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { position:relative; color:var(--muted); font-size:13px; font-weight:500; padding:12px 0; transition:color 180ms; }
.site-header nav a:hover,.site-header nav a[aria-current] { color:var(--text); }
.site-header nav a[aria-current]::after { content:""; position:absolute; bottom:4px; width:24px; height:2px; background:var(--accent); left:50%; transform:translateX(-50%); }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); align-items:center; justify-content:center; }
.menu-toggle svg { width:20px; height:20px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; min-height:42px; margin:24px 64px 32px; font-size:11px; color:var(--muted); gap:16px; }
.site-footer a:hover { color:var(--text); }
.content { flex:1; width:calc(100% - 96px); max-width:1180px; margin:38px auto 0; padding-bottom:28px; }
h1 { font-size:42px; line-height:1.22; margin:0; font-weight:700; overflow-wrap:anywhere; }
.intro { font-size:15px; line-height:1.8; color:var(--muted); margin:24px 0 32px; }
.records .intro { margin-bottom:52px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.filters button { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:9px 14px; font-size:12px; min-height:36px; transition:color 180ms,background 180ms; }
.filters button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:white; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; }
.card { min-width:0; min-height:180px; padding:18px 20px; border:1px solid var(--line); border-radius:18px; background:var(--panel); display:flex; flex-direction:column; align-items:flex-start; gap:10px; transition:border-color 180ms,background 180ms; overflow-wrap:anywhere; }
.card:hover { border-color:#435788; background:#0c101a; }
.card .category { font-size:11px; font-weight:600; color:var(--cyan); }
.card h2 { font-size:17px; line-height:1.45; font-weight:600; margin:0; }
.card p { font-size:13px; color:var(--muted); line-height:1.7; margin:0; white-space:pre-line; }
.card .cta { color:var(--cyan); font-size:12px; margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:4px; }
.cta svg { width:13px; height:13px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; font-size:11px; color:var(--muted); }
.record-item { min-width:0; }
.record-item .card { height:100%; }
.record-item:has(.attachment) .card { height:auto; }
.attachment { display:inline-block; font-size:12px; color:var(--cyan); padding:8px 0; }
.tools .card { min-height:160px; }
.download-note { margin-top:28px; border-top:1px solid var(--line); padding-top:16px; font-size:12px; line-height:1.8; color:var(--muted); }
.download-note summary { cursor:pointer; color:var(--text); }
.download-note code { overflow-wrap:anywhere; white-space:normal; }
.status { color:var(--muted); font-size:13px; line-height:1.7; margin:20px 0; }
.status button { color:var(--cyan); background:none; border:0; text-decoration:underline; padding:8px; }
.demos { max-width:1040px; }
.demos .intro { margin-bottom:56px; }
.timeline-year { color:var(--cyan); font-size:13px; margin:0 0 28px; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { position:relative; padding:0 0 48px 58px; max-width:928px; }
.timeline li::before { content:""; position:absolute; top:0; left:12px; width:10px; height:10px; border-radius:50%; background:var(--cyan); }
.timeline li::after { content:""; position:absolute; top:10px; bottom:44px; left:16px; width:1px; background:var(--line); }
.timeline .card { min-height:160px; }
.timeline .cta { color:var(--text); }
dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:18px; width:420px; max-width:calc(100% - 40px); padding:28px; }
dialog::backdrop { background:rgba(0,0,0,.75); }
dialog h2 { margin:0 0 24px; font-size:22px; }
dialog label { display:block; font-size:14px; margin-bottom:10px; }
dialog input { width:100%; padding:12px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
dialog .hint { font-size:12px; color:var(--muted); }
dialog .error { color:#ff9fa4; font-size:13px; min-height:20px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.dialog-actions button { padding:10px 16px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--panel); }
.dialog-actions button[type="submit"] { background:var(--accent); border-color:var(--accent); }
.dialog-actions button:disabled { opacity:.6; cursor:wait; }
body[data-page="home"] { height:100svh; min-height:100svh; }
.home-main { flex:1; display:grid; place-items:center; }
.planet-stage { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.planet-stage canvas { display:block; width:100%; height:100%; }
.planet-fallback { position:absolute; inset:0; background:url('./ribbon-fallback.png') center / cover no-repeat; }
.planet-stage[data-rendered] .planet-fallback { visibility:hidden; }
.hero-title { position:absolute; top:49%; left:50%; transform:translate(-50%,-50%); text-align:center; font-size:46px; line-height:1.3; font-weight:600; width:calc(100% - 48px); animation:title-enter .75s ease-out both; pointer-events:none; }
.hero-title span { white-space:nowrap; }
@keyframes title-enter { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
@media(min-width:1700px) { .site-header,.site-footer { width:calc(100% - 128px); max-width:1600px; margin-left:auto; margin-right:auto; } }
@media(max-width:1000px) { .site-header { margin-left:32px; margin-right:32px; } .site-footer { margin-left:32px; margin-right:32px; } .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-title { font-size:38px; } }
@media(max-width:600px) {
  .site-header { height:56px; margin:18px 20px 0; }
  .logo { font-size:13px; }
  .menu-toggle { display:flex; z-index:12; }
  .site-header nav { display:none; }
  body.menu-open { overflow:hidden; }
  body.menu-open .site-header nav { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:flex-start; padding:148px 34px 40px; flex-direction:column; gap:24px; background:var(--bg); z-index:10; }
  body.menu-open .logo { z-index:12; }
  body.menu-open .site-header nav a { font-size:24px; padding:10px 0; }
  body.menu-open .site-header nav a[aria-current]::after { left:0; transform:none; }
  .content { width:calc(100% - 48px); margin-top:36px; padding-bottom:24px; }
  h1 { font-size:30px; }
  .intro { font-size:13px; margin:14px 0 32px; line-height:1.7; }
  .records .intro { margin-bottom:26px; }
  .filters { gap:8px; margin-bottom:24px; }
  .filters button { padding:8px 12px; }
  .card-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .card,.tools .card { min-height:138px; padding:16px; gap:7px; border-radius:16px; }
  .card h2 { font-size:15px; }
  .card p { font-size:12px; }
  .site-footer { margin:24px 20px 40px; align-items:flex-start; flex-direction:column; justify-content:flex-end; gap:6px; font-size:10px; }
  .demos .intro { margin-bottom:40px; }
  .timeline-year { margin-bottom:14px; }
  .timeline li { padding:0 0 16px; }
  .timeline li::before,.timeline li::after { display:none; }
  .timeline .card { min-height:138px; }
  .planet-fallback { background-image:url('./ribbon-fallback-mobile.png'); }
  .hero-title { top:75%; font-size:24px; line-height:1.5; width:calc(100% - 48px); }
  .hero-title span { display:block; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }