/* A working product example sits within the existing living ontology. */
.hero-lede{max-width:655px}
.hero-demo-note{font-size:11px;color:var(--muted);margin:15px auto 0;width:fit-content;max-width:100%;line-height:1.7}
.product-demo{position:relative;z-index:4;padding-block:84px 110px}
.anchor-target{position:absolute;top:0;scroll-margin-top:105px}
.demo-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:40px}
.demo-heading h2{font-size:clamp(37px,4.4vw,62px);font-weight:800;line-height:1.1}
.demo-heading>p{max-width:420px;font-size:14px;line-height:1.85;color:var(--muted)}
.demo-heading .chapter-label{margin-bottom:17px}
.demo-workspace{background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 28px;border-bottom:1px solid var(--line);font-size:11px}
.demo-toolbar>span:first-child{font-weight:600}
.demo-toolbar>span:last-child{color:var(--muted);font-size:10px}
.demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.demo-tabs button{display:flex;align-items:center;gap:16px;padding:24px 28px;border:0;border-right:1px solid var(--line);background:transparent;text-align:left;position:relative;min-width:0}
.demo-tabs button:last-child{border-right:0}
.demo-tabs button:hover{background:#f0f0e9}
.demo-tabs button[aria-selected=true]{background:var(--accent-soft)}
.demo-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--red)}
.demo-step-number{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.demo-tabs button[aria-selected=true] .demo-step-number{color:var(--red)}
.demo-tabs strong{display:block;font-size:18px;font-weight:600;line-height:1.4}
.demo-tabs small{display:block;margin-top:3px;font-size:11px;color:var(--muted);line-height:1.5}
.demo-tabs button:focus-visible{outline-offset:-5px}
.demo-panel{padding:28px 32px;min-height:510px;display:flex;flex-direction:column;gap:28px}
.demo-type-picker{display:flex;flex-wrap:wrap;gap:8px 24px;border-bottom:1px solid var(--line);padding-bottom:22px}
.demo-type-picker button{display:flex;gap:8px;align-items:center;border:0;background:transparent;min-height:44px;padding:6px 0;font-size:12px;color:var(--muted)}
.demo-type-picker img{flex-shrink:0}
.demo-type-picker button[aria-pressed=true]{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.demo-type-picker button:hover{color:var(--ink)}
.type-definition{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,100px);flex:1;padding-block:4px 20px}
.demo-overline{display:block;color:var(--muted);font-size:10px;line-height:1.7;margin-bottom:9px}
.type-definition h3{font-size:34px;line-height:1.2;letter-spacing:-.03em;font-weight:800;margin-bottom:18px}
.type-definition-copy>p{font-size:14px;line-height:1.85;max-width:430px}
.type-definition-copy>.demo-model-note{font-size:12px;color:var(--muted);margin-top:24px;max-width:370px}
.property-heading,.type-properties dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.property-heading{font-size:10px;color:var(--muted);padding-bottom:13px;border-bottom:1px solid var(--line)}
.type-properties dl{margin:0}
.type-properties dl>div{padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
.type-properties dt{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.type-properties dd{margin:0;font-size:11px;color:var(--muted);text-align:right}
.demo-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:10px;margin-top:auto;font-size:11px;color:var(--muted)}
.demo-panel-foot .text-link{border:0;border-bottom:1px solid var(--accent-border);background:none;margin:0;padding:0;font-size:12px;flex-shrink:0}
.mapping-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mapping-heading strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;font-weight:400;overflow-wrap:anywhere}
.mapping-heading>span{font-size:11px;color:var(--muted)}
.mapping-heading .demo-overline{margin-bottom:4px}
.mapping-table{width:100%;border-collapse:collapse;table-layout:fixed}
.mapping-table th{text-align:left;font-weight:400;font-size:10px;color:var(--muted);padding-bottom:12px}
.mapping-table th:first-child{width:34%}.mapping-table th:nth-child(2){width:43%}
.mapping-table td{padding:13px 12px 13px 0;border-top:1px solid var(--line);font-size:12px;vertical-align:top}
.mapping-table code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.mapping-table td:nth-child(2){color:var(--red)}
.mapping-table td:last-child{color:var(--muted);padding-right:0}
.mapping-arrow{margin-right:14px;color:var(--red)}
.mapping-relation{border-left:2px solid var(--tomato);padding-left:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mapping-relation strong{font-weight:600;font-size:13px}.mapping-relation code{font-size:11px;overflow-wrap:anywhere;color:var(--muted)}
.mapping-relation .demo-overline{margin-bottom:4px}
.demo-use-panel .answer-workspace{margin:0;border:0;border-radius:0;min-height:540px}
.demo-use-panel .answer-context{padding:30px}
.demo-use-panel .answer-question{font-size:21px;line-height:1.55;margin-top:15px}
.demo-use-panel .definition-control{margin-top:28px}
.demo-use-panel .definition-control select{font-size:12px}
.demo-use-panel .definition-control>p{min-height:0;font-size:11px}
.demo-use-panel .definition-invite{font-size:11px;line-height:1.7;margin-top:15px}
.demo-footnote{color:var(--muted);font-size:11px;line-height:1.8;max-width:850px;margin-top:18px}
.evidence-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:55px;border-top:1px solid var(--line);padding-top:28px}
.evidence-principles h3{font-size:20px;letter-spacing:-.02em;margin-bottom:15px}
.evidence-principles p{font-size:13px;color:var(--muted);line-height:1.85;max-width:340px}
.evidence-principles .text-link{font-size:11px;margin-top:17px}
.integration-label{font-size:11px;color:var(--muted);margin-top:25px}
.integration-label+.stack-tags{margin-top:12px}
.release-facts{margin:0;border-top:1px solid var(--line)}
.release-facts>div{padding-block:23px;border-bottom:1px solid var(--line)}
.release-facts dt{font-size:12px;font-weight:600;color:var(--green);margin-bottom:8px}
.release-facts dd{margin:0;font-size:13px;line-height:1.85;color:var(--muted);max-width:480px}
.rules-chapter .chapter-copy>.rule-current{font-size:11px;color:var(--muted);margin-top:25px}.rule-current strong{font-weight:600;color:var(--ink)}
@media(max-width:1000px){
  .demo-heading{gap:40px}.demo-tabs button{padding:21px 22px;gap:12px}.demo-panel{padding-inline:25px}
  .demo-use-panel .answer-workspace{grid-template-columns:1fr 1.4fr}.demo-use-panel .answer-context{padding:25px}
  .demo-use-panel .answer-question{font-size:19px}.demo-use-panel .answer-tabs{gap:15px}.demo-use-panel .answer-tabs button{font-size:10px}
  .evidence-principles{gap:28px}.mapping-arrow{margin-right:7px}
}
@media(max-width:760px){
  .hero-demo-note{font-size:10px;max-width:310px;margin-top:13px}
  .product-demo{padding-block:65px 70px}.demo-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}
  .demo-heading h2{font-size:clamp(36px,8vw,52px)}.demo-heading>p{font-size:13px;max-width:500px}
  .demo-toolbar{padding:15px 19px;gap:8px;flex-wrap:wrap}.demo-toolbar>span:last-child{font-size:9px}
  .demo-tabs button{padding:18px 15px;gap:8px}.demo-tabs strong{font-size:16px}.demo-tabs small{font-size:9px}.demo-step-number{font-size:10px}
  .demo-panel{padding:21px;gap:24px;min-height:570px}.demo-type-picker{gap:3px 19px;padding-bottom:16px}.demo-type-picker button{font-size:11px}
  .type-definition{grid-template-columns:1fr;gap:26px;padding-bottom:0}.type-definition h3{font-size:29px;margin-bottom:12px}
  .type-definition-copy>p{font-size:13px}.type-definition-copy>.demo-model-note{margin-top:14px;font-size:11px}
  .type-properties dl>div{padding-block:13px;font-size:12px}
  .demo-panel-foot{align-items:flex-start;flex-direction:column;gap:9px;font-size:10px}.demo-panel-foot .text-link{font-size:11px}
  .mapping-heading strong{font-size:13px}.mapping-heading>span{font-size:10px;white-space:nowrap}.mapping-table th{font-size:9px}
  .mapping-table td{font-size:11px;padding-right:8px}.mapping-arrow{display:none}
  .mapping-relation{flex-direction:column;align-items:flex-start;gap:10px}.mapping-relation strong{font-size:12px}
  .demo-use-panel .answer-workspace{display:block;min-height:0}.demo-use-panel .answer-context{padding:25px 21px}.demo-use-panel .answer-question{max-width:500px;font-size:20px}
  .demo-use-panel .definition-control{max-width:420px;margin-top:22px}.demo-use-panel .definition-control>p{max-width:420px}
  .demo-use-panel .answer-output{padding-inline:21px}.demo-use-panel .answer-tabs{gap:12px}.demo-footnote{font-size:10px}
  .evidence-principles{grid-template-columns:1fr;gap:27px;margin-top:30px;padding-top:24px}.evidence-principles p{max-width:480px}.evidence-principles h3{font-size:19px;margin-bottom:8px}
  .evidence-principles article+article{border-top:1px solid var(--line);padding-top:24px}.evidence-principles .text-link{margin-top:12px}
  .release-facts dd{font-size:12px}
}
@media(max-width:480px){
  .demo-tabs small{display:none}.demo-tabs button{padding:19px 12px}.demo-tabs strong{font-size:14px}
  .demo-panel{padding:19px 16px}.demo-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}.demo-type-picker button{font-size:11px}
  .mapping-table td{font-size:10px}.mapping-heading{gap:10px}.mapping-relation code{font-size:10px}
  .demo-use-panel .answer-tabs button{font-size:9px}.demo-use-panel .answer-context,.demo-use-panel .answer-output{padding-inline:16px}
}

/* A compact entry to the dedicated setup guide; Try stays the primary action. */
.hero-actions .hero-get-started{border:1px solid var(--accent-border);background:var(--bg);color:var(--accent);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.hero-actions .hero-get-started:hover{background:var(--accent-soft);border-color:var(--accent)}}
@media(max-width:760px){.hero-actions{flex-wrap:wrap;column-gap:14px;row-gap:8px}.hero-actions>.button-quiet{flex-basis:100%;min-height:40px}.hero-actions>.button-primary,.hero-actions>.hero-get-started{font-size:11px;min-height:46px}}