.getting-started-section { border-top: 1px solid var(--line); }

.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.guide-card,
.simulation-guide {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}

.guide-card { padding: 1.5rem; }
.guide-index { margin-bottom: 1.4rem; color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; }
.guide-card h3,.simulation-guide h3 { margin-bottom: 1rem; font-size: 1.25rem; }

.video-placeholder {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 0.8rem;
  padding: 2rem;
  border: 1px dashed rgba(103,232,196,0.38);
  border-radius: 13px;
  background: radial-gradient(circle at 50% 50%, rgba(103,232,196,0.08), transparent 16rem),rgba(8,16,23,0.55);
  text-align: center;
}
.play-mark { display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(103,232,196,0.45);border-radius:50%;color:var(--accent);background:rgba(103,232,196,0.06);padding-inline-start:.2rem; }
.video-placeholder small { max-width:440px;color:var(--muted);line-height:1.6; }

.quick-steps { margin:0;padding-inline-start:1.3rem;color:var(--muted); }
.quick-steps li { margin-bottom:.85rem;padding-inline-start:.35rem; }
.quick-steps li::marker { color:var(--accent);font-weight:800; }

.simulation-guide { padding:1.5rem; }
.simulation-guide-heading { display:flex;justify-content:space-between;gap:2rem;align-items:baseline;margin-bottom:1.2rem; }
.simulation-guide-heading p { max-width:540px;margin:0;color:var(--muted); }
.simulation-guide-heading .click-hint { margin-top:.35rem;color:var(--accent);font-size:.84rem; }

.simulation-grid.expandable { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;border:0; }
.simulation-card { border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);overflow:hidden; }
.simulation-card[open] { grid-column:1/-1;border-color:rgba(103,232,196,.32);background:rgba(103,232,196,.028); }
.simulation-card summary { list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:132px;padding:1.2rem;cursor:pointer; }
.simulation-card summary::-webkit-details-marker { display:none; }
.simulation-summary-copy { display:grid;gap:.45rem; }
.simulation-summary-copy strong { color:var(--text);font-size:1.05rem; }
.simulation-summary-copy > span { color:var(--muted);font-size:.9rem;line-height:1.55; }
.expand-mark { display:grid;flex:0 0 auto;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:1.3rem;transition:transform .16s ease; }
.simulation-card[open] .expand-mark { transform:rotate(45deg); }

.simulation-detail { padding:0 1.2rem 1.25rem;border-top:1px solid var(--line); }
.simulation-detail > p { margin:1rem 0 0;color:var(--muted); }
.simulation-detail b { color:var(--text); }
.simulation-detail .caution { padding:.75rem .9rem;border-inline-start:3px solid rgba(121,169,255,.7);background:rgba(121,169,255,.045);border-radius:6px; }

.gallery-demo { margin-top:1.15rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:rgba(8,16,23,.52); }
.gallery-demo-head { display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:baseline;margin-bottom:.85rem; }
.gallery-demo-head span { color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.gallery-demo-head strong { color:var(--text);font-size:.92rem; }
.gallery-demo small { display:block;margin-top:.7rem;color:var(--muted);font-size:.74rem; }
.demo-pair { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem; }

.mini-schematic,.mini-result,.mini-plot { min-height:170px;border:1px solid var(--line);border-radius:10px;background-color:rgba(255,255,255,.018); }
.mini-schematic {
  position:relative;
  overflow:hidden;
  padding:.75rem;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.mini-schematic::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:14px 14px;
  opacity:.32;
}
/* The legacy positioned labels remain in the HTML for compatibility, but the
   rendered preview is now one coherent circuit drawing per example. */
.mini-schematic > * { opacity:0;pointer-events:none; }

.rc-demo { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxjaXJjbGUgY3g9IjQyIiBjeT0iODAiIHI9IjIwIi8+PHBhdGggZD0iTTQyIDYwVjI4SDc2Ii8+PHBhdGggZD0iTTQyIDEwMFYxMzJIMjYwIi8+CjxwYXRoIGQ9Ik03NiAyOGgxOCBsNiAtOCAxMiAxNiAxMiAtMTYgMTIgMTYgMTIgLTE2IDYgOCBoNDIiLz4KPHBhdGggZD0iTTE5NiAyOGg1MCIvPjxwYXRoIGQ9Ik0yMjAgMjh2NDIiLz48cGF0aCBkPSJNMjA0IDcwaDMyTTIwNCA4MGgzMiIvPjxwYXRoIGQ9Ik0yMjAgODB2NTIiLz4KPHBhdGggZD0iTTMyIDgwaDIwTTQyIDcwdjIwIi8+CjwvZz4KPGcgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZpbGw9IiM5ZmIzYzMiPjx0ZXh0IHg9IjE0IiB5PSIxMTUiPlZBQzwvdGV4dD48dGV4dCB4PSIxMTIiIHk9IjE2Ij5SMSA9IDEga86pPC90ZXh0Pjx0ZXh0IHg9IjIwMyIgeT0iMjAiPlZPVVQ8L3RleHQ+PHRleHQgeD0iMjM2IiB5PSI3OSI+QzEgPSAxMDAgbkY8L3RleHQ+PHRleHQgeD0iMjI2IiB5PSIxNDciPkdORDwvdGV4dD48L2c+Cjwvc3ZnPg=="); }
.rlc-demo { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxjaXJjbGUgY3g9IjM0IiBjeT0iNzYiIHI9IjE4Ii8+PHBhdGggZD0iTTM0IDU4VjI4SDY0Ii8+PHBhdGggZD0iTTM0IDk0VjEzMkgyNjYiLz4KPHBhdGggZD0iTTY0IDI4aDEwIGw1IC03IDEwIDE0IDEwIC0xNCAxMCAxNCAxMCAtMTQgNSA3IGgxMiIvPgo8cGF0aCBkPSJNMTM2IDI4YzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwaDM0Ii8+CjxwYXRoIGQ9Ik0yMjYgMjh2NDIiLz48cGF0aCBkPSJNMjEwIDcwaDMyTTIxMCA4MGgzMiIvPjxwYXRoIGQ9Ik0yMjYgODB2NTIiLz4KPC9nPjxnIGZvbnQtZmFtaWx5PSJBcmlhbCxzYW5zLXNlcmlmIiBmb250LXNpemU9IjEwIiBmaWxsPSIjOWZiM2MzIj48dGV4dCB4PSI3IiB5PSIxMTIiPlZJTjwvdGV4dD48dGV4dCB4PSI4MiIgeT0iMTciPlI8L3RleHQ+PHRleHQgeD0iMTYzIiB5PSIxNyI+TDwvdGV4dD48dGV4dCB4PSIyMzIiIHk9IjIwIj5WT1VUPC90ZXh0Pjx0ZXh0IHg9IjI0NiIgeT0iNzkiPkM8L3RleHQ+PHRleHQgeD0iMjMyIiB5PSIxNDciPkdORDwvdGV4dD48L2c+PC9zdmc+"); }
.match-demo { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxwYXRoIGQ9Ik0yMiA1NWg0MiIvPjxwYXRoIGQ9Ik02NCA1NWM2IC0xNyAxOCAtMTcgMjQgMGM2IC0xNyAxOCAtMTcgMjQgMGM2IC0xNyAxOCAtMTcgMjQgMGg3MiIvPgo8cGF0aCBkPSJNMjA4IDU1aDQ2Ii8+PHBhdGggZD0iTTIwOCA1NXYzMCIvPjxwYXRoIGQ9Ik0xOTIgODVoMzJNMTkyIDk1aDMyIi8+PHBhdGggZD0iTTIwOCA5NXYzNCIvPgo8cGF0aCBkPSJNMjQ2IDU1djc0TTIzNiAxMjloMjBNMjQwIDEzNWgxMk0yNDQgMTQxaDQiLz4KPHBhdGggZD0iTTIwOCAxMjloNDYiLz4KPC9nPjxnIGZvbnQtZmFtaWx5PSJBcmlhbCxzYW5zLXNlcmlmIiBmb250LXNpemU9IjEwIiBmaWxsPSIjOWZiM2MzIj48dGV4dCB4PSIxMiIgeT0iNDUiPjUwIM6pPC90ZXh0Pjx0ZXh0IHg9IjkxIiB5PSIzNCI+TCA9IDc5LjYgbkg8L3RleHQ+PHRleHQgeD0iMTUxIiB5PSIxMTIiPkMgPSAxNS45IHBGPC90ZXh0Pjx0ZXh0IHg9IjIzMSIgeT0iNDUiPjEwMCDOqTwvdGV4dD48dGV4dCB4PSI4OSIgeT0iMTUwIj4xMDAgTUh6IGxvdy1wYXNzIEwtbWF0Y2g8L3RleHQ+PC9nPjwvc3ZnPg=="); }
.sweep-demo { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDQ1aDUyIi8+PHBhdGggZD0iTTc0IDQ1YzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwaDcyIi8+PHBhdGggZD0iTTIxOCA0NWg1NiIvPjxwYXRoIGQ9Ik0yMTggNDV2MzYiLz48cGF0aCBkPSJNMjAyIDgxaDMyTTIwMiA5MWgzMiIvPjxwYXRoIGQ9Ik0yMTggOTF2MzZIMjIiLz48cGF0aCBkPSJNMjIgMTI3di04MiIvPjwvZz4KPGcgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZpbGw9IiM5ZmIzYzMiPjx0ZXh0IHg9IjEwIiB5PSIzNSI+VklOPC90ZXh0Pjx0ZXh0IHg9IjkwIiB5PSIyNCI+TCA9IHN3ZWVwPC90ZXh0Pjx0ZXh0IHg9IjIyOCIgeT0iMzUiPlZPVVQ8L3RleHQ+PHRleHQgeD0iMjM2IiB5PSI5MCI+QzwvdGV4dD48dGV4dCB4PSI5MCIgeT0iMTQ2Ij5MQyBsb3ctcGFzcyBwYXJhbWV0ZXIgc3dlZXA8L3RleHQ+PC9nPjwvc3ZnPg=="); }
.opt-demo { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTYwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDQ1aDUyIi8+PHBhdGggZD0iTTc0IDQ1YzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwYzYgLTE2IDE4IC0xNiAyNCAwaDcyIi8+PHBhdGggZD0iTTIxOCA0NWg1NiIvPjxwYXRoIGQ9Ik0yMTggNDV2MzYiLz48cGF0aCBkPSJNMjAyIDgxaDMyTTIwMiA5MWgzMiIvPjxwYXRoIGQ9Ik0yMTggOTF2MzZIMjIiLz48cGF0aCBkPSJNMjIgMTI3di04MiIvPjwvZz4KPGcgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZpbGw9IiM5ZmIzYzMiPjx0ZXh0IHg9IjEwIiB5PSIzNSI+VklOPC90ZXh0Pjx0ZXh0IHg9Ijg4IiB5PSIyNCI+TCA9IHZhcmlhYmxlPC90ZXh0Pjx0ZXh0IHg9IjIyOCIgeT0iMzUiPlZPVVQ8L3RleHQ+PHRleHQgeD0iMjMyIiB5PSI5MCI+QyA9IHZhcmlhYmxlPC90ZXh0Pjx0ZXh0IHg9IjcyIiB5PSIxNDYiPkwsQyBvcHRpbWl6ZWQgZm9yIHBhc3NiYW5kL3N0b3BiYW5kIGdvYWxzPC90ZXh0PjwvZz48L3N2Zz4="); }
.bjt-demo { min-height:190px;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMTgwIj4KPGcgc3Ryb2tlPSIjZGNlOGYyIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxwYXRoIGQ9Ik0xNTAgMTZ2MTYiLz48cGF0aCBkPSJNMTUwIDMydjEwIGwtNyA1IDE0IDEwLTE0IDEwIDE0IDEwLTcgNXYxNCIvPgo8cGF0aCBkPSJNMTUwIDk2bC0yOCAxOCIvPjxwYXRoIGQ9Ik0xMjIgMTE0djIwIGwtNyA1IDE0IDEwLTcgNXYxMCIvPgo8cGF0aCBkPSJNMTUwIDk2bDI4IDE4Ii8+PHBhdGggZD0iTTE3OCAxMTR2NDAiLz4KPHBhdGggZD0iTTkyIDMydjIwIGwtNyA1IDE0IDEwLTE0IDEwIDcgNXYyMiIvPjxwYXRoIGQ9Ik05MiAxMDRoMzAiLz4KPHBhdGggZD0iTTkyIDEwNHYyMCBsLTcgNSAxNCAxMC03IDV2MTAiLz4KPHBhdGggZD0iTTkyIDMyaDU4Ii8+PHBhdGggZD0iTTkyIDE1NGg4NiIvPgo8cGF0aCBkPSJNMTUwIDgydjE0Ii8+PGNpcmNsZSBjeD0iMTUwIiBjeT0iMTA0IiByPSIyNSIvPjxwYXRoIGQ9Ik0xNzggMTE0bC04IDAgNCA4Ii8+CjwvZz4KPGcgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZpbGw9IiM5ZmIzYzMiPjx0ZXh0IHg9IjE2MCIgeT0iMjAiPlZDQzwvdGV4dD48dGV4dCB4PSIxNTgiIHk9IjU4Ij5SQzwvdGV4dD48dGV4dCB4PSI2MCIgeT0iNjciPlIxPC90ZXh0Pjx0ZXh0IHg9IjYwIiB5PSIxMzciPlIyPC90ZXh0Pjx0ZXh0IHg9IjExMiIgeT0iMTEwIj5CPC90ZXh0Pjx0ZXh0IHg9IjE4MyIgeT0iMTEwIj5DPC90ZXh0Pjx0ZXh0IHg9IjE4MSIgeT0iMTQ0Ij5FPC90ZXh0Pjx0ZXh0IHg9IjEzMCIgeT0iMTc0Ij5HTkQ8L3RleHQ+PHRleHQgeD0iMjA1IiB5PSI4NiI+UTEgTlBOPC90ZXh0PjwvZz48L3N2Zz4="); }

.op-demo { display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.85rem;align-content:center; }
.op-demo span { position:static;display:grid;place-items:center;min-height:44px;border:1px solid var(--line);border-radius:7px;color:var(--text); }
.op-demo span:last-child { grid-column:1/-1;color:var(--muted);font-size:.75rem; }

.mini-plot { width:100%;height:170px; }
.mini-plot .axis { fill:none;stroke:rgba(255,255,255,.35);stroke-width:1; }
.mini-plot .curve { fill:none;stroke:var(--accent);stroke-width:3; }
.mini-plot text { fill:var(--muted);font-size:10px; }
.mini-plot.family .c2 { opacity:.72; }.mini-plot.family .c3 { opacity:.46; }
.mini-plot.optimization .before { fill:none;stroke:rgba(255,255,255,.38);stroke-width:2;stroke-dasharray:5 4; }
.mini-plot.optimization .after { fill:none;stroke:var(--accent);stroke-width:3; }

html[dir="rtl"] .quick-steps { padding-inline-start:0;padding-inline-end:1.3rem; }
html[dir="rtl"] .play-mark { padding-inline-start:0;padding-inline-end:.2rem;transform:scaleX(-1); }
html[dir="rtl"] .simulation-detail .caution { border-inline-start:3px solid rgba(121,169,255,.7); }
/* Electrical conventions stay left-to-right in RTL mode: VIN/source remains on the left, VOUT/load on the right. */
html[dir="rtl"] .mini-schematic { direction:ltr; }

@media (max-width:920px) {
  .guide-grid,.simulation-grid.expandable,.demo-pair { grid-template-columns:1fr; }
  .simulation-guide-heading { display:block; }
  .simulation-guide-heading > p { margin-top:.55rem; }
  .simulation-card[open] { grid-column:auto; }
  .mini-schematic,.mini-result,.mini-plot { min-height:190px; }
}