:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f2f4f7;
  color: #17191d;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f2f4f7; }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.shell {
  width: min(760px, 100%); overflow: hidden; border: 1px solid rgba(23,25,29,.1);
  border-radius: 8px; background: rgba(255,255,255,.9);
  box-shadow: 0 24px 70px rgba(25,30,42,.13); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 14px; padding: 24px 28px;
  border-bottom: 1px solid rgba(23,25,29,.08); }
.brand strong,.brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 3px; color: #606671; font-size: 12px; }
.mark { position: relative; width: 34px; height: 34px; }
.mark i { position: absolute; left: 5px; width: 24px; height: 6px;
  transform: rotate(38deg) skewX(-18deg); }
.mark i:nth-child(1) { top: 5px; background: #17191d; }
.mark i:nth-child(2) { top: 14px; background: #e93d33; }
.mark i:nth-child(3) { top: 23px; background: #f4d916; }
.content { padding: 56px 28px 62px; border-left: 5px solid #f4d916; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #555b65;
  font-size: 13px; font-weight: 650; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: #f4d916;
  box-shadow: 0 0 0 5px rgba(244,217,22,.2); }
h1 { max-width: 620px; margin: 22px 0 16px; font-size: clamp(34px,7vw,58px);
  line-height: 1.02; letter-spacing: 0; }
p { max-width: 610px; margin: 0; color: #555b65; font-size: 17px; line-height: 1.65; }
footer { padding: 18px 28px; border-top: 1px solid rgba(23,25,29,.08);
  color: #6d737d; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root,body { background: #101216; color: #f6f7f9; }
  .shell { border-color: rgba(255,255,255,.1); background: rgba(22,25,31,.94);
    box-shadow: 0 24px 70px rgba(0,0,0,.38); }
  .brand,footer { border-color: rgba(255,255,255,.08); }
  .brand small,.status,p,footer { color: #abb0ba; }
  .mark i:nth-child(1) { background: #f6f7f9; }
}
@media (max-width: 540px) {
  main { padding: 14px; } .brand { padding: 20px; }
  .content { padding: 44px 20px 50px; } footer { padding: 16px 20px; line-height: 1.5; }
  p { font-size: 15px; }
}