:root { --ink:#eef6ef; --pine:#2c7a59; --moss:#a7d5b5; --paper:#07140f; --cream:#10251c; --line:#29493a; --muted:#a4b9aa; --shadow:0 16px 42px rgba(0,0,0,.34); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% -10%,#1b4f39 0,transparent 27rem),radial-gradient(circle at 10% 105%,#102d23 0,transparent 36rem),var(--paper); font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; }
button,a { font:inherit; } button { cursor:pointer; }
.site-shell { width:min(1440px,100%); margin:auto; padding:clamp(20px,5vw,68px); }
.hero { position:relative; padding:clamp(18px,3vw,36px) 0 32px; border-bottom:1px solid var(--line); }.eyebrow,.region { margin:0; color:var(--moss); font-size:.72rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }.title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }.eyebrow { font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(2rem,5vw,4.2rem); font-weight:700; line-height:.98; letter-spacing:-.035em; }.hero h1::after { content:""; display:inline-block; width:.22em; height:.22em; margin-left:.13em; border-radius:50%; background:#f2b84b; }.hero p:not(.eyebrow) { max-width:600px; margin:0; color:var(--muted); line-height:1.65; }.refresh-button { flex:none; border:0; border-radius:999px; padding:13px 18px; color:white; background:var(--pine); box-shadow:var(--shadow); transition:transform .2s,background .2s; }.refresh-button:hover { background:#0e3026; transform:translateY(-2px); }.spinning { animation:spin .55s ease; } @keyframes spin { to { transform:rotate(360deg); } }
.status-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:27px; color:var(--muted); font-size:.83rem; }.status-row span+span::before { content:"·"; margin-right:18px; color:#a5aca6; }
.controls { padding:26px 0 25px; }.filters { display:flex; gap:9px; overflow:auto; padding-bottom:4px; }.filters button { flex:none; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--ink); background:transparent; }.filters button:hover,.filters button.active { color:white; border-color:var(--pine); background:var(--pine); }
.camera-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.camera-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--cream); box-shadow:0 4px 16px rgba(24,49,39,.04); transition:transform .22s,box-shadow .22s; }.camera-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.media-frame,.camera-media { position:relative; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,#c6d3cc,#7c9a8c); }.camera-media::before { content:"加载画面中…"; position:absolute; inset:0; display:grid; place-items:center; color:#183f31; font-size:.85rem; }.camera-media iframe,.camera-media img { position:relative; z-index:1; display:block; width:100%; height:100%; border:0; object-fit:cover; background:#dae4dd; }.camera-media:not(.is-loaded) iframe { opacity:.01; }.camera-media:focus-visible { outline:4px solid #efb64a; outline-offset:-4px; }.source-only { display:grid; place-items:center; padding:24px; text-align:center; background:linear-gradient(145deg,#284e40,#142a23); }.source-only::before { display:none; }.source-only div { display:grid; justify-items:center; gap:12px; color:white; }.mountain-mark { font-family:Georgia,serif; font-size:4rem; line-height:.5; color:#d4a94a; }.source-only strong { max-width:220px; font-size:1.05rem; line-height:1.35; }.source-only a,.media-error a { color:#fff; text-underline-offset:3px; }.media-error { position:relative; z-index:2; display:grid; place-content:center; justify-items:center; gap:10px; height:100%; padding:22px; color:white; text-align:center; background:#5d342d; }.media-error strong { font-size:.98rem; }.card-body { padding:17px 17px 15px; }.card-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }.camera-card h2 { margin:5px 0 0; font-family:Georgia,"Noto Serif SC",serif; font-size:1.2rem; line-height:1.15; }.source-type { flex:none; border-radius:999px; padding:5px 8px; color:var(--moss); background:#e4eee6; font-size:.7rem; font-weight:700; }.card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:21px; color:var(--muted); font-size:.75rem; }.source-link { color:var(--pine); white-space:nowrap; font-weight:700; text-underline-offset:3px; }
.source-only { padding:0; }.source-only img { display:block; width:100%; height:100%; object-fit:cover; }.preview-overlay { position:absolute; right:12px; bottom:12px; z-index:2; border-radius:999px; padding:8px 11px; color:#fff; background:rgba(12,36,27,.84); font-size:.78rem; font-weight:700; text-decoration:none; backdrop-filter:blur(5px); }.preview-overlay:hover { background:#0c241b; }
.viewer { width:min(1100px,94vw); max-height:90vh; padding:0; overflow:hidden; border:0; border-radius:16px; background:#101914; box-shadow:0 20px 70px rgba(0,0,0,.45); }.viewer::backdrop { background:rgba(6,16,12,.75); backdrop-filter:blur(4px); }.viewer .camera-media { aspect-ratio:16/9; width:100%; max-height:88vh; }.close-viewer { position:absolute; z-index:3; top:10px; right:10px; width:38px; height:38px; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.58); font-size:1.7rem; line-height:1; }
@media (max-width:900px) { .camera-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:620px) { .site-shell { padding:18px; }.title-row { align-items:stretch; flex-direction:column; }.eyebrow { font-size:2.4rem; }.refresh-button { width:100%; }.status-row { gap:7px 13px; }.status-row span+span::before { margin-right:13px; }.camera-grid { grid-template-columns:1fr; gap:15px; }.card-body { padding:15px; } }
.refresh-button { color:#06130e; background:#83c998; }.refresh-button:hover { background:#b6e2bd; }
.status-row span+span::before { color:#5d806c; }.filters button:hover,.filters button.active { color:#06130e; border-color:#83c998; background:#83c998; }
.camera-card { box-shadow:0 5px 18px rgba(0,0,0,.22); }.camera-media { background:linear-gradient(135deg,#143a2b,#285d45); }.camera-media::before { color:#c7e4d1; }.camera-media iframe,.camera-media img { background:#193d2f; }.camera-card:hover { box-shadow:0 16px 34px rgba(0,0,0,.4); }
.source-type { color:#b9e6c6; background:#1d4835; }.source-link { color:#9addad; }.preview-overlay { background:rgba(4,19,13,.9); }.preview-overlay:hover { background:#020c08; }