/* ProstoDesk Next showcase: the design canvas is always 1440×900.
   At narrow viewport sizes the canvas is uniformly scaled, never reflowed.
   This prevents the 694×1345 stretched window from the previous version. */
/* v1.8: restore the volumetric tilt from website v1, while preserving
   the 1440×900 illustration's proportions from v1.4. The scale is only on
   an outer wrapper; the inner window is free to rotate in real 3D. */
.next-stage {
  position:relative;width:100%;aspect-ratio:1440 / 900;isolation:isolate;
  --next-scale:.46;--pointer-x:2deg;--pointer-y:-7deg;
}
.next-proportion-layer {
  position:absolute;left:0;top:0;width:1440px;height:900px;
  transform:scale(var(--next-scale));transform-origin:top left;
  perspective:1800px;perspective-origin:52% 44%;
}
.next-float-layer {position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:ldsHeroFloat 8.5s ease-in-out infinite;}
.next-stage .next-window {
  position:absolute;inset:0;width:1440px;height:900px;min-height:0;
  transform-origin:center center;
  transform:rotateY(-7deg) rotateX(3deg) rotateZ(-.6deg);
  animation:ldsHeroOrbit 12s ease-in-out infinite;
  box-shadow:0 38px 90px rgba(0,0,0,.58),12px 24px 70px rgba(0,115,190,.14),
    0 0 0 1px rgba(80,208,255,.16),inset 0 1px rgba(140,228,255,.2);
  backface-visibility:hidden;will-change:transform;
  transition:border-color .25s ease,box-shadow .25s ease;
}
@keyframes ldsHeroFloat {
  0%,100% {transform:translateY(0) translateZ(0)}
  50% {transform:translateY(-23px) translateZ(16px)}
}
@keyframes ldsHeroOrbit {
  0%,100% {transform:rotateY(-9deg) rotateX(3deg) rotateZ(-.85deg)}
  27% {transform:rotateY(-2deg) rotateX(1.5deg) rotateZ(.2deg)}
  54% {transform:rotateY(3deg) rotateX(-1.5deg) rotateZ(.7deg)}
  78% {transform:rotateY(-4deg) rotateX(4deg) rotateZ(-.15deg)}
}
.next-stage.is-interacting .next-window {
  animation:none;
  transform:rotateX(var(--pointer-x)) rotateY(var(--pointer-y)) rotateZ(-.4deg);
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease;
  border-color:rgba(65,220,255,.78);
  box-shadow:0 48px 110px rgba(0,0,0,.64),12px 27px 75px rgba(0,161,245,.25),
    0 0 30px rgba(33,210,255,.2);
}
.next-stage.is-interacting .next-float-layer {animation-play-state:paused}
@media(hover:none){.next-stage.is-interacting .next-window{animation:ldsHeroOrbit 12s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){
 .next-float-layer,.next-stage .next-window,.next-stage.is-interacting .next-window{animation:none!important;transition:none!important}
 .next-stage .next-window,.next-stage.is-interacting .next-window{transform:rotateY(-5deg) rotateX(2deg) rotateZ(-.4deg)}
}

.next-window {width:1440px;height:900px;min-height:0;margin:0;animation:none;transform:none}
.next-shell {height:100%;min-height:0}
.next-topbar {height:84px;flex-shrink:0}
.next-body {min-height:0; flex:1; grid-template-columns:190px minmax(0,1fr) 290px;gap:14px; padding:14px}
.next-sidebar {padding:15px 12px}
.next-nav {gap:4px}
.next-nav-item {padding:10px 12px;font-size:13px}
.next-nav-item .icon{height:16px;width:16px}
.next-spaces{margin-top:15px}
.next-sidebar-title{font-size:9px;margin-bottom:8px}
.next-space{padding:5px 4px;font-size:12px}
.next-sidebar-footer{gap:4px}
.next-preview-note{font-size:9px}
.next-heading-row{margin:4px 0 8px}
.next-heading-row h3{font-size:38px}
.next-heading-row p{font-size:12px;margin:8px 0 0}
.next-filter-row{margin-bottom:12px}
.next-pill{padding:8px 13px;font-size:12px}
.next-view{height:31px;width:32px}
.next-cards-grid{gap:10px}
.next-card-art{height:132px}
.next-card-copy{padding:10px 12px 11px;row-gap:2px}
.next-card-copy strong{font-size:15px}
.next-card-copy small{font-size:11px}
.next-card-copy span{font-size:10px}
.next-card--peek .next-card-art{height:44px}
.next-activity-bar{margin-top:10px;padding:11px 13px}
.next-activity-item{font-size:11px}
.next-detail-panel{padding:14px;gap:10px}
.next-detail-preview .next-card-art{height:170px}
.next-detail-copy h4{font-size:22px}
.next-detail-copy p{font-size:13px;margin-top:2px}
.next-detail-meta{gap:9px}
.next-detail-meta div{font-size:12px}
.next-detail-meta strong{font-size:12px}
.next-access{padding-top:5px}
.next-access>span{font-size:14px;margin-bottom:8px}
.next-access-grid{gap:7px}
.next-access-grid button{min-height:56px;gap:3px;border-radius:8px}
.next-access-grid button .icon{height:19px;width:19px}
.next-access-grid button small{font-size:10px}
.next-detail-note{padding:8px 10px;font-size:11px}
.next-connect-btn{min-height:46px;font-size:13px}

/* Override the old responsive stack: this is an illustration, not an app layout. */
.next-window .next-topbar {grid-template-columns:minmax(0,1fr) auto auto}
.next-window .next-body {grid-template-columns:190px minmax(0,1fr) 290px}
.next-window .next-filter-row {flex-direction:row;align-items:center}
.next-window .next-cards-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.next-window .next-sidebar {order:initial}
.next-window .next-mainpanel {order:initial}
.next-window .next-detail-panel {order:initial}
.next-window .next-window-controls {display:flex}
.next-window .next-card--peek {display:block}
@media (max-width:930px) {
  .next-stage .next-window {margin-left:0;}
  .next-window .next-topbar {grid-template-columns:minmax(0,1fr) auto auto;gap:14px;padding:16px 18px 10px}
  .next-window .next-sidebar {padding:15px 12px}
  .next-window .next-detail-panel {padding:14px;gap:10px}
  .next-window .next-heading-row h3 {font-size:38px}
  .next-window .next-heading-row p {font-size:12px}
  .next-window .next-filter-row {margin-bottom:12px}
  .next-window .next-pills {gap:10px}
  .next-window .next-pill {padding:8px 13px;font-size:12px}
  .next-window .next-view {height:31px;width:32px}
  .next-window .next-card-art {height:132px}
  .next-window .next-card--peek .next-card-art {height:44px}
  .next-window .next-card-copy {padding:10px 12px 11px}
  .next-window .next-card-copy strong {font-size:15px}
  .next-window .next-card-copy small {font-size:11px}
  .next-window .next-card-copy span {font-size:10px}
  .next-window .next-activity-bar {padding:11px 13px}
  .next-window .next-activity-item {font-size:11px}
  .next-window .next-detail-preview .next-card-art {height:170px}
  .next-window .next-detail-copy h4 {font-size:22px}
  .next-window .next-detail-copy p {font-size:13px}
  .next-window .next-detail-meta div {font-size:12px}
  .next-window .next-detail-meta strong {font-size:12px}
  .next-window .next-access-grid button {min-height:56px}
  .next-window .next-access-grid button small {font-size:10px}
  .next-window .next-connect-btn {min-height:46px;font-size:13px}
}
@media (max-width:600px) {
  .next-stage .next-window {border-radius:16px;}
  .next-window .next-topbar {height:84px;}
  .next-window .next-body {padding:14px;gap:14px}
  .next-window .next-search {height:50px;padding:0 20px;border-radius:18px}
  .next-window .next-search span {font-size:15px}
  .next-window .next-id-panel {flex-wrap:nowrap;padding:6px 12px}
  .next-window .next-id-group strong {font-size:15px}
  .next-window .next-id-group small {font-size:10px}
  .next-window .next-heading-row h3 {font-size:38px}
  .next-window .next-pills {gap:10px}
  .next-window .next-cards-grid {gap:10px}
  .next-window .next-card--peek {display:block}
}