/* Scoped to the shared DPI workspace. */
#dpi-tool.dpi-workspace{--dpi-ink:#17243c;--dpi-muted:#52627a;--dpi-line:#d9e2ef;--dpi-surface:#f4f7fc;--dpi-accent:#1d4ed8;--dpi-accent-soft:#eaf1ff;--dpi-paper:#fff;color:var(--dpi-ink);border-radius:18px;font-family:inherit;line-height:1.6;color-scheme:light}
html.dark-theme #dpi-tool.dpi-workspace,[data-theme="dark"] #dpi-tool.dpi-workspace{--dpi-ink:#e7efff;--dpi-muted:#b3c2da;--dpi-line:#34445f;--dpi-surface:#172238;--dpi-accent:#9abaff;--dpi-accent-soft:#203451;--dpi-paper:#111827;color-scheme:dark}
#dpi-tool.dpi-workspace *{box-sizing:border-box}#dpi-tool.dpi-workspace [hidden]{display:none!important}#dpi-tool.dpi-workspace h2,#dpi-tool.dpi-workspace h3,#dpi-tool.dpi-workspace p{margin:0 0 12px}#dpi-tool.dpi-workspace h2{font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.25;color:var(--dpi-ink)}#dpi-tool.dpi-workspace h3{font-size:1.06rem;line-height:1.4;color:var(--dpi-ink)}.dpi-heading{display:flex;gap:20px;justify-content:space-between;align-items:start;margin-bottom:14px}.dpi-heading p{max-width:72ch}#dpi-tool.dpi-workspace .dpi-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dpi-accent);margin-bottom:6px}.dpi-badge{white-space:nowrap;border:1px solid var(--dpi-line);border-radius:30px;font-size:.75rem;padding:5px 10px;color:var(--dpi-muted)}#dpi-tool.dpi-workspace .dpi-notice{padding:12px 14px;border-left:3px solid var(--dpi-accent);background:var(--dpi-accent-soft);border-radius:0 10px 10px 0;font-size:.85rem}.dpi-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dpi-line);padding-bottom:12px;margin:18px 0}#dpi-tool.dpi-workspace button,#dpi-tool.dpi-workspace input,#dpi-tool.dpi-workspace select{font:inherit}#dpi-tool.dpi-workspace button{border:1px solid var(--dpi-line);border-radius:9px;padding:9px 13px;background:var(--dpi-paper);color:var(--dpi-ink);cursor:pointer;font-size:.83rem;font-weight:650;min-height:42px}#dpi-tool.dpi-workspace button:hover:enabled{border-color:var(--dpi-accent);background:var(--dpi-accent-soft)}#dpi-tool.dpi-workspace button:disabled{opacity:.5;cursor:not-allowed}#dpi-tool.dpi-workspace button.dpi-primary{background:#1d4ed8;color:#fff;border-color:#1d4ed8}#dpi-tool.dpi-workspace [role="tab"][aria-selected="true"]{background:var(--dpi-accent-soft);border-color:var(--dpi-accent);color:var(--dpi-accent)}#dpi-tool.dpi-workspace :focus-visible{outline:3px solid var(--dpi-accent);outline-offset:3px}.dpi-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.45fr);gap:18px}.dpi-card{padding:20px;background:var(--dpi-paper);border:1px solid var(--dpi-line);border-radius:14px;min-width:0}.dpi-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--dpi-accent-soft);color:var(--dpi-accent);margin-right:7px;font-size:.8rem}#dpi-tool.dpi-workspace .dpi-help{font-size:.77rem;color:var(--dpi-muted);line-height:1.55;margin-bottom:14px}#dpi-tool.dpi-workspace label{display:block;font-size:.83rem;font-weight:650;margin:13px 0 5px}#dpi-tool.dpi-workspace input,#dpi-tool.dpi-workspace select{width:100%;min-width:0;min-height:44px;padding:9px 11px;border:1px solid var(--dpi-line);border-radius:9px;background:var(--dpi-paper);color:var(--dpi-ink);font-size:.88rem}#dpi-tool.dpi-workspace input:invalid:not(:placeholder-shown){border-color:#c2410c}.dpi-input-row{display:grid;grid-template-columns:minmax(0,1fr) 95px;gap:8px}#dpi-tool.dpi-workspace fieldset{border:0;padding:0;margin:0;min-width:0}.dpi-presets{display:flex;gap:6px;margin-top:8px}.dpi-presets button{font-size:.75rem;min-height:35px;padding:4px 10px}#dpi-tool.dpi-workspace details{font-size:.83rem}#dpi-tool.dpi-workspace summary{cursor:pointer;font-weight:650;padding:10px 0}.dpi-checklist{margin-top:6px}.dpi-checklist ul{padding-left:20px;margin:6px 0;color:var(--dpi-muted)}.dpi-checklist li{margin-bottom:7px}.dpi-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.dpi-track{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:205px;margin:16px 0 10px;border:1px dashed var(--dpi-line);border-radius:12px;background:var(--dpi-surface);text-align:center;padding:18px;user-select:none;cursor:crosshair;position:relative;overflow:hidden}.dpi-track span{font-size:.8rem;color:var(--dpi-muted);max-width:48ch}.dpi-track strong{font-size:1rem}.dpi-track[data-state="ready"],.dpi-track[data-state="measuring"]{border:2px solid var(--dpi-accent);background:var(--dpi-accent-soft)}.dpi-track[data-drag="true"]{touch-action:none}.dpi-crosshair{font-size:2rem;line-height:1;color:var(--dpi-accent);font-weight:400}.dpi-travel{width:160px;max-width:80%;height:4px;background:var(--dpi-line);border-radius:4px;overflow:hidden}.dpi-travel #dpi-travel-fill{display:block;height:100%;width:0;background:var(--dpi-accent);max-width:100%}#dpi-tool.dpi-workspace .dpi-status{min-height:3.2em;font-size:.83rem;color:var(--dpi-accent);margin:12px 0}.dpi-status[data-error="true"]{color:#b45309}html.dark-theme .dpi-status[data-error="true"],[data-theme="dark"] .dpi-status[data-error="true"]{color:#fdba74}.dpi-results{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin:14px 0}.dpi-results>div,.dpi-summary>div{padding:13px 11px;border-radius:10px;background:var(--dpi-surface);min-width:0}.dpi-results span,.dpi-summary span{display:block;font-size:.7rem;line-height:1.4;color:var(--dpi-muted)}.dpi-results strong,.dpi-summary strong{display:block;font-size:clamp(1.08rem,1.7vw,1.45rem);font-variant-numeric:tabular-nums;margin:5px 0;overflow-wrap:anywhere}.dpi-results small{display:block;font-size:.68rem;line-height:1.4;color:var(--dpi-muted)}.dpi-session{margin-top:18px}.dpi-section-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.dpi-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.dpi-next-step{background:var(--dpi-accent-soft);padding:10px 12px;border-radius:9px;font-size:.83rem}.dpi-chart{display:flex;align-items:end;gap:6px;height:110px;margin:20px 0 10px;padding:8px 0;border-bottom:1px solid var(--dpi-line)}.dpi-chart .dpi-bar{flex:1;background:var(--dpi-accent);min-width:3px;border-radius:4px 4px 0 0;opacity:.75;max-width:55px}.dpi-table-wrap{overflow:auto;margin:16px 0}#dpi-tool.dpi-workspace table{width:100%;border-collapse:collapse;font-size:.76rem;text-align:left}#dpi-tool.dpi-workspace th{font-weight:650;color:var(--dpi-muted);background:var(--dpi-surface)}#dpi-tool.dpi-workspace th,#dpi-tool.dpi-workspace td{padding:10px 8px;border-bottom:1px solid var(--dpi-line);vertical-align:top}#dpi-tool.dpi-workspace td small{display:block;color:var(--dpi-muted)}#dpi-tool.dpi-workspace td button{min-height:34px;font-size:.72rem;padding:4px 8px}#dpi-tool.dpi-workspace tr[data-current="true"] td:first-child{border-left:3px solid var(--dpi-accent)}.dpi-method{margin-top:18px;border-top:1px solid var(--dpi-line);padding:8px 0}.dpi-method p{color:var(--dpi-muted);max-width:95ch}.dpi-calculator{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dpi-calculator p{font-size:.87rem}.dpi-calculator-result{display:flex;flex-direction:column;justify-content:center;background:var(--dpi-surface)}.dpi-calculator-result>span{color:var(--dpi-muted);font-size:.8rem}.dpi-calculator-result output{display:block;font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:var(--dpi-accent);overflow-wrap:anywhere}#dpi-tool.dpi-workspace a{color:var(--dpi-accent);text-decoration:underline;text-underline-offset:3px}.dpi-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.dpi-layout{grid-template-columns:1fr}.dpi-badge{display:none}.dpi-heading{display:block}.dpi-results{grid-template-columns:repeat(3,minmax(0,1fr))}.dpi-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.dpi-section-heading{display:block}.dpi-calculator{grid-template-columns:1fr}.dpi-card{padding:16px}.dpi-tabs{gap:4px}.dpi-tabs button{flex:1;padding:8px 5px;font-size:.75rem;line-height:1.3}.dpi-results>div{padding:10px 8px}.dpi-results strong{font-size:1.06rem}.dpi-table-wrap table{min-width:620px}}
@media(prefers-reduced-motion:reduce){#dpi-tool.dpi-workspace *{scroll-behavior:auto!important}}

/* Distance, the measurement surface and the result form one short workflow. */
#dpi-tool[data-dpi-locale] .dpi-tabs{flex-wrap:wrap}
#dpi-tool[data-dpi-locale] .dpi-tabs button{min-width:0;overflow-wrap:anywhere;white-space:normal}
#dpi-tool[data-dpi-locale] .dpi-measure-heading{flex-wrap:wrap}
#dpi-tool[data-dpi-locale] .dpi-estimate-note a{white-space:normal}
#dpi-tool[data-dpi-locale] .dpi-advanced>summary>span{display:inline-block;overflow-wrap:anywhere}
#dpi-tool[data-dpi-locale] input[type="number"],#dpi-tool[data-dpi-locale] output,#dpi-tool[data-dpi-locale] .dpi-results strong,#dpi-tool[data-dpi-locale] .dpi-summary strong{direction:ltr;unicode-bidi:isolate}
#dpi-tool[dir="rtl"] .dpi-step{margin-right:0;margin-inline-end:7px}
#dpi-tool[dir="rtl"] .dpi-desk-guide{direction:ltr}
#dpi-tool[dir="rtl"] .dpi-desk-line span{direction:rtl;unicode-bidi:isolate;display:inline-block}
#dpi-tool[dir="rtl"] .dpi-notice{border-left:0;border-right:3px solid var(--dpi-accent);border-radius:10px 0 0 10px}
#dpi-tool[dir="rtl"] table{text-align:right}
#dpi-tool[dir="rtl"] details.dpi-session>summary>span{float:left}
#dpi-tool[dir="rtl"] tr[data-current="true"] td:first-child{border-left:0;border-right:3px solid var(--dpi-accent)}
#dpi-tool.dpi-workspace{display:block;gap:0}
#dpi-tool.dpi-workspace .dpi-heading{margin-bottom:8px;align-items:center}
#dpi-tool.dpi-workspace .dpi-heading h2{font-size:1.55rem;margin-bottom:5px}
#dpi-tool.dpi-workspace .dpi-heading p:last-child{font-size:.9rem;color:var(--dpi-muted);margin:0}
#dpi-tool.dpi-workspace .dpi-tabs{margin:14px 0;padding-bottom:10px}
#dpi-tool.dpi-workspace .dpi-primary-test{padding:20px}
#dpi-tool.dpi-workspace .dpi-setup-row{display:grid;grid-template-columns:minmax(230px,300px) auto minmax(160px,1fr);gap:18px;align-items:end}
#dpi-tool.dpi-workspace .dpi-distance-field label{margin:0 0 9px}
#dpi-tool.dpi-workspace .dpi-distance-field input{font-size:1.2rem;font-weight:700}
#dpi-tool.dpi-workspace .dpi-presets{margin:0 0 4px;flex-wrap:wrap}
#dpi-tool.dpi-workspace .dpi-presets button{min-height:40px;padding:7px 12px}
#dpi-tool.dpi-workspace .dpi-presets button[aria-pressed="true"]{background:var(--dpi-accent-soft);border-color:var(--dpi-accent);color:var(--dpi-accent)}
#dpi-tool.dpi-workspace .dpi-setup-row>.dpi-help{margin:0 0 4px;font-size:.8rem;max-width:32ch}
#dpi-tool.dpi-workspace .dpi-advanced{margin:14px 0 0;border-bottom:1px solid var(--dpi-line)}
#dpi-tool.dpi-workspace .dpi-advanced>summary{font-size:.8rem;color:var(--dpi-muted);padding:10px 0}
#dpi-tool.dpi-workspace .dpi-advanced>summary>span{font-weight:400;margin-inline-start:12px;font-size:.75rem}
#dpi-tool.dpi-workspace .dpi-advanced-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:4px}
#dpi-tool.dpi-workspace .dpi-advanced-grid label{margin-top:6px}
#dpi-tool.dpi-workspace .dpi-advanced-grid .dpi-help{margin:6px 0;font-size:.72rem}
#dpi-tool.dpi-workspace .dpi-desk-guide{display:flex;align-items:center;gap:12px;max-width:580px;margin:18px auto 0;text-align:center;color:var(--dpi-muted);font-size:.65rem;letter-spacing:.04em;line-height:1.5}
#dpi-tool.dpi-workspace .dpi-desk-guide>span{min-width:52px}
#dpi-tool.dpi-workspace .dpi-desk-guide b{font-size:.9rem;letter-spacing:0;color:var(--dpi-ink)}
#dpi-tool.dpi-workspace .dpi-desk-line{flex:1;border-bottom:2px solid var(--dpi-line);position:relative;padding-bottom:4px}
#dpi-tool.dpi-workspace .dpi-desk-line::before,#dpi-tool.dpi-workspace .dpi-desk-line::after{content:"";position:absolute;bottom:-6px;width:2px;height:10px;background:var(--dpi-line)}
#dpi-tool.dpi-workspace .dpi-desk-line::before{left:0}#dpi-tool.dpi-workspace .dpi-desk-line::after{right:0}
#dpi-tool.dpi-workspace .dpi-desk-line span{font-weight:650;font-size:.78rem;color:var(--dpi-accent);letter-spacing:0}
#dpi-tool.dpi-workspace .dpi-guide-note{text-align:center;color:var(--dpi-muted);font-size:.68rem;margin:7px 0 16px}
#dpi-tool.dpi-workspace .dpi-measure-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#dpi-tool.dpi-workspace .dpi-capture-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr);gap:20px;align-items:stretch}
#dpi-tool.dpi-workspace .dpi-capture-zone{min-width:0}
#dpi-tool.dpi-workspace .dpi-measure-heading h3{margin:0}
#dpi-tool.dpi-workspace .dpi-measure-heading>span{font-size:.7rem;color:var(--dpi-muted)}
#dpi-tool.dpi-workspace #dpi-instruction{font-size:.82rem;color:var(--dpi-muted);margin:0 0 10px}
#dpi-tool.dpi-workspace .dpi-track{min-height:154px;padding:16px;margin:0;border:2px solid #244fb3;border-radius:12px;background:linear-gradient(115deg,#12357c,#1d4ed8);color:#fff;gap:7px;touch-action:none}
#dpi-tool.dpi-workspace .dpi-track span{color:#e0ecff;font-size:.81rem}
#dpi-tool.dpi-workspace .dpi-track strong{font-size:1.1rem;color:#fff}
#dpi-tool.dpi-workspace .dpi-track .dpi-crosshair{display:grid;place-items:center;border:1px solid #8eb1ff;border-radius:50%;width:38px;height:38px;font-size:1.8rem;color:#fff;background:#ffffff12}
#dpi-tool.dpi-workspace .dpi-track .dpi-track-hint{font-size:.66rem;color:#bed4ff}
#dpi-tool.dpi-workspace .dpi-track[data-state="measuring"]{border-color:#5eead4;background:linear-gradient(115deg,#083f5f,#075c75)}
#dpi-tool.dpi-workspace .dpi-track[data-state="pending"]{cursor:wait;opacity:.8}
#dpi-tool.dpi-workspace .dpi-track[data-state="idle"]{cursor:grab}
#dpi-tool.dpi-workspace .dpi-actions{margin:12px 0 5px}
#dpi-tool.dpi-workspace #dpi-shortcuts{font-size:.72rem;margin:4px 0}
#dpi-tool.dpi-workspace .dpi-status{min-height:1.6em;margin:10px 0;font-size:.8rem}
#dpi-tool.dpi-workspace .dpi-results{display:flex;gap:12px;margin:12px 0 8px;align-items:stretch}
#dpi-tool.dpi-workspace .dpi-capture-grid>.dpi-results{margin:0;flex-direction:column;gap:10px}
#dpi-tool.dpi-workspace .dpi-results>div{flex:1;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
#dpi-tool.dpi-workspace .dpi-results>.dpi-main-result{flex:1.6;background:var(--dpi-accent-soft)}
#dpi-tool.dpi-workspace .dpi-results strong{font-size:1.7rem;line-height:1.1;margin:7px 0;color:var(--dpi-ink)}
#dpi-tool.dpi-workspace .dpi-main-result strong{font-size:2.6rem;letter-spacing:-.04em;color:var(--dpi-accent)}
#dpi-tool.dpi-workspace .dpi-main-result strong::selection{background:var(--dpi-accent);color:var(--dpi-paper)}
#dpi-tool.dpi-workspace .dpi-estimate-note{font-size:.72rem;color:var(--dpi-muted);margin:10px 0 0}
#dpi-tool.dpi-workspace .dpi-estimate-note a{white-space:nowrap}
#dpi-tool.dpi-workspace details.dpi-session{margin-top:12px;padding:0 18px}
#dpi-tool.dpi-workspace details.dpi-session>summary{padding:14px 0;display:list-item;font-size:.88rem}
#dpi-tool.dpi-workspace details.dpi-session>summary>span{float:right;font-size:.75rem;font-weight:400;color:var(--dpi-muted)}
#dpi-tool.dpi-workspace details.dpi-session[open]{padding-bottom:16px}
#dpi-tool.dpi-workspace .dpi-session .dpi-section-heading{padding-top:8px}
#dpi-tool.dpi-workspace .dpi-method{margin-top:10px;font-size:.8rem}
#dpi-tool.dpi-workspace .dpi-method ul{color:var(--dpi-muted);padding-inline-start:20px}
@media(max-width:1000px){#dpi-tool.dpi-workspace .dpi-setup-row{grid-template-columns:minmax(200px,1fr) 1fr;gap:10px 16px}#dpi-tool.dpi-workspace .dpi-setup-row>.dpi-help{grid-column:1 / -1;max-width:none}}
@media(max-width:800px){#dpi-tool.dpi-workspace .dpi-capture-grid{grid-template-columns:1fr;gap:8px}#dpi-tool.dpi-workspace .dpi-capture-grid>.dpi-results{flex-direction:row}}
@media(max-width:600px){#dpi-tool.dpi-workspace .dpi-primary-test{padding:14px}#dpi-tool.dpi-workspace .dpi-setup-row{grid-template-columns:1fr}#dpi-tool.dpi-workspace .dpi-presets{margin-top:0}#dpi-tool.dpi-workspace .dpi-advanced-grid{grid-template-columns:1fr;gap:4px}#dpi-tool.dpi-workspace .dpi-advanced>summary>span{display:block;margin:4px 0 0 16px}#dpi-tool.dpi-workspace .dpi-track{min-height:165px;padding:14px 10px}#dpi-tool.dpi-workspace .dpi-track strong{font-size:.98rem}#dpi-tool.dpi-workspace .dpi-results{gap:8px;flex-wrap:wrap}#dpi-tool.dpi-workspace .dpi-results>div{padding:12px;flex:1 1 35%}#dpi-tool.dpi-workspace .dpi-results>.dpi-main-result{flex:1.6 1 50%}#dpi-tool.dpi-workspace .dpi-main-result strong{font-size:2rem}#dpi-tool.dpi-workspace .dpi-results strong{overflow-wrap:anywhere}#dpi-tool.dpi-workspace .dpi-measure-heading>span{font-size:.65rem}#dpi-tool.dpi-workspace .dpi-desk-guide{gap:5px}#dpi-tool.dpi-workspace .dpi-actions button{min-height:44px}#dpi-tool.dpi-workspace .dpi-tabs button{font-size:.72rem;padding:8px}#dpi-tool.dpi-workspace .dpi-heading h2{font-size:1.35rem}}
