html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  color: #1d1d1d;
  background: #2e5d9c;
  -webkit-font-smoothing: antialiased;
}
a { color: #1f5fbf; }
a:hover { color: #0b3d8c; }
button { font-family: inherit; }

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 20%, #9cc6ee 0%, #4f86c6 55%, #2b5a99 100%);
}
.splash.hidden { display: none; }
.splash-card {
  width: min(440px, 100%); border-radius: 14px; overflow: hidden;
  border: 1px solid #8c8c8c; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background: repeating-linear-gradient(0deg, #f3f3f3 0 2px, #ebebeb 2px 4px);
}
.splash-inner {
  padding: 38px 34px 30px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
}
.tile {
  width: 84px; height: 84px; border-radius: 20px;
  background: linear-gradient(180deg, #d7ecff 0%, #5aa2ea 50%, #2f7fd6 51%, #8cc6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.splash-name { margin: 0; font-size: 24px; font-weight: bold; letter-spacing: -.01em; }
.splash-sub { font-size: 13px; color: #555; }
.progress {
  width: 100%; height: 12px; box-sizing: border-box; margin-top: 10px;
  border-radius: 6px; border: 1px solid #7a8ea8;
  background: repeating-linear-gradient(-45deg, #7fb6ef 0 8px, #4c8fd8 8px 16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.splash-caption { font-size: 11px; color: #666; }
.jelly {
  margin-top: 8px; font: bold 14px "Lucida Grande", Verdana, sans-serif; color: #0a2a55;
  padding: 9px 38px; border-radius: 20px; border: 1px solid #2a64a8; cursor: pointer;
  background: linear-gradient(180deg, #e4f2ff 0%, #8fc3f5 48%, #5ea3eb 52%, #a9d6ff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(0,0,0,.3);
}
.jelly:hover { filter: brightness(1.06); }

/* ---------- Desktop ---------- */
.desktop {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(130% 100% at 30% 10%, #a8cdf0 0%, #5b8fcd 50%, #2e5d9c 100%);
}
.menubar {
  position: absolute; left: 0; right: 0; top: 0; height: 24px; z-index: 5000;
  display: flex; align-items: center; gap: 20px; padding: 0 14px; font-size: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,232,232,.92));
  border-bottom: 1px solid #9a9a9a; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  white-space: nowrap;
}
.menubar [data-open] { cursor: pointer; }
.menubar-city { margin-left: auto; color: #444; }

.icons {
  position: absolute; top: 36px; right: 12px; bottom: 84px; z-index: 1;
  overflow-y: auto; padding: 6px;
  display: grid; grid-template-columns: repeat(2, 96px); align-content: start; gap: 14px 10px;
}
.icon {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px 2px; border-radius: 6px;
  background: none; border: 0; font: inherit;
}
.icon:hover, .icon:focus-visible { background: rgba(255,255,255,.18); outline: none; }
.icon-label {
  font-size: 12px; color: #fff; text-align: center; line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.folder { position: relative; width: 58px; height: 46px; margin-top: 6px; }
.folder-tab {
  position: absolute; left: 2px; top: -6px; width: 24px; height: 10px;
  border-radius: 4px 4px 0 0; border: 1px solid #3c74b6; border-bottom: none;
  background: linear-gradient(180deg, #a7d0f7, #6aa7e6);
}
.folder-body {
  position: absolute; inset: 0; border-radius: 3px 5px 5px 5px;
  background: linear-gradient(180deg, #d4ebff 0%, #8ec4f4 45%, #5d9fe3 100%);
  border: 1px solid #3c74b6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 6px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; color: #14457f;
}
.doc {
  width: 42px; height: 54px; box-sizing: border-box; border-radius: 2px 12px 2px 2px;
  background: linear-gradient(180deg, #ffffff, #e4e4e4); border: 1px solid #8a8a8a;
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  font-size: 10px; font-weight: bold; color: #b4262a;
}

/* ---------- Windows ---------- */
.window {
  position: absolute; width: min(540px, calc(100vw - 40px));
  border-radius: 9px 9px 7px 7px; overflow: hidden;
  border: 1px solid #7d7d7d; box-shadow: 0 16px 44px rgba(0,0,0,.45);
  background: repeating-linear-gradient(0deg, #f3f3f3 0 2px, #ebebeb 2px 4px);
}
.titlebar {
  height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 9px;
  background: linear-gradient(180deg, #f7f7f7 0%, #dcdcdc 50%, #cfcfcf 51%, #e2e2e2 100%);
  border-bottom: 1px solid #9a9a9a; cursor: move; user-select: none; touch-action: none;
}
.tb-btn {
  width: 13px; height: 13px; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, #fff 0, #c4d2e4 35%, #5d7598 100%);
  border: 1px solid #4e6688;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; color: #23395a;
}
.tb-title {
  flex: 1; text-align: center; font-size: 13px; color: #2a2a2a; text-shadow: 0 1px 0 #fff;
  margin-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-body { overflow: auto; padding: 12px; }
.panel {
  background: #fff; border: 1px solid #b5b5b5; box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.head { display: flex; flex-direction: column; gap: 4px; }
.heading { margin: 0; font-size: 21px; font-weight: bold; line-height: 1.2; }
.role { font-size: 13px; color: #1f5fbf; font-weight: bold; }
.meta { font-size: 12px; color: #777; }
.para { margin: 0; font-size: 13px; line-height: 1.6; color: #333; text-wrap: pretty; }
.section { display: flex; flex-direction: column; gap: 6px; }
.section-h { font-size: 11px; font-weight: bold; letter-spacing: .08em; color: #555; }
.bullet { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; color: #333; }
.bullet::before { content: "•"; color: #1f5fbf; }
.quote {
  border-radius: 8px; background: linear-gradient(180deg, #f3f8ff, #e3eefc);
  border: 1px solid #b8cfee; padding: 12px 14px;
  font-size: 13px; line-height: 1.55; font-style: italic; color: #1e3d66;
}
.quote-by { font-style: normal; font-size: 11px; color: #55708f; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11px; padding: 3px 10px; border-radius: 12px; border: 1px solid #9fb9dc;
  background: linear-gradient(180deg, #fff, #e6effa); color: #23466f;
}
.press-list { display: flex; flex-direction: column; gap: 8px; }
.press-item { font-size: 13px; line-height: 1.4; }
.press-outlet { display: block; font-size: 11px; color: #777; }

.links { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #e2e2e2; padding-top: 12px; }
.links a { font-size: 13px; }

/* ---------- Tray (replaced by the Dock in v6, kept unused) ---------- */
.tray {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4999;
  display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.3));
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 14px rgba(0,0,0,.25);
  max-width: calc(100% - 20px); box-sizing: border-box; overflow-x: auto;
}
.tray-label { font-size: 11px; color: #123; padding: 0 6px; white-space: nowrap; }
.tray-items { display: contents; }
.tray-btn {
  font: 12px "Lucida Grande", Verdana, sans-serif; padding: 4px 12px; border-radius: 10px;
  border: 1px solid #7f9cc4; background: linear-gradient(180deg, #fff, #dbe7f6);
  cursor: pointer; white-space: nowrap;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 759px) {
  .menubar { gap: 14px; overflow-x: auto; }
  .titlebar { cursor: default; }
}

/* ---------- v3 additions ---------- */
.tb-title { margin-right: 60px; }
.window-wide { width: min(920px, calc(100vw - 250px)); }
.window-gallery { width: min(640px, calc(100vw - 40px)); }
.window-player { width: min(660px, calc(100vw - 40px)); }
.window.maxed { border-radius: 0; }
.resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, #9a9a9a 50% 56%, transparent 56% 68%, #9a9a9a 68% 74%, transparent 74% 86%, #9a9a9a 86% 92%, transparent 92%);
}
.icon-sub { font-size: 11px; color: #666; margin-top: -4px; }
.app { width: 52px; height: 52px; border-radius: 12px; margin-top: 3px; border: 1px solid #2f5f99;
  background: linear-gradient(180deg, #6fb2f2 0%, #2e7bd6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 6px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; }
.app-photo { width: 30px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #fff 0 60%, #7cc25e 60%); border: 2px solid #fff; position: relative; overflow: hidden; }
.app-photo::after { content: ""; position: absolute; left: 5px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f7b733; }

/* thumbnails */
.thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #e9edf2; overflow: hidden; }
.thumb-43 { aspect-ratio: 4 / 3; }
.thumb-1610 { aspect-ratio: 16 / 10; }
.thumb-fill { aspect-ratio: auto; height: 100%; }
.thumb-framed { border: 1px solid #b5b5b5; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center;
  font-size: 11px; color: #7a8696; background: repeating-linear-gradient(45deg, #eef1f5 0 10px, #e6eaf0 10px 20px); }
.play-badge { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #1f5fbf; padding-left: 3px; }
.video-tag { position: absolute; left: 6px; top: 6px; font-size: 9px; font-weight: bold; letter-spacing: .05em; color: #fff;
  background: rgba(0,0,0,.65); padding: 2px 6px; border-radius: 3px; }

/* lead media in document windows */
.lead { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #e2e2e2; padding-top: 12px; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-item { padding: 0; border: 1px solid #b5b5b5; background: #fff; font: inherit; cursor: pointer; text-align: left; }
.lead-item:hover { border-color: #1f5fbf; }
.lead-label { font-size: 11px; color: #333; padding: 5px 7px; }
.lead-more { display: flex; justify-content: flex-end; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: #1f5fbf; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* work folder */
.panel-folder { padding: 14px; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, 118px); gap: 10px 6px; justify-content: start; }
.folder-grid .icon-label { color: #222; text-shadow: none; }
.folder-grid .icon:hover { background: #e3eefc; }
.folder-status { font-size: 11px; color: #666; text-align: center; padding: 8px 0 0; }

/* iPhoto */
.window-wide .win-body { padding: 0; }
.iphoto { display: flex; min-height: 420px; max-height: inherit; height: 100%; background: #fff; }
.ip-side { width: 180px; flex: none; background: linear-gradient(180deg, #e8edf4, #dde3ec); border-right: 1px solid #b5b5b5; padding: 10px 0; overflow-y: auto; }
.ip-h { font-size: 10px; font-weight: bold; letter-spacing: .08em; color: #6b7686; padding: 4px 12px; }
.ip-h2 { margin-top: 12px; }
.ip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 5px 12px;
  border: 0; background: none; font: inherit; font-size: 12px; color: #223; cursor: pointer; text-align: left; }
.ip-row.on { background: linear-gradient(180deg, #5a8fd6, #2f6bc2); color: #fff; }
.ip-count { font-size: 11px; color: #7a8696; }
.ip-row.on .ip-count { color: #dbe7f6; }
.ip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ip-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #ddd;
  background: linear-gradient(180deg, #fafafa, #eee); }
.ip-title { font-size: 14px; font-weight: bold; }
.ip-meta { font-size: 11px; color: #777; }
.ip-grid { --thumb: 180px; flex: 1; overflow-y: auto; padding: 14px; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr)); gap: 12px; max-height: 480px; }
.ip-item { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.ip-item:hover .thumb { outline: 2px solid #1f5fbf; }
.ip-label { font-size: 11px; color: #333; padding-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; border-top: 1px solid #ddd;
  background: linear-gradient(180deg, #f3f3f3, #e2e2e2); font-size: 11px; color: #555; }
.ip-slider { display: flex; align-items: center; gap: 6px; }
.ip-slider input { width: 120px; }
.ip-dot-s { font-size: 8px; } .ip-dot-l { font-size: 13px; }

/* Cover Flow */
.window-gallery .win-body { padding: 0; }
.flow { background: linear-gradient(180deg, #2a2a2a 0%, #0b0b0b 60%, #000 100%); color: #fff; padding: 18px 14px 12px; container-type: inline-size; }
.flow-stage-wrap { height: 250px; perspective: 1200px; position: relative; overflow: hidden; }
.flow-stage { position: relative; height: 100%; transform-style: preserve-3d; }
.cover { position: absolute; left: 50%; top: 10px; width: 300px; height: 200px; transition: transform .35s ease, opacity .35s; background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); -webkit-box-reflect: below 2px linear-gradient(transparent 55%, rgba(255,255,255,.22)); }
.cover .thumb { height: 100%; aspect-ratio: auto; }
.cover-tag { position: absolute; left: 8px; top: 8px; font-size: 9px; font-weight: bold; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.7); padding: 3px 7px; border-radius: 3px; }
.cover-tag-bts { background: rgba(31,95,191,.85); }
.cover-hit { position: absolute; inset: 0; background: rgba(0,0,0,.25); border: 0; cursor: pointer; }
.cover-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #1f5fbf; font-size: 18px; padding-left: 4px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cover-play-lg { width: 64px; height: 64px; font-size: 24px; }
.flow-cap { text-align: center; margin-top: 6px; min-height: 36px; }
.flow-label { font-size: 13px; font-weight: bold; }
.flow-sub { font-size: 11px; color: #bbb; margin-top: 2px; }
.flow-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.flow-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 12px; padding: 2px 10px; cursor: pointer; font-size: 11px; }
.flow-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: 420px; }
.flow-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.3); cursor: pointer; }
.flow-dot.on { background: #fff; }
.flow-hint { text-align: center; font-size: 10px; color: #888; margin-top: 8px; }
@container (max-width: 480px) { .cover { width: 60cqw; height: 40cqw; } .flow-stage-wrap { height: 50cqw; } }

/* Player */
.window-player .win-body { padding: 0; }
.player { background: #1b1b1b; color: #eee; }
.screen-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.screen-frame iframe, .screen-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen-frame .thumb { position: absolute; inset: 0; }
.player-note { position: absolute; left: 12px; right: 12px; bottom: 12px; font-size: 11px; color: #fff; background: rgba(0,0,0,.75); padding: 8px 10px; border-radius: 6px; text-align: center; }
.player-ctl { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #3a3a3a, #222); border-top: 1px solid #000; }
.player-time { font-size: 10px; color: #bbb; font-variant-numeric: tabular-nums; }
.player-track { flex: 1; height: 6px; border-radius: 3px; background: #111; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.player-knob { position: absolute; left: 0; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #eee, #999); }
.player-cap { padding: 10px 12px 12px; border-top: 1px solid #333; }
.player-label { font-size: 13px; font-weight: bold; }
.player-sub { font-size: 11px; color: #aaa; margin-top: 2px; }

/* prose blocks */
.block { display: flex; flex-direction: column; gap: 12px; }
.block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.block-item { border: 0; background: none; display: flex; flex-direction: column; gap: 5px; }
.block-item .thumb { border: 1px solid #b5b5b5; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.block-item:hover .thumb { box-shadow: 0 0 0 2px #5ea3eb; }
.block-item .lead-label { padding: 0; color: #555; line-height: 1.35; }
.thumb img { object-position: top; }
.thumb-doc { background: #8a8a8a; }
.thumb-doc img { object-fit: contain; }
.thumb-card { background: #d9dee5; }
.card { position: absolute; left: 14%; right: 14%; top: 10%; bottom: -4%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; text-align: left; }
.card-sub { font-size: 8px; letter-spacing: .06em; color: #888; }
.card-title { font-size: 11px; font-weight: bold; line-height: 1.25; }
.card-line { height: 3px; background: #e4e4e4; }
.play-badge-dark { border: 2px solid rgba(255,255,255,.95); color: #fff; font-size: 12px; box-sizing: border-box;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.5) 0, rgba(60,60,60,.65) 45%, rgba(0,0,0,.8) 100%); }

/* Preview (PDF pages) */
.window-preview { width: min(760px, calc(100vw - 250px)); }
.preview { display: flex; flex-direction: column; gap: 8px; height: min(520px, calc(100vh - 220px)); }
.preview-pages { flex: 1; min-height: 0; overflow: auto; background: #8a8a8a; border: 1px solid #6f6f6f; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.preview-pages img { width: min(100%, 560px); display: block; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.preview-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: #555; }

/* Reader (TextEdit) */
.window-reader { width: min(820px, calc(100vw - 250px)); }
.reader { display: flex; height: min(520px, calc(100vh - 220px)); border: 1px solid #9a9a9a; background: #fff; overflow: hidden; }
.reader-side { flex: 0 0 200px; background: linear-gradient(180deg, #e6ecf3, #d3dce7); border-right: 1px solid #a9b4c2; padding: 10px 0;
  display: flex; flex-direction: column; gap: 1px; overflow: auto; min-height: 0; }
.reader-row { padding: 6px 12px; font: inherit; font-size: 11px; line-height: 1.35; cursor: pointer; border: 0; background: none; text-align: left; color: #1d1d1d; }
.reader-row.on { background: linear-gradient(180deg, #7ea6d8, #4a78b8); color: #fff; }
.reader-main { flex: 1 1 0; min-width: 0; overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.reader-meta { font-size: 11px; letter-spacing: .06em; color: #888; }
.reader-title { font-size: 20px; font-weight: bold; line-height: 1.25; text-wrap: pretty; }
.reader-p { margin: 0; font-size: 13px; line-height: 1.65; color: #333; text-wrap: pretty; }
.reader-link { font-size: 11px; }
.window.maxed .preview, .window.maxed .reader { height: calc(100vh - 170px); }

@media (max-width: 759px) {
  .window-wide, .window-gallery, .window-player, .window-preview, .window-reader { width: calc(100% - 16px); }
  .reader-side { flex-basis: 120px; }
  .preview, .reader { height: calc(100vh - 190px); }
  .iphoto { flex-direction: column; min-height: 0; }
  .ip-side { width: auto; border-right: 0; border-bottom: 1px solid #b5b5b5; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; }
  .ip-h { width: 100%; }
  .ip-h2 { margin-top: 4px; }
  .ip-row { width: auto; padding: 4px 8px; border-radius: 10px; }
  .ip-grid { max-height: 60vh; --thumb: 120px !important; }
  .resize { display: none; }
}

/* ---------- v5 additions ---------- */
/* full-bleed app heights (set per window in app.js) */
.preview, .reader, .studio, .itunes, .iphoto { height: var(--fill, min(520px, calc(100vh - 220px))); }
.window.maxed .preview, .window.maxed .reader { height: var(--fill); }
.iphoto { min-height: 0; }
.ip-grid { max-height: none; min-height: 0; }

/* new desktop app icons */
.app { border: 1px solid #6f8197; background: linear-gradient(180deg, #f4f8fc 0%, #c9d6e4 48%, #aebfd3 52%, #dbe5ef 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,.3); margin-top: 2px; }
.app-photo { width: 30px; height: 24px; background: linear-gradient(160deg, #9fd0ff, #3d7cc9 60%, #7fbf6a 61%, #4f9440);
  box-shadow: 0 1px 3px rgba(0,0,0,.4); transform: rotate(-6deg); }
.app-photo::after { display: none; }
.app-music { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box;
  background: radial-gradient(circle at 50% 30%, #e4f2ff 0, #8fc3f5 40%, #2f7fd6 100%); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.app-text { width: 28px; height: 34px; background: #fff; border: 1px solid #8a8a8a; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transform: rotate(-4deg); padding: 5px 4px; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; }
.app-text-aa { font: bold 9px Georgia, serif; color: #14457f; line-height: 1; }
.app-text-l { height: 2px; background: #b9c4d2; }
.app-text-s { width: 70%; }
.app-design { width: 32px; height: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-6deg); }
.app-design div { border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* window chrome */
.resize-l { left: 0; right: auto; cursor: nesw-resize; background: none; }
.pill { font: 11px "Lucida Grande", Verdana, sans-serif; padding: 3px 12px; border-radius: 10px; border: 1px solid #7b7b7b;
  background: linear-gradient(180deg, #fdfdfd, #dadada); cursor: pointer; color: #1d1d1d; white-space: nowrap; }
.with-back { display: flex; flex-direction: column; gap: 8px; }
.window-gallery .win-body, .window-player .win-body { padding: 10px 12px 12px; }
.win-foot { padding: 5px 14px; border-top: 1px solid #c9c9c9; background: linear-gradient(180deg, #ececec, #d6d6d6);
  font-size: 11px; color: #555; text-align: center; flex: none; }
.soon-tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: bold; color: #fff;
  background: rgba(0,0,0,.78); padding: 2px 7px; border-radius: 3px; pointer-events: none; }

/* About portrait */
.head-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.head-row .head { flex: 1; min-width: 0; }
.portrait { width: 96px; height: 96px; object-fit: cover; border: 1px solid #9a9a9a; box-shadow: 0 1px 3px rgba(0,0,0,.25); flex: none; }

/* round arrows + big play */
.round-nav { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; font-size: 14px; cursor: pointer; }
.round-nav:hover { background: rgba(0,0,0,.65); }
.round-nav-l { left: 10px; } .round-nav-r { right: 10px; }
.big-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); color: #fff; font-size: 22px; cursor: pointer; padding: 0 0 0 5px; z-index: 1;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.55) 0, rgba(80,80,80,.6) 45%, rgba(0,0,0,.75) 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.6); }

/* iPhoto viewer */
.ip-main { min-height: 0; }
.ip-foot-l { display: flex; gap: 10px; align-items: center; }
.ip-foot { flex-wrap: wrap; flex: none; }
.ip-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #1b1b1b; }
.ip-vbar { display: flex; align-items: center; gap: 10px; padding: 4px 10px; background: linear-gradient(180deg, #3a3a3a, #262626); border-bottom: 1px solid #111; }
.ip-vcount { margin-left: auto; font-size: 12px; color: #ccc; }
.ip-vstage { flex: 1; min-height: 0; position: relative; }
.ip-vinner { position: absolute; inset: 8px 56px; display: flex; align-items: center; justify-content: center; }
.ip-vimg { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.ip-vframe { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; background: #000; }
.ip-vframe iframe, .ip-vframe video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ip-vph { color: #aaa; font-size: 13px; }
.ip-vsoon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: #fff;
  background: rgba(0,0,0,.78); padding: 5px 12px; border-radius: 4px; }
.ip-vcap { text-align: center; color: #fff; display: flex; flex-direction: column; gap: 2px; padding: 4px 16px 5px; }
.ip-vlabel { font-size: 13px; font-weight: bold; }
.ip-vsub { font-size: 11px; color: #aaa; }
.ip-strip { display: flex; gap: 5px; overflow-x: auto; padding: 5px 10px; background: #111; border-top: 1px solid #000; flex: none; }
.ip-strip-item { position: relative; flex: 0 0 auto; width: 54px; height: 36px; overflow: hidden; cursor: pointer; background: #333;
  opacity: .55; border: 0; padding: 0; }
.ip-strip-item.on { opacity: 1; outline: 2px solid #5ea3eb; outline-offset: -2px; }
.ip-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-strip-tag { position: absolute; left: 3px; bottom: 3px; font-size: 8px; color: #fff; background: rgba(0,0,0,.75); padding: 0 4px; border-radius: 2px; }
.video-tag { top: auto; bottom: 6px; font-size: 10px; background: rgba(0,0,0,.78); padding: 2px 7px; }

/* iTunes */
.window-itunes { width: min(860px, calc(100vw - 250px)); }
.window-itunes .win-body { padding: 0; }
.itunes { display: flex; flex-direction: column; border: 1px solid #8a8a8a; background: #fff; overflow: hidden; box-sizing: border-box; }
.it-top { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid #8a8a8a;
  background: linear-gradient(180deg, #e9e9e9 0%, #cfcfcf 50%, #c2c2c2 51%, #d9d9d9 100%); }
.it-ctl { display: flex; align-items: center; gap: 6px; flex: none; }
.it-btn { border-radius: 50%; border: 1px solid #6f6f6f; background: linear-gradient(180deg, #fdfdfd, #cfcfcf); box-shadow: inset 0 1px 0 #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: #333; }
.it-sm { width: 26px; height: 26px; font-size: 9px; }
.it-lg { width: 34px; height: 34px; font-size: 12px; }
.it-lcd { flex: 1; min-width: 0; max-width: 440px; margin: 0 auto; border-radius: 6px; border: 1px solid #8b8f7a;
  background: linear-gradient(180deg, #f6f8ec, #e2e6cc); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); padding: 5px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 1px; }
.it-lcd > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-lcd-name { font-size: 12px; font-weight: bold; color: #222; }
.it-lcd-artist { font-size: 11px; color: #444; }
.it-lcd-state { font-size: 10px; color: #6b6f5a; }
.it-spacer { flex: none; width: 110px; }
.it-mid { flex: 1; min-height: 0; display: flex; }
.it-side { flex: 0 0 160px; background: linear-gradient(180deg, #e6ecf3, #d3dce7); border-right: 1px solid #a9b4c2; padding: 10px 0; }
.it-side .ip-row { cursor: default; padding-left: 18px; }
.it-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.it-screen { flex: 1; min-height: 120px; background: #000; position: relative; }
.it-screen img, .it-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; border: 0; }
.it-note { padding: 5px 12px; font-size: 11px; color: #5a4a12; background: linear-gradient(180deg, #fff8d6, #f6eab0);
  border-top: 1px solid #d8c77a; border-bottom: 1px solid #d8c77a; }
.it-list { flex: none; overflow: auto; max-height: 40%; }
.it-row { display: grid; grid-template-columns: 28px minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.3fr); gap: 10px; padding: 5px 12px;
  font: inherit; font-size: 12px; width: 100%; border: 0; background: #fff; color: #1d1d1d; text-align: left; cursor: pointer; }
.it-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-row.alt { background: #f1f5fa; }
.it-row.on { background: linear-gradient(180deg, #7ea6d8, #4a78b8); color: #fff; }
.it-hdr { font-size: 10px; font-weight: bold; color: #555; padding: 4px 12px; cursor: default;
  background: linear-gradient(180deg, #f7f7f7, #e1e1e1); border-bottom: 1px solid #b5b5b5; }
.it-mark { opacity: .7; }

/* Infographics */
.window-studio { width: min(820px, calc(100vw - 250px)); }
.studio { display: flex; flex-direction: column; border: 1px solid #9a9a9a; background: #fff; overflow: hidden; }
.st-head { padding: 10px 16px; border-bottom: 1px solid #e2e2e2; display: flex; flex-direction: column; gap: 3px; flex: none; }
.st-title { font-size: 14px; font-weight: bold; }
.st-text { font-size: 11px; color: #555; line-height: 1.45; text-wrap: pretty; }
.st-stage { flex: 1; min-height: 200px; position: relative; background: linear-gradient(180deg, #3a3a3a, #1b1b1b); }
.st-hit { position: absolute; inset: 14px 60px; display: flex; align-items: center; justify-content: center; cursor: zoom-in;
  border: 0; background: none; padding: 0; }
.st-hit img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.st-cap { text-align: center; color: #fff; background: #1b1b1b; display: flex; flex-direction: column; gap: 2px; padding: 6px 16px; flex: none; }
.st-strip { display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 6px 10px; background: #111; border-top: 1px solid #000; flex: none; }
.st-thumb { flex: 0 0 auto; width: 44px; height: 58px; overflow: hidden; cursor: pointer; background: #333; opacity: .5; border: 0; padding: 0; }
.st-thumb.on { opacity: 1; outline: 2px solid #5ea3eb; outline-offset: -2px; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* TextEdit additions */
.reader-note { font-size: 10px; font-style: italic; color: #6b7a8c; padding: 1px 12px 6px; line-height: 1.35; }
.reader-h2 { padding-top: 14px; }
.reader-press:hover { background: #c9d6e6; }
.reader-by { font-size: 12px; color: #555; }

@media (max-width: 759px) {
  .window-itunes, .window-studio { width: calc(100% - 16px); }
  .it-side, .it-spacer { display: none; }
  .ip-vinner { inset: 8px 48px; }
}

/* ---------- v6 additions ---------- */
/* Pear menu (menubar, far left) */
.pear { display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; margin: 0 -6px 0 -8px;
  border: 0; background: transparent; cursor: pointer; fill: #1d1d1d; }
.pear.on { background: linear-gradient(180deg, #7ea6d8, #4a78b8); fill: #fff; }
.pear-scrim { position: fixed; inset: 0; z-index: 5001; }
.pear-list { position: absolute; left: 6px; top: 24px; z-index: 5002; min-width: 230px; padding: 4px 0;
  background: rgba(250,250,250,.96); border: 1px solid #9a9a9a; border-top: none; border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.3); font-size: 13px; }
.pear-list button { display: block; width: 100%; text-align: left; padding: 4px 18px; border: 0; background: none;
  font: 13px "Lucida Grande", Verdana, sans-serif; color: #1d1d1d; cursor: pointer; }
.pear-list button:hover, .pear-list button:focus-visible { background: linear-gradient(180deg, #7ea6d8, #4a78b8); color: #fff; outline: none; }

/* Drag shield keeps the cursor and stops iframes from grabbing the pointer */
.drag-shield { position: fixed; inset: 0; z-index: 99999; cursor: move; }

/* "Also on this desktop" row in experience windows */
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #e2e2e2; padding-top: 12px; }
.also-h { font-size: 11px; font-weight: bold; letter-spacing: .08em; color: #555; margin-right: 4px; }
.also-btn { font: 11px "Lucida Grande", Verdana, sans-serif; padding: 4px 12px; border-radius: 10px; border: 1px solid #7f9cc4;
  background: linear-gradient(180deg, #fff, #dbe7f6); cursor: pointer; }
.also-btn:hover { filter: brightness(1.05); }

/* Dock */
.dock { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 4999;
  display: flex; align-items: flex-end; gap: 6px; padding: 5px 12px 0; max-width: calc(100% - 12px); box-sizing: border-box;
  border-radius: 10px 10px 0 0; border: 1px solid rgba(255,255,255,.8); border-bottom: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.12) 2px 3px),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(236,242,249,.5) 55%, rgba(214,224,236,.45) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 14px rgba(0,0,0,.28); }
.dock-sep { align-self: stretch; width: 0; margin: 6px 4px 10px; border-left: 1px solid rgba(0,0,0,.22); border-right: 1px solid rgba(255,255,255,.8); }
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 56px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; outline: none; will-change: width; }
.dock-lift { width: 52px; height: 52px; will-change: transform; }
.dock-icon { position: relative; width: 52px; height: 52px; display: flex; align-items: flex-end; justify-content: center;
  transform-origin: 50% 100%; will-change: transform; }
.dock-icon .app { margin-top: 0; }
.dock-item:focus-visible .dock-icon { filter: drop-shadow(0 0 4px rgba(80,150,255,.9)); }
.dock-label { position: absolute; left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font-size: 12px; color: #fff;
  background: rgba(20,20,20,.78); border: 1px solid rgba(255,255,255,.35); border-radius: 11px; padding: 3px 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.dock-item.bouncing .dock-label { opacity: 0; transition-delay: 0s; }
.dock-label.on { opacity: 1; transform: translate(-50%, 0); transition-delay: .04s; }
.dock-dot { height: 9px; display: flex; align-items: center; justify-content: center; }
.dock-dot span { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid rgba(0,0,0,.75);
  opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
.dock-dot.on span { opacity: 1; transform: none; }
.dock-mini { position: absolute; left: 3px; right: 3px; top: 9px; bottom: 5px; border-radius: 4px 4px 2px 2px; overflow: hidden;
  border: 1px solid #7d7d7d; background: repeating-linear-gradient(0deg, #f3f3f3 0 2px, #e6e6e6 2px 4px); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.dock-mini-bar { height: 8px; background: linear-gradient(180deg, #f7f7f7, #c6c6c6); border-bottom: 1px solid #9a9a9a; display: flex; gap: 2px; align-items: center; padding-left: 3px; }
.dock-mini-bar span { width: 4px; height: 4px; border-radius: 50%; background: #7d8fa8; }
.dock-mini-l { margin: 4px; height: 3px; background: #b9c4d2; }
.dock-mini-s { margin-top: 0; width: 60%; }
@media (prefers-reduced-motion: reduce) { .dock-label, .dock-dot span { transition: none; } }

/* ---------- v7 additions: marquee selection ---------- */
.marquee { position: fixed; z-index: 99998; pointer-events: none; width: 0; height: 0;
  background: rgba(200,214,232,.28); border: 1px solid rgba(70,100,140,.85); }
.icon.sel-desk { background: rgba(20,50,100,.38); }
.folder-grid .icon.sel { background: #c9daf0; }
.ip-item.sel-thumb .thumb { outline: 3px solid #5ea3eb; outline-offset: 2px; }