* { box-sizing: border-box; }
body { margin: 0 auto; padding: 24px; max-width: 1440px; color: #20242a; background: #f7f8fa; font: 16px/1.6 system-ui, sans-serif; }
a { color: #1455a0; overflow-wrap: anywhere; }
h1 { margin-bottom: 8px; }
h2 { margin-top: 40px; }
p { margin: 8px 0; }
header, footer { max-width: 1000px; }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.case { min-width: 0; padding: 16px; border: 1px solid #d8dde5; border-radius: 8px; background: white; }
.case h3 { margin: 0 0 12px; font-size: 19px; }
.case img, .case video { display: block; width: 100%; height: 210px; object-fit: contain; background: #edf0f4; border: 1px solid #e0e4ea; }
.case code { font-size: 13px; overflow-wrap: anywhere; }
.case .note { min-height: 3.2em; color: #535d69; font-size: 14px; }
.status { font-size: 14px; }
.status[data-state="loaded"] { color: #18603b; }
.status[data-state="error"] { color: #a32b2b; }
footer { margin-top: 40px; border-top: 1px solid #d8dde5; padding-top: 16px; }
@media (max-width: 500px) { body { padding: 16px; } h1 { font-size: 26px; } }