:root{--ar:#0e8a72}html{scroll-behavior:smooth}
.p-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-top: 56px; }
.p-hero .crumbs { justify-content: flex-start; margin: 0 0 18px; }
.p-hero .h-lg { margin: 0; }
.p-hero .lead { margin: 16px 0 0; max-width: 560px; }
.p-art { display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 16px; }
.p-art svg { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.p-art text { font-family: var(--ss-font); }
.v-deep { background: var(--ss-deep); --ar: var(--ss-spring); } .v-sea { background: var(--ss-sea); --ar: #fff; } .v-mint { background: var(--ss-mint); --ar: #0e8a72; }
.d-a, .d-b { transform-box: fill-box; transform-origin: center; transition: translate .35s var(--ss-ease-out), rotate .35s var(--ss-ease-out); }
.p-art:hover .d-a { translate: 0 -5px; rotate: -1.5deg; }
.p-art:hover .d-b { translate: 0 4px; rotate: 1.5deg; }
.p-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 72px; align-items: start; padding-top: 72px; }
.p-body .prose { max-width: none; margin: 0; color: var(--ss-charcoal); font-size: 17px; line-height: 1.7; }
.p-body .prose > p, .p-sec > p, .p-sec > ul, .p-sec > ol { margin: 0 0 18px; }
.p-sec { scroll-margin-top: 88px; }
.p-sec h2 { margin: 0 0 16px; color: var(--ss-obsidian); font-family: var(--ss-font-heading); font-size: clamp(26px, 2.4vw, 32px); font-weight: 550; line-height: 1.15; letter-spacing: -.02em !important; }
.p-sec ul, .p-sec ol { padding-left: 22px; }
.p-sec li { margin: 8px 0; padding-left: 4px; }
.prose code { padding: 1px 6px; border: 0; border-radius: 5px; background: #eff4f2; color: var(--ss-obsidian); font-family: var(--ss-font); font-size: .9em; }
.prose .ed-code code { padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
.prose .ed { margin: 22px 0; box-shadow: var(--ss-ring-line); }
.prose .cs { color: var(--ss-ide-str); }
.prose a { color: var(--ss-sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--ss-deep); }
.p-panel { padding: 28px 28px 12px; border-radius: 16px; background: var(--ss-mint); }
.p-panel h2 { color: var(--ss-deep); }
.p-panel code { background: #fff; }
.p-panel + .p-panel { margin-top: 16px; }
.p-next { padding: 28px 28px 12px; border-radius: 16px; background: #fff; box-shadow: var(--ss-ring-line); }
.p-toc { position: sticky; top: 88px; padding-top: 40px; }
.p-toc p { margin: 0 0 12px; color: var(--ss-obsidian); font-size: var(--ss-t-small); font-weight: 500; }
.p-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ss-hairline); }
.p-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ss-charcoal); font-size: var(--ss-t-small); line-height: 1.35; text-decoration: none; transition: color var(--ss-fast) var(--ss-ease-out); }
.p-toc a:hover { color: var(--ss-obsidian); }
.p-toc a.on { border-left-color: var(--ss-sea); color: var(--ss-sea); font-weight: 500; }
.p-more { padding-top: 88px; }
.p-more .h-section { margin: 0 0 28px; }
.p-rel { display: flex; flex-wrap: wrap; gap: 12px; }
.p-rel .card { flex: 1 1 30%; min-width: 0; margin: 0; transition: translate var(--ss-fast) var(--ss-ease-out), box-shadow var(--ss-fast) var(--ss-ease-out); }
.p-rel .card:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--ss-sea); }
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.p-split .h-section { margin: 0; }
.p-body { grid-template-columns: minmax(0, 720px) 240px; justify-content: space-between; gap: 48px; }
.p-body .prose > p:first-child { color: var(--ss-obsidian); font-size: 20px; line-height: 1.55; }
.p-sec { margin-top: 48px; padding-top: 48px; box-shadow: 0 -1px 0 var(--ss-hairline); }
.p-sec.p-panel { margin-top: 40px; padding-top: 28px; box-shadow: none; }
.p-sec.p-next { margin-top: 16px; padding-top: 28px; box-shadow: var(--ss-ring-line); }
.p-panel + .p-panel { margin-top: 16px; }
.p-cta + .p-sec { box-shadow: none; padding-top: 0; }
.p-rows { margin: 0 0 22px; padding: 0; border-top: 1px solid var(--ss-hairline); }
.p-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ss-hairline); }
.p-row dt { margin: 0; overflow-wrap: anywhere; line-height: 1.75; }
.p-row dd { margin: 0; line-height: 1.6; }
.p-panel .p-rows, .p-panel .p-row { border-color: #cfe6dd; }
.p-note { margin: 22px 0; padding: 18px 20px 2px; border-radius: 8px; background: #eff4f2; }
.p-note p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; }
.p-note code { background: #fff; }
.p-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; margin: 48px 0; padding: 26px 28px; border-radius: 16px; background: var(--ss-deep); }
.p-cta h2 { grid-column: 1; margin: 0; color: #fff; font-family: var(--ss-font-heading); font-size: 24px; font-weight: 550; line-height: 1.2; letter-spacing: -.02em; }
.p-cta p { grid-column: 1; margin: 6px 0 0; color: var(--ss-mint); font-size: 15px; line-height: 1.5; }
.p-cta .btn { grid-column: 2; grid-row: 1 / span 2; }
.prose a.btn, .prose a.btn:hover { color: var(--ss-deep); text-decoration: none; }
.p-side { margin-top: 24px; padding: 18px; border-radius: 12px; background: var(--ss-mint); }
.p-toc .p-side p { margin: 0 0 12px; color: var(--ss-deep); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
.p-side .btn { display: flex; justify-content: center; width: 100%; padding: 8px 0; color: var(--ss-deep); text-decoration: none; }
@media (max-width: 640px) {
  .p-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .p-cta { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .p-cta .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
  .p-body .prose > p:first-child { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .d-a, .d-b, .p-rel .card { transition: none; } .p-art:hover .d-a, .p-art:hover .d-b, .p-rel .card:hover { translate: none; rotate: none; } }
@media (max-width: 1000px) {
  .p-body { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
  .p-toc { display: none; }
}
@media (max-width: 800px) {
  .p-hero, .p-split { grid-template-columns: minmax(0, 1fr); }
  .p-hero { gap: 28px; padding-top: 36px; }
  .p-split { gap: 20px; }
  .p-rel .card { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .p-body .prose { font-size: 16px; }
  .p-sec.p-panel, .p-sec.p-next { padding: 22px 20px 8px; }
  .p-more { padding-top: 64px; }
}