:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172b36; background: #f4f7f8; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.skip-link { position: absolute; top: -80px; left: 20px; padding: 12px 18px; background: white; z-index: 2; }
.skip-link:focus { top: 12px; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 40px; background: white; border-bottom: 1px solid #dfe6e9; }
.identity { display: flex; align-items: center; gap: 16px; }
.logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #153e4c; color: white; font-weight: 750; font-size: 21px; flex-shrink: 0; }
.eyebrow { margin: 0 0 5px; color: #526d79; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
h1 { margin: 0; font-size: clamp(17px, 2vw, 23px); font-weight: 650; line-height: 1.3; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 17px; border: 1px solid #ccd8de; border-radius: 8px; text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 600; }
.button:hover { background: #f0f5f7; }
a:focus-visible, iframe:focus-visible { outline: 3px solid #247a9a; outline-offset: 4px; }
main { padding: 0 40px; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.intro p { margin: 0; color: #526773; font-size: 13px; line-height: 1.6; }
.badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; font-weight: 600; color: #7a4a12; background: #fff5df; border: 1px solid #ecd6ae; padding: 7px 11px; border-radius: 20px; }
.badge span { font-size: 8px; }
.platform { overflow: hidden; background: white; border: 1px solid #d3dfe4; border-radius: 12px; box-shadow: 0 5px 22px rgb(18 49 64 / 4%); }
.platform-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; padding: 0 18px; background: #edf3f5; border-bottom: 1px solid #d3dfe4; font-size: 12px; font-weight: 600; }
.platform-origin { font-size: 11px; color: #526773; font-weight: 400; }
iframe { display: block; width: 100%; height: calc(100vh - 285px); height: calc(100dvh - 285px); min-height: 560px; border: 0; background: white; }
.help { margin: 14px 0 0; color: #526773; font-size: 12px; line-height: 1.6; }
footer { padding: 20px 40px; color: #526773; font-size: 11px; }
@media (max-width: 700px) {
  .header { padding: 20px 16px; align-items: flex-start; flex-direction: column; gap: 16px; }
  .button { width: 100%; }
  main { padding: 0 12px; }
  .intro { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 4px; }
  .platform-bar { padding: 0 12px; }
  .platform-origin { font-size: 10px; }
  iframe { min-height: 650px; }
  footer { padding: 18px 16px; }
}