/* ---------------------------------------------------
   Desktop (home): tokens
   Mantém a linguagem do site (mono + amarelo), com
   metáfora de sistema operativo.
--------------------------------------------------- */
:root {
  --font: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", "Liberation Mono", monospace;
  --accent: #ffcc00;
  --accent-ink: #0a0a0a;
  --available: #1f9d55;

  --menubar-h: 2rem;
  --gutter: 1rem;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Fundos (cada tema define wallpaper + vidro + tinta) */
:root,
:root[data-theme="branco"] {
  --wall: radial-gradient(120% 90% at 20% 10%, #ffffff 0%, #ecebe7 45%, #d9d7d1 100%);
  --ink: #0a0a0a;
  --ink-soft: #4d4d4d;
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .92);
  --solid: #f7f6f2;
  --line: rgba(10, 10, 10, .12);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08);
}
:root[data-theme="amarelo"] {
  --wall: radial-gradient(110% 80% at 80% 0%, #fff3b0 0%, #ffd84d 40%, #e8b800 100%);
  --ink: #0a0a0a;
  --ink-soft: #4a4026;
  --glass: rgba(255, 255, 255, .78);
  --glass-strong: rgba(255, 255, 255, .94);
  --solid: #fffbea;
  --line: rgba(10, 10, 10, .14);
  --shadow: 0 18px 50px -18px rgba(90, 60, 0, .45), 0 2px 6px rgba(0, 0, 0, .08);
}
:root[data-theme="preto"] {
  --wall: radial-gradient(120% 90% at 20% 0%, #2c2c2c 0%, #141414 55%, #0a0a0a 100%);
  --ink: #f5f5f5;
  --ink-soft: #a6a6a6;
  --glass: rgba(28, 28, 28, .78);
  --glass-strong: rgba(24, 24, 24, .94);
  --solid: #141414;
  --line: rgba(255, 255, 255, .12);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------
   Base
--------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--wall);
  background-color: #d9d7d1;
  background-attachment: fixed;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Grão subtil sobre o fundo (SVG inline, sem pedido de rede) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--accent);
}

/* ---------------------------------------------------
   Ecrã de bloqueio
--------------------------------------------------- */
.lock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: max(2rem, env(safe-area-inset-top)) var(--gutter) max(2rem, env(safe-area-inset-bottom));
  background: var(--wall);
  background-color: #d9d7d1;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: transform .7s var(--ease), opacity .5s ease;
}
.is-unlocked .lock {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.no-js .lock,
.lock[hidden] { display: none; }

.lock__top { align-self: start; }
.lock__date {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lock__time {
  font-size: clamp(5rem, 22vw, 13rem);
  font-weight: 200;
  line-height: .95;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.lock__id {
  display: grid;
  justify-items: center;
  gap: .35rem;
}
.lock__avatar,
.profile__avatar {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.75rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.lock__name {
  margin-top: .5rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lock__role {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.lock__social {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}
.lock__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--line);
}
.lock__social svg { width: 18px; height: 18px; }

.lock__bottom {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: .75rem;
}
.slider {
  --size: 3.25rem;
  position: relative;
  width: min(18rem, 80vw);
  height: calc(var(--size) + .5rem);
  padding: .25rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.slider__thumb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.slider__thumb.is-dragging { cursor: grabbing; }
.slider__thumb:not(.is-dragging) { transition: transform .3s var(--ease); }
.slider__thumb svg { width: 22px; height: 22px; stroke-width: 2.2; }
.slider__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: var(--size);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  pointer-events: none;
  /* Brilho a percorrer o texto, como no iOS antigo */
  background: linear-gradient(90deg, var(--ink-soft) 40%, var(--ink) 50%, var(--ink-soft) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2.8s linear infinite;
}
@keyframes shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.lock__hint {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------
   Desktop: estrutura
--------------------------------------------------- */
.desk {
  height: 100%;
  display: grid;
  grid-template-rows: var(--menubar-h) 1fr auto;
}

/* Barra de menu */
.menubar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--gutter);
  font-size: .78rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.menubar a { text-decoration: none; }
.menubar__me { position: relative; }
.menubar__brand {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .25rem .5rem;
  margin-left: -.5rem;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.menubar__brand:hover,
.menubar__brand[aria-expanded="true"] { background: var(--line); }

/* Menu do nome (padrão disclosure: botão + lista de links) */
.me-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: -.5rem;
  min-width: 12rem;
  padding: .35rem;
  border-radius: var(--radius-m);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: menu-in .14s var(--ease);
}
.me-menu[hidden] { display: none; }
.me-menu a {
  display: block;
  padding: .5rem .65rem;
  border-radius: var(--radius-s);
}
.me-menu a:hover,
.me-menu a:focus-visible { background: var(--accent); color: var(--accent-ink); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menubar__brand::before {
  content: "";
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.menubar__nav { display: flex; gap: .25rem; }
.menubar__nav a {
  padding: .25rem .5rem;
  border-radius: var(--radius-s);
}
.menubar__nav a:hover,
.menubar__nav a[aria-current="true"] { background: var(--line); }
.menubar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-variant-numeric: tabular-nums;
}
.menubar__lock {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  cursor: pointer;
}
.menubar__lock:hover { background: var(--line); }
.menubar__lock svg { width: 15px; height: 15px; }

/* Área principal */
.desk__main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 17rem;
  grid-template-areas: "icons profile widgets";
  gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  min-height: 0;
}

/* Cartão de perfil */
.profile {
  grid-area: profile;
  align-self: start;
  justify-self: center;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  max-width: 36rem;
  margin-top: 8vh;
  /* Cartão de vidro: garante contraste AA em qualquer fundo */
  padding: 1.25rem;
  border-radius: var(--radius-l);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.profile__avatar { flex: none; width: 5.5rem; height: 5.5rem; font-size: 2rem; }
.profile__title {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: .6rem;
}
.profile__lead { font-size: .85rem; color: var(--ink-soft); margin-bottom: .75rem; }
.profile__more {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* Ícones do desktop */
.icons { grid-area: icons; }
.icons ul {
  display: grid;
  grid-auto-flow: row;
  gap: .75rem;
}
.icon {
  display: grid;
  justify-items: center;
  gap: .3rem;
  width: 5.5rem;
  padding: .5rem .25rem;
  border-radius: var(--radius-m);
  text-decoration: none;
  text-align: center;
}
.icon:hover { background: var(--line); }
.icon[aria-current="true"] .icon__label { background: var(--accent); color: var(--accent-ink); }
.icon__img {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-m);
  /* Mosaico sempre claro, para o ícone ter contraste em qualquer fundo */
  background: #f7f6f2;
  border: 1px solid rgba(10, 10, 10, .12);
  box-shadow: var(--shadow);
  color: #0a0a0a;
  transition: transform .2s var(--ease);
}
.icon:hover .icon__img { transform: translateY(-2px); }
.icon__img svg { width: 2rem; height: 2rem; stroke-width: 2; }
.icon__img--folder { background: var(--accent); }
.icon__img--folder svg path:first-child { fill: rgba(255, 255, 255, .45); }
.icon__img--cal svg path { stroke: #0a0a0a; }
/* Jogos: mosaico escuro com âmbar, a antecipar a identidade do jogo */
.icon__img--game { background: #0e1116; border-color: rgba(255, 255, 255, .08); color: #ffb547; }
.icon__img--game circle { fill: currentColor; stroke: none; }
.icon__cal-day {
  position: absolute;
  top: 1.45rem;
  font-size: .85rem;
  font-weight: 700;
}
.icon__label {
  font-size: .72rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 4px;
  background: var(--glass);
}

/* Widgets */
.widgets {
  grid-area: widgets;
  display: grid;
  align-content: start;
  gap: .75rem;
}
.widget {
  padding: 1rem;
  border-radius: var(--radius-l);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: .8rem;
}
.widget__title {
  margin-bottom: .6rem;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.widget__meta { margin-top: .25rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.widget__cta {
  display: block;
  margin-top: .85rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.widget__cta:hover { filter: brightness(.95); }
.weather__now {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.weather__time,
.weather__temp {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.weather__temp { display: flex; align-items: center; gap: .35rem; }
.weather__temp[hidden] { display: none; }
.weather__temp svg { width: 1.5rem; height: 1.5rem; }
.status { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.status__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--available);
  box-shadow: 0 0 0 0 rgba(31, 157, 85, .5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); } 70%, 100% { box-shadow: 0 0 0 .5rem rgba(31, 157, 85, 0); } }
.widget__list { display: grid; }
.widget__list a {
  display: flex;
  gap: .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.widget__list li:first-child a { border-top: 0; }
.widget__list a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.widget__code { color: var(--ink-soft); }

.themes { display: flex; gap: .6rem; }
.themes__swatch {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
}
.themes__swatch[data-set-theme="branco"] { background: linear-gradient(135deg, #fff, #d9d7d1); }
.themes__swatch[data-set-theme="amarelo"] { background: linear-gradient(135deg, #fff3b0, #e8b800); }
.themes__swatch[data-set-theme="preto"] { background: linear-gradient(135deg, #2c2c2c, #0a0a0a); }
.themes__swatch[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent); }

/* Dock */
.dock-wrap {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: .5rem;
  padding: 0 var(--gutter) .75rem;
}
.dock {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  border-radius: var(--radius-l);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.dock[hidden] { display: none; }
.dock__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-m);
  background: var(--tile, #0a0a0a);
  color: var(--tile-ink, #fff);
  font-weight: 700;
  font-size: .9rem;
  transition: transform .2s var(--ease);
}
.dock__item:hover { transform: translateY(-6px) scale(1.12); }
.dock__item::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .5rem;
  border-radius: var(--radius-s);
  background: var(--glass-strong);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.dock__item:hover::after { opacity: 1; }
/* Tile que abre uma app: ocupa o tile todo (alvo maior, Fitts) */
.dock__item--app a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
}
.dock__item--app svg { width: 1.75rem; height: 1.75rem; stroke-width: 2.4; }
.dock__item span { font-size: .8rem; }
/* Logos de marca: preenchidos, não em traço */
.dock__logo { width: 1.75rem; height: 1.75rem; fill: currentColor; stroke: none; }
/* Ponto de "app aberta", como no macOS */
.dock__item--app:has(a[aria-current])::before {
  content: "";
  position: absolute;
  bottom: -.4rem;
  left: 50%;
  width: .3rem;
  height: .3rem;
  margin-left: -.15rem;
  border-radius: 50%;
  background: var(--ink);
}
.dock--min button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--glass-strong);
  color: var(--ink);
  cursor: pointer;
}
.dock--min svg { width: 1.6rem; height: 1.6rem; stroke-width: 2.4; }

/* ---------------------------------------------------
   Janelas
--------------------------------------------------- */
.windows { position: absolute; inset: 0; pointer-events: none; }
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: min(56rem, calc(100% - 2rem));
  height: min(40rem, calc(100% - 2rem));
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .12);
  pointer-events: auto;
  animation: win-in .22s var(--ease);
}
.win:focus { outline: none; }
.win:not(.is-active) .win__bar { color: var(--ink-soft); }
.win[hidden] { display: none; }
.win.is-max {
  inset: 0 !important;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
@keyframes win-in { from { opacity: 0; transform: scale(.96); } }

.win__bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 2.5rem;
  padding: 0 .6rem;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.win.is-dragging .win__bar { cursor: grabbing; }
.win__controls { display: flex; gap: .4rem; }
/* Controlos neutros (sem o vermelho do macOS: vermelho fica reservado a erros) */
.win__btn {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.win__btn:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.win__btn svg { width: 10px; height: 10px; stroke-width: 1.8; }
.win__title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.win__open {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-s);
}
.win__open:hover { background: var(--line); }
.win__open svg { width: 12px; height: 12px; }
.win__body { position: relative; flex: 1; background: var(--glass-strong); }
.win__body iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Enquanto se arrasta, o iframe não pode "roubar" o rato */
.is-dragging-any .win__body iframe { pointer-events: none; }

/* ---------------------------------------------------
   Tablet: widgets passam para baixo dos ícones
--------------------------------------------------- */
@media (max-width: 1100px) {
  .desk__main {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icons profile" "icons widgets";
    overflow-y: auto;
  }
  .widgets { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 46rem; justify-self: center; width: 100%; }
}

/* ---------------------------------------------------
   Mobile: ecrã tipo telemóvel
   Janelas em ecrã inteiro, sem arrastar (alvos touch grandes, Fitts).
--------------------------------------------------- */
@media (max-width: 720px) {
  body { overflow: auto; }
  .desk { min-height: 100%; height: auto; grid-template-rows: auto 1fr auto; }

  .menubar { position: sticky; top: 0; padding-top: env(safe-area-inset-top); height: auto; min-height: 2.25rem; }
  .menubar__nav { display: none; }

  .desk__main {
    grid-template-columns: 1fr;
    grid-template-areas: "profile" "icons" "widgets";
    gap: 1.5rem;
    padding: 1.25rem var(--gutter) 6.5rem;
    overflow: visible;
  }
  .profile { margin-top: 0; justify-self: stretch; }
  .profile__avatar { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
  .profile__title { font-size: 1rem; }

  .icons ul { grid-template-columns: repeat(4, 1fr); gap: 1rem .25rem; }
  .icon { width: auto; padding: 0; }
  .icon:hover { background: none; }
  .icon__img { width: 3.75rem; height: 3.75rem; border-radius: 1rem; }
  .icon__label { background: none; font-weight: 400; }

  .widgets { grid-template-columns: 1fr; }

  .dock-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  }
  .dock { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .dock__item:hover { transform: none; }
  .dock__item::after { display: none; }

  .windows { position: fixed; z-index: 70; }
  .win,
  .win.is-max {
    inset: 0 !important;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    background: var(--solid);
    animation-name: win-up;
  }
  .win__bar {
    height: auto;
    min-height: 3rem;
    padding-top: env(safe-area-inset-top);
    cursor: default;
  }
  .win__btn--desk { display: none; }
  .win__btn[data-action="close"] { width: 2.75rem; height: 2.75rem; border: 0; }
  .win__btn[data-action="close"] svg { width: 14px; height: 14px; }
  @keyframes win-up { from { transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}