.computer-host {
  --computer-ink: #312539;
  --computer-cream: #f4eee7;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  container: computer / size;
  font: 14px/1.4 var(--font-body, Manrope), Arial, sans-serif;
  color: var(--computer-ink); text-align: left; color-scheme: light;
}
.computer-host[hidden], .computer-host [hidden] { display: none !important; }
.computer-host *, .computer-host *::before, .computer-host *::after { box-sizing: border-box; }
.computer-shell { position: relative; width: 100%; height: 100%; min-height: 0; isolation: isolate; overflow: hidden; background: #735985; }
.computer-shell :is(button, a) { font: inherit; -webkit-tap-highlight-color: transparent; }
.computer-shell button { cursor: pointer; }
.computer-shell :is(button, a):focus-visible { outline: 3px solid #f4d8a9; outline-offset: 2px; }
.computer-wallpaper { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(130deg, #a990b5 0%, #745880 58%, #54395f 100%); }
.computer-wallpaper-fold { position: absolute; display: block; width: 145%; height: 138%; border-radius: 50%; transform: rotate(-24deg); box-shadow: inset 0 2px 1px #eeddf62b, -24px -28px 60px #351f4026; }
.computer-wallpaper-fold--one { left: -29%; top: 39%; background: linear-gradient(160deg, #cbb5d7 9%, #9574a6 42%, #654573 77%); }
.computer-wallpaper-fold--two { left: 30%; top: 49%; transform: rotate(-45deg); background: linear-gradient(135deg, #d3bdcf 1%, #a080ab 33%, #5f426e 68%); }
.computer-menu { position: relative; z-index: 4; display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 16px; border-bottom: 1px solid #ffffff42; background: #f3eaf2de; box-shadow: 0 1px 12px #38223d15; }
.computer-menu-desktop { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; padding: 0 7px; border: 0; border-radius: 5px; color: var(--computer-ink); background: transparent; font-weight: 750 !important; }
.computer-menu-desktop:hover, .computer-exit:hover { background: #5f3e7219; }
.computer-owner { overflow: hidden; color: #6c5675; text-overflow: ellipsis; white-space: nowrap; }
.computer-clock { margin-left: auto; flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.computer-exit { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--computer-ink); white-space: nowrap; }
.computer-exit::before { content: "←"; font-size: 18px; }
.computer-menu :is(button, a):focus-visible { outline-color: #72528d; outline-offset: -2px; }
.computer-shortcuts { position: absolute; top: 68px; right: 26px; bottom: 94px; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-y: auto; scrollbar-width: thin; }
.computer-shortcut { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 104px; min-height: 100px; padding: 9px 5px; border: 1px solid transparent; border-radius: 8px; color: white; text-decoration: none; background: transparent; }
.computer-shortcut:hover, .computer-shortcut:focus-visible { border-color: #f5e7ff66; background: #f3e6ff21; }
.computer-shortcut-label { font-size: 14px; font-weight: 650; line-height: 1.35; }
.computer-shortcut > .computer-shortcut-label { text-shadow: 0 1px 4px #24112bb8; }
.computer-icon { position: relative; display: block; flex: 0 0 auto; width: 54px; height: 49px; filter: drop-shadow(0 4px 3px #23122c30); }
.computer-icon--folder { height: 42px; margin-top: 7px; border: 1px solid #deb9e7; border-radius: 6px; background: #b38bc9; box-shadow: inset 0 1px #faeaff; }
.computer-icon--folder::before { content: ""; position: absolute; left: 0; top: -7px; width: 25px; height: 11px; border: 1px solid #dab5e5; border-bottom: 0; border-radius: 5px 5px 0 0; background: #b995ca; z-index: -1; }
.computer-icon--folder .computer-icon-detail { position: absolute; inset: 6px -2px -2px; border: 1px solid #e4c7ee; border-radius: 5px; background: linear-gradient(#d0afdf, #b18ac6); box-shadow: inset 0 1px #f6e4ff8c; }
.computer-icon--work { height: 39px; margin-top: 10px; border: 1px solid #a87861; border-radius: 7px; background: linear-gradient(#d4a78a, #b5826f); box-shadow: inset 0 1px #f5d4ba; }
.computer-icon--work::before { content: ""; position: absolute; top: -9px; left: 16px; width: 20px; height: 12px; border: 3px solid #dbb494; border-bottom: 0; border-radius: 5px 5px 0 0; }
.computer-icon--work::after { content: ""; position: absolute; inset: 0 0 auto; height: 19px; border-bottom: 1px solid #94644f; border-radius: 6px 6px 3px 3px; background: #d5ac90; }
.computer-icon--work .computer-icon-detail { position: absolute; left: 23px; top: 15px; z-index: 1; width: 8px; height: 9px; border: 1px solid #fff1c9; border-radius: 2px; background: #e7d6a4; }
.computer-icon--document { width: 39px; height: 49px; border: 1px solid #fffaf1; border-radius: 4px; background: #f5ece0; box-shadow: inset 0 -2px #d7c8bd; }
.computer-icon--document::before { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 0 3px 0 2px; background: linear-gradient(45deg, #c9b8c9 49%, #917199 50%); }
.computer-icon--document::after { content: ""; position: absolute; left: 8px; top: 22px; width: 20px; height: 15px; background: repeating-linear-gradient(to bottom, #b1a1b7 0 2px, transparent 2px 6px); }
.computer-icon--document .computer-icon-detail { position: absolute; left: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #a98bb5; }
.computer-menu .computer-icon--desktop { width: 16px; height: 16px; filter: none; border: 1.5px solid currentColor; border-radius: 3px; }
.computer-icon--desktop::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1.5px; background: currentColor; }
.computer-icon--desktop::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1.5px; background: currentColor; }
.computer-dock { position: absolute; z-index: 3; bottom: 12px; left: 50%; display: flex; align-items: stretch; gap: 5px; max-width: calc(100% - 24px); padding: 7px 10px 4px; border: 1px solid #f9edff87; border-radius: 16px; background: #e7d8edb8; box-shadow: 0 7px 24px #2b133a36, inset 0 1px #fff8; transform: translateX(-50%); backdrop-filter: blur(18px); }
.computer-dock-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 4px; min-width: 71px; min-height: 77px; padding: 4px 8px 9px; border: 1px solid transparent; border-radius: 10px; color: #3d2c49; background: transparent; text-decoration: none; }
.computer-dock-item:hover, .computer-dock-item:focus-visible { background: #fff4; border-color: #fffb; }
.computer-dock-item::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.computer-dock-item[data-running="true"]::after { background: #4f335f; }
.computer-dock-item .computer-icon { transform: scale(.78); transform-origin: center top; margin-bottom: -11px; }
.computer-dock-item .computer-shortcut-label { font-size: 12px; font-weight: 650; }
.computer-window { position: absolute; z-index: 2; top: 59px; left: 3.5%; right: 3.5%; bottom: 110px; display: grid; grid-template-rows: 42px minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #f6ecf7c2; border-radius: 11px; background: #302438; box-shadow: 0 20px 60px #28173280, 0 3px 12px #210f3338; }
.computer-titlebar { display: grid; grid-template-columns: 132px minmax(0, 1fr) 132px; align-items: center; min-height: 0; padding: 0 7px; border-bottom: 1px solid #b7a2c0; background: #e8dde9; user-select: none; }
.computer-window-title { margin: 0; overflow: hidden; color: #4b3755; font-size: 14px; font-weight: 750; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.computer-title-hint { color: #7f6a89; font-size: 12px; text-align: right; padding-right: 8px; }
.computer-window-controls { display: flex; align-items: center; }
.computer-window-control { display: grid; place-items: center; width: 35px; height: 36px; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.computer-window-control:focus-visible { outline-color: #72528d !important; outline-offset: -1px !important; }
.computer-control-symbol { position: relative; width: 13px; height: 13px; border: 1px solid #af776f; border-radius: 50%; background: #d99283; }
.computer-window-control--minimize .computer-control-symbol { border-color: #b79b5c; background: #dcc386; }
.computer-window-control--maximize .computer-control-symbol { border-color: #78927a; background: #a2b99b; }
.computer-window-control .computer-control-symbol::before, .computer-window-control .computer-control-symbol::after { content: ""; position: absolute; opacity: .8; }
.computer-window-control--close .computer-control-symbol::before, .computer-window-control--close .computer-control-symbol::after { top: 5px; left: 2px; width: 7px; height: 1px; background: #71493f; transform: rotate(45deg); }
.computer-window-control--close .computer-control-symbol::after { transform: rotate(-45deg); }
.computer-window-control--minimize .computer-control-symbol::before { left: 2px; top: 5px; width: 7px; height: 1px; background: #806b35; }
.computer-window-control--maximize .computer-control-symbol::before { inset: 3px; border: 1px solid #4f684c; }
.computer-window-control:hover { background: #b49abe40; }
.computer-app-host { min-width: 0; min-height: 0; overflow: hidden; }
.computer-app-host .monitor-identity, .computer-app-host .monitor-back { display: none; }
.computer-app-host .monitor-toolbar { display: flex; justify-content: center; min-height: 48px; padding: 5px 14px; }
.computer-app-host .monitor-tabs { justify-self: auto; }
.computer-shell[data-maximized="true"][data-window-open="true"] .computer-window { top: 44px; left: 0; right: 0; bottom: 0; z-index: 5; border: 0; border-radius: 0; }
.computer-shell[data-maximized="true"][data-window-open="true"] .computer-dock { visibility: hidden; }

@container computer (max-width: 700px) {
  .computer-owner { display: none; }
  .computer-menu { gap: 10px; padding-inline: 9px; }
  .computer-shortcuts { top: 65px; right: 17px; gap: 12px; }
  .computer-window { left: 12px; right: 12px; top: 54px; bottom: 108px; }
  .computer-title-hint { display: none; }
  .computer-titlebar { grid-template-columns: 111px minmax(0, 1fr) 111px; }
}
@container computer (max-width: 600px) {
  .computer-menu { gap: 4px; height: 46px; padding-inline: 5px; }
  .computer-menu-desktop, .computer-exit { min-height: 44px; padding-inline: 8px; }
  .computer-clock { font-size: 12px; }
  .computer-shortcuts { top: 76px; right: 0; left: 0; bottom: auto; flex-direction: row; justify-content: center; gap: 8px; padding: 4px 10px; }
  .computer-shortcut { width: 96px; min-height: 102px; }
  .computer-window, .computer-shell[data-maximized="true"][data-window-open="true"] .computer-window { top: 46px; right: 0; left: 0; bottom: 0; z-index: 5; grid-template-rows: 44px minmax(0, 1fr); border: 0; border-radius: 0; }
  .computer-titlebar { grid-template-columns: 90px minmax(0, 1fr) 90px; padding-inline: 2px; }
  .computer-window-control { width: 44px; height: 44px; }
  .computer-window-control--maximize { display: none; }
  .computer-window-title { font-size: 14px; }
  .computer-shell[data-window-open="true"] .computer-dock { visibility: hidden; }
  .computer-app-host .monitor-toolbar { display: block; min-height: 45px; padding: 0 15px; }
  .computer-app-host .monitor-tabs { justify-content: center; gap: 24px; }
  .computer-app-host .monitor-tab { min-height: 44px; }
}
@container computer (min-width: 601px) and (max-height: 520px) {
  .computer-shortcuts { top: 55px; gap: 4px; bottom: 94px; }
  .computer-shortcut { min-height: 82px; padding: 5px; gap: 4px; }
  .computer-window { bottom: 10px; grid-template-rows: 36px minmax(0, 1fr); }
  .computer-app-host .monitor-toolbar { min-height: 44px; padding-block: 3px; }
  .computer-app-host .monitor-detail-heading { gap: 18px; padding: 12px 20px 10px; }
  .computer-app-host .monitor-summary { margin-top: 5px; }
  .computer-shell[data-window-open="true"] .computer-dock { visibility: hidden; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .computer-window { bottom: 12px; }
  .computer-shell[data-window-open="true"] .computer-dock { visibility: hidden; }
}