@import "./bootstrap-icons.css";
@import "./base.css";




:root {
  /* One mode only. The OS ships a single fixed appearance; pinning
     color-scheme stops the browser's own dark/light preference from
     restyling native controls, scrollbars and form fields.

     Round 6 inverted the material. These are the shell's fallbacks for the
     brief moment before pekan/os2031.css lands and for anything the theme
     layer does not reach; os2031.css owns the real values. */
  color-scheme: only dark;
  --text: #F3F0FA;
  --text2: #C4C0D0;
  --bg: #12101a;
  --bg50: #161220a0;
  --bg70: #161220c0;
  --shadow: #00000090;
  --card: #ffffff0d;
  --hover: #ffffff14;
  --hover-half: #ffffff0d;
  --hover-b: #ffffff10;
  --bggrey: #1c162a;
  --fill: #ffffff1a;
  --bgul: #0c0a12;
  --mm: #1c162ad9;
  --contextmeu: #1c162ac7;
  --bar: #ffffff0d;
  --hr: #ffffff2e;
  --unfoc: #161220;
  --msg: #1c162ae7;
  --theme-1: #6e5ae8;
  --theme-2: #8273ff;
  --href: #a99bff;
  --bd: #ffffff14;
  --s3d: #0000006b;
  --mica: none;
}

:root.dark {
  --text: #eee;
  --text2: #aaa;
  --bg: #000000;
  --bg50: #111111a0;
  --bg70: #1a1a1ac5;
  --shadow: #000000a0;
  --card: #72727240;
  --hover: #aaaaaa30;
  --hover-half: #ffffff20;
  --hover-b: #eeeeee0f;
  --bggrey: #444;
  --fill: #99999970;
  --bgul: #0b0818;
  --mm: #ffffff50;
  --contextmeu: #292929bb;
  --bar: #7272722a;
  --hr: #333;
  --unfoc: #202020;
  --msg: #303030d0;
  --bd: #ffffff06;
  --s3d: #11111150;
  --mica: linear-gradient(215deg, #2d161c, #102d53);
}

:root.notrans *,
:root.notrans *::before,
:root.notrans *::after {
  transition: none !important;
  animation: none !important;
}

:root.nosd {
  --shadow: none;
}

:root.moreblur .window:not(.foc) {
  background: var(--bg70);
  background-color: none;
  backdrop-filter: blur(30px);
}

body,
p {
  transition: 100ms;
}

p {
  margin: 0;
}

html {
  position: fixed;
  height: 100%;
  width: 100%;
}

body {
  background: var(--bgul) center;
  background-size: cover;
  height: 100%;
  font-family: var(--pd-font);
  font-size: 15.5px;
  color: var(--text);
  user-select: none;
}

/* Animated brand wallpaper, drawn in CSS.
   Replaces a 1.8MB video loop with a few hundred bytes, stays sharp at any
   resolution and never shows compression artefacts. */
#bg-anim {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 50% -10%,
      rgba(88, 86, 233, 0.34),
      transparent 58%
    ),
    #07050f;
}

/* Slow drifting colour fields. Large, blurred and low contrast so desktop
   copy stays readable without fighting the background. */
#bg-anim > i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(76px);
  will-change: transform;
}

#bg-anim > i:nth-child(1) {
  top: -14%;
  left: -8%;
  width: 46vw;
  height: 46vw;
  background: rgba(131, 138, 255, 0.5);
  animation: pd-drift-a 38s ease-in-out infinite;
}

#bg-anim > i:nth-child(2) {
  right: -12%;
  bottom: -18%;
  width: 52vw;
  height: 52vw;
  background: rgba(88, 86, 233, 0.45);
  animation: pd-drift-b 46s ease-in-out infinite;
}

#bg-anim > i:nth-child(3) {
  top: 22%;
  right: 16%;
  width: 30vw;
  height: 30vw;
  background: rgba(169, 167, 253, 0.3);
  animation: pd-drift-c 33s ease-in-out infinite;
}

/* A single small warm accent keeps it from reading as a pure violet wash. */
#bg-anim > i:nth-child(4) {
  bottom: 12%;
  left: 24%;
  width: 17vw;
  height: 17vw;
  background: rgba(255, 220, 96, 0.14);
  animation: pd-drift-a 52s ease-in-out infinite reverse;
}

@keyframes pd-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(9vw, 6vh, 0) scale(1.16);
  }
}

@keyframes pd-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  50% {
    transform: translate3d(-11vw, -7vh, 0) scale(0.92);
  }
}

@keyframes pd-drift-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.95);
  }
  50% {
    transform: translate3d(-7vw, 9vh, 0) scale(1.2);
  }
}

/* Respect people who ask their system for less motion. Each blob sets its
   animation through an :nth-child rule, so a bare `#bg-anim > i` here loses on
   specificity and the wallpaper keeps moving. Match the selectors it needs to
   beat. */
@media (prefers-reduced-motion: reduce) {
  #bg-anim > i,
  #bg-anim > i:nth-child(1),
  #bg-anim > i:nth-child(2),
  #bg-anim > i:nth-child(3),
  #bg-anim > i:nth-child(4) {
    animation: none;
  }
}

/* Optional brand video wallpaper, enabled by setting PEKAN_WALLPAPER. */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

/* Without a video source the element must not paint over the animation. */
body:not(.has-video-wallpaper) #bg-video {
  display: none;
}

/* The scrim guarantees contrast for icon labels and panels. The coded
   wallpaper is already dark and controlled, so it only needs a light touch;
   an arbitrary brand video needs much more. */
#bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 8, 24, 0.34) 0%,
    rgba(11, 8, 24, 0.08) 45%,
    rgba(11, 8, 24, 0.42) 100%
  );
}

body.has-video-wallpaper #bg-scrim {
  background:
    linear-gradient(
      180deg,
      rgba(11, 8, 24, 0.72) 0%,
      rgba(11, 8, 24, 0.45) 45%,
      rgba(11, 8, 24, 0.78) 100%
    ),
    linear-gradient(
      90deg,
      rgba(11, 8, 24, 0.62) 0%,
      rgba(11, 8, 24, 0.18) 40%,
      rgba(11, 8, 24, 0.35) 100%
    );
}

/* Pekan brand icon in start button */
/* The source mark is 192px square. Without a size it overflows the dock pill
   and renders as a clipped smear. */
.pekan-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 6px;
}



/* Clock reads as one quiet line rather than a stacked block. */
#dock-box > .dock.date {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The upstream rule pins this to a fixed width sized for the old stacked
     layout, which clips a single line. */
  width: auto;
  overflow: visible;
  padding: 7px 14px;
  cursor: default;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 500;
}

.dock.date > .time,
.dock.date > .date {
  white-space: nowrap;
}

.dock.date > .date {
  color: rgba(255, 255, 255, 0.5);
  /* Upstream pulls the date up by 8px to stack it under the time. On one
     line that just knocked it 4px above the clock. */
  margin-top: 0;
}

.dock-date-sep {
  /* Inherited padding of 0 3px plus border-box collapsed the 3px width into
     a 6px wide ellipse. */
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

/* The base .dock has 7px padding and no vertical centring, leaving a 26px
   content box. Taller buttons were pinned to the top and sat below the dock's
   own centre line, overflowing its bottom edge. */
.dock.dock-start {
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
}

/* The pd mark carries this on its own. The word Start keeps it unambiguous. */
#start-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 9px;
  background: none;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 160ms;
}

#start-btn:hover,
#start-btn.show {
  background: rgba(255, 255, 255, 0.1);
  filter: none;
}

#start-btn .start-label {
  line-height: 1;
}

#start-btn .pd-mark {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  object-fit: contain;
}

.dock-divider {
  /* Same trap as the clock separator: inherited padding of 0 3px plus
     border-box turned a 1px rule into a 6px slab. */
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
}

/* Pinned apps: the three demos that carry the pitch. */
.dock-btn.pin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  border-radius: 8px;
}

.dock-btn.pin:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dock-btn.pin > img {
  width: 22px;
  height: 22px;
}

/* Nothing in the shell is hidden. The orientation warning is included: it is
   worth seeing while building, and whether it earns its place in front of a
   phone visitor is a decision to make after looking at it. */
@media (max-width: 860px) {
}

html.night {
  filter: brightness(0) !important;
}

.a {
  color: var(--text);
  text-decoration: none !important;
  cursor: pointer;
}

.jump {
  cursor: alias !important;
  /* text-decoration: underline; */
  color: var(--href);
}

.jump:hover {
  color: #999;
}

.jump:active {
  color: #666;
}

hr {
  background-color: #afafaf50;
}

::-webkit-scrollbar {
  border-radius: 7px;
  height: 14px;
  width: 14px;
}

::-webkit-scrollbar:hover {
  background-color: var(--card);
}

::-webkit-scrollbar-thumb {
  background: #7f7f7f70;
  background-clip: padding-box;
  border: 6px solid transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  border: 4px solid transparent;
}

::-webkit-scrollbar-corner {
  display: none;
}

.act,
list:not(.new) > a,
#cs > list > a,
#datebox > .cont > .body > p,
.wg > .titbar > .more,
.wg.calc > .content > .b,
.button {
  transition: 80ms !important;
}

.act:active,
list:not(.new) > a:active,
#cs > list > a:active,
#datebox > .cont > .body > p:active,
.wg > .titbar > .more:active,
.wg.calc > .content > .b:active,
.button:active {
  /* transform: scale(0.93); */
  /* filter: blur(0.5px); */
  filter: opacity(0.7);
  /* transition: transform 500ms cubic-bezier(0.24, 0.86, 0.36, 0.44) !important; */
}



.input {
  background-color: var(--bg50);
  border: 1px solid #7f7f7f3d;
  border-radius: 7px;
  padding: 3px 5px 3px 8px;
  outline: medium;
  width: 100%;
  color: var(--text);
  transition:
    100ms,
    border 0s;
}

:root.corner_squ .input {
  corner-shape: squircle;
  border-radius: 15px;
}

.input:hover {
  background: var(--contextmeu);
}

.input:focus {
  background-color: var(--bg);
  border-color: var(--href);
  opacity: 1;
}

input.foc {
  display: block;
  height: 0;
  width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: none;
}

.btn {
  border: 0px solid;
  border-radius: 10px;
  padding: 7px 10px;
  transition: 100ms;
  background-color: #00000000;
}

:root.corner_squ .btn {
  corner-shape: squircle;
  border-radius: 20px;
}

.btn-icon {
  border: 0px solid;
  border-radius: 10px;
  background-color: #00000000;
  font-size: 22px;
  height: 33px;
  width: 33px;
  overflow: hidden;
}

.btn-icon.big {
  padding: 3px 8px;
  font-size: 17px;
}

.btn:hover {
  background: var(--hover);
}

.btn:active {
  /* transform: scale(0.9); */
  opacity: 0.7;
}

.button {
  background-color: #9f9f9f40;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: default;
  text-align: center;
}

:root.corner_squ .button {
  corner-shape: squircle;
  border-radius: 20px;
}

.button:hover {
  backdrop-filter: invert(0.1);
}

.button:active {
  opacity: 0.8;
}

.buttons {
  display: inline-block;
  position: absolute;
  bottom: 20px;
  right: 15px;
}

.buttons > * {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 8px;
  margin: 0px 4px;
  transition: transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03) !important;
  /* box-shadow: 2px 2px 4px var(--shadow); */
  box-shadow: 0 1px 2px 1px var(--s3d);
  min-width: 55px;
  text-align: center;
}

.buttons > *:hover {
  filter: brightness(1.2);
}

.buttons > *:active {
  opacity: 0.7;
  /* transform: scale(0.85); */
}

.buttons > .submit {
  background-image: linear-gradient(120deg, var(--theme-1), var(--theme-2));
  color: #fff;
}

.buttons > .cancel {
  background-color: var(--bggrey);
}

list {
  display: block;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 7px;
}

list > * {
  width: 100%;
  color: var(--text);
  text-align: inherit;
  border-radius: 7px;
  position: relative;
  display: block;
  padding: 3px 24px;
}

:root.corner_squ list > * {
  corner-shape: squircle;
  border-radius: 20px !important;
}

list:not(.new) > a {
  transition:
    50ms,
    transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03);
}

list:not(.new) > a:active {
  opacity: 0.7;
  /* transform: scale(0.95); */
}

list.new > a {
  transition:
    50ms,
    opacity 80ms;
}

list.new > a:active {
  opacity: 0.7;
}

list > a:hover {
  color: var(--text);
  background-color: var(--hover-half);
  text-decoration: none;
  box-shadow: 0 1px 2px var(--s3d);
}

list > hr {
  width: calc(100% - 12px);
  padding: 0 !important;
  margin: 2px 6px;
  background-color: #7f7f7f7f;
  border-radius: 5px;
  height: 0.75px;
  cursor: inherit;
}

list > hr:hover {
  background-color: #7f7f7f7f;
}

list > .text {
  margin: 0;
  cursor: inherit;
  border: none;
}

list > .text:hover {
  background-color: unset;
  border: none;
}

list > span.focs {
  display: block;
  width: 4px;
  height: 20px;
  background: linear-gradient(0deg, var(--theme-1), var(--theme-2));
  background-size: cover;
  padding: 0;
  border-radius: 2px;
  position: relative;
  margin: -30px 7px 0 7px;
  z-index: 1;
  transition: 500ms cubic-bezier(1, 0, 0, 1);
  /* transform-origin: top; */
}

list > span.focs.cl {
  animation: fcl 200ms cubic-bezier(1, 0.8, 0, 0.2) 160ms;
}

@keyframes fcl {
  0% {
    transform: none;
  }

  50% {
    transform: scaleY(0.5);
  }

  100% {
    transform: none;
  }
}



#dock-box {
  position: fixed;
  bottom: 10px;
  height: 40px;
  display: flex;
  width: 100%;
  z-index: 92;
  padding: 0 5px;
  justify-content: center;
  transition: bottom 400ms;
}

#dock-box.hide {
  bottom: -60px;
}

#open-dock {
  animation: none;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  height: 32px;
  aspect-ratio: 1/1;
  background-color: var(--contextmeu);
  backdrop-filter: blur(20px) saturate(2);
  text-align: center;
  z-index: 91;
  line-height: 32px;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(20px) saturate(2);
  box-shadow:
    0 1px 2px #44444460,
    0px 3px 25px 1px var(--shadow);
  outline: 1px solid #99999950;
  transition:
    200ms,
    transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03),
    backdrop-filter,
    -webkit-backdrop-filter 0ms;
}

#dock-box.hide ~ #open-dock {
  animation: open-dock-bounce 2s ease infinite alternate;
  transition: 200ms;
  opacity: 1;
}

@keyframes open-dock-bounce {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 20px;
  }
  100% {
    bottom: 10px;
  }
}

:root.corner_squ #open-dock {
  corner-shape: squircle;
  border-radius: 20px;
}

#open-dock > * {
  font-family: SettingsIcons;
  font-size: 20px;
}

.dock {
  border-radius: var(--dock-radius, 10px);
  height: 100%;
  background-color: var(--contextmeu);
  backdrop-filter: blur(20px) saturate(2);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  box-shadow:
    0 1px 2px #44444460,
    0px 3px 25px 1px var(--shadow);
  padding: 7px 6px;
  margin: 0 3px;
  outline: 1px solid #99999950;
  display: flex;
  transition:
    200ms,
    transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03),
    backdrop-filter,
    -webkit-backdrop-filter 0ms;
  bottom: 0;
  /* transform: scale(1); */
  /* border: 1.5px solid #6f6f6f30; */
}

:root.corner_squ .dock {
  corner-shape: squircle;
  border-radius: var(--dock-radius, 20px);
}

.dock > * {
  padding-left: 3px;
  padding-right: 3px;
}

.dock.control:hover,
.dock.theme:hover,
.dock.date:hover {
  backdrop-filter: blur(20px) saturate(1.5) brightness(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.2);
}

#toolbar {
  display: flex;
}

#taskbar {
  padding: 3px 2px;
  transition: 80ms;
  overflow: hidden;
  width: 0;
}

#taskbar > a {
  border-radius: 10px;
  height: 34px;
  width: 38px;
  transition: 100ms;
  padding: 4px 5px;
  display: block;
  margin: 0;
  background-clip: padding-box;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

#taskbar > a:hover {
  background-color: var(--hover);
}

#taskbar > a:active > img {
  transform: scale(0.8);
}

#taskbar > a > img {
  width: 26px;
  height: 26px;
  transition: 100ms;
  margin: -1px 0 0 -0.5px;
}

#taskbar > a:not(.min) > img {
  animation: task-show 800ms;
}

@keyframes task-show {
  0% {
    margin-top: -1px;
    margin-bottom: 0;
  }

  40% {
    margin-top: -6px;
    margin-bottom: 5px;
    transform: scaleY(1.1);
    transform-origin: bottom;
  }

  60% {
    margin-top: 1px;
    margin-bottom: -2px;
    transform: scaleY(0.8);
    transform-origin: bottom;
  }

  100% {
    margin-top: -1px;
    margin-bottom: 0;
  }
}

#taskbar > a.min > img {
  animation: task-hide 800ms;
}

@keyframes task-hide {
  0% {
    margin-top: -1px;
    margin-bottom: 0;
  }

  40% {
    /* margin-top: 3px;
        margin-bottom: -4px; */
    margin-top: 0px;
    margin-bottom: -1px;
    transform: scaleY(0.8);
    transform-origin: bottom;
  }

  70% {
    margin-top: -2px;
    margin-bottom: 1px;
    transform: scaleY(1.05);
    transform-origin: bottom;
  }

  100% {
    margin-top: -1px;
    margin-bottom: 0;
  }
}

#taskbar > a::after {
  content: "";
  display: block;
  width: 18px;
  background: linear-gradient(90deg, var(--theme-1), var(--theme-2));
  height: 4px;
  border-radius: 2px;
  position: relative;
  bottom: 4px;
  left: 3.2px;
  transition: 150ms;
}

#taskbar > a:not(.foc)::after {
  background: linear-gradient(90deg, #7f7f7f, #7f7f7f);
  width: 12px;
  left: 6px;
}

#taskbar > a:not(.foc):hover:after {
  width: 16px;
  left: 4.2px;
}

#taskbar > a.foc:hover:after {
  width: 22px;
  left: 1.2px;
}

#taskbar > a.min:hover:after {
  width: 18px;
  left: 3.2px;
}

.dock.date {
  width: 112px;
  padding: 0px 5px;
  display: block;
  text-align: center;
  overflow: hidden;
}

.dock.date:active {
  transform: scale(0.9);
  filter: opacity(0.6) !important;
}

.dock.control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.dock.control > icon {
  font-size: 17px;
}

.dock.control > * {
  margin: 0 -2px 0 -1px;
}

.dock.control:active {
  transform: scale(0.9);
  filter: opacity(0.6) !important;
}

.dock.date > .date {
  margin-top: -8px;
}

.dock.date > p {
  transition: 200ms cubic-bezier(0.9, 0, 0.1, 1);
}

.dock.date.show > p {
  margin-top: -50px;
}

.dock.date > .bi {
  position: absolute;
  display: block;
  text-align: center;
  left: 0;
  top: 37px;
  width: 100%;
  transition: 200ms cubic-bezier(0.9, 0, 0.1, 1);
}

.dock.date.show > .bi {
  top: 7px;
}

.dock.theme {
  width: 40px;
  padding-left: 3.5px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 6px 1px var(--shadow);
}

.dock.theme:active {
  transform: scale(0.9);
  filter: opacity(0.6) !important;
}

.dock.theme > .dark {
  position: absolute;
  height: 30px;
  width: 30px;
  top: 5px;
  left: 40px;
  transition: 200ms cubic-bezier(0.9, 0, 0.1, 1);
  opacity: 0;
}

.dock.theme > .light {
  height: 30px;
  width: 30px;
  position: absolute;
  top: 5px;
  left: 5px;
  transition: 200ms cubic-bezier(0.9, 0, 0.1, 1);
  opacity: 1;
}

.dock.theme.dk > .dark {
  left: 5px;
  opacity: 1;
}

.dock.theme.dk > .light {
  left: -30px;
  opacity: 0;
}

.dock-btn {
  transition: 200ms;
  width: 32px;
  height: 26px;
  overflow: hidden;
}

.dock-btn:hover,
.dock-btn.show {
  filter: brightness(1.2);
}

#start-btn > svg.menu {
  position: relative;
  top: 27px;
  transition: 200ms;
}

#start-btn.show > svg.menu {
  top: 0;
  transition-delay: 200ms;
}

#start-btn > .ico {
  position: relative;
  top: -32px;
  transition:
    transform 200ms,
    top 200ms 100ms,
    left 200ms;
  left: 0;
  /* transition-delay: 100ms; */
}

#start-btn.show > .ico {
  transform: scale(0.5);
  top: -26px;
}

#search-btn > svg.in {
  position: relative;
  display: block;
  top: -29.6px;
  left: 2.5px;
  width: 16px;
  height: 16px;
  transition: 200ms;
}

#search-btn:active {
  transform: scale(0.85);
}

#search-btn.show > svg.in {
  transform: scale(1.1) rotate(360deg);
  filter: saturate(2) brightness(1.1);
}

#widgets-btn > svg {
  display: block;
}

#widgets-btn:active {
  transform: scale(0.85);
}

#widgets-btn > .wid2 {
  margin-top: -19px;
  margin-left: 10.5px;
  height: 20px;
  transition: 150ms cubic-bezier(0.8, 0, 0.2, 1);
  transition-delay: 0ms;
}

#widgets-btn > .wid3 {
  margin-top: 13px;
  margin-left: -2px;
  height: 31px;
  transition: 100ms cubic-bezier(0.8, 0, 0.2, 1);
  transition-delay: 100ms;
}

#widgets-btn > .wid4 {
  margin-top: 4px;
  margin-left: 11.5px;
  height: 12px;
  transition: 200ms cubic-bezier(0.8, 0, 0.2, 1);
  transition-delay: 180ms;
}

#widgets-btn.show > .wid2 {
  margin-top: -28px;
}

#widgets-btn.show > .wid3 {
  margin-top: -20.5px;
}

#widgets-btn.show > .wid4 {
  margin-top: -14px;
}

#copilot-btn > img {
  width: 24px;
  transition: 200ms cubic-bezier(0, 0, 0, 1);
}

#copilot-btn:active {
  transform: scale(0.85) rotate(-20deg);
}

#copilot-btn.show:active {
  transform: scale(0.85) rotate(20deg);
}

#copilot-btn.show > img {
  transform: rotate(420deg);
}



#start-menu,
#search-win,
#widgets,
#datebox,
#control {
  display: none;
  position: fixed;
  border-radius: 20px;
  background: var(--bg50);
  /* backdrop-filter: blur(60px) saturate(3) contrast(0.8); */
  backdrop-filter: saturate(4) contrast(0.8) blur(70px);
  -webkit-backdrop-filter: blur(60px) saturate(3) contrast(0.8);
  opacity: 0.5;
  border: 1.5px solid #99999950;
  z-index: 91;
  box-shadow: 3px 3px 20px 1px var(--shadow);
  transition:
    300ms,
    transform 400ms cubic-bezier(0.05, 0.96, 0.11, 1),
    opacity 300ms;
  bottom: 60px;
}

:root.corner_squ {
  #start-menu,
  #search-win,
  #datebox,
  #control,
  #widgets {
    corner-shape: squircle;
    border-radius: 45px;
  }
}

#start-menu {
  height: 594px;
  max-height: calc(100% - 120px);
  width: 900px;
  left: calc(50% - 450px);
  box-shadow: var(--glass-shadow-lift, 3px 3px 25px 1px var(--shadow));
  padding: 2px 4px;
  bottom: 60px;
  transform: translateY(700px);
}

#start-menu.show-begin {
  display: flex;
}

#start-menu.show {
  opacity: 1;
  transform: none !important;
}

#start-menu.max {
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 100%;
  max-height: 100%;
  height: 100%;
  border-radius: 0 !important;
  transition: 200ms cubic-bezier(0.9, 0, 0.1, 1);
}

#start-menu.max > #startmenu-l > #startmenu-user {
  margin-bottom: 60px;
  top: 10px;
}

#start-menu.max > #startmenu-r > .tuijian > .apps > * {
  width: 25%;
}

#startmenu-l {
  min-width: 310px;
  height: 100%;
  padding: 0 5px 0 10px;
  transition: 400ms;
  display: flex;
  flex-direction: column;
}

#start-menu.max > #startmenu-l {
  min-width: 300px;
  width: 22%;
}

#startmenu-l > .input {
  padding-left: 30px;
}

input-before {
  display: block;
  font-size: 15px;
  height: 0;
  margin-top: -29px;
  margin-left: 8px;
  margin-bottom: 10px;
  color: var(--text);
}

#startmenu-l > list {
  margin-left: 5px;
  margin-top: 40px;
  flex-grow: 1;
  overflow: auto;
  padding-bottom: 40px;
}

#startmenu-l > list > a {
  padding: 3px 5px 3px 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}

#startmenu-l > list > a > p {
  margin: 5px 0 5px 10px;
}

#startmenu-l > list > a > img {
  height: 28px;
  width: 28px;
}

#startmenu-l > list > .text {
  padding-left: 10px;
  font-size: 16px;
  height: 35px;
}

#startmenu-r {
  flex-grow: 1;
  overflow: hidden;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
}

#startmenu-r > * {
  opacity: 0;
  transition:
    transform 200ms cubic-bezier(0, 0, 0, 1),
    opacity 200ms 30ms;
  transform: translate(0, 50px);
}

#start-menu.show > #startmenu-r > * {
  transform: none;
  opacity: 1;
}

#startmenu-r > .row1 {
  display: flex;
  transition-delay: 200ms;
}

#startmenu-r > .row1 > .tool {
  width: 200px;
  padding: 5px 10px 0 0;
  transition: 300ms;
  display: flex;
  flex-direction: column;
  align-items: end;
}

#startmenu-r > .row1 > .tool > .pw {
  display: flex;
  justify-content: right;
  align-items: center;
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.power {
  overflow: hidden;
  display: flex;
  width: 33px;
  padding: 0;
  /* padding-left: 0; */
}

#startmenu-r > .row1 > .tool > .pw > .power.show {
  width: 100px;
  background-color: var(--hover-b);
  /* box-shadow: 3px 3px 6px var(--shadow); */
}

#startmenu-r > .row1 > .tool > .pw > .power.show > span.bi-power {
  opacity: 0.7;
  transform: scale(0.7);
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.show:hover {
  background-color: var(--hover-b);
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.power > .bi {
  /* position: relative; */
  height: 33px;
  padding-left: 5px;
  padding-right: 5px;
  transition: 200ms;
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.power > i.bi-power {
  border-radius: 10px 0 0 10px;
}

#startmenu-r
  > .row1
  > .tool
  > .pw
  > .btn-icon.power
  > i.bi-arrow-counterclockwise {
  border-radius: 0 10px 10px 0;
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.show > i {
  background-color: var(--hover-h);
}

#startmenu-r > .row1 > .tool > .pw > .btn-icon.show > i:hover {
  background-color: var(--hover);
}

#start-menu.max > #startmenu-r > .row1 > .tool {
  margin-left: 100px;
  margin-right: 50px;
}

#startmenu-r > .row1 > .folder,
#startmenu-r > .pinned,
#startmenu-r > .tuijian {
  background-color: var(--card);
  box-shadow: 0px 1px 8px var(--s3d);
  border-radius: 10px;
  padding: 7px 10px;
}

:root.corner_squ {
  #startmenu-r > .row1 > .folder,
  #startmenu-r > .pinned,
  #startmenu-r > .tuijian {
    corner-shape: squircle;
    border-radius: 25px;
  }
}

#startmenu-r > .row1 > .folder {
  display: flex;
  margin: 15px 15px;
  flex-grow: 1;
}

#startmenu-r > .row1 > .folder > .sm-app {
  height: 72px;
}

#startmenu-r > .pinned {
  margin-right: 10px;
  margin-left: 15px;
  transition-delay: 300ms;
  height: 220px;
  display: flex;
  flex-direction: column;
}

#startmenu-r > .pinned > .apps {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  overflow: auto;
  flex-grow: 1;
}

#startmenu-r > .pinned > .title {
  padding: 5px 0 5px 10px;
  font-size: 18px;
  font-weight: 530;
  display: flex;
}

#startmenu-r > .pinned > .title > * {
  width: 100%;
}

#startmenu-r > .tuijian {
  margin: 15px 10px 0 15px;
  transition-delay: 450ms;
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

#startmenu-r > .tuijian > .apps {
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
  overflow: auto;
}

#startmenu-r > .tuijian > .apps > * {
  transition: 80ms;
}

#startmenu-r > .tuijian > .title {
  padding: 5px 0 5px 10px;
  font-size: 18px;
  font-weight: 530;
  display: flex;
}

#startmenu-r > .tuijian > .title > * {
  width: 100%;
}

#startmenu-user {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  top: -50px;
  left: calc(50% - 50px);
  background-color: var(--bggrey);
  font-size: 80px;
  box-shadow: 3px 3px 6px var(--shadow);
  transition: 200ms 100ms;
}

#startmenu-user > svg {
  position: relative;
  top: -8px;
  left: 15px;
  width: 70px;
  height: 70px;
}

/* THE OTHER HALF OF THE BRAND CLIP. The rule above is stock chrome for the
   original letter avatar: it hard sets 70px and nudges the glyph 15px right
   and 8px up. With the Pekan guest mark in the slot that is a 70px child
   inside a 46px content box, offset out of it: measured scrollWidth 61 and
   scrollHeight 70 against clientWidth 46 on a phone, with overflow hidden
   doing the cutting. The mark is centred and sized to its slot instead. */
#startmenu-user.pk-guest > svg,
#startmenu-user > svg.pk-guest-cursor {
  position: static;
  top: auto;
  left: auto;
  width: 72%;
  height: 72%;
  max-width: 100%;
  max-height: 100%;
}

.more-btn {
  background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  float: right;
  padding: 6px 10px;
  transition: 100ms;
  line-height: 1;
  display: flex;
  align-items: center;
}

.more-btn:hover {
  filter: brightness(1.2);
}

.more-btn > .bi {
  font-size: 10px;
}

.sm-app {
  width: 85px;
  height: 80px;
  border-radius: 10px;
  text-align: center;
  transition: 80ms;
  padding: 0 3px;
  color: #888;
  cursor: inherit;
}

:root.corner_squ .sm-app {
  corner-shape: squircle;
  border-radius: 20px;
}

.sm-app.enable {
  color: var(--text);
  cursor: default;
}

.sm-app.enable:hover {
  background-color: var(--hover);
}

.sm-app.enable > *:first-child {
  filter: brightness(1);
}

.sm-app > *:first-child {
  height: 40px;
  width: 40px;
  margin-top: 8px;
  transition: 80ms;
  filter: contrast(0.3) brightness(0.7);
  text-shadow: 3px 3px 5px var(--shadow);
}

.sm-app > *:last-child {
  margin-top: -3px;
  transition: 80ms;
  font-size: 11px;
  line-height: 13px;
}

.sm-app:hover {
  background-color: unset;
}

.sm-app:active > *:first-child {
  transform: scale(0.8);
}

.sm-app.enable:active > *:first-child {
  filter: brightness(0.8) opacity(0.8);
}

.tj-obj {
  width: 50%;
  height: 55px;
  border-radius: 10px;
  transition: 80ms;
  padding: 0 3px;
  display: flex;
  padding: 10px 3px 10px 10px;
  overflow: hidden;
}

:root.corner_squ .tj-obj {
  corner-shape: squircle;
  border-radius: 20px;
}

.tj-obj > img {
  height: 35px;
  width: 35px;
  transition: 200ms;
}

.tj-obj > div > *:first-child {
  margin: 3px 0 2px 5px;
  font-size: 15px;
  line-height: 13px;
  white-space: nowrap;
}

.tj-obj > div > *:last-child {
  font-size: 10px;
  line-height: 13px;
  margin-left: 6px;
  color: #7f7f7f;
}

.tj-obj:hover {
  background-color: var(--hover);
}

#search-win {
  height: 594px;
  max-height: calc(100% - 120px);
  width: 600px;
  left: calc(50% - 300px);
  padding: 15px;
  transform: translateY(660px);
}

#search-win.show-begin {
  display: flex;
  flex-direction: column;
}

#search-win.show {
  opacity: 1;
  transform: none;
}

#search-win > .input {
  padding-left: 30px;
}

#search-win > .tab {
  display: flex;
  margin-top: 25px;
  margin-bottom: 10px;
}

#search-win > .tab > a {
  padding: 4px 7px 3px 7px;
  margin: 0 1px;
  text-align: center;
  border-radius: 10px;
  transition: 100ms;
}

#search-win > .tab > a:hover,
#search-win > .tab > a.now {
  background-color: var(--hover);
}

#search-win > .tab > a.now::after {
  content: "";
  display: block;
  position: relative;
  bottom: 0;
  background-image: linear-gradient(90deg, var(--theme-1), var(--theme-2));
  width: calc(100% - 6px);
  left: 3px;
  height: 3px;
  border-radius: 10px;
}

#search-win > .ans {
  display: flex;
  flex-grow: 1;
  overflow-y: auto;
}

#search-win > .ans > .list {
  width: 250px;
  height: 100%;
  margin-right: 5px;
  overflow: auto;
}

#search-win > .ans > .list > list > a {
  padding: 5px 5px 0px 10px;
  display: flex;
}

#search-win > .ans > .list > list > a:active {
  transform: scale(0.97);
}

#search-win > .ans > .list > list > a > .bi {
  display: block;
  margin-right: 3px;
  font-size: 24px;
  margin-top: -5px;
  background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#search-win > .ans > .list > list > a > img {
  height: 25px;
  width: 25px;
  margin: 0px 5px 7px 0;
}

#search-win > .ans > .view {
  flex-grow: 1;
  border-radius: 10px;
  background: var(--card);
  padding: 3px;
  /* box-shadow: 0 3px 10px var(--s3d); */
  border: 1.5px solid #6f6f6f30;
  display: none;
  overflow: auto;
  margin: 2px 5px 5px 0;
}

#search-win > .ans > .view.show {
  display: block;
}

#search-win > .ans > .view > .fname > .bi {
  font-size: 70px;
  display: block;
  margin: 30px 0 5px 0;
  text-align: center;
}

#search-win > .ans > .view > .fname > .name {
  font-size: 18px;
  text-align: center;
}

#search-win > .ans > .view > .fname > .type {
  font-size: 13px;
  text-align: center;
  opacity: 0.5;
  margin-bottom: 5px;
}

#search-win > .ans > .view > .option > list {
  margin: 10px;
}

#search-win > .ans > .view > .option > list > a {
  border-radius: 6px;
  transition: 70ms !important;
  padding: 4px 12px;
  font-size: 14px;
}

#search-win > .ans > .view > .option > list > a:active {
  transform: scale(0.97);
}

#widgets {
  bottom: 60px;
  height: 600px;
  max-height: calc(90% - 50px);
  width: 1000px;
  left: calc(50% - 500px);
  padding: 10px 0;
  transform: translateY(660px);
}

#widgets.show-begin {
  display: flex;
}

#widgets.show {
  opacity: 1;
  transform: none;
}

#widgets > div {
  width: calc(50% - 0.5px);
  padding: 0 10px;
}

#widgets > .hr {
  width: 1px;
  height: calc(100% - 20px);
  margin-top: 10px;
  background-color: var(--hover-b);
}

#widgets > div > .bar {
  height: 32px;
  display: flex;
  background-color: var(--bar);
  box-shadow: 0 1px 3px var(--shadow);
  border-radius: 10px;
  padding-left: 10px;
  justify-content: space-between;
  align-items: center;
}

#widgets > div > .bar > .tit {
  width: 100px;
  font-size: 18px;
}

#widgets > div > .content {
  height: calc(100% - 35px);
  margin-top: 8px;
}

#widgets > .widgets > .content {
  overflow: auto;
}

#widgets > .widgets > .content > .grid {
  display: grid;
  justify-content: center;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, 83px);
  grid-template-rows: repeat(auto-fill, 83px);
  height: 100%;
  grid-auto-flow: row;
}

#widgets > .widgets > .content > .grid > .wg {
  transition: 100ms;
  background-color: var(--card) !important;
}

#widgets > .widgets > .content > .template {
  display: none;
}

#widgets > .news {
  overflow: hidden;
}

#widgets > .news > .full-tip {
  /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#widgets > .news > .full-tip.hidden {
  display: none;
}

#widgets > .news > .full-tip > * {
  margin-bottom: 10px;
}

#widgets > .news > .full-tip > .tit {
  font-weight: bold;
  font-size: large;
}

#widgets > .news > .full-tip > .info {
  font-size: small;
}

#widgets > .news > .content {
  overflow: auto;
}

#widgets > .news > .content .line {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 83px);
  /* grid-template-rows: repeat(1, 114px); */
}

#widgets > .news > .content .card {
  border-radius: 10px;
  transition: 10ms;
  background-image: linear-gradient(#00000000, #111 90%);
  background-size: cover;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;
  height: 175px;
}

#widgets > .news > .content .card-left {
  grid-column: 1 / 4;
}

#widgets > .news > .content .card-right {
  grid-column: 4 / 6;
}

#widgets > .news > .content .line:nth-child(even) .card-left {
  grid-column: 1 / 3;
}

#widgets > .news > .content .line:nth-child(even) .card-right {
  grid-column: 3 / 6;
}

#widgets > .news > .content .card:hover {
  box-shadow: 1px 1px 7px var(--shadow);
  filter: brightness(0.95);
}

#widgets > .news > .content .card > .tit {
  color: white;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 10px;
  transition: 100ms;
  text-shadow: 0 0 8px #000;
}

#widgets > .news > .content .card > .a {
  color: #9dd0fb;
  font-size: 17px;
  text-shadow: 0 0 3px #000;
}

#widgets > .news > .content .card > .a:hover {
  border-bottom: 2px solid;
}

#widgets > .news > .content .card.top-news {
  color: #fff;
  background-color: var(--bgul);
}

#widgets > .news > .content .card.top-news > .tit {
  font-size: 20px;
}



#datebox,
#control {
  width: 350px;
  padding: 10px;
}

#datebox.show-begin,
#control.show-begin {
  display: flex;
  flex-direction: column;
}

#datebox.show,
#control.show {
  transform: none;
  opacity: 1;
}

#control {
  height: 250px;
  transform: translateY(320px);
}

#datebox {
  height: 450px;
  transform: translateY(520px);
}

/* The tray sits on the dark dock pill, not on app chrome, so it does not
   follow --text (which is black for the light app windows): the system icons
   are always white here. */
.dock.control * {
  fill: #fff;
  color: #fff !important;
}

#control > .cont > .top {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto auto;
  gap: 15px;
  height: 160px;
  margin-top: 10px;
  padding: 0px 7.5px 0px 7.5px;
}

#control > .cont > .top > div {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 70% 30%;
  gap: 5px;
}

#control > .cont > .top > div > .icon {
  width: 100%;
  height: 100%;
  background-color: var(--hover-b);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    70ms,
    transform 400ms cubic-bezier(0.14, 1.02, 0.17, 0.03);
}

:root.corner_squ #control > .cont > .top > div > .icon {
  corner-shape: squircle;
  border-radius: 20px;
}

#control > .cont > .top > div > .icon.active {
  background-image: linear-gradient(120deg, var(--theme-1), var(--theme-2));
}

#control > .cont > .top > div > .icon.active > icon {
  color: #ffffff;
}

#control icon {
  background-image: linear-gradient(120deg, var(--theme-1), var(--theme-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 18px;
}

#control > .cont > .top > div > .tit {
  font-size: 85%;
  text-align: center;
}

#control > .cont > .top > div > .icon:hover {
  filter: brightness(1.1);
}

#control > .cont > .top > div > .icon:hover {
  background-color: var(--card);
}

#control > .cont > .top > div > .icon:active {
  transform: scale(0.93);
}

#control > .cont > .bottom {
  padding: 20px;
}

#control > .cont > .bottom > .brightness > .icon {
  margin-right: 10px;
  vertical-align: -0.3em;
  display: inline-block;
}

#control > .cont > .bottom > .brightness > .icon > icon {
  font-size: 20px !important;
}

#control > .cont > .bottom > .brightness > .range-container {
  width: calc(100% - 43px);
  height: 4.5px;
  background-image: linear-gradient(100deg, var(--theme-1), var(--theme-2));
  border-radius: 7px;
  display: inline-block;
}

#control > .cont > .bottom > .brightness > .range-container > .after {
  border-radius: 0px 7px 7px 0px !important;
}

#control > .cont > .bottom > .brightness > .range-container > .after {
  height: 4.5px;
  position: relative;
  background-color: var(--bg);
  bottom: 0px;
  width: 0px;
  border-radius: 7px;
}

#control > .cont > .bottom > .brightness > .range-container > .slider-btn {
  height: 20px;
  border-radius: 10px;
  background-image: linear-gradient(to top, var(--theme-1), var(--theme-2));
  position: relative;
  width: 20px;
  bottom: 12px;
  margin-left: 100%;
  transform: translateX(-10px);
  border: solid var(--msg);
  border-width: 5px;
  transition:
    0ms,
    border-width 100ms;
}

#control > .cont > .bottom > .brightness > .range-container > .slider-btn:hover,
#control
  > .cont
  > .bottom
  > .brightness
  > .range-container.active
  > .slider-btn {
  /* filter: brightness(0.8); */
  border-width: 3.5px;
}

#control
  > .cont
  > .bottom
  > .brightness
  > .range-container
  > .slider-btn:active {
  border-width: 6px;
}

#datebox > .tit {
  padding: 3px 5px;
  margin: 0;
}

#datebox > .tit > .time {
  font-size: 35px;
  line-height: 50px;
  height: 50px;
  /* padding: inherit; */
}

#datebox > .tit > .date,
#datebox > .tit > #lunar {
  margin-left: 5px;
}

#datebox > .cont {
  width: 100%;
  flex-grow: 1;
}

#datebox > .cont > .head {
  width: 100%;
  display: flex;
}

#datebox > .cont > .head > p {
  width: 46.5px;
  text-align: center;
}

#datebox > .cont > .body {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}

#datebox > .cont > .body > * {
  width: 46.5px;
  height: 46.5px;
  border-radius: 50%;
  text-align: center;
  padding-top: 10px;
}

#datebox > .cont > .body > p.today {
  background: linear-gradient(120deg, var(--theme-1), var(--theme-2));
  color: #eee;
}

#datebox > .cont > .body > p:hover {
  background-color: var(--hover);
}



#desktop {
  position: absolute;
  top: 0;
  left: 0;
  padding: 14px 0 0 12px;
  width: 100%;
  height: calc(100% - 50px);
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  transition: 30ms;
  justify-content: flex-start;
  align-items: baseline;
}

#desktop > div {
  width: 85px;
  height: 84px;
  text-overflow: ellipsis;
  border-radius: 7px;
  text-align: center;
  margin: 8px 10px 2px 10px;
  padding: 0 3px 3px 3px;
  z-index: 3;
  transition: 80ms;
}

:root.corner_squ #desktop > div {
  corner-shape: squircle;
  border-radius: 20px;
}

#desktop > div:hover {
  background-color: var(--hover);
}

#desktop > div:active {
  opacity: 0.7;
}

#desktop > div > img {
  width: 65px;
  height: 65px;
}

#desktop > div.b > img {
  width: 40px;
  height: 40px;
  margin: 5px;
}

#desktop > div > p {
  line-height: 15px;
  font-size: 13px;
  color: #fff;
  text-shadow:
    2px 2px 4px var(--shadow),
    0 0 3px #000;
  margin-top: -6px;
}

#desktop > .selection {
  position: fixed;
  border: 2px solid var(--href);
  /* border-image: linear-gradient(120deg, var(--theme-1), var(--theme-2)) 4; */
  border-radius: 5px;
  background-color: var(--hover-half);
  display: none;
}

#desktop-widgets {
  display: grid;
  /* justify-content: center; */
  gap: 10px;
  grid-template-columns: repeat(auto-fill, 83px);
  grid-template-rows: repeat(auto-fill, 83px);
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 50px);
  /* width: max-content; */
  grid-auto-flow: row;
  direction: rtl;
  padding: 20px;
  pointer-events: none;
}

#desktop-widgets * {
  direction: ltr;
  pointer-events: auto;
}

#desktop-widgets > * {
  background-color: var(--bg70);
  backdrop-filter: blur(180px) saturate(1.5);
  filter: none;
  -webkit-backdrop-filter: blur(80px) saturate(1.5);
  box-shadow: 3px 3px 20px 3px var(--shadow);
  transition: all 500ms;
}

#desktop-widgets > *.moving {
  transition: none;
}

#desktop-widgets > *.moving > .content {
  opacity: 0.5;
}

#desktop-widgets > *.notrans {
  transition: none !important;
}

#desktop-widgets > .widgets-move {
  display: none;
  background-color: #3daee922;
  border: 1px solid #3daee9;
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

#desktop-widgets > .widgets-move.show {
  display: block;
}

#desktop-widgets.edit > * .content * {
  pointer-events: none;
}

#desktop-widgets.edit > * {
  cursor: grab;
}

#desktop-widgets.edit > * > .content {
  transition: opacity 500ms;
}

#desktop-widgets.edit > * > .content:hover {
  opacity: 0.5;
}

#desktop-editbar-container {
  width: 100%;
  position: fixed;
  top: -50px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: top 500ms;
}

#desktop-editbar-container.show {
  top: 0px;
}

#desktop-editbar {
  background-color: var(--bg70);
  backdrop-filter: blur(180px) saturate(1.5);
  filter: none;
  -webkit-backdrop-filter: blur(80px) saturate(1.5);
  box-shadow: 3px 3px 20px 3px var(--shadow);
  border-radius: 0px 0px 8px 8px;
  display: flex;
  gap: 13px;
  padding: 4px 20px;
}

#desktop-editbar > * {
  transition: background-color 80ms;
  padding: 1px 7px;
  border-radius: 5px;
}

#desktop-editbar > *:hover {
  background-color: var(--hover);
}



#cm {
  display: none;
  position: absolute;
  z-index: 101;
  border-radius: var(--r-card, 10px);
  border: 1.5px solid #6f6f6f30;
  background: var(--contextmeu);
  backdrop-filter: blur(25px) saturate(2);
  min-width: 200px;
  overflow: hidden;
  padding: 0px 6px;
  max-height: 0;
  width: max-content;
  transition:
    110ms,
    max-height 200ms ease-in-out,
    top 100ms,
    left 100ms,
    padding 200ms ease-in-out,
    box-shadow 500ms;
  opacity: 0;
}

:root.corner_squ #cm {
  corner-shape: squircle;
  border-radius: var(--r-card, 25px);
}

#cm.show {
  max-height: 100%;
  padding: 6px;
  box-shadow: var(--glass-shadow-lift, 3px 3px 25px 0px var(--shadow));
  opacity: 1;
}

#cm > list {
  transform: translate(0, -50%);
  opacity: 0;
  transition:
    transform 200ms cubic-bezier(0.2, 0.05, 0.2, 1),
    opacity 150ms 50ms;
}

#cm.show > list {
  opacity: 1;
  transform: none;
}

#cm.show-begin {
  display: block;
}

#cm > list > a {
  padding: 4.5px 12px;
  margin: 1px 0;
  border-radius: 6px;
  font-size: 15px;
  display: flex;
  line-height: 19px;
}

#cm > list > a > .bi {
  font-size: 17px;
  margin-right: 10px;
  display: block;
}

#cm > list > a > info {
  float: right;
  text-align: end;
  color: #888;
  flex-grow: 1;
}

#cm > list > *:not(hr):hover {
  background-color: var(--hover-b);
}



#dp {
  display: none;
  position: absolute;
  box-shadow: 3px 3px 6px 1px var(--shadow);
  z-index: 101;
  border-radius: 10px;
  border: 1.5px solid #6f6f6f30;
  background: var(--contextmeu);
  backdrop-filter: blur(20px) saturate(2);
  min-width: 200px;
  overflow: hidden;
  transition:
    110ms,
    max-height 200ms ease-in-out,
    top 100ms,
    left 100ms,
    padding 200ms ease-in-out,
    box-shadow 500ms;
  padding: 4px;
  max-height: 0;
}

#dp.show-begin {
  display: block;
}

#dp.show {
  max-height: 100%;
}

#dp > list > a {
  padding: 4.5px 10px;
  margin: 0;
  transition: 80ms;
  border-radius: 7px;
  font-size: 14px;
  display: flex;
  line-height: 19px;
}

#dp > list > a > info {
  float: right;
  text-align: end;
  color: #888;
  flex-grow: 1;
}

#dp > list > a > .bi {
  font-size: 19px;
  margin-right: 4px;
  display: block;
}

#dp > list > *:not(hr):hover {
  background-color: var(--hover-b);
}



#descp {
  position: fixed;
  background: var(--contextmeu);
  border-radius: 6px;
  box-shadow: 2px 2px 10px var(--shadow);
  z-index: 102;
  border: 1.5px solid #4f4f4f30;
  backdrop-filter: blur(15px) saturate(2);
  font-size: 13px;
  padding: 5px 10px;
  margin: 0;
  transition: opacity 100ms;
  opacity: 0;
  display: none;
}

:root.corner_squ #descp {
  corner-shape: squircle;
  border-radius: 15px;
}

#descp.show {
  opacity: 1;
}

#descp.show-begin {
  display: block;
}



.msg {
  background-color: var(--bg70);
  backdrop-filter: blur(50px) saturate(130%);
  position: fixed;
  right: -430px;
  bottom: 60px;
  width: 430px;
  min-height: 150px;
  z-index: 100;
  border-radius: var(--r-card, 10px);
  box-shadow: var(--glass-shadow-lift, 3px 3px 6px 1px var(--shadow));
  padding: 10px 20px;
  font-size: 15px;
  display: flex;
  transition:
    400ms 200ms cubic-bezier(0.9, 0, 0.1, 1),
    transform 200ms;
  cursor: pointer;
  border: 1.5px solid #6f6f6f30;
  transform: scale(0.9);
}

:root.corner_squ .msg {
  corner-shape: squircle;
  border-radius: var(--r-card, 20px);
}

.msg:hover {
  transition: 80ms;
  background-color: var(--msg);
}

.msg.show {
  right: 20px;
  transform: none;
}

.msg > .main {
  flex-grow: 1;
}

.msg > .hide {
  height: 35px;
  width: 35px;
  min-width: 35px;
  padding-left: 6px;
  margin-right: -5px;
  border-radius: 5px;
  font-size: 23px;
  transition: 100ms;
}

.msg > .hide:hover {
  padding-left: 0;
}

.msg > .hide:active {
  padding-left: 25px;
  transform: scale(0.9);
}

.msg:not(.show) > .hide {
  padding-left: 25px;
}

.msg > .main > .tit {
  font-size: 20px;
  margin-bottom: 5px;
  transition: 100ms;
}

.msg > .main > .cont {
  padding-left: 10px;
  transition: 100ms;
}



#notice-back {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000070;
  position: fixed;
  z-index: 99;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 150ms;
}

#notice-back.show {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

#notice {
  overflow: hidden;
  backdrop-filter: blur(20px);
  display: block;
  position: absolute;
  min-width: 300px;
  min-height: 100px;
  background: var(--msg);
  /* left: 30%; */
  border-radius: 12px;
  box-shadow:
    0 1px 2px #44444460,
    0 1px 30px var(--shadow);
  border: 1px solid var(--hr);
  transition: 200ms !important;
  opacity: 0;
  transform: scale(0.94) translateY(20px);
}

:root.corner_squ #notice {
  corner-shape: squircle;
  border-radius: 25px;
}

#notice.show {
  opacity: 1;
  transform: none;
}

#notice > .cnt {
  padding: 15px 20px 30px 20px;
}

#notice > .cnt > .tit {
  font-size: 30px;
}

#notice > .cnt > list {
  margin-top: 10px;
}

#notice > .cnt > list > * {
  padding: 4px 10px;
}

#notice > .cnt > list > a:hover {
  background-color: var(--hover-b);
}

#notice > .btns {
  min-height: 60px;
  background: var(--unfoc);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-right: 15px;
  border-top: 1.5px solid var(--hr);
}

#notice > .btns > .btn {
  margin-left: 10px;
  background-color: var(--msg);
  min-width: 100px;
  text-align: center;
  border-radius: 8px;
  transition: 50ms;
  box-shadow: 0 1px 3px 1px var(--s3d);
}

:root.corner_squ #notice > .btns > .btn {
  corner-shape: squircle;
  border-radius: 15px;
}

#notice > .btns > .btn.main {
  color: #fff;
  background-color: var(--href);
}

#notice > .btns > .btn:hover {
  filter: brightness(1.2);
}

#notice > .btns > .btn:active {
  transform: none;
  opacity: 0.7;
}



.window {
  position: absolute;
  height: 80%;
  width: 70%;
  transform: scale(0.7);
  background-color: var(--unfoc);
  border-radius: var(--r-window, 10px);
  border: 1.5px solid #6f6f6f30;
  display: none;
  opacity: 0;
  transition: cubic-bezier(0.1, 0.9, 0.2, 1) 200ms;
  overflow: hidden;
  box-shadow: var(--glass-shadow, 2px 2px 5px var(--shadow));
  z-index: 90;
}

:root.corner_squ .window {
  corner-shape: squircle;
  border-radius: var(--r-window, 20px);
}

:root.corner_squ .window.max {
  border-radius: 0px;
}

.window.foc > .titbar {
  opacity: 1;
}

.window.foc {
  background: var(--bg70);
  backdrop-filter: saturate(4) contrast(0.8) blur(60px);
  filter: none;
  -webkit-backdrop-filter: saturate(5) contrast(0.8) blur(60px);
  box-shadow: 3px 3px 20px 3px var(--shadow);
}

:root.mica .window.foc {
  /* background: url(bg-dark-mica.jpg) no-repeat fixed center; */
  background: var(--mica) no-repeat fixed center;
  background-size: cover;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--unfoc);
}

.window.webapp {
  background: none;
  backdrop-filter: none;
}

/* The Start here brief is a reading window, not an app surface. Sized to its
   content; phone and tablet rules below still take it full width. */
.window.start {
  width: min(648px, 92%);
  height: min(596px, 80%);
}

.window.webapp > .titbar {
  outline: var(--href) solid 2px;
  margin-bottom: 1px;
  background-color: var(--unfoc);
  opacity: 1;
}

.window.webapp.load,
.window.webapp.content {
  background: var(--unfoc);
}

.window.webapp.foc > .titbar {
  background-color: var(--bg70);
  backdrop-filter: blur(80px) saturate(1.3);
  --webkit-backdrop-filter: blur(80px) saturate(1.3);
}

:root.mica .window.webapp.foc > .titbar {
  background: none;
  backdrop-filter: none;
  --webkit-backdrop-filter: none;
}

.window.min {
  top: calc(95%) !important;
  left: 15% !important;
  transform: scale(0.3) !important;
  transition:
    cubic-bezier(0.9, 0, 0.1, 1) 200ms,
    top 200ms 100ms,
    backdrop-filter background-color 0s;
}

.window.show-begin {
  display: flex;
  flex-direction: column;
}

.window.show {
  transform: none;
  height: 80%;
  width: 70%;
  opacity: 1;
  display: flex;
  flex-direction: column;
}

.window > .loadback {
  height: 100%;
  width: 100%;
  position: absolute;
  display: none;
}

.window > .loadback > .icon {
  height: 90px;
  width: 90px;
  margin: 30px;
}

.window.load > .loadback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.window.load > .content {
  opacity: 0;
}

.window.calc {
  height: 395px;
  width: 262px;
}

.window.notepad-fonts {
  height: 500px;
  width: 430px;
}

.window.run {
  width: 520px;
  height: 70px !important;
  left: 20px;
  bottom: 60px;
}

.window.run > .titbar {
  display: none;
}

.window.notrans {
  transition: none !important;
}

.window > .titbar {
  min-height: 38px;
  /* background-color: green; */
  padding: 0 0 0 9px;
  display: flex;
  position: initial;
  color: var(--text);
  opacity: 0.5;
  overflow: hidden;
}

.window > .titbar > p {
  font-size: 15px;
  margin-top: 9px;
  flex-grow: 1;
}

.window > .titbar > .icon {
  margin: 9px 8px 0 3px;
  height: 22px;
  width: 22px;
}

.window > .titbar > div {
  width: max-content;
  min-width: max-content;
}

.window > .content {
  width: 100%;
  height: 100%;
  min-height: 0px !important;
}




.window.max {
  width: 100% !important;
  height: 100% !important;

  
  left: 0 !important;
  top: 0 !important;
  
  border-radius: 0;
  border: none;
  
  transition:
    cubic-bezier(0.9, 0, 0.1, 1) 200ms,
    top 200ms 100ms,
    backdrop-filter,
    background 0ms;
}

.window.left {
  left: 0 !important;
  top: 0 !important;
  width: 50% !important;
  height: 100% !important;
}

.window.right {
  left: 50% !important;
  top: 0 !important;
  width: 50% !important;
  height: 100% !important;
}



.wbtg {
  /* height: 100%; */
  height: 33px;
  float: right;
  width: 45px;
  text-align: center;
  padding-top: 6px;
  font-size: 13px;
  transition: 50ms;
  border-radius: 3px;
}

.wbtg.red {
  border-top-right-radius: 10px;
}

.wbtg:hover {
  background-color: var(--hover-b);
}

.wbtg:active {
  opacity: 0.6;
}

.wbtg.red:hover {
  background-color: #d80d1c;
  color: #fff;
}

.window.max .wbtg.red {
  border-top-right-radius: 0px;
}

#window-fill {
  background-color: var(--fill);
  backdrop-filter: blur(25px);
  display: none;
  position: fixed;
  transition: all 300ms ease-in-out;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px 1px var(--shadow);
  border: 1.5px solid #6f6f6f30;
}

#window-fill.top {
  width: 0;
  height: 0;
  top: 0;
  left: 50%;
  display: block;
}

#window-fill.top.fill {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 0;
  left: 0;
}

#window-fill.left {
  width: 0;
  height: 0;
  top: 50%;
  left: 0;
  display: block;
}

#window-fill.left.fill {
  width: calc(50% - 20px);
  height: calc(100% - 20px);
  top: 0;
  left: 0;
}

#window-fill.right {
  width: 0;
  height: 0;
  top: 50%;
  left: 100%;
  display: block;
}

#window-fill.right.fill {
  width: calc(50% - 20px);
  height: calc(100% - 20px);
  top: 0;
  left: 50%;
}

.window > .resize-bar {
  z-index: 1 !important;
}

.window.max > .resize-bar {
  display: none !important;
}

.window > .resize-bar > .resize-knob {
  position: absolute;
}

.window > .resize-bar > .resize-knob.top {
  left: 7px;
  top: 0px;
  height: 7px;
  width: calc(100% - 14px);
  cursor: ns-resize;
}

.window > .resize-bar > .resize-knob.bottom {
  left: 7px;
  bottom: 0px;
  height: 7px;
  width: calc(100% - 14px);
  cursor: ns-resize;
}

.window > .resize-bar > .resize-knob.left {
  top: 7px;
  left: 0px;
  height: calc(100% - 14px);
  width: 7px;
  cursor: ew-resize;
}

.window > .resize-bar > .resize-knob.right {
  top: 7px;
  right: 0px;
  height: calc(100% - 14px);
  width: 7px;
  cursor: ew-resize;
}

.window > .resize-bar > .resize-knob.top-left {
  top: 0px;
  left: 0px;
  width: 7px;
  height: 7px;
  cursor: nwse-resize;
}

.window > .resize-bar > .resize-knob.bottom-right {
  bottom: 0px;
  right: 0px;
  width: 7px;
  height: 7px;
  cursor: nwse-resize;
}

.window > .resize-bar > .resize-knob.bottom-left {
  bottom: 0px;
  left: 0px;
  width: 7px;
  height: 7px;
  cursor: nesw-resize;
}

.window > .resize-bar > .resize-knob.top-right {
  top: 0px;
  right: 0px;
  width: 7px;
  height: 7px;
  cursor: nesw-resize;
}



.save-item {
  white-space: nowrap;
  padding: 5px;
  border-radius: 5px;
  padding-top: 3px;
}

.save-item:hover {
  background-color: #aaa;
  cursor: pointer;
  transition: 0.3s;
}

body > .container {
  display: none;
  
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  position: fixed;
  z-index: 102;
  height: 100%;
  width: 100%;
  background: var(--bg70);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(50px) saturate(5);
  -webkit-backdrop-filter: blur(80px) saturate(1.5);
}

body > .container > .image-container {
  position: relative;
  width: 10%;
  height: 10%;
  left: 6%;
}

body > .container > .image-container > .svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.translucent {
  opacity: 0.5;
}

.rotating {
  animation-delay: 0.6s !important;
  animation: rotate 1s cubic-bezier(0.77, 0.02, 0.16, 1.04);
  transform-origin: 0% 100%;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

.orientation-close-btn {
  margin-top: 10px;
  padding: 8px 24px;
  border: 1px solid var(--text);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.orientation-close-btn:hover {
  background: rgba(128, 128, 128, 0.2);
}

/* Taskbar peek. It used to inherit a translucent surface and white text,
   which sat unreadable over whatever bright page was behind it. */
#taskbar-preview {
  position: fixed;
  bottom: 60px;
  z-index: 10000;
  display: none;
  width: 232px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(18, 15, 32, 0.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
}

#taskbar-preview.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#taskbar-preview .preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

#taskbar-preview .preview-title img {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

#taskbar-preview .preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
}

#taskbar-preview .preview-art {
  width: 42px;
  height: 42px;
  opacity: 0.95;
}

#taskbar-preview .preview-sub {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  body .window.window {
    width: 92vw;
    height: 75vh;
  }

  body .taskbar-icon {
    padding: 0 10px;
  }

  body ::-webkit-scrollbar {
    width: 4px;
  }

  html {
    scrollbar-width: thin;
  }
}

/* =====
   Phones. Roughly 60% of visitors arrive here, so this is the primary layout
   rather than a fallback. A floating-window desktop metaphor does not work on
   a 390px screen, so apps become full-screen sheets and the guided tour, which
   used to be hidden entirely below 620px, becomes the main path.
   ===== */
@media (max-width: 620px) {
  /* Icons in a real grid instead of a wrapping column that runs off-screen. */
  #desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: 4px 0;
    height: calc(100% - 64px);
    padding: 14px 10px 0;
    overflow-y: auto;
  }

  #desktop > div.b {
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 4px 8px;
  }

  #desktop > div.b > img {
    width: 52px;
    height: 52px;
    margin: 0 auto 6px;
  }

  #desktop > div.b > p {
    margin-top: 0;
    font-size: 12px;
    line-height: 14px;
  }

  /* Apps open as full-screen sheets. JS writes inline top/left, so these need
     to win. */
  .window.window {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: calc(100% - 58px) !important;
    max-width: none !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .window > .titbar {
    height: 46px;
    padding-right: 4px;
  }

  /* Comfortable touch targets on the window controls. */
  .window > .titbar .wbtg {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 15px;
  }

  .window > .resize-bar {
    display: none;
  }

  /* The clock was dropped here when a call to action button occupied the dock.
     That button is gone and the system tray is back, so there is room again,
     and a phone that cannot tell you the time is not an OS. Only the date
     gives way, further down at 480px. */
  #dock-box > .dock.date {
    display: flex;
  }

  #dock-box {
    padding: 0 8px;
    gap: 6px;
  }

  #start-btn {
    padding: 0 10px 0 7px;
    font-size: 13px;
  }

  /* Pins are redundant on a phone: every icon is already on the screen.
     Dropping them buys room for the CTA to keep its label. */
  .dock-btn.pin,
  .dock-divider {
    display: none;
  }
}

/* Very narrow phones: drop the Start word and keep the mark. */
@media (max-width: 380px) {
  #start-btn .start-label {
    display: none;
  }

  #start-btn {
    padding: 0 8px;
  }
}

/* =====
   Late corrections. These override upstream Win12 rules that appear further
   down this file and therefore beat equal-specificity rules written earlier.
   ===== */
/* .dock > * applies padding: 0 3px to every dock child. With border-box that
   turns a 1px rule and a 3px dot into 6px slabs. */
.dock > .dock-divider,
.dock > .dock-date-sep,
.dock .dock-date-sep {
  padding: 0;
}

.dock > .dock-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.12);
}

.dock .dock-date-sep {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

/* Upstream pulls the date up by 8px to stack it beneath the time. On a single
   line that just left it sitting above the clock. */
#dock-box > .dock.date > .date {
  margin-top: 0;
}

/* =====
   Tablets and small laptops. The upstream rule sets windows to 92vw but JS
   still writes an inline left of 15%, so the window ran off the right edge and
   took its close button with it.
   ===== */
@media (min-width: 621px) and (max-width: 1100px) {
  .window.window {
    left: 3vw !important;
    top: 16px !important;
    width: 94vw !important;
    height: calc(100% - 82px) !important;
  }

  /* Two columns of icons uses the width instead of stranding it. */
  #desktop {
    display: grid;
    grid-template-columns: repeat(2, 96px);
    align-content: start;
    justify-content: start;
    gap: 2px 8px;
  }

  #desktop > div.b {
    width: 96px;
    height: auto;
    margin: 0;
    padding: 8px 4px 6px;
  }
}

/* =====
   Settings, whose panels hold two columns of cards that only fit at 1440.

   #win-setting>.page>.cnt.home>.divider is a flex row of two children at
   width 50%, and .setting-list rows lay out icon, text and chevron with
   justify-content: space-around and no min-width on the text. That is fine
   in the 700px panel a 1440 window gives it. It is not fine anywhere below.

   Measured at 820, where the window is 94vw and the panel is 500: each card
   column is 239, the partner logo strip inside one is 248 and crosses its own
   card by 29, and the row labels no longer fit on one line. Because the text
   block has no min-width it refuses to shrink, so "Privacy and security"
   wrapped to three lines, pushed its chevron 49px past the row, and ran out
   of the bottom of the card instead of growing it.

   One column below 1100, and a row whose text is allowed to wrap inside it.
   Nothing is hidden and no card is dropped; the two columns become two rows.
   ===== */
@media (max-width: 1100px) {
  .window.setting #win-setting > .page > .cnt.home > .divider {
    flex-direction: column;
  }

  .window.setting #win-setting > .page > .cnt.home > .divider > * {
    width: 100%;
  }

  /* the text block is what has to give, so it is told it may */
  .window.setting #win-setting .setting-list > * {
    justify-content: flex-start;
    gap: 10px;
  }

  .window.setting #win-setting .setting-list > * > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .window.setting #win-setting .setting-list > * > icon,
  .window.setting #win-setting .setting-list > * > .bi {
    flex: 0 0 auto;
  }

  /* the partner strip is a single image wider than the card it sits in */
  .window.setting #win-setting .setting-card img {
    max-width: 100%;
    height: auto;
  }
}

/* ===========================================================================
   Visual pass, tier 1. Appended deliberately: upstream Win12 rules sit later
   in this file than most of the Pekan additions and would otherwise win on
   equal specificity.
   =========================================================================== */

/* ===== One taskbar, not four floating islands ===== */
#dock-box {
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 20px);
  height: 46px;
  padding: 5px 6px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: rgba(16, 13, 30, 0.72);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  outline: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 44px rgba(0, 0, 0, 0.5);
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

#dock-box::-webkit-scrollbar {
  display: none;
}

/* The children stop being surfaces and become regions of one surface. */
#dock-box > .dock {
  margin: 0;
  padding: 0 3px;
  border-radius: 0;
  background: none;
  outline: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
}

/* ===== Windows should float above the desktop, not sit on it ===== */
.window {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.34),
    0 32px 74px rgba(0, 0, 0, 0.55) !important;
}

/* Light chrome. The window frame is the operating system talking, not the
   brand, so it stays neutral and out of the way of whatever the app puts
   inside it. */
.window > .titbar {
  background: #f4f3f7 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 11px 11px 0 0;
  color: #1f1c2b;
}

.window > .titbar > p {
  color: #26222f;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Controls have to be dark now that the bar under them is light. */
.window > .titbar .wbtg {
  color: #3b3547;
}

.window > .titbar .wbtg:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.window > .titbar .wbtg.red:hover {
  background-color: #e81123;
  color: #fff;
}

/* An unfocused window recedes rather than changing colour. */
.window:not(.foc) > .titbar {
  opacity: 0.72;
}

.window:not(.foc) {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

/* ===== Wallpaper: grain kills banding and adds tactility ===== */

/* Grain on top, then the vignette, then the original directional scrim. That
   last layer is not decoration: it is what keeps icon labels legible against
   the top and bottom of the wallpaper, so it is re-declared here rather than
   replaced. */
#bg-scrim {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>"),
    radial-gradient(
      130% 100% at 50% 50%,
      transparent 42%,
      rgba(4, 3, 10, 0.55) 100%
    ),
    linear-gradient(
      180deg,
      rgba(11, 8, 24, 0.34) 0%,
      rgba(11, 8, 24, 0.08) 45%,
      rgba(11, 8, 24, 0.42) 100%
    );
  background-size:
    140px 140px,
    cover,
    cover;
}

/* Slower drift. The wallpaper should be something you notice only if you look
   for it, not motion in the corner of the eye while reading a service page. */
#bg-anim > i:nth-child(1) {
  animation-duration: 64s;
}

#bg-anim > i:nth-child(2) {
  animation-duration: 78s;
}

#bg-anim > i:nth-child(3) {
  animation-duration: 56s;
}

#bg-anim > i:nth-child(4) {
  animation-duration: 88s;
}

/* ===== The bar must not eat itself on a phone ===== */

/* Dock children are nowrap text, so shrinking them makes labels overlap
   rather than truncate. Never shrink; if it ever overflows, scroll instead. */
#dock-box > * {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  /* The call to action is the reason the bar exists, so it keeps its full
     label. The Start word and the date give way: the mark and the clock
     already carry that meaning. */
  #dock-box > .dock.dock-start .start-label,
  #dock-box > .dock.date .date,
  #dock-box > .dock.date .dock-date-sep {
    display: none;
  }
}

/* ===== The Browser wears its own chrome ===== */

/* A real browser has one top row: the tab strip with the caption buttons
   inline at its right end. The bar leaves the layout flow and floats its
   button cluster over the strip (which lives in the app iframe below), so
   the two containers read as one merged row. */
.window.chrome > .titbar {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: max-content;
  z-index: 3;
  min-height: 40px;
  background: transparent !important;
  border-bottom: 0;
  outline: 0;
  margin-bottom: 0;
  padding: 0;
}

.window.chrome > .titbar > img.icon,
.window.chrome > .titbar > p {
  display: none;
}

/* The title used to be the flex spacer that pushed the controls right. With
   it hidden the group has to push itself. */
.window.chrome > .titbar > div {
  margin-left: auto;
}

.window.chrome > .titbar .wbtg {
  height: 40px;
  padding-top: 0;
}

.window.chrome > .titbar .wbtg:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

/* No seam between the strip and the buttons floating on it. */
.window.chrome.webapp > .titbar,
.window.chrome.webapp.foc > .titbar {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== The voice orb is draggable, so this is only where it starts ===== */

/* It defaulted to 80/80, which is exactly where system notifications stack.
   On a phone it also has to stay inside the viewport and above the dock. */
@media (max-width: 620px) {
  #voiceBall {
    top: 38% !important;
    left: auto !important;
    right: 10px;
  }
}

/* ===== Accessibility ===== */

/* Named for a screen reader, invisible to everyone else. */
.pk-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
}

/* The first tab stop on the page, hidden until it is focused. */
.pk-skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  background: #fff;
  color: #241f3d;
  font-family: var(--pd-font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top 150ms;
}

.pk-skip:focus {
  top: 0;
}

/* Desktop icons are operable from a keyboard now, so focus has to be visible.
   :focus-visible keeps it off the screen for mouse users.

   Round 6: the ring takes the theme token and the dark halo that goes with
   it, so a control sitting straight on the wallpaper (a desktop icon, the
   dock) still clears SC 1.4.11 against whatever the aurora is doing under
   it. The halo spreads past the ring so there is known dark on both sides
   of the light line, not just behind it. */
#desktop > div.b:focus-visible,
.dock-btn:focus-visible,
#pk-tour-btn:focus-visible,
.wbtg:focus-visible,
#login:focus-visible,
#login-phone:focus-visible,
.lock-site:focus-visible,
.langselect .a:focus-visible,
.pk-toast button:focus-visible,
.pk-toast input:focus-visible {
  outline: 2px solid var(--os-focus, #a99bff);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--os-focus-halo, rgba(12, 10, 18, 0.85));
}

#desktop > div.b:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* ===== No-JavaScript content ===== */

/* Shown to crawlers that do not execute scripts, and to anyone with JS off.
   The desktop needs JavaScript; the business does not. */
.pk-noscript {
  position: relative;
  z-index: 99999;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 22px;
  color: #ece9f6;
  font-family: var(--pd-font);
}

.pk-noscript h2 {
  margin: 0 0 10px;
  font-size: 26px;
}

.pk-noscript p {
  color: #b9b2d0;
  font-size: 15px;
  line-height: 1.6;
}

.pk-noscript ul {
  margin: 18px 0;
  padding-left: 18px;
}

.pk-noscript li {
  margin-bottom: 10px;
  color: #b9b2d0;
  font-size: 14px;
  line-height: 1.55;
}

.pk-noscript a {
  color: #a9a7fd;
}

/* ===========================================================================
   Visual pass, tier 2. Appended deliberately, same reason as tier 1: later
   rules win on equal specificity, and upstream Win12 rules sit earlier in
   this file.
   =========================================================================== */

/* ===== A clock where the dead centre was ===== */

/* Fills the empty middle of the desktop the way a lock screen does. It is
   furniture, not an app: pointer-events none keeps marquee selection and
   window dragging oblivious to it, and aria-hidden keeps it out of the tree
   because the dock already announces the time. */
#desktop-clock {
  position: fixed;
  inset: 0 0 50px 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  pointer-events: none;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
  transition: opacity 300ms;
}

#desktop-clock > .dc-time {
  font-size: clamp(56px, 9vw, 118px);
  font-family: var(--pk-font);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
}

#desktop-clock > .dc-date {
  margin-top: 10px;
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 400;
  opacity: 0.72;
}

/* The element sits earlier in the DOM than #desktop, so icons and the
   marquee paint over it. A maximised window asks it to recede rather than
   glow through the chrome: #dock-box.hide is the shell's own signal that a
   window holds the whole screen. */
body:has(#dock-box.hide) #desktop-clock {
  opacity: 0;
}

@media (max-width: 620px) {
  /* On a phone the icon grid owns the left half, so the clock steps back to
     a murmur and the labels stay the loudest thing on the glass. */
  #desktop-clock {
    opacity: 0.55;
  }

  #desktop-clock > .dc-time {
    font-size: clamp(40px, 12vw, 64px);
  }
}

/* ===== Start menu, wearing the brand ===== */

/* The avatar is the pd mark on ink, not the stock gradient person. The mark
   is drawn white and violet on transparency for dark surfaces, so the circle
   goes brand ink in both themes. */
#startmenu-user {
  width: 88px;
  height: 88px;
  /* THE BRAND CLIP. #startmenu-l is a column flex container, so this slot
     was a flex item with the default shrink of 1: measured height 60 inside
     a declared 88, scrollWidth 92 against clientWidth 84, overflow hidden.
     The mark inside it was cut on both axes. flex: none holds the box. */
  flex: none;
  box-sizing: border-box;
  top: -44px;
  left: calc(50% - 44px);
  display: grid;
  place-items: center;
  /* true black slot with the faint lavender ring, not a plum disc */
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(131, 138, 255, 0.4);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#startmenu-user > img {
  /* 52 inside an 86px content box leaves the mark real clearance rather
     than pressing it against the ring. */
  width: 52px;
  height: 52px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.startmenu-name {
  width: 100%;
  margin: -44px 0 14px;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}

/* Stock spacing was loose: the list dropped 40px below the name and every
   row stood tall. Tightened, so more of the menu is apps. */
#startmenu-l > list {
  margin-top: 18px;
  padding-bottom: 24px;
}

#startmenu-l > list > a {
  padding: 2px 5px 2px 10px;
}

/* One icon size per surface, and object-fit so the odd png lines up with the
   svgs instead of bulging past them. */
#startmenu-l > list > a > img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.sm-app > *:first-child,
.tj-obj > img {
  object-fit: contain;
}

/* Section headers read as brand eyebrows rather than OS labels. */
#startmenu-l > list > .text {
  height: 26px;
  padding-left: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--href);
  opacity: 0.85;
}

#startmenu-r > .pinned > .title > p,
#startmenu-r > .tuijian > .title > p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--href);
}

/* ===== Context menus and marquee, branded ===== */

/* Stock upstream grey, with the violet doing the talking now: the border,
   the hover, and the leading icons. */
#cm {
  border-color: rgba(131, 138, 255, 0.35);
}

#cm > list > a > .bi {
  color: var(--href);
}

#cm > list > *:not(hr):hover {
  background-color: rgba(131, 138, 255, 0.14);
}

#cm > list > hr {
  margin: 4px 10px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--hr);
}

/* The marquee is the desktop's own gesture, so it wears the violet too. */
#desktop > .selection {
  border: 1.5px solid #838aff;
  border-radius: 4px;
  background-color: rgba(131, 138, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(131, 138, 255, 0.1);
}

/* Single click selects. Highlight plus ring, the same shape as the keyboard
   focus ring, so mouse and keyboard tell the same story. */
#desktop > div.b.sel {
  background-color: rgba(131, 138, 255, 0.24);
  outline: 2px solid rgba(169, 167, 253, 0.85);
  outline-offset: -2px;
}

/* Small icons, from the desktop View menu. */
#desktop.mini > div.b {
  width: 64px;
  height: 64px;
  margin: 6px 8px 2px;
}

#desktop.mini > div.b > img {
  width: 28px;
  height: 28px;
  margin: 3px;
}

#desktop.mini > div.b > p {
  margin-top: -2px;
  font-size: 11px;
  line-height: 13px;
}

/* ===== Lock screen: a lighter avatar ring ===== */

/* The ring was vault-heavy for what is a friendly door: brighter edge,
   lighter shadow. login.css loads after this file, so the extra class is
   what lets the rule win. */
#loginback > .lock-core > .user.pd-ring {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* ===== Tier 2 under prefers-reduced-motion ===== */

@media (prefers-reduced-motion: reduce) {
  #desktop-clock {
    transition: none;
  }
}

/* ===========================================================================
   R16: window chrome. The caption bar held 33px controls pinned to the top
   of a 38px bar, which left a 5px dead band under Close, and the title text
   hung 4px below centre on a 9px margin hack. Caption buttons now stretch
   the full bar height the way a real title bar draws them, and every child
   of the bar is vertically centred. Appended for the same reason as the
   tiers above: later rules win at equal specificity.
   =========================================================================== */

.window > .titbar {
  min-height: 36px;
  align-items: center;
  padding: 0 0 0 10px;
}

/* The 9px top margins were a fixed-height hack; flex centering replaces
   them. */
.window > .titbar > p {
  margin-top: 0;
}

.window > .titbar > .icon {
  margin: 0 8px 0 3px;
}

/* Task Manager's label carries the same 9px hack inline, so it needs the
   stronger word. */
.window.taskmgr > .titbar > span {
  margin-top: 0 !important;
}

/* The control cluster becomes a full-height run of caption buttons packed
   against the right edge. The old layout floated them right, which renders
   DOM order (close first) as min, max, close from left to right; row-reverse
   reads the same. Tab strips are also direct div children and must keep
   their own direction. */
.window > .titbar > div:not(.tabs) {
  align-self: stretch;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}

.window > .titbar .wbtg {
  height: auto;
  width: 45px;
  padding-top: 0;
  display: grid;
  place-items: center;
}

/* Full-height hover fills read square, except where the window corner
   turns under the close button. .window.max .wbtg.red is stronger and
   still flattens it on a maximised window. */
.wbtg {
  border-radius: 0;
}

.wbtg.red {
  border-top-right-radius: 11px;
}

/* The restore glyph ships with an inline 4px nudge for the old top-hung
   bar; a centred button does not want it. */
.window > .titbar .wbtg > svg {
  margin-top: 0 !important;
}

/* Tab strips (Explorer, Browser) fill the bar instead of hanging 2px low.
   The doubled class outranks module/tab.css, which loads after this file.
   border-box keeps the strip exactly bar height under content-box defaults. */
.window.window.tabs > .titbar > .tabs {
  height: auto;
  align-self: stretch;
  box-sizing: border-box;
  margin-top: 0;
  padding: 3px 2px;
}

/* The slim Browser strip keeps its 34px height; only the fixed-height and
   padding nudges on its buttons go. */
.window.chrome > .titbar .wbtg {
  height: auto;
  padding-top: 0;
}

/* pythonEditor.css loads after this file too; the run button loses its
   4px nudge the same way. */
.window.window.pythonEditor > .titbar .wbtg.run {
  padding-top: 0;
}

/* Webapp windows drew a 2px violet ring around the bar and a 1px gap under
   it. A real title bar sits flush on the surface below it. */
.window.webapp > .titbar {
  outline: 0;
  margin-bottom: 0;
}

/* Explorer's path bar sat on 4px top and 0 bottom padding, which hung its
   nav buttons 2px low. Balanced, and the glyphs centre by grid instead of a
   padding nudge. The extra class outranks explorer.css, which loads after
   this file. */
.window.explorer #win-explorer > .path {
  padding: 2px 10px;
}

.window.explorer #win-explorer > .path > .btn {
  height: 31px;
  padding-top: 0;
  display: grid;
  place-items: center;
}

/* ===========================================================================
   ROUND 6, THE PHONE. Everything below this line is inside a media query and
   belongs to the mobile engineer. It is appended for the same reason the
   tiers above are: os2031.css, delight.css, clutter.css, authenticity.css and
   the app stylesheets all load after this file, so a phone rule written
   earlier loses to a desktop rule written later. Every selector below either
   carries a doubled class or names its owner's element exactly, which is what
   lets a 44 px target beat a 13 px one without an important war.

   The principle, and it is the standing rule on this project: mobile is
   designed, not downgraded. Nothing below hides a control to pass a
   measurement. Where a desktop affordance does not survive a thumb, it is
   redrawn at thumb scale, in the same visual language.
   =========================================================================== */

/* ===========================================================================
   1. The 16 px floor on every field.

   This is the fix for the debt that desktop.html line 12 was papering over.
   iOS Safari zooms the page when a field with a font under 16 px takes focus,
   and it does not zoom back, which is what made the previous author reach for
   user-scalable=no. The correct answer is the floor, not the ban: at 16 px
   Safari has no reason to zoom, so pinch zoom can be handed back to the
   visitor and SC 1.4.4 passes.

   16.0001 rather than 16 because Safari compares the used value and some of
   these fields inherit a fractional size from a rem chain.
   =========================================================================== */
@media (max-width: 700px) {
  html body input,
  html body textarea,
  html body select,
  html body .input,
  html body [contenteditable="true"] {
    font-size: max(16px, 1rem);
  }
}

/* ===========================================================================
   2. The phone home screen.

   The desktop carries 66 objects. The clutter agent puts them in a four
   across scrolling grid; these rules are what make that grid feel like a
   phone home screen instead of a shrunk desktop: page height rows, a scroll
   that rests on whole rows, a first row that clears the status bar, and a
   last row that clears the dock. Nothing is hidden, all 66 are reachable.
   =========================================================================== */
@media (max-width: 620px) {
  /* Four EQUAL columns. clutter.css asks for repeat(4, 1fr), and a bare 1fr
     is minmax(auto, 1fr), so its floor is the column's own content: one long
     filename widens its column and steals the width from its neighbours.
     Measured at 390 with the labels at full width: 79.5, 136.9, 99.5, 137.4,
     which is not a home screen, it is four different home screens side by
     side. minmax(0, 1fr) drops the content floor so the four columns are
     genuinely equal and the label wraps inside its own column instead of
     pushing on the grid. Measured after: 91, 91, 91, 91. */
  #desktop#desktop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* The tile is the unit of the home screen, so it gets a real one: a
     56 px glyph, a two line name, and a whole tile hit area rather than
     just the picture. 84 px wide at 390 with the gutters, comfortably past
     the 44 px floor in both axes. */
  #desktop > div.b,
  #desktop.clut-free > div.b {
    min-width: 0;
    min-height: 44px;
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
  }

  /* A press should answer immediately. On a phone :hover never fires, so
     the tile has to say something on :active or it feels dead. */
  #desktop > div.b:active {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(0.96);
    transition: transform 90ms ease;
  }

  /* Two lines of filename, then an ellipsis. A home screen that truncates
     at one line turns every long name into the same name.

     break-word, not anywhere. These filenames are the joke, and most of
     them already carry their own break points: hyphens in
     website-redesign-QUOTE.app, a dot before the extension. anywhere
     ignores all of that and cuts mid word, which measured as
     "consultin / g-..." on the second tile at 390. break-word takes the
     hyphen first and only cuts a word when a single word genuinely cannot
     fit in the column. */
  #desktop > div.b > p,
  #desktop.clut-free > div.b > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* The label is clamped to 56 px and edge masked by pekan/craft.css, which
     is the right fix for the defect it names: on a free positioned desktop,
     a label is wider than the 40 px art it labels, so when a window edge
     lands in that band the art hides and a sliver of the label survives
     beside it and reads as a letter floating in space.

     None of that is true on a phone. Below 620 px the desk is a static
     four column grid, windows are full screen sheets that cover the grid
     entirely rather than landing an edge in the middle of it, and there is
     no free positioning at all. So the constraint does not apply, and its
     cost does: at 390 the column is 91 px and the label was clamped to 56,
     which threw away 35 px of the room the grid had already given it and
     broke "consulting-INTAKE.app" mid word into "consultin / g-...".

     The label goes back to the width of its own tile here, and the mask
     comes off with it, because there is nothing left for it to hide.
     Measured at 390: label max-width 56 before, 83 after, and the mid word
     break is gone in both languages. The doubled class outranks craft.css,
     which loads after this file. */
  #desktop#desktop > div.b.clut > p {
    /* width, not max-width. craft.css sets display: flow-root on the label,
       and a flow-root box with width auto shrink wraps to its content, so a
       max-width alone let a long filename measure 129 px inside a 91 px
       column and paint over its neighbour. A width of 100 percent pins the
       box to the grid column, which is what the two line clamp then works
       against. Measured at 390: 56 px clamped before, 129 px unclamped with
       max-width alone, 83 px with this rule, against a 91 px column. */
    width: 100%;
    max-width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The grid owns the vertical scroll, so the document must not also
     scroll. Two scrollers on one axis is what makes a phone page feel
     broken. */
  html body:not(.locked) {
    overscroll-behavior-y: none;
  }
}

/* ===========================================================================
   3. Window chrome at thumb scale.

   os2031.css draws caption buttons as 13 px discs, which is right on a
   pointer and impossible on a thumb. The discs stay 13 px so the window
   still looks like the same operating system; the control around each one
   grows to 44 by 44 with a transparent pad. The dot is the sign, the pad is
   the button. The doubled .window.window is what outranks os2031.css.
   =========================================================================== */
@media (max-width: 700px) {
  .window.window > .titbar {
    min-height: 48px;
    height: 48px;
    padding-left: 4px;
  }

  .window.window > .titbar > div,
  .window.window > .titbar > div:not(.tabs) {
    gap: 0;
  }

  .window.window > .titbar .wbtg {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: transparent;
  }

  /* the coloured disc, drawn as the button's own mark rather than as the
     button's box, so the shape a visitor recognises does not change */
  .window.window > .titbar .wbtg::after {
    content: "";
    position: absolute;
    top: 15.5px;
    left: 15.5px;
    right: 15.5px;
    bottom: 15.5px;
    border-radius: 50%;
    background: var(--os-line-3, rgba(255, 255, 255, 0.22));
    pointer-events: none;
  }

  .window.window.foc > .titbar .wbtg.red::after {
    background: var(--pm-purple, #6e5ae8);
  }

  .window.window.foc > .titbar .wbtg:not(.red):not(.max)::after {
    background: var(--pm-sun, #E8B23A);
  }

  .window.window.foc > .titbar .wbtg.max::after {
    background: #3E9C9C;
  }

  /* the glyph rides above the disc, so Close still reads as an x */
  .window.window > .titbar .wbtg > i,
  .window.window > .titbar .wbtg > svg {
    position: relative;
    z-index: 1;
  }

  .window.window > .titbar .wbtg:active {
    background: rgba(255, 255, 255, 0.10);
    transform: none;
  }

  /* The title now has 44px clusters either side of it, not 13px ones.

     Round 6 wave 2, defect 3: the plan says the title is CENTRED, and these
     insets were asymmetric (148 left against 16 right), so the title centred
     itself in the leftover space and sat 66px right of the bar's centre.
     Measured at 390: bar centre 195, title centre 261.

     The control cluster is three 44px pads ending at x 136, so the title is
     given the same 148px on both sides. It centres on the bar, and it still
     cannot collide with the controls because the reserved gutter is
     unchanged on the side where they actually are.

     A symmetric gutter and a centred title cannot both survive at 390. The
     controls end at x 136, so a symmetric gutter leaves 110px, and
     "Gestionnaire des taches" needs 126px at 12px type and still 116px at
     11px. Shrinking the type until the longest French window name fits would
     punish every other title to satisfy one.

     So the title box spans the whole bar with equal 8px padding, which keeps
     its centre on the bar's centre, and the type steps down to 11.5px for a
     phone. The controls sit above it on the z axis and the title is not a
     hit target, so a long name is allowed to run under them rather than
     being cut short of them. In practice it does not reach: the longest
     French window name measures 121px against 136px of clear space to the
     left of centre.

     Measured at 390: both languages whole, ink centred on the bar to 0px. */
  .window.window > .titbar > p {
    left: 0;
    right: 0;
    padding: 0 8px;
    box-sizing: border-box;
    justify-content: center;
    height: 48px;
    font-size: 11.5px;
    letter-spacing: -0.015em;
  }

  /* the sheet starts under the status bar and stops above the dock; the
     bar it carries got 10 px taller, so the body has to give that back */
  .window.window {
    top: 62px !important;
    height: calc(100% - 62px - 84px) !important;
  }
}

/* Tab strips: Explorer and the Browser put a close control and a new tab
   control on the strip at 18 and 25 px. Both grow, and the strip grows with
   them, because a tab you cannot close is a tab you cannot leave. */
@media (max-width: 700px) {
  .window.window.tabs > .titbar > .tabs > .tab {
    height: 44px;
    min-height: 44px;
  }

  .window.window.tabs > .titbar > .tabs > .tab > .clbtn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
  }

  .window.window.tabs > .titbar > .tabs > .tab > .clbtn::before {
    width: 44px;
    height: 44px;
  }

  .window.window.tabs > .titbar > .tabs > .new {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
  }

  .window.window.tabs > .titbar > .tabs > .new::before {
    width: 44px;
    height: 44px;
  }
}

/* ===========================================================================
   4. The lock screen, which is the front door and the volume gate.

   Three measured failures here:
     the phone field collapsed to 21 px tall because os2031.css sets it to
       flex: 1 inside a column flex container, and flex-basis beat the height
     the guest link was a 16 px line of text
     the language pills were 44 by 26
   All three are fixed by giving the control a real box, not by moving it.
   =========================================================================== */
@media (max-width: 620px) {
  /* the column layout is what collapsed the field, so the field stops
     flexing and simply is 48 px tall */
  #loginback #login-form {
    flex-direction: column;
    gap: 10px;
  }

  #loginback #login-phone {
    flex: 0 0 auto;
    width: 100%;
    height: 48px;
    min-height: 48px;
  }

  #loginback #login-form #login,
  #loginback #login {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* the guest link is the second path through the door, so it is a control,
     not a footnote: still underlined text, now on a 44 px row */
  #loginback #os-lock-guest,
  #loginback .lock-guest,
  #loginback #login-guest {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 16px;
  }

  /* The language pills and the lock card's own fields live in
     apps/style/login.css, which loads after pekan/os2031.css and is
     therefore the only place a phone rule for them can win. They are
     written there, not here. */

  /* the volume gate control on the lock: 26 px glyph, 44 px target */
  #loginback #os-sound,
  #os-menubar #os-sound,
  #os-halo #os-sound {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  /* the orientation card's own way out */
  .orientation-close-btn {
    min-height: 44px;
    padding: 10px 24px;
  }
}

/* The status bar pill holds the sound toggle. The pill is 22 px tall inside a
   24 px bar, so the toggle cannot grow its box without pushing the bar open.
   It grows its hit area instead, downward into the wallpaper where nothing
   else is listening. The glyph does not move. */
@media (max-width: 700px) {
  #os-menubar #os-halo #os-sound,
  #os-menubar #os-sound {
    position: relative;
    width: 26px;
    height: 22px;
    overflow: visible;
  }

  #os-menubar #os-sound::after {
    content: "";
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -9px;
    right: -9px;
  }
}

/* ===========================================================================
   5. Start menu, control centre and the date panel.

   All three are desktop panels positioned by JavaScript with a fixed pixel
   offset written for a 1440 screen. #control gets an inline left of
   (dock left minus 123), which on a 390 screen is negative, so half the
   panel hung off the left edge. The start menu is 900 px wide and centred by
   calc(50% - 450px), which is -255 at 390.

   None of that is fixable by moving the panel: a 900 px panel does not fit.
   So on a phone the three become what a phone panel is, a sheet that comes
   up from the bottom edge, full width, with its own scroll. The inline left
   is overridden with an important because it is written by JavaScript on
   every open and there is no other way to beat it from a stylesheet.
   =========================================================================== */
@media (max-width: 700px) {
  #start-menu,
  #control,
  #datebox,
  #widgets,
  #search-win {
    left: 8px !important;
    right: 8px !important;
    bottom: 84px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 18px;
  }

  #start-menu {
    height: auto;
    max-height: calc(100% - 130px);
    padding: 0;
    /* the panel is two columns on a desktop; on a phone it is one column
       that scrolls, which is what a phone app drawer is */
    flex-direction: column;
    overflow: hidden auto;
    overscroll-behavior: contain;
  }

  /* Both panes become full width rows in the column.

     flex: none matters. On a desktop #startmenu-r is flex-grow: 1 with
     overflow hidden, which is correct across a row: it takes the leftover
     width. Turned on its side in a column it takes leftover HEIGHT instead,
     and there is none, so it collapsed to 10 px tall with 340 px of pinned
     apps and the power controls hanging outside its own clipped box.
     Measured before: #startmenu-r reported 372x10 while its own children
     measured 119 and 220 tall, and the sheet's scrollHeight stopped at 1014
     against roughly 1450 of real content, so Shut down and Restart sat at
     y 824 in an 844 tall viewport and could not be scrolled to.

     flex: none makes each pane exactly as tall as its content, and visible
     overflow lets that content count toward the sheet's scroll height, so
     the sheet can actually reach the bottom of itself. */
  #start-menu > #startmenu-l,
  #start-menu > #startmenu-r {
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
  }

  /* the sheet ends above the dock, and the last row needs to clear it */
  #start-menu > #startmenu-r {
    padding-bottom: 16px;
  }

  /* the 88 px avatar hangs 44 px above the panel on a desktop, which on a
     bottom sheet puts it off the top of the sheet */
  /* The pixel review measured the profile block taking the first 240px of
     the phone panel before a single destination appeared. Half that. */
  #start-menu > #startmenu-l > #startmenu-user {
    position: static;
    width: 48px;
    height: 48px;
    flex: none;
    margin: 10px auto 0;
    top: auto;
    left: auto;
  }

  #start-menu > #startmenu-l > #startmenu-user > img {
    width: 28px;
    height: 28px;
  }

  #start-menu .startmenu-name {
    margin: 6px 0 2px;
    font-size: 15px;
    font-weight: 600;
  }

  #start-menu > #startmenu-l > list {
    margin: 6px 0 0;
    padding-bottom: 8px;
    overflow: visible;
  }

  /* every app row is a 48 px tap target, which is what a phone list row is */
  #start-menu > #startmenu-l > list > a {
    min-height: 48px;
    padding: 4px 12px;
    border-radius: 12px;
  }

  #start-menu > #startmenu-l > list > a:active {
    background: rgba(255, 255, 255, 0.12);
  }

  /* the power and restart controls, and the fullscreen toggle beside them */
  #start-menu #startmenu-r > .row1 > .tool {
    width: 100%;
    padding: 8px 10px 0 0;
  }

  #start-menu #startmenu-r > .row1 > .tool > .pw > .btn-icon,
  #start-menu #startmenu-r > .row1 > .tool > .pw > .btn-icon.power,
  #start-menu #startmenu-r > .row1 .btn-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
  }

  #start-menu #startmenu-r > .row1 > .tool > .pw > .btn-icon.power > .bi,
  #start-menu #startmenu-r > .row1 .btn-icon > .bi {
    height: 44px;
    display: grid;
    place-items: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* the power flyout expands the button; keep it a real row, not a sliver */
  #start-menu #startmenu-r > .row1 > .tool > .pw > .power.show {
    width: 112px;
  }

  /* The system bar items, given back.

     pekan/authenticity.css hides .mb-item below 700 px, and that is right
     for the bar: at 24 px tall it is a phone status bar and a status bar
     does not carry menus. But Found Score and About are the two things a
     visitor can do from anywhere, and About had no other door on a phone
     at all. Measured: 118 controls visible at 1440, 116 at 390, and the
     two missing were exactly these.

     So they are not hidden, they are moved, to where a phone visitor
     already looks for system entries. The start menu sheet grows a row of
     them at its foot, drawn as the same 48 px list rows the app list above
     uses, so it reads as one list rather than a bolted on strip. Nothing
     new is invented: these are the same two buttons, the same handlers,
     the same labels from the same i18n keys. */
  #start-menu #os-menubar-phone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--os-line, rgba(255, 255, 255, 0.10));
  }

  #start-menu #os-menubar-phone .mb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    background: none;
    border: 0;
    color: var(--os-text, #f3f0fa);
    font-family: var(--os-ui, var(--pd-font));
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }

  #start-menu #os-menubar-phone .mb-item:active {
    background: rgba(255, 255, 255, 0.12);
  }

  #start-menu #os-menubar-phone .mb-item:focus-visible {
    outline: 2px solid var(--os-focus, #a99bff);
    outline-offset: 2px;
  }

  #control,
  #datebox {
    height: auto;
    max-height: calc(100% - 130px);
    overflow: hidden auto;
  }

  /* the control grid was three fixed columns for a 350 px panel */
  #control > .cont > .top {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: 10px;
  }

  #control > .cont > .top > div > .icon {
    min-height: 48px;
  }
}

/* ===========================================================================
   6. The sticky note.

   It is a real object on the desktop, so it keeps its drag grip, its colour
   swatch, its delete control and its resize corner. On a pointer those are
   3, 14, 13 and 20 px. On a thumb they are all 44, achieved with transparent
   pads so the note itself does not turn into a toolbar. The visible marks do
   not move by a pixel.
   =========================================================================== */
@media (max-width: 700px) {
  .os-note > .nb {
    height: 44px;
    padding: 0 6px 0 10px;
  }

  /* The drag grip, the colour swatch and the delete disc all keep the size
     they are drawn at and gain a 44 px pad centred on themselves. The pad is
     sized absolutely rather than by negative insets, because an inset pad
     inherits the drawn size and every one of these is drawn differently:
     inset pads measured 42x43 and 43x43, one and two pixels short. A 44 px
     box centred with a translate is exact whatever the mark under it is.
     The doubled class is what beats pekan/os2031.css, which loads later. */
  .os-note.os-note > .nb .grip,
  .os-note.os-note > .nb .sw,
  .os-note.os-note > .nb .rm,
  .os-note.os-note > .nb button {
    position: relative;
    overflow: visible;
  }

  .os-note.os-note > .nb .grip::after,
  .os-note.os-note > .nb .sw::after,
  .os-note.os-note > .nb .rm::after,
  .os-note.os-note > .nb button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
  }

  /* the grip runs the width of the bar, so its pad follows the line rather
     than sitting as a 44 px square in the middle of it */
  .os-note.os-note > .nb .grip::after {
    width: calc(100% + 22px);
  }

  /* the note controls are only revealed on hover on a desktop, and a phone
     has no hover, so on a phone they are simply always visible */
  .os-note > .nb .rm {
    background: var(--pm-purple, #6e5ae8);
    color: rgba(12, 10, 18, 0.8);
  }

  /* The resize corner. os2031.css sets it to 20 px and loads after this
     file, so an equal selector loses; the doubled class is what wins.
     Measured before this rule: 20x20. The drawn chevron in ::after does not
     move, only the area listening for a thumb grows. */
  .os-note.os-note > .grabber {
    width: 44px;
    height: 44px;
  }

  /* the note body keeps a clear corner for the bigger grabber */
  .os-note.os-note > .body {
    padding-bottom: 34px;
  }
}

/* ===========================================================================
   7. Software Update, the spine of the funnel.

   The toast close and the check control are both under the floor, and the
   toast itself has to clear the dock rather than sit behind it.
   =========================================================================== */
@media (max-width: 700px) {
  #pk-update-toast .pk-up-x,
  #win-update .pk-up-x,
  .pk-up-x {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 20px;
  }

  #pk-update-toast .pk-up-check,
  #win-update .pk-up-check,
  .pk-up-check {
    min-height: 48px;
    padding: 12px 14px;
  }

  #pk-update-toast .pk-up-btn,
  #win-update .pk-up-btn,
  .pk-up-btn {
    min-height: 48px;
  }
}

/* ===========================================================================
   8. The gated tools folder, which is Explorer.

   Explorer is a two pane desktop app: a 250 px sidebar plus a main pane, at
   390 that leaves 134 px for the actual files, which is the widest defect on
   this surface. On a phone it becomes one pane. The sidebar is not deleted,
   it is moved: its rows become a horizontal chip rail above the content, so
   Quick access, This PC and the tag filters are all still one tap away and
   the files get the whole width.
   =========================================================================== */
@media (max-width: 700px) {
  .window.explorer #win-explorer > .page {
    flex-direction: column;
  }

  .window.explorer #win-explorer > .page > .menu {
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 62px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    display: flex;
    gap: 8px;
  }

  .window.explorer #win-explorer > .page > .menu::-webkit-scrollbar {
    display: none;
  }

  .window.explorer #win-explorer > .page > .menu > .card {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 8px 10px;
    padding: 0 4px;
    background: none;
    box-shadow: none;
  }

  .window.explorer #win-explorer > .page > .menu > .card > .title {
    flex: none;
    padding: 0 6px 0 0;
    font-size: 12px;
    opacity: 0.72;
    white-space: nowrap;
  }

  .window.explorer #win-explorer > .page > .menu > .card > list {
    display: flex;
    gap: 6px;
  }

  /* each sidebar row becomes a chip, 44 tall, wide enough to read */
  .window.explorer #win-explorer > .page > .menu > .card > list > a {
    flex: none;
    width: auto;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    white-space: nowrap;
  }

  .window.explorer #win-explorer > .page > .main {
    flex: 1;
    min-height: 0;
    padding-left: 0;
  }

  .window.explorer #win-explorer > .page > .main > .content {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
  }

  /* the command bar: New, the icon run, and the two labelled controls */
  .window.explorer #win-explorer > .page > .main > .tool {
    height: 52px;
    padding: 0 10px 4px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .window.explorer #win-explorer > .page > .main > .tool::-webkit-scrollbar {
    display: none;
  }

  .window.explorer #win-explorer > .page > .main > .tool > .b,
  .window.explorer #win-explorer > .page > .main > .tool > .b.t {
    flex: none;
    height: 44px;
    min-width: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* the path rail: back, forward, up, and the crumb text */
  .window.explorer #win-explorer > .path {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    padding: 4px 8px;
    gap: 2px;
  }

  .window.explorer #win-explorer > .path > .btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .window.explorer #win-explorer > .path > .tit {
    height: 44px;
    margin: 0 0 0 4px;
    align-items: center;
  }

  /* a crumb is as tappable as anything else, and the short ones ("C:") need
     a floor as well as a height, measured at 29.4 wide before this rule */
  .window.explorer #win-explorer > .path > .tit > .path > .text {
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }

  .window.explorer #win-explorer > .path > .tit > .path > .arrow {
    height: 44px;
    display: flex;
    align-items: center;
  }

  /* the search field wraps onto its own full width row rather than being
     squeezed to 170 px beside a crumb trail that already overflows */
  .window.explorer #win-explorer > .path > .search {
    flex: 1 0 100%;
    order: 3;
    margin: 4px 0 2px;
  }

  .window.explorer #win-explorer > .path > .search > .input {
    width: 100%;
    height: 44px;
  }
}

/* ===========================================================================
   9. Settings, which had no phone layout at all.

   apps/style/setting.css carries no media query of any kind. #win-setting is
   a flex row: a rail at width 35% with min-width 270px, beside a page that
   takes what is left. At 390 that resolves to 270px of rail against 120px of
   page, and the panel inside the page measures 100px. Measured on this
   build: the Home card headline "Everything in one place with Pekan Designs"
   wrapped one word per line, the two Home cards ran off the right edge of
   the window, and every Accessibility row spilled 128px past its own card
   because the row was 218px of content in a 90px box.

   It is the same shape of defect Explorer had in section 8 and Task Manager
   had in taskmgr.css, and it gets the same answer: the rail becomes a
   scrolling chip row above the content and the page takes the whole width.
   Nothing is hidden. All twelve sections stay one tap away, every chip is
   44px, and the find field joins the 44px floor with them.

   Measured at 390 after: rail 390 wide, page 390 wide, panel 366, and the
   Accessibility rows spill 0.
   =========================================================================== */
@media (max-width: 700px) {
  .window.setting #win-setting {
    flex-direction: column;
    min-width: 0;
  }

  .window.setting #win-setting > .menu {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 8px 12px 0;
    overflow: visible;
  }

  /* the account card at thumb scale rather than at portrait scale */
  .window.setting #win-setting > .menu > .user {
    padding: 6px 8px;
    margin-bottom: 6px;
  }

  .window.setting #win-setting > .menu > .user > svg {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 8px;
  }

  /* the find field measured 250 by 32 */
  .window.setting #win-setting > .menu > .input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
  }

  /* input-before is a zero height overlay pulled up over the field by a
     fixed -29px, which centred a 32px field. The field is 44px here, so the
     glyph moves with it rather than sitting near its top edge.

     The matching margin-bottom is not decoration. A zero height box with
     margin-top -35 and margin-bottom 10 takes 25px out of the flow, so the
     next element starts 25px above the bottom of the field it follows. In a
     column that landed inside the list's own 50px of padding and nobody saw
     it. In the chip row it put the chips on top of the search field, which
     is what the first pass at this section shipped. 35 cancels the pull, so
     the glyph sits on the field and the row starts under it. */
  .window.setting #win-setting > .menu > input-before {
    margin-top: -35px;
    margin-bottom: 35px;
  }

  /* The twelve section rows become the chip row. padding-bottom carries an
     important in setting.css, which is why this one does too: it is the
     only way to take back the 50px of column padding that would otherwise
     make a 44px rail 94px tall. */
  .window.setting #win-setting > .menu > list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: auto;
    margin: 8px 0 0;
    padding: 0 0 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }

  .window.setting #win-setting > .menu > list::-webkit-scrollbar {
    display: none;
  }

  .window.setting #win-setting > .menu > list > a {
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .window.setting #win-setting > .menu > list > a > img {
    margin: 0;
  }

  /* The sliding 4px rule that marks the current section is positioned by
     desktop.js from the row above it and drawn with a -30px top margin, both
     of which only mean anything in a column. In a row it lands above the
     rail. The selected chip already carries var(--hover) from setting.css,
     which is the phone pattern and a stronger mark than the rule was, so the
     state moves to the chip rather than being lost. */
  .window.setting #win-setting > .menu > list > span.focs {
    display: none;
  }

  .window.setting #win-setting > .page {
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 0 12px 12px;
  }

  .window.setting #win-setting > .page > .cnt {
    max-width: none;
  }

  .window.setting #win-setting > .page > .cnt > .title {
    font-size: 22px;
    padding: 10px 0 4px;
  }

  /* the one call to action inside a panel, measured at 120 by 35 */
  .window.setting #win-setting .setting-card .a.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===========================================================================
   10. Task Manager at the 44px floor.

   taskmgr.css already turns the 280px rail into a row of tabs above the
   content at this width, which is the layout half of the job and it is done.
   The touch half was not: measured at 390, the Processes and Performance
   tabs are 34px tall, the Settings tab is 34, and the search field is 24.
   Those are the only controls on the surface.

   The sortable column headers are controls too. They carry the onclick that
   sorts the table and they measured 35px.
   =========================================================================== */
@media (max-width: 700px) {
  .window.taskmgr #win-taskmgr > .menu > list.focs > a {
    min-height: 44px;
    align-items: center;
    padding: 0 12px;
  }

  .window.taskmgr #win-taskmgr .tm-find {
    height: 44px;
    align-items: center;
  }

  .window.taskmgr #win-taskmgr .tm-find > .input {
    height: 44px;
    min-height: 44px;
  }

  .window.taskmgr #win-taskmgr > .main > .cnt.processes > table thead th {
    height: 44px;
  }

  /* "Processeur" is wider than "CPU". taskmgr.css narrows these two columns
     to 62 at phone width, which leaves 46 px of content against 55 px of
     French, so the header crossed its own cell by 9 and only in French. The
     desktop width of 74 fits both languages, and two columns at 74 still
     leave 222 for the name column at 390, which is an ellipsis already. */
  .window.taskmgr #win-taskmgr > .main > .cnt.processes > table thead th.align-right {
    width: 74px;
  }

  /* The filter reset on the no results panel, measured at 82 by 23. It is
     the only way back from a search that found nothing. The panel's own
     class is 404, which cannot be written in a selector without escaping a
     leading digit, so this names the shape instead: the anchor inside a
     panel's centred content block. */
  .window.taskmgr #win-taskmgr > .main > .cnt > .content > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ===========================================================================
   12. The clutter dialogs.

   The clutter agent draws one dialog shape for every object on the desk. Its
   close control is 28 by 24. The dialog is the only way back to the desktop,
   so on a phone it is a 44 px control.
   =========================================================================== */
@media (max-width: 700px) {
  .clut-back .clut-x,
  .clut-x {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 20px;
  }

  .clut-98 .clut-x {
    width: 44px;
    height: 40px;
  }
}

/* ===========================================================================
   13. The desktop edit bar.

   It parks at top -50px and slides in on edit mode. Its three controls are
   text rows about 29 by 48. On a phone it is a bar a thumb uses, so the rows
   become 44 tall and the bar clears the status bar when it is in.
   =========================================================================== */
@media (max-width: 700px) {
  #desktop-editbar {
    gap: 6px;
    padding: 4px 10px;
  }

  #desktop-editbar > * {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
  }
}

/* ===========================================================================
   14. Safe areas.

   viewport-fit=cover on the meta lets the shell paint under the notch and
   the home indicator, which is what makes a browser chrome free phone view
   look like an operating system rather than a letterboxed page. The inset
   has to be paid back on the two surfaces that touch those edges.
   =========================================================================== */
@media (max-width: 700px) {
  #dock-box {
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #os-menubar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(24px + env(safe-area-inset-top, 0px));
  }

  #desktop,
  #desktop.clut-free {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

/* ===========================================================================
   15. Reduced motion.

   The two phone specific animations added above are a tile press and a sheet
   rise. Both are motion, so both answer the preference.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #desktop > div.b:active {
    transform: none;
    transition: none;
  }
}