:root {
  color-scheme: light;
  --ink: #22223a;
  --muted: #68687e;
  --purple: #7856ff;
  --pink: #f472b6;
  --sky: #a8e4ff;
  --surface: #fff;
  --page: #f8f9fd;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page); }
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.96) 0, rgba(255,255,255,.68) 37%, transparent 70%),
    linear-gradient(145deg, #faf9ff 0%, #f8f9fd 54%, #fff8fc 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ambient { position: fixed; z-index: 0; border-radius: 999px; filter: blur(1px); pointer-events: none; animation: glow 9s ease-in-out infinite alternate; }
.ambient-one { width: 280px; height: 280px; top: 12%; left: -170px; background: radial-gradient(circle, rgba(168,228,255,.24), transparent 72%); }
.ambient-two { width: 360px; height: 360px; right: -210px; bottom: 4%; background: radial-gradient(circle, rgba(244,114,182,.15), transparent 72%); animation-delay: -4s; }
.site-header, .main-content, .site-footer { position: relative; z-index: 1; }
.site-header { width: min(100% - 48px, 1120px); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; width: 172px; border-radius: 8px; }
.brand img { display: block; width: 100%; height: auto; }
.status { display: inline-flex; align-items: center; gap: 9px; color: #66647b; font-size: .67rem; font-weight: 700; letter-spacing: .16em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(244,114,182,.13); }
.main-content { flex: 1; width: min(100% - 48px, 1120px); margin: 0 auto; display: grid; place-items: center; padding: 18px 0 38px; }
.maintenance-card {
  width: 100%; min-height: 490px; display: grid; grid-template-columns: 1fr 1.08fr; align-items: center;
  padding: 46px clamp(26px, 5.5vw, 76px); gap: clamp(20px, 4vw, 52px);
  border: 1px solid rgba(127,104,205,.12); border-radius: 30px;
  background: rgba(255,255,255,.82); box-shadow: 0 30px 90px rgba(60,43,123,.09), 0 4px 18px rgba(61,47,111,.035);
  backdrop-filter: blur(12px); animation: enter .8s cubic-bezier(.2,.7,.2,1) both;
}
.illustration-wrap { width: 100%; display: grid; place-items: center; }
.illustration { display: block; width: min(100%, 440px); height: auto; overflow: visible; animation: float 5.5s ease-in-out infinite; }
.message { max-width: 500px; }
.eyebrow { margin: 0 0 19px; display: flex; align-items: center; gap: 10px; color: #8068cc; font-size: .69rem; font-weight: 750; letter-spacing: .19em; }
.eyebrow-line { width: 25px; height: 1px; background: linear-gradient(90deg, var(--purple), var(--pink)); }
h1 { margin: 0; font-size: clamp(2.15rem, 4.05vw, 3.45rem); font-weight: 750; letter-spacing: .035em; line-height: 1.45; text-wrap: balance; }
.description { margin: 21px 0 29px; color: var(--muted); font-size: clamp(.91rem, 1.18vw, 1.03rem); line-height: 2; letter-spacing: .015em; }
.button { min-height: 58px; min-width: 228px; padding: 0 22px 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 19px; border: 1px solid rgba(120,86,255,.12); border-radius: 15px; color: #fff; background: linear-gradient(112deg, #7856ff, #8665f8 58%, #956af0); box-shadow: 0 9px 22px rgba(120,86,255,.25); font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 13px 28px rgba(120,86,255,.32); }
.button:active { transform: translateY(0); }
.brand:focus-visible, .button:focus-visible { outline: 3px solid #22223a; outline-offset: 4px; }
.site-footer { width: min(100% - 48px, 1120px); min-height: 66px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #68687e; font-size: .69rem; letter-spacing: .12em; }
.mobile-break { display: none; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes glow { from { opacity: .72; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes enter { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 820px) {
  .site-header { height: 78px; }
  .main-content { padding: 14px 0 24px; }
  .maintenance-card { min-height: 0; grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: 30px clamp(20px, 6vw, 46px) 35px; border-radius: 25px; text-align: center; }
  .illustration-wrap { max-width: 430px; }
  .illustration { width: min(100%, 380px); }
  .message { max-width: 560px; }
  .eyebrow { justify-content: center; margin-bottom: 13px; }
  h1 { font-size: clamp(2rem, 5.8vw, 3.1rem); line-height: 1.42; }
  .description { margin: 15px 0 23px; }
  .desktop-break { display: none; }
  .site-footer { min-height: 56px; }
}
@media (max-width: 420px) {
  .site-header, .main-content, .site-footer { width: calc(100% - 36px); }
  .site-header { height: 70px; }
  .brand { width: 145px; }
  .status { gap: 7px; font-size: .59rem; letter-spacing: .12em; }
  .main-content { padding: 8px 0 20px; }
  .maintenance-card { padding: 22px 17px 26px; gap: 0; border-radius: 22px; }
  .illustration { width: min(100%, 310px); }
  .eyebrow { margin-bottom: 10px; font-size: .61rem; }
  h1 { font-size: clamp(1.78rem, 8vw, 2.12rem); line-height: 1.47; letter-spacing: .01em; }
  .mobile-break { display: initial; }
  .description { margin: 13px 0 20px; font-size: .88rem; line-height: 1.9; }
  .button { width: 100%; min-height: 56px; }
  .site-footer { min-height: 46px; }
}
@media (max-width: 340px) {
  .site-header, .main-content, .site-footer { width: calc(100% - 28px); }
  .brand { width: 132px; }
  .maintenance-card { padding-inline: 14px; }
  h1 { font-size: 1.55rem; }
  .description { font-size: .83rem; }
}
@media (max-height: 740px) and (min-width: 821px) {
  .site-header { height: 70px; }
  .maintenance-card { min-height: 420px; padding-block: 28px; }
  .illustration { max-width: 375px; }
  .site-footer { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}