.ds {
    color: #0a1731;
    background: linear-gradient(180deg,#f7f8fb 0%,#f4f6fa 43%,#f8f9fb 100%);
    --ds-line: #d1d9e3;
    --ds-orange: #ff580b;
}
.ds .fs-wrap { max-width: 1600px; }
.ds-block { padding-block: clamp(32px,4vw,66px); }
.ds-block + .ds-block { border-top: 1px solid #dce2e9; }
.ds-heading { margin: 0 0 clamp(19px,1.6vw,28px); }
.ds p, .ds h2, .ds h3, .ds h4, .ds figure, .ds dl, .ds dd { margin: 0; }
.ds .ds-kicker { color: #d74700; font-weight: 780; letter-spacing: .015em; font-size: clamp(13px,1.32vw,21px); text-transform: uppercase; margin: 0 0 7px; }
.ds-heading h2, .ds-plate h3 { font-size: clamp(32px,3.9vw,62px); font-weight: 820; line-height: 1.04; letter-spacing: -.047em; }
.ds-heading > p:last-child { font-size: clamp(17px,1.72vw,27px); line-height: 1.25; margin-top: 7px; letter-spacing: -.018em; }
.ds h3, .ds h4 { letter-spacing: -.035em; line-height: 1.15; }
.ds a:focus-visible, .ds button:focus-visible, .ds summary:focus-visible, .ds input:focus-visible { outline: 3px solid #1378bb; outline-offset: 4px; }
.ds-demo { border-radius: 17px; padding: 10px clamp(12px,1.2vw,20px) clamp(14px,1.3vw,22px); background: #e9edf3; }
.ds .ds-example, .ds-suggestion small { display: table; font-size: clamp(12px,1.04vw,16px); font-weight: 700; line-height: 1.4; border-radius: 100px; background: #d8dee7; padding: 4px 16px; }
.ds .ds-example { margin: 0 0 10px auto; }
.ds-demo-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.66fr); gap: clamp(19px,2.1vw,33px); }
.ds-step { position: relative; min-width: 0; background: #fff; border-radius: 13px; box-shadow: 0 2px 4px #0c22351e; padding: clamp(9px,.9vw,15px); }
.ds-step:not(:last-child)::after { content: '→'; position: absolute; z-index: 1; top: 44%; right: calc(clamp(19px,2.1vw,33px) * -1); width: clamp(19px,2.1vw,33px); text-align: center; color: #f55b08; font-size: clamp(22px,2.1vw,34px); font-weight: 650; line-height: 1; }
.ds-step h3 { display: flex; align-items: center; gap: .45em; font-size: clamp(16px,1.65vw,26px); font-weight: 800; margin: 0 0 9px; }
.ds-step h3 > span { display: grid; place-items: center; flex: 0 0 auto; width: 1.75em; height: 1.75em; color: #fff; background: #e95006; border-radius: 50%; font-size: .82em; }
.ds-first { display: flex; flex-direction: column; }
.ds-first figure { flex: 1; display: flex; flex-direction: column; }
.ds-first figure img { width: 100%; height: auto; flex: 1; min-height: 0; object-fit: cover; border-radius: 9px; }
.ds-first figcaption { margin-top: 4px; text-align: center; font-size: clamp(12px,1.17vw,18px); }
.ds-reading { display: grid; gap: clamp(7px,1vw,16px); padding: 3px 2px; }
.ds-camera { position: relative; place-self: center; width: clamp(39px,4.3vw,69px); aspect-ratio: 1.3; color: #fb5307; }
.ds-camera .fs-icon:first-child { width: 100%; height: 100%; stroke-width: 1.8; }
.ds-camera .fs-icon:last-child { color: #102641; position: absolute; top: 16%; left: 22%; width: 56%; height: 68%; }
.ds-detected { display: flex; align-items: center; justify-content: center; gap: 8px; background: #e7f3e5; border-radius: 10px; padding: 5px; font-weight: 800; font-size: clamp(14px,1.28vw,20px); }
.ds-detected b { display: grid; place-items: center; color: white; background: #398a36; border-radius: 50%; width: 1.35em; height: 1.35em; }
.ds-detected .fs-icon { width: 68%; height: 68%; }
.ds-reading dl { border: 1px solid var(--ds-line); border-radius: 9px; padding-inline: clamp(7px,1vw,16px); }
.ds-reading dl > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; padding-block: clamp(5px,.55vw,9px); }
.ds-reading dl > div + div { border-top: 1px solid var(--ds-line); }
.ds-reading dt { font-size: clamp(12px,1.2vw,18px); color: #485269; }
.ds-reading dd { font-size: clamp(15px,1.5vw,23px); font-weight: 780; }
.ds-edit > summary, .ds-machine-details > summary { font-size: clamp(13px,1.18vw,18px); text-decoration: underline; text-underline-offset: .15em; }
.ds-edit > summary { text-align: center; }
.ds details > summary { list-style: none; }
.ds details > summary::-webkit-details-marker { display: none; }
.ds-edit form, .ds-machine-details form { margin-top: 12px; display: grid; gap: 8px; }
.ds-edit label, .ds-machine-details label { font-size: 14px; font-weight: 650; }
.ds-edit input, .ds-machine-details input { display: block; width: 100%; padding: 8px 10px; border: 1px solid #b6c3cf; border-radius: 5px; color: #152840; background: white; }
.ds-suggestion { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 8px; height: calc(100% - 47px); }
.ds-suggestion img { width: 100%; height: auto; mix-blend-mode: multiply; }
.ds-suggestion small { padding: 3px 10px; background: #e9edf2; font-weight: 550; }
.ds-suggestion h4 { margin: 8px 0 13px; font-size: clamp(18px,1.9vw,30px); font-weight: 820; }
.ds-result-link { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ds-line); line-height: 1.25; padding-block: clamp(7px,.75vw,11px); font-size: clamp(12px,1.07vw,17px); }
.ds-icon { width: 1.65em; height: 1.65em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.ds-btn, .ds-text { display: inline-flex; align-items: center; gap: .55em; }
.ds-btn { justify-content: center; padding: .62em 1em; border: 0; border-radius: 7px; text-align: center; text-decoration: none; line-height: 1.2; font-weight: 760; font-size: clamp(15px,1.38vw,22px); }
.ds-btn .fs-icon, .ds-text .fs-icon { width: 1.15em; height: 1.15em; }
.ds-btn.ds-dark { background: #102c45; color: white; }
.ds-suggestion .ds-btn { margin-top: 8px; font-size: clamp(12px,1vw,16px); width: 100%; padding-inline: .5em; }
.ds-real-part { display: block; margin-top: 4px; font-size: clamp(10px,.8vw,12px); color: #43596a; text-align: center; }
.ds-btn.ds-orange { background: var(--ds-orange); color: #101b2b; }
.ds-btn.ds-light { background: white; color: #112b41; }
.ds-btn:hover, .ds-upload label:hover { filter: brightness(.94); }
.ds-text { font-weight: 650; text-decoration: underline; text-underline-offset: .15em; line-height: 1.3; }
.ds-demo-actions { margin: clamp(17px,1.6vw,26px) 0 20px; }
.ds-demo-actions h3 { font-size: clamp(19px,1.85vw,29px); }
.ds-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px clamp(16px,2vw,32px); margin-top: 12px; }
.ds-upload { position: relative; margin: 0; }
.ds-upload label { position: relative; overflow: hidden; cursor: pointer; }
.ds-upload input { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; cursor: pointer; }
.ds-upload label:focus-within { outline: 3px solid #1886c8; outline-offset: 3px; }
.ds-upload-status:not(:empty) { display: block; font-size: 13px; margin-top: 5px; }
.ds-shortcuts { border-top: 1px solid #cbd4dd; padding-top: clamp(14px,1.25vw,22px); }
.ds-shortcuts h3 { font-size: clamp(24px,2.45vw,39px); margin-bottom: 12px; }
.ds-shortcuts > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(9px,1vw,16px); }
.ds-shortcuts > div > a { display: grid; grid-template-columns: 42% minmax(0,1fr); gap: 6px; align-items: center; background: white; border: 1px solid #cdd7e2; border-radius: 10px; padding: 5px 10px; text-decoration: none; }
.ds-shortcuts img { height: clamp(56px,7vw,112px); width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ds-shortcuts strong { font-size: clamp(16px,1.65vw,26px); overflow-wrap: anywhere; line-height: 1.08; letter-spacing: -.03em; }
.ds-shortcuts a:hover, .ds-app:hover { border-color: #8399a9; box-shadow: 0 3px 12px #10283d13; }
.ds-apps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,1.4vw,24px); }
.ds-app { background: white; border: 1px solid #d4dce5; border-radius: 13px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 2px 4px #10283d08; }
.ds-app img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
.ds-app > div { padding: clamp(12px,1.25vw,20px); }
.ds-app h3 { font-size: clamp(20px,2.13vw,34px); font-weight: 800; }
.ds-app p { font-size: clamp(15px,1.26vw,20px); line-height: 1.25; margin: 4px 0 14px; }
.ds-app .ds-text { font-size: clamp(14px,1.26vw,20px); }
.ds-plate { display: grid; grid-template-columns: 1.05fr 1fr; margin-top: clamp(22px,2.2vw,35px); background: #10283f; color: #fff; border-radius: 14px; overflow: hidden; }
.ds-plate-copy { align-self: center; padding: clamp(19px,2.1vw,34px); }
.ds-plate .ds-kicker { color: #ff864b; }
.ds-plate h3 { font-size: clamp(26px,3.12vw,50px); margin-top: 12px; }
.ds-plate-copy > p:not(.ds-kicker) { font-size: clamp(15px,1.55vw,24px); line-height: 1.3; margin-top: 12px; }
.ds-plate-copy .ds-actions { margin-block: 17px 9px; gap: 12px 18px; }
.ds-plate .ds-btn, .ds-plate .ds-text { font-size: clamp(14px,1.22vw,19px); }
.ds-plate figure { width: 100%; min-height: 100%; position: relative; }
.ds-plate figure > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; }
.ds-plate figcaption { position: absolute; right: 3%; bottom: 4%; display: inline-flex; gap: 7px; align-items: center; border-radius: 7px; background: white; color: #102643; font-weight: 740; font-size: clamp(12px,1.23vw,20px); padding: .38em .7em; }
.ds-plate .ds-plate-note { font-size: clamp(13px,1.22vw,19px); }
.ds-machine-details { margin-top: 9px; }
.ds-machine-details.ds-enhanced:not([open]), .ds-machine-details.ds-enhanced > summary { display: none; }
.ds-machine-details form { grid-template-columns: 1fr 1fr; }
.ds-machine-details button { justify-self: start; grid-column: 1/-1; }
.ds-comparison { display: grid; align-items: center; grid-template-columns: minmax(0,1.59fr) minmax(0,1fr); gap: clamp(18px,2vw,32px); }
.ds-callouts { aspect-ratio: 922/464; position: relative; overflow: hidden; border-radius: 13px; }
.ds-callouts img, .ds-callouts > svg { width: 100%; height: 100%; }
.ds-callouts > svg { position: absolute; inset: 0; filter: drop-shadow(0 1px 1px white) drop-shadow(0 -1px 1px white); stroke: #101b3b; stroke-width: 2.6; fill: none; }
.ds-callouts circle { fill: #0b1b3e; stroke: #fff; }
.ds-pin { position: absolute; background: white; color: #111d34; border: 1.5px solid #142139; padding: .22em .6em; border-radius: .55em; font-size: clamp(11px,1.45vw,23px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; box-shadow: 0 1px 3px #1725383d; }
.ds-pin-number { top: 31%; left: 1.7%; }
.ds-pin-style { top: 6.5%; left: 57.5%; }
.ds-pin-port { bottom: 7.5%; right: 1.2%; }
.ds-checks > div { display: flex; align-items: center; gap: clamp(14px,1.65vw,26px); padding-block: clamp(11px,1.15vw,19px); border-bottom: 1px solid #ccd5df; }
.ds-checks > div:first-child { padding-top: 0; }
.ds-checks > div:last-of-type { border-bottom: 0; }
.ds-checks .ds-icon { color: #f2570b; width: clamp(32px,4.3vw,67px); height: clamp(32px,4.3vw,67px); }
.ds-checks h3 { font-size: clamp(21px,2vw,32px); font-weight: 800; }
.ds-checks p { font-size: clamp(15px,1.45vw,22px); line-height: 1.25; margin-top: 4px; }
.ds-checks > .ds-btn { width: 100%; margin-top: 12px; }

@media (max-width: 990px) and (min-width: 761px) {
    .ds-suggestion { grid-template-columns: 30% 1fr; }
    .ds-suggestion h4 { margin-bottom: 7px; }
    .ds-plate { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 760px) {
    .ds .ds-kicker { margin-bottom: 6px; }
    .ds-heading h2 { font-size: clamp(30px,6.1vw,43px); }
    .ds-demo-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
    .ds-step { padding: 12px; }
    .ds-step:not(:last-child)::after { display: none; }
    .ds-result { grid-column: 1/-1; }
    .ds-suggestion { height: auto; grid-template-columns: .8fr 1fr; gap: 12px; }
    .ds-suggestion img { max-height: 200px; object-fit: contain; }
    .ds-suggestion h4 { font-size: 23px; }
    .ds-suggestion .ds-btn, .ds-result-link, .ds-edit summary { font-size: 14px; }
    .ds-shortcuts > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ds-shortcuts img { height: 67px; }
    .ds-shortcuts strong { font-size: clamp(16px,3.15vw,22px); }
    .ds-apps { gap: 10px; }
    .ds-app > div { padding: 12px 9px; }
    .ds-app p { font-size: 14px; }
    .ds-plate { grid-template-columns: 1fr; }
    .ds-plate figure { aspect-ratio: 737/398; min-height: auto; }
    .ds-comparison { grid-template-columns: 1fr; }
    .ds-pin { font-size: clamp(12px,2.8vw,18px); }
}
@media (max-width: 520px) {
    .ds-demo-grid { grid-template-columns: 1fr; gap: 16px; }
    .ds-result { grid-column: auto; }
    .ds-step h3 { font-size: 20px; }
    .ds-reading { grid-template-columns: .26fr 1fr; align-items: center; gap: 9px; }
    .ds-reading dl, .ds-edit { grid-column: 1/-1; }
    .ds-reading div, .ds-result-link { font-size: 15px; }
    .ds-step h3 > span { width: 1.55em; height: 1.55em; }
    .ds-first figure img { aspect-ratio: 1.85; }
    .ds-first figcaption { font-size: 13px; }
    .ds-suggestion { grid-template-columns: 36% 1fr; }
    .ds-suggestion h4 { font-size: clamp(18px,5vw,25px); }
    .ds-shortcuts > div > a { grid-template-columns: 37% 1fr; padding: 7px; }
    .ds-shortcuts img { height: 55px; }
    .ds-shortcuts strong { hyphens: auto; }
    .ds-apps { grid-template-columns: 1fr; gap: 15px; }
    .ds-app > div { padding: 13px 15px 16px; }
    .ds-app h3 { font-size: 23px; }
    .ds-app p { margin: 4px 0 11px; font-size: 16px; }
    .ds-plate h3 { font-size: 29px; }
    .ds-plate figcaption { right: 2%; bottom: 2%; font-size: 11px; }
    .ds-plate .ds-actions { align-items: flex-start; flex-direction: column; }
    .ds-machine-details form { grid-template-columns: 1fr; }
    .ds-callouts { border-radius: 10px; }
}

.ds-shortcuts .ds-all-types{margin:18px 0 0}.ds-shortcuts .ds-all-types a{display:inline-flex;width:auto;padding:12px 20px;gap:9px;font-size:1rem;white-space:normal}.ds-shortcuts strong{hyphens:none;word-break:normal;overflow-wrap:normal}.ds-shortcuts>div>a{container-type:inline-size}.ds-shortcuts>div>a strong{font-size:clamp(.95rem,9cqi,1.35rem)}@media(max-width:570px){.ds-shortcuts>div>a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 4px}.ds-shortcuts>div>a img{width:min(75px,60%);height:60px}.ds-shortcuts>div>a strong{font-size:clamp(.9rem,4vw,1.1rem);max-width:100%;overflow-wrap:anywhere}}