/* Early Mac OS X surfaces, with the user's all-gray controls and selection states. */
:root {
  --aqua-font: "Lucida Grande", "Helvetica Neue", "PingFang SC", sans-serif;
  --aqua-ink: #292929;
  --aqua-muted: #555;
  --aqua-line: #aaa;
  --aqua-silver: linear-gradient(#fafafa 0%, #e8e8e8 48%, #d2d2d2 49%, #e7e7e7 100%);
  --aqua-button: linear-gradient(#fff 0%, #f7f7f7 45%, #dedede 46%, #ededed 100%);
  --aqua-pressed: linear-gradient(#b6b6b6, #dedede 52%, #c7c7c7);
  --aqua-window-shadow: 0 18px 48px #0005, 0 3px 10px #0003;
}
.desktop-dialog, .aqua-project { font-family: var(--aqua-font); color: var(--aqua-ink); }
.desktop-menu {
  height: 32px; padding: 0 15px; gap: 14px; border: 0; border-bottom: 1px solid #888;
  background: var(--aqua-silver); box-shadow: inset 0 1px #fff, 0 1px 5px #0003;
  font: 12px var(--aqua-font); color: #252525;
}
.desktop-menu strong { font-weight: 700; }
.desktop-menu button { padding: 0 10px; font: inherit; color: inherit; }
.desktop-menu button:hover, .desktop-menu button:focus-visible {
  color: #fff; background: linear-gradient(#777, #484848); box-shadow: inset 0 1px #999; outline: 0;
}
.desktop-clock { font: 11px var(--aqua-font); color: #393939; text-shadow: 0 1px #fff; }
.desktop-system-button .pixel-apple { width: 17px; height: 20px; shape-rendering: geometricPrecision; filter: drop-shadow(0 1px #fff); }
.desktop-wallpaper { inset: 32px 0 0; background: #b8b8b8; }
.wallpaper-photo { filter: none; }
.desktop-greeting {
  left: 5vw; bottom: 142px; max-width: 75%; font: 500 clamp(36px, 6vw, 86px)/1.1 var(--aqua-font);
  letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 8px #0005;
}
.desktop-icons {
  inset: auto auto 14px 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  max-height: none; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 8px;
  padding: 8px 13px 6px; overflow: visible; border: 1px solid #fff9; border-radius: 11px;
  background: linear-gradient(#f9f9f9e0, #d2d2d2c9); box-shadow: inset 0 1px #fff, inset 0 -2px #8886, 0 5px 16px #0004;
}
.desktop-icon {
  position: relative; width: 46px; min-height: 49px; padding: 0 0 5px; gap: 0;
  font: 10px/1.3 var(--aqua-font); color: #303030; border-radius: 5px;
}
.desktop-app-icon, .island-app-icon { width: 44px; height: 44px; image-rendering: auto; filter: none; }
.desktop-icons .desktop-icon {
  margin-inline: var(--dock-space, 0px); transform: translateY(var(--dock-lift, 0px)) scale(var(--dock-scale, 1));
  transform-origin: center bottom; transition: transform 180ms cubic-bezier(.2,.75,.25,1), margin 180ms cubic-bezier(.2,.75,.25,1), filter 120ms ease-out;
}
.desktop-icons .desktop-icon:active { transform: translateY(var(--dock-lift, 0px)) scale(calc(var(--dock-scale, 1) * .94)); filter: brightness(.92); }
.desktop-icons .desktop-icon > span:last-child {
  position: absolute; bottom: calc(100% + 9px); max-width: none; padding: 4px 9px; border: 1px solid #fff6; border-radius: 5px;
  background: #343434e8; color: #fff; white-space: nowrap; text-shadow: 0 1px #000; opacity: 0; pointer-events: none;
  transform: translateY(3px); transition: opacity 120ms ease-out, transform 150ms ease-out; font-size: 9px;
}
.desktop-icons .desktop-icon:hover > span:last-child, .desktop-icons .desktop-icon:focus-visible > span:last-child { opacity: 1; transform: translateY(0); }
.desktop-icon:focus-visible { outline: 2px solid #555; outline-offset: 2px; background: #fff5; }
.desktop-icon.is-running::after { content: ""; position: absolute; bottom: 0; width: 5px; height: 4px; border-radius: 50%; background: #444; box-shadow: 0 1px #fff; }
.desktop-icons .pocket-dock-track { display: block; margin-top: 3px; color: #ddd; font-size: 10px; }
.desktop-icon.is-playing::after { content: "▶"; width: 9px; height: 9px; bottom: -2px; border-radius: 0; background: none; box-shadow: none; font: 8px/1 Arial,sans-serif; }
.desktop-icon.is-minimized { background: #ffffff65; box-shadow: inset 0 1px 3px #0002; }
.desktop-icons.has-window-overflow { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.desktop-icons:has(.minimized-window) .desktop-icon { flex-shrink: 0; }
.desktop-icons .minimized-window { border: 0; background: transparent; box-shadow: none; }
.desktop-icons .minimized-window .desktop-app-icon { object-fit: contain; }
.desktop-icons .minimized-window:focus-visible { outline: 1px solid #888; outline-offset: 2px; background: #ffffff33; }
.desktop-apps { position: absolute; right: 28px; top: 65px; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.desktop-apps .desktop-icon { width: 82px; min-height: 74px; padding: 5px; gap: 6px; }
.desktop-apps .desktop-app-icon, .desktop-apps .island-app-icon { width: 54px; height: 54px; filter: none; }
.desktop-apps .desktop-icon > span:last-child { padding: 3px 7px; border-radius: 4px; color: #fff; background: #0003; text-shadow: 0 1px 3px #000; }
.desktop-apps .desktop-icon:hover { background: #fff2; }
.desktop-bottom { left: 24px; right: 24px; bottom: 27px; font: 10px var(--aqua-font); pointer-events: none; }
.desktop-bottom > span { padding: 0; background: none; color: #fff; text-shadow: 0 1px 3px #000; }
.desktop-close {
  position: absolute; top: 20px; right: 20px; z-index: 4; width: 40px; height: 40px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: #0000004d; color: #fff;
  font-size: 0; transition: background-color .3s ease, transform .3s ease, opacity .3s ease;
}
.desktop-close::before, .desktop-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor;
}
.desktop-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.desktop-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.desktop-close:hover { background: #00000080; transform: scale(1.1); }
.desktop-dialog:not([open]) .desktop-close, .desktop-dialog.is-closing .desktop-close { opacity: 0; transform: scale(.8); pointer-events: none; }
.desktop-dialog .desktop-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #0008; }
.wallpaper-albums button, .settings-window #wallpaper-next, .os-window-body > button {
  border: 1px solid #999; border-radius: 5px; padding: 5px 13px; background: var(--aqua-button);
  color: #303030; box-shadow: inset 0 1px #fff, 0 1px 2px #0002; font: 12px/1.5 var(--aqua-font); text-decoration: none;
}
.settings-window #wallpaper-next:active, .os-window-body > button:active { background: var(--aqua-pressed); box-shadow: inset 0 1px 3px #0003; }
.desktop-system-popover {
  inset: 32px auto auto 7px; min-width: 204px; padding: 5px 0; border: 1px solid #999;
  border-radius: 0 0 7px 7px; background: #f4f4f4; color: #292929;
  box-shadow: 0 6px 16px #0004; font: 12px var(--aqua-font);
}
.desktop-system-popover button { padding: 7px 20px; }
.desktop-system-popover button:hover, .desktop-system-popover button:focus-visible { background: linear-gradient(#777, #4c4c4c); color: #fff; }
.desktop-system-popover hr { border-top-color: #ccc; margin: 5px 10px; }
.os-window {
  display: flex; flex-direction: column; top: 14%; left: 22%; width: min(590px, 68vw);
  max-height: calc(86svh - 128px); border: 1px solid #888; border-radius: 9px;
  background: #f7f7f7; box-shadow: var(--aqua-window-shadow); overflow: hidden; resize: none;
}
.os-titlebar {
  position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 35px;
  height: 35px; padding: 0 88px; border-bottom: 1px solid #999;
  background: var(--aqua-silver); box-shadow: inset 0 1px #fff;
  font: 600 12px var(--aqua-font); color: #333; text-shadow: 0 1px #fff;
}
:is(#os-window-title,[data-window-part="os-window-title"]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-window-controls { position: absolute; left: 12px; top: 10px; display: flex; gap: 8px; }
.os-titlebar .aqua-control, .aqua-project .close-project {
  display: grid; place-items: center; width: 14px; height: 14px; margin: 0; padding: 0;
  border: 1px solid #828282; border-radius: 50%; background: radial-gradient(ellipse at 50% 15%, #fff 0%, #f6f6f6 22%, #c4c4c4 55%, #aaa 67%, #e4e4e4 100%);
  box-shadow: inset 0 1px 1px #fff, 0 1px 0 #fff9; color: #444; font: 600 11px/1 Arial, sans-serif; text-shadow: 0 1px #fff;
}
.os-titlebar .aqua-control:hover, .aqua-project .close-project:hover { filter: brightness(.92); }
.os-titlebar .aqua-control { position: relative; }
.os-titlebar .aqua-control::before { content: ""; position: absolute; width: 22px; height: 28px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.os-window.is-window-transitioning { animation: none !important; pointer-events: none; }
.os-titlebar .aqua-control:active, .aqua-project .close-project:active { background: radial-gradient(ellipse at 50% 80%, #eee, #aaa 75%); box-shadow: inset 0 1px 2px #0005; }
.os-window-body { min-height: 0; padding: 30px; overflow: auto; max-height: min(60svh, 660px); font: 13px/1.85 var(--aqua-font); background: #f7f7f7; }
.os-window-body h2 { font: 600 29px/1.25 var(--aqua-font); letter-spacing: -.025em; margin: 0 0 22px; }
.os-window-body a { color: #414141; text-underline-offset: 3px; }
.os-window-body > button { text-align: left; padding: 8px 12px; width: 100%; margin-bottom: 9px; }
.os-window.model-window, .os-window.game-window { top: 7%; max-height: calc(93svh - 128px); }
.model-window .os-window-body, .game-window .os-window-body { padding: 0; max-height: none; background: #dedede; }
.mask-model { height: min(66svh, calc(93svh - 188px), 670px); min-height: 180px; }
.island-game { height: min(66svh, calc(93svh - 188px), 650px); min-height: 180px; }
.os-window.settings-window { top: 8%; max-height: calc(92svh - 128px); background: #f4f4f4; }
.settings-window .os-window-body { padding: 23px; max-height: calc(100svh - 218px); background: #f4f4f4; }
.settings-window .wallpaper-heading { margin-bottom: 22px; }
.settings-window .wallpaper-heading h2 { font: 600 14px var(--aqua-font); }
.wallpaper-summary { margin-bottom: 24px; }
.wallpaper-monitor { border-color: #b8b8b8; border-radius: 5px; box-shadow: inset 0 1px #fff, 0 1px 2px #0003; }
.wallpaper-monitor img, .wallpaper-choice img { filter: none; }
.settings-window #wallpaper-source { color: #4a4a4a; }
.wallpaper-albums { border: 1px solid #aaa; border-bottom: 0; border-radius: 7px 7px 0 0; background: linear-gradient(#eaeaea, #d7d7d7); padding: 8px; gap: 0; }
.settings-window .wallpaper-albums button { margin: 0; padding: 4px 12px; border: 1px solid #999; border-radius: 0; background: var(--aqua-button); font: 11px/1.5 var(--aqua-font); }
.settings-window .wallpaper-albums button:first-child { border-radius: 4px 0 0 4px; }
.settings-window .wallpaper-albums button:last-child { border-radius: 0 4px 4px 0; }
.settings-window .wallpaper-albums button + button { border-left: 0; }
.settings-window .wallpaper-albums button[aria-pressed=true] { color: #fff; background: linear-gradient(#777, #4d4d4d); box-shadow: inset 0 1px 3px #0004; border-color: #777; }
.wallpaper-grid { padding: 15px; gap: 15px 12px; max-height: clamp(120px, calc(100svh - 590px), 245px); border-color: #aaa; border-radius: 0 0 7px 7px; box-shadow: inset 0 1px 3px #0002; background: #fff; }
.settings-window .wallpaper-choice { border-radius: 5px; padding: 5px; }
.settings-window .wallpaper-choice[aria-pressed=true] { border-color: #777; color: #222; background: #e5e5e5; }
.settings-window .wallpaper-choice:hover { background: #eee; }
.wallpaper-options { padding-top: 18px; font-size: 11px; }
.wallpaper-options input { accent-color: #606060; }
.os-window.is-zoomed {
  top: var(--window-zoom-top,48px) !important; left: var(--window-zoom-left,22px) !important;
  right: var(--window-zoom-right,22px) !important; bottom: var(--window-zoom-bottom,122px) !important;
  width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
}
.os-window.is-zoomed .os-window-body { flex: 1; max-height: none; }
.os-window.is-zoomed .mask-model, .os-window.is-zoomed .island-game { height: 100%; min-height: 0; }
.desktop-dialog .os-window:fullscreen { position: fixed; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-width: 0; max-width: none !important; max-height: none !important; border: 0; border-radius: 0; }
.os-window:not(.is-front-window) .os-titlebar { color: #777; }
.project-window-chrome { display: contents; }
#project-window-title { display: none; }
.project-dialog.aqua-project { padding: 0; border: 1px solid #888; border-radius: 9px; background: #f7f7f7; color: #292929; box-shadow: var(--aqua-window-shadow); }
.aqua-project .project-window-chrome { display: flex; position: sticky; top: 0; z-index: 1; height: 35px; align-items: center; justify-content: center; padding: 0 42px; background: var(--aqua-silver); border-bottom: 1px solid #999; box-shadow: inset 0 1px #fff; }
.aqua-project #project-window-title { display: block; font: 600 12px var(--aqua-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px #fff; }
.aqua-project .close-project { position: absolute; top: 10px; left: 12px; right: auto; }
.aqua-project #project-content { padding: 32px; }
.aqua-project h2 { font: 600 30px/1.25 var(--aqua-font); }
.aqua-project p { font: 13px/1.9 var(--aqua-font); }
.aqua-project::backdrop { background: #0005; }
.desktop-dialog :focus-visible, .aqua-project :focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.desktop-dialog :is(.os-window-body,.wallpaper-grid), .aqua-project { scrollbar-width: thin; scrollbar-color: #aaa #e8e8e8; }

/* The embedded model workbench shares the same gray metal and recessed panels. */
.model-app, .paint-panel { --accent: #555; --line: #aaa; font-family: var(--aqua-font); color: #292929; }
.model-toolbar { height: 43px; padding: 0 15px; background: var(--aqua-silver); border-bottom-color: #aaa; box-shadow: inset 0 1px #fff; }
.document-name strong { font-weight: 600; }
.document-dot { background: #777; box-shadow: inset 0 1px 1px #fff9; border: 1px solid #555; }
.model-app button, .paint-panel button:not([style*="--swatch"]) { border: 1px solid #999; border-radius: 5px; background: var(--aqua-button); box-shadow: inset 0 1px #fff, 0 1px 2px #0002; color: #303030; }
.model-app button:hover:not(:disabled), .paint-panel button:not([style*="--swatch"]):hover { background: linear-gradient(#fff, #d7d7d7); border-color: #777; }
.model-app button:active:not(:disabled), .paint-panel button:active:not([style*="--swatch"]) { background: var(--aqua-pressed); box-shadow: inset 0 1px 3px #0003; }
.model-viewport { box-shadow: inset 0 1px 3px #0002; }
.model-sidebar { width: 196px; border-left-color: #aaa; background: #f0f0f0; box-shadow: inset 1px 0 #fff; }
.sidebar-heading { padding: 16px 14px 12px; }
.sidebar-heading h1 { font-weight: 600; }
.part-list { margin: 0 9px; padding: 3px; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; box-shadow: inset 0 1px 3px #0002; }
.part-row { margin: 0; padding: 9px 8px; border-radius: 2px; }
.part-row + .part-row { border-top: 1px solid #eee; }
.part-row:hover { background: #ededed; }
.part-row[aria-selected=true] { color: #fff; background: linear-gradient(#818181, #5e5e5e); box-shadow: inset 0 1px #999; }
.part-marker { width: 8px; height: 8px; transform: rotate(30deg); }
.selection-hint { padding-top: 12px; }
.explosion-meter { padding: 15px 14px; border-top-color: #b0b0b0; background: linear-gradient(#f4f4f4, #e3e3e3); box-shadow: inset 0 1px #fff; }
.explosion-meter progress { appearance: none; height: 7px; border: 1px solid #999; border-radius: 4px; background: #cfcfcf; overflow: hidden; box-shadow: inset 0 1px 2px #0003; }
.explosion-meter progress::-webkit-progress-bar { background: #d3d3d3; }
.explosion-meter progress::-webkit-progress-value { background: linear-gradient(#a6a6a6, #606060 50%, #888); border-radius: 3px; }
.explosion-meter progress::-moz-progress-bar { background: linear-gradient(#a6a6a6, #606060); }
.model-status { border-top-color: #aaa; background: linear-gradient(#eee, #d9d9d9); font-family: var(--aqua-font); }
.paint-panel { inset: 51px 12px auto auto; padding: 17px; width: 220px; border: 1px solid #999; border-radius: 8px; background: #f5f5f5; box-shadow: 0 8px 22px #0004, inset 0 1px #fff; }
.paint-panel h2 { margin: -17px -17px 13px; padding: 11px 17px; background: var(--aqua-silver); border-bottom: 1px solid #aaa; border-radius: 8px 8px 0 0; font-weight: 600; }
.color-presets button { box-shadow: inset 0 1px 2px #fff9, 0 1px 2px #0003; }
.model-app :focus-visible, .paint-panel :focus-visible { outline-color: #555; }
@media(max-width:760px) {
  .desktop-menu { gap: 6px; padding: 0 9px; }
  .desktop-menu button { padding-inline: 6px; }
  .desktop-bottom > span { display: none; }
  .os-window, .os-window.settings-window { left: 4%; width: 92%; max-width: 92%; }
}
@media(max-width:600px) {
  .desktop-icons { bottom: 12px; padding: 8px 10px 6px; gap: 6px; max-width: calc(100% - 20px); }
  .desktop-icons:has(.minimized-window) { gap: 4px; }
  .desktop-icons:has(.minimized-window) .desktop-icon { width: clamp(28px,9.7vw,38px); min-width: 0; }
  .desktop-icons:has(.minimized-window) .desktop-app-icon { max-width: 100%; height: auto; }
  .desktop-icon { width: 42px; min-height: 43px; font-size: 9px; }
  .desktop-app-icon, .island-app-icon { width: 38px; height: 38px; }
  .desktop-apps { right: 12px; top: 54px; gap: 16px; }
  .desktop-apps .desktop-icon { width: 70px; min-height: 67px; }
  .desktop-apps .desktop-app-icon, .desktop-apps .island-app-icon { width: 46px; height: 46px; }
  .desktop-bottom { left: 16px; bottom: 100px; }
  .desktop-greeting { left: 7vw; bottom: 164px; font-size: 44px; }
  .desktop-clock { font-size: 10px; }
  .os-window, .os-window.settings-window, .os-window.model-window, .os-window.game-window { top: 53px; left: 3%; width: 94%; max-width: 94%; max-height: calc(100svh - 170px); }
  .os-window-body { padding: 23px; max-height: calc(100svh - 230px); }
  .settings-window .os-window-body { padding: 17px; max-height: calc(100svh - 230px); }
  .settings-window .wallpaper-albums button { padding: 4px 8px; font-size: 10px; }
  .wallpaper-grid { max-height: 27svh; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wallpaper-options { align-items: flex-start; gap: 12px; font-size: 10px; }
  .wallpaper-options label { flex: 1; }
  .os-window.is-zoomed { top: var(--window-zoom-top,43px) !important; left: var(--window-zoom-left,8px) !important; right: var(--window-zoom-right,8px); bottom: var(--window-zoom-bottom,96px); }
  .mask-model, .island-game { height: calc(100svh - 230px); min-height: 180px; }
  .model-sidebar { width: 134px; }
  .part-list { margin-inline: 5px; }
  .part-row { padding: 8px 5px; }
  .aqua-project #project-content { padding: 24px; }
}
@media(prefers-reduced-motion:reduce) { .desktop-icons .desktop-icon, .desktop-icons .desktop-icon > span:last-child { transition: none; } }