/* Alt Dock simulation (assets/js/sim/dock.js). Points as in the app: icon s = 49, slot = s + 12 = 61, bar = s + 26 = 75,
   bar 5 pt above the screen's bottom, corner 24; widgets n × slot − 10 wide, s + 8 high (BottomDock.swift, DockInline.swift). */
[data-sim="dock"] .cv { touch-action: manipulation; --s: 49px; --num: ui-rounded, "SF Pro Rounded", var(--ui); }

/* menu bar */
[data-sim="dock"] .mb { position: absolute; left: 0; right: 0; top: 0; height: 24px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 500; background: rgba(20,24,40,.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 2; }
[data-sim="dock"] .mb .l, [data-sim="dock"] .mb .r { display: flex; align-items: center; gap: 18px; }
[data-sim="dock"] .mb .l b { font-weight: 700; }
[data-sim="dock"] .mb .r img { height: 14px; display: block; }

/* ---------- control card (Ayarlar › Alt Dock › Efektler / Davranış) ---------- */
[data-sim="dock"] .ctl { position: absolute; z-index: 6; left: 28px; top: 50px; width: 404px; padding: 16px 16px 14px; border-radius: 18px;
  background: rgba(28,30,36,.72); -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 20px 50px rgba(0,0,0,.35); }
[data-sim="dock"] .ctl h4 { margin: 0 0 10px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); }
[data-sim="dock"] .ctl h4 img { height: 13px; opacity: .85; }
[data-sim="dock"] .ctl .lb { font-size: 12px; color: rgba(255,255,255,.62); margin-bottom: 7px; }
[data-sim="dock"] .ctl .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.08); }
[data-sim="dock"] .ctl .seg button { height: 28px; border: 0; border-radius: 7px; background: transparent; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); cursor: pointer; transition: background .18s, color .18s; }
[data-sim="dock"] .ctl .seg button:hover { color: #fff; }
[data-sim="dock"] .ctl .seg button.on { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 .7px rgba(255,255,255,.16), 0 1px 3px rgba(0,0,0,.3); }
[data-sim="dock"] .ctl .cap { margin: 8px 2px 0; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.5); }
[data-sim="dock"] .ctl hr { border: 0; height: 1px; background: rgba(255,255,255,.1); margin: 13px 0 11px; }
[data-sim="dock"] .ctl .row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
[data-sim="dock"] .ctl .row span { flex: 1; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.88); }
[data-sim="dock"] .ctl .sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; border: 0; padding: 0; background: rgba(255,255,255,.2); cursor: pointer; transition: background .2s; }
[data-sim="dock"] .ctl .sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.3,1.3,.5,1); }
[data-sim="dock"] .ctl .sw.on { background: #3a82f7; }
[data-sim="dock"] .ctl .sw.on::after { transform: translateX(14px); }
/* phones: the card leaves the canvas and sits under it at page size (moved by dock.js) */
[data-sim="dock"] > .ctl { position: relative; left: auto; top: auto; width: auto; margin: 12px 0 0; z-index: 1; background: rgba(28,30,36,.9); font-family: "Avenir Next", "Nunito Sans", -apple-system, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }
[data-sim="dock"] > .ctl * { box-sizing: border-box; }
[data-sim="dock"] > .ctl .seg button { height: 34px; font-size: 13.5px; font-family: inherit; }
[data-sim="dock"] > .ctl .sw { width: 40px; height: 24px; border-radius: 12px; }
[data-sim="dock"] > .ctl .sw::after { width: 20px; height: 20px; }
[data-sim="dock"] > .ctl .sw.on::after { transform: translateX(16px); }

/* ---------- Finder window ---------- */
[data-sim="dock"] .win { position: absolute; z-index: 3; left: 560px; top: 64px; width: 660px; height: 372px; border-radius: 12px; overflow: hidden;
  background: #1e1f23; box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 26px 60px rgba(0,0,0,.5);
  transition: left .5s cubic-bezier(.3,1,.3,1), top .5s cubic-bezier(.3,1,.3,1), width .5s cubic-bezier(.3,1,.3,1), height .5s cubic-bezier(.3,1,.3,1), border-radius .5s; }
[data-sim="dock"] .win.zoom { border-radius: 10px; }
[data-sim="dock"] .win .side { position: absolute; left: 0; top: 0; bottom: 0; width: 158px; padding: 46px 10px 0; background: rgba(255,255,255,.05); box-shadow: inset -.7px 0 0 rgba(255,255,255,.08); }
[data-sim="dock"] .win .side .h { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); margin: 0 6px 4px; }
[data-sim="dock"] .win .side .i { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 7px; border-radius: 6px; font-size: 13px; color: rgba(255,255,255,.85); }
[data-sim="dock"] .win .side .i img { width: 16px; height: 16px; }
[data-sim="dock"] .win .side .i.on { background: rgba(255,255,255,.12); }
[data-sim="dock"] .win .lights { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; z-index: 2; }
[data-sim="dock"] .win .lights i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); display: block; }
[data-sim="dock"] .win .lights i:nth-child(1) { background: #ff5f57; } [data-sim="dock"] .win .lights i:nth-child(2) { background: #febc2e; }
[data-sim="dock"] .win .lights button { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: #28c840; cursor: pointer; position: relative; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
[data-sim="dock"] .win .lights button::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(135deg, rgba(0,60,0,.75) 0 38%, transparent 38% 62%, rgba(0,60,0,.75) 62%); clip-path: polygon(0 0, 70% 0, 0 70%, 30% 100%, 100% 100%, 100% 30%); opacity: 0; transition: opacity .15s; }
[data-sim="dock"] .win .lights:hover button::after, [data-sim="dock"] .win .lights button.hot::after { opacity: 1; }
[data-sim="dock"] .win .main { position: absolute; left: 158px; right: 0; top: 0; bottom: 0; }
[data-sim="dock"] .win .tb { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 15px; font-weight: 700; }
[data-sim="dock"] .win .tb img { height: 12px; opacity: .55; }
[data-sim="dock"] .win .hd, [data-sim="dock"] .win .r { display: grid; grid-template-columns: minmax(0, 1fr) 150px 80px; column-gap: 12px; align-items: center; padding: 0 18px; }
[data-sim="dock"] .win .hd { height: 26px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.45); box-shadow: inset 0 -.7px 0 rgba(255,255,255,.08); }
[data-sim="dock"] .win .list { padding: 4px 8px; }
[data-sim="dock"] .win .r { height: 30px; border-radius: 6px; padding: 0 10px; font-size: 13px; color: rgba(255,255,255,.88); cursor: grab; touch-action: none; transition: opacity .25s, height .3s; }
[data-sim="dock"] .win .r:nth-child(even) { background: rgba(255,255,255,.035); }
[data-sim="dock"] .win .r:hover { background: rgba(255,255,255,.07); }
[data-sim="dock"] .win .r.lift { background: #2f6fe8 !important; color: #fff; }
[data-sim="dock"] .win .r.gone { opacity: 0; height: 0; overflow: hidden; }
[data-sim="dock"] .win .r .n { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="dock"] .win .r .n img { width: 20px; height: 20px; flex: none; }
[data-sim="dock"] .win .r .d, [data-sim="dock"] .win .r .z { color: rgba(255,255,255,.5); font-size: 12px; }
[data-sim="dock"] .win .r .z { text-align: right; }
[data-sim="dock"] .win .foot { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.55); background: rgba(255,255,255,.03); box-shadow: inset 0 .7px 0 rgba(255,255,255,.08); }
[data-sim="dock"] .tag { position: absolute; z-index: 7; left: 50%; top: 40px; transform: translateX(-50%); padding: 7px 16px; border-radius: 16px; font-size: 14px; font-weight: 700;
  background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.16); opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
[data-sim="dock"] .tag.on { opacity: 1; }
[data-sim="dock"] .tag b { color: #ff8a80; } [data-sim="dock"] .tag b.ok { color: #7ee2a0; }
/* the part of the zoomed window that is under the Dock */
[data-sim="dock"] .under { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 84px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(-45deg, rgba(255,90,80,.22) 0 8px, transparent 8px 16px); box-shadow: inset 0 2px 0 rgba(255,110,100,.9); }
[data-sim="dock"] .under.on { opacity: 1; }

/* ---------- the bar ---------- */
[data-sim="dock"] .bar { position: absolute; z-index: 10; bottom: 5px; height: 75px; }
[data-sim="dock"] .bar .glass { position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(34,35,40,.52);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 2px 10px rgba(0,0,0,.22); }
[data-sim="dock"] .bar .glass::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: .8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-sim="dock"] .car { position: absolute; left: 12px; top: 8px; height: 57px; clip-path: inset(-260px -240px -20px -240px); touch-action: pan-y; }
[data-sim="dock"] .car.moving { clip-path: inset(-260px 0 -20px 0); }
[data-sim="dock"] .pg { position: absolute; left: 0; top: 0; height: 57px; transition: transform .55s cubic-bezier(.28,1.12,.42,1); }
[data-sim="dock"] .car.drag .pg { transition: none; }
[data-sim="dock"] .fixed { position: absolute; top: 8px; height: 57px; }
[data-sim="dock"] .dots { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; gap: 2px; }
[data-sim="dock"] .dots button { width: 5px; height: 9px; border: 0; padding: 3px 1px; background: none; cursor: pointer; }
[data-sim="dock"] .dots button i { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .2s; }
[data-sim="dock"] .dots button.on i { background: rgba(255,255,255,.5); }
[data-sim="dock"] .edge { position: absolute; top: 0; width: 12px; height: 49px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: opacity .2s; }
[data-sim="dock"] .edge img { height: 15px; opacity: .75; }
[data-sim="dock"] .edge.l { left: -11px; } [data-sim="dock"] .edge.r { right: -11px; }
[data-sim="dock"] .edge.off { opacity: 0; pointer-events: none; }

/* a tile: slot wide, s + 8 high; the icon sits at its bottom over the running dot */
[data-sim="dock"] .t { position: absolute; top: 0; height: 57px; }
[data-sim="dock"] .t.ic { cursor: pointer; }
[data-sim="dock"] .t .fx { position: absolute; left: 6px; top: 1px; width: 49px; height: 49px; transform-origin: 50% 100%;
  transition: transform .26s cubic-bezier(.3,1.25,.5,1), filter .26s; will-change: transform; }
[data-sim="dock"] .t .fx > img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
[data-sim="dock"] .t .hop { position: absolute; inset: 0; }
[data-sim="dock"] .t .dot { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 .3px .8px rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
[data-sim="dock"] .t.run .dot { opacity: 1; }
[data-sim="dock"] .t .lbl { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); padding: 4px 9px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap;
  background: rgba(0,0,0,.72); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.16); opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 5; }
[data-sim="dock"] .t.hov .lbl { opacity: 1; }
[data-sim="dock"] .t.nolbl .lbl { opacity: 0; }
[data-sim="dock"] .t .badge { position: absolute; right: -4px; top: -3px; min-width: 17.6px; height: 17.6px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  font-size: 10.8px; font-weight: 600; background: #ff3b30; box-shadow: 0 1px 1.5px rgba(0,0,0,.3); transform: scale(0); opacity: 0; transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
[data-sim="dock"] .t .badge.on { transform: none; opacity: 1; }
[data-sim="dock"] .t .sheen { position: absolute; inset: 0; border-radius: 22%; pointer-events: none; opacity: 0; mix-blend-mode: plus-lighter; transition: opacity .2s; }
[data-sim="dock"] .t .halo { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: rgba(255,255,255,.45); filter: blur(14px); opacity: 0; transition: opacity .26s; pointer-events: none; }

/* pointer effects (DockHoverEffect) */
[data-sim="dock"] .cv[data-fx="lift"] .t.hov .fx { transform: translateY(-10px) scale(1.12); filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
[data-sim="dock"] .cv[data-fx="card3d"] .t .fx { transition: transform .12s ease-out; }
[data-sim="dock"] .cv[data-fx="card3d"] .t.hov .sheen { opacity: 1; }
[data-sim="dock"] .cv[data-fx="flip"] .t .fx { transition: transform .7s cubic-bezier(.3,1.3,.45,1); }
[data-sim="dock"] .cv[data-fx="bounce"] .t.hov .fx { transform: scale(1.1); }
[data-sim="dock"] .cv[data-fx="bounce"] .t .hop { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
[data-sim="dock"] .cv[data-fx="bounce"] .t .hop.up { transform: translateY(-14.7px); transition: transform .16s cubic-bezier(.2,.8,.4,1); }
[data-sim="dock"] .cv[data-fx="glow"] .t.hov .fx { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(140,191,255,.8)); }
[data-sim="dock"] .cv[data-fx="glow"] .t.hov .halo { opacity: 1; }
[data-sim="dock"] .t.target .fx { transform: translateY(-10px) scale(1.12) !important; }

/* launch: the icon hops (|sin(4.9 t)| × 0.42 s) and a ghost lifts out of it */
[data-sim="dock"] .t.launch .hop { animation: dk-launch .641s cubic-bezier(.33,0,.67,1) infinite; }
@keyframes dk-launch { 0%, 100% { transform: none; } 50% { transform: translateY(-20.6px); } }
[data-sim="dock"] .ghost { position: absolute; z-index: 12; pointer-events: none; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1); }
/* knock-on: an opened window grows from its icon */

/* separator */
[data-sim="dock"] .t.sep::after { content: ""; position: absolute; left: 6px; top: 6.9px; width: 1px; height: 35.3px; border-radius: 1px; background: rgba(255,255,255,.24); }

/* ---------- widgets (borderless, on the glass) ---------- */
[data-sim="dock"] .w { position: absolute; top: 0; height: 57px; border-radius: 12px; overflow: hidden; }
/* music, 3 wide */
[data-sim="dock"] .w.mus { cursor: default; }
[data-sim="dock"] .w.mus .bg { position: absolute; inset: 0; background: rgba(255,255,255,.06); }
[data-sim="dock"] .w.mus .bg i { position: absolute; inset: -20px; background: center / cover; filter: blur(14px) saturate(1.3); transition: background-image .3s; }
[data-sim="dock"] .w.mus .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
[data-sim="dock"] .w.mus::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 .6px rgba(255,255,255,.12); pointer-events: none; }
[data-sim="dock"] .w.mus .in { position: relative; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 5.7px; }
[data-sim="dock"] .w.mus .art { flex: none; width: 45.6px; height: 45.6px; border-radius: 8.2px; background: #333 center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
[data-sim="dock"] .w.mus.paused .art { transform: scale(.94); }
[data-sim="dock"] .w.mus .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.8px; }
[data-sim="dock"] .w.mus .top { display: flex; align-items: center; gap: 6px; }
[data-sim="dock"] .w.mus .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
[data-sim="dock"] .w.mus .ti { font-size: 11.4px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
[data-sim="dock"] .w.mus .ar { font-size: 10.8px; font-weight: 500; line-height: 1.2; color: rgba(255,255,255,.65); overflow: hidden; text-overflow: ellipsis; }
[data-sim="dock"] .w.mus .ctr { display: flex; flex: none; }
[data-sim="dock"] .w.mus .ctr button { width: 23.8px; height: 23.8px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
[data-sim="dock"] .w.mus .ctr img { height: 8.5px; }
[data-sim="dock"] .w.mus .ctr .pp img { height: 11px; }
[data-sim="dock"] .w.mus .pr { display: flex; align-items: center; gap: 5px; }
[data-sim="dock"] .w.mus .pr .ln { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
[data-sim="dock"] .w.mus .pr .ln i { display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,.9); }
[data-sim="dock"] .w.mus .pr span { font-size: 8px; font-weight: 500; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* water, 2 wide */
[data-sim="dock"] .w.wat { cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
[data-sim="dock"] .w.wat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-sim="dock"] .w.wat svg path { transition: d .9s cubic-bezier(.3,1.25,.5,1); }
[data-sim="dock"] .w.wat .shine { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 14%, transparent 30%, transparent 82%, rgba(255,255,255,.1) 94%, rgba(255,255,255,.03) 100%); }
[data-sim="dock"] .w.wat .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5.7px; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }
[data-sim="dock"] .w.wat .lab img { height: 17px; }
[data-sim="dock"] .w.wat .v { font: 600 13.7px/1.15 var(--num); font-variant-numeric: tabular-nums; }
[data-sim="dock"] .w.wat .s { font-size: 9.1px; font-weight: 500; opacity: .85; white-space: nowrap; }
[data-sim="dock"] .w.wat::after { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: .8px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-sim="dock"] .w.wat.done::after { background: rgba(115,230,166,.6); padding: 1px; }
[data-sim="dock"] .w.wat .cheer { position: absolute; inset: 0; pointer-events: none; }
[data-sim="dock"] .w.wat .cheer i { position: absolute; width: 9px; height: 9px; margin: -4.5px; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); background: #fff; animation: dk-star 1.6s linear infinite; }
[data-sim="dock"] .w.wat .cheer i:nth-child(even) { background: #ffe666; }
@keyframes dk-star { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
/* weather, 2 wide: the living sky with the temperature only */
[data-sim="dock"] .w.wx { cursor: pointer; background: #8a96a8 url('/assets/img/dock-sky.jpg') 0% 40% / 170% auto; animation: dk-drift 22s ease-in-out infinite alternate; }
@keyframes dk-drift { to { background-position: 100% 60%; } }
[data-sim="dock"] .w.wx b { position: absolute; left: 11px; top: 50%; transform: translateY(-52%); font: 600 22px/1 var(--num); text-shadow: 0 .5px 2.5px rgba(0,0,0,.3); }
/* market, 1 wide */
[data-sim="dock"] .w.mk { cursor: pointer; }
[data-sim="dock"] .w.mk .q { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform .25s ease-in-out, opacity .25s; }
[data-sim="dock"] .w.mk .q.out { transform: translateY(-100%); opacity: 0; }
[data-sim="dock"] .w.mk .q.in { transform: translateY(100%); opacity: 0; transition: none; }
[data-sim="dock"] .w.mk .tk { font-size: 9.7px; font-weight: 600; color: rgba(255,255,255,.55); line-height: 1.15; }
[data-sim="dock"] .w.mk .px { font: 600 16px/1.1 var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-sim="dock"] .w.mk .ch { font-size: 9.7px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* clock, 2 wide (Dijital) */
[data-sim="dock"] .w.clk { display: grid; place-items: center; font: 600 37.6px/1 var(--num); font-variant-numeric: tabular-nums; text-shadow: 0 .5px 1.5px rgba(0,0,0,.3); cursor: pointer; }
/* calendar, 1 wide */
[data-sim="dock"] .w.cal { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
[data-sim="dock"] .w.cal .d { font-size: 9.7px; font-weight: 700; color: #ff5c54; line-height: 1.1; }
[data-sim="dock"] .w.cal .n { font: 600 24px/1.05 var(--num); }
/* sticky note, 2 wide */
[data-sim="dock"] .w.nt { overflow: visible; border-radius: 0; cursor: pointer; }
[data-sim="dock"] .w.nt .p { position: absolute; inset: 2px; transform: rotate(-1.2deg); background: linear-gradient(180deg, #ffed8c, #fdd654); border-radius: 2px; box-shadow: 0 1.5px 2.5px rgba(0,0,0,.3);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 87% 100%, 0 100%); }
[data-sim="dock"] .w.nt .p::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12.5px; height: 12.5px; background: rgba(252,214,84,.75); filter: brightness(.86); clip-path: polygon(0 0, 100% 0, 0 100%); }
[data-sim="dock"] .w.nt span { position: absolute; left: 11px; top: 8px; right: 12px; transform: rotate(-1.2deg); transform-origin: 0 0; font: 11.4px/1.25 "Marker Felt", "Chalkboard SE", "Comic Neue", cursive; color: #4d360d; }

/* folder art: colour and letter (DockFolderArt) */
[data-sim="dock"] .fart { position: absolute; inset: 3.06px; border-radius: 9.95px; background: linear-gradient(180deg, rgba(61,133,250,.95), rgba(61,133,250,.7)); box-shadow: inset 0 0 0 .77px rgba(255,255,255,.3), 0 .77px 1.5px rgba(0,0,0,.25); display: grid; place-items: center; overflow: hidden; }
[data-sim="dock"] .fart img { position: absolute; left: 50%; top: 50%; height: 20px; transform: translate(-50%, -40%); opacity: .22; }
[data-sim="dock"] .fart b { position: relative; font: 700 20.7px/1 var(--num); }
/* group art: nine apps on a dark rounded square */
[data-sim="dock"] .gart { position: absolute; inset: 2.68px; border-radius: 10.3px; background: linear-gradient(180deg, rgba(255,255,255,.33), rgba(255,255,255,.15)); box-shadow: inset 0 0 0 .54px rgba(255,255,255,.38);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.53px; padding: 5.36px; }
[data-sim="dock"] .gart img { width: 100%; display: block; }

/* ---------- window previews (DockPreview) ---------- */
[data-sim="dock"] .pv { position: absolute; z-index: 20; display: flex; gap: 10px; padding: 10px; border-radius: 18px; bottom: 96px;
  background: rgba(40,42,48,.55); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.4); opacity: 0; transform: scale(calc(var(--sc, 1) * .9)); transform-origin: 50% 100%;
  transition: opacity .16s, transform .2s cubic-bezier(.3,1.3,.5,1); pointer-events: none; }
[data-sim="dock"] .pv.on { opacity: 1; transform: scale(var(--sc, 1)); pointer-events: auto; }
[data-sim="dock"] .pc { width: 210px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.3,.5,1); }
[data-sim="dock"] .pc:hover { transform: scale(1.03); }
[data-sim="dock"] .pc .sh { position: relative; height: 128px; border-radius: 10px; background: rgba(255,255,255,.06); padding: 4px; }
[data-sim="dock"] .pc .sh .mw { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; position: relative; }
[data-sim="dock"] .pc .tl { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
[data-sim="dock"] .pc:hover .tl { opacity: 1; }
[data-sim="dock"] .pc .tl i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; }
[data-sim="dock"] .pc .tl i img { height: 7px; filter: brightness(0); opacity: .6; }
[data-sim="dock"] .pc .nm { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; }
[data-sim="dock"] .pc .nm img { width: 14px; height: 14px; flex: none; }
/* Finder: folders it shows */
[data-sim="dock"] .pc .fg { position: absolute; inset: 0; border-radius: 10px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(4, 44px); gap: 4px; padding: 6px; justify-content: center; align-content: start; }
[data-sim="dock"] .pc:hover .fg { box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.35); }
[data-sim="dock"] .pc .fg div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
[data-sim="dock"] .pc .fg img { width: 30px; height: 30px; }
[data-sim="dock"] .pc .fg span { width: 44px; font-size: 8px; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* miniature windows (live) */
[data-sim="dock"] .mw .bar0 { height: 14px; display: flex; align-items: center; gap: 3px; padding: 0 6px; }
[data-sim="dock"] .mw .bar0 i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }
[data-sim="dock"] .mw.saf { background: #f5f5f7; }
[data-sim="dock"] .mw.saf .bar0 { background: #e6e6ea; }
[data-sim="dock"] .mw.saf .bar0 i { background: #c4c4c8; }
[data-sim="dock"] .mw.saf .url { flex: 1; height: 7px; margin: 0 22px; border-radius: 3px; background: #fff; }
[data-sim="dock"] .mw.saf .hero { height: 46px; margin: 6px 8px 5px; border-radius: 4px; background: url('/assets/img/wallpaper.jpg') center / cover; }
[data-sim="dock"] .mw.saf .hero.b { background: linear-gradient(135deg, #ffb35c, #ff6b8b 60%, #7b61ff); }
[data-sim="dock"] .mw.saf .ln { height: 4px; margin: 4px 8px; border-radius: 2px; background: #d4d4d8; }
[data-sim="dock"] .mw.saf .ln.s { width: 55%; } [data-sim="dock"] .mw.saf .ln.h { height: 6px; width: 70%; background: #3a3a3c; }
[data-sim="dock"] .mw.ter { background: #1c1c1e; font: 6.5px/1.45 ui-monospace, Menlo, monospace; color: #e6e6e6; }
[data-sim="dock"] .mw.ter .bar0 { background: #2c2c2e; }
[data-sim="dock"] .mw.ter pre { margin: 0; padding: 4px 7px; white-space: pre; overflow: hidden; height: calc(100% - 14px); display: flex; flex-direction: column; justify-content: flex-end; }
[data-sim="dock"] .mw.ter .g { color: #6be087; } [data-sim="dock"] .mw.ter .c { color: #6fb8ff; }
[data-sim="dock"] .mw.ter .cur { display: inline-block; width: 4px; height: 7px; background: #e6e6e6; vertical-align: -1px; animation: dk-blink 1s steps(1) infinite; }
@keyframes dk-blink { 50% { opacity: 0; } }
[data-sim="dock"] .mw.doc { background: #3a3a3c; }
[data-sim="dock"] .mw.doc .bar0 { background: #2c2c2e; }
[data-sim="dock"] .mw.doc .pg0 { width: 60px; height: 88px; margin: 6px auto; background: #fff; border-radius: 1px; padding: 7px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
[data-sim="dock"] .mw.doc .pg0 i { display: block; height: 2.5px; margin-bottom: 3px; background: #c8c8cc; border-radius: 1px; }
[data-sim="dock"] .mw.doc .pg0 i:first-child { height: 5px; width: 60%; background: #2f6fe8; margin-bottom: 6px; }
[data-sim="dock"] .mw.txt { background: #fff; }
[data-sim="dock"] .mw.txt .bar0 { background: #ececee; }
[data-sim="dock"] .mw.txt .body { padding: 6px 10px; font: 6.5px/1.5 "Helvetica Neue", sans-serif; color: #222; }
[data-sim="dock"] .mw.nts { background: #1e1e20; display: flex; }
[data-sim="dock"] .mw.nts .sb { width: 58px; background: #2a2a2d; padding: 16px 5px; }
[data-sim="dock"] .mw.nts .sb i { display: block; height: 14px; margin-bottom: 3px; border-radius: 3px; background: rgba(255,255,255,.07); }
[data-sim="dock"] .mw.nts .sb i:first-child { background: #b48a12; }
[data-sim="dock"] .mw.nts .body { flex: 1; padding: 16px 8px; font: 6.5px/1.5 var(--ui); color: #ddd; }
[data-sim="dock"] .mw.nts .body b { display: block; font-size: 9px; margin-bottom: 3px; color: #fff; }
[data-sim="dock"] .mw.mus0 { background: #1f1f22; display: flex; }
[data-sim="dock"] .mw.mus0 .sb { width: 46px; background: #29292c; }
[data-sim="dock"] .mw.mus0 .gr { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 18px 7px 0; align-content: start; }
[data-sim="dock"] .mw.mus0 .gr i { aspect-ratio: 1; border-radius: 3px; background: center / cover; }
[data-sim="dock"] .mw.mus0 .np { position: absolute; left: 46px; right: 0; top: 0; height: 13px; background: #2c2c2e; display: flex; align-items: center; justify-content: center; }
[data-sim="dock"] .mw.mus0 .np b { width: 50%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
[data-sim="dock"] .mw.mus0 .np b::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 30%); background: rgba(255,255,255,.7); }

/* ---------- popovers (group, stack) ---------- */
[data-sim="dock"] .pop { position: absolute; z-index: 22; bottom: 92px; border-radius: 12px; color: #fff;
  background: rgba(44,44,48,.82); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 18px 46px rgba(0,0,0,.45); opacity: 0; transform: translateY(6px) scale(.97); transform-origin: var(--ax, 50%) 100%;
  transition: opacity .18s, transform .22s cubic-bezier(.3,1.3,.5,1); pointer-events: none; }
[data-sim="dock"] .pop.on { opacity: 1; transform: none; pointer-events: auto; }
[data-sim="dock"] .pop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -9px; width: 18px; height: 9px; margin-left: -9px; background: rgba(44,44,48,.82); clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* group */
[data-sim="dock"] .pop.grp { width: 324px; padding: 14px 16px 12px; }
[data-sim="dock"] .pop.grp .gt { text-align: center; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
[data-sim="dock"] .pop.grp .gw { position: relative; width: 292px; height: 310px; overflow: hidden; }
[data-sim="dock"] .pop.grp .gp { position: absolute; left: 0; top: 0; width: 292px; display: grid; grid-template-columns: repeat(3, 92px); column-gap: 8px; row-gap: 12px;
  transition: transform .36s cubic-bezier(.3,1.05,.4,1), opacity .3s; }
[data-sim="dock"] .pop.grp .gc { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border-radius: 10px; }
[data-sim="dock"] .pop.grp .gc:hover { background: rgba(255,255,255,.06); }
[data-sim="dock"] .pop.grp .gc img { width: 54px; height: 54px; }
[data-sim="dock"] .pop.grp .gc span { width: 88px; height: 28px; font-size: 11px; line-height: 1.25; text-align: center; overflow: hidden; }
[data-sim="dock"] .pop.grp .gc i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0); }
[data-sim="dock"] .pop.grp .gf { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
[data-sim="dock"] .pop.grp .gf .ar { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
[data-sim="dock"] .pop.grp .gf .ar img { height: 9px; }
[data-sim="dock"] .pop.grp .gf .ar:disabled { border-color: rgba(255,255,255,.18); cursor: default; }
[data-sim="dock"] .pop.grp .gf .ar:disabled img { opacity: .3; }
[data-sim="dock"] .pop.grp .gf .ct { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
[data-sim="dock"] .pop.grp .gf .gear { height: 14px; opacity: .8; }
/* stack */
[data-sim="dock"] .pop.stk { width: 358px; padding: 14px; }
[data-sim="dock"] .pop.stk .sh0 { display: flex; align-items: center; margin-bottom: 10px; }
[data-sim="dock"] .pop.stk .sh0 b { flex: 1; font-size: 13px; font-weight: 600; }
[data-sim="dock"] .pop.stk .sh0 span { font-size: 13px; color: #4c9dff; cursor: pointer; }
[data-sim="dock"] .pop.stk .sg { display: grid; grid-template-columns: repeat(4, 78px); column-gap: 6px; row-gap: 10px; }
[data-sim="dock"] .pop.stk .sc { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; animation: dk-in .3s backwards; }
[data-sim="dock"] .pop.stk .sc img { width: 46px; height: 46px; }
[data-sim="dock"] .pop.stk .sc span { width: 76px; font-size: 10px; line-height: 1.25; text-align: center; max-height: 25px; overflow: hidden; word-break: break-word; }
@keyframes dk-in { from { opacity: 0; transform: translateY(6px); } }

/* drag of a file from the window */
[data-sim="dock"] .fly { position: absolute; z-index: 30; width: 40px; height: 40px; margin: -20px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
[data-sim="dock"] .fly img { width: 100%; height: 100%; }
[data-sim="dock"] .fly span { position: absolute; left: 34px; top: 30px; padding: 2px 7px; border-radius: 10px; background: #2f6fe8; font-size: 11px; font-weight: 600; white-space: nowrap; }
[data-sim="dock"] .toast { position: absolute; z-index: 25; padding: 5px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; background: rgba(0,0,0,.72); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.16);
  transform: translate(-50%, 0); opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.3,1.3,.5,1); pointer-events: none; white-space: nowrap; }
[data-sim="dock"] .toast.on { opacity: 1; transform: translate(-50%, -8px); }

/* scripted pointer of the self-running demo */
[data-sim="dock"] .ptr { position: absolute; z-index: 40; left: 0; top: 0; width: 22px; height: 30px; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
[data-sim="dock"] .ptr.on { opacity: 1; }
[data-sim="dock"] .ptr.press svg { transform: scale(.88); transform-origin: 0 0; }

[data-sim="dock"] .try { bottom: 96px; }
@media (prefers-reduced-motion: reduce) { [data-sim="dock"] .w.wx { animation: none; } }

/* phone crop (430 × 640): the window without its sidebar and date column; the hint wraps */
[data-sim="dock"] .win.narrow .side { display: none; }
[data-sim="dock"] .win.narrow .main { left: 0; }
[data-sim="dock"] .win.narrow .tb { padding-left: 78px; }
[data-sim="dock"] .win.narrow .hd, [data-sim="dock"] .win.narrow .r { grid-template-columns: minmax(0, 1fr) 70px; }
[data-sim="dock"] .win.narrow .hd span:nth-child(2), [data-sim="dock"] .win.narrow .r .d { display: none; }
[data-sim="dock"] .win.narrow .r { height: 34px; font-size: 14px; }
[data-sim="dock"] .cv[data-phone] .try { white-space: normal; width: calc(100% - 40px); text-align: center; line-height: 1.3; }
[data-sim="dock"] .cv[data-phone] .tag { font-size: 13px; top: 412px; }