.s7-tech-embed {
--s7t-bg:        transparent;
--s7t-surface:   #2b2b2b;
--s7t-surface2:  #333333;
--s7t-border:    rgba(255, 255, 255, 0.15);
--s7t-text:      #f4f4f8;
--s7t-muted:     #a1a6b8;
--s7t-accent:    #3a9bf5;
--s7t-note-bg:   rgba(14, 39, 243, 0.08);
--s7t-note-bd:   rgba(58, 155, 245, 0.35);
--s7t-warn-bg:   rgba(255, 216, 74, 0.08);
--s7t-warn-bd:   rgba(255, 216, 74, 0.30);
--s7t-alert-bg:  rgba(220, 38, 38, 0.12);
--s7t-alert-bd:  rgba(220, 38, 38, 0.30);
--s7t-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.s7-tech-embed section {
scroll-margin-top: 5rem;
}
.s7-tech-embed h2 {
font-size: 24px;
margin: 36px 0 16px;
padding-top: 10px;
border-top: 1px solid var(--s7t-border);
font-weight: 700;
scroll-margin-top: 5rem;
color: var(--s7t-text);
}
.s7-tech-embed h6 {
font-size: 19px;
margin: 28px 0 12px;
font-weight: 700;
scroll-margin-top: 5rem;
color: var(--s7t-text);
}
.s7-tech-embed h4 {
font-size: 14px;
margin: 18px 0 8px;
font-weight: 700;
scroll-margin-top: 5rem;
color: var(--s7t-text);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.s7-tech-embed p          { margin: 0 0 16px; color: var(--s7t-text); }
.s7-tech-embed ul,
.s7-tech-embed ol         { margin: 0 0 16px; padding-left: 20px; color: var(--s7t-text); }
.s7-tech-embed li         { margin-bottom: 6px; }
.s7-tech-embed a          { color: var(--s7t-accent); text-decoration: none; }
.s7-tech-embed a:hover    { text-decoration: underline; }
.s7-tech-embed .table-wrapper {
overflow-x: auto;
margin: 1.5rem 0;
border-radius: 8px;
border: 1px solid var(--s7t-border);
}
.s7-tech-embed table {
border-collapse: collapse;
width: 100%;
margin: 0 !important;
font-size: 0.93em;
}
.s7-tech-embed th,
.s7-tech-embed td {
border-bottom: 1px solid var(--s7t-border);
border-right: 1px solid var(--s7t-border);
padding: 11px 15px;
vertical-align: top;
text-align: left;
color: var(--s7t-text);
}
.s7-tech-embed th:last-child,
.s7-tech-embed td:last-child      { border-right: none; }
.s7-tech-embed tbody tr:last-child td { border-bottom: none; }
.s7-tech-embed th                 { background: var(--s7t-surface2); font-weight: 600; }
.s7-tech-embed tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.s7-tech-embed .ac-live { color: #4ade80; font-weight: 600; }
.s7-tech-embed .ac-v1   { color: #ffd84a; font-weight: 600; }
.s7-tech-embed .ac-v2   { color: #ff9b6b; }
.s7-tech-embed .ac-no   { color: rgba(255, 255, 255, 0.35); }
.s7-tech-embed code,
.s7-tech-embed pre        { font-family: var(--s7t-mono) !important; }
.s7-tech-embed code {
background: var(--s7t-surface);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.88em;
color: var(--s7t-accent);
}
.s7-tech-embed pre {
background: var(--s7t-surface) !important;
border: 1px solid var(--s7t-border);
border-radius: 8px;
padding: 16px;
overflow-x: hidden;
font-size: 0.87em;
line-height: 1.55;
margin: 1.5rem 0;
color: var(--s7t-text);
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
.s7-tech-embed pre code   { background: transparent !important; padding: 0; color: inherit; }
.s7-tech-embed pre .kw    { color: #ffd84a; }
.s7-tech-embed pre .str   { color: #3a9bf5; }
.s7-tech-embed pre .cmt   { color: rgba(255, 255, 255, 0.35); font-style: italic; }
.s7-tech-embed .callout {
border-left: 4px solid var(--s7t-note-bd);
background: var(--s7t-note-bg);
color: var(--s7t-text);
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 1.5rem 0;
}
.s7-tech-embed .callout.warn  { border-left-color: var(--s7t-warn-bd);  background: var(--s7t-warn-bg); }
.s7-tech-embed .callout.alert { border-left-color: var(--s7t-alert-bd); background: var(--s7t-alert-bg); }
.s7-tech-embed .callout strong { font-weight: 600; color: inherit; }
.s7-tech-embed .kw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px 16px;
font-family: var(--s7t-mono);
font-size: 0.88em;
background: var(--s7t-surface);
padding: 20px;
border: 1px solid var(--s7t-border);
border-radius: 8px;
margin: 1.5rem 0;
color: var(--s7t-text);
}
.s7-tech-embed .kw-grid div { padding: 2px 0; }
.s7-tech-embed .verb {
border: 1px solid var(--s7t-border);
border-radius: 10px;
padding: 24px;
margin: 2rem 0;
background: rgba(255, 255, 255, 0.01);
}
.s7-tech-embed .verb h6 {
margin-top: 0;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
scroll-margin-top: 5rem;
}
.s7-tech-embed .verb h6 .anchor {
font-family: var(--s7t-mono);
color: var(--s7t-muted);
font-weight: 500;
font-size: 0.8em;
}
.s7-tech-embed .verb .one-liner {
color: var(--s7t-muted);
margin: -0.5rem 0 1rem;
font-style: italic;
}
.s7-tech-embed .kw  { font-weight: 700; color: #a5d6ff; }
.s7-tech-embed .opt { color: var(--s7t-muted); }
.s7-tech-embed .req { font-weight: 700; text-decoration: underline; }
@media (max-width: 800px) {
.s7-tech-embed table {
table-layout: fixed;
width: 100%;
}
.s7-tech-embed th,
.s7-tech-embed td {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
hyphens: auto;
}
.s7-tech-embed th code,
.s7-tech-embed td code {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
}

/* Same body style as the rest of the article (public/css/s7-global.css, "Article text"): 18px (17px on phones), 1.7 line height,
   #d9d9d9, about 70 characters wide. Tables, code and callouts keep their own sizes. */
.s7-tech-embed > p,
.s7-tech-embed section > p,
.s7-tech-embed div > p,
.s7-tech-embed > ul > li,
.s7-tech-embed > ol > li,
.s7-tech-embed section li,
.s7-tech-embed div > ul > li,
.s7-tech-embed div > ol > li {
font-size: 18px;
line-height: 1.7;
color: #d9d9d9;
}
.s7-tech-embed p,
.s7-tech-embed ul,
.s7-tech-embed ol { max-width: 70ch; }
.s7-tech-embed td p, .s7-tech-embed td li, .s7-tech-embed th p,
.s7-tech-embed .callout p, .s7-tech-embed .callout li { font-size: inherit; line-height: inherit; max-width: none; }
.s7-tech-embed ul, .s7-tech-embed ol { padding-left: 1.75rem; }
.s7-tech-embed li { margin-bottom: 0.6rem; }
.s7-tech-embed strong, .s7-tech-embed b { color: #fff; }
.s7-tech-embed a { text-decoration: underline; text-underline-offset: 0.18em; }
@media screen and (max-width: 767px) {
.s7-tech-embed > p, .s7-tech-embed section > p, .s7-tech-embed div > p,
.s7-tech-embed section li, .s7-tech-embed div > ul > li, .s7-tech-embed div > ol > li { font-size: 17px; }
}
