.stencil-page { --service-accent: #165749; --service-soft: #e6f2eb; --service-text: #233e3b; background: #fff; }
.stencil-page [hidden] { display: none !important; }
.service-title { padding-block: 12px 24px; }
.service-title h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.18; }
.service-title p { margin: 0; max-width: 78ch; color: #516763; font-size: 15px; }
.service-title .stencil-facts { margin: 14px 0 0; }
.stencil-page .stencil-catalog-intro h1 { font-size: 36px; }
.stencil-page .stencil-filters { gap: 12px; padding-block: 20px; scroll-margin-top: 100px; }
.stencil-filters .stencil-search { flex: 2 1 280px; }
.stencil-filters label { flex: 1 1 160px; }
.stencil-page .stencil-card-image { height: 236px; background: #f4f6f3; }
.stencil-page .stencil-card-image--demo { background: #fff; padding: 12px; }
.stencil-page .stencil-card h2 { font-size: 18px; min-height: 46px; text-wrap: initial; }
.stencil-page .stencil-card p { margin-bottom: 12px; }
.stencil-page .stencil-card h2 a { color: var(--service-text); }
.stencil-page .stencil-card h2 a:hover { text-decoration: underline; }
.service-results { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.service-viewer-filter { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #435c56; cursor: pointer; }
.service-viewer-filter input { width: 18px; height: 18px; accent-color: var(--service-accent); }
.service-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 32px; }
.service-pagination span { min-width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
.service-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; border-block: 1px solid var(--line); }
.service-main { min-width: 0; padding-block: 16px 22px; scroll-margin-top: 100px; }
.service-sidebar { min-width: 0; border-left: 1px solid var(--line); padding: 26px 0 24px 24px; }
.service-tabs { display: flex; gap: 22px; min-height: 44px; border-bottom: 1px solid var(--line); }
.service-tabs button { display: inline-flex; align-items: center; padding: 10px 0; color: #546963; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 14px; font-weight: 700; border-radius: 0; }
.service-tabs button[aria-pressed=true] { color: var(--service-accent); border-bottom-color: var(--service-accent); }
.service-tabs button:hover { color: var(--ink-deep); }
.service-stage { position: relative; width: 100%; height: 500px; background: #fff; }
.service-stage > img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.service-scene { position: absolute; inset: 0; overflow: hidden; }
.service-scene canvas { display: block; width: 100%; height: 100%; touch-action: pan-y pinch-zoom; }
.service-scene canvas:focus-visible { outline: 3px solid var(--coral); outline-offset: -4px; }
.service-scene .model-labels { display: none; }
.service-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #ffffffed; color: var(--service-text); font-size: 15px; }
.service-stage-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 32px; }
.service-stage-footer p, .service-stage-footer a { margin: 0; color: #536b63; font-size: 13px; line-height: 1.5; }
.service-stage-footer a { text-align: right; }
.service-sheet-nav, .service-controls { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; }
.service-sheet-nav label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.service-sheet-nav select { min-height: 44px; max-width: 140px; background: white; border: 1px solid var(--line); border-radius: 4px; color: var(--service-text); padding: 8px 12px; }
.service-icon { display: inline-flex; align-items: center; justify-content: center; height: 44px; width: 44px; flex: 0 0 44px; background: white; border: 1px solid #b9cbc3; border-radius: 6px; color: var(--service-text); cursor: pointer; position: relative; }
.service-icon:hover:not(:disabled) { background: var(--service-soft); }
.service-icon:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--ink-deep); color: white; padding: 5px 9px; border-radius: 4px; white-space: nowrap; font-size: 12px; z-index: 3; pointer-events: none; }
.service-icon:disabled { opacity: .4; cursor: default; }
.service-icon[data-service-play] { color: white; background: var(--service-accent); border-color: var(--service-accent); }
.service-icon[data-service-play]:hover { background: var(--ink-deep); }
.service-poses { display: flex; border: 1px solid #b9cbc3; border-radius: 6px; padding: 3px; }
.service-poses button { min-height: 36px; border: 0; border-radius: 3px; background: transparent; color: var(--service-text); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.service-poses button[aria-pressed=true] { background: var(--service-soft); }
.service-progress { display: flex; align-items: center; gap: 10px; flex: 1; font-size: 13px; }
.service-progress input { min-width: 40px; width: 100%; height: 36px; accent-color: var(--service-accent); }
.service-progress output { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.service-download h2 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.service-download p { margin: 0 0 16px; font-size: 13px; color: #536b63; }
.service-download .button { display: flex; gap: 10px; min-height: 48px; width: 100%; border-radius: 6px; font-size: 15px; padding: 12px 14px; }
.service-download > a:last-child { display: inline-block; margin-top: 12px; font-size: 13px; }
.service-model-options { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.service-model-options > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.service-model-options select { max-width: 100%; width: 100%; border: 1px solid #9eafa7; border-radius: 4px; background: white; color: var(--service-text); min-height: 44px; font-size: 14px; padding: 9px 28px 9px 10px; text-overflow: ellipsis; }
.service-model-note { color: #536b63; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.service-start { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 8px; min-height: 46px; background: var(--service-accent); color: white; border: 1px solid var(--service-accent); border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; }
.service-start:hover { background: var(--ink-deep); }
.service-start:disabled { opacity: .6; cursor: wait; }
.service-parts-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.service-parts-heading h3 { font-size: 15px; margin: 0; }
.service-parts-heading button { min-height: 40px; background: transparent; border: 0; color: var(--service-accent); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 8px; }
.service-parts { overflow-y: auto; max-height: 250px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a6bdb0 #f3f7f3; }
.service-parts button { display: grid; gap: 3px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--service-text); padding: 10px 8px; font-size: 13px; line-height: 1.4; cursor: pointer; border-radius: 0; }
.service-parts button:hover, .service-parts button[aria-pressed=true] { background: var(--service-soft); }
.service-parts button small { font-size: 11px; color: #536b63; }
[data-service-part-download] { display: inline-block; padding-block: 10px; font-size: 13px; }
.service-print { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; }
.service-print summary { font-weight: 700; cursor: pointer; padding-block: 4px; }
.service-print p { font-size: 13px; color: #536b63; }
.service-error { color: #943326; font-size: 14px; padding-block: 12px; margin: 0; }
.service-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-block: 48px; }
.service-guide h2 { margin: 0 0 24px; font-size: 24px; }
.service-guide ol { padding-left: 22px; margin: 0; }
.service-guide li { padding-left: 6px; margin-bottom: 22px; }
.service-guide h3 { margin: 0 0 6px; font-size: 16px; }
.service-guide p { font-size: 15px; line-height: 1.65; margin: 0; color: #425c55; }
.service-page-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-height: 460px; overflow-y: auto; scrollbar-width: thin; }
.service-page-list a { display: grid; align-content: start; gap: 8px; text-decoration: none; color: #425c55; font-size: 12px; }
.service-page-list img { width: 100%; height: 176px; object-fit: contain; background: #f4f6f3; }
.service-connections { margin-top: 32px; }
.service-connections ul { padding-left: 18px; max-height: 260px; overflow-y: auto; font-size: 14px; line-height: 1.5; }
.service-connections li { margin-bottom: 10px; }
@media (max-width: 1050px) {
  .service-workspace { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  .service-sidebar { padding-left: 20px; }
  .service-controls { flex-wrap: wrap; }
  .service-progress { flex-basis: 100%; }
  .service-guide { gap: 32px; }
}
@media (max-width: 760px) {
  .service-title { padding-block: 8px 20px; }
  .service-title h1 { font-size: 26px; }
  .stencil-page .stencil-catalog-intro h1 { font-size: 30px; }
  .stencil-page .stencil-card-image { height: 174px; padding: 8px; }
  .stencil-page .stencil-card h2 { font-size: 16px; min-height: 42px; }
  .service-results { align-items: start; flex-direction: column; gap: 0; padding-bottom: 18px; }
  .service-results .stencil-results { margin: 18px 0 10px; }
  .service-workspace { grid-template-columns: 1fr; gap: 0; }
  .service-main { padding-bottom: 14px; }
  .service-tabs { gap: 16px; }
  .service-tabs button { font-size: 12px; padding-block: 12px; }
  .service-stage { height: 350px; }
  .service-stage > img { padding: 12px; }
  .service-sidebar { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0; }
  .service-download { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .service-download h2 { grid-column: 1 / -1; }
  .service-download p { grid-column: 1 / -1; }
  .service-download > a:last-child { margin: 0; }
  .service-model-options { margin-top: 20px; }
  .service-guide { grid-template-columns: 1fr; gap: 36px; padding-block: 32px; }
  .service-guide h2 { font-size: 22px; }
  .service-stage-footer { flex-wrap: wrap; }
  .service-stage-footer a { text-align: left; }
  .service-icon:hover::after { display: none; }
  .service-page-list img { height: 140px; }
}
@media (max-width: 374px) {
  .service-stage { height: 300px; }
  .service-tabs { gap: 12px; }
  .service-tabs button { font-size: 11px; }
  .stencil-page .stencil-card-image { height: 250px; }
  .service-title h1 { font-size: 24px; }
}
