:root { --guide-ink:#173244; --guide-muted:#465b67; --guide-blue:#0f5d9c; --guide-teal:#14696c; --guide-border:#d9e4e9; --guide-bg:#f2f6f8; }
.guide-header { padding: 26px max(24px,calc((100% - 1390px)/2)) 24px; background:#fff; border-bottom:1px solid var(--guide-border); }
.guide-header h1 { font-size:clamp(26px,3vw,36px); color:var(--guide-ink); margin:0 0 13px; letter-spacing:-.025em; }
.guide-nav { display:flex; flex-wrap:wrap; gap:0 20px; }
.guide-nav a { display:inline-flex; align-items:center; text-decoration:none; min-height:40px; padding:2px 4px; border-bottom:3px solid transparent; font-weight:600; color:var(--guide-muted); }
.guide-nav a:hover { color:var(--guide-blue); }
.guide-nav a[aria-current] { border-bottom-color:#176ca9; color:var(--guide-blue); }
.guide-shell { width:min(100% - 48px,1390px); margin:24px auto 35px; background:none; padding:0; border:0; }
.guide-board { display:grid; grid-template-columns:minmax(215px,.8fr) minmax(0,3fr); border:1px solid var(--guide-border); background:white; }
.guide-choices { background:var(--guide-bg); border-right:1px solid var(--guide-border); padding:16px 0; }
.guide-choices h2 { font-size:15px; margin:0 18px 10px; letter-spacing:0; }
.guide-choices ul { list-style:none; padding:0; margin:0; }
.guide-choices a { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:47px; padding:9px 14px; border-left:4px solid transparent; color:var(--guide-ink); text-decoration:none; font-size:15px; }
.guide-choices a:hover { background:#eaf2f7; }
.guide-choices a[aria-current] { background:#e2eff7; color:#103f66; border-left-color:#176ca9; font-weight:650; }
.guide-choices a[aria-current]::after { content:''; width:7px; height:7px; margin-right:4px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }
.guide-story { padding:24px 28px 27px; min-width:0; }
.guide-story-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:9px 15px; }
.guide-story-head h2 { flex:1 1 435px; font-size:clamp(22px,2.8vw,30px); line-height:1.2; }
.guide-story-kind { color:#194d52; background:#e8f4f2; padding:5px 8px; font-size:12px; font-weight:650; max-width:max-content; }
.guide-story p { line-height:1.52; }
.guide-intro { margin:10px 0 18px; color:var(--guide-muted); }
.guide-flow { display:grid; grid-template-columns:repeat(var(--flow-columns),minmax(0,1fr)); list-style:none; padding:0; gap:18px; margin:0 0 20px; }
.guide-flow li { position:relative; border:1px solid var(--guide-border); border-top:3px solid #227c82; padding:13px 12px 12px; background:#f9fcfd; display:flex; flex-direction:column; min-width:0; }
.guide-flow li:not(:last-child)::after { content:'→'; position:absolute; z-index:1; right:-17px; top:38%; line-height:1; color:#315e71; font-size:17px; }
.guide-flow h3 { font-size:15px; line-height:1.33; margin:0 0 5px; }
.guide-flow p { margin:0 0 10px; font-size:14px; color:var(--guide-muted); flex:1; }
.guide-flow a { text-decoration:underline; text-underline-offset:3px; color:var(--guide-blue); font-size:13px; }
.guide-outcome { border-left:4px solid #15736d; background:#eef7f5; padding:12px 15px; }
.guide-outcome h3 { font-size:16px; margin:0; }
.guide-outcome p { margin:5px 0 0; }
.guide-check { color:#304f5b; font-size:14px; margin:11px 0; }
.guide-links { display:flex; flex-wrap:wrap; gap:9px 21px; margin:14px 0 0; }
.guide-links a { color:var(--guide-blue); }
.guide-fallback { padding:16px; border:1px solid var(--guide-border); background:white; }
.guide-library-home { max-width:105ch; }
.guide-library-home > p { color:var(--guide-muted); line-height:1.5; }
.guide-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-top:20px; }
.guide-library-grid article { border-top:2px solid #88aeae; padding:10px 12px 12px; background:#f5f9fb; min-width:0; }
.guide-library-grid h3 { margin:0 0 7px; font-size:16px; }
.guide-library-grid ul { margin:0; padding-left:18px; line-height:1.6; }
.guide-library-grid a { font-size:14px; }
.guide-return { margin:0 0 12px; font-size:14px; }
.guide-context::before { content:''; display:block; border-top:1px solid var(--guide-border); margin:12px 0; }
.guide-context h3 { font-size:16px; margin:0 0 7px; }
.guide-context ul { display:flex; flex-wrap:wrap; gap:8px 22px; padding:0; margin:0; list-style:none; }
.guide-context a { font-size:14px; }
.workspace main .diagram-layout { grid-template-columns:minmax(0,1fr); }
.workspace main .diagram-explanation { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
.workspace main .diagram-guide { background:#f4f8fa; border-color:var(--guide-border); }
#diagram-reading { margin-top:4px; }
#architecture-tools { margin-top:22px; }
#architecture-tools > summary { color:var(--guide-blue); cursor:pointer; font-weight:600; }
#connected-explorer { padding-top:13px; }
#diagram-browser { margin-top:20px; }
#title:focus,#guide-question:focus { outline:2px solid transparent; }
@media (max-width:1100px) {
  .guide-board { grid-template-columns:210px minmax(0,1fr); }
  .guide-story { padding:20px; }
  .guide-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guide-flow li:nth-child(2)::after { content:none; }
}
@media (max-width:750px) {
  .guide-shell { width:calc(100% - 30px); }
  .guide-board { display:block; }
  .guide-choices { border-right:0; border-bottom:1px solid var(--guide-border); }
  .guide-choices ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace main .diagram-explanation { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:430px) {
  .guide-flow,.guide-library-grid { grid-template-columns:minmax(0,1fr); }
  .guide-flow li:not(:last-child)::after { content:'↓'; right:50%; top:auto; bottom:-18px; }
}
@media print {
  .guide-header,.guide-choices,.guide-links,.guide-return,.guide-context { display:none !important; }
  .guide-shell { width:100%; margin:0; }
  .guide-board { display:block; border:0; }
  .guide-story { padding:0; }
}