/* One geometric signature per workspace. The number and name also identify it. */
.home .modeCards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.home .modeCard{position:relative;overflow:hidden;isolation:isolate;min-height:350px;box-sizing:border-box;padding:26px;box-shadow:inset 0 1px 0 #ffffff08;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.home .modeCard::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--mode) 11%,transparent),transparent 65%)}
.home .modeCard .number{display:block;max-width:calc(100% - 70px);min-height:22px;font-size:14px;line-height:1.5;letter-spacing:1.5px;position:relative;z-index:1}
.home .modeCard strong{font-size:clamp(27px,2.4vw,35px);line-height:1.12;letter-spacing:-1px;margin:42px 0 16px;position:relative;z-index:1}
.home .modeCard .desc,.home .modeCard>span:not([class]){font-size:18px;line-height:1.55;color:#b9c1d0;position:relative;z-index:1}
.home .modeCard .enter{font-size:16px;line-height:1.5;margin-top:auto;padding-top:26px;position:relative;z-index:1}
.homeGeometry{position:absolute;right:19px;top:15px;width:76px;height:76px;color:var(--mode);pointer-events:none;filter:drop-shadow(0 0 17px color-mix(in srgb,var(--mode) 25%,transparent));transition:transform .25s ease}
.homeGeometry svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.homeGeometry .shapeFill{fill:currentColor;fill-opacity:.15;stroke:none}
.homeGeometry .shapeCore{fill:currentColor;stroke:none}
.home .modeCard:hover:not(:disabled){box-shadow:0 10px 32px #0003,inset 0 1px 0 #ffffff10}
.home .modeCard:hover:not(:disabled) .homeGeometry{transform:translateY(-3px) rotate(-4deg)}
.home .modeCard:focus-visible{outline:3px solid var(--mode);outline-offset:5px}
@media(max-width:1050px) and (min-width:701px){.home .modeCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.home .modeCards{grid-template-columns:1fr;gap:14px}.home .modeCard{min-height:275px;padding:24px}.home .modeCard strong{font-size:30px;margin-top:32px}.homeGeometry{width:68px;height:68px}}
@media(prefers-reduced-motion:reduce){.home .modeCard,.homeGeometry{transition:none}.home .modeCard:hover:not(:disabled) .homeGeometry{transform:none}}

/* Four workspaces per row, with Surface 09 centered beside rows 1 and 2. */
@media(min-width:1251px){
 .home{max-width:1640px}
 .home .modeCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:20px;align-items:stretch}
 .home .modeCards>.modeCard{width:100%;min-width:0;flex:none}
 .home .modeCard[data-home-order="1"]{grid-column:1;grid-row:1}
 .home .modeCard[data-home-order="2"]{grid-column:2;grid-row:1}
 .home .modeCard[data-home-order="3"]{grid-column:3;grid-row:1}
 .home .modeCard[data-home-order="4"]{grid-column:4;grid-row:1}
 .home .modeCard[data-home-order="5"]{grid-column:1;grid-row:2}
 .home .modeCard[data-home-order="6"]{grid-column:2;grid-row:2}
 .home .modeCard[data-home-order="7"]{grid-column:3;grid-row:2}
 .home .modeCard[data-home-order="8"]{grid-column:4;grid-row:2}
 .home .modeCard[data-home-module="midi"]{grid-column:5;grid-row:1 / 3;align-self:center}
}
@media(min-width:701px) and (max-width:1250px){
 .home .modeCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .home .modeCards>.modeCard{width:100%;min-width:0;flex:none}
 .home .modeCard[data-home-module="midi"]{grid-column:1 / -1;max-width:550px;justify-self:center}
}
@media(max-width:700px){.home .modeCards{display:grid;grid-template-columns:minmax(0,1fr)}.home .modeCards>.modeCard{width:100%;min-width:0;flex:none}}

/* Fit the complete desktop home to the available viewport, without clipping. */
body:not([data-mode="home"]) .homeViewport{display:none}
@media(min-width:1000px) and (min-height:560px){
 body[data-mode="home"] header{padding:8px 20px;gap:10px;flex-wrap:wrap}
 body[data-mode="home"] .modeNav{padding:7px 20px;gap:6px;flex-wrap:wrap}
 body[data-mode="home"] #patchGateNotice{margin:6px 20px;font-size:15px;line-height:1.3}
 body[data-mode="home"] .homeViewport{position:relative;width:100%;overflow:visible}
 body[data-mode="home"] .homeViewport .home{position:absolute;top:0;left:50%;width:var(--home-width,1540px);max-width:none;margin:0;padding:14px 22px 8px;transform:translateX(-50%) scale(var(--home-scale,1));transform-origin:top center}
 body[data-mode="home"] .home-intro{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:center}
 body[data-mode="home"] .home-intro .eyebrow{grid-column:1 / -1}
 body[data-mode="home"] .home h2{font-size:36px;line-height:1.08;margin:8px 0 14px}
 body[data-mode="home"] .home-intro p{margin:0;font-size:18px!important;line-height:1.4}
 body[data-mode="home"] .home .modeCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:14px;margin-top:10px;align-items:stretch}
 body[data-mode="home"] .home .modeCards>.modeCard{width:100%;min-width:0;flex:none;min-height:265px;padding:20px}
 body[data-mode="home"] .home .modeCard .number{font-size:15px;line-height:1.3;letter-spacing:1px;max-width:calc(100% - 45px)}
 body[data-mode="home"] .home .modeCard strong{font-size:29px;line-height:1.1;margin:25px 0 12px}
 body[data-mode="home"] .home .modeCard .desc{font-size:18px;line-height:1.4}
 body[data-mode="home"] .home .modeCard .enter{font-size:16px;padding-top:16px}
 body[data-mode="home"] .homeGeometry{width:50px;height:50px;right:14px;top:12px}
 body[data-mode="home"] .home .modeCard[data-home-order="1"]{grid-column:1;grid-row:1}
 body[data-mode="home"] .home .modeCard[data-home-order="2"]{grid-column:2;grid-row:1}
 body[data-mode="home"] .home .modeCard[data-home-order="3"]{grid-column:3;grid-row:1}
 body[data-mode="home"] .home .modeCard[data-home-order="4"]{grid-column:4;grid-row:1}
 body[data-mode="home"] .home .modeCard[data-home-order="5"]{grid-column:1;grid-row:2}
 body[data-mode="home"] .home .modeCard[data-home-order="6"]{grid-column:2;grid-row:2}
 body[data-mode="home"] .home .modeCard[data-home-order="7"]{grid-column:3;grid-row:2}
 body[data-mode="home"] .home .modeCard[data-home-order="8"]{grid-column:4;grid-row:2}
 body[data-mode="home"] .home .modeCard[data-home-module="midi"]{grid-column:5;grid-row:1 / 3;align-self:center;justify-self:stretch;max-width:none}
}