/* Synorb Skills pages (/skills, /skills/<name>). Generated pages: scripts/build_agent_skills.py.
   Builds on agent-guides.css (.ar-*) and the shared tokens; only skill-specific parts live here. */

.sk-for { margin-top: 0.75rem; color: var(--text-secondary); font-size: var(--small-size); max-width: 62ch; }
.sk-hero-copy { margin-top: 1.25rem; max-width: 46rem; }
.sk-label { font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.sk-fine { color: var(--text-tertiary); font-size: var(--small-size); line-height: 1.55; margin-top: 0.6rem; }
.sk-prose { color: var(--text-secondary); line-height: 1.65; max-width: 68ch; margin-top: 0.75rem; }
.sk-how { color: var(--text-secondary); line-height: 1.55; margin: 0 0 0.85rem; max-width: 64ch; }

/* Copy blocks */
.sk-copy-block { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-subtle, transparent); margin: 0.5rem 0; }
.sk-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--mono-size); color: var(--text-tertiary); letter-spacing: 0.04em; }
.sk-copy { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.2rem 0.65rem; cursor: pointer; min-height: 40px; min-width: 64px; }
.sk-copy:hover { border-color: var(--text-tertiary); }
.sk-copy:focus-visible, .sk-tab:focus-visible { outline: 2px solid var(--syn-sea, currentColor); outline-offset: 2px; }
.sk-pre { margin: 0; padding: 0.75rem 0.85rem; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.55; color: var(--text); background: transparent; }

/* Tabs */
.sk-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sk-tab { font: inherit; font-size: var(--small-size); color: var(--text-secondary); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; min-height: 40px; }
.sk-tab:hover { color: var(--text); border-color: var(--line-strong); }
.sk-tab[aria-selected="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.sk-panel { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
.sk-panel + .sk-panel { margin-top: 1rem; }
.sk-panel-title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--text); }
.sk-js .sk-panel[data-hidden] { display: none; }
.sk-js .sk-panel + .sk-panel { margin-top: 0; }
.sk-js .sk-panel-title { display: none; }
.sk-phrases { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.sk-phrases b { display: block; font-family: var(--font-display); font-weight: 500; color: var(--text); }
.sk-zips { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-family: var(--font-mono); font-size: var(--mono-size); }

/* Cards */
.sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.sk-cards-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.sk-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1, transparent); color: inherit; text-decoration: none; min-width: 0; }
.sk-card-small { transition: border-color .2s ease, transform .2s ease; }
.sk-card-small:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.sk-card-small b { font-family: var(--font-display); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card-small span { font-size: var(--small-size); color: var(--text-secondary); line-height: 1.5; height: 4.5em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; margin: 0; }
.sk-card-title a { color: var(--text); text-decoration: none; }
.sk-card-tag { color: var(--text-secondary); line-height: 1.5; margin: 0; }
.sk-excerpt { position: relative; max-height: 15rem; overflow: hidden; border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.25rem; font-size: 0.92rem; }
.sk-excerpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; background: linear-gradient(to bottom, transparent, var(--bg)); }
.sk-card-foot { display: flex; gap: 1.25rem; margin: auto 0 0; padding-top: 0.5rem; font-size: var(--small-size); }

/* Skill page */
.sk-does { margin: 0; padding-left: 1.2rem; line-height: 1.75; color: var(--text-secondary); max-width: 64ch; }
.sk-sample { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 1rem; }
.sk-sample-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-subtle, transparent); }
.sk-sample-head b { font-family: var(--font-display); font-weight: 500; color: var(--text); }
.sk-sample-head a { margin-left: auto; font-size: var(--small-size); }
.sk-sample-body { padding: 0.5rem 1.2rem 1.2rem; max-height: 44rem; overflow: auto; }
.sk-sample-body table { display: block; overflow-x: auto; }
.sk-sample-body h1 { font-size: 1.6rem; margin-top: 1.25rem; }
.sk-sample-body h2 { font-size: 1.25rem; margin-top: 1.4rem; }
.sk-sample-body h3 { font-size: 1.05rem; }
.sk-faq { border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
.sk-faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; color: var(--text); }
.sk-faq p { color: var(--text-secondary); line-height: 1.6; margin: 0.5rem 0 0; max-width: 66ch; }
.sk-files { margin: 0; padding-left: 1.2rem; line-height: 1.9; color: var(--text-secondary); }

@media (max-width: 640px) {
  .sk-panel { padding: 0.9rem; }
  .sk-sample-body { padding: 0.25rem 0.85rem 0.9rem; }
  .sk-sample-head a { margin-left: 0; }
}

/* ---------------------------------------------------------------- /skills gallery (approved mockup, 2026-10-25)
   Site tokens only. Two page-local values: the homepage olive-lime accent and the chart tint. */
.sk2 { --sk-olive: #7c9e3d; --sk-viz: #9bc24a; color: var(--color-text-muted); }
:root[data-theme="dark"] .sk2 { --sk-olive: var(--syn-lime); --sk-viz: var(--syn-lime); }
.sk2 h1, .sk2 h2, .sk2 h3 { font-family: var(--font-display); color: var(--color-text); }
.sk2-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--syn-sea); border-left: 3px solid var(--syn-lime); padding-left: 12px; margin: 0; }
:root[data-theme="dark"] .sk2-eyebrow { color: var(--syn-sea-bright); }

/* hero */
.sk2-hero { position: relative; text-align: center; padding: 50px 0 30px; isolation: isolate; }
.sk2-hero::before { content: ""; position: absolute; inset: 40px 0 auto 0; height: 520px; background: radial-gradient(closest-side, color-mix(in srgb, var(--syn-lime) 18%, transparent), transparent); z-index: -1; pointer-events: none; }
.sk2-h1 { font-size: clamp(38px, 6.2vw, 88px); line-height: 1.02; font-weight: 500; letter-spacing: -.02em; margin: 20px auto 18px; max-width: 14ch; text-wrap: balance; }
.sk2-nw { white-space: nowrap; }
.sk2-rot { display: inline-block; position: relative; color: var(--sk-olive); transition: opacity .35s, transform .35s; }
.sk2-rot.out { opacity: 0; transform: translateY(-14px); }
.sk2-rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: .12em; background: var(--syn-lime); opacity: .45; border-radius: 4px; transform-origin: left; animation: sk2-ul 3.8s ease-in-out infinite; }
@keyframes sk2-ul { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
.sk2-sub { font-size: 19px; line-height: 1.6; max-width: 600px; margin: 0 auto; }
.sk2-bar { max-width: 720px; margin: 34px auto 0; display: flex; align-items: center; gap: 12px; background: var(--syn-panel); color: var(--syn-on-dark); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 18px 18px 18px 22px; font-family: var(--font-mono); font-size: 15px; text-align: left; box-shadow: var(--syn-shadow-float); }
.sk2-prompt { color: var(--syn-lime); }
.sk2-typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sk2-caret { width: 9px; height: 19px; background: var(--syn-lime); flex: 0 0 auto; animation: sk2-blink .9s steps(1) infinite; }
@keyframes sk2-blink { 50% { opacity: .2; } }
.sk2-run { margin-left: auto; flex: 0 0 auto; font-family: var(--font-display); font-size: 13px; font-weight: 600; background: #26302b; color: #9fb0a6; border-radius: 8px; padding: 7px 13px; transition: background .25s, color .25s, transform .25s; }
.sk2-run.go { background: var(--syn-lime); color: var(--syn-lime-ink); transform: scale(1.06); }
.sk2-flow { display: flex; flex-direction: column; align-items: center; margin-top: 16px; height: 64px; }
.sk2-node { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: 99px; padding: 5px 12px; opacity: .35; transition: opacity .3s; }
.sk2-node.on { opacity: 1; background: var(--syn-lime); color: var(--syn-lime-ink); border-color: var(--syn-lime); box-shadow: 0 0 0 5px color-mix(in srgb, var(--syn-lime) 30%, transparent); }
.sk2-wire { width: 4px; height: 34px; overflow: visible; }
.sk2-wire path { stroke: var(--sk-viz); stroke-width: 2; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; vector-effect: non-scaling-stroke; }
.sk2-wire.on path { animation: sk2-draw .6s ease forwards; }
@keyframes sk2-draw { to { stroke-dashoffset: 0; } }
.sk2-artifact { max-width: 640px; min-height: 236px; margin: 4px auto 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--syn-shadow-card); padding: 22px 26px; text-align: left; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1); }
.sk2-artifact.show { opacity: 1; transform: none; }
.sk2-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-olive); }
.sk2-art-title { font-size: 21px; font-weight: 600; margin: 6px 0 12px; }
.sk2-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--color-border); font-size: 15px; line-height: 1.4; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.sk2-row.show { opacity: 1; transform: none; }
.sk2-src { font-family: var(--font-mono); font-size: 10px; background: var(--syn-lime); color: var(--syn-lime-ink); padding: 2px 8px; border-radius: 99px; white-space: nowrap; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sk2-src.show { transform: scale(1); }
.sk2-wave { display: flex; gap: 3px; align-items: center; height: 40px; margin: 2px 0 8px; }
.sk2-wave i { flex: 1; max-width: 5px; height: 6px; border-radius: 2px; background: var(--sk-viz); animation: sk2-wv 1s ease-in-out infinite; }
@keyframes sk2-wv { 50% { height: 30px; } }
.sk2-nextrun { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--sk-olive); }
.sk2-art-link { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--color-text); }
.sk2-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.sk2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-family: var(--font-display); font-size: 17px; padding: 14px 26px; border-radius: 3px; border: 1px solid var(--color-text); background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; }
.sk2-btn.primary { background: var(--syn-lime); border-color: var(--syn-lime); color: var(--syn-lime-ink); font-weight: 500; }
.sk2-btn:hover { transform: translateY(-1px); }
.sk2-btn:focus-visible, .sk2-card:focus-visible, .sk2-g:focus-visible, .sk2-copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* sections */
.sk2-section { padding: 72px 0; }
.sk2-h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; letter-spacing: -.01em; margin: 16px 0 12px; }
.sk2-lead { font-size: 18px; line-height: 1.6; max-width: 680px; margin: 0; }
.sk2-lead code { font-size: .85em; white-space: nowrap; }
.sk2-also { margin: 22px 0 0; font-size: 15px; line-height: 1.6; }
.sk2-also a { white-space: nowrap; }

/* job cards: symmetric tiles (one-line title, 3-line description slot, audience pinned to the bottom) */
.sk2-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.sk2-card { display: flex; flex-direction: column; text-align: left; min-width: 0; font: inherit; color: inherit; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 14px; padding: 18px; cursor: pointer; overflow: hidden; box-shadow: var(--syn-shadow-card); transition: transform .25s, box-shadow .25s, border-color .25s; }
.sk2-card:hover { transform: translateY(-4px); }
.sk2-card.on { border-color: var(--sk-viz); box-shadow: 0 0 0 3px color-mix(in srgb, var(--syn-lime) 45%, transparent), var(--syn-shadow-card); }
.sk2-viz { display: block; position: relative; height: 86px; border-radius: 10px; background: var(--color-surface); margin-bottom: 14px; overflow: hidden; }
.sk2-card-title { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.3; height: 1.3em; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk2-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.5; height: 4.5em; margin-top: 6px; color: var(--color-text-subtle); }
.sk2-who { display: block; margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 10px; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-olive); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* card visuals */
.sk2-v-news i { position: absolute; left: 12px; height: 7px; border-radius: 4px; background: var(--color-text-subtle); opacity: .35; animation: sk2-grow 3s ease-in-out infinite; }
.sk2-v-news i:nth-child(1) { top: 14px; width: 50%; background: var(--sk-viz); opacity: 1; }
.sk2-v-news i:nth-child(2) { top: 32px; animation-delay: .3s; }
.sk2-v-news i:nth-child(3) { top: 46px; animation-delay: .6s; }
.sk2-v-news i:nth-child(4) { top: 60px; animation-delay: .9s; }
@keyframes sk2-grow { 0% { width: 0; } 40%, 100% { width: 72%; } }
.sk2-v-res::before { content: ""; position: absolute; left: 12px; right: 12px; top: 43px; height: 2px; background: var(--color-text-subtle); opacity: .3; }
.sk2-v-res i { position: absolute; top: 37px; width: 14px; height: 14px; border-radius: 50%; background: var(--sk-viz); transform: scale(0); animation: sk2-pop 3s infinite; }
.sk2-v-res i:nth-child(1) { left: 14%; }
.sk2-v-res i:nth-child(2) { left: 38%; animation-delay: .4s; }
.sk2-v-res i:nth-child(3) { left: 62%; animation-delay: .8s; }
.sk2-v-res i:nth-child(4) { left: 84%; animation-delay: 1.2s; background: var(--syn-lime); }
@keyframes sk2-pop { 0% { transform: scale(0); } 20%, 100% { transform: scale(1); } }
.sk2-v-pod { display: flex; align-items: center; justify-content: center; gap: 4px; }
.sk2-v-pod i { width: 4px; height: 8px; border-radius: 2px; background: var(--sk-viz); animation: sk2-wv 1.1s ease-in-out infinite; }
.sk2-v-pod i:nth-child(2n) { animation-delay: .16s; }
.sk2-v-pod i:nth-child(3n) { animation-delay: .32s; }
.sk2-v-pod i:nth-child(5n) { animation-delay: .48s; }
.sk2-v-rad::before { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sk-viz) 70%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--sk-viz) 80%, transparent) 0 2px, transparent 2.5px 15px, color-mix(in srgb, var(--sk-viz) 45%, transparent) 15.5px 16.5px, transparent 17px); }
.sk2-v-rad::after { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--sk-viz) 75%, transparent), transparent 70deg); animation: sk2-spin 3s linear infinite; }
@keyframes sk2-spin { to { transform: rotate(360deg); } }
.sk2-v-rad i { position: absolute; z-index: 1; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--syn-lime); animation: sk2-dot 3s infinite; }
.sk2-v-rad i:nth-child(1) { left: calc(50% + 14px); top: calc(50% - 16px); }
.sk2-v-rad i:nth-child(2) { left: calc(50% - 18px); top: calc(50% + 10px); animation-delay: 1.4s; }
@keyframes sk2-dot { 0%, 60% { opacity: 0; } 70%, 90% { opacity: 1; } 100% { opacity: 0; } }
.sk2-v-the { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-bottom: 14px; }
.sk2-v-the i { width: 16px; border-radius: 4px 4px 0 0; background: var(--sk-viz); animation: sk2-bar 3s ease-in-out infinite; }
.sk2-v-the i:nth-child(1) { --h: 30px; }
.sk2-v-the i:nth-child(2) { --h: 48px; animation-delay: .2s; }
.sk2-v-the i:nth-child(3) { --h: 22px; animation-delay: .4s; }
.sk2-v-the i:nth-child(4) { --h: 62px; animation-delay: .6s; background: var(--syn-lime); }
@keyframes sk2-bar { 0% { height: 4px; } 35%, 100% { height: var(--h); } }

/* install */
.sk2-live { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; margin-top: 36px; align-items: stretch; }
.sk2-groups { display: flex; flex-direction: column; gap: 8px; }
.sk2-g { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; text-align: left; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface-raised); cursor: pointer; font-family: var(--font-display); font-size: 16px; color: var(--color-text); transition: background .2s, color .2s; }
.sk2-g span { white-space: nowrap; }
.sk2-g small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--color-text-subtle); white-space: nowrap; }
.sk2-g.on { background: var(--syn-panel); color: var(--syn-on-dark); border-color: var(--syn-panel); }
.sk2-g.on small { color: #9fb0a6; }
:root[data-theme="dark"] .sk2-g.on { border-color: rgba(255, 255, 255, .14); }
.sk2-install { display: flex; flex-direction: column; justify-content: center; min-height: 360px; background: var(--syn-panel); color: #e8efe9; border: 1px solid var(--color-border); border-radius: 18px; padding: 32px; }
:root[data-theme="dark"] .sk2-install { border-color: rgba(255, 255, 255, .12); }
.sk2-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--syn-lime); }
.sk2-install .sk2-panel-title { font-size: 24px; font-weight: 500; color: #fff; margin: 10px 0 6px; }
.sk2-panel-text { color: #a9b7af; font-size: 15px; line-height: 1.6; max-width: 560px; margin: 0; }
.sk2-cmd { display: flex; align-items: center; gap: 12px; margin-top: 20px; background: #0b100e; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 16px 18px; font-family: var(--font-mono); font-size: 14px; color: #e8efe9; }
.sk2-cmd code { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; background: none; color: inherit; padding: 0; font: inherit; }
/* site-uplift.css styles every pre/code on small screens (light background, border); these sit on dark panels */
/* Its selector ties ours at (0,3,2) and loads later, so ours carries one more class. */
body:not(.login-page) .sk2 .sk2-install .sk2-cmd code { background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit !important; }
.sk2-copy { min-height: 40px; background: var(--syn-lime); color: var(--syn-lime-ink); border: 0; border-radius: 6px; padding: 9px 14px; font-family: var(--font-display); font-weight: 600; cursor: pointer; white-space: nowrap; }
.sk2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sk2-chips span { font-size: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; padding: 5px 11px; color: #cfd9d3; }
.sk2-panel-link { margin-top: 18px; font-size: 14px; color: #cfd9d3; }
.sk2-fade { animation: sk2-fd .35s ease; }
@keyframes sk2-fd { from { opacity: 0; transform: translateY(6px); } }

/* trust boxes: subgrid so titles and text start on the same lines */
.sk2-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 16px; margin-top: 30px; }
.sk2-trust > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; border: 1px solid var(--color-border); border-radius: 14px; padding: 22px; background: var(--color-surface-raised); }
.sk2-trust b { display: block; color: var(--color-text); font-family: var(--font-display); font-size: 17px; line-height: 1.3; font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk2-trust span { display: block; line-height: 1.55; }

/* responsive (mockup breakpoints) */
@media (min-width: 901px) and (max-width: 1180px) {
  .sk2-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 4px 4px 16px; scrollbar-width: none; }
  .sk2-cards::-webkit-scrollbar { display: none; }
  .sk2-card { flex: 0 0 30%; scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .sk2-hero { padding: 22px 0 10px; }
  .sk2-sub { font-size: 17px; }
  .sk2-bar { font-size: 13px; padding: 14px 14px 14px 16px; margin-top: 24px; }
  .sk2-artifact { padding: 18px; }
  .sk2-art-title { font-size: 18px; }
  .sk2-row { font-size: 14px; }
  .sk2-section { padding: 48px 0; }
  .sk2-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 14px; scrollbar-width: none; }
  .sk2-cards::-webkit-scrollbar { display: none; }
  .sk2-card { flex: 0 0 44%; scroll-snap-align: start; }
  .sk2-live { grid-template-columns: minmax(0, 1fr); }
  .sk2-groups { flex-direction: row; overflow-x: auto; padding: 0 0 6px; scrollbar-width: none; }
  .sk2-groups::-webkit-scrollbar { display: none; }
  .sk2-g { flex: 0 0 auto; padding: 10px 15px; border-radius: 99px; font-size: 14px; }
  .sk2-g small { display: none; }
  .sk2-install { padding: 22px; min-height: 0; }
  .sk2-install .sk2-panel-title { font-size: 20px; }
  .sk2-cmd { flex-direction: column; align-items: stretch; }
  .sk2-copy { padding: 12px; }
}
@media (max-width: 767px) {
  .sk2-typed { white-space: normal; overflow: visible; }
  .sk2-bar { align-items: flex-start; }
  .sk2-bar .sk2-caret { margin-top: 2px; }
}
@media (max-width: 599px) {
  .sk2-card { flex-basis: 78%; }
  .sk2-cta { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
  .sk2-trust { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .sk2-trust > div { grid-row: auto; grid-template-rows: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sk2 *, .sk2 *::before, .sk2 *::after { animation: none !important; transition: none !important; }
}

/* hero: copy left, live animation right on desktop, like Studio and Coverage (2026-10-25) */
@media (min-width: 1024px) {
  .sk2-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; text-align: left; padding: 56px 0 40px; }
  .sk2-hero::before { inset: 0 0 auto 40%; height: 100%; }
  .sk2-h1 { font-size: clamp(44px, 4.6vw, 76px); margin: 20px 0 18px; max-width: 12ch; }
  .sk2-sub { margin: 0; max-width: 34rem; }
  .sk2-cta { justify-content: flex-start; }
  .sk2-bar { margin: 0; max-width: none; }
  .sk2-artifact { max-width: none; margin: 4px 0 0; }
}

/* hero left-aligned at every width, like Studio and Coverage (2026-10-26) */
.sk2-hero { text-align: left; }
.sk2-h1 { margin-left: 0; margin-right: 0; }
.sk2-sub { margin: 0; }
.sk2-cta { justify-content: flex-start; }
.sk2-bar, .sk2-artifact { margin-left: 0; margin-right: 0; }
@media (max-width: 599px) {
  .sk2-cta { margin-left: 0; margin-right: 0; }
}
/* phrase shown after Copy the phrase, same look as the homepage */
.sk2-reveal { max-width: 46ch; margin-top: 16px; text-align: left; }
.sk2-reveal[hidden] { display: none; }
.sk2-reveal-text { margin: 0; padding: .8rem 1rem; border: 1px dashed var(--color-border); border-radius: 3px; font-family: var(--font-mono); font-size: .82rem; line-height: 1.5; color: var(--color-text); user-select: all; }
.sk2-reveal-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--color-text-muted); }
/* steady hero: nothing moves while the skills rotate (2026-10-26) */
.sk2-hero { align-items: start; }
.sk2-h1 { min-height: calc(3 * 1.02em); }
.sk2-artifact { min-height: var(--sk2-art-h, 360px); }
/* Beacon drawn as the site's lime dot with pulsing rings (homepage 'Watch' glyph), no label */
.sk2-flow { height: 92px; margin-top: 12px; }
.sk2-node { position: relative; width: 1rem; height: 1rem; margin: 14px 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; flex: 0 0 auto; opacity: .35; }
.sk2-node.on { opacity: 1; background: none; border: 0; box-shadow: none; }
.sk2-node i { position: absolute; inset: 0; border-radius: 50%; }
.sk2-core { background: var(--sk-olive); }
.sk2-ring { border: 1.5px solid var(--sk-olive); opacity: 0; }
.sk2-node.on .sk2-ring { animation: sk2-ping 2.6s ease-out infinite; }
.sk2-node.on .sk2-ring.b { animation-delay: 1.3s; }
@keyframes sk2-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.6); opacity: 0; } }
.sk2-wire { height: 30px; }
@media (max-width: 900px) {
  .sk2-artifact { min-height: var(--sk2-art-h-narrow, 410px); }
}
@media (max-width: 767px) {
  .sk2-typed { line-height: 1.45; min-height: calc(3 * 1.45em); }
}
.sk2-free { margin: 18px 0 0; font-size: 15px; color: var(--color-text-muted); }