:root{--link:#006bb4;--ink:#172b35;--ink-2:#3c505b;--muted:#52636c;--paper:#f4f7f7;--line:#d6dfe1;--control:#80909a;--accent:#007377;--accent-soft:#e8f3f3;--white:#fff;--font:Arial,Helvetica,sans-serif;color-scheme:light}
/* aktiv-grotesk (Adobe Fonts) replaces Arial once app.js confirms both weights loaded. */
html.brand-font{--font:"aktiv-grotesk",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55}button,a,input,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit}a{color:inherit;text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:default}img{max-width:100%;display:block}svg{width:22px;height:22px;flex-shrink:0;vertical-align:middle}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.15;letter-spacing:-.035em}h3{letter-spacing:0}h1{font-size:clamp(32px,3.6vw,46px);font-weight:700}h2{font-size:28px}h3{font-size:20px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #1c78b3;outline-offset:4px;border-radius:4px}.container{width:min(1248px,100%);margin-inline:auto;padding-inline:28px}.skip-link{position:fixed;left:16px;top:-90px;z-index:50;padding:12px 20px;background:var(--ink);color:#fff;border-radius:8px}.skip-link:focus{top:12px}main:focus{outline:none}.site-header{position:relative;background:white;z-index:20}.global-bar{border-bottom:5px solid #595959}.global-inner{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-brand{display:inline-flex;align-items:center;gap:20px;text-decoration:none;flex-shrink:0}.site-brand img{object-fit:contain}.brand-divider{width:1px;height:25px;background:#d4d9dc}.site-name{font-size:24px;letter-spacing:-.035em;font-weight:700}.platform-bar{border-bottom:3px solid var(--accent);transition:border-color .15s}.platform-inner{display:flex;align-items:center;gap:16px;min-height:57px}.home-link{display:flex;align-items:center;justify-content:center;align-self:stretch;width:44px;color:var(--ink-2);flex-shrink:0;text-decoration:none}.home-link:hover,.home-link[aria-current="page"]{color:var(--accent);background:#f1f5f6}.platform-links{display:flex;align-self:stretch;align-items:stretch;gap:4px;flex:1}.platform-link{min-width:max-content;flex:1;max-width:92px;display:flex;align-items:center;justify-content:center;padding:16px 7px;border-bottom:4px solid transparent;text-decoration:none;margin-bottom:-1px;transition:background .15s}.platform-link img{height:18px;width:auto;max-width:none}.platform-link:hover{background:#f4f7f8}.platform-link[aria-current="page"]{border-bottom-color:var(--platform-color);background:var(--tint)}
/* The one way to the downloads page from every page: a quiet text link at the end of the platform bar. */
.platform-downloads{flex:none;margin-left:auto;align-self:center;display:inline-flex;align-items:center;min-height:44px;padding-left:16px;font-size:15px;color:var(--link);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.platform-downloads:hover{color:var(--ink)}
.platform-downloads[aria-current="page"]{font-weight:600;text-decoration-thickness:2px}
@media(max-width:960px){.platform-downloads{padding-left:8px;font-size:14px}}.platform-toggle{display:none}.eyebrow{font-size:12px;font-weight:400;color:var(--muted)}.intro-copy{font-size:18px;color:var(--muted)}.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.platform-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--platform-color);border-radius:12px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s;position:relative}.platform-card:hover{border-color:var(--platform-color)}.platform-card:focus-within{border-color:var(--platform-color)}.card-main{display:block;text-decoration:none;padding:24px 24px 12px}.card-main:focus-visible{outline-offset:-5px;border-radius:8px}.card-logo{height:29px;max-width:185px;width:auto;object-fit:contain;margin:0 auto 8px}.card-art{height:145px;display:flex;align-items:center;justify-content:center;margin:0 -4px}.card-art img{height:100%;width:100%;object-fit:contain}.card-art.art-123 img{max-height:125px}.card-art.art-aim img{max-height:137px}.card-art.art-cte img{max-height:133px}.card-art.art-vr img{max-height:137px}.card-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:16px;font-weight:700}.card-action svg{width:20px;height:20px;color:var(--platform-color);transition:transform .2s}.platform-card:hover .card-action svg{transform:translateX(3px)}.details-link{display:inline-flex;gap:4px;align-items:center;font-size:12px;text-decoration:none;color:var(--ink-2)}.details-link svg{width:13px;height:13px}.details-link:hover{text-decoration:underline;color:var(--ink)}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:24px 0 0;font-size:12px;color:var(--muted)}.breadcrumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:24px}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs svg{height:12px;width:12px}.breadcrumbs [aria-current]{color:var(--ink);font-weight:400}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:47px;padding:12px 20px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;border:1px solid transparent;line-height:1.4;transition:background .15s,box-shadow .15s}.button svg{height:18px;width:18px}.button-primary{background:var(--accent);border-color:var(--accent);color:white}.button-primary:hover{filter:brightness(.91)}.button-outline{border-color:var(--control);background:#fff;color:var(--ink)}.button-outline:hover{border-color:var(--ink);background:#f1f5f6;color:var(--ink)}.button-wide{width:100%}.compatibility{font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px;text-align:center}.compatibility .device-warning{display:block;margin-top:4px;color:#765d24}.device-panel{margin-top:16px;min-height:145px;padding-top:16px;border-top:1px solid var(--line)}.device-panel h3{font-size:18px;margin-bottom:8px}.device-panel p{font-size:12px;color:var(--muted);line-height:1.6}.device-panel .button-row{display:flex;gap:8px;margin-top:16px}.device-panel .button-row .button{flex:1;padding-inline:8px;font-size:14px;min-height:43px}.device-panel .button{margin-top:12px}.device-panel .button-row .button{margin-top:0}.mini-help{margin-top:12px;font-size:14px;color:var(--ink-2)}.mini-help summary{cursor:pointer;padding:4px 0;list-style-position:inside;min-height:28px}.mini-help p{margin:8px 0;max-width:360px}.device-panel .mini-help p{font-size:14px}.download-note{font-size:14px;color:var(--muted);margin-top:auto;padding-top:16px}.download-note a{text-decoration:none}.download-note a:hover{text-decoration:underline}.resource{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:8px;border:1px solid var(--line);text-decoration:none;background:#ffffff80}.resource:hover{background:#fff;border-color:#98aeb7}.resource strong{font-size:14px;display:block;font-weight:700}.resource small{font-size:12px;color:var(--muted);display:block;margin-top:4px}.resource>svg{width:15px;height:15px;margin-left:auto;color:var(--muted)}body{min-height:100dvh;display:flex;flex-direction:column}main{width:100%;flex:1}.not-found{padding:80px 0;text-align:center}.not-found p{color:var(--muted);margin:20px 0}.noscript{padding:32px;background:white;color:#172b35}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.card-art{height:158px}.card-main{padding-top:24px}}
@media(max-width:1100px){.platform-inner{gap:8px}.platform-links{gap:2px}.platform-link img{height:17px}.card-main{padding-inline:16px}.details-link{font-size:12px}}
@media(max-width:820px){.container{padding-inline:24px}.global-inner{min-height:61px}.site-brand{gap:16px}.site-name{font-size:20px}.platform-inner{flex-wrap:wrap;gap:0 12px;min-height:53px}.platform-toggle{border:1px solid var(--control);border-radius:8px;background:#fff;color:var(--ink-2);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;min-height:44px;margin:4px 0;padding:0 12px}.platform-toggle svg{width:15px;height:15px;transition:transform .15s}.platform-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.platform-links{display:none;order:4;flex-basis:100%;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);gap:0;padding:8px 0 12px}.platform-links.is-open{display:grid}.platform-downloads{grid-column:1/-1;justify-content:center;margin:8px 0 0;padding:12px;border-top:1px solid var(--line)}.platform-link{max-width:none;min-height:48px;margin:0;padding:12px 4px}.platform-link img{height:20px}.home-link{min-height:50px}.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card-art{height:144px}.card-main{padding-inline:20px}.details-link{font-size:12px}.resource{padding:16px 12px;gap:8px}}
@media(max-width:650px){.site-brand{gap:12px}.site-brand img{width:58px}.brand-divider{height:21px}.site-name{font-size:20px}.container{padding-inline:20px}.intro-copy{font-size:16px}.platform-card{border-radius:8px}.card-main{padding:20px 16px 12px}.card-logo{height:25px;max-width:145px;margin-bottom:8px}.card-art{height:119px}.card-action{font-size:14px;margin-top:8px}.card-action svg{width:18px;height:18px}.platform-grid{gap:12px}.device-panel{min-height:135px}.resource{padding:12px 16px}.resource small{display:inline;font-size:12px}.resource strong{font-size:14px}}
@media(max-width:390px){.container{padding-inline:16px}.platform-grid{grid-template-columns:1fr}.card-main{padding:20px}.card-logo{height:28px;max-width:175px}.card-art{height:150px}.card-action{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.platform-card:hover,.platform-card:hover .card-art img{transform:none}}
/* Platform first. Two deliberately simple page types. */
.landing-page{padding:0;max-width:none}.platform-selection{padding-top:64px;padding-bottom:76px}.platform-selection h2{font-size:32px;margin-bottom:32px}.platform-selection .platform-grid{gap:24px}.platform-selection .platform-card{border-top-width:4px}.platform-selection .card-main{padding:28px 24px 20px}.platform-selection .card-logo{height:33px;max-width:200px;margin-bottom:16px}.platform-selection .card-art{height:165px}.platform-selection .card-action{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;font-size:16px}.platform-selection .card-action span{color:var(--ink-2)}.platform-intro{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:40px;align-items:center;padding:28px 0 32px}.platform-intro .platform-wordmark{height:25px;width:auto;max-width:173px;object-fit:contain;object-position:left;margin-bottom:12px}.platform-intro h1{font-size:40px;margin-bottom:12px;text-wrap:balance}.platform-intro .intro-copy{font-size:16px;max-width:680px}.platform-art{height:134px}.platform-art img{width:100%;height:100%;object-fit:contain}.platform-layout{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(340px,1fr);align-items:start;gap:44px;margin-bottom:60px}.column-title{font-size:28px;margin:0 0 20px}.get-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}.get-card .compatibility{font-size:14px;text-align:left;margin-top:12px;line-height:1.55}.get-card .compatibility br{display:none}.get-card .compatibility br:after{content:' '}.get-card .device-panel{min-height:0;padding-top:16px;margin-top:16px}.get-card .device-panel h3{font-size:16px}.get-card .device-panel p{font-size:14px}.get-card .button-row .button{font-size:14px;min-height:42px}.get-card .mini-help{font-size:14px;margin-top:8px}.get-card .download-note{font-size:14px}.mode-badge{font-size:12px;font-weight:400;letter-spacing:0;color:var(--ink-2);background:#e9eef0;border:1px solid var(--line);border-radius:4px;padding:2px 8px}
@media(min-width:1500px){.platform-layout{gap:52px}.platform-selection .card-art{height:185px}}
@media(max-width:1050px){.platform-layout{grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr);gap:28px}.get-card{padding:20px}.platform-intro h1{font-size:40px}}
@media(max-width:820px){.platform-layout{grid-template-columns:minmax(0,1fr) minmax(290px,.9fr);gap:24px}.get-card{padding:20px}.column-title{font-size:24px}.platform-selection .platform-grid{gap:20px}.platform-selection .card-main{padding:24px 20px 20px}.platform-intro{grid-template-columns:minmax(0,1fr) 145px;gap:20px}.platform-intro .intro-copy{font-size:16px}.platform-intro h1{font-size:40px}.platform-art{height:121px}}
@media(max-width:680px){.platform-selection{padding-top:40px;padding-bottom:44px}.platform-selection h2{font-size:28px;margin-bottom:24px}.platform-selection .platform-grid{gap:16px}.platform-selection .card-main{padding:20px 16px 16px}.platform-selection .card-logo{height:26px;max-width:153px;margin-bottom:12px}.platform-selection .card-art{height:130px}.platform-selection .card-action{font-size:14px;margin-top:12px;padding-top:12px}.platform-intro{padding:24px 0 28px;grid-template-columns:minmax(0,1fr) 104px}.platform-intro .platform-wordmark{height:21px;max-width:139px}.platform-intro h1{font-size:32px}.platform-intro .intro-copy{font-size:16px}.platform-art{height:104px}.platform-layout{display:flex;flex-direction:column;gap:32px;margin-bottom:36px}.ways-column,.get-column{width:100%}.get-column{position:static;order:-1}.get-card{padding:24px}.column-title{font-size:24px;margin-bottom:16px}.get-card .button-row .button{font-size:14px}.get-card .device-panel h3{font-size:16px}.get-card .device-panel p{font-size:14px}.get-card .compatibility{font-size:14px}}
@media(max-width:390px){.platform-selection .platform-grid{grid-template-columns:1fr}.platform-selection .card-art{height:175px}.platform-selection .card-logo{height:31px;max-width:190px}.platform-selection .card-main{padding:28px 24px 20px}.platform-selection .card-action{font-size:16px}.get-card{padding:20px}}
.video-error{padding:32px;color:#fff;font-size:14px}.video-error a{text-decoration:underline}
.platform-selection{padding-top:28px;padding-bottom:44px}
.platform-selection h2{font-size:28px;margin-bottom:24px}
.platform-selection .platform-grid{gap:20px}
.platform-selection .card-main{padding:20px 24px 16px}
.platform-selection .card-logo{height:28px;max-width:180px;margin-bottom:8px}
.platform-selection .card-art{height:120px}
.platform-selection .card-action{margin-top:12px;padding-top:12px;font-size:16px}
@media(max-width:820px){
 .platform-selection .card-art{height:114px}
}
@media(max-width:560px){
 .platform-selection{padding-top:24px;padding-bottom:32px}
 .platform-selection h2{font-size:24px;margin-bottom:20px}
 .platform-selection .platform-grid{gap:12px}
 .platform-selection .card-main{padding:16px 12px 16px}
 .platform-selection .card-logo{height:25px;max-width:143px;margin-bottom:8px}
 .platform-selection .card-art{height:105px}
 .platform-selection .card-action{font-size:14px;margin-top:8px;padding-top:12px}
}
@media(max-width:390px){
 .platform-selection .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .platform-selection .card-main{padding:16px 8px 12px}
 .platform-selection .card-logo{height:23px;max-width:125px}
 .platform-selection .card-art{height:92px}
 .platform-selection .card-action{font-size:14px}
}
/* Every coding method is visible; clips open without hiding the list. */
.coding-methods{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.method-card{display:grid;grid-template-columns:minmax(0,1fr) 156px;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.method-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 8px;margin-bottom:8px}
.method-heading h3{font-size:20px}
.method-copy>p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.method-clip-label{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.method-watch{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:8px;background:#f5f8f9;overflow:hidden;padding:0;color:var(--ink-2)}
.method-watch>img{width:100%;height:100%;object-fit:contain;background:white}
.method-watch::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#102431cc,transparent 65%);pointer-events:none}
.method-play{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:white;z-index:1;box-shadow:0 2px 8px #132a3a25}
.method-play svg{width:15px;height:15px;fill:currentColor;margin-left:2px}
.method-watch:hover .method-play{background:var(--ink);color:white}
.method-watch-label{position:absolute;left:8px;right:8px;bottom:6px;display:flex;justify-content:space-between;gap:8px;color:white;z-index:1;font-size:13px;font-weight:700;line-height:1.4}
.method-watch-label>span:last-child{font-weight:400}
.clip-dialog{width:min(890px,calc(100% - 36px));max-height:calc(100dvh - 40px);border:0;border-radius:12px;padding:24px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #07192360;overflow:auto}
.clip-dialog::backdrop{background:#10212ccc;backdrop-filter:blur(2px)}
.clip-dialog form{position:absolute;right:16px;top:14px}
.clip-close{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:8px;background:#edf2f4;color:var(--ink-2)}
.clip-close:hover{background:#dfe8ec}
.clip-dialog .eyebrow{padding-right:44px;margin-bottom:8px;color:var(--ink-2)}
.clip-dialog h2{padding-right:40px;font-size:28px;margin-bottom:20px;line-height:1.25}
.dialog-player{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0d1a23}
.dialog-player video{display:block;width:100%;height:100%;object-fit:contain}
.dialog-description{font-size:14px;color:var(--ink-2);line-height:1.7;margin-top:16px}
.dialog-source{display:inline-block;font-size:12px;color:#476b7c;margin-top:8px}
@media(max-width:1050px){.method-card{grid-template-columns:minmax(0,1fr) 120px;gap:16px;padding:16px}.method-heading h3{font-size:20px}.method-copy>p{font-size:14px}.method-heading .mode-badge{font-size:12px}}
@media(min-width:681px) and (max-width:820px){.method-card{grid-template-columns:1fr}.method-watch{width:155px;justify-self:start}.method-copy>p{font-size:14px}}
@media(max-width:680px){.method-card{grid-template-columns:minmax(0,1fr) 125px;gap:16px;padding:16px}.method-heading h3{font-size:20px}.method-copy>p{font-size:14px}.clip-dialog{padding:20px;width:calc(100% - 24px)}.clip-dialog h2{font-size:24px}.clip-dialog form{right:12px;top:12px}.dialog-description{font-size:12px}}
@media(max-width:390px){.method-card{grid-template-columns:minmax(0,1fr) 100px;gap:12px;padding:16px}.method-heading h3{font-size:20px}.method-copy>p{font-size:14px}.method-watch-label{font-size:13px;left:6px;right:6px}.method-play{width:29px;height:29px}}
/* VEX identity, a memorable shortcut, and a clearly labeled motion control. */
.brand-lockup{display:flex;align-items:center;gap:20px;min-width:0}
.corporate-brand{display:flex;align-items:center;flex:none;text-decoration:none}
.corporate-brand img{width:70px;height:32px;object-fit:contain}
.brand-lockup .site-brand{gap:16px;min-width:0}
.site-shortcut{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;white-space:nowrap;padding-left:16px;border-left:1px solid var(--line);line-height:1.3}
.site-brand:hover .site-shortcut{text-decoration:underline;text-underline-offset:4px}
/* Technical information is a pair of visible destinations beside the platform intro. */
.platform-intro{gap:24px;align-items:center;padding:28px 0 32px}
.platform-intro h1{font-size:clamp(32px,3.2vw,42px)}
.platform-intro .intro-copy{font-size:16px;line-height:1.6;max-width:600px}
.platform-art{height:120px}
.platform-art.art-iq img,.platform-art.art-cte img{mix-blend-mode:multiply}
/* Each method explains its audience, action, and purpose. */
.method-card{grid-template-columns:minmax(0,1fr) 190px;gap:24px;padding:24px;align-items:start}
.method-heading{margin-bottom:16px;gap:8px 8px}
.method-heading h3{font-size:24px}
.method-heading .mode-badge{font-size:12px;line-height:1.4}
.method-value+.method-detail,.method-detail+.method-detail{margin-top:16px}
.method-detail h4{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink-2);margin:0 0 4px;letter-spacing:.01em}
.method-detail p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0}
.method-media{margin-top:4px;min-width:0}
.method-watch{aspect-ratio:16/10}
.method-play{width:40px;height:40px}
.method-play svg{width:18px;height:18px}
.method-watch-label{font-size:13px;left:10px;right:10px;bottom:8px}
.method-clip-label{font-size:12px;line-height:1.5;margin-top:8px}
.method-card.method-card-text{grid-template-columns:1fr}
@media(max-width:1100px){.platform-intro{gap:20px}.platform-art{height:100px}.platform-intro .intro-copy{font-size:16px}.method-card{grid-template-columns:minmax(0,1fr) 150px;gap:20px;padding:20px}.method-detail p{font-size:16px}.method-heading h3{font-size:24px}.method-watch-label{font-size:13px}}
@media(max-width:900px){.platform-intro{gap:24px}.platform-intro .platform-art{display:none}.method-card{grid-template-columns:1fr}.method-media{width:min(100%,240px);margin-top:0}.method-watch{width:100%}.method-heading h3{font-size:24px}.method-detail p{font-size:16px}.method-watch-label{font-size:13px}}
@media(max-width:680px){.brand-lockup{gap:16px}.corporate-brand img{width:58px;height:29px}.brand-lockup .site-brand{flex-direction:column;align-items:flex-start;gap:4px}.site-name{font-size:20px}.site-shortcut{border:0;padding:0;font-size:12px;line-height:1.2}.global-inner{gap:16px}.platform-intro{grid-template-columns:minmax(0,1fr) 104px;gap:20px;padding:24px 0 28px}.platform-intro .platform-art{display:flex;height:104px}.platform-intro .intro-copy{font-size:16px}.platform-intro h1{font-size:32px}.method-card{grid-template-columns:1fr;padding:24px;gap:20px}.method-heading h3{font-size:24px}.method-media{width:100%;max-width:330px}.method-detail p{font-size:16px}.method-detail h4{font-size:14px}}
@media(max-width:390px){.global-inner{gap:8px}.brand-lockup{gap:8px}.corporate-brand img{width:49px;height:26px}.brand-lockup .brand-divider{height:27px}.site-name{font-size:20px}.site-shortcut{font-size:12px}.method-card{padding:20px}}
/* Official screenshot collections stay scannable as the gallery grows. */
/* Resource shortcuts replace the duplicate platform chooser in the global header. */
.utility-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 24px}
.utility-nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:8px;font-size:13px;line-height:1.4;font-weight:700;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.utility-nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* Hover backgrounds stay above the uninterrupted platform-color rule. */
.platform-link{margin-bottom:0}
/* The robot is the page's one picture. Its image is trimmed to the robot (platforms.js introArt), so every robot fills
   the same box; it stands on the box's bottom edge over a soft ground shadow drawn by .art-stage. */
.platform-intro{grid-template-columns:minmax(0,1fr) 320px}
.platform-intro .platform-art{--art-w:320px;--art-h:204px;display:flex;align-items:flex-end;justify-content:center;height:calc(var(--art-h) + 16px);min-width:0;padding-bottom:12px}
.art-stage{position:relative;display:flex}
.art-stage img{position:relative;z-index:1;width:auto;height:auto;max-width:min(var(--art-w) * var(--art-scale,1),100%);max-height:calc(var(--art-h) * var(--art-scale,1))}
/* The 123 robot is a wide, solid shape that reads larger than the others at the same box size. */
.platform-art.art-123{--art-scale:.82}
.art-stage::after{content:"";position:absolute;left:6%;right:6%;bottom:-8px;height:16px;border-radius:50%;background:radial-gradient(closest-side,#172b352e,#172b3500)}
@media(max-width:1100px){.platform-intro{grid-template-columns:minmax(0,1fr) 240px;gap:20px}.platform-intro .platform-art{--art-w:240px;--art-h:164px}.utility-nav{gap:4px 16px}}
@media(max-width:900px){.platform-intro{grid-template-columns:minmax(0,1fr) 220px;gap:24px}.platform-intro .platform-art{--art-w:220px;--art-h:156px}}
@media(max-width:800px){.global-inner{flex-wrap:wrap;row-gap:0;padding-top:12px;padding-bottom:2px}.utility-nav{flex:0 0 100%;justify-content:flex-start;gap:0 20px;margin-top:4px}}
@media(max-width:680px){.platform-intro{grid-template-columns:minmax(0,1fr) 130px;gap:20px}.platform-intro .platform-art{--art-w:130px;--art-h:120px}.utility-nav{gap:0 16px}.utility-nav a{font-size:12px}}
@media(max-width:390px){.platform-intro{grid-template-columns:minmax(0,1fr) 120px;gap:16px}.platform-intro .platform-art{--art-w:120px;--art-h:112px}.utility-nav{column-gap:12px}}
/* Method card padding, shared by the breakpoints below. */
.method-card{--method-padding:24px;padding:var(--method-padding)}
.method-examples{list-style:disc;padding-left:20px;margin:0;color:var(--ink-2);font-size:14px;line-height:1.65}
.method-examples li+li{margin-top:4px}
.method-examples li::marker{color:var(--muted)}
@media(max-width:1100px){.method-card{--method-padding:20px}.method-examples{font-size:14px}}
@media(max-width:900px){.method-examples{font-size:14px}}
@media(max-width:680px){.method-card{--method-padding:24px}.method-examples{font-size:16px}}
@media(max-width:390px){.method-card{--method-padding:20px}}
.method-preview{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f5f8f9;text-decoration:none;color:var(--ink-2)}
.method-preview img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff}
.method-preview>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;font-size:14px;font-weight:700;border-top:1px solid var(--line)}
.method-preview>span svg{width:17px;height:17px}
.method-preview:hover{border-color:var(--ink)}
/* Platform-matched screenshots on method cards open in the viewer, like clips. */
.method-still{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f5f8f9;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer}
.method-still img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff}
.method-still>span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;font-size:14px;font-weight:700;border-top:1px solid var(--line)}
.method-still>span svg{width:17px;height:17px}
.method-still:hover{border-color:var(--ink)}
/* GO Digital Coder: the VEX Digital Coder shot is cropped to the app's gray background around the Coder, so it fills the box
   (the card's box is taller than 16:10 on desktop) instead of showing white bands. */
.method-card[data-method="coder"] .method-still img{object-fit:cover}
/* Phones can't run VEXcode; say so before the browser button. */
.phone-notice{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;padding:16px 16px;border-radius:8px;background:#f1f5f6;color:var(--ink);font-size:14px;line-height:1.5}
.phone-notice svg{width:22px;height:22px;margin-top:1px;color:var(--ink-2)}
.phone-notice strong{display:block}
/* Image viewer: the shared dialog shows screenshots at their own proportions. */
.dialog-source[hidden],.dialog-description[hidden]{display:none}
.dialog-player.is-image{aspect-ratio:auto;background:#fff;border:1px solid var(--line)}
.dialog-player.is-image img{display:block;width:100%;height:auto;max-height:calc(100dvh - 210px);object-fit:contain}
/* Phones: the viewer uses the full width; landscape gives the video the whole height. */
@media(max-width:680px){
  .clip-dialog{width:100%;max-width:100%;padding:16px 12px;border-radius:0}
  .clip-dialog .eyebrow{padding-left:4px}
  .clip-dialog h2{padding-left:4px}
}
@media(max-height:500px) and (orientation:landscape){
  .clip-dialog{width:100%;max-width:100%;max-height:100dvh;padding:8px 16px;border-radius:0}
  .clip-dialog .eyebrow{margin-bottom:2px}
  .clip-dialog h2{font-size:18px;margin-bottom:8px}
  .dialog-player{height:calc(100dvh - 76px);aspect-ratio:auto}
  .dialog-description{display:none}
}
/* The phone platform menu opens over the page instead of pushing it down. Logos are sized by height only,
   so the panel narrows its edges at 360px to keep the widest logo whole. */
@media(max-width:820px){
  .platform-inner{position:relative}
  .platform-links{position:absolute;top:100%;left:0;right:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 28px #172b3526;padding:8px 20px 16px;max-height:calc(100dvh - 140px);overflow:auto}
}
@media(max-width:360px){.platform-links{padding-inline:16px}}
/* The header scrolls away with the page (nothing is pinned). The VEX resource row keeps the shared VEX top-bar
   style from vex-chrome.css. */
/* Platform intro: the ways to code as jump links to their cards. */
.intro-methods a{color:var(--link);font-weight:400;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.intro-methods a:hover{text-decoration:underline;text-underline-offset:3px}
.method-card:focus{outline:none}
/* Platform tabs, as on api.vex.com and VEX Audience: the current and hovered tab fills with the platform
   color and switches to VEX's white logo (content.vexrobotics.com/vexheader). Every fill is at least
   5:1 against white, so the current tab needs no underline. */
.platform-link{border-bottom:0;margin-bottom:0}
.platform-link:hover,.platform-link[aria-current="page"]{background:var(--platform-color)}
.platform-link .tab-logo-white,.platform-link:hover .tab-logo,.platform-link[aria-current="page"] .tab-logo{display:none}
.platform-link:hover .tab-logo-white,.platform-link[aria-current="page"] .tab-logo-white{display:block}
.home-link:hover,.home-link[aria-current="page"]{color:#fff;background:var(--accent)}
/* Home: why code with VEX, beside a real classroom. Copy and photo from vexrobotics.com/vexcode. */
.landing-hero{background:#fff;border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:64px;align-items:center;padding-block:52px 60px}
.hero-copy h1{font-size:clamp(36px,3.7vw,50px);line-height:1.08;letter-spacing:-.04em;max-width:13em;text-wrap:balance}
.hero-copy h1 span{color:#d22630}
.hero-lede{font-size:20px;line-height:1.5;color:var(--muted);margin-top:16px;max-width:30em;text-wrap:pretty}
.hero-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;max-width:34em}
.hero-points li{position:relative;padding-left:20px;font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.hero-points li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:4px;background:#d22630}
.hero-points strong{color:var(--ink)}
.hero-media{position:relative;margin-bottom:24px}
.hero-media picture{display:block}
.hero-photo{width:100%;height:auto;aspect-ratio:1000/788;object-fit:cover;border-radius:12px}
.hero-code{position:absolute;left:-40px;bottom:-24px;width:max-content;max-width:calc(100% + 40px);margin:0;padding:16px;display:grid;grid-template-columns:minmax(0,max-content);gap:8px;justify-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #172b3529}
.hero-code img{max-width:100%;height:auto}
.hero-code .path-code{font-size:12px;white-space:nowrap;overflow-wrap:normal}
.platform-selection:focus{outline:none}
.platform-selection{scroll-margin-top:0}
@media(max-width:1100px){
 .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:44px}
 .hero-code{left:-28px}
}
@media(max-width:820px){
 .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;padding-block:36px 44px}
 .hero-copy h1{font-size:clamp(30px,4.6vw,38px)}
 .hero-lede{font-size:18px}
 .hero-points li{font-size:16px}
 .hero-media{margin-bottom:0}
 .hero-code{position:relative;left:auto;right:auto;bottom:auto;width:fit-content;max-width:100%;margin:-40px 0 0 auto}
}
@media(max-width:820px){
 .hero-inner{grid-template-columns:1fr}
 .hero-media{max-width:560px;margin-bottom:0}
}
@media(max-width:560px){
 .hero-inner{gap:28px;padding-block:28px 32px}
 .hero-copy h1{font-size:clamp(30px,8.6vw,38px)}
 .hero-lede{font-size:18px;margin-top:12px}
 .hero-points{margin-top:20px;gap:12px}
 .hero-points li{font-size:16px}
  .hero-photo{aspect-ratio:16/10}
 .hero-code{display:none}
}
/* Narrow download cards stack the two Mac buttons instead of wrapping their labels. */
.get-card .button-row{flex-wrap:wrap}
.get-card .button-row .button{flex:1 1 140px;white-space:nowrap}
/* Get it free: the browser version and the app download are two separate cards. */
.get-column>.get-card+.get-card{margin-top:16px}
.get-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.get-head h3{font-size:18px}
.get-web .compatibility{margin-top:12px}
.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:step}
.setup-steps li{counter-increment:step}
.setup-steps .button::before{content:counter(step) "."}
.get-vscode .download-note{padding-top:12px}
.device-tabs{display:flex;flex-wrap:wrap;gap:8px}
.device-tab{flex:1 1 auto;white-space:nowrap;min-height:44px;padding:8px 12px;border:1px solid var(--control);border-radius:8px;background:#fff;color:var(--ink-2);font-size:14px;font-weight:700;transition:border-color .15s,background-color .15s,color .15s}
.device-tab:hover{border-color:var(--ink);color:var(--ink)}
.device-tab[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.get-app .device-panel{min-height:0;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.download-lead{font-size:14px;color:var(--muted);margin-bottom:12px}
.get-app .button-row{margin-top:0}
.get-app .download-note{margin-top:16px;padding-top:0}
.get-column>.phone-notice{margin-bottom:16px}.get-column>.get-card+.phone-notice{margin-top:16px}
/* Requirements sit under the two cards as their own quiet row. */
/* VEXcode 5: what it is, what's new, and what isn't there yet. */
.v5x-intro{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,560px);gap:48px;align-items:center;padding:28px 0 40px}
.v5x-intro h1{font-size:40px;margin:4px 0 12px}
.v5x-lede{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:32em}
.v5x-works{font-size:16px;color:var(--muted);margin-top:12px;max-width:34em}
.v5x-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.v5x-actions .button{width:auto;margin-top:0;padding-inline:20px}
.v5x-shot{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.v5x-shot img{width:100%;height:auto}
.v5x-shot:focus-visible{outline-offset:-4px}
.v5x-section{padding:32px 0;border-top:1px solid var(--line)}
.v5x-section h2{font-size:28px;margin-bottom:20px}
.v5x-highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.v5x-highlights li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
/* Nine cards sit three across on wide screens instead of leaving one alone on a fourth row. */
@media(min-width:900px){.v5x-highlights-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v5x-thumb{display:block;margin-bottom:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:4/3}
.v5x-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.v5x-thumb:hover{border-color:var(--ink)}
/* Phones: the screenshot sits beside the card title instead of filling the width, so eight cards stay a short section. */
@media(max-width:599px){.v5x-shot-card{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:center}.v5x-shot-card .v5x-thumb{margin:0}.v5x-shot-card h3{margin:0}.v5x-shot-card p{grid-column:1/-1;margin-top:12px}}
.v5x-robots{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:112px;margin-bottom:16px}
.v5x-robots img{flex:1 1 0;min-width:0;height:100%;object-fit:contain}
.v5x-projects{font-size:14px;color:var(--muted);margin-top:16px;max-width:34em}
/* Easier to use: a two-column list on hairlines instead of a third grid of boxes. */
.v5x-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.v5x-list li{padding:16px 0;border-top:1px solid var(--line)}
.v5x-list h3{font-size:16px;letter-spacing:0;margin-bottom:4px}
.v5x-list p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:36em}
@media(max-width:680px){.v5x-list{grid-template-columns:minmax(0,1fr)}.v5x-list li+li{margin-top:0}}
/* Menu paths as keycaps: keyboard access is the story of the release. */
.v5x-path{white-space:nowrap}
.v5x-path kbd{display:inline-block;font:600 14px/1.3 var(--font);padding:2px 8px;border:1px solid #b8c6cb;border-bottom-width:2px;border-radius:6px;background:#f6f8f9;color:var(--ink)}
.v5x-sep{margin:0 4px;color:var(--muted)}
.v5x-highlights h3{font-size:18px;margin-bottom:8px}
.v5x-highlights p{font-size:16px;line-height:1.55;color:var(--ink-2)}
/* VEXcode 4.X beside 5.X: the 5.X column carries the change, so it reads in full ink. */
.v5x-compare-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.v5x-compare{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.v5x-compare th,.v5x-compare td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.v5x-compare thead th,.v5x-compare thead td{border-top:0;font-size:14px;color:var(--ink-2);background:#f6f8f9}
.v5x-compare tbody th{width:24%;font-weight:700;color:var(--ink)}
.v5x-compare tbody td{color:var(--muted);width:34%}
.v5x-compare tbody td+td{color:var(--ink);width:auto}
@media(max-width:680px){.v5x-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.v5x-compare,.v5x-compare tbody,.v5x-compare tr,.v5x-compare th,.v5x-compare td,.v5x-compare tbody th,.v5x-compare tbody td,.v5x-compare tbody td+td{display:block;width:auto}.v5x-compare tbody tr{padding:16px 20px}.v5x-compare tbody tr+tr{border-top:1px solid var(--line)}.v5x-compare tbody th,.v5x-compare tbody td{padding:0;border-top:0}.v5x-compare tbody th{margin-bottom:8px}.v5x-compare tbody td,.v5x-compare tbody td+td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}.v5x-compare tbody td+td{margin-top:4px}.v5x-compare td::before{content:attr(data-label);color:var(--muted);font-size:14px}}
@media(max-width:820px){
 .v5x-intro{grid-template-columns:1fr;gap:28px}
 .v5x-intro h1{font-size:32px}
}
/* Jump links under a platform title: a taller hit area without changing how the line looks. */
.intro-methods a{display:inline-block;padding:8px 2px;margin:-8px -2px}
@media(pointer:coarse){.intro-methods a{padding:12px 4px;margin:-12px -4px}}
/* The page behind an open viewer stays put. */
html:has(#clip-dialog[open]){overflow:hidden}
.device-needs{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.device-needs strong{color:var(--ink-2);margin-right:4px}
/* Privacy facts sit under the two cards as a quiet row. */
.privacy-note h3{font-size:16px;margin-bottom:8px}
.privacy-note ul{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.privacy-note li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.privacy-note li svg{width:16px;height:16px;margin-top:3px;color:var(--ink-2);flex:none}
.privacy-link{display:inline-flex;align-items:center;min-height:24px;font-size:14px;font-weight:400;color:var(--link)}
.privacy-link svg{width:14px;height:14px}
/* The API tile has one label, its section heading; the card is the list of what's inside. */
.api-card h3{font-size:16px;margin-bottom:8px}
.api-card .api-features{margin-top:0}
.api-card .button{margin-top:20px}
.download-note .details-link{font-size:inherit;min-height:24px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
/* Research proof on the home page */
.research{padding-bottom:64px}
.research::before{content:"";display:block;border-top:1px solid var(--line);margin-bottom:56px}
.research h2{font-size:28px;margin-bottom:24px}
.research-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.research-item{display:flex;flex-direction:column;gap:12px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:12px}
.research-topic{font-size:14px;font-weight:700;color:var(--ink-2)}
.research-finding{font-size:16px;line-height:1.55;color:var(--ink)}
.research-source,.research-more{display:inline-flex;align-items:center;min-height:24px;align-self:flex-start;width:fit-content;font-size:14px;line-height:1.5;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.research-source{margin-top:auto;color:var(--ink-2);display:inline-flex;align-items:center;min-height:24px}
.research-source:hover,.research-source:focus-visible{text-decoration:underline;text-underline-offset:3px}
.research-source:hover,.research-more:hover{color:var(--ink)}
.research-more{margin-top:24px;font-weight:400}
@media(max-width:820px){.research-list{grid-template-columns:1fr;gap:12px}.research-item{padding:20px}}
@media(max-width:680px){.research{padding-bottom:44px}.research::before{margin-bottom:40px}.research h2{font-size:24px;margin-bottom:20px}}
/* Downloads: every app and device on one page */
.dl-intro{padding:28px 0 24px}
.dl-intro h1{font-size:40px}
.dl-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
/* Fixed columns sized to their longest content, so "Installer MSI MSI guide" and "Google Play APK" each stay on one line. */
@media(min-width:1181px){.dl-table{table-layout:fixed}.dl-col-app{width:17%}.dl-col-web{width:14%}.dl-col-win{width:17%}.dl-col-mac{width:15%}.dl-col-ipad{width:10%}.dl-col-android{width:14%}.dl-col-fire{width:13%}}
.dl-table thead th{font-size:14px;font-weight:600;color:var(--ink-2);text-align:left;padding:12px 16px;background:#f2f6f7;border-bottom:1px solid var(--line)}
.dl-table tbody th,.dl-table td{padding:16px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
.dl-table tbody tr:last-child>*{border-bottom:0}
.dl-table tbody .dl-group th{border-left:0;width:auto;padding:24px 16px 8px;font-size:14px;font-weight:600;color:var(--ink-2);background:#fff}
.dl-table tbody tr:first-child.dl-group th{padding-top:12px}
.dl-table tbody th{border-left:4px solid var(--platform-color);font-weight:400;width:208px}
.dl-app{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.dl-also{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dl-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px}
.dl-link{display:inline-flex;align-items:center;min-height:24px;padding:4px 0;font-size:14px;font-weight:400;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.dl-link:hover{color:var(--ink)}
.dl-guide{display:inline-flex;align-items:center;min-height:24px;font-size:13px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.dl-guide:hover{color:var(--ink)}
.dl-none{color:var(--muted)}
.dl-table tbody .dl-has-sub>*{border-bottom:0;padding-bottom:8px}
.dl-table tbody .dl-sub td{padding-top:0}
.dl-table tbody .dl-sub td:first-child{border-left:4px solid var(--platform-color)}
.dl-tablets{background:#f2f6f7;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.dl-tablets-phone{display:none}
/* Reading across and down: column gridlines, a header that stays in view while the table scrolls, and the row and column
   under the pointer (or keyboard focus) tinted so an app and a device meet at one cell. Wide screens only; phones get cards. */
@media(min-width:1181px){
.dl-table{overflow:visible}
.dl-table thead th{position:sticky;top:0;z-index:2;color:var(--ink)}
.dl-table thead th:first-child{border-top-left-radius:12px}.dl-table thead th:last-child{border-top-right-radius:12px}
/* While the header is stuck, rows scroll under it; paint the page color outside its rounded corners so no row color shows there. */
.dl-table thead th:first-child::before,.dl-table thead th:last-child::before{content:"";position:absolute;top:-1px;width:13px;height:13px;pointer-events:none}
.dl-table thead th:first-child::before{left:-1px;background:radial-gradient(circle at 100% 100%,transparent 11.5px,var(--line) 11.5px,var(--line) 12.5px,var(--paper) 12.5px)}
.dl-table thead th:last-child::before{right:-1px;background:radial-gradient(circle at 0 100%,transparent 11.5px,var(--line) 11.5px,var(--line) 12.5px,var(--paper) 12.5px)}
.dl-table thead th+th,.dl-table tbody tr.dl-row>td,.dl-table tbody .dl-sub td+td{border-left:1px solid var(--line)}
.dl-table tbody tr:last-child>:first-child{border-bottom-left-radius:12px}.dl-table tbody tr:last-child>:last-child{border-bottom-right-radius:12px}
.dl-table tbody tr.dl-row:is(:hover,:focus-within)>*,.dl-table:has(tbody tr.dl-row>:nth-child(2):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(2),.dl-table:has(tbody tr.dl-row>:nth-child(3):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(3),.dl-table:has(tbody tr.dl-row>:nth-child(4):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(4),.dl-table:has(tbody tr.dl-row>:nth-child(5):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(5),.dl-table:has(tbody tr.dl-row>:nth-child(6):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(6),.dl-table:has(tbody tr.dl-row>:nth-child(7):is(:hover,:focus-within)) :is(thead th,tbody tr.dl-row>*):nth-child(7){background:#f2f8f9}
.dl-table tbody tr.dl-row>td:is(:hover,:focus-within){background:#e3f0f2}
}
.dl-works{flex-basis:100%;font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:2px}
@media(max-width:1180px){
.dl-table,.dl-table tbody,.dl-table tr{display:block}
.dl-table{border:0;background:transparent;overflow:visible}
.dl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.dl-table tbody tr{background:#fff;border:1px solid var(--line);border-top:4px solid var(--platform-color);border-radius:12px;margin-bottom:16px;padding:20px}
.dl-table tbody th{grid-column:1/-1;width:auto;border:0;padding:0 0 12px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.dl-table td,.dl-table tbody tr:last-child>td{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;border:0;border-top:1px solid var(--line);padding:12px 0}
.dl-table td::before{content:attr(data-label);font-size:14px;font-weight:600;color:var(--ink-2)}
.dl-table td:has(.dl-none),.dl-table tbody tr:last-child>td:has(.dl-none){display:none}
.dl-table tbody tr.dl-sub{display:none}.dl-tablets-phone{display:block}
.dl-table tbody tr.dl-group{background:none;border:0;border-radius:0;padding:16px 0 4px;margin:0}.dl-table tbody .dl-group th,.dl-table tbody tr:first-child.dl-group th{padding:0;background:none;font-size:20px;font-weight:600;color:var(--ink)}
.dl-links{flex-direction:row;flex-wrap:wrap;align-items:center}
.dl-link{flex:0 1 auto}
}
@media(max-width:560px){.dl-intro h1{font-size:32px}.dl-table tbody tr{padding:16px}.dl-table td,.dl-table tbody tr:last-child>td{grid-template-columns:1fr;gap:8px}}
/* Ways to code: one class at several levels, and one real command shown in every mode the platform has. */
.ways-intro{margin:0 0 20px;max-width:44em}
.ways-intro p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.ways-intro p+p{margin-top:12px}
.ways-intro .ways-research{font-size:14px;color:var(--muted);margin-top:8px}
.ways-source{color:var(--link);text-underline-offset:3px;white-space:nowrap}
.pathway{margin:0 0 24px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:12px;container-type:inline-size}
.pathway figcaption{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px}
.pathway ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.pathway li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px;min-height:36px}
/* Side by side needs the label column plus the widest block at full size; narrower, each label sits above its code. */
@container (max-width:560px){.pathway li{grid-template-columns:minmax(0,1fr);gap:4px}}
.path-mode{font-size:14px;font-weight:700;color:var(--ink-2)}
.path-show{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.path-key{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;font:700 14px/1 var(--font);padding:0 16px;border:1px solid #b8c6cb;border-bottom-width:3px;border-radius:8px;background:#f7f9f9;color:var(--ink)}
.path-button{width:48px;height:48px}
.path-then{font-size:12px;color:var(--muted)}
.path-art{display:block;max-width:100%;height:auto}
.path-coder{width:220px}
/* Python and C++ in api.vex.com's code colors; its orange and green are darkened to meet 4.5:1 here. */
.path-code{font:500 14px/1.5 Menlo,Monaco,Consolas,"Courier New",monospace;padding:8px 12px;border-radius:8px;background:#f5f2f0;color:#000;overflow-wrap:break-word;max-width:100%}
.path-code .vexclassinstance,.path-code .vexclass{color:#1e6471}
.path-code .vexfunctions{color:#8a481d}
.path-code .vexenumglobals,.path-code .vexenumclasses{color:#9a5800}
.path-code .number{color:#0b7a52}
.method-copy .method-value{font-size:16px;line-height:1.65;color:var(--ink-2)}
.method-value+.method-value{margin-top:12px}
/* 123's Coder card: a toggle between the physical Coder and VEX Digital Coder. */
.method-toggle{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;margin:0 auto 16px;background:#eef2f3;border-radius:12px}
.method-toggle button{min-height:36px;padding:8px 16px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:700;line-height:1.3}
.method-toggle button:hover{color:var(--ink)}
.method-toggle button[aria-pressed=true]{background:#fff;border-color:var(--ink-2);color:var(--ink)}
.method-card [data-variant][hidden]{display:none}
@media(max-width:680px){.pathway{padding:16px}.pathway li{grid-template-columns:1fr;gap:4px}.ways-intro p{font-size:16px}}
/* Grade band under each platform name on the home cards */
.card-grades{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
/* A card's source or library link */
.method-copy .method-source{font-size:12px;margin-top:8px}
.method-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.method-actions .button{flex:1 1 240px}
.method-source-link{color:var(--muted);text-underline-offset:3px}
.method-source-link svg{width:12px;height:12px;margin-left:4px;vertical-align:-1px}
/* Classroom app and Teach and get help, in the Get it free column */
.side-block h3{font-size:16px;margin-bottom:8px}
.side-block p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side-link{display:inline-block;min-height:32px;font-size:14px;font-weight:400;color:var(--link);text-underline-offset:3px}
/* Downloads notes and intro line */
.dl-intro p{font-size:16px;color:var(--ink-2);margin-top:12px;max-width:44em}
.dl-notes{margin:0 0 64px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.dl-notes li+li{margin-top:4px}
/* App store badges: each store's own artwork at one 40px height */
.store-badge{display:inline-flex;border-radius:8px;line-height:0}
.store-badge img{height:40px;width:auto}
.store-badge:focus-visible{outline:3px solid #1c78b3;outline-offset:3px}
.side-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
/* Every app and device on one page, from each platform's Download VEXcode card */
.all-downloads{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:8px;padding-top:12px;font-size:14px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
/* In the VR offline card: a text link under the sentence (not a button), pointing down to the Licenses table on this page. */
.licenses-jump{margin-top:0;padding-top:0}
.licenses-jump svg{transform:rotate(90deg)}
.all-downloads svg{width:14px;height:14px}
.all-downloads:hover{color:var(--ink)}
/* One screen of the VEX Classroom app in its box, opening in the viewer */
.side-shot{display:block;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;line-height:0}
.side-shot img{width:100%;height:auto}
.side-shot:hover{border-color:var(--ink)}
/* VEX Digital Coder card (123, GO): the lead, then the web button and store badges, 16px apart. The app's screenshot is on the
   Ways to code card, so this card has none. */
.get-coder .side-badges{margin-top:16px}
/* VEXcode 5 tablet badges: under the browser button in the beta card, and in their own /vexcode-5 section */
.get-beta .side-badges{margin-top:16px}
.badge-note{font-size:14px;color:var(--muted);margin-top:8px}
.v5x-tablet p{font-size:16px;color:var(--ink-2);max-width:40em}
.v5x-tablet .side-badges{margin-top:20px;justify-content:flex-start}
/* VEXcode VR: what it is and what each license adds, between the intro and the ways to code */
.intro-points{grid-column:1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:680px}
.platform-intro.has-points{row-gap:16px}
.platform-intro.has-points>div:first-child{grid-column:1;grid-row:1}
.platform-intro.has-points .platform-art{grid-column:2;grid-row:1/3}
.intro-points li{font-size:16px;line-height:1.55;color:var(--ink-2)}
.intro-points strong{color:var(--ink)}
.vr-catalog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:12px}
.vr-catalog h2{font-size:24px;margin-bottom:8px}
.vr-catalog p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.vr-licenses:focus{outline:none}
.vr-playgrounds dl{margin:12px 0 0;display:grid;gap:12px}
.vr-playgrounds dt{font-size:14px;font-weight:700;line-height:1.5;color:var(--ink)}
.vr-playgrounds dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.vr-tier{margin-left:4px;font-size:12px;font-weight:400;color:var(--muted)}
.vr-plans{width:100%;margin-top:12px;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--ink-2)}
.vr-plans th,.vr-plans td{padding:8px 16px 8px 0;text-align:left;vertical-align:top}
.vr-plans thead th{padding-top:0;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.vr-plans tbody tr+tr>*{border-top:1px solid var(--line)}
.vr-plans tbody th{color:var(--ink);white-space:nowrap}
@media(max-width:680px){.vr-plans thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.vr-plans,.vr-plans tbody,.vr-plans tr,.vr-plans th,.vr-plans td{display:block}.vr-plans tbody tr{padding:12px 0}.vr-plans tbody tr+tr{border-top:1px solid var(--line)}.vr-plans tbody tr+tr>*{border-top:0}.vr-plans th,.vr-plans td{padding:0}.vr-plans tbody th{margin-bottom:4px}.vr-plans td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px}.vr-plans td::before{content:attr(data-label);color:var(--muted)}}
.vr-plans-link{display:inline-flex;align-items:center;min-height:24px;margin-top:12px;font-size:14px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.vr-plans-link svg{width:14px;height:14px}
.vr-plans-link:hover{color:var(--ink)}
.vr-shot{width:100%;height:auto;margin-top:24px;border-radius:8px;border:1px solid var(--line)}
@media(max-width:900px){.vr-catalog{grid-template-columns:1fr;gap:32px}}
@media(max-width:680px){.intro-points{grid-column:1/-1}.platform-intro.has-points .platform-art{grid-row:1}.intro-points{grid-row:2}.vr-catalog{margin-top:28px;padding:20px}}