@charset "UTF-8";
:root {
  color-scheme:dark;
  --text:#f7fbff;
  --muted:#d0dee9;
  --quiet:#b6cad8;
  --glass:rgba(218,241,255,.09);
  --glass-edge:rgba(231,248,255,.22);
  --glass-hover:rgba(235,248,255,.16);
  --shadow:rgba(2,17,36,.2);
  --icon-size:88px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-family:var(--font);
  font-size:14px;
  color:var(--text);
  background:#17354c;
  -webkit-font-smoothing:antialiased
}

button,input,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button {
  color:inherit;
  cursor:pointer
}

button {
  border:0
}

a {
  color:inherit;
  text-decoration:none
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--text);
  outline-offset:6px
}

button:disabled {
  cursor:default
}

button[hidden],[hidden] {
  display:none!important
}

svg {
  display:block
}

button svg {
  width:20px;
  height:20px
}

::selection {
  background:#a1eddb55
}

.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
}

.wallpaper {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:#1d3953
}

.wallpaper-art {
  position:absolute;
  inset:0;
  background:url('assets/wallpaper.svg') center center/cover no-repeat;
  transition:filter .65s,opacity .65s
}

.wallpaper-wash {
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(3,20,43,.27),rgba(13,32,50,.12) 56%,rgba(31,28,72,.18));
  transition:background .65s
}

.grain {
  position:absolute;
  inset:0;
  opacity:.012;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

.shell {
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:0 44px
}

.topbar {
  height:84px;
  display:flex;
  align-items:center;
  gap:21px;
  flex-shrink:0
}

.brand {
  display:flex;
  align-items:center;
  font-size:31px;
  letter-spacing:-1.8px;
  font-weight:750;
  line-height:1
}

.brand-switch {
  width:33px;
  height:19px;
  border-radius:20px;
  background:#e6f5f323;
  margin:6px 0 0 3px;
  border:1px solid #eefcff90;
  box-shadow:inset 0 1px 3px #ffffff21;
  display:flex;
  align-items:center;
  padding:3px
}

.brand-switch i {
  display:block;
  width:11px;
  height:11px;
  background:#f0fcfa;
  border-radius:50%;
  box-shadow:0 1px 5px #081e4330;
  transform:translateX(13px);
  transition:transform .3s
}

.header-divider {
  height:19px;
  width:1px;
  background:#d8efff2b
}

.portal-label {
  font-size:13px;
  color:var(--muted);
  letter-spacing:.1px
}

.topbar-right {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px
}

.topbar time {
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}

.glass {
  background:var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 #ffffff15,0 6px 24px #0821300a;
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%)
}

.icon-button {
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .2s,transform .2s
}

.icon-button:hover {
  background:var(--glass-hover);
  transform:rotate(12deg)
}

.icon-button svg {
  width:17px;
  height:17px
}

.workspace-badge {
  display:grid;
  place-items:center;
  position:relative;
  width:35px;
  height:35px;
  border:1px solid #e6f2fe59;
  border-radius:50%;
  font-size:13px;
  font-weight:600;
  background:linear-gradient(140deg,#bcdcd536,#c6beed26)
}

.workspace-dot {
  position:absolute;
  width:7px;
  height:7px;
  background:#91e5c6;
  border-radius:50%;
  right:-1px;
  bottom:0;
  border:1px solid #345366
}

main {
  flex:1;
  display:flex;
  justify-content:center
}

.launchpad {
  width:100%;
  max-width:1060px;
  padding-top:21px
}

.intro {
  text-align:center
}

.eyebrow {
  font-size:10px;
  letter-spacing:3.1px;
  font-weight:600;
  color:var(--muted)
}

h1 {
  font-size:32px;
  letter-spacing:-1.05px;
  line-height:1.2;
  font-weight:550;
  margin:11px 0 24px;
  text-shadow:0 2px 10px #173e451a
}

.search {
  width:350px;
  height:43px;
  margin:0 auto;
  display:flex;
  align-items:center;
  border-radius:13px;
  padding:0 13px;
  gap:10px;
  transition:background .2s,box-shadow .2s
}

.search:focus-within {
  background:var(--glass-hover);
  box-shadow:0 0 0 3px #e6f7ff15;
  border-color:#eaffff70
}

.search>svg {
  height:17px;
  width:17px;
  flex-shrink:0;
  stroke:var(--muted);
  stroke-width:1.6;
  fill:none
}

.search input {
  appearance:none;
  background:transparent;
  border:0;
  color:var(--text);
  outline:none;
  width:100%;
  min-width:0;
  height:100%;
  font-size:13px
}

.search input::placeholder {
  color:var(--muted);
  opacity:1
}

.search input::-webkit-search-cancel-button {
  display:none
}

kbd {
  font:inherit
}

.search kbd {
  font-size:10px;
  white-space:nowrap;
  border:1px solid #efffff2a;
  border-radius:4px;
  padding:3px 5px;
  color:var(--quiet)
}

.clear-search {
  border-radius:50%;
  width:23px;
  height:23px;
  flex-shrink:0;
  background:#e8f4ff22;
  font-size:20px;
  line-height:20px
}

.departments {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin:23px auto 27px
}

.department {
  padding:8px 14px;
  border-radius:20px;
  font-size:12px;
  background:transparent;
  white-space:nowrap;
  color:var(--muted);
  transition:all .2s;
  border:1px solid transparent
}

.department:hover {
  background:#f2ffff0c;
  color:var(--text)
}

.department[aria-pressed="true"] {
  background:linear-gradient(#e7fbff25,#e7fbff15);
  color:var(--text);
  border-color:#e3f8ff36;
  box-shadow:inset 0 1px 0 #ffffff12,0 2px 10px #0623300b;
  backdrop-filter:blur(14px)
}

.workspace {
  max-width:1010px;
  margin:auto
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px;
  margin-bottom:22px
}

.section-heading h2 {
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  margin:0
}

.section-heading>span {
  font-size:11px;
  color:var(--quiet)
}

.grid-stage {
  position:relative;
  min-height:404px;
  touch-action:pan-y pinch-zoom;
  overflow:hidden;
  padding:12px;
  margin:-12px;
  user-select:none;
  -webkit-user-select:none
}

.app-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:20px;
  row-gap:20px;
  transform:translate3d(var(--page-offset,0px),0,0)
}

.page-preview {
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  pointer-events:none;
  transform:translate3d(calc(var(--page-offset,0px) + var(--preview-offset)),0,0)
}

.grid-stage[data-drag-edge]::after {
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  width:clamp(30px,14%,64px);
  z-index:2;
  border-radius:14px;
  pointer-events:none
}
.grid-stage[data-drag-edge="left"]::after {
  left:0;
  background:linear-gradient(90deg,#d4fff52e,transparent);
  border-left:2px solid #dcfff2a0
}
.grid-stage[data-drag-edge="right"]::after {
  right:0;
  background:linear-gradient(270deg,#d4fff52e,transparent);
  border-right:2px solid #dcfff2a0
}

.can-drag,.can-drag .app-link {
  cursor:grab
}

.is-dragging,.is-dragging .app-link {
  cursor:grabbing
}

.is-dragging .app-grid,.is-settling .app-grid {
  will-change:transform
}

.is-settling .app-grid {
  transition:transform var(--settle-duration,240ms) cubic-bezier(.22,.75,.25,1)
}

.is-dragging .app-icon,.is-settling .app-icon {
  transform:none!important;
  animation:none!important
}

.app-cell {
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center
}

.app-link {
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0 3px 4px;
  background:none;
  border:0;
  text-align:center;
  border-radius:16px;
  -webkit-user-drag:none
}

.app-icon {
  width:var(--icon-size);
  height:var(--icon-size);
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  border-radius:23%;
  color:#fff;
  border:0;
  background:radial-gradient(ellipse at 25% 0%,#ffffff1f,transparent 65%),linear-gradient(155deg,var(--icon-top),var(--icon-bg));
  box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #10273a0c,0 3px 5px #10273a17,0 10px 22px #10273a24;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
  transform:translateZ(0)
}

.app-icon svg {
  width:65%;
  height:65%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .25s
}

.app-icon svg.detailed-icon {
  width:84%;
  height:84%;
  fill:none;
  stroke:none;
  overflow:visible
}

.detailed-icon .icon-art {
  filter:drop-shadow(0 1.3px 1px #18324724)
}

.app-icon svg .solid {
  fill:currentColor;
  stroke:none
}

.app-icon svg .tint {
  fill:currentColor;
  fill-opacity:.15
}

.app-icon svg .secondary {
  fill:var(--icon-secondary);
  stroke:none
}

.app-icon .calendar-day {
  fill:var(--icon-secondary);
  stroke:none;
  font-family:var(--font);
  font-weight:400;
  font-size:25px;
  letter-spacing:-1px
}

.app-icon svg .faint {
  opacity:.5
}

.app-icon .icon-letter {
  font-weight:650;
  font-size:38px;
  color:var(--icon-ink)
}

.app-link:hover .app-icon {
  transform:translateY(-6px) scale(1.065);
  box-shadow:0 8px 12px #10273a24,0 18px 28px #10273a30
}

.app-link:hover svg {
  transform:scale(1.03)
}

.app-link:active .app-icon {
  transform:scale(.94)
}

.app-name {
  font-size:12px;
  font-weight:500;
  letter-spacing:.03px;
  line-height:1.4;
  max-width:145px;
  min-height:34px;
  text-align:center;
  text-shadow:0 1px 4px #122e4a60;
  text-wrap:balance
}

.app-link:focus-visible {
  outline-offset:5px
}

.app-subtitle {
  font-size:10px;
  font-weight:400;
  color:var(--quiet)
}

.pagination {
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  height:30px;
  margin-top:7px
}

.page-dot {
  background:transparent;
  padding:9px 5px;
  display:grid;
  place-items:center;
  min-width:24px;
  min-height:28px
}

.page-dot span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#e2f4ff4f;
  transition:background .2s,transform .2s,width .2s
}

.page-dot[aria-current="page"] span {
  background:var(--text);
  width:17px;
  border-radius:5px;
  box-shadow:0 0 7px #e5ffff15
}

.page-dot:hover span {
  background:var(--text)
}

.app-grid.enter {
  animation:apps-in .3s ease both
}

@keyframes apps-in {
  from {
    opacity:0;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

.bottom-area {
  padding-top:19px;
  flex-shrink:0
}

.dock-heading {
  max-width:480px;
  display:flex;
  justify-content:space-between;
  margin:0 auto 10px;
  align-items:center;
  padding:0 7px
}

.dock-heading>span {
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
  font-weight:650
}

.dock-heading button {
  font-size:10px;
  color:var(--muted);
  background:none;
  padding:3px 0
}

.dock-heading button:hover {
  color:var(--text)
}

.dock-heading button span {
  margin-left:3px
}

.dock {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:19px;
  margin:0 auto;
  width:fit-content;
  min-height:86px;
  min-width:180px;
  border-radius:25px;
  padding:13px 18px;
  background:linear-gradient(135deg,#dff7ff1f,#e2ebff0e);
  box-shadow:inset 0 1px 0 #ffffff32,inset 0 -1px 0 #ffffff12,0 12px 35px #04293c20
}

.dock .app-cell {
  --icon-size:56px
}

.dock .app-link {
  padding:0;
  gap:0
}

.dock .app-icon {
  border-radius:23%;
  box-shadow:inset 0 1px 0 #ffffff30,0 3px 7px #08263726
}

.dock .app-link:hover .app-icon {
  transform:translateY(-9px) scale(1.14)
}

.dock .app-name {
  position:absolute;
  bottom:calc(100% + 22px);
  background:#193548eF;
  color:#fff;
  padding:7px 11px;
  border-radius:9px;
  box-shadow:0 3px 15px #0b29372c;
  font-size:11px;
  max-width:180px;
  min-width:90px;
  min-height:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,transform .15s;
  transform:translateY(5px);
  z-index:5
}

.dock .app-link:hover .app-name,.dock .app-link:focus-visible .app-name {
  opacity:1;
  transform:translateY(0)
}

.dock .app-icon svg {
  width:65%;
  height:65%
}

.dock .app-icon .icon-letter {
  font-size:25px
}

.dock-empty {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  max-width:290px;
  margin:0 5px
}

.favorite-toggle {
  position:absolute;
  top:-7px;
  right:calc(50% - var(--icon-size)/2 - 7px);
  width:24px;
  height:24px;
  background:#f0f8ff;
  color:#294354;
  border:1px solid #ffffffe0;
  box-shadow:0 2px 8px #10243a50;
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:3;
  font-size:18px;
  line-height:1
}

.favorite-toggle[aria-pressed="true"] {
  background:#c6eadb;
  color:#285a4b
}

.editing .app-icon {
  animation:icon-jiggle var(--jiggle-duration,155ms) ease-in-out var(--jiggle-delay,0ms) infinite alternate;
  transform-origin:50% 60%
}

.editing .app-cell:nth-child(even) .app-icon {
  animation-direction:alternate-reverse
}

@keyframes icon-jiggle {
  from {
    transform:rotate(-1.8deg) translateY(-.4px)
  }
  to {
    transform:rotate(1.8deg) translateY(.4px)
  }
}

.editing .app-link {
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none
}

.editing .dock-area {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:20;
  width:540px;
  max-width:calc(100% - 24px);
  padding:16px 18px 12px;
  border-radius:28px;
  color:#f5fbff;
  background:linear-gradient(145deg,#213f54f2,#233c58f2);
  border:1px solid #d7f3ff25;
  box-shadow:0 16px 50px #10213550,inset 0 1px 0 #ffffff15;
  backdrop-filter:blur(25px)
}

.editing .dock-heading {
  margin-bottom:12px
}

.editing .dock-heading>span,.editing .dock-heading button,.editing .dock-empty {
  color:#dcebf4
}

.editing .dock {
  min-width:100%;
  min-height:84px;
  transition:box-shadow .18s,background .18s;
  background:#def0ff13;
  border-color:#ffffff35
}

.editing .bottom-area {
  min-height:190px
}

.dock-help {
  font-size:11px;
  line-height:1.5;
  text-align:center;
  color:#d2e4ef;
  margin:10px 0 0
}

.dock.drop-ready {
  background:#a0e0cd2e;
  box-shadow:0 0 0 2px #b7ecd099,inset 0 0 24px #b9f1db12
}

.dock.drop-full {
  box-shadow:0 0 0 2px #efc291a0;
  background:#eab3721c
}

.dock-drop-marker {
  position:absolute;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:4px;
  background:#d2ffee;
  box-shadow:0 0 8px #baffdb70;
  pointer-events:none
}

.favorite-source .app-icon {
  opacity:.24;
  animation:none!important
}

.grid-drop-before::before,.grid-drop-after::after {
  content:"";
  position:absolute;
  top:4px;
  width:3px;
  height:var(--icon-size);
  border-radius:4px;
  background:#dbfff2;
  box-shadow:0 0 12px #aff5d970;
  pointer-events:none
}
.grid-drop-before::before { left:-5px }
.grid-drop-after::after { right:-5px }

.favorite-source .favorite-toggle {
  opacity:.25
}

.favorite-ghost {
  position:fixed;
  left:0;
  top:0;
  z-index:100;
  pointer-events:none;
  will-change:transform;
  width:var(--icon-size);
  height:var(--icon-size)
}

.favorite-ghost .app-icon {
  animation:none!important;
  transform:scale(1.12) rotate(-5deg)!important;
  box-shadow:0 14px 20px #0b233f35,0 24px 40px #0b233f30
}

.favorite-dragging,.favorite-dragging * {
  cursor:grabbing!important
}

.drag-caption {
  position:absolute;
  left:50%;
  top:calc(100% + 15px);
  transform:translateX(-50%);
  white-space:nowrap;
  border-radius:9px;
  padding:7px 10px;
  background:#193c51ee;
  color:#f7fcff;
  font-size:11px;
  box-shadow:0 4px 15px #152b4430
}

.favorite-ghost[data-action="remove"] .drag-caption {
  background:#a44552f2
}

.favorite-ghost[data-action="full"] .drag-caption {
  background:#896136f2
}

.favorite-dragging .dock .app-name {
  display:none
}

.editing .toast {
  bottom:220px;
  z-index:110
}

@media(max-width:600px) {
  .editing .dock-area {
    padding:13px 10px 10px;
    bottom:12px;
    max-width:calc(100% - 16px)
  }
  .editing .dock {
    gap:clamp(7px,2.6vw,11px);
    padding:10px;
    min-height:70px
  }
  .editing .dock .app-cell {
    --icon-size:clamp(34px,9.5vw,43px)
  }
  .editing .bottom-area {
    min-height:205px
  }
  .dock-help {
    font-size:10px
  }
}

.footer-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:var(--quiet);
  padding:24px 0 21px
}

.footer-line strong {
  font-size:12px;
  letter-spacing:-.4px;
  color:var(--muted);
  font-weight:650
}

.toast {
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translate(-50%,15px);
  padding:13px 20px;
  border-radius:14px;
  background:#193d50ec;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:10;
  max-width:calc(100% - 32px);
  font-size:13px;
  text-align:center
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

.empty-state {
  text-align:center;
  padding:55px 20px 70px;
  color:var(--muted)
}

.empty-symbol {
  font-size:48px;
  display:block
}

.empty-state h3 {
  color:var(--text);
  font-weight:500;
  font-size:19px;
  margin:14px 0 8px
}

.empty-state p {
  font-size:13px
}

.reset-button {
  padding:10px 16px;
  border-radius:12px;
  margin-top:15px
}

.noscript {
  position:fixed;
  inset:40%;
  background:#193d50;
  padding:20px;
  z-index:10
}

:root[data-theme="light"] {
  color-scheme:light;
  --text:#183950;
  --muted:#36566a;
  --quiet:#476378;
  --glass:rgba(250,255,255,.3);
  --glass-edge:rgba(255,255,255,.55);
  --glass-hover:rgba(255,255,255,.45)
}

[data-theme="light"] .wallpaper-art {
  filter:brightness(1.45) saturate(.65)
}

[data-theme="light"] .wallpaper-wash {
  background:linear-gradient(120deg,#e2f2faaf,#e5f5f19c 55%,#e9eafda0)
}

[data-theme="light"] .brand-switch {
  border-color:#264e6a80;
  background:#40647c22
}

[data-theme="light"] .brand-switch i {
  background:#254f65;
  transform:translateX(0)
}

[data-theme="light"] .header-divider {
  background:#2c52652b
}

[data-theme="light"] .workspace-badge {
  border-color:#45637a59
}

[data-theme="light"] .search kbd {
  border-color:#45637a38
}

[data-theme="light"] .department[aria-pressed="true"] {
  background:#f5ffff64;
  border-color:#ffffffa0;
  box-shadow:inset 0 1px 0 #fff8,0 2px 10px #4662750b
}

[data-theme="light"] .department:hover {
  background:#f9ffff38
}

[data-theme="light"] .app-name {
  text-shadow:0 1px 2px #fff5
}

[data-theme="light"] .page-dot span {
  background:#21465755
}

[data-theme="light"] .page-dot[aria-current="page"] span {
  background:var(--text)
}

[data-theme="light"] .dock {
  background:linear-gradient(135deg,#ffffff50,#ffffff21)
}

[data-theme="light"] .clear-search {
  background:#32536920
}

@media(min-width:1500px) and (min-height:950px) {
  :root {
    --icon-size:98px
  }
  .launchpad {
    padding-top:40px;
    max-width:1120px
  }
  h1 {
    font-size:36px
  }
  .departments {
    margin-top:28px;
    margin-bottom:39px
  }
  .app-grid {
    row-gap:29px;
    column-gap:34px
  }
  .grid-stage {
    min-height:455px
  }
  .section-heading {
    margin-bottom:27px
  }
  .app-name {
    font-size:13px
  }
  .dock {
    padding:15px 20px;
    gap:23px
  }
  .dock .app-cell {
    --icon-size:61px
  }
  .bottom-area {
    padding-top:25px
  }
  .footer-line {
    padding-top:29px;
    padding-bottom:25px
  }
}

@media(max-height:950px) and (min-width:901px) {
  .topbar {
    height:70px
  }
  .launchpad {
    padding-top:8px
  }
  h1 {
    font-size:28px;
    margin:9px 0 19px
  }
  .departments {
    margin:18px auto 22px
  }
  .app-grid {
    row-gap:13px
  }
  :root {
    --icon-size:76px
  }
  .grid-stage {
    min-height:365px
  }
  .section-heading {
    margin-bottom:18px
  }
  .app-name {
    font-size:11px;
    min-height:31px
  }
  .app-link {
    gap:8px
  }
  .bottom-area {
    padding-top:10px
  }
  .dock {
    min-height:75px;
    padding:10px 16px
  }
  .dock .app-cell {
    --icon-size:52px
  }
  .footer-line {
    padding:17px 0
  }
  .dock-heading {
    margin-bottom:7px
  }
}

@media(max-width:1100px) {
  .shell {
    padding:0 35px
  }
  .workspace {
    max-width:870px
  }
  .app-grid {
    column-gap:9px
  }
  .department {
    padding:8px 11px
  }
}

@media(max-width:900px) {
  :root {
    --icon-size:82px
  }
  .shell {
    padding:0 25px
  }
  .topbar {
    height:75px
  }
  .launchpad {
    padding-top:20px
  }
  .workspace {
    max-width:650px
  }
  .app-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    row-gap:21px
  }
  .grid-stage {
    min-height:404px
  }
  .departments {
    max-width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    width:fit-content;
    padding:4px 0 9px;
    margin-bottom:17px;
    scrollbar-width:none
  }
  .departments::-webkit-scrollbar {
    display:none
  }
  .department {
    padding:8px 12px
  }
  .section-heading {
    padding:0 10px
  }
  .bottom-area {
    padding-top:30px
  }
  .footer-line>span:first-child {
    display:none
  }
  .dock {
    gap:17px
  }
  .portal-label {
    font-size:12px
  }
  .topbar-right {
    gap:14px
  }
  .topbar time {
    font-size:11px
  }
}

@media(max-width:600px) {
  :root {
    --icon-size:76px
  }
  .shell {
    padding:0 21px
  }
  .topbar {
    height:70px;
    gap:13px
  }
  .brand {
    font-size:28px
  }
  .brand-switch {
    width:31px;
    height:18px
  }
  .brand-switch i {
    width:10px;
    height:10px
  }
  .portal-label {
    display:none
  }
  .header-divider {
    display:none
  }
  .topbar-right {
    gap:13px
  }
  .topbar time {
    font-size:10px;
    max-width:89px;
    line-height:1.5;
    text-align:right
  }
  .workspace-badge {
    display:none
  }
  .icon-button {
    width:33px;
    height:33px
  }
  .launchpad {
    padding-top:21px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:2.6px
  }
  h1 {
    font-size:29px;
    margin:12px 0 24px
  }
  .search {
    max-width:350px;
    width:100%;
    height:43px
  }
  .search kbd {
    display:none
  }
  .departments {
    margin-top:19px;
    margin-bottom:18px;
    gap:3px
  }
  .department {
    font-size:12px;
    padding:8px 13px
  }
  .section-heading {
    padding:0 2px;
    margin-bottom:24px
  }
  .section-heading h2 {
    font-size:11px
  }
  .section-heading>span {
    font-size:10px
  }
  .app-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:7px;
    row-gap:21px
  }
  .app-link {
    gap:9px
  }
  .app-name {
    font-size:11px;
    min-height:31px;
    max-width:105px
  }
  .grid-stage {
    min-height:543px
  }
  .pagination {
    margin-top:13px
  }
  .bottom-area {
    padding-top:25px
  }
  .dock-heading {
    max-width:355px
  }
  .dock {
    gap:13px;
    padding:12px;
    border-radius:23px;
    max-width:100%;
    min-height:71px
  }
  .dock .app-cell {
    --icon-size:44px
  }
  .dock .app-icon {
    border-radius:13px
  }
  .dock .app-icon .icon-letter {
    font-size:22px
  }
  .footer-line {
    justify-content:center;
    padding:21px 0 20px;
    gap:16px;
    flex-wrap:wrap
  }
  .dock .app-name {
    max-width:95px;
    min-width:65px;
    font-size:10px
  }
  .favorite-toggle {
    width:22px;
    height:22px
  }
  .dock .favorite-toggle {
    right:-5px;
    top:-7px
  }
  .empty-state {
    padding-top:80px
  }
}

@media(max-width:370px) {
  .shell {
    padding:0 16px
  }
  :root {
    --icon-size:68px
  }
  .dock {
    gap:10px;
    padding:10px
  }
  .dock .app-cell {
    --icon-size:39px
  }
  .app-name {
    font-size:10px
  }
  .grid-stage {
    min-height:515px
  }
}

@media(max-height:799px) and (min-width:901px) {
  .grid-stage {
    min-height:242px
  }
}

@media(max-width:600px) {
  .grid-stage {
    min-height:399px
  }
}

@media(max-width:370px) {
  .grid-stage {
    min-height:375px
  }
}

@media(max-width:600px) and (max-height:900px) {
  :root {
    --icon-size:70px
  }
  .topbar {
    height:60px
  }
  .launchpad {
    padding-top:10px
  }
  h1 {
    margin:8px 0 17px
  }
  .search {
    height:40px
  }
  .departments {
    margin-top:13px;
    margin-bottom:12px
  }
  .section-heading {
    margin-bottom:17px
  }
  .app-grid {
    row-gap:15px
  }
  .grid-stage {
    min-height:365px
  }
  .pagination {
    margin-top:5px
  }
  .bottom-area {
    padding-top:13px
  }
  .dock-heading {
    margin-bottom:7px
  }
  .dock {
    padding:10px;
    min-height:64px;
    gap:clamp(8px,3vw,13px)
  }
  .dock .app-cell {
    --icon-size:clamp(36px,10vw,44px)
  }
  .footer-line {
    padding:16px 0
  }
}

@media(max-width:600px) and (max-height:759px) {
  .grid-stage {
    min-height:236px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

@media(prefers-contrast:more) {
  :root {
    --muted:var(--text);
    --quiet:var(--text)
  }
  .app-icon {
    outline:1px solid var(--icon-ink)
  }
  .search,.dock,.department[aria-pressed="true"] {
    border-color:var(--text)
  }
  .app-name {
    font-weight:650
  }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass {
    background:#375467
  }
  [data-theme="light"] .glass {
    background:#cee2e8
  }
}