/* Shared article theme enhancements */
html,
body{
  overflow-x:hidden;
}

html{
  scrollbar-color:#33507b #08111f;
  scrollbar-width:thin;
}

body{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(56,189,248,.11), transparent 52%),
    radial-gradient(760px 560px at 92% 4%, rgba(249,115,22,.09), transparent 48%),
    linear-gradient(155deg,#08111f 0%,#122742 55%,#0a1323 100%);
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

body::before{
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,1) 35%, rgba(0,0,0,.55));
}

body::after{
  background:
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.10), transparent 18%),
    radial-gradient(circle at 82% 12%, rgba(249,115,22,.08), transparent 16%),
    radial-gradient(circle at 72% 82%, rgba(168,85,247,.08), transparent 18%);
  opacity:.7;
}

.hero-mark{
  position:absolute;
  right:-12px;
  bottom:-12px;
  width:min(110px,28vw);
  height:min(110px,28vw);
  max-width:110px;
  max-height:110px;
  opacity:.18;
  pointer-events:none;
}

body .nav{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(8,17,31,.74);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(134,166,214,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

body .navin{
  max-width:1120px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  position:relative;
}

body .navin::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(56,189,248,.18) 18%, rgba(249,115,22,.22) 50%, rgba(168,85,247,.18) 82%, transparent 100%);
  pointer-events:none;
}

body .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#f4f8ff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.92rem;
  white-space:nowrap;
  position:relative;
}

body .brand::before{
  content:"";
  width:11px;
  height:11px;
  border-radius:50%;
  background:linear-gradient(135deg,#f97316,#38bdf8);
  box-shadow:0 0 0 6px rgba(56,189,248,.08);
  flex:0 0 11px;
}

body .brand:hover,
body .brand:focus-visible{
  transform:translateY(-1px);
  color:#fff;
}

body .brand span{
  display:inline;
  line-height:1;
}

body .links{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

body .links a{
  display:inline-flex;
  align-items:center;
  gap:0;
  text-decoration:none;
  color:#d8e4fa;
  border:0;
  border-radius:0;
  padding:6px 0;
  font-size:.9rem;
  font-weight:600;
  background:none;
  box-shadow:none;
  white-space:nowrap;
  position:relative;
  opacity:.88;
  transition:color .2s ease,opacity .2s ease,transform .2s ease;
}

body .links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,#f97316,#38bdf8);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}

body .links a:hover,
body .links a:focus-visible{
  transform:translateY(-1px);
  color:#fff;
  opacity:1;
}

body .links a:hover::after,
body .links a:focus-visible::after{
  transform:scaleX(1);
}

body .card,
body .panel,
body .band,
body .summary,
body .pathCard,
body .tourBoard,
body .flowGrid article,
body .path article{
  background:
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
  border:1px solid rgba(141,177,224,.18);
  border-radius:28px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.06);
}

body .band,
body .summary,
body .pathCard,
body .tourBoard,
body .flowGrid article,
body .path article{
  position:relative;
  overflow:hidden;
}

body .band::before,
body .summary::before,
body .pathCard::before,
body .tourBoard::before,
body .flowGrid article::before,
body .path article::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

@media (max-width:700px){
  body .navin{
    flex-direction:column;
    align-items:stretch;
    padding:12px 12px 10px;
  }

  body .navin::after{
    left:12px;
    right:12px;
  }

  body .brand{
    justify-content:flex-start;
    letter-spacing:.1em;
  }

  body .links{
    width:100%;
    gap:8px;
    justify-content:flex-start;
    padding-top:2px;
    flex-wrap:wrap;
  }

  body .links a{
    padding:8px 0 6px;
    font-size:.88rem;
  }

  body{
    background-attachment:scroll;
  }

  .hero-mark{
    display:none;
  }

  main, .wrap, .hero, .section, .band, .panel, .diagram, .visual,
  .diagramBox, .pathCard, .step, .tourBoard, .card, .flowGrid article,
  .path article, .table-shell, .summary, .grid2, .flowGrid, .path,
  .scenarioRail, .flowRail{
    max-width:100%;
  }

  .table-shell{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px;
  }

  table,
  .demo-table{
    display:block;
    width:100%;
    max-width:100%;
  }

  table thead,
  .demo-table thead{
    font-size:.72rem;
  }

  table th,
  table td,
  .demo-table th,
  .demo-table td{
    padding:10px 11px;
    font-size:.92rem;
  }

  .diagram,
  .visual,
  .diagramBox,
  .pathCard,
  .step,
  .tourBoard,
  .card,
  .flowGrid article,
  .path article{
    padding:14px;
    border-radius:16px;
  }

  .diagram svg,
  .visual svg{
    padding:10px;
  }

  .diagramBox svg,
  .pathCard svg,
  .step svg,
  .tourBoard svg,
  .card svg,
  .flowGrid article svg,
  .path article svg{
    width:min(100%,200px);
    max-width:200px;
  }

  .diagramBox p,
  .pathCard p,
  .step p,
  .tourBoard p,
  .card p,
  .flowGrid article p,
  .path article p{
    font-size:.96rem;
    line-height:1.68;
  }

  .chip-row,
  .table-strip{
    gap:6px;
  }

  .table-strip{
    align-items:flex-start;
  }
}

main, .wrap, .hero, .section, .band, .panel, .diagram, .visual,
.diagramBox, .pathCard, .step, .tourBoard, .card, .flowGrid article,
.path article, .table-shell, .summary, .grid2, .flowGrid, .path,
.scenarioRail, .flowRail{
  min-width:0;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:14px 0;
  background:linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
  border:1px solid rgba(141,177,224,.18);
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 34px 90px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.demo-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:14px 0;
  background:linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
  border:1px solid rgba(141,177,224,.18);
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 34px 90px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}

table th,
table td{
  padding:13px 14px;
  border-bottom:1px solid #223656;
  text-align:left;
  vertical-align:top;
}

.demo-table th,
.demo-table td{
  padding:13px 14px;
  border-bottom:1px solid #223656;
  text-align:left;
  vertical-align:top;
}

table thead th{
  background:linear-gradient(90deg,#10203a,#132848);
  color:#f1f7ff;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.78rem;
}

.demo-table thead th{
  background:linear-gradient(90deg,#10203a,#132848);
  color:#f1f7ff;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.78rem;
}

table tbody td{
  color:#dbe7fb;
  line-height:1.6;
}

.demo-table tbody td{
  color:#dbe7fb;
  line-height:1.6;
}

table tbody tr{
  background:rgba(255,255,255,.01);
}

.demo-table tbody tr{
  background:rgba(255,255,255,.01);
}

table tbody tr:nth-child(even){
  background:rgba(56,189,248,.05);
}

.demo-table tbody tr:nth-child(even){
  background:rgba(56,189,248,.05);
}

table tbody tr:hover{
  background:rgba(249,115,22,.08);
}

.demo-table tbody tr:hover{
  background:rgba(249,115,22,.08);
}

table tr:last-child td{
  border-bottom:none;
}

.demo-table tr:last-child td{
  border-bottom:none;
}

table th:first-child,
table td:first-child{
  border-left:4px solid rgba(56,189,248,.12);
}

.demo-table th:first-child,
.demo-table td:first-child{
  border-left:4px solid rgba(56,189,248,.12);
}

table tbody td:first-child{
  font-weight:700;
  color:#f4f8ff;
}

.demo-table tbody td:first-child{
  font-weight:700;
  color:#f4f8ff;
}

table tbody td:nth-child(2){
  color:#c7d7ee;
}

.demo-table tbody td:nth-child(2){
  color:#c7d7ee;
}

table tbody td:nth-child(3){
  color:#edf3ff;
}

.demo-table tbody td:nth-child(3){
  color:#edf3ff;
}

.table-shell{
  margin:12px 0 0;
  padding:14px;
  border:1px solid rgba(141,177,224,.18);
  border-radius:28px;
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(93,213,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
  box-shadow:
    0 34px 90px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.table-shell table{
  margin:0;
}

.table-shell .demo-table{
  margin:0;
}

.table-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(85,114,157,.22);
}

.table-title{
  font-size:.92rem;
  font-weight:800;
  color:#f1f7ff;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.table-sub{
  font-size:.82rem;
  color:#aac1d9;
  margin-top:2px;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #2f4b73;
  background:#11233f;
  color:#dce9ff;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.chip.orange{
  border-color:rgba(249,115,22,.35);
  background:rgba(249,115,22,.12);
  color:#ffd6b6;
}

.chip.blue{
  border-color:rgba(56,189,248,.35);
  background:rgba(56,189,248,.12);
  color:#cdefff;
}

.chip.green{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:#cef9dc;
}

.diagram{
  position:relative;
  padding:16px;
}

.diagram,
.visual,
.diagramBox,
.pathCard,
.step,
.tourBoard,
.card,
.flowGrid article,
.path article{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(93,213,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
  border:1px solid rgba(141,177,224,.18);
  border-radius:28px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.diagramBox *,
.pathCard *,
.step *,
.tourBoard *,
.card *,
.flowGrid article *,
.path article *,
.table-shell *,
.panel *,
.summary *{
  min-width:0;
}

.diagramBox,
.pathCard,
.step,
.tourBoard,
.card,
.flowGrid article,
.path article{
  padding:16px;
}

.diagram svg,
.visual svg,
.diagramBox svg,
.pathCard svg,
.step svg,
.tourBoard svg,
.card svg,
.flowGrid article svg,
.path article svg{
  display:block;
  width:100%;
  max-width:100%;
  margin:12px auto 0;
  overflow:visible;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.diagramBox svg,
.pathCard svg,
.step svg,
.tourBoard svg,
.card svg,
.flowGrid article svg,
.path article svg{
  width:min(100%,240px);
  max-width:240px;
}

.pathCard svg,
.step svg{
  display:none;
  width:min(100%,140px);
  max-width:140px;
  margin:10px auto 0;
}

.pathCard,
.step{
  min-height:0;
}

.diagram::before,
.visual::before,
.diagramBox::before,
.pathCard::before,
.step::before,
.tourBoard::before,
.card::before,
.flowGrid article::before,
.path article::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.diagram > *,
.visual > *,
.diagramBox > *,
.pathCard > *,
.step > *,
.tourBoard > *,
.card > *,
.flowGrid article > *,
.path article > *{
  position:relative;
  z-index:1;
}

.diagramBox:nth-child(4n+1),
.pathCard:nth-child(4n+1),
.step:nth-child(4n+1),
.tourBoard:nth-child(4n+1),
.card:nth-child(4n+1),
.flowGrid article:nth-child(4n+1),
.path article:nth-child(4n+1){
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(93,213,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
}

.diagramBox:nth-child(4n+2),
.pathCard:nth-child(4n+2),
.step:nth-child(4n+2),
.tourBoard:nth-child(4n+2),
.card:nth-child(4n+2),
.flowGrid article:nth-child(4n+2),
.path article:nth-child(4n+2){
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(247,161,85,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
}

.diagramBox:nth-child(4n+3),
.pathCard:nth-child(4n+3),
.step:nth-child(4n+3),
.tourBoard:nth-child(4n+3),
.card:nth-child(4n+3),
.flowGrid article:nth-child(4n+3),
.path article:nth-child(4n+3){
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(139,123,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
}

.diagramBox:nth-child(4n+4),
.pathCard:nth-child(4n+4),
.step:nth-child(4n+4),
.tourBoard:nth-child(4n+4),
.card:nth-child(4n+4),
.flowGrid article:nth-child(4n+4),
.path article:nth-child(4n+4){
  background:
    radial-gradient(560px 220px at 20% 18%, rgba(34,197,94,.08), transparent 42%),
    linear-gradient(145deg, rgba(23,41,72,.88), rgba(11,20,38,.92));
}

.diagram svg text,
.visual svg text,
.diagramBox svg text,
.pathCard svg text,
.step svg text,
.tourBoard svg text,
.card svg text,
.flowGrid article svg text,
.path article svg text{
  font-family:"Segoe UI",system-ui,sans-serif;
  fill:#edf4ff;
}

.diagram svg [fill="#ffffff"],
.visual svg [fill="#ffffff"],
.diagramBox svg [fill="#ffffff"],
.pathCard svg [fill="#ffffff"],
.step svg [fill="#ffffff"],
.tourBoard svg [fill="#ffffff"],
.card svg [fill="#ffffff"],
.flowGrid article svg [fill="#ffffff"],
.path article svg [fill="#ffffff"]{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.08));
}

.diagram svg,
.visual svg{
  width:100%;
  max-width:100%;
  background:
    radial-gradient(220px 120px at 12% 8%, rgba(56,189,248,.12), transparent 58%),
    radial-gradient(220px 120px at 88% 10%, rgba(249,115,22,.10), transparent 58%),
    linear-gradient(145deg,#101b33,#0e1830);
  border:1px solid rgba(49,80,124,.55);
  border-radius:16px;
  padding:12px;
}

.diagram svg line,
.visual svg line,
.diagramBox svg line,
.pathCard svg line,
.step svg line,
.tourBoard svg line,
.card svg line,
.flowGrid article svg line,
.path article svg line,
.diagram svg path,
.visual svg path,
.diagramBox svg path,
.pathCard svg path,
.step svg path,
.tourBoard svg path,
.card svg path,
.flowGrid article svg path,
.path article svg path{
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.diagram svg [marker-end],
.visual svg [marker-end],
.diagramBox svg [marker-end],
.pathCard svg [marker-end],
.step svg [marker-end],
.tourBoard svg [marker-end],
.card svg [marker-end],
.flowGrid article svg [marker-end],
.path article svg [marker-end]{
  shape-rendering:geometricPrecision;
}

.flow-note{
  margin:0 0 12px;
  color:#aac1d9;
  font-size:.92rem;
  line-height:1.6;
}

.diagramBox p,
.pathCard p,
.step p,
.tourBoard p,
.card p,
.flowGrid article p,
.path article p,
.table-shell p,
.panel p{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

.foot,
.footer{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  margin:26px auto 0;
  color:#90a6c4;
  padding:18px 0 24px;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.75;
  border-top:1px solid rgba(130,154,187,.14);
}

::selection{
  background:rgba(56,189,248,.28);
  color:#fff;
}