* { box-sizing: border-box; }
    html, body {
      margin: 0;
      height: 100%;
      font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
      color: #111;
      background: url("/assets/crank2.gif") center/cover;
      overflow: hidden;
      user-select: none;
    }
    
    .menubar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 22px;
      background: linear-gradient(#f6f6f6, #d4d4d4);
      border-bottom: 1px solid #6e6e6e;
      box-shadow: 0 1px 0 rgba(255,255,255,.5);
      display: flex;
      align-items: center;
      font-size: 13px;
      z-index: 1000;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }
    
    body.qt-fs-active .menubar {
      transform: translateY(-22px);
      z-index: 10000; 
    }
    
    body.qt-fs-active.qt-menubar-peek .menubar {
      transform: translateY(0);
    }
    
    #qt-menubar-hotzone {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 2px;
      z-index: 10001;
      cursor: default;
    }
    .menubar-item {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 10px;
      cursor: default;
      white-space: nowrap;
      position: relative;
    }
    .menubar-item.apple { font-size: 16px; padding: 0 12px; }
    .menubar-item.app-name { font-weight: 700; }
    
    #menuSlot_app .dropdown-item { font-weight: normal; }
    .menubar-item:hover,
    .menubar-item.open {
      background: #3a6bc5;
      color: #fff;
    }
    .menubar .clock {
      margin-left: auto;
      padding: 0 12px;
      font-size: 12px;
      cursor: default;
      color: #111;
      display: flex;
      align-items: center;
      height: 100%;
      position: relative;
    }
    .menubar .clock:hover { background: none !important; color: #111 !important; }
    
    .dropdown {
      display: none;
      position: absolute;
      top: 22px;
      left: 0;
      min-width: 170px;
      background: #efefef;
      border: 1px solid #aaa;
      border-top: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 2px 5px 12px rgba(0,0,0,.3);
      z-index: 2000;
      padding: 3px 0;
    }
    .menubar-item.open .dropdown { display: block; }
    .clock .dropdown { left: auto; right: 0; }
    .dropdown-item {
      padding: 3px 20px;
      font-size: 13px;
      cursor: default;
      color: #111;
      white-space: nowrap;
    }
    .dropdown-item:hover {
      background: #3a6bc5;
      color: #fff;
      border-radius: 3px;
      margin: 0 2px;
      padding: 3px 18px;
    }
    .dropdown-item.dim { color: #aaa; pointer-events: none; }
    .dropdown-item.dim:hover { background: none; color: #aaa; margin: 0; padding: 3px 20px; }
    .dropdown-sep { height: 1px; background: #bbb; margin: 3px 4px; }
    
    .desktop {
      height: 100%;
      padding: 22px 20px 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .desktop-icons {
      position: fixed;
      top: 34px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
    }
    .desktop-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 72px;
      cursor: default;
      padding: 4px;
      border-radius: 5px;
    }
    .desktop-icon:hover { background: rgba(58,107,197,.18); }
    .desktop-icon.selected { background: rgba(58,107,197,.3); }
    .desktop-icon img {
      width: 48px; height: 48px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
    }
    .desktop-icon-label {
      font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-align: center;
      margin-top: 3px;
      color: #fff;
      
      text-shadow:
        0 1px 3px rgba(0,0,0,.9),
        0 0 6px rgba(0,0,0,.7),
        1px 0 3px rgba(0,0,0,.5),
        -1px 0 3px rgba(0,0,0,.5);
      line-height: 1.25;
      max-width: 72px;
      word-break: break-word;
      letter-spacing: -0.1px;
    }
    .desktop-icon.selected .desktop-icon-label {
      background: #3a6bc5;
      border-radius: 2px;
      padding: 0 2px;
      text-shadow: none;
    }
    
    .window {
      width: min(640px, calc(100vw - 48px));
      background: #ececec;
      border: 1px solid #555;
      border-radius: 8px 8px 4px 4px;
      box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 #fff;
      position: relative;
      z-index: 50;
      transition: opacity 0.35s ease;
      
      display: flex;
      overflow: hidden; 
      flex-direction: column;
    }
    
    .window.zoomed {
      position: fixed !important;
      left: 0 !important;
      top: 22px !important;
      width: 100vw !important;
      height: calc(100vh - 22px - 78px) !important;
      border-radius: 0;
      margin: 0 !important;
      z-index: 90;
      display: flex;
      flex-direction: column;
    }
    .window.zoomed .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 0;
    }
    .window.zoomed .content textarea {
      flex: 1;
      min-height: unset;
    }
    .window.shaded .content { display: none; }
    @keyframes genie-out {
      0%   { transform: scaleY(1) scaleX(1) translateY(0); transform-origin: bottom center; opacity: 1; }
      40%  { transform: scaleY(0.6) scaleX(0.85) translateY(20%); transform-origin: bottom center; opacity: 1; }
      70%  { transform: scaleY(0.25) scaleX(0.5) translateY(55%); transform-origin: bottom center; opacity: 0.7; }
      100% { transform: scaleY(0.04) scaleX(0.15) translateY(85%); transform-origin: bottom center; opacity: 0; }
    }
    .window.minimizing {
      animation: genie-out 0.4s cubic-bezier(.4,0,.8,.6) forwards;
      pointer-events: none;
    }
    .window.closed { display: none; }
    
    .titlebar {
      height: 22px;
      background: linear-gradient(#e8e8e8, #b4b4b4);
      border-bottom: 1px solid #7a7a7a;
      border-radius: 8px 8px 0 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      cursor: grab;
      flex-shrink: 0;
    }
    .titlebar:active { cursor: grabbing; }
    .window.zoomed .titlebar { border-radius: 0; }
    
    .lights { display: flex; gap: 6px; align-items: center; }
    .light {
      width: 12px; height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.45);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.2);
      cursor: default;
      flex-shrink: 0;
      position: relative;
      transition: filter 0.08s;
    }
    .light.close { background: radial-gradient(circle at 32% 28%, #ffc4b8, #ff5f57 42%, #c23b32); }
    .light.min   { background: radial-gradient(circle at 32% 28%, #ffe9a8, #febc2e 42%, #c48a12); }
    .light.zoom  { background: radial-gradient(circle at 32% 28%, #c6f5b0, #28c840 42%, #1a8f2a); }
    .lights:hover .light::after {
      content: "";
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 900; color: rgba(0,0,0,.5);
    }
    .lights:hover .light.close::after { content: "×"; }
    .lights:hover .light.min::after   { content: "−"; }
    .lights:hover .light.zoom::after  { content: "+"; }
    .light:active { filter: brightness(.75); }
    .light.disabled {
      background: radial-gradient(circle at 32% 28%, #5a5a5a, #444 42%, #333) !important;
      border-color: rgba(0,0,0,.3);
      pointer-events: none;
    }
    .light.disabled::after { display: none !important; }
    .title {
      flex: 1;
      text-align: center;
      font-size: 13px; font-weight: 700;
      color: #222;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
      overflow: hidden; white-space: nowrap;
      padding-right: 42px;
    }
    
    .content {
      padding: 12px;
      background: linear-gradient(#f2f2f2, #dcdcdc);
      border-radius: 0 0 4px 4px;
      user-select: text;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0; 
    }
    textarea {
      width: 100%; min-height: 200px; padding: 8px;
      flex: 1;
      font-family: "Lucida Grande", Geneva, sans-serif;
      font-size: 14px; color: #111; background: #fff;
      border: 1px solid #8a8a8a; border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
      outline: none; resize: none;
    }
    .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; flex-shrink: 0; }
    button {
      font-family: inherit; font-size: 12px; font-weight: 700;
      color: #1a1a1a; padding: 5px 16px; border-radius: 12px;
      border: 1px solid #6a6a6a;
      background: linear-gradient(#ffffff, #e8e8e8 46%, #cfcfcf 50%, #dedede);
      box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.2);
      cursor: default; text-transform: uppercase; user-select: none;
    }
    button.default {
      color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
      border-color: #1d4f9c;
      background: linear-gradient(#9ec9ff, #4b8de8 46%, #1f64d0 52%, #3b86ea);
    }
    button:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.35); filter: brightness(.95); }
    
    .statusbar {
      margin-top: 10px;
      height: 20px;
      flex-shrink: 0;
      background: linear-gradient(to bottom, #c8c8c8, #e0e0e0);
      border: 1px solid #888;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.7);
      font-size: 11px;
      display: flex; align-items: center;
      padding: 0 8px;
      position: relative;
      color: #444;
      user-select: none;
    }
    
    .dock-wrap {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 500;
    }
    .dock {
      pointer-events: all;
      position: relative;
      display: inline-flex;
      align-items: flex-end;
      padding: 0 14px 8px;
      min-width: 10em;
    }
    
    .dock::before {
      content: "";
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      background: linear-gradient(
        to top,
        rgba(210,215,230,.94) 0%,
        rgba(240,243,252,.88) 55%,
        rgba(255,255,255,.68) 100%
      );
      border-top: 1px solid rgba(255,255,255,.85);
      border-left: 1px solid rgba(255,255,255,.6);
      border-right: 1px solid rgba(255,255,255,.6);
      border-radius: 14px 14px 0 0;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(180,185,210,.5),
        0 -2px 10px rgba(0,0,0,.14),
        0 4px 24px rgba(0,0,0,.25);
      backdrop-filter: blur(14px) saturate(1.5);
      -webkit-backdrop-filter: blur(14px) saturate(1.5);
      z-index: -1;
    }
    .dock-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: default;
      padding: 0 4px;
    }
    
    .dock-item::before {
      content: attr(data-title);
      position: absolute;
      bottom: calc(100% + 20px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(18,18,18,.82);
      color: #fff;
      font-size: 11px;
      font-family: "Lucida Grande", Geneva, sans-serif;
      padding: 2px 9px;
      border-radius: 5px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .1s;
      box-shadow: 0 1px 4px rgba(0,0,0,.4);
      z-index: 9999;
    }
    .dock-item:hover::before { opacity: 1; }
    .dock-item img {
      display: block;
      width: 56px;
      height: 56px;
      object-fit: contain;
      background: transparent;
      transform-origin: bottom center;
      transition: transform 0.15s cubic-bezier(.34,1.56,.64,1);
      position: relative;
      -webkit-box-reflect: below 2px -webkit-gradient(
        linear, left bottom, left top,
        color-stop(0%, rgba(200,205,225,.35)),
        color-stop(60%, rgba(255,255,255,0))
      );
      filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
    }
    .dock-item:hover img {
      transform: scale(1.4);
    }
    
    .dock-item:has(+ .dock-item:hover) img,
    .dock-item:hover + .dock-item img {
      transform: scale(1.18);
    }
    .dock-item:has(+ .dock-item + .dock-item:hover) img,
    .dock-item:hover + .dock-item + .dock-item img {
      transform: scale(1.06);
    }
    
    .dock-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(50,50,70,.7);
      box-shadow: 0 0 3px rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.3);
      margin-top: 3px;
      margin-bottom: 2px;
    }
    .dock-dot.hidden { visibility: hidden; }
    
    .dock-divider {
      width: 1px;
      height: 44px;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(140,145,165,.55) 20%,
        rgba(140,145,165,.55) 80%,
        transparent 100%);
      margin: 0 6px 12px;
      align-self: flex-end;
    }
    
    @keyframes dock-bounce {
      0%   { transform: scale(1) translateY(0); }
      14%  { transform: scale(1) translateY(-18px); }
      28%  { transform: scale(1) translateY(0); }
      42%  { transform: scale(1) translateY(-10px); }
      56%  { transform: scale(1) translateY(0); }
      72%  { transform: scale(1) translateY(-5px); }
      100% { transform: scale(1) translateY(0); }
    }
    .dock-item.bouncing img {
      animation: dock-bounce 1.1s cubic-bezier(.36,.07,.19,.97);
    }
    
    @keyframes dock-click {
      0%,100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
      40%      { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)) brightness(1.25); }
    }
    .dock-item:active img {
      animation: dock-click .2s ease;
    }
    
    .finder-window {
      display: none;
      position: fixed;
      top: 60px; left: 80px;
      width: 700px; height: 480px;
      background: #f0f0f0;
      border: 1px solid #555;
      border-radius: 8px 8px 4px 4px;
      box-shadow: 0 14px 32px rgba(0,0,0,.55), inset 0 1px 0 #fff;
      z-index: 200;
      flex-direction: column;
      overflow: hidden;
      transition: opacity .3s ease, transform .3s ease;
    }
    .finder-window.open { display: flex; }
    .finder-window.minimizing {
      animation: genie-out 0.4s cubic-bezier(.4,0,.8,.6) forwards;
      pointer-events: none;
    }
    
    .finder-window.zoomed {
      position: fixed !important;
      left: 0 !important;
      top: 22px !important;
      width: 100vw !important;
      height: calc(100vh - 22px - 78px) !important;
      border-radius: 0;
      margin: 0;
    }
    
    .photos-window {
      display: none;
      position: fixed;
      top: 80px; left: 120px;
      width: 660px; height: 460px;
      background: #ececec;
      border: 1px solid #555;
      border-radius: 8px 8px 4px 4px;
      box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 1px 0 #fff;
      z-index: 290;
      flex-direction: column;
      overflow: hidden;
      transition: opacity .3s ease, transform .3s ease;
    }
    .photos-window.open { display: flex; }
    .photos-window.minimizing {
      animation: genie-out 0.4s cubic-bezier(.4,0,.8,.6) forwards;
      pointer-events: none;
    }
    .photos-window.zoomed {
      position: fixed !important;
      left: 0 !important;
      top: 22px !important;
      width: 100vw !important;
      height: calc(100vh - 22px - 78px) !important;
      border-radius: 0;
    }
    .photos-titlebar {
      height: 22px;
      background: linear-gradient(#e8e8e8, #b4b4b4);
      border-bottom: 1px solid #7a7a7a;
      border-radius: 8px 8px 0 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      flex-shrink: 0;
      cursor: grab;
    }
    .photos-titlebar:active { cursor: grabbing; }
    .photos-window.zoomed .photos-titlebar { border-radius: 0; }
    .photos-title {
      flex: 1; text-align: center;
      font-size: 13px; font-weight: 700;
      color: #222;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
      padding-right: 42px;
      overflow: hidden; white-space: nowrap;
    }
    .photos-toolbar {
      height: 38px;
      background: linear-gradient(#d8d8d8, #c0c0c0);
      border-bottom: 1px solid #999;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 8px;
      flex-shrink: 0;
    }
    .photos-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      background: #fff;
    }
    .photos-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-content: flex-start;
    }
    .photo-thumb {
      width: 100px; height: 100px;
      border-radius: 4px;
      overflow: hidden;
      cursor: default;
      border: 2px solid transparent;
      transition: border-color .12s, transform .12s;
      flex-shrink: 0;
    }
    .photo-thumb:hover { border-color: rgba(58,107,197,.4); transform: scale(1.04); }
    .photo-thumb.selected { border-color: #3a6bc5; transform: scale(1.04); }
    .photo-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
    .photos-statusbar {
      height: 22px;
      background: linear-gradient(to bottom, #c8c8c8, #dedede);
      border-top: 1px solid #bbb;
      display: flex; align-items: center;
      padding: 0 12px;
      font-size: 11px; color: #555;
      flex-shrink: 0;
    }
    
    .finder-titlebar {
      height: 22px;
      background: linear-gradient(#e8e8e8, #b4b4b4);
      border-bottom: 1px solid #7a7a7a;
      border-radius: 8px 8px 0 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      flex-shrink: 0;
      cursor: grab;
    }
    .finder-titlebar:active { cursor: grabbing; }
    .finder-window.zoomed .finder-titlebar { border-radius: 0; }
    .finder-title {
      flex: 1; text-align: center;
      font-size: 13px; font-weight: 700;
      color: #222;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
      padding-right: 42px;
      overflow: hidden; white-space: nowrap;
    }
    
    .finder-toolbar {
      height: 38px;
      background: linear-gradient(#d8d8d8, #c0c0c0);
      border-bottom: 1px solid #999;
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 8px;
      flex-shrink: 0;
    }
    .finder-nav-btn {
      width: 24px; height: 20px;
      background: linear-gradient(#fff, #ddd 50%, #ccc);
      border: 1px solid #888;
      border-radius: 5px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; color: #444; cursor: default;
    }
    .finder-nav-btn:active { filter: brightness(.88); }
    .finder-path {
      flex: 1;
      font-size: 12px; color: #333;
      padding: 0 6px;
      display: flex; align-items: center; gap: 4px;
    }
    .finder-path-sep { color: #888; font-size: 11px; }
    
    .finder-view-btns {
      display: flex;
      background: linear-gradient(#ccc, #bbb);
      border: 1px solid #888;
      border-radius: 4px;
      overflow: hidden;
    }
    .finder-view-btn {
      width: 26px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: #444; cursor: default;
      border-right: 1px solid #999;
    }
    .finder-view-btn:last-child { border-right: none; }
    .finder-view-btn.active { background: linear-gradient(#aaa, #999); color: #222; }
    .finder-view-btn:active { filter: brightness(.88); }
    
    .finder-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    .finder-sidebar {
      width: 160px;
      background: linear-gradient(to right, #dce0ea, #d8dce6);
      border-right: 1px solid #bbc;
      padding: 8px 0;
      flex-shrink: 0;
      overflow-y: auto;
    }
    .finder-sidebar-section {
      font-size: 10px;
      font-weight: 700;
      color: #7a7a8a;
      text-transform: uppercase;
      padding: 8px 14px 3px;
      letter-spacing: 0.05em;
    }
    .finder-sidebar-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 3px 14px;
      font-size: 12px;
      color: #1a1a2a;
      cursor: default;
      border-radius: 5px;
      margin: 0 5px;
    }
    .finder-sidebar-item:hover { background: rgba(0,0,0,.08); }
    .finder-sidebar-item.active {
      background: linear-gradient(#3d78d0, #2d68bf);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.2);
    }
    .finder-sidebar-icon {
      width: 16px; height: 16px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .finder-sidebar-icon img {
      width: 16px; height: 16px;
      object-fit: contain;
    }
    
    .finder-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      background: #fff;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .finder-grid.view-icon {
      padding: 10px;
    }
    
    .finder-col-header {
      display: flex;
      border-bottom: 1px solid #d0d0d0;
      margin-bottom: 8px;
      padding-bottom: 3px;
    }
    .finder-col-header span {
      font-size: 11px;
      font-weight: 700;
      color: #666;
      flex: 1;
    }
    .finder-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 8px;
      align-content: flex-start;
      align-items: flex-start;
      width: 100%;
      box-sizing: border-box;
    }
    .finder-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 84px;
      cursor: default;
      padding: 5px 4px;
      border-radius: 5px;
      transition: background .08s;
      
      
      
    }
    
    .finder-icon-well {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: 100%;
      height: 64px;
      flex-shrink: 0;
    }
    .finder-icon:hover { background: rgba(58,107,197,.10); }
    .finder-icon.selected { background: rgba(58,107,197,.20); }
    .finder-icon img {
      pointer-events: none;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
    }
    
    .finder-photo-thumb {
      position: relative;
      background: transparent;
      padding: 0;
      border-radius: 3px;
      box-shadow:
        0 2px 6px rgba(0,0,0,.40),
        0 0 0 0.5px rgba(0,0,0,.14);
      display: block;
      overflow: hidden;
      pointer-events: none;
      flex-shrink: 0;
      width: 60px;
      height: 60px;
    }
    .finder-photo-img {
      display: block;
      width: 60px;
      height: 60px;
      object-fit: cover;
    }
    .finder-photo-gloss {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 40%;
      background: linear-gradient(
        180deg,
        rgba(255,255,255,.36) 0%,
        rgba(255,255,255,.08) 55%,
        rgba(255,255,255,0)   100%
      );
      pointer-events: none;
      border-radius: 3px 3px 0 0;
    }
    
    .finder-video-thumb {
      position: relative;
      width: 80px;
      height: 45px;
      border-radius: 3px;
      box-shadow:
        0 2px 6px rgba(0,0,0,.40),
        0 0 0 0.5px rgba(0,0,0,.14);
      overflow: hidden;
      pointer-events: none;
      flex-shrink: 0;
      background: #000;
    }
    .finder-video-img {
      display: block;
      width: 80px;
      height: 45px;
      object-fit: cover;
    }
    .finder-video-badge {
      position: absolute;
      bottom: 3px;
      right: 3px;
      width: 10px;
      height: 10px;
      pointer-events: none;
      line-height: 0;
    }
    .finder-icon-label {
      font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-align: center;
      margin-top: 3px;
      word-break: break-word;
      line-height: 1.25;
      color: #111;
      max-width: 82px;
      letter-spacing: -0.1px;
      
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .finder-icon.selected .finder-icon-label {
      background: #3560c4;
      color: #fff;
      border-radius: 3px;
      padding: 0 3px;
    }
    
    .finder-statusbar {
      height: 22px;
      background: linear-gradient(to bottom, #c8c8c8, #dedede);
      border-top: 1px solid #bbb;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 11px;
      color: #555;
      flex-shrink: 0;
    }
    
    .finder-upload-btn {
      font-family: inherit; font-size: 11px; font-weight: 700;
      color: #1a1a1a; padding: 3px 12px; border-radius: 10px;
      border: 1px solid #6a6a6a;
      background: linear-gradient(#fff, #e0e0e0 50%, #d0d0d0);
      box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.18);
      cursor: default; user-select: none;
      margin-left: auto;
    }
    .finder-upload-btn:active { filter: brightness(.9); }
    
    .itunes-window {
      display: none;
      position: fixed;
      top: 100px; left: 200px;
      width: 480px; height: 360px;
      background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
      border: 1px solid #111;
      border-radius: 10px 10px 6px 6px;
      box-shadow: 0 16px 48px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);
      z-index: 310;
      flex-direction: column;
      overflow: hidden;
    }
    .itunes-window.open { display: flex; }
    .itunes-window.minimizing {
      animation: genie-out 0.4s cubic-bezier(.4,0,.8,.6) forwards;
      pointer-events: none;
    }
    .itunes-window.zoomed {
      position: fixed !important;
      left: 0 !important;
      top: 22px !important;
      width: 100vw !important;
      height: calc(100vh - 22px - 78px) !important;
      border-radius: 0;
    }
    .itunes-titlebar {
      height: 22px;
      background: linear-gradient(#3a3a3a, #252525);
      border-bottom: 1px solid #111;
      border-radius: 10px 10px 0 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      flex-shrink: 0;
      cursor: grab;
    }
    .itunes-titlebar:active { cursor: grabbing; }
    .itunes-window.zoomed .itunes-titlebar { border-radius: 0; }
    .itunes-title {
      flex: 1; text-align: center;
      font-size: 12px; font-weight: 700;
      color: #ccc;
      text-shadow: 0 1px 0 rgba(0,0,0,.8);
      padding-right: 42px;
      overflow: hidden; white-space: nowrap;
    }
    
    .itunes-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    .itunes-art {
      width: 160px;
      flex-shrink: 0;
      background: #111;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      border-right: 1px solid #333;
    }
    .itunes-art-inner {
      width: 128px; height: 128px;
      border-radius: 4px;
      background: linear-gradient(135deg, #2a1a2a, #1a0a1a);
      border: 1px solid #444;
      display: flex; align-items: center; justify-content: center;
      font-size: 48px;
      box-shadow: 0 4px 16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
      overflow: hidden;
    }
    .itunes-art-inner img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 3px;
    }
    .itunes-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 10px;
      gap: 0;
      background: linear-gradient(to bottom, #2a2a2a, #1e1e1e);
      overflow: visible; 
    }
    .itunes-track-info {
      flex-shrink: 0;
      overflow: hidden;
      padding-bottom: 2px;
    }
    .itunes-track-name {
      font-size: 16px; font-weight: 700;
      color: #f0f0f0;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 3px;
    }
    .itunes-artist {
      font-size: 12px; color: #aaa;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .itunes-album {
      font-size: 11px; color: #777;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    
    .itunes-lcd {
      text-align: center;
      margin: 6px 0 6px;
      flex-shrink: 0;
    }
    .itunes-lcd-inner {
      display: inline-block;
      background: #0a1a0a;
      border: 1px solid #2a4a2a;
      border-radius: 4px;
      padding: 4px 14px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05);
      font-family: "Lucida Grande", "Courier New", monospace;
      font-size: 20px; font-weight: 700;
      color: #3ef060;
      text-shadow: 0 0 8px rgba(60,240,96,.6);
      letter-spacing: 2px;
      min-width: 100px;
    }
    
    .itunes-scrubber {
      width: 100%;
      margin: 6px 0 4px;
      position: relative;
      height: 12px;
    }
    .itunes-scrubber input[type=range] {
      -webkit-appearance: none;
      width: 100%; height: 4px;
      background: linear-gradient(to right, #3a7dd8 var(--prog, 0%), #444 var(--prog, 0%));
      border-radius: 2px;
      outline: none;
      cursor: default;
      margin: 4px 0;
    }
    .itunes-scrubber input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #e0e0e0, #aaa);
      border: 1px solid #888;
      box-shadow: 0 1px 3px rgba(0,0,0,.5);
      cursor: default;
    }
    .itunes-time-labels {
      display: flex; justify-content: space-between;
      font-size: 10px; color: #666;
      margin-top: 1px;
    }
    
    .itunes-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin: 6px 0 4px;
    }
    .itunes-btn {
      background: none;
      border: none;
      cursor: default;
      padding: 3px 5px;
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      min-width: 28px; height: 26px;
      box-shadow: none;
      text-transform: none;
      letter-spacing: 0;
      font-weight: normal;
      opacity: 0.72;
      transition: opacity .08s, background .08s;
    }
    .itunes-btn:hover { background: rgba(255,255,255,.08); opacity: 1; }
    .itunes-btn:active { background: rgba(255,255,255,.14); opacity: 1; filter: none; }
    .itunes-btn svg { display: block; }
    
    
    #itunesPrev svg, #itunesNext svg { width: 18px; height: 14px; }
    
    #itunesRew svg, #itunesFwd svg { width: 20px; height: 14px; }
    
    #itunesPlay { min-width: 34px; height: 34px; }
    #itunesPlay svg { width: 30px; height: 30px; }
    
    .itunes-vol {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
      padding: 0 6px;   
      overflow: visible; 
    }
    .itunes-vol span { font-size: 11px; color: #666; }
    .itunes-vol input[type=range] {
      -webkit-appearance: none;
      flex: 1; height: 3px;
      background: linear-gradient(to right, #3a7dd8 var(--vol, 100%), #444 var(--vol, 100%));
      border-radius: 2px; outline: none; cursor: default;
    }
    .itunes-vol input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #e0e0e0, #aaa);
      border: 1px solid #888;
      box-shadow: 0 1px 2px rgba(0,0,0,.5);
      cursor: default;
    }
    
    .itunes-playlist {
      scrollbar-width: thin;
      scrollbar-color: #444 #1a1a1a;
    }
    .itunes-playlist::-webkit-scrollbar { width: 8px; }
    .itunes-playlist::-webkit-scrollbar-track { background: #1a1a1a; }
    .itunes-playlist::-webkit-scrollbar-thumb {
      background: linear-gradient(#555, #3a3a3a);
      border-radius: 4px;
      border: 2px solid #1a1a1a;
    }
    
    .itunes-playlist {
      height: 90px;
      border-top: 1px solid #333;
      overflow-y: auto;
      background: #141414;
      flex-shrink: 0;
    }
    .itunes-pl-header {
      display: flex;
      padding: 3px 10px;
      font-size: 10px; color: #666;
      text-transform: uppercase;
      letter-spacing: .04em;
      border-bottom: 1px solid #222;
      background: #1a1a1a;
    }
    .itunes-pl-header span:first-child { flex: 1; }
    .itunes-pl-row {
      display: flex;
      padding: 3px 10px;
      font-size: 11px; color: #aaa;
      cursor: default;
      align-items: center;
    }
    .itunes-pl-row:hover { background: rgba(58,107,197,.25); color: #ddd; }
    .itunes-pl-row.playing { background: rgba(58,107,197,.45); color: #fff; }
    .itunes-pl-row .pl-num { width: 22px; color: #555; font-size: 10px; }
    .itunes-pl-row .pl-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .itunes-pl-row .pl-dur { width: 40px; text-align: right; color: #666; font-size: 10px; }
    .itunes-pl-row.playing .pl-num::before { content: "▶"; color: #3a7dd8; font-size: 9px; }
    .itunes-pl-row.playing .pl-num { color: transparent; }
    
    @keyframes mac-open {
      0%   { transform: scale(0.12) translateY(30px); opacity: 0; }
      60%  { transform: scale(1.03) translateY(-2px); opacity: 1; }
      80%  { transform: scale(0.98); }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    @keyframes mac-close {
      0%   { transform: scale(1);    opacity: 1; }
      100% { transform: scale(0.92); opacity: 0; }
    }
    @keyframes backdrop-out {
      0%   { background: rgba(0,0,0,.78); }
      100% { background: rgba(0,0,0,0);   }
    }
    .lightbox {
      
      display: flex;
      visibility: hidden;
      pointer-events: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    .lightbox.open {
      visibility: visible;
      pointer-events: auto;
      background: rgba(0,0,0,.78);
    }
    .lightbox.closing {
      visibility: visible;
      pointer-events: none;
      animation: backdrop-out .2s ease-out both;
    }
    .lightbox-inner {
      position: relative;
      background: #1a1a1a;
      border: 1px solid #444;
      border-radius: 6px;
      box-shadow: 0 24px 72px rgba(0,0,0,.9);
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      animation: mac-open .32s cubic-bezier(.34,1.36,.64,1) both;
    }
    .lightbox.closing .lightbox-inner {
      animation: mac-close .2s cubic-bezier(0.22,0.61,0.36,1) both;
    }
    .lightbox-titlebar {
      height: 22px;
      background: linear-gradient(#555, #333);
      border-radius: 6px 6px 0 0;
      display: flex;
      align-items: center;
      padding: 0 8px;
      gap: 6px;
      flex-shrink: 0;
    }
    .lightbox-title {
      flex: 1; text-align: center;
      font-size: 12px; color: #ccc;
      
      margin-right: 42px;
    }
    .lightbox img {
      display: block;
      max-width: 85vw;
      max-height: calc(90vh - 22px);
      object-fit: contain;
      border-radius: 0 0 5px 5px;
    }
    
    .about-dialog {
      display: flex;
      visibility: hidden;
      pointer-events: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0);
      z-index: 2500;
      align-items: center;
      justify-content: center;
    }
    .about-dialog.open {
      visibility: visible;
      pointer-events: auto;
      background: rgba(0,0,0,.35);
    }
    .about-dialog.closing {
      visibility: visible;
      pointer-events: none;
      animation: backdrop-out .2s ease-out both;
    }
    .about-inner {
      width: 260px;
      background: #ececec;
      border: 1px solid #555;
      border-radius: 8px;
      box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 #fff;
      overflow: hidden;
      animation: mac-open .32s cubic-bezier(.34,1.36,.64,1) both;
    }
    .about-dialog.closing .about-inner {
      animation: mac-close .2s cubic-bezier(0.22,0.61,0.36,1) both;
    }
    .about-titlebar {
      height: 22px;
      background: linear-gradient(#e8e8e8, #b4b4b4);
      border-bottom: 1px solid #7a7a7a;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
    }
    .about-title {
      flex: 1; text-align: center;
      font-size: 12px; color: #333;
      margin-right: 42px;
    }
    .about-content {
      padding: 22px 18px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .about-icon {
      width: 56px; height: 56px;
      object-fit: contain;
      border-radius: 11px;
      margin-bottom: 10px;
    }
    .about-name {
      font-size: 14px; font-weight: 700; color: #111;
      margin-bottom: 4px;
    }
    .about-tagline {
      font-size: 11px; color: #555;
      line-height: 1.4;
      margin-bottom: 12px;
    }
    .about-github {
      font-size: 11px;
      color: #2a5cc9;
      text-decoration: none;
      padding: 4px 10px;
      border: 1px solid #b7c7ea;
      border-radius: 4px;
      background: #e4ebfb;
    }
    .about-github:hover { background: #d3e0fa; }
    
    
    
    .titlebar.inactive {
      background: linear-gradient(#d8d8d8, #bfbfbf) !important;
      border-bottom: 1px solid #aaa !important;
    }
    .finder-titlebar.inactive {
      background: linear-gradient(#d8d8d8, #bfbfbf) !important;
      border-bottom: 1px solid #aaa !important;
    }
    .photos-titlebar.inactive {
      background: linear-gradient(#d8d8d8, #bfbfbf) !important;
      border-bottom: 1px solid #aaa !important;
    }
    .itunes-titlebar.inactive {
      background: linear-gradient(#d8d8d8, #bfbfbf) !important;
      border-bottom: 1px solid #aaa !important;
    }
    .itunes-titlebar.inactive .itunes-title {
      color: #999 !important;
      text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
    }
    
    .lights.inactive .light.close { background: radial-gradient(circle at 32% 28%, #d0d0d0, #a0a0a0 42%, #888); }
    .lights.inactive .light.min   { background: radial-gradient(circle at 32% 28%, #d0d0d0, #a0a0a0 42%, #888); }
    .lights.inactive .light.zoom  { background: radial-gradient(circle at 32% 28%, #d0d0d0, #a0a0a0 42%, #888); }
    
    .lights.inactive:hover .light::after { opacity: 0; }
    
    
    @keyframes genie-out {
      0%   {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: scaleY(1) translateY(0);
        transform-origin: bottom center;
        opacity: 1;
      }
      30%  {
        clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
        transform: scaleY(0.7) translateY(15%);
        transform-origin: bottom center;
        opacity: 1;
      }
      60%  {
        clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
        transform: scaleY(0.35) translateY(50%);
        transform-origin: bottom center;
        opacity: 0.85;
      }
      85%  {
        clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
        transform: scaleY(0.1) translateY(78%);
        transform-origin: bottom center;
        opacity: 0.5;
      }
      100% {
        clip-path: polygon(48% 0%, 52% 0%, 100% 100%, 0% 100%);
        transform: scaleY(0.02) translateY(92%);
        transform-origin: bottom center;
        opacity: 0;
      }
    }
    
    
    
    .dock-wrap.dock-hidden {
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }
    .dock-wrap {
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    }
    
    #dockContextMenu,
    #desktopContextMenu,
    #finderContextMenu {
      display: none;
      position: fixed;
      z-index: 3000;
      min-width: 160px;
      background: linear-gradient(#f2f2f2, #e8e8e8);
      border: 1px solid #999;
      border-radius: 5px;
      box-shadow: 2px 6px 18px rgba(0,0,0,.35);
      padding: 3px 0;
      font-size: 13px;
    }
    #dockContextMenu.open,
    #desktopContextMenu.open,
    #finderContextMenu.open {
      display: block;
    }
    .ctx-item {
      padding: 4px 18px;
      cursor: default;
      color: #111;
      white-space: nowrap;
    }
    .ctx-item:hover {
      background: #3a6bc5;
      color: #fff;
      border-radius: 3px;
      margin: 0 2px;
      padding: 4px 16px;
    }
    .ctx-item.dim {
      color: #aaa;
      pointer-events: none;
    }
    .ctx-item.dim:hover { background: none; color: #aaa; margin: 0; padding: 4px 18px; }
    .ctx-sep {
      height: 1px;
      background: #ccc;
      margin: 3px 0;
    }
    
    
    @media (max-width: 400px) {
      .window { width: 100%; max-width: 300px; }
      textarea { min-height: 90px; }
      button { width: 100%; }
      .title { padding-right: 0; font-size: 11px; }
      .dock-item img { width: 42px; height: 42px; }
      .finder-window { width: 95vw; height: 70vh; left: 2vw; }
      .desktop-icons { display: none; }
    }
    
    
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #e8e8e8; border-radius: 4px; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #b0b0b0, #888);
      border-radius: 4px;
      border: 1px solid #aaa;
    }
    ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a0a0a0, #777); }
    
    .finder-search-wrap {
      margin-left: auto;
      display: flex;
      align-items: center;
    }
    .finder-search {
      height: 18px;
      width: 120px;
      border-radius: 9px;
      border: 1px solid #bbb;
      background: linear-gradient(to bottom, #fff, #f4f4f4);
      padding: 0 8px 0 22px;
      font-size: 11px;
      font-family: "Lucida Grande", sans-serif;
      color: #333;
      outline: none;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Ccircle cx='5' cy='5' r='4' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3Cline x1='8.2' y1='8.2' x2='11' y2='11' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 6px center;
      background-size: 12px;
    }
    .finder-search:focus {
      border-color: #6b9fd8;
      box-shadow: 0 0 0 2px rgba(107,159,216,.35), inset 0 1px 3px rgba(0,0,0,.12);
    }
    .finder-search::placeholder { color: #aaa; }
    
    
    
    .finder-grid.view-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      flex: 1;
      gap: 0;
      padding: 0;
      align-self: stretch;
    }
    
    .finder-list-header {
      display: flex;
      flex-direction: row;
      background: linear-gradient(#dcdcdc, #c8c8c8);
      border-bottom: 1px solid #aaa;
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .finder-list-hcell {
      padding: 2px 8px;
      font-size: 11px;
      font-weight: normal;
      color: #555;
      border-right: 1px solid #bbb;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
      user-select: none;
      box-sizing: border-box;
      position: relative;
    }
    
    .finder-list-hcell:last-child { border-right: none; }
    .finder-list-hcell.sorted { color: #222; font-weight: normal; }
    .finder-list-hcell.sorted.asc::after {
      content: "";
      display: inline-block;
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 5px solid #555;
      vertical-align: middle;
      margin-left: 3px;
      margin-bottom: 1px;
    }
    .finder-list-hcell.sorted.desc::after {
      content: "";
      display: inline-block;
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid #555;
      vertical-align: middle;
      margin-left: 3px;
      margin-top: 1px;
    }
    .finder-list-hcell:hover { background: rgba(0,0,0,.06); cursor: pointer; }
    
    .finder-list-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #ebebeb;
      cursor: default;
      flex-shrink: 0;
      width: 100%;
      min-width: 0;
      height: 22px;
      overflow: hidden;
      box-sizing: border-box;
    }
    .finder-list-row:nth-child(even) { background: rgba(0,0,0,.025); }
    .finder-list-row:hover:not(.selected) { background: rgba(58,107,197,.07); }
    .finder-list-row.selected { background: #3a6bc5; }
    .finder-list-row.selected .finder-list-label,
    .finder-list-row.selected .finder-list-cell { color: #fff; }
    
    .finder-list-row.selected .finder-list-cell { border-left-color: transparent; }
    .finder-list-row.selected .finder-list-name { border-right-color: transparent; }
    
    .finder-list-name {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      min-width: 0;
      overflow: hidden;
    }
    .finder-list-icon {
      width: 16px;
      height: 16px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 2px;
      display: block;
    }
    .finder-list-art {
      width: 16px;
      height: 16px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .finder-list-label {
      font-size: 12px;
      color: #111;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }
    
    .finder-list-cell {
      font-size: 11px;
      color: #555;
      padding: 2px 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-left: 1px solid #ebebeb;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    
    
    .finder-grid.view-column .finder-icon { display: none; }
        
    .finder-grid {
      transition: opacity 0.12s ease;
    }
    .finder-grid.switching {
      opacity: 0;
    }
    
    .dropdown-item.checked {
      font-weight: 700;
      position: relative;
    }
    .dropdown-item.checked::before {
      content: "✓";
      position: absolute;
      left: 6px;
      color: #111;
    }
    .dropdown-item.checked:hover::before {
      color: #fff;
    }
    
    
    .menu-ctx-gen,
    .menu-ctx-finder,
    .menu-ctx-photos,
    .menu-ctx-itunes {
      display: none; 
    }
.finder-icon-audio-art {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.18);
  overflow: hidden;
}
.finder-audio-gloss {
  position: absolute;
  inset: 0 0 50% 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.12) 60%,
    rgba(255,255,255,0)   100%
  );
  pointer-events: none;
  z-index: 1;
}
.finder-audio-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.finder-audio-refl {
  width: 48px;
  height: 20px;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  
  transform: scaleY(-1);
  opacity: 0;
  
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  margin-top: 1px;
  flex-shrink: 0;
}
.finder-icon:hover .finder-audio-refl,
.finder-icon.selected .finder-audio-refl {
  opacity: 1;
}
.finder-icon:has(.finder-audio-refl) {
  padding-top: 2px;
}
    
    .finder-list-resize-handle {
      position: absolute;
      right: -4px;
      top: 0; bottom: 0;
      width: 8px;
      cursor: col-resize;
      z-index: 10;
    }
    .finder-list-resize-handle:hover,
    .finder-list-resize-handle.dragging {
      background: rgba(58,107,197,.30);
    }
    
    
    .finder-drag-ghost {
      position: fixed !important;
      pointer-events: none !important;
      z-index: 9999 !important;
      opacity: 0.82;
      cursor: default;
    }
    
    .finder-drag-ghost .finder-icon-label {
      background: #a8a8a8 !important;
      color: #111 !important;
      border-radius: 3px;
      padding: 0 3px;
    }
    
    
    
    @keyframes qt-open {
      0%   { transform: scale(0.82); opacity: 0; }
      70%  { transform: scale(1.015); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    .qt-minimizing {
      animation: genie-out 0.38s cubic-bezier(.4,0,.8,.6) forwards !important;
    }
    .qt-window {
      
      border-radius: 7px;
      overflow: hidden;
      
      box-shadow:
        0 2px 8px  rgba(0,0,0,.55),
        0 14px 45px rgba(0,0,0,.6),
        0 0 0 0.5px rgba(0,0,0,.45);
      background: #000;
      user-select: none;
      min-width: 300px;
    }
    .qt-window.qt-dragging,
    .qt-window.qt-resizing {
      transition: none !important;
    }
    
    .qt-titlebar {
      display: flex;
      align-items: center;
      height: 22px;
      transition: opacity 0.2s ease;
      padding: 0 8px;
      
      background: linear-gradient(180deg,
        #484848 0%,
        #3a3a3a 30%,
        #2c2c2c 70%,
        #1e1e1e 100%
      );
      border-bottom: 1px solid #0d0d0d;
      
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
      position: relative;
      cursor: default;
    }
    
    .qt-titlebar .lights {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      
      margin-top: 0;
    }
    
    .qt-window.inactive .qt-titlebar {
      background: linear-gradient(180deg,
        #3a3a3a 0%,
        #2d2d2d 50%,
        #1c1c1c 100%
      );
    }
    
    .qt-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
      font-size: 11px;
      font-weight: bold;
      
      color: #c8c8c8;
      text-shadow:
        0 -1px 1px rgba(0,0,0,.9),
        0  1px 0   rgba(255,255,255,.06);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 65%;
      pointer-events: none;
      letter-spacing: 0.01em;
    }
    .qt-window.inactive .qt-title {
      color: #888;
    }
    
    .qt-body {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      display: block;
      overflow: hidden;
    }
    
    .qt-ctrl {
      display: flex;
      align-items: center;
      height: 38px;
      padding: 0 10px;
      gap: 8px;
      background: linear-gradient(180deg,
        #2e2e2e 0%,
        #252525 40%,
        #1c1c1c 100%
      );
      border-top: 1px solid #0a0a0a;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    
    .qt-transport {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }
    .qt-btn-transport {
      width: 24px;
      height: 18px;
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,.6);
      background: linear-gradient(180deg,
        rgba(255,255,255,.1) 0%,
        rgba(255,255,255,.04) 100%
      );
      color: #bbb;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background .08s, color .08s;
      
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 2px rgba(0,0,0,.5);
    }
    .qt-btn-transport:hover {
      background: linear-gradient(180deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.08) 100%
      );
      color: #fff;
    }
    .qt-btn-transport:active {
      background: rgba(0,0,0,.3);
      color: #999;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
    }
    
    .qt-btn-play {
      width: 28px;
    }
    
    .qt-timeline {
      flex: 1;
      display: flex;
      align-items: center;
      min-width: 60px;
    }
    .qt-scrub-track {
      flex: 1;
      height: 4px;
      background: rgba(0,0,0,.6);
      border-radius: 2px;
      border: 1px solid rgba(0,0,0,.4);
      position: relative;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
      cursor: pointer;
    }
    .qt-scrub-fill {
      position: absolute;
      left: 0; top: 0; height: 100%;
      width: 0%;
      background: linear-gradient(180deg, #8ab4f0 0%, #5c87c5 100%);
      border-radius: 2px 0 0 2px;
    }
    .qt-scrub-thumb {
      position: absolute;
      top: 50%;
      left: 0%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      background: radial-gradient(ellipse at 35% 30%, #fff 0%, #c8c8c8 60%, #a0a0a0 100%);
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.45);
      box-shadow: 0 1px 3px rgba(0,0,0,.6);
      cursor: ew-resize;
    }
    
    .qt-time {
      font-family: "Lucida Grande", Geneva, monospace;
      font-size: 9px;
      color: #888;
      letter-spacing: 0.05em;
      flex-shrink: 0;
      min-width: 26px;
      text-align: center;
      text-shadow: 0 1px 1px rgba(0,0,0,.8);
    }
    
    .qt-vol-wrap {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    
    .qt-btn-fs {
      margin-left: 4px;
      flex-shrink: 0;
    }
    .qt-vol-icon {
      color: #888;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .qt-vol-slider {
      -webkit-appearance: none;
      width: 60px;
      height: 3px;
      background: rgba(0,0,0,.55);
      border-radius: 2px;
      border: 1px solid rgba(0,0,0,.4);
      outline: none;
      cursor: pointer;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
    }
    .qt-vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: radial-gradient(ellipse at 35% 30%, #fff 0%, #c0c0c0 60%, #9a9a9a 100%);
      border: 1px solid rgba(0,0,0,.4);
      box-shadow: 0 1px 2px rgba(0,0,0,.5);
      cursor: pointer;
    }
    
    .qt-resize-zone {
      position: absolute;
      z-index: 10;
      
    }
    
    .qt-rz-n  { top: 0; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
    
    .qt-rz-s  { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
    
    .qt-rz-e  { right: 0; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }
    
    .qt-rz-w  { left: 0; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }
    
    .qt-rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
    
    .qt-rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
    
    .qt-rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
    
    .qt-rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }
    
    .qt-window.qt-site-fullscreen .qt-resize-zone,
    .qt-window.qt-fullscreen .qt-resize-zone,
    .qt-window:fullscreen .qt-resize-zone,
    .qt-window:-webkit-full-screen .qt-resize-zone { display: none; }
    
    .qt-center-flash {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 5;
      
    }
    .qt-center-flash.qt-flash-in {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.12s ease;
    }
    .qt-center-flash.qt-flash-out {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }
    .qt-center-flash-icon {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      
      background: rgba(0,0,0,0.48);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 2px 10px rgba(0,0,0,0.5);
    }
    .qt-center-flash-icon svg { display: block; }
    .qt-flash-play svg { margin-left: 3px; }
    
    .qt-ctrl {
      transition: opacity 0.2s ease, height 0.2s ease;
    }
    .qt-titlebar {
      transition: opacity 0.2s ease, height 0.2s ease;
    }
    .qt-window.qt-cursor-hidden {
      cursor: none;
    }
    
    .qt-window.qt-cursor-hidden .qt-ctrl {
      
      opacity: 0;
      pointer-events: none;
      height: 30px;
    }
    .qt-window.qt-cursor-hidden .qt-titlebar {
      opacity: 0;
      height: 30px;
    }
    
    .qt-window.qt-fullscreen .qt-titlebar,
    .qt-window.qt-fullscreen .qt-ctrl {
      display: none;
    }
    .qt-window.qt-fullscreen .qt-body {
      aspect-ratio: unset;
      width: 100%;
      height: 100%;
    }
    .qt-window:fullscreen .qt-titlebar,
    .qt-window:fullscreen .qt-ctrl { display: none; }
    .qt-window:fullscreen .qt-body { aspect-ratio: unset; width: 100%; height: 100%; }
    .qt-window:-webkit-full-screen .qt-titlebar,
    .qt-window:-webkit-full-screen .qt-ctrl { display: none; }
    .qt-window:-webkit-full-screen .qt-body { aspect-ratio: unset; width: 100%; height: 100%; }
    .qt-window { position: fixed; }
    
    #qt-zoom-flash {
      position: fixed;
      inset: 0;
      background: #000;
      opacity: 0;
      pointer-events: none;
      z-index: 99999;
      transition: opacity 0.18s ease;
    }
    #qt-zoom-flash.in  { opacity: 0.55; }
    
    .qt-window.qt-site-fullscreen {
      left:          0 !important;
      top:           0 !important;
      width:         100vw !important;
      height:        100vh !important;
      border-radius: 0 !important;
      z-index:       9999 !important;
    }
    
    .qt-window.qt-site-fullscreen .qt-titlebar {
      border-radius: 0;
    }
    
    .qt-window.qt-site-fullscreen .qt-body {
      aspect-ratio: unset;
      width: 100%;
      height: calc(100vh - 22px - 38px);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }
    
    .qt-window.qt-site-fullscreen .qt-body iframe,
    .qt-window.qt-site-fullscreen .qt-body video {
      width: 100%;
      height: 100%;
      max-width: calc(100vh * 16 / 9);
      max-height: 100%;
      object-fit: contain;
    }
    
    .qt-window.qt-site-fullscreen .qt-ctrl {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg,
        rgba(20,20,20,0.85) 0%,
        rgba(10,10,10,0.95) 100%
      );
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    
    .qt-window.qt-site-fullscreen .lights:hover .light.zoom::after {
      content: "⤡" !important;
      font-size: 8px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: rgba(0,0,0,.55) !important;
    }