/* ─── docomo.jp Reborn · prototype styles ────────────────── */

/* The prototype lives inside .rd-frame — a "browser-window" that
   sits on the case-study page. Its inner content is a faithful
   redesign of the homepage. Tokens are inherited from index.html. */

.rd-frame{
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, #EEF4FC 0%, var(--bg) 42%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.rd-frame[data-mode="dark"]{
  --bg:            #0F1114;
  --bg-card:       #1A1D24;
  --bg-sub:        #15181E;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);
  --text:          #F4F4F6;
  --text-2:        #B7BAC1;
  --text-3:        #82858E;
  --red:           #FF1A2D;
  --red-soft:      rgba(255,26,45,.15);
  --sky:           rgba(61,90,254,.12);
  --indigo-soft:   rgba(61,90,254,.16);
  color: var(--text);
}
.rd-chrome{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.rd-chrome .dot{ width: 11px; height: 11px; border-radius: 50%; }
.rd-chrome .dot.r{ background: #FF5F57; }
.rd-chrome .dot.y{ background: #FEBC2E; }
.rd-chrome .dot.g{ background: #28C840; }
.rd-chrome .url{
  margin-left: 14px; flex: 1; font-family: var(--mono); font-size: 11px;
  color: var(--text-3); padding: 4px 12px; background: var(--bg-sub);
  border-radius: 6px; border: 1px solid var(--line);
  display:flex; align-items:center; gap: 6px;
}
.rd-chrome .url::before{
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}
.rd-chrome .badge{
  font-family: var(--en); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}

/* ─── Glass header (Section 01) ──────────────────────────── */
.rd-header{
  position: sticky; top: 41px; z-index: 3;
  max-width: 1180px;
  margin: 34px auto 0;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
}
.rd-header-inner{
  max-width: 1180px; margin: 0 auto;
  padding: 24px 46px 18px; display:flex; align-items: center; gap: 30px;
}
.rd-logo{
  display:flex; align-items: baseline; gap: 6px; flex-shrink: 0;
}
.rd-logo b{
  font-family: var(--jp); font-weight: 800;
  font-size: 20px; letter-spacing: -0.04em;
  color: var(--text);
}
.rd-logo .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  display: inline-block; transform: translateY(-2px);
}
.rd-nav{ display:flex; gap: 30px; flex: 1; justify-content: center; }
.rd-nav a{
  font-family: var(--jp); font-weight: 500;
  font-size: 12px; color: var(--text);
  position: relative; padding: 6px 0;
  transition: color .15s;
}
.rd-nav a:hover{ color: var(--text); }
.rd-nav a:hover::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--text);
}
.rd-actions{ display:flex; align-items:center; gap: 10px; }
.rd-btn{
  appearance:none; border: none; cursor: pointer;
  font-family: var(--jp); font-weight: 700; font-size: 12px;
  padding: 10px 18px; border-radius: 999px;
  transition: transform .12s, background .15s, box-shadow .15s, color .15s;
  letter-spacing: -0.02em;
}
.rd-btn--ghost{
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.rd-btn--ghost:hover{ color: var(--text); border-color: var(--text); }
.rd-btn--solid{
  background: var(--text); color: var(--bg);
  border: 1px solid var(--text);
}
.rd-btn--solid:hover{ transform: translateY(-1px); }
.rd-btn--red{
  background: var(--red); color: #fff; border: 1px solid var(--red);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--red) 28%, transparent);
}
.rd-btn--red:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--red) 36%, transparent); }
.rd-btn--lg{ padding: 14px 26px; font-size: 15px; }

/* Lang/EN toggle */
.rd-lang{
  font-family: var(--en); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-3);
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer; background: transparent;
}
.rd-lang:hover{ color: var(--text); border-color: var(--line-strong); }

/* ─── Header inline stats (Bioldea-style) ────────────── */
.rd-header-stats{ display:flex; gap: 22px; margin-left: 4px; padding-right: 8px; border-right: 1px solid var(--line); margin-right: 8px; }
.rd-hstat{ display:flex; flex-direction:column; line-height: 1.1; }
.rd-hstat b{ font-family: var(--en); font-weight: 700; font-size: 15px; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.rd-hstat b span{ font-weight: 600; color: var(--text-2); margin-left: 1px; }
.rd-hstat .lbl{ font-size: 10px; color: var(--text-3); margin-top: 2px; letter-spacing: -0.02em; }
@media (max-width: 1100px){ .rd-header-stats{ display:none; } }

/* ─── Hero — Bioldea composition (Section 02) ─────────── */
.rd-hero{
  padding: 0 46px 38px;
  max-width: 1180px; margin: 0 auto 48px;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 34px 34px;
  box-shadow: 0 30px 80px rgba(83, 103, 133, .18);
}
.rd-hero-bio-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .88fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px){ .rd-hero-bio-grid{ grid-template-columns: 1fr; } }

.rd-hero-left{ display:flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Info-card cluster */
.rd-hero-cluster{ display:grid; grid-template-columns: minmax(190px, .72fr) minmax(190px, .9fr); gap: 14px; max-width: 530px; }
@media (max-width: 640px){ .rd-hero-cluster{ grid-template-columns: 1fr; } }

.rd-hero-kpis{ display:flex; flex-direction: column; gap: 12px; }
.rd-hero-kpi{
  display:flex; align-items: center; gap: 14px;
  min-height: 74px;
  padding: 12px 18px;
  background: #F1F2F5;
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
}
.rd-hero-kpi--dark{ background: var(--charcoal); color: #fff; border-color: transparent; }
.rd-hero-kpi-icon{
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  display:flex; align-items:center; justify-content:center; flex-shrink: 0;
}
.rd-hero-kpi--dark .rd-hero-kpi-icon{ background: rgba(255,255,255,.14); }
.rd-hero-kpi-icon--ring{ background: var(--bg-sub); color: var(--text); border: 1px solid var(--line); }
.rd-hero-kpi-num{
  font-family: var(--en); font-weight: 800; font-size: 29px;
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rd-hero-kpi-num span{ font-size: 13px; font-weight: 600; opacity: .65; margin-left: 2px; }
.rd-hero-kpi-lbl{ font-size: 11px; color: var(--text-3); margin-top: 4px; letter-spacing: -0.02em; }
.rd-hero-kpi--dark .rd-hero-kpi-lbl{ color: rgba(255,255,255,.55); }
.rd-hero-kpi-arr{
  margin-left: auto; appearance: none; border: 1px solid var(--line);
  background: var(--bg-sub); color: var(--text);
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; cursor: pointer;
}
.rd-hero-kpi-arr:hover{ background: var(--text); color: var(--bg); border-color: var(--text); }

.rd-hero-video{
  position: relative;
  background: #F5F6F8;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px;
  display:flex; flex-direction: column; gap: 10px;
}
.rd-hero-video-pill{
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 5px 10px 5px 8px; border-radius: 999px;
  display:flex; align-items:center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.dot-pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent);
  animation: dotPulse 1.6s ease-out infinite;
}
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--red) 0%, transparent); } }

.rd-hero-video-thumb{
  position: relative;
  aspect-ratio: 1.18/1;
  border-radius: 16px;
  margin: 0;
  overflow: hidden;
  background: #D8ECFF;
  border: 1px solid rgba(15,17,20,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.rd-hero-video-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.08);
}
.rd-hero-video-thumb::after{
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(0deg, rgba(15,17,20,.08), transparent 45%);
  pointer-events: none;
}
.rd-hero-video-playmark{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 10px 26px rgba(29, 91, 177, .18);
  z-index: 2;
}
.rd-hero-video-cap{ display:flex; align-items: center; gap: 12px; padding: 4px 6px 6px; }
.rd-hero-play{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--red); color: #fff;
  border: 0; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.rd-hero-video-cap .ttl{ font-size: 13px; font-weight: 700; letter-spacing:-0.03em; }
.rd-hero-video-cap .sub{ font-size: 10px; color: var(--text-3); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Headline */
.rd-hero-bio-h1{
  font-family: var(--jp); font-weight: 900;
  font-size: clamp(46px, 5vw, 72px);
  line-height: .98; letter-spacing: -0.058em;
  margin: 0;
  color: var(--text);
  font-feature-settings: "palt";
  max-width: 9.2em;
}
.rd-hero-bio-h1-row{
  display:flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: 4px;
}
.rd-hero-bio-cta{
  appearance:none; border: 0; cursor: pointer;
  background: var(--charcoal); color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font-family: var(--jp); font-weight: 700; font-size: 12px;
  letter-spacing: -0.02em;
  display:inline-flex; align-items: center; gap: 10px;
  transition: transform .15s, background .15s;
  margin-left: 8px;
  vertical-align: middle;
}
.rd-hero-bio-cta:hover{ transform: translateY(-1px); background: #1a1d22; }
.rd-hero-bio-cta-arr{
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.12); display:inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* Lede */
.rd-hero-bio-lede{
  font-family: var(--jp); font-size: 13px; line-height: 1.85;
  color: var(--text-2);
  max-width: 58ch;
  margin: 0;
}

/* Bottom pills */
.rd-hero-bio-pills{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.rd-hero-bio-pill{
  display:inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #F1F2F5;
  border: 1px solid var(--line);
  font-family: var(--jp); font-weight: 700; font-size: 12px;
  color: var(--text); letter-spacing: -0.02em;
  transition: border-color .15s, transform .15s;
  cursor: pointer;
}
.rd-hero-bio-pill:hover{ border-color: var(--text); transform: translateY(-1px); }
.rd-hero-bio-pill .ic{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-sub); border: 1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--en); font-size: 10px; font-weight: 700; color: var(--text-2);
}
.rd-hero-bio-pill--alt{ background: #F1F2F5; color: var(--text); border-color: var(--line); }
.rd-hero-bio-pill--alt .ic{ background: var(--bg-card); border-color: var(--line); color: var(--text-2); }

/* Right — image card */
.rd-hero-right{ position: relative; }
.rd-hero-image{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1/1.08;
  background: #DDE2EA;
  border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(79, 105, 139, .16);
}
.rd-hero-image-ph{
  position: absolute; inset: 0;
  border-radius: 0; border: 0;
  aspect-ratio: auto;
}
.rd-hero-image-ph img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.04);
}
.rd-hero-image::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(0deg, rgba(8, 18, 31, .16) 0%, rgba(8, 18, 31, 0) 50%);
  pointer-events: none;
  z-index: 1;
}
.rd-hero-image-dots{
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display:flex; flex-direction: column; gap: 8px; z-index: 2;
}
.rd-hero-image-dots .d{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.7);
}
.rd-hero-image-dots .d.on{ background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }

.rd-hero-image-glass{
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  display:flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 22px 24px 28px;
  border-radius: 24px;
  background: rgba(20, 22, 28, 0.38);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  z-index: 2;
  box-shadow: 0 20px 44px rgba(11, 25, 45, .18);
}
.rd-hero-image-glass .ttl{
  font-family: var(--jp); font-weight: 700;
  font-size: 25px; letter-spacing: -0.05em; line-height: 1.05;
}
.rd-hero-image-glass .sub{
  font-family: var(--jp); font-size: 11px;
  color: rgba(255,255,255,.7); margin-top: 6px; letter-spacing: -0.02em;
}
.rd-hero-image-glass-cta{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--charcoal); color: #fff;
  border: 0; cursor: pointer;
  display:flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .2s;
}
.rd-hero-image-glass-cta:hover{ transform: rotate(-12deg) scale(1.04); }

@media (max-width: 1024px){
  .rd-hero-image{ aspect-ratio: 16/10; }
  .rd-header,
  .rd-hero{
    max-width: calc(100% - 40px);
  }
  .rd-hero-bio-pills{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .rd-header{
    margin-top: 20px;
    border-radius: 24px 24px 0 0;
  }
  .rd-header-inner{
    padding: 18px 22px 14px;
    gap: 16px;
  }
  .rd-nav{ display:none; }
  .rd-actions{ margin-left: auto; }
  .rd-btn--ghost{ display:none; }
  .rd-hero{
    padding: 0 22px 28px;
    border-radius: 0 0 24px 24px;
  }
  .rd-hero-bio-pills{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rd-hero-bio-h1{
    font-size: clamp(40px, 14vw, 58px);
  }
}
.rd-scroll-cue{
  position: absolute; left: 46px; bottom: -72px;
  font-family: var(--en); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
  display:flex; align-items: center; gap: 10px;
}
.rd-scroll-cue::before{
  content:""; width: 1px; height: 32px; background: var(--text-3);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%,100%{ transform: scaleY(.4); transform-origin: top; opacity: .3; }
  50%{ transform: scaleY(1); opacity: 1; }
}

/* ─── Quick Action (Section 03) ──────────────────────────── */
.rd-section{
  max-width: 1280px; margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) 36px;
}
.rd-section-head{
  display:flex; align-items: end; justify-content: space-between; gap: 32px;
  margin-bottom: 56px;
}
.rd-section-head h2{
  font-family: var(--jp); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04; letter-spacing: -0.045em;
  color: var(--text); margin: 0;
}
.rd-section-head .en-tag{
  font-family: var(--en); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
  display:inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.rd-section-head .en-tag::before{
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
}
.rd-section-sub{
  max-width: 36ch; font-size: 15px; color: var(--text-2);
  line-height: 1.75; flex-shrink: 0; text-align: right;
}

.rd-quick{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 900px){ .rd-quick{ grid-template-columns: repeat(2, 1fr); } }
.rd-quick-card{
  position: relative; padding: 28px 24px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1),
              box-shadow .25s, opacity .25s, border-color .25s;
  min-height: 220px;
  display:flex; flex-direction: column; justify-content: space-between;
}
.rd-quick:hover .rd-quick-card{ opacity: 0.5; }
.rd-quick-card:hover{
  opacity: 1 !important;
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--red) 30%, var(--line-strong));
}
.rd-quick-card::after{
  content:""; position: absolute; inset: -1px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px transparent, 0 0 30px transparent;
  pointer-events: none;
  transition: box-shadow .3s;
}
.rd-quick-card:hover::after{
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent),
              0 0 30px color-mix(in srgb, var(--red) 18%, transparent);
}
.rd-quick-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-sub);
  display:flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: background .25s, color .25s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rd-quick-card:hover .rd-quick-icon{
  background: var(--red); color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.rd-quick-num{
  font-family: var(--en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rd-quick-body h3{
  font-family: var(--jp); font-weight: 700;
  font-size: 22px; letter-spacing: -0.04em; line-height: 1.25;
  margin: 22px 0 6px; color: var(--text);
}
.rd-quick-body p{
  font-family: var(--en); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.02em; margin: 0;
}
.rd-quick-arrow{
  margin-top: 24px; display:flex; align-items: center;
  justify-content: space-between;
  font-family: var(--en); font-size: 12px; font-weight: 500;
  color: var(--text-2);
}
.rd-quick-arrow svg{ transition: transform .25s; }
.rd-quick-card:hover .rd-quick-arrow svg{ transform: translateX(4px); color: var(--red); }
.rd-quick-card:hover .rd-quick-arrow{ color: var(--red); }

/* ─── 6つのチカラ Bento (Section 04) ──────────────────────── */
.rd-bento{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}
@media (max-width: 900px){ .rd-bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }

.rd-bento-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  position: relative; overflow: hidden;
  display:flex; flex-direction: column; justify-content: space-between;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.rd-bento-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.rd-bento-card .label{
  font-family: var(--en); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}
.rd-bento-card h3{
  font-family: var(--jp); font-weight: 700;
  font-size: 22px; letter-spacing: -0.04em;
  margin: 8px 0 0; color: var(--text);
}
.rd-bento-card .desc{
  font-family: var(--jp); font-size: 13px; line-height: 1.7;
  color: var(--text-2); margin-top: 8px;
}

/* The big one — Mac window (Signature 2) */
.rd-bento-card.main{ grid-column: span 4; grid-row: span 2; padding: 0; }

.rd-mac{
  width: 100%; height: 100%;
  display:flex; flex-direction: column;
  background: var(--bg-sub);
  border-radius: 15px;
  overflow: hidden;
}
.rd-mac-bar{
  display:flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  border-bottom: 1px solid var(--line);
}
.rd-mac-bar .tl{ width: 12px; height: 12px; border-radius: 50%; }
.rd-mac-bar .tl.r{ background: #FF5F57; }
.rd-mac-bar .tl.y{ background: #FEBC2E; }
.rd-mac-bar .tl.g{ background: #28C840; }
.rd-mac-bar .ttl{
  flex: 1; text-align: center;
  font-family: var(--jp); font-size: 12px; font-weight: 600;
  color: var(--text-2); letter-spacing: -0.02em;
}
.rd-mac-bar .ttl span{ font-family: var(--en); color: var(--text-3); margin-left: 8px; font-size: 11px; }
.rd-mac-body{
  flex: 1; padding: 24px;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 20px;
  overflow: hidden;
}
.rd-mac-kpis{ display:flex; flex-direction: column; gap: 12px; }
.rd-kpi{
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.rd-kpi .k{ font-family: var(--en); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.rd-kpi .v{
  font-family: var(--en); font-weight: 700; font-size: 28px;
  letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
  display:flex; align-items: baseline; gap: 4px;
}
.rd-kpi .v small{ font-size: 12px; color: var(--text-3); font-weight: 500; }
.rd-kpi .delta{
  font-family: var(--en); font-size: 11px; font-weight: 600;
  color: var(--green);
  margin-left: 6px;
}
.rd-map{
  position: relative; border-radius: 12px;
  background:
    radial-gradient(circle at 68% 30%, rgba(61,90,254,.14), transparent 38%),
    linear-gradient(145deg, #F8FBFF 0%, #EEF5FC 100%);
  border: 1px solid rgba(61,90,254,.16);
  overflow: hidden;
  color: #42607D;
}
.rd-map svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-map-rings ellipse{
  fill: rgba(61,90,254,.10);
  stroke: rgba(61,90,254,.22);
  stroke-width: 1.2;
}
.rd-map-rings ellipse:nth-child(2){ fill: rgba(16,185,129,.08); stroke: rgba(16,185,129,.18); }
.rd-map-rings ellipse:nth-child(3){ fill: rgba(229,0,18,.055); stroke: rgba(229,0,18,.16); }
.rd-map-lines path{
  fill: none;
  stroke: rgba(61,90,254,.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
}
.rd-japan .island{
  stroke: rgba(46, 74, 104, .36);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.rd-japan .main{
  fill: rgba(58, 88, 119, .46);
}
.rd-japan .sub{
  fill: rgba(58, 88, 119, .36);
}
.rd-map-nodes .node{
  fill: var(--red);
  stroke: rgba(255,255,255,.92);
  stroke-width: 3;
}
.rd-map-nodes .hub{
  fill: #3D5AFE;
  stroke-width: 4;
}
.rd-map-labels text{
  font-family: var(--en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  fill: rgba(15,17,20,.58);
  paint-order: stroke;
  stroke: rgba(255,255,255,.82);
  stroke-width: 4;
  stroke-linejoin: round;
}
.rd-map .ping{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent);
  animation: ping 2s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent); }
  100%{ box-shadow: 0 0 0 18px color-mix(in srgb, var(--red) 0%, transparent); }
}
.rd-map .legend{
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
  display:flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.76);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(61,90,254,.16);
  padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(48, 73, 102, .08);
}
.rd-map .legend-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.14);
}

.rd-bento-card.finance{ grid-column: span 2; background: var(--sky); border-color: transparent; }
.rd-bento-card.power{ grid-column: span 2; }
.rd-bento-card.power .label{ color: var(--amber); }
.rd-bento-card.fiber{ grid-column: span 2; background: var(--bg-card); }
.rd-bento-card.entertainment{ grid-column: span 2; background: var(--charcoal); color: #F4F4F6; border-color: transparent; }
.rd-bento-card.entertainment h3, .rd-bento-card.entertainment .desc{ color: #F4F4F6; }
.rd-bento-card.entertainment .label{ color: rgba(244,244,246,.6); }
.rd-bento-card.entertainment:hover{ background: #1a1d22; }
[data-theme="dark"] .rd-bento-card.finance{ background: var(--indigo-soft); }
.rd-bento-card.health{ grid-column: span 2; }
.rd-bento-card.health .label{ color: var(--green); }

.rd-bento-icon{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-sub); border: 1px solid var(--line);
  display:flex; align-items: center; justify-content: center;
  color: var(--text);
  margin-bottom: auto;
}
.rd-bento-card.finance .rd-bento-icon{ background: rgba(61,90,254,.16); border-color: transparent; color: var(--indigo); }
.rd-bento-card.entertainment .rd-bento-icon{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
.rd-bento-card.power .rd-bento-icon{ background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: transparent; color: var(--amber); }
.rd-bento-card.health .rd-bento-icon{ background: color-mix(in srgb, var(--green) 16%, transparent); border-color: transparent; color: var(--green); }

/* ─── Red Restraint Visualizer (Signature 1) ─────────────── */
.rd-restraint{
  max-width: 1280px; margin: 0 auto;
  padding: clamp(60px, 8vw, 96px) 36px;
}
.rd-restraint-grid{
  display:grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 64px;
  align-items: start;
}
@media (max-width: 900px){ .rd-restraint-grid{ grid-template-columns: 1fr; gap: 32px; } }
.rd-restraint h3{
  font-family: var(--jp); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.045em;
  margin: 0 0 16px; line-height: 1.15;
}
.rd-restraint p{
  font-family: var(--jp); font-size: 14px; line-height: 1.85;
  color: var(--text-2); margin: 0;
}
.rd-bar{
  display:flex; flex-direction: column; gap: 18px;
}
.rd-bar-row{ display:flex; align-items: center; gap: 16px; }
.rd-bar-label{
  width: 90px; flex-shrink: 0;
  font-family: var(--en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}
.rd-bar-track{
  flex: 1; height: 36px; border-radius: 6px; overflow: hidden;
  background: var(--bg-sub); border: 1px solid var(--line);
  display:flex;
  position: relative;
}
.rd-bar-fill-red{
  background: var(--red);
  transition: width 1.4s cubic-bezier(.65,.05,.36,1);
}
.rd-bar-fill-mono{
  background: linear-gradient(90deg, var(--charcoal) 0%, var(--smoke-700) 100%);
  transition: width 1.4s cubic-bezier(.65,.05,.36,1);
}
[data-theme="dark"] .rd-bar-fill-mono{
  background: linear-gradient(90deg, #2a2d34 0%, #4a4d54 100%);
}
.rd-bar-pct{
  font-family: var(--en); font-size: 12px; font-weight: 700;
  color: var(--text); width: 64px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Pricing pinned (Section 05) ────────────────────────── */
.rd-pricing-pin{
  background: var(--bg-sub);
  padding: 80px 0;
}
.rd-pricing-pin .rd-section{ padding: 0 36px; }
.rd-plan-tabs{ display:flex; gap: 8px; margin-bottom: 32px; }
.rd-plan-tab{
  appearance:none; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--text-2);
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--jp); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.rd-plan-tab[aria-selected="true"]{
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}
.rd-plans{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 900px){ .rd-plans{ grid-template-columns: 1fr; } }
.rd-plan{
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rd-plan:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rd-plan.featured{
  border-color: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent);
}
.rd-plan .rec{
  position: absolute; top: 16px; right: 16px;
  font-family: var(--en); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--red); color: #fff;
  padding: 4px 10px; border-radius: 999px;
}
.rd-plan .name{
  font-family: var(--jp); font-weight: 700;
  font-size: 28px; letter-spacing: -0.04em;
  margin: 0 0 4px;
}
.rd-plan .tag{
  font-family: var(--en); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.rd-plan .price{
  display:flex; align-items: baseline; gap: 4px;
  margin: 28px 0 6px;
  font-family: var(--en); font-variant-numeric: tabular-nums;
}
.rd-plan .price .yen{ font-size: 16px; color: var(--text-2); font-weight: 600; }
.rd-plan .price .num{ font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.rd-plan .price .per{ font-size: 13px; color: var(--text-3); margin-left: 2px; }
.rd-plan .data{ font-family: var(--jp); font-size: 14px; color: var(--text-2); margin-bottom: 22px; }
.rd-plan ul{
  list-style: none; padding: 0; margin: 0;
  display:flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.rd-plan li{
  display:flex; gap: 8px; align-items: flex-start;
  font-family: var(--jp); font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.rd-plan li::before{
  content:""; width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.2 2.2L9.5 3.5' stroke='%2310B981' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center; background-repeat: no-repeat;
  flex-shrink: 0; margin-top: 4px;
}

/* ─── News (Section 06) ──────────────────────────────────── */
.rd-news-rail{
  display:flex; gap: 16px; overflow-x: auto;
  padding: 0 36px 24px; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rd-news-rail::-webkit-scrollbar{ height: 8px; }
.rd-news-rail::-webkit-scrollbar-thumb{ background: var(--smoke-300); border-radius: 999px; }
.rd-news-card{
  flex: 0 0 320px; scroll-snap-align: start;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.rd-news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.rd-news-card .placeholder{ aspect-ratio: 16/10; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.rd-news-card .body{ padding: 18px 20px 20px; }
.rd-news-card .cat{
  font-family: var(--en); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.rd-news-card .ttl{
  font-family: var(--jp); font-weight: 700; font-size: 16px;
  letter-spacing: -0.03em; line-height: 1.5;
  color: var(--text); margin: 0 0 12px;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-news-card .date{ font-family: var(--en); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.rd-news-banner{
  display:flex; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  padding: 16px 20px; border-radius: 12px;
  margin: 0 36px 32px;
}
.rd-news-banner .badge{
  font-family: var(--en); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber);
  padding: 4px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--amber) 18%, transparent);
}
.rd-news-banner .msg{ font-family: var(--jp); font-size: 14px; color: var(--text); flex: 1; }
.rd-news-banner .lk{ font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--amber); }

/* ─── Footer (Section 07) ────────────────────────────────── */
.rd-footer{
  background: var(--charcoal); color: #C9CCD1;
  padding: 80px 36px 40px;
}
[data-theme="dark"] .rd-footer{ background: #08090B; }
.rd-frame[data-mode="dark"] .rd-footer{ background: #08090B; }
.rd-footer-inner{ max-width: 1280px; margin: 0 auto; }
.rd-footer-top{
  display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px){ .rd-footer-top{ grid-template-columns: 1fr 1fr; } }
.rd-footer-brand .b{
  font-family: var(--jp); font-weight: 800; font-size: 24px;
  letter-spacing: -0.04em; color: #fff;
  display:flex; align-items: baseline; gap: 6px;
}
.rd-footer-brand .b .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--red); transform: translateY(-2px); }
.rd-footer-brand p{
  font-family: var(--jp); font-size: 13px; line-height: 1.8;
  color: rgba(255,255,255,.55); max-width: 30ch; margin: 16px 0 0;
}
.rd-footer-col h4{
  font-family: var(--en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin: 0 0 18px;
}
.rd-footer-col ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 10px; }
.rd-footer-col a{
  font-family: var(--jp); font-size: 13px; color: rgba(255,255,255,.78);
  letter-spacing: -0.02em;
}
.rd-footer-col a:hover{ color: #fff; }
.rd-footer-bot{
  padding-top: 24px;
  display:flex; justify-content: space-between; align-items: center;
  font-family: var(--en); font-size: 11px;
  color: rgba(255,255,255,.5); letter-spacing: 0.04em;
}
.rd-footer-bot .socials{ display:flex; gap: 14px; }
.rd-footer-bot .socials a{ color: rgba(255,255,255,.55); }
.rd-footer-bot .socials a:hover{ color: #fff; }

/* ─── Floating chat ──────────────────────────────────────── */
.rd-floating{
  position: absolute; right: 24px; bottom: 24px; z-index: 5;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 12px 18px 12px 14px;
  display:flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-family: var(--jp); font-size: 13px; font-weight: 600;
  color: var(--text);
  animation: floatPulse 3s ease-in-out infinite;
}
@keyframes floatPulse{
  0%,100%{ box-shadow: var(--shadow-md), 0 0 0 0 color-mix(in srgb, var(--red) 30%, transparent); }
  50%{ box-shadow: var(--shadow-md), 0 0 0 10px color-mix(in srgb, var(--red) 0%, transparent); }
}
.rd-floating .badge{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  display:flex; align-items: center; justify-content: center;
}

/* ─── Red mix tweak — scoped via [data-red-mix] ─────────── */
.rd-frame[data-red-mix="2"] .rd-quick-card:hover .rd-quick-icon{ background: var(--red); }
.rd-frame[data-red-mix="2"] .rd-bento-card.fiber{ background: color-mix(in srgb, var(--red) 6%, var(--bg-card)); border-color: color-mix(in srgb, var(--red) 18%, transparent); }
.rd-frame[data-red-mix="2"] .rd-section-head .en-tag::before{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }

.rd-frame[data-red-mix="4"] .rd-bento-card.fiber{ background: var(--red); color: #fff; border-color: transparent; }
.rd-frame[data-red-mix="4"] .rd-bento-card.fiber h3,
.rd-frame[data-red-mix="4"] .rd-bento-card.fiber .desc{ color: #fff; }
.rd-frame[data-red-mix="4"] .rd-bento-card.fiber .label{ color: rgba(255,255,255,.7); }
.rd-frame[data-red-mix="4"] .rd-bento-card.fiber .rd-bento-icon{ background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
.rd-frame[data-red-mix="4"] .rd-header{ background: color-mix(in srgb, var(--red) 6%, var(--bg)); }
.rd-frame[data-red-mix="4"] .rd-quick-card{ border-color: color-mix(in srgb, var(--red) 14%, var(--line-strong)); }
.rd-frame[data-red-mix="4"] .rd-pricing-pin{ background: color-mix(in srgb, var(--red) 4%, var(--bg-sub)); }

/* ─── Before / After ─────────────────────────────────────── */
.cs-ba{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 900px){ .cs-ba{ grid-template-columns: 1fr; } }
.cs-ba-pane{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
  position: relative;
}
.cs-ba-pane .label{
  position: absolute; top: 14px; left: 14px;
  font-family: var(--en); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(15,17,20,.85); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  z-index: 2;
}
.cs-ba-pane.after .label{ background: var(--red); }

/* ─── Before / After screenshot panes ────────────────────── */
.before-mock,
.after-mock{
  aspect-ratio: 16 / 9;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-sub);
}
.before-mock img,
.after-mock img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.before-mock img{
  object-position: 50% 0%;
}
.after-mock img{
  object-position: 50% 50%;
}

/* ─── Dark mode interaction card ─────────────────────────── */
.cs-night-card{
  width: 100%;
  border: 0;
  cursor: pointer;
  margin-top: 0;
  min-height: 430px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  text-align: left;
  color: #F4F4F6;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,26,45,.20), transparent 28%),
    radial-gradient(circle at 16% 84%, rgba(61,90,254,.22), transparent 30%),
    linear-gradient(135deg, #10131A 0%, #151B27 46%, #0A0D12 100%);
  box-shadow: 0 34px 90px rgba(15,17,20,.18);
  position: relative;
  overflow: hidden;
}
.cs-night-card::before{
  content:"";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}
.cs-night-card::after{
  content:"";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  top: -90px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  filter: blur(2px);
}
.cs-night-card .cs-eyebrow{
  color: rgba(244,244,246,.62);
}
.cs-night-copy,
.cs-night-preview{
  position: relative;
  z-index: 1;
}
.cs-night-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cs-night-title{
  display: block;
  margin-top: 24px;
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -0.055em;
  color: #F4F4F6;
}
.cs-night-body{
  display: block;
  max-width: 42ch;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: -0.03em;
  color: rgba(244,244,246,.66);
}
.cs-night-action{
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cs-night-switch{
  width: 58px;
  height: 32px;
  padding: 3px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: flex-start;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  transition: background .25s;
}
.cs-night-switch span{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F4F4F6;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s;
}
.cs-night-card.is-on .cs-night-switch{
  background: #FF1A2D;
}
.cs-night-card.is-on .cs-night-switch span{
  transform: translateX(26px);
}
.cs-night-preview{
  transform: rotate(-1deg);
  border-radius: 22px;
  background: #0F1114;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
  overflow: hidden;
}
.cs-night-browser{
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1A2230;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cs-night-browser .dots{
  display: flex;
  gap: 7px;
}
.cs-night-browser .dots i{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.cs-night-browser .dots i:nth-child(1){ background:#FF5F57; }
.cs-night-browser .dots i:nth-child(2){ background:#FEBC2E; }
.cs-night-browser .dots i:nth-child(3){ background:#28C840; }
.cs-night-browser .bar{
  flex: 1;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #101826;
  color: rgba(244,244,246,.42);
  font-family: var(--mono);
  font-size: 11px;
}
.cs-night-screen{
  min-height: 300px;
  padding: 34px 34px 38px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,26,45,.16), transparent 28%),
    linear-gradient(180deg, #0F1114 0%, #151A22 100%);
}
.mini-nav{
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(244,244,246,.50);
}
.mini-nav b{
  color: #F4F4F6;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.mini-nav i{
  width: 54px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}
.mini-hero{
  margin-top: 58px;
  font-weight: 900;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .96;
  letter-spacing: -0.06em;
  color: #DDEBFF;
}
.mini-hero em{
  color: #FF1A2D;
  font-style: normal;
}
.mini-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: auto;
}
.mini-row i{
  height: 58px;
  border-radius: 12px;
  background: #1A1D24;
  border: 1px solid rgba(255,255,255,.08);
}
.cs-night-card:not(.is-on){
  background:
    radial-gradient(circle at 82% 18%, rgba(61,90,254,.16), transparent 30%),
    linear-gradient(135deg, #FAFAFB 0%, #EEF4FC 100%);
  color: var(--text);
}
.cs-night-card:not(.is-on) .cs-night-title{ color: var(--text); }
.cs-night-card:not(.is-on) .cs-night-body{ color: var(--text-2); }
.cs-night-card:not(.is-on) .cs-eyebrow{ color: var(--text-3); }
.cs-night-card:not(.is-on) .cs-night-action{
  background: var(--text);
  border-color: var(--text);
}

.cs-evidence{
  margin-top: 30px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-sub));
  box-shadow: 0 16px 42px rgba(15,17,20,.06);
}
.cs-evidence-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--text-3);
}
.cs-evidence-head .en{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cs-evidence-head .jp{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.cs-evidence-grid{
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  grid-template-rows: repeat(2, 132px);
  gap: 10px;
}
.cs-evidence-shot{
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--bg-sub);
  cursor: zoom-in;
  font: inherit;
  text-align: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s;
}
.cs-evidence-shot:hover,
.cs-evidence-shot:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(229,0,18,.34);
  box-shadow: 0 18px 40px rgba(15,17,20,.14);
  outline: none;
}
.cs-evidence-shot.main{
  grid-row: span 2;
}
.cs-evidence-shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.cs-evidence-shot.main img{
  object-position: 50% 0%;
}
.cs-evidence-shot:not(.main) img{
  object-position: 50% 16%;
}
.cs-evidence-shot::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,17,20,0) 38%, rgba(15,17,20,.56) 100%),
    linear-gradient(0deg, rgba(15,17,20,.08), rgba(15,17,20,.08));
  pointer-events: none;
}
.cs-evidence-caption{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  gap: 3px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.34);
}
.cs-evidence-caption .en{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .74;
}
.cs-evidence-caption b{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.cs-evidence-zoom{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0F1114;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s, transform .25s;
}
.cs-evidence-shot:hover .cs-evidence-zoom,
.cs-evidence-shot:focus-visible .cs-evidence-zoom{
  opacity: 1;
  transform: translateY(0);
}
.cs-lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  background: rgba(15,17,20,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: zoom-out;
}
.cs-lightbox-panel{
  position: relative;
  width: min(1180px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: #0F1114;
  box-shadow: 0 34px 100px rgba(0,0,0,.42);
  cursor: default;
}
.cs-lightbox-panel img{
  display: block;
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  background: #0F1114;
}
.cs-lightbox-meta{
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,17,20,.68);
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cs-lightbox-meta .en{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.cs-lightbox-meta b{
  font-size: 14px;
  letter-spacing: -.04em;
}
.cs-lightbox-close{
  position: fixed;
  top: clamp(16px, 2.4vw, 30px);
  right: clamp(16px, 2.4vw, 30px);
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (max-width: 980px){
  .cs-night-card{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cs-night-preview{
    transform: none;
  }
}
@media (max-width: 900px){
  .cs-evidence-grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .cs-evidence-shot,
  .cs-evidence-shot.main{
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
}