.automotive-room {
  margin-top: 1.5rem;
  border: 1px solid #3a5966;
  background: #0b1d28;
  color: #fff;
}

.automotive-room[hidden] { display: none; }

.auto-room-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 2.4rem 2.6rem;
  border-bottom: 1px solid #314b57;
  background: linear-gradient(110deg, rgba(93,224,230,.1), transparent 48%);
}

.auto-room-head .kicker { color: #5de0e6; }
.auto-room-head h3 { max-width: 760px; font-size: clamp(2rem, 3.6vw, 4.2rem); font-weight: 500; }
.auto-room-route { display: flex; align-items: center; gap: .55rem; color: #9eb2ba; font-size: .64rem; letter-spacing: .12em; }
.auto-room-route i { color: #5de0e6; font-style: normal; }

.auto-persona {
  display: grid;
  grid-template-columns: 145px 1.1fr 1.5fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.6rem 2.6rem;
  border-bottom: 1px solid #314b57;
}

.auto-persona > p,
.auto-arch-head > p {
  margin: .5rem 0 0;
  color: #79919b;
  font-size: .64rem;
  letter-spacing: .14em;
}

.auto-role-tabs { display: flex; flex-wrap: wrap; gap: .45rem; }
.auto-role-tabs button {
  border: 1px solid #3b5965;
  background: #112c39;
  color: #c2d0d5;
  padding: .55rem .7rem;
  font-size: .72rem;
}
.auto-role-tabs button.active { background: #5de0e6; border-color: #5de0e6; color: #08151f; font-weight: 600; }
.auto-role-brief { padding-left: 1.4rem; border-left: 1px solid #3a5661; }
.auto-role-brief small,.auto-role-brief b,.auto-role-brief span { display: block; }
.auto-role-brief small { color: #5de0e6; font-size: .62rem; letter-spacing: .12em; }
.auto-role-brief b { margin: .35rem 0; font: 500 1.08rem/1.25 var(--display); }
.auto-role-brief span { color: #9fb1b8; font-size: .82rem; }

.auto-paths { display: grid; grid-template-columns: 46% 54%; border-bottom: 1px solid #314b57; }
.auto-path-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-right: 1px solid #314b57; }
.auto-path-tabs button { min-height: 180px; border: 0; border-right: 1px solid #314b57; background: #0e2430; color: #fff; padding: 1.2rem; text-align: left; }
.auto-path-tabs button:last-child { border-right: 0; }
.auto-path-tabs button span,.auto-path-tabs button b,.auto-path-tabs button small { display: block; }
.auto-path-tabs button span { color: #78919b; font-size: .58rem; letter-spacing: .11em; }
.auto-path-tabs button b { margin: 1.6rem 0 .5rem; font: 500 1rem var(--display); }
.auto-path-tabs button small { color: #8298a1; line-height: 1.35; }
.auto-path-tabs button.active { background: #5de0e6; color: #08151f; }
.auto-path-tabs button.active span,.auto-path-tabs button.active small { color: #28565c; }
.auto-path-detail { padding: 2rem 2.3rem; background: #f3f6f5; color: #08151f; }
.auto-path-title p { margin: 0 0 .35rem; color: #08757e; font-size: .62rem; letter-spacing: .12em; }
.auto-path-title h4 { margin: 0; font: 500 clamp(1.8rem,2.6vw,3rem)/1.05 var(--display); letter-spacing: -.04em; }
.auto-path-detail > p { color: #5f6e75; }
.auto-measures { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: 1.8rem; }
.auto-measures div { border-top: 2px solid #5de0e6; background: #e6eded; padding: .8rem; }
.auto-measures small,.auto-measures b { display: block; }
.auto-measures small { color: #6e7d83; font-size: .57rem; letter-spacing: .1em; }
.auto-measures b { margin-top: .35rem; font-size: .85rem; }

.auto-architecture { padding: 2.2rem 2.6rem 2.6rem; }
.auto-arch-head { display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.auto-arch-head span { color: #9eb0b7; font-size: .82rem; }
.auto-arch-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.auto-arch-flow > i { color: #5de0e6; font-style: normal; }
.auto-layer { min-height: 145px; padding: 1rem; border: 1px solid #3a5966; background: #102936; display: flex; flex-direction: column; }
.auto-layer small,.auto-layer b,.auto-layer span { display: block; }
.auto-layer small { color: #5de0e6; font-size: .58rem; letter-spacing: .1em; }
.auto-layer b { margin: auto 0 .5rem; font: 500 1rem var(--display); }
.auto-layer span { color: #89a0a9; font-size: .7rem; line-height: 1.4; }
.auto-layer.context { border-color: #5de0e6; box-shadow: inset 0 3px #5de0e6; }
.auto-layer.cockpit { border-color: #0b6dff; box-shadow: inset 0 3px #0b6dff; }
.auto-proof-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #34505b; }
.auto-proof-row div { background: #0d222e; padding: 1rem; }
.auto-proof-row small,.auto-proof-row b { display: block; }
.auto-proof-row small { color: #6f8993; font-size: .58rem; letter-spacing: .11em; }
.auto-proof-row b { margin-top: .35rem; color: #d8e1e4; font-size: .78rem; }
.auto-room-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.auto-room-actions > a { color: #c7d3d7; text-decoration: none; border-bottom: 1px solid #6f838b; padding-bottom: .3rem; font-size: .82rem; }
.auto-room-actions > a span { color: #5de0e6; }

@media (max-width: 1000px) {
  .auto-room-head,.auto-persona { grid-template-columns: 1fr; display: grid; }
  .auto-paths { grid-template-columns: 1fr; }
  .auto-path-tabs { border-right: 0; border-bottom: 1px solid #314b57; }
  .auto-arch-flow { grid-template-columns: 1fr; }
  .auto-arch-flow > i { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 720px) {
  .auto-room-head,.auto-persona,.auto-path-detail,.auto-architecture { padding: 1.4rem; }
  .auto-room-route { flex-wrap: wrap; }
  .auto-role-brief { padding: 1rem 0 0; border-left: 0; border-top: 1px solid #3a5661; }
  .auto-path-tabs,.auto-measures,.auto-proof-row { grid-template-columns: 1fr; }
  .auto-path-tabs button { min-height: 120px; border-right: 0; border-bottom: 1px solid #314b57; }
  .auto-path-tabs button b { margin-top: .8rem; }
  .auto-room-actions { align-items: flex-start; flex-direction: column; }
}