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

.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;
}

.nav .brand::before,
.nav .links a::before{
  content:"";
  display:inline-block;
  flex:0 0 15px;
  width:15px;
  height:15px;
  opacity:.95;
  background:center/contain no-repeat;
}

.nav .brand::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}

.nav .links a[href^='/articles']::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l5 5v11H7z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M9 13h6M9 16h6M9 10h2'/%3E%3C/svg%3E");
}

.nav .links a[href='/contact.html']::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4.5 7.5 7.5 5 7.5-5'/%3E%3C/svg%3E");
}

.nav .links a[download]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}

@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .nav .brand::before,
  .nav .links a::before{
    background:none;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
  }

  .nav .brand::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
  }

  .nav .links a[href^='/articles']::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l5 5v11H7z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M9 13h6M9 16h6M9 10h2'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l5 5v11H7z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M9 13h6M9 16h6M9 10h2'/%3E%3C/svg%3E");
  }

  .nav .links a[href='/contact.html']::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4.5 7.5 7.5 5 7.5-5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4.5 7.5 7.5 5 7.5-5'/%3E%3C/svg%3E");
  }

  .nav .links a[download]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
  }
}

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(180deg,#101b33 0%,#0e1830 100%);
  border:1px solid #2a4166;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}

.demo-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:14px 0;
  background:linear-gradient(180deg,#101b33 0%,#0e1830 100%);
  border:1px solid #2a4166;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}

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:12px;
  border:1px solid rgba(49,80,124,.7);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(16,32,58,.72),rgba(11,23,48,.86));
  box-shadow:0 18px 44px rgba(0,0,0,.2);
}

.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{
  background:linear-gradient(145deg,#10203a,#0b1730);
  border:1px solid #31507c;
  border-radius:18px;
  padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  position:relative;
}

.diagram,
.visual,
.diagramBox,
.pathCard,
.step,
.tourBoard,
.card,
.flowGrid article,
.path article{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(420px 180px at 10% 0%, rgba(56,189,248,.22), transparent 58%),
    radial-gradient(360px 160px at 100% 8%, rgba(249,115,22,.18), transparent 55%),
    radial-gradient(300px 160px at 42% 100%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(145deg,#10203a,#0b1730);
  border:1px solid rgba(87,131,189,.8);
  border-radius:18px;
  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    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:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(249,115,22,.16), transparent 38%),
    linear-gradient(225deg, rgba(56,189,248,.14), transparent 35%),
    linear-gradient(315deg, rgba(34,197,94,.10), transparent 28%);
  opacity:.95;
}

.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(380px 160px at 12% 0%, rgba(56,189,248,.24), transparent 58%),
    radial-gradient(320px 150px at 92% 4%, rgba(168,85,247,.16), transparent 55%),
    linear-gradient(145deg,#10203a,#0b1730);
}

.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(380px 160px at 12% 0%, rgba(34,197,94,.22), transparent 58%),
    radial-gradient(320px 150px at 92% 4%, rgba(56,189,248,.14), transparent 55%),
    linear-gradient(145deg,#10203a,#0b1730);
}

.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(380px 160px at 12% 0%, rgba(249,115,22,.22), transparent 58%),
    radial-gradient(320px 150px at 92% 4%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(145deg,#10203a,#0b1730);
}

.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(380px 160px at 12% 0%, rgba(168,85,247,.20), transparent 58%),
    radial-gradient(320px 150px at 92% 4%, rgba(249,115,22,.14), transparent 55%),
    linear-gradient(145deg,#10203a,#0b1730);
}

.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;
}