/*@import url("https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Lexend:wght@100..900&display=swap");*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans+Symbols:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root, html, body {
  --black: #10181e;
  --gray: #a7a9ab;
  --white: #f8f7f3;
  --red: #f94239;
  --orange: #ffa400;
  --yellow: #fede00;
  --green: #00b241;
  --cyan: #05c2de;
  --blue: #0185ca;
  --purple: #b040b1;

  --accent: var(--cyan);
  --light: light-dark(var(--white), var(--gray));
  --blurred: light-dark(var(--white), var(--orange));

  /*--wallpaper: url("https://images.unsplash.com/photo-1533713692156-f70938dc0d54");*/
  --wallpaper: url("https://images.unsplash.com/photo-1513002749550-c59d786b8e6c");
  /*--wallpaper-average-color: #9090b5;*/

  /*background-image: url("/assets/partial icon.png");*/
  color-scheme: light dark;
  /*font-size: 12pt;*/
  height: 100svh;
  image-rendering: pixelated;
  margin: 0;
  max-height: 100svh;
  max-width: 100svw;
  min-height: 100svh;
  min-width: 100svw;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100svw;
}

body * {
  font-family:
    "Noto Sans",
    "Noto Sans Symbols",
    "Noto Sans Symbols 2",
    "Noto Sans JP",
    "Open Sans",
    Andika,
    sans-serif;
  font-feature-settings: "ss01" 1;
}

/*@keyframes fadeInFromBlack {*/
/*  from {*/
/*    filter: brightness(0);*/
/*  }*/
/*  to {*/
/*    filter: brightness(1);*/
/*  }*/
/*}*/

/*@media (prefers-color-scheme: dark) {*/
/*  @keyframes fadeInFromBlack {*/
/*    from {*/
/*      filter: brightness(0) sepia(50%);*/
/*    }*/
/*    to {*/
/*      filter: brightness(50%) sepia(50%);*/
/*    }*/
/*  }*/
/*}*/

.wallpaper {
  /*animation: fadeInFromBlack 500ms ease-out 500ms forwards;*/
  background-color: color-mix(in srgb, var(--accent) 25%, light-dark(var(--light), var(--black)) 75%) /*var(--wallpaper-average-color)*/;
  background-image: var(--wallpaper);
  background-position: center center;
  background-size: cover;
  bottom: 0;
  /*filter: brightness(0);*/
  left: 0;
  position: absolute;
  right: 0;
  transition:
    filter 200ms ease-out;
  top: 0;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .wallpaper {
    filter: brightness(50%) sepia(50%);
  }
}

.vm .wallpaper {
  background-image: none;
  /*border-radius: 0.5rem;*/
  /*box-shadow: inset 0 0.25rem 0.5rem color-mix(in srgb, color-mix(in srgb, var(--accent), var(--black)) 25%, transparent 75%);*/
}



/* Elements */

.button {
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 transparent, inset 0 0 0 transparent;
  color: light-dark(var(--black), var(--white));
  cursor: pointer;
  display: inline flow-root;
  font-size: inherit;
  /*font-weight: 700;*/
  height: 1rem;
  isolation: isolate;
  line-height: 1rem;
  min-width: 1rem;
  outline: 0 solid light-dark(var(--light), var(--black));
  overflow: visible;
  padding: 0.5rem;
  position: relative;
  text-align:center;
  text-shadow: 0 0 0 transparent;
  transition:
    background 200ms ease-out,
    box-shadow 200ms ease-out,
    color 200ms ease-out,
    filter 100ms ease-out,
    opacity 100ms,
    outline 100ms ease-out,
    text-shadow 200ms ease-out;
}

.button:not(.task, .menu-open):is(:hover, :focus) {
  background: light-dark(var(--light), var(--black));
  color: light-dark(var(--black), var(--white));
  box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, var(--black), transparent), inset 0 0 0 transparent;
  text-shadow: 0 0 0 transparent;
}

.button:not(.task, .menu-open):active {
  background: light-dark(var(--light), var(--black));
  box-shadow: 0 0.125rem 0.25rem var(--black),
    inset 0 0.25rem 0.5rem color-mix(in srgb, var(--black), transparent);
  color: light-dark(var(--black), var(--white));
  filter: brightness(75%);
  outline: 2px solid light-dark(var(--light), var(--black));
  text-shadow: 0 0 0 transparent;
}

menu.popup {
  background: light-dark(var(--white), var(--black));
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, var(--black), transparent);
  color: light-dark(var(--black), var(--white));
  counter-reset: counter;
  left: anchor(left);
  line-height: 1rem;
  list-style: none;
  margin: 0;
  opacity: 1;
  outline: 2px solid light-dark(var(--light), var(--black));
  position: absolute;
  padding: 0;
  transition:
    opacity 100ms ease-in,
    outline 100ms ease-out,
    transform 100ms ease-in;
  width: fit-content;
  z-index: calc(pow(2, 16) + 1);
}

/*menu.popup:active {*/
/*  outline: 2px solid light-dark(var(--light), var(--black));*/
/*}*/

menu.popup:is(.opening, .closing) {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.75);
}

menu.popup.below {
  top: calc(anchor(bottom) + 0.5rem);
  transform-origin: 1rem -1rem;
}

menu.popup.above {
  bottom: calc(anchor(top) + 0.5rem);
  transform-origin: 1rem calc(100% + 1rem);
}

menu.popup > li {
  background: light-dark(var(--white), var(--black));
  /*border-radius: 0.5rem;*/
  box-shadow: inset 0 0 0 transparent;
  counter-increment: counter;
  cursor: pointer;
  min-width: 6rem;
  padding-block: 0.5rem;
  padding-inline: 2rem;
  position: relative;
  transition:
    background 200ms ease-out,
    box-shadow 200ms ease-out,
    filter 100ms ease-out;
}

menu.popup > li:first-child { border-radius: 0.5rem 0.5rem 0 0; }
menu.popup > li:last-child  { border-radius: 0 0 0.5rem 0.5rem; }
menu.popup > li:only-child  { border-radius: 0.5rem; }

menu.popup > li:is(:hover, :active, :focus) {
  background: color-mix(in srgb, var(--accent), light-dark(var(--white), var(--black)));
}

menu.popup > li:active {
  box-shadow: inset 0 0.25rem 0.5rem color-mix(in srgb, var(--black), transparent);
  filter: brightness(75%);
}

menu.popup > li:nth-child(-n + 9)::after {
  background: color-mix(in srgb, var(--gray) 12.5%, transparent 87.5%);
  border-radius: 0.25rem;
  content: counter(counter);
  font-size: 0.75rem;
  font-weight: 550;
  min-width: 1rem;
  mix-blend-mode: multiply;
  outline: 1px solid color-mix(in srgb, var(--gray), transparent);
  position: absolute;
  right: 0.5rem;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  menu.popup > li:nth-child(-n + 9)::after {
    mix-blend-mode: screen;
  }
}

menu.popup li::before {
  background-image: var(--menu-item-icon-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: var(--menu-item-icon-content, "");
  display: inline-block;
  height: 1rem;
  left: 0.5rem;
  position: absolute;
  text-align: center;
  width: 1rem;
}

menu.popup img {
  height: 1rem;
  width: 1rem;
}

.window-content p {
  margin: 1rem;
}



/* Taskbar */

.taskbar {
  align-items: center;
  /*backdrop-filter: blur(0.25rem);*/
  /*background: color-mix(in srgb, var(--black), transparent);*/
  bottom: 0;
  color: var(--white);
  display: flex;
  height: 3rem;
  justify-content: flex-start;
  left: 0;
  position: absolute;
  right: 0;
  user-select: none;
  z-index: calc(pow(2, 16));
}

.taskbar::before {
  backdrop-filter: blur(1em);
  bottom: 0;
  /*box-shadow: 0 2rem 4rem color-mix(in srgb, var(--black), transparent);*/
  content: "";
  height: 100%;
  left: 0;
  mask: linear-gradient(transparent, black);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition:
    height 200ms ease-out,
    opacity 100ms ease-out,
    top 200ms ease-out;
  width: 100%;
}

.taskbar/*:not(:has(menu:is(:hover, :active, :focus)))*/:is(:hover, :active, :focus)::before {
  height: 200%;
  opacity: 1;
  top: -100%;
}

.taskbar-start, .taskbar-end {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.taskbar-middle {
  align-items: center;
  border-radius: 1rem;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.taskbar-middle::-webkit-scrollbar {
  display: none;
}

:is(.taskbar-start, .taskbar-middle, .taskbar-end) > * {
  align-items: center;
  display: flex;
  height: 3rem;
  justify-content: space-between;
  line-height: 1rem;
  min-width: 1rem;
}

.taskbar-middle > * {
  flex: 0 0 auto;
}

@keyframes pulse {
  0% {
    outline: 0 solid color-mix(in srgb, var(--light), transparent);
  }
  50%, 100% {
    outline: 4em solid transparent;
  }
}

.launch {
  backdrop-filter: blur(0.5rem);
  background: color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
  border-radius: 1rem;
  color: light-dark(var(--black), var(--white));
  display: inline flex;
  height: 1rem;
  margin: 0.5rem;
  min-width: 1rem;
  text-align: center;
}

.launch::before {
  content: "";
  inset: -0.5rem;
  pointer-events: auto;
  position: absolute;
  z-index: -1;
}

body:not(:has(.window)) .launch:not(:hover, :active, :focus) {
  animation: 2s ease-out 1s infinite pulse;
  background: light-dark(var(--white), var(--black));
  box-shadow: 0 0.125rem 0.25rem color-mix(in srgb, var(--black) 25%, transparent 75%), inset 0 0 0 transparent;
}

.launch::after {
  content: "Open";
  font-size: 0;
  transition:
    font-size 100ms ease-out,
    padding 100ms cubic-bezier(1,0,1,0);
}

body:not(:has(.window)) .launch::after {
  font-size: 1rem;
  padding-inline: 0.5rem;
  transition:
    font-size 100ms ease-out,
    padding 100ms cubic-bezier(0,1,0,1);
}

.task {
  align-items: center;
  backdrop-filter: blur(1rem);
  background: color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
  display: inline flex;
  height: 1rem;
  justify-content: space-between;
  margin: 0.5rem;
  padding-inline: 0;
  text-align: left;
  touch-action: none;
  transition:
    background 200ms,
    box-shadow 200ms ease-out,
    color 200ms,
    opacity 100ms ease-in,
    outline 100ms ease-out,
    padding 100ms ease-in,
    text-shadow 200ms ease-out,
    width 100ms ease-in;
  width: 8rem;
}

.task::before {
  content: "";
  inset: -0.5rem;
  pointer-events: auto;
  position: absolute;
  z-index: -1;
}

.task > * {
  transition:
    opacity 100ms ease-in;
}

.task:is(.opening, .closing) {
  padding-inline: 0;
  pointer-events: none;
  width: 0;
}

.task:is(.opening, .closing) > * {
  opacity: 0;
}

.task:not(.focused) > * {
  filter: brightness(125%);
}

@media (prefers-color-scheme: dark) {
  .task:not(.focused) > * {
    filter: brightness(75%);
  }
}

/*.task:is(.minimizing, .unminimizing) {*/
/*  pointer-events: none;*/
/*}*/

.task:is(.minimizing, .minimized) > * {
  opacity: 0.5;
}

.task.unminimizing > * {
  opacity: 1;
}

.task:not(.focused):is(:hover, :active, :focus) {
  background-color: color-mix(in srgb, var(--blurred) 25%, transparent 75%);
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--blurred), transparent), inset 0 0 0.25rem var(--light);
  outline: 1px solid var(--blurred);
  text-shadow: 0 0 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent),
    0 0.25rem 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
}

.task.focused {
  background-color: color-mix(in srgb, var(--accent) 25%, transparent 75%);
  box-shadow: 0 0.25rem 0.5rem color-mix(in srgb, color-mix(in srgb, var(--accent), var(--black)), transparent), inset 0 0 0.25rem var(--light);
  text-shadow: 0 0 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent),
    0 0.25rem 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
}

.task.focused:is(:hover, :active, :focus) {
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--accent), transparent), inset 0 0 0.25rem var(--light);
  outline: 1px solid var(--accent);
}

.task.dragging {
  cursor: grabbing;
  height: 1rem;
  left: var(--drag-left);
  margin: 0;
  /*opacity: 0.75;*/
  pointer-events: none;
  position: fixed;
  top: var(--drag-top);
  transform: translateX(var(--drag-x, 0px));
  transition: none;
  z-index: calc(pow(2, 16));
}

.task.placeholder {
  background: none;
  backdrop-filter: none;
  display: inline-flex;
  height: 1rem;
  margin-block: 0;
  margin-inline: 0.5rem;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  pointer-events: none;
}

.task-icon {
  height: 1rem;
  margin-inline-start: 0.5rem;
  width: 1rem;
}

.task-title {
  color: light-dark(var(--black), var(--white));
  flex-grow: 1;
  font-weight: normal;
  mix-blend-mode: overlay;
  overflow: hidden;
  padding: 0.5rem;
  text-overflow: ellipsis;
  transition: font-weight 100ms ease-out;
  white-space: nowrap;
}

/*.task:is(:hover, :active, :focus) .task-title {*/
/*  color: var(--black);*/
/*}*/

.task.focused .task-title {
  font-weight: 550;
}

.task:is(.minimized, .minimizing) .task-title {
  font-style: italic;
  /* text-decoration: 2px underline currentColor; */
}

.task.unminimizing .task-title {
  font-style: normal;
}

.task .close {
  border-radius: 0.25rem;
  display: none;
  font-size: 0.75rem;
  font-weight: 550;
  margin-inline-end: 0.5rem;
  min-width: 1rem;
  outline: 2px solid transparent;
  text-align: center;
  transition:
    background 200ms ease-out,
    color 200ms ease-out,
    outline 200ms ease-out,
    text-shadow 200ms ease-out;
}

.task:is(.opening, .closing) .close {
  display: none;
}

.task:is(:hover, :active, :focus) .close {
  display: initial;
}

.task .close::before {
  color: var(--red);
}

.task .close:is(:hover, :active, :focus) {
  background: var(--red);
  outline: 2px solid var(--red);
  text-shadow: none;
}

.task .close:is(:hover, :active, :focus)::before {
  color: var(--white);
}

.clock {
  backdrop-filter: blur(0.5rem);
  background: color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
  border-radius: 1rem;
  color: light-dark(var(--black), var(--white));
  height: 2rem;
  margin: 0.5rem;
  padding-block: 0;
  padding-inline: 0.5rem;
}



/* Window */

.window {
  backdrop-filter: blur(1rem);
  background-color: color-mix(in srgb, var(--blurred) 12.5%, transparent 87.5%);
  background-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--light), transparent) 50%, transparent 50%);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem color-mix(in srgb, color-mix(in srgb, var(--blurred), var(--black)) 25%, transparent 75%), inset 0 0 0.25rem var(--light);
  min-height: 6rem;
  min-width: 9rem;
  outline: 0 solid var(--light);
  position: absolute;
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    opacity 100ms ease-in,
    outline 100ms ease-out,
    transform 100ms ease-in;
  z-index: var(--z, 0);
}

.window.previewing,
.window.minimized.previewing {
  backdrop-filter: blur(0.5rem);
  box-shadow: 0 0 4rem color-mix(in srgb, var(--blurred), transparent), inset 0 0 0.25rem var(--light);
  outline: 1px solid var(--blurred);
  /*z-index: calc(pow(2, 16) - 1);*/
}

.window.maximized.previewing {
  backdrop-filter: blur(0.25rem);
}

.wallpaper.below-preview {
  filter: brightness(75%);
}

@media (prefers-color-scheme: dark) {
  .wallpaper.below-preview {
    filter: brightness(25%) sepia(50%);
  }
}

.window.below-preview {
  backdrop-filter: blur(1rem);
  filter: brightness(75%);
}

.window.above-preview,
.window.focused.above-preview {
  backdrop-filter: none;
  background: transparent;
  box-shadow: inset 0 0 0.25rem var(--light);
}

.window.above-preview > * {
  opacity: 0;
}

.window.focused {
  backdrop-filter: blur(0.5rem);
  background-color: color-mix(in srgb, var(--accent) 25%, transparent 75%);
  box-shadow: 0 1rem 2rem color-mix(in srgb, color-mix(in srgb, var(--accent), var(--black)), transparent), inset 0 0 0.25rem var(--light);
}

.window.focused.previewing {
  box-shadow: 0 0 2rem color-mix(in srgb, var(--accent), transparent), inset 0 0 0.25rem var(--light);
  outline: 1px solid var(--accent);
}

.window:is(.dragging, .resizing) {
  box-shadow: 0 2rem 4rem color-mix(in srgb, color-mix(in srgb, var(--accent), var(--black)), transparent), inset 0 0 0.25rem var(--light);
  outline: 2px solid var(--light);
}

.window:is(.opening, .closing, .minimizing, .unminimizing, .maximizing, .unmaximizing) {
  pointer-events: none;
}

.window:is(.opening, .closing) {
  opacity: 0;
  transform: perspective(calc(max(100svw, 100svh))) scale(0.875) rotateX(30deg);
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    opacity 100ms ease-in,
    outline 100ms ease-out,
    transform 100ms ease-in;
}

.window.minimized {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1em);
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    opacity 100ms ease-in,
    outline 100ms ease-out,
    transform 100ms ease-out;
  z-index: -1;
}

.window:is(.minimizing, /* .minimized, */ .maximized.minimizing) {
  opacity: 0;
  pointer-events: none;
  transform: perspective(calc(max(100svw, 100svh))) scale(0.5) rotateX(-30deg);
  transform-origin: bottom;
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    height 200ms ease-in-out,
    left 200ms ease-out,
    opacity 200ms ease-in,
    outline 100ms ease-out,
    top 200ms ease-in-out,
    transform 200ms ease-in,
    width 200ms ease-out;
}

.window.minimized.previewing {
  opacity: 1;
  outline: 1px dashed var(--blurred);
  transform: none;
  z-index: var(--z, 0);
}

.window:is(.unminimizing, .maximized.unminimizing),
.window:is(.unminimizing, .maximized.unminimizing).previewing {
  pointer-events: none;
  opacity: 1;
  transform: none;
  transform-origin: bottom;
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    height 200ms ease-out,
    left 200ms ease-in-out,
    opacity 200ms ease-out,
    outline 100ms ease-out,
    top 200ms ease-out,
    transform 200ms ease-out,
    width 200ms ease-in-out;
}

.window:is(.maximized, .maximizing) {
  backdrop-filter: blur(0.25rem);
}

.window:is(.maximized, .maximizing, .unmaximizing) {
  border-radius: 0;
  transition:
    backdrop-filter 100ms ease-out,
    background-color 200ms ease-out,
    border-radius 100ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    height 100ms ease-out,
    left 100ms ease-in-out,
    outline 100ms ease-out,
    top 100ms ease-out,
    transform 100ms ease-in,
    width 100ms ease-in-out;
}

.title-bar {
  align-items: center;
  color: light-dark(var(--black), var(--white));
  display: flex;
  filter: brightness(125%);
  height: 2rem;
  justify-content: space-between;
  padding: 0.5rem;
  transition: filter 200ms ease-out;
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  .title-bar {
    filter: brightness(75%);
  }
}

.window.focused .title-bar {
  filter: none;
}

.window-icon {
  display: flex;
}

.window-icon > img {
  margin-inline: 0.5rem;
  height: 1rem;
  width: 1rem;
}

.window-title {
  color: light-dark(var(--black), var(--white));
  /*cursor: grab;*/
  flex-grow: 1;
  font-weight: normal;
  height: 1rem;
  line-height: 1rem;
  min-width: 0;
  mix-blend-mode: overlay;
  overflow: hidden;
  padding-block: 0.5rem;
  text-overflow: ellipsis;
  text-shadow: 0 0 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent),
    0 0.25rem 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
  touch-action: none;
  transition: font-weight 100ms ease-out;
  white-space: nowrap;
}

.window-title > .label {
  padding-inline: 0.5rem;
}

/*.window.dragging .window-title {*/
/*  cursor: grabbing;*/
/*}*/

.window.focused .window-title {
  font-weight: 550;
}

.window.minimized .window-title {
  font-style: italic;
}

.title-bar .button {
  min-width: 2em;
  /* opacity: 0; */
  outline: 0 solid color-mix(in srgb, var(--accent), light-dark(var(--white), var(--black)));
  padding-inline: 0;
  text-shadow: 0 0 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent),
    0 0.25rem 0.5rem color-mix(in srgb, light-dark(var(--white), var(--black)), transparent);
  width: 3rem;
}

.title-bar .button:not(:hover, :active, :focus) {
  mix-blend-mode: overlay;
}

.window:is(:hover, :active, :focus) .title-bar .button {
  opacity: 1;
}

.title-bar .button:is(:hover, :focus, :active) {
  background: color-mix(in srgb, var(--accent), light-dark(var(--white), var(--black)));
}

.title-bar .button:active {
  outline: 2px solid color-mix(in srgb, var(--accent), light-dark(var(--white), var(--black)));
}

.title-bar .button::before {
  display: inline-block;
  width: 100%;
}

.minimize::before {
  content: "－";
}

.minimized .minimize::before {
  content: "＋";
}

.maximize::before {
  content: "◇";
}

/*:is(.maximizing, .maximized) .maximize::before {*/
/*  content: "▢";*/
/*}*/

.close {
  outline: 0 solid var(--red);
}

.close::before {
  content: "✕";
}

.close:is(:hover, :active, :focus),
.title-bar .close:is(:hover, :active, :focus) {
  background: var(--red);
  color: var(--white);
}

.title-bar .close:active {
  outline: 2px solid var(--red);
}

.window-content {
  background: light-dark(var(--white), var(--black));
  border-radius: 0.5rem;
  bottom: 0;
  box-shadow: 0 0 0.5rem color-mix(in srgb, color-mix(in srgb, var(--accent), var(--black)) 12.5%, transparent 87.5%);
  color: light-dark(var(--black), var(--white));
  left: 0;
  margin: 0.5rem;
  overflow-y: auto;
  /*padding: 0.5rem;*/
  position: absolute;
  right: 0;
  top: 0;
}

.title-bar + .window-content {
  margin-top: 3rem;
}

.window iframe {
  filter: contrast(75%) grayscale(1);
  pointer-events: none;
  position: absolute;
  transition: filter 100ms ease-out;
}

.window.focused iframe {
  filter: none;
  pointer-events: auto;
}