* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17203b;
  background: #f5f7ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, .10), transparent 42%),
    radial-gradient(ellipse at 100% 75%, rgba(6, 182, 212, .08), transparent 34%),
    #f5f7ff;
}
.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 40px 20px 22px;
}
.maintenance-card {
  width: min(100%, 640px);
  overflow: hidden;
  border: 1px solid rgba(79, 70, 229, .13);
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 28px 90px rgba(41, 48, 93, .12), 0 3px 10px rgba(41, 48, 93, .04);
  padding: 26px clamp(22px, 6vw, 52px) 24px;
}
.topline, .brand { display: flex; align-items: center; }
.topline { justify-content: space-between; gap: 18px; }
.brand { gap: 11px; }
.brand-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #4f46e5, #7c3aed 68%, #06b6d4);
  box-shadow: 0 8px 16px rgba(79, 70, 229, .22), inset 0 1px 1px rgba(255,255,255,.4);
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.08em;
}
.brand-name { color: #1d2450; font-weight: 780; letter-spacing: -.04em; }
.brand-name span { color: #625f84; font-weight: 560; }
.environment-tag {
  padding: 7px 10px;
  border: 1px solid #dcd9ff;
  border-radius: 999px;
  color: #5143c8;
  background: #f4f2ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}
.illustration {
  position: relative;
  display: grid;
  height: 188px;
  place-items: center;
  margin: 23px auto 4px;
  isolation: isolate;
}
.illustration::before {
  position: absolute;
  z-index: -2;
  width: 188px;
  height: 148px;
  border-radius: 46% 54% 56% 44% / 45% 43% 57% 55%;
  background: linear-gradient(145deg, #f1f0ff, #effbff 75%);
  content: "";
}
.orbit { position: absolute; border: 1px solid rgba(79,70,229,.17); border-radius: 50%; }
.orbit-one { width: 229px; height: 112px; transform: rotate(-26deg); }
.orbit-two { width: 231px; height: 112px; transform: rotate(26deg); border-color: rgba(6,182,212,.19); }
.machine-card {
  position: relative;
  display: flex;
  width: 105px;
  height: 111px;
  align-items: center;
  flex-direction: column;
  padding-top: 18px;
  border: 1px solid rgba(79,70,229,.15);
  border-radius: 18px;
  background: linear-gradient(155deg, #fff, #f9f8ff);
  box-shadow: 0 13px 26px rgba(64,63,130,.13), inset 0 1px 1px #fff;
  transform: rotate(-4deg);
}
.machine-lamp { position: absolute; top: 10px; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: #06b6d4; box-shadow: 0 0 0 4px rgba(6,182,212,.10); }
.machine-line { width: 58px; height: 5px; margin: 7px 0 0; border-radius: 99px; background: #e5e4f7; }
.machine-line.short { width: 38px; margin-top: 5px; }
.machine-screen { display: grid; width: 69px; height: 28px; place-items: center; margin-top: 12px; border-radius: 7px; color: #4f46e5; background: #efedff; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.spark { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #7c3aed; opacity: .75; transform: rotate(45deg); }
.spark-one { top: 38px; left: calc(50% - 105px); }
.spark-two { right: calc(50% - 104px); bottom: 43px; width: 5px; height: 5px; background: #06b6d4; }
.spark-three { right: calc(50% - 75px); top: 31px; width: 4px; height: 4px; background: #4f46e5; }
.eyebrow { margin: 3px 0 10px; color: #6256d8; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-align: center; text-transform: uppercase; }
h1 { max-width: 500px; margin: 0 auto; color: #182044; font-size: clamp(30px, 6vw, 42px); font-weight: 760; letter-spacing: -.055em; line-height: 1.12; text-align: center; }
.intro { max-width: 450px; margin: 15px auto 0; color: #6a708a; font-size: 15px; line-height: 1.7; text-align: center; }
.status-panel { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin: 23px auto 0; padding: 11px 14px; border: 1px solid #e7e6fa; border-radius: 14px; color: #41486c; background: #fafaff; font-size: 13px; font-weight: 650; text-align: center; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #8b83ef; box-shadow: 0 0 0 4px rgba(79,70,229,.09); }
.status-panel[data-state="ok"] .status-dot { background: #0eaa8a; box-shadow: 0 0 0 4px rgba(14,170,138,.10); }
.status-panel[data-state="error"] .status-dot { background: #dc6b6b; box-shadow: 0 0 0 4px rgba(220,107,107,.10); }
.safety-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 15px 15px 14px; border: 1px solid #e8e8f5; border-radius: 14px; background: #fff; }
.shield { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #4f46e5; background: #efedff; font-size: 13px; font-weight: 900; }
.safety-note p { margin: 0; color: #70758d; font-size: 12px; line-height: 1.65; }
.safety-note strong { color: #343b61; }
.card-footer { display: flex; justify-content: center; gap: 9px; margin-top: 21px; color: #999db0; font-size: 11px; }
.footer-separator { color: #c0bfd6; }
.outside-note { margin: 17px 0 0; color: #9298ad; font-size: 11px; letter-spacing: .04em; text-align: center; }
@media (max-width: 480px) {
  .page-shell { padding: 20px 13px 14px; }
  .maintenance-card { border-radius: 22px; padding: 19px 19px 20px; }
  .illustration { height: 164px; margin-top: 17px; }
  .card-footer { flex-wrap: wrap; row-gap: 5px; font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .machine-card { animation: float 5s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-4px); } }
}