:root { color-scheme: dark; }
      * { box-sizing: border-box; }
      html, body { min-width: 320px; min-height: 100%; background: #080808; }
      body { margin: 0; color: #f5f5f2; font-family: Arial, Helvetica, sans-serif; }
      main { width: min(1120px, calc(100% - 48px)); min-height: 100vh; margin: auto; display: grid; place-items: center; padding: 48px 0; }
      .content { width: 100%; }
      h1 { margin: 0; font-size: clamp(3.25rem, 15vw, 12.7rem); font-weight: 800; letter-spacing: -.095em; line-height: .82; white-space: nowrap; }
      .live-panel { display: flex; align-items: center; gap: 15px; width: fit-content; margin-top: clamp(44px, 7vw, 84px); color: #d8d8d3; font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -.025em; }
      .weather-readout { display: inline-flex; align-items: center; gap: 9px; }
      .weather-icon { width: 1.35em; color: #f5f5f2; font-size: 1.25em; line-height: 1; text-align: center; }
      .live-divider { width: 1px; height: 1.35em; background: #555550; }
      .live-value { color: #f5f5f2; font-variant-numeric: tabular-nums; }
      .lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: clamp(42px, 10vw, 150px); align-items: end; margin-top: clamp(48px, 8vw, 98px); }
      .bio { display: flex; align-items: center; gap: clamp(22px, 4vw, 46px); }
      .pfp { width: clamp(94px, 12vw, 154px); height: auto; aspect-ratio: 1; flex: 0 0 auto; display: block; border-radius: 50%; background: #fff531; }
      .about { max-width: 390px; margin: 0; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.42; letter-spacing: -.026em; color: #d8d8d3; }
      .links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
      .icon-link { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #5b5b56; border-radius: 50%; color: #f5f5f2; background: transparent; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
      .icon-link:hover, .icon-link:focus-visible { background: #f5f5f2; color: #080808; transform: translateY(-4px); outline: none; }
      .icon-link::after { content: attr(data-name); position: absolute; bottom: -27px; left: 50%; transform: translateX(-50%); opacity: 0; color: #a9a9a4; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .18s ease; }
      .icon-link:hover::after, .icon-link:focus-visible::after { opacity: 1; }
      .icon-link img { width: 42%; height: 42%; filter: brightness(0) invert(1); transition: filter .18s ease; }
      .icon-link:hover img, .icon-link:focus-visible img { filter: brightness(0); }
      .discord-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
      @media (max-width: 680px) {
        main { width: min(100% - 34px, 1120px); padding: 40px 0; }
        h1 { font-size: clamp(3.25rem, 17.2vw, 8rem); }
        .lower { grid-template-columns: 1fr; margin-top: 70px; }
        .live-panel { margin-top: 54px; }
        .bio { align-items: flex-start; }
        .links { width: min(100%, 360px); }
      }
      @media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; } }