/* OPC Tools page. Ported from Figma Make OPCToolsPage.tsx (OPC_TOOLS_CSS), kept in px as in the design.
   Changes: section content width matches the top nav (1440px + 32px gutters); the section navigator
   (OTXSideNav) shows from 1280px up, as Figma's .ot-sidebar does. */
.ot-page [hidden]{display:none!important}
.ot-page h1,.ot-page h2,.ot-page h3{font-family:inherit;color:inherit}
.ot-page{--ot-blue:#003e7e;--ot-green:#008265;--ot-ink:#10365b;--ot-muted:#52677b;background:white;color:var(--ot-ink);font-family:inherit;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
.ot-page,.ot-page *{box-sizing:border-box}
.ot-page h1,.ot-page h2,.ot-page h3,.ot-page p,.ot-page figure{margin:0}
.ot-page h2{font-size:clamp(30px,3vw,42px);line-height:1.18;font-weight:750;letter-spacing:-.7px}
.ot-page h3{font-size:21px;font-weight:700;line-height:1.35}
.ot-page button,.ot-page input{font:inherit}
.ot-page button{cursor:pointer}
.ot-page button:disabled{cursor:default}
.ot-page a{color:inherit}
.ot-page a:focus-visible,.ot-page button:focus-visible,.ot-page summary:focus-visible,.ot-page [role=tabpanel]:focus-visible{outline:3px solid #0077bf;outline-offset:4px}
.ot-page section[id]{scroll-margin-top:96px}
.ot-wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:32px}
.ot-section{padding:64px 0}
.ot-soft{background:#f4f7fa;border-block:1px solid #e3eaf0}
.ot-section-title{max-width:850px;margin:0 auto 36px;text-align:center}
.ot-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#0077bf}
.ot-section-title h2{margin-top:12px}
.ot-section-title p{font-size:18px;line-height:1.75;color:var(--ot-muted);margin-top:16px}
.ot-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.ot-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border:0;border-radius:8px;padding:12px 22px;text-decoration:none;font-size:16px;font-weight:700;line-height:1.5;text-align:center;transition:background .2s,box-shadow .2s}
.ot-button:hover{box-shadow:0 5px 20px #003e7e22}
.ot-button svg{flex:none}
.ot-button-cream{background:#fafbf5;color:#003e7e!important}
.ot-button-cream:hover{background:#eaf4fa}
.ot-button-outline{background:transparent;border:1px solid #ffffff80;color:white!important}
.ot-button-outline:hover{background:#ffffff15}
.ot-button-blue{background:#003e7e;color:white!important}
.ot-button-blue:hover{background:#002e61}
.ot-button-green{background:#008265;color:white!important}
.ot-button-green:hover{background:#006e55}
.ot-button-orange{background:#bb4800;color:white!important}
.ot-button-orange:hover{background:#a53e00}
.ot-hero{position:relative;isolation:isolate;overflow:hidden;padding:44px 0;background:#003e7e;color:white}
.ot-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 50%,#22aecc33,transparent 55%),linear-gradient(115deg,#002c5899,transparent 70%)}
.ot-circuit{position:absolute;inset:0;width:100%;height:100%;color:#83cce9;opacity:.17;z-index:-1;pointer-events:none}
.ot-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:42px;align-items:center}
.ot-hero-copy{min-width:0}
.ot-hero .ot-eyebrow{color:#d3edf7;font-size:12px;letter-spacing:1.1px}
.ot-hero h1{font-size:clamp(48px,4.8vw,64px);font-weight:800;line-height:1.06;letter-spacing:-1.8px;margin:17px 0 14px}
.ot-hero h2{font-size:clamp(24px,2.2vw,29px);line-height:1.3;letter-spacing:-.3px;font-weight:600}
.ot-hero-copy>p{font-size:18px;line-height:1.75;color:#e6f2fb;max-width:680px;margin:18px 0 24px}
.ot-hero-pricing{margin-top:12px}
.ot-hero-proof{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:20px;color:#e1edf5;font-size:14px;line-height:1.5}
.ot-hero-proof span:before{content:"✓";color:#b9e690;margin-right:6px}
.ot-grid{display:grid;gap:20px}
.ot-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ot-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ot-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ot-card{min-width:0;border:1px solid #d3e0e9;border-radius:13px;background:white;padding:26px;transition:border-color .2s,box-shadow .2s}
.ot-card:hover{border-color:#82abc6;box-shadow:0 8px 24px -12px #003e7e26}
.ot-icon{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:18px;background:#eaf3fa;color:#0077bf;border-radius:11px}
.ot-card h3{margin-bottom:12px}
.ot-card p{font-size:17px;line-height:1.75;color:var(--ot-muted)}
.ot-choice{display:flex;flex-direction:column;border-top:3px solid #0077bf}
.ot-choice-label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;line-height:1.5;letter-spacing:1px;color:#0077bf;margin-bottom:20px}
.ot-choice-label svg{flex:none}
.ot-choice h3{font-size:25px}
.ot-choice>p{flex:1}
.ot-checks{list-style:none;margin:22px 0;padding:0;display:grid;gap:12px}
.ot-checks li{display:flex;align-items:flex-start;gap:9px;font-size:16px;line-height:1.65}
.ot-checks svg{flex:none;color:#008265;margin-top:3px}
.ot-text-link{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#003e7e!important;text-decoration:none;font-weight:700;font-size:16px;line-height:1.6;padding:9px 0}
.ot-text-link:hover{text-decoration:underline;text-underline-offset:3px}
.ot-text-link svg{flex:none}
.ot-product-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.ot-product-heading h2{margin-top:12px}
.ot-lead{font-size:21px;line-height:1.6;color:var(--ot-muted);margin-top:16px!important}
.ot-product-heading>.ot-button{flex:none;max-width:380px}
.ot-protocols{display:flex;align-items:center;flex-wrap:wrap;gap:9px;background:#f3f7fa;border:1px solid #d8e5ef;border-radius:11px;padding:18px;margin-bottom:28px}
.ot-protocols>span{display:inline-block;padding:5px 12px;border:1px solid #b8d1e2;border-radius:7px;background:white;color:#003e7e;font-size:14px;font-weight:700}
.ot-protocols small{font-size:13px;line-height:1.6;color:#52677b;margin-left:auto}
.ot-feature{display:flex;align-items:flex-start;gap:17px;min-width:0;padding:23px;border:1px solid #d8e3eb;border-radius:12px;background:white}
.ot-feature .ot-icon{flex:none;margin:0;width:43px;height:43px}
.ot-feature h3{font-size:20px;margin:0 0 10px}
.ot-feature p{font-size:17px;line-height:1.75;color:#52677b}
.ot-client-engine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:36px;padding:30px;margin-top:28px;background:#edf5f2;border:1px solid #c7ded3;border-radius:13px}
.ot-client-engine h3{font-size:26px;margin:12px 0}
.ot-client-engine p{font-size:17px;color:#48665b;line-height:1.75}
.ot-client-engine ol{list-style:none;margin:0;padding:0;align-self:center;display:grid;gap:12px}
.ot-client-engine li{display:flex;align-items:center;gap:14px;background:#ffffffb3;border:1px solid #c5dace;border-radius:8px;padding:17px;font-size:16px;font-weight:650}
.ot-client-engine li span{color:#008265;font-weight:800;font-size:19px}
.ot-details{border:1px solid #cbdbe7;border-radius:10px;background:white;overflow:hidden;margin-top:26px}
.ot-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-size:18px;font-weight:700;line-height:1.5;cursor:pointer}
.ot-details summary::-webkit-details-marker{display:none}
.ot-details summary svg{flex:none;transition:transform .2s}
.ot-details[open] summary svg{transform:rotate(90deg)}
.ot-details-content{padding:20px 22px;border-top:1px solid #dce6ee;font-size:17px;line-height:1.8;color:#52677b}
.ot-details-content p+p{margin-top:12px}
.ot-wizard-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center}
.ot-feature-stack{display:grid;gap:14px}
.ot-feature-stack .ot-feature{padding:20px}
.ot-server-preview{padding:26px;border:1px solid #bbd1e0;background:radial-gradient(circle at 50% 0,#d3e9f7,transparent 55%),#eaf1f6;border-radius:17px}
.ot-server-preview-head{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;background:#003e7e;border-radius:10px;color:white}
.ot-server-preview-head>div{display:flex;flex-direction:column}
.ot-server-preview-head strong{font-size:17px}
.ot-server-preview-head span{font-size:13px;color:#d2e7f5}
.ot-address-space{padding:20px;background:white;border:1px solid #c6d9e7;border-radius:10px;margin-top:17px}
.ot-address-space>span{font-size:11px;color:#52677b;font-weight:750;letter-spacing:1px}
.ot-address-space>div{display:flex;align-items:center;gap:8px;font-size:15px;padding:12px 0}
.ot-address-space .ot-variable{justify-content:space-between;gap:12px;border-top:1px solid #e1eaf1}
.ot-variable>span:before{content:"◇";color:#0077bf;margin-right:8px}
.ot-variable strong{font-family:ui-monospace,Consolas,monospace;font-size:15px;color:#008265}
.ot-server-connector{font-size:28px;line-height:1.4;text-align:center;color:#7e9eb8}
.ot-server-clients{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ot-server-clients>span{display:flex;flex-direction:column;align-items:center;gap:7px;background:white;border:1px solid #c3d8e5;border-radius:8px;padding:14px 5px;font-size:12px;font-weight:650;text-align:center}
.ot-server-clients svg{color:#0077bf}
.ot-server-preview>.ot-text-link{font-size:14px;margin-top:12px}
.ot-callout{display:flex;align-items:flex-start;gap:15px;background:#edf4fa;padding:23px;border:1px solid #d6e3ed;border-radius:11px;margin-top:26px;font-size:16px;line-height:1.8}
.ot-callout>svg{flex:none;margin-top:3px;color:#003e7e}
.ot-tabs{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;gap:5px;margin:0 auto 28px;padding:5px;border:1px solid #cadce8;border-radius:11px;background:#e7eff5}
.ot-tabs button{border:0;border-radius:7px;padding:11px 18px;font-size:16px;min-height:46px;font-weight:700;line-height:1.5;background:transparent;color:#345672}
.ot-tabs button[aria-selected=true]{background:#003e7e;color:white;box-shadow:0 2px 5px #003e7e26}
.ot-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch}
.ot-plan-count-1{grid-template-columns:minmax(0,1fr);max-width:680px;margin:auto}
.ot-plan-count-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:auto}
.ot-plan{min-width:0;display:flex;flex-direction:column;padding:24px;border:1px solid #c6d9e6;border-top:3px solid #0077bf;border-radius:12px;background:white}
.ot-plan-label{font-size:11px;line-height:1.6;font-weight:800;text-transform:uppercase;letter-spacing:.65px;color:#0077bf;margin-bottom:14px;min-height:35px}
.ot-plan h3{font-size:23px;min-height:32px}
.ot-price{font-size:39px;line-height:1.15;font-weight:800;letter-spacing:-1px;margin:16px 0 8px}
.ot-price-unit{font-size:14px;line-height:1.6;color:#52677b}
.ot-part{font-size:12px;color:#52677b;margin:12px 0 0!important}
.ot-plan .ot-checks{flex:1}
.ot-plan .ot-checks li{font-size:15px}
.ot-plan .ot-button{font-size:14px;padding:11px 12px;gap:6px}
.ot-plan .ot-button svg{width:15px}
.ot-license-note{font-size:15px;line-height:1.8;color:#52677b;margin:24px auto 0;max-width:1080px}
.ot-license-note a{font-weight:650;text-underline-offset:3px}
.ot-pricing-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:24px}
.ot-pricing-links a,.ot-pricing-links button{display:flex;align-items:center;gap:7px;border:0;background:transparent;font-size:15px;font-weight:700;color:#003e7e;text-decoration:none;padding:8px 0}
.ot-pricing-links a:hover,.ot-pricing-links button:hover{text-decoration:underline}
.ot-resource-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.ot-resource-filters button{border:1px solid #bdd1e0;border-radius:7px;background:white;padding:9px 16px;font-size:15px;font-weight:650;min-height:44px;color:#45647c}
.ot-resource-filters button[aria-pressed=true]{background:#003e7e;color:white;border-color:#003e7e}
.ot-resource{display:flex;align-items:flex-start;gap:16px;padding:24px;border:1px solid #cddde8;border-radius:11px;text-decoration:none;transition:background .2s,border-color .2s}
.ot-resource:hover{background:#f3f8fc;border-color:#7ba8c7}
.ot-resource>svg{color:#0077bf;flex:none}
.ot-resource>svg:last-child{margin-left:auto}
.ot-resource>div{min-width:0}
.ot-resource>div>span{font-size:11px;font-weight:800;line-height:1.5;text-transform:uppercase;letter-spacing:1px;color:#0077bf}
.ot-resource h3{font-size:19px;margin:6px 0 9px}
.ot-resource p{font-size:16px;line-height:1.7;color:#52677b}
.ot-faqs{display:grid;gap:12px;max-width:960px;margin:auto}
.ot-faqs .ot-details{margin:0}
.ot-final{text-align:center;padding:64px 0;background:#00356b;color:white}
.ot-final .ot-wrap>svg{display:block;color:#7ed8ef;margin:0 auto 18px}
.ot-final .ot-eyebrow{color:#c8e5f2}
.ot-final h2{margin:16px 0 20px}
.ot-final p{max-width:750px;margin:0 auto 26px;font-size:18px;line-height:1.75;color:#deedf7}
.ot-final .ot-actions{justify-content:center}
.ot-final .ot-trial-note{font-size:13px;line-height:1.7;max-width:690px;margin:21px auto 0;color:#bfd3e5}
.ot-ide{min-width:0;border:1px solid #7ba4be;border-radius:15px;overflow:hidden;background:#0b1a2d;box-shadow:0 24px 60px -25px #00192fd9;color:#dbe9f5;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;line-height:1.5}
.ot-ide-bar{display:flex;align-items:center;gap:13px;padding:9px 15px;background:#10253c;border-bottom:1px solid #ffffff12;font-size:12px;line-height:1.5;color:#b6cde0;min-height:38px}
.ot-window-dots{display:flex;gap:5px;flex:none}
.ot-window-dots i{width:7px;height:7px;border-radius:50%;background:#5c7a91}
.ot-window-dots i:nth-child(1){background:#e9ac46}
.ot-window-dots i:nth-child(2){background:#56b994}
.ot-window-dots i:nth-child(3){background:#50a7d3}
.ot-language{margin-left:auto;font-size:11px;color:#8eb4ce}
.ot-ide-tab{display:flex;align-items:center;gap:8px;padding:8px 17px;background:#0c1e32;border-bottom:1px solid #2a4359;font-size:12px;line-height:1.5;min-height:36px;color:#cce4f7}
.ot-ide-tab>svg{color:#73d6b2;flex:none}
.ot-ide-tab strong{font-weight:550}
.ot-ide-example{font-size:10px;margin-left:auto;color:#8aaac1}
.ot-ide-editor{display:grid;grid-template-columns:155px minmax(0,1fr);min-height:263px}
.ot-ide-project{padding:16px 0 12px;background:#0a192b;border-right:1px solid #294155;color:#86a6bd;font-size:10px;line-height:1.6;overflow:hidden}
.ot-ide-project>span{display:block;font-weight:650;letter-spacing:1px;font-size:10px;padding:0 10px;margin-bottom:14px}
.ot-ide-project>div{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:7px 9px;font-size:11px}
.ot-ide-project svg{flex:none}
.ot-project-active{color:#b5e2f9;background:#17334c}
.ot-ide-project>p{padding:11px 11px!important;color:#60829e;font-size:10px}
.ot-ide-editor pre{margin:0;min-width:0;padding:12px 0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#496b88 #0b1a2d;font:inherit;font-size:13px;line-height:1.6}
.ot-ide-editor code{display:block;min-width:max-content;font:inherit}
.ot-code-line{display:flex;gap:14px;padding:0 16px 0 10px;min-height:21px;border-left:2px solid transparent}
.ot-line-number{width:19px;text-align:right;flex:none;user-select:none;color:#58748e;font-size:11px}
.ot-code-keyword{color:#c9a6fa}
.ot-code-string{color:#8bd4b2}
.ot-code-type{color:#74cbf0}
.ot-code-method{color:#efcf80}
.ot-code-current{background:#0f544736;border-left-color:#61d49f}
.ot-ide-output{border-top:1px solid #294155;background:#0c2033;padding:12px 17px 10px}
.ot-output-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ot-output-heading>span{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1px;font-weight:650;color:#94b4cd}
.ot-output-heading button{display:flex;align-items:center;gap:6px;min-height:33px;border:1px solid #3d806e;border-radius:5px;background:#133d35;color:#b7ebd3;padding:5px 9px;font:inherit;font-size:11px}
.ot-output-heading button:disabled{background:#193348;border-color:#3d5e76;color:#9bb3c5}
.ot-output-lines{display:flex;align-items:center;gap:14px;min-height:38px;margin-top:7px;font-size:12px;color:#a8c2d6}
.ot-output-lines b{color:#67dca6;margin-right:5px}
.ot-output-lines>strong{font-size:21px;color:#83e3b1;font-weight:600}
.ot-output-lines>.ot-result-pending{font-size:10px;font-weight:400;color:#6c8da6}
.ot-ide-result-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 15px;margin-top:3px;font-size:9px;color:#84a4bd}
.ot-ide-result-meta .ot-result-state{margin-left:auto;color:#88d3b0}
.ot-ide-status{display:flex;justify-content:space-between;gap:12px;background:#0d4b75;color:#cbe6f5;padding:7px 15px;font-size:10px;line-height:1.6}
.ot-ide-status>span:first-child{display:flex;align-items:center;gap:5px}
@media(min-width:1024px){.ot-hero>.ot-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}
@media(max-width:1279px){.otn,.otn-top{display:none!important}
}
@media(max-width:1300px){.ot-ide-project{display:none}
.ot-ide-editor{grid-template-columns:minmax(0,1fr)}
.ot-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ot-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ot-plan-count-1{grid-template-columns:minmax(0,1fr)}
.ot-plan-label{min-height:0}
.ot-product-heading>.ot-button{max-width:310px}
.ot-protocols small{width:100%;margin-left:0}
}
@media(max-width:1023px){.ot-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
.ot-hero-copy{max-width:720px}
.ot-ide{width:min(100%,730px);justify-self:center}
.ot-hero h2 br{display:none}
.ot-hero h2 br:after{content:" "}
.ot-product-heading{align-items:flex-start}
.ot-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.ot-client-engine{gap:24px;padding:25px}
.ot-wizard-layout{grid-template-columns:minmax(0,1fr)}
.ot-server-preview{max-width:650px;width:100%;margin:auto}
.ot-ide-editor pre{font-size:14px}
.ot-ide-result-meta{font-size:11px}
.ot-ide-example{font-size:11px}
}
@media(max-width:700px){.ot-wrap{padding-inline:18px}
.ot-section{padding:44px 0}
.ot-hero{padding:36px 0}
.ot-hero h1{font-size:48px;margin-top:14px;letter-spacing:-1px}
.ot-hero h2{font-size:25px}
.ot-hero-copy>p{font-size:17px;line-height:1.75}
.ot-hero .ot-eyebrow{font-size:10px;letter-spacing:.7px}
.ot-actions{flex-direction:column;align-items:stretch}
.ot-actions .ot-button{width:100%}
.ot-hero-pricing{width:100%}
.ot-hero-proof{font-size:13px;gap:8px 16px}
.ot-section-title{text-align:left;margin-bottom:28px}
.ot-section-title p{font-size:17px}
.ot-grid-2,.ot-grid-3,.ot-grid-4,.ot-plan-grid,.ot-plan-count-2{grid-template-columns:minmax(0,1fr)}
.ot-product-heading{display:block;margin-bottom:26px}
.ot-product-heading>.ot-button{margin-top:24px;max-width:none}
.ot-lead{font-size:19px}
.ot-lead br{display:none}
.ot-product-heading h2 br{display:none}
.ot-card{padding:24px}
.ot-client-engine{grid-template-columns:minmax(0,1fr);gap:22px;padding:23px}
.ot-feature{padding:20px;gap:13px}
.ot-feature .ot-icon{width:36px;height:36px}
.ot-feature h3{font-size:19px}
.ot-feature p{font-size:16px}
.ot-protocols{padding:15px}
.ot-protocols>span{font-size:13px}
.ot-tabs{width:100%;margin-bottom:22px;gap:4px}
.ot-tabs button{flex:1 1 120px;padding:10px;font-size:14px}
.ot-plan{padding:26px}
.ot-plan h3{min-height:0}
.ot-plan .ot-button{font-size:16px}
.ot-plan .ot-checks li{font-size:16px}
.ot-resource-filters{justify-content:flex-start;gap:7px}
.ot-resource-filters button{font-size:14px;padding:9px 12px}
.ot-resource{padding:22px;gap:12px}
.ot-resource>svg:last-child{display:none}
.ot-resource h3{font-size:19px}
.ot-pricing-links{justify-content:flex-start;gap:8px}
.ot-details summary{padding:18px;font-size:17px}
.ot-details-content{padding:18px;font-size:16px}
.ot-server-preview{padding:20px}
.ot-server-clients>span{font-size:11px}
.ot-address-space{padding:16px}
.ot-address-space .ot-variable{font-size:14px}
.ot-variable strong{font-size:13px}
.ot-callout{padding:20px;gap:11px;font-size:15px}
.ot-final{padding:48px 0}
.ot-final h2 br{display:none}
.ot-ide-bar{padding:11px 12px;font-size:11px;gap:9px}
.ot-language{font-size:10px}
.ot-window-dots{gap:4px}
.ot-window-dots i{width:6px;height:6px}
.ot-ide-tab{padding:10px 12px;font-size:12px}
.ot-ide-example{display:none}
.ot-ide-editor pre{font-size:12px;line-height:1.85;padding:13px 0}
.ot-code-line{gap:10px;padding-right:12px;padding-left:7px;min-height:22px}
.ot-line-number{font-size:10px}
.ot-ide-output{padding:12px}
.ot-output-heading{gap:6px;flex-wrap:wrap}
.ot-output-heading>span{font-size:9px}
.ot-output-heading button{min-height:44px;font-size:11px}
.ot-output-lines{gap:10px;flex-wrap:wrap;min-height:45px}
.ot-output-lines>span{font-size:11px}
.ot-output-lines>strong{font-size:21px}
.ot-ide-result-meta{font-size:9px;gap:5px 10px}
.ot-ide-result-meta .ot-result-state{margin-left:0}
.ot-ide-status{font-size:9px;padding:8px 11px;gap:6px}
.ot-pricing-links a,.ot-pricing-links button{font-size:14px}
.ot-product-heading h2{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.ot-page *{transition:none!important;scroll-behavior:auto!important}
}