:root{--brand-blue:#0087dc;--visual-ink:#173449;--visual-muted:#536c7e;--visual-line:#dce7ef}
body.visual-v2{font-family:"Segoe UI","Microsoft JhengHei",sans-serif;color:var(--visual-ink);line-height:1.7;background:#fff}
.visual-v2 .visual-shell{width:100%;max-width:1160px;margin:0 auto;padding:24px 32px 40px;box-sizing:border-box}
.visual-v2 .context-path{display:flex;gap:9px;align-items:center;min-height:22px;line-height:22px;font-size:12px;margin:0 0 24px;color:#657a8a}
.visual-v2 .context-path a{color:#657a8a;text-decoration:none}.visual-v2 .context-path a:hover{color:var(--brand-blue)}
.visual-v2 .page-heading{padding:0;margin:0 0 28px;max-width:none}
.visual-v2 .eyebrow{font-size:12px;font-weight:750;letter-spacing:.09em;line-height:18px;color:var(--brand-blue);margin:0 0 10px}
.visual-v2 .heading-line{display:flex;gap:16px;align-items:center;min-height:56px;margin-bottom:12px}
.visual-v2 .heading-line h1{font-size:40px;line-height:1.25;letter-spacing:-.025em;margin:0;font-weight:650;color:var(--visual-ink)}
.heading-icon{display:flex;width:52px;height:52px;align-items:center;justify-content:center;flex:none;color:var(--brand-blue);background:#edf7fd;border-radius:12px}
.heading-icon svg{width:31px;height:31px;stroke-width:1.6}.visual-v2 .heading-lead{font-size:17px;line-height:1.8;margin:0;color:var(--visual-muted);max-width:900px}
.start-rows{padding:0;margin:0;list-style:none;display:grid;gap:18px}.start-rows>li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:32px;padding:26px 30px;border:1px solid #dce7ef;border-radius:12px;background:#fff;box-shadow:0 4px 18px #17344904}
.step-kicker{display:flex;gap:12px;align-items:center;color:var(--brand-blue);font-size:11px;letter-spacing:.12em;font-weight:700;margin-bottom:12px}.step-icon{display:flex;align-items:center;justify-content:center;background:#edf7fd;width:38px;height:38px;border-radius:9px}.step-icon svg{width:23px;height:23px;stroke-width:1.7}
.visual-v2 .step-copy h2{font-size:24px;line-height:1.4;margin:0 0 10px;letter-spacing:-.015em}.step-copy p{font-size:15px;line-height:1.8;color:var(--visual-muted);margin:0 0 18px;max-width:500px}
.step-link{display:inline-flex;gap:20px;text-decoration:none;color:#0076c2;font-size:14px;font-weight:650;align-items:center}.step-link:hover{color:#005e9c;text-decoration:underline}.step-link span{font-size:19px}
.step-visual{min-width:0}.step-visual figure{margin:0}.step-visual figcaption{font-size:11px;color:#657a8a;margin:7px 0 0;line-height:1.5}.install-visual{height:162px;border-radius:9px;background:linear-gradient(120deg,#f4f9fc,#e9f5fd);display:flex;gap:20px;align-items:center;justify-content:center;flex-direction:column;color:var(--brand-blue)}.install-visual svg{height:68px;width:68px;stroke-width:1.15}.install-visual span{font-size:12px;letter-spacing:.06em;color:#55758b}
.board-viewport{position:relative;height:190px;background:#f1f7fb;border-radius:9px;overflow:hidden}.board-viewport img{position:absolute;max-width:none!important;width:min(500px,195%);height:auto;left:50%;top:50%;transform:translate(-52%,-52.5%)}
.machine-photo{display:block;width:100%;height:190px;object-fit:cover;object-position:center;border-radius:9px}
.visual-v2 .availability-note{font-size:12px;color:#657a8a;line-height:1.8;margin:22px 0 0;max-width:100%}.visual-v2 .find-help{padding-top:18px;margin-top:22px;font-size:14px}.visual-v2 .home-footer,.visual-v2 .public-footer{max-width:1160px;padding-left:32px;padding-right:32px;box-sizing:border-box}
.visual-v2 .manual-search{max-width:100%;padding:24px;background:#f3f8fc;border:1px solid #e1edf5;border-radius:10px;margin:0 0 32px}.visual-v2 .manual-search label{font-size:14px;margin-bottom:12px;color:#29465b}.visual-v2 .search-line{max-width:920px}
.visual-v2 .task-topics{margin-top:0}.visual-v2 .task-topics h2,.visual-v2 .resource-library h2{font-size:20px;line-height:1.4;margin-bottom:18px}.visual-v2 .task-topics a{min-height:62px}.visual-v2 .resource-library{margin-top:34px}.visual-v2 .resource-links{gap:22px}.visual-v2 .resource-links>a{position:relative;border:1px solid #dce7ef;border-radius:10px;padding:24px 24px 24px 82px;min-height:146px;justify-content:center;transition:background .15s}.visual-v2 .resource-links>a:hover{background:#f5faff}.resource-icon{position:absolute;left:24px;top:28px;color:var(--brand-blue)}.resource-icon svg{width:36px;height:36px;stroke-width:1.6}
.visual-v2 #workflow{padding:24px 0 30px;border-top:1px solid var(--visual-line);margin:0}.visual-v2 #workflow>h2{font-size:21px;margin:0 0 16px}.visual-v2 .architecture-flow{gap:16px;margin:0}.visual-v2 .architecture-flow li{padding:16px;border-top-width:2px;border-radius:0 0 7px 7px}.visual-v2 .architecture-flow h3{font-size:17px;margin:8px 0}.visual-v2 .architecture-flow p{font-size:13px;margin:0;color:var(--visual-muted)}
.scenario-section{padding:28px 0;border-top:1px solid var(--visual-line)}.scenario-section>h2{font-size:27px;margin:0 0 10px}.section-lead{font-size:15px;color:var(--visual-muted);margin:0 0 24px}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.scenario-card{border:1px solid #dce7ef;border-radius:12px;overflow:hidden;scroll-margin-top:90px;background:white}.scenario-image{margin:0;background:#f3f8fc;position:relative}.scenario-image img{display:block;width:100%;height:230px;object-fit:cover}.scenario-card#transfer .scenario-image img{object-fit:contain;padding:14px}.scenario-image figcaption{position:absolute;right:12px;bottom:8px;font-size:10px;color:#456679;background:#ffffffe8;padding:2px 7px;border-radius:3px}.scenario-summary{padding:20px 24px 16px}.scenario-summary h3{font-size:22px;margin:0 0 8px}.scenario-summary p{font-size:15px;color:var(--visual-muted);margin:0}.scenario-card details{border-top:1px solid #e5eef4}.scenario-card summary{padding:15px 24px;font-size:13px;font-weight:600;color:#0076c2;cursor:pointer;list-style-position:inside}.scenario-card details[open] summary{background:#f4f9fc}.scenario-detail{padding:8px 24px 24px;overflow-wrap:anywhere;font-size:14px}.scenario-detail p{font-size:14px!important;line-height:1.8;margin:12px 0!important;color:var(--visual-muted)}.scenario-detail section,.scenario-detail .context{display:block!important;padding:14px 0!important;margin:0!important;border:0!important;background:none!important}.scenario-detail h4,.scenario-detail h5{font-size:16px;line-height:1.5;margin:12px 0 8px;color:var(--visual-ink)}.scenario-detail h5{font-size:14px}.scenario-detail ul,.scenario-detail ol{padding-left:20px}.scenario-detail figure{margin:12px 0}.scenario-detail img{width:100%;height:auto}.scenario-detail .context>div{padding:0}.scenario-detail .steps{display:block}
.machine-section{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center;background:#f1f7fb;padding:30px;border-radius:12px;margin-top:14px}.machine-copy h2{font-size:27px;margin:0 0 16px}.machine-copy p{font-size:15px;color:var(--visual-muted);margin:0 0 15px}.machine-copy .video-hint{font-size:12px;margin:0}.hover-player{position:relative;border-radius:9px;overflow:hidden;cursor:pointer;background:#173449;line-height:0}.hover-player video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}.play-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding-left:3px;border-radius:50%;background:#ffffffed;color:var(--brand-blue);font-size:20px;line-height:1;box-shadow:0 3px 20px #0002;pointer-events:none}.playing .play-indicator{opacity:0}.visual-v2 .about-next{margin-bottom:0;font-size:14px}
#page-qr-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-width:44px;padding:3px!important;background:#fff!important;border:1px solid #dce7ef!important;border-radius:6px!important;line-height:0!important;overflow:hidden}#page-qr-toggle img{display:block;width:36px!important;height:36px!important;max-width:none}#page-qr-toggle:hover{border-color:#0087dc!important;background:#f3f9fc!important}#page-qr-dialog .qr-preview-note{font-size:12px;line-height:1.6;color:#657a8a;margin:12px 0 0}
@media(max-width:700px){.visual-v2 .visual-shell{padding:20px 20px 32px}.visual-v2 .context-path{margin-bottom:18px}.visual-v2 .heading-line h1{font-size:31px}.visual-v2 .heading-line{gap:12px}.heading-icon{width:44px;height:44px;border-radius:10px}.heading-icon svg{width:27px;height:27px}.visual-v2 .heading-lead{font-size:15px}.start-rows>li{grid-template-columns:1fr;padding:22px;gap:20px}.visual-v2 .step-copy h2{font-size:22px}.install-visual{height:135px;flex-direction:row;gap:16px}.install-visual svg{width:52px;height:52px}.board-viewport,.machine-photo{height:190px}.visual-v2 .home-footer,.visual-v2 .public-footer{padding-left:20px;padding-right:20px}.visual-v2 .manual-search{padding:18px}.visual-v2 .search-line button{padding:12px 16px}.visual-v2 .resource-links{grid-template-columns:1fr;gap:14px}.visual-v2 .resource-links>a{min-height:132px}.scenario-grid{grid-template-columns:1fr}.scenario-image img{height:200px}.scenario-summary{padding:20px}.scenario-card summary{padding:15px 20px}.scenario-detail{padding:8px 20px 20px}.machine-section{grid-template-columns:1fr;padding:22px;gap:22px}.machine-copy h2{font-size:23px}.visual-v2 .architecture-flow{grid-template-columns:1fr 1fr;gap:12px}.scenario-section>h2{font-size:24px}.visual-v2 .heading-line{min-height:52px}#page-qr-toggle{width:40px!important;height:40px!important;min-width:40px}#page-qr-toggle img{width:32px!important;height:32px!important}}

#page-qr-dialog{height:fit-content;max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto}

/* Workflow and resource icons share the DIATwin blue. */
.visual-v2 .architecture-flow li{position:relative;padding-top:20px}
.visual-v2 .architecture-flow li>b{position:absolute;right:16px;top:16px}
.visual-v2 .workflow-icon{display:flex;width:64px;height:64px;margin:0 0 12px;color:var(--brand-blue)}
.visual-v2 .workflow-icon svg{display:block;width:64px;height:64px;stroke:var(--brand-blue)}
.visual-v2 .resource-links>a .resource-icon{color:var(--brand-blue)}
.visual-v2 .resource-links>a .resource-icon svg{color:var(--brand-blue);stroke:var(--brand-blue)}