/* ═══════════════════════════════════════════════════════════════════════
   A MacBook, built the way the phones were.

   One logical screen of 1120 × 700 pixels, scaled to whatever width the
   page gives it, inside an aluminium frame. The screen is the only thing
   that scrolls, and only inside its windows. Nothing is fetched from the
   web; every icon is a character or a shape.

   The third lab follows the first two in spirit: a solid you can see, a
   screen you work with the mouse exactly as you would with a trackpad, and
   a panel beside it that ticks only when the thing was really done.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --page: #0b0d10; --panel: #15181d; --line: rgba(255,255,255,.09);
    --ink: #e9edf2; --ink-dim: #98a1ad; --accent: #0a84ff; --good: #30d158;

    /* macOS dark */
    --mac-bg: #1e1e1e; --mac-win: #262626; --mac-side: rgba(40,40,42,.92); --mac-card: #2c2c2e;
    --mac-sep: rgba(255,255,255,.1); --mac-ink: #f2f2f2; --mac-dim: #a0a0a5;
    --mac-blue: #0a84ff; --mac-green: #30d158; --mac-red: #ff453a; --mac-orange: #ff9f0a;
    --menubar: rgba(30,30,32,.78);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--page); color: var(--ink); min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif; }
body { background: radial-gradient(1000px 680px at 16% -8%, #18212e 0%, transparent 60%), radial-gradient(900px 600px at 96% 108%, #1a1b26 0%, transparent 60%), var(--page); }

/* ── page furniture ───────────────────────────────────────────────── */
.lab { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.lab.wide { grid-template-columns: minmax(0, 1fr); }
.lab.wide .side { display: none; }
.lab-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lab-head h1 { margin: 0; font-size: 1.22rem; font-weight: 650; letter-spacing: -.01em; }
.lab-head .tag { font-size: .74rem; padding: 4px 10px; border-radius: 980px; background: rgba(10,132,255,.14); border: 1px solid rgba(10,132,255,.32); color: #6cb6ff; font-weight: 600; }
.lab-head .spacer { flex: 1; }
.minibtn { text-decoration: none; display: inline-block; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 980px; padding: 7px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.minibtn:hover { border-color: rgba(255,255,255,.22); }
.minibtn[aria-pressed="true"] { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.45); color: #8ec8ff; }
.minibtn.other { border-color: rgba(48,209,88,.35); color: #7ee2a0; }

/* ── the laptop ───────────────────────────────────────────────────── */
.stage { padding: 6px 0 10px; user-select: none; -webkit-user-select: none; }
.laptop { position: relative; width: 100%; }
.lid {
    position: relative; border-radius: 22px 22px 6px 6px; padding: 14px 14px 26px;
    background: linear-gradient(160deg, #3b3f46 0%, #262a30 40%, #1d2026 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.55);
}
.lid::after { content: ''; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #0a0c10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.base {
    height: 18px; margin: 0 -18px; border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, #4b5058 0%, #2b2f36 55%, #1a1d22 100%);
    box-shadow: 0 10px 28px rgba(0,0,0,.5);
    position: relative;
}
.base::before { content: ''; position: absolute; left: 50%; top: 0; width: 120px; height: 7px; margin-left: -60px; border-radius: 0 0 8px 8px; background: #16181c; }
.powerkey { position: absolute; right: 34px; top: 6px; width: 20px; height: 7px; border-radius: 3px; background: #0d0f12; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.powerkey:hover { background: #1a1d22; }
.powerkey.press { background: #000; }

/* the logical screen is fixed in size and scaled to fit */
.screenwrap { position: relative; width: 100%; aspect-ratio: 1120 / 700; overflow: hidden; border-radius: 10px; background: #000; }
.screen {
    position: absolute; top: 0; left: 0; width: 1120px; height: 700px;
    transform-origin: 0 0;
    background: var(--mac-bg); color: var(--mac-ink); font-size: 13px; overflow: hidden;
    direction: ltr; text-align: left; cursor: default;
}
.screen.off { background: #000; }
.screen.off > * { display: none; }

.wall { position: absolute; inset: 0; background: #1a1f4a url(wall-default.svg?v=2) center / cover no-repeat; }

/* ── boot, login ─────────────────────────────────────────────────── */
.boot { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; z-index: 90; }
.boot .mark { font-size: 72px; color: #fff; }
.boot .bar { width: 220px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.boot .bar i { display: block; height: 100%; background: #fff; width: 0; animation: fill 2.6s ease-out forwards; }
@keyframes fill { to { width: 100%; } }
.login { position: absolute; inset: 0; z-index: 85; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(10,8,20,.55); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.login .avatar { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #5ac8fa, #0a84ff); display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.login .name { font-size: 17px; font-weight: 600; margin-top: 4px; }
.login input { width: 220px; padding: 8px 12px; border-radius: 980px; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 13px; text-align: center; outline: none; }
.login input::placeholder { color: rgba(255,255,255,.6); }
.login .hint { font-size: 11px; color: rgba(255,255,255,.6); }
.login .shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.login .foot { position: absolute; bottom: 28px; display: flex; gap: 30px; font-size: 12px; color: rgba(255,255,255,.8); }
.login .foot button { background: none; border: 0; color: inherit; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.login .foot button span { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.login .clock { position: absolute; top: 60px; font-size: 64px; font-weight: 300; letter-spacing: -.03em; }
.login .date { position: absolute; top: 36px; font-size: 16px; font-weight: 500; }

/* ── menu bar ─────────────────────────────────────────────────────── */
.menubar { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 70; display: flex; align-items: center; padding: 0 10px;
    background: var(--menubar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 13px; }
.menubar .mitem { padding: 0 9px; height: 26px; display: flex; align-items: center; border-radius: 5px; cursor: default; white-space: nowrap; }
.menubar .mitem.apple { font-size: 16px; padding: 0 10px; }
.menubar .mitem.appname { font-weight: 700; }
.menubar .mitem:hover, .menubar .mitem.open { background: rgba(255,255,255,.18); }
.menubar .spacer { flex: 1; }
.menubar .status { display: flex; align-items: center; gap: 2px; }
.menubar .status .mitem { padding: 0 7px; font-size: 12.5px; }
.menubar .safeboot { color: #ff9f0a; font-weight: 600; font-size: 12px; }

.menu { position: absolute; z-index: 75; min-width: 220px; padding: 5px; border-radius: 10px;
    background: rgba(44,44,46,.95); backdrop-filter: blur(24px); box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.14); }
.menu .it { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 10px; border-radius: 6px; font-size: 13px; cursor: default; }
.menu .it:hover { background: var(--mac-blue); color: #fff; }
.menu .it.dis { color: var(--mac-dim); }
.menu .it.dis:hover { background: none; color: var(--mac-dim); }
.menu .it kbd { font-family: inherit; font-size: 11px; color: var(--mac-dim); }
.menu .it:hover kbd { color: #fff; }
.menu .sep { height: .5px; background: var(--mac-sep); margin: 5px 10px; }
.menu .it .sw { width: 30px; height: 18px; border-radius: 9px; background: #3a3a3c; position: relative; flex: none; }
.menu .it .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.menu .it .sw.on { background: var(--mac-blue); } .menu .it .sw.on::after { left: 14px; }
.menu.cc { width: 330px; padding: 10px; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-mod { background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px; font-size: 12px; }
.cc-mod .ttl { font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.cc-mod .r { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: default; }
.cc-mod .r .dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.cc-mod .r .dot.on { background: var(--mac-blue); }
.cc-mod .sl { height: 20px; border-radius: 10px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; cursor: pointer; margin-top: 6px; }
.cc-mod .sl i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; }
.cc-mod.span2 { grid-column: span 2; }

/* ── desktop & dock ──────────────────────────────────────────────── */
.desk-icons { position: absolute; top: 40px; right: 18px; display: flex; flex-direction: column; gap: 14px; z-index: 5; }
.dicon { width: 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; }
.dicon .ic { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.dicon .nm { font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 4px; text-align: center; }
.dicon:hover .nm { background: var(--mac-blue); }

.dock { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: flex-end; gap: 6px; padding: 6px 10px;
    background: rgba(60,60,64,.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 18px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.4); }
.dock .d { position: relative; width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 27px; cursor: default; transition: transform .14s ease; }
.dock .d:hover { transform: translateY(-8px) scale(1.18); }
.dock .d::after { content: ''; position: absolute; bottom: -5px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.75); opacity: 0; }
.dock .d.run::after { opacity: 1; }
.dock .d .tip { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); background: rgba(44,44,46,.95); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; display: none; }
.dock .d:hover .tip { display: block; }
.dock .sep { width: .5px; height: 44px; background: rgba(255,255,255,.3); margin: 0 4px 3px; }

/* ── windows ─────────────────────────────────────────────────────── */
.win { position: absolute; z-index: 20; border-radius: 11px; overflow: hidden; background: var(--mac-win);
    box-shadow: 0 22px 60px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.16); display: flex; flex-direction: column; min-width: 420px; min-height: 260px; }
.win.min { display: none; }
.win.max { left: 0 !important; top: 26px !important; width: 1120px !important; height: 674px !important; border-radius: 0; }
.titlebar { height: 38px; flex: none; display: flex; align-items: center; padding: 0 12px; gap: 8px; background: rgba(50,50,52,.9); cursor: default; position: relative; }
.win.focus .titlebar { background: rgba(58,58,60,.96); }
.lights { display: flex; gap: 8px; }
.lights i { width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: default; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); font: 700 11px/1 -apple-system, "Segoe UI", sans-serif; font-style: normal; color: rgba(0,0,0,.62); position: relative; }
.lights .c { background: #ff5f57; } .lights .m { background: #febc2e; } .lights .z { background: #28c840; }
.lights .c::before { content: '×'; font-size: 13px; } .lights .m::before { content: '–'; } .lights .z::before { content: '+'; }
.win:not(.focus) .lights i { opacity: .55; }
.lights i:hover::after { content: attr(data-tip); position: absolute; top: 20px; left: 0; background: #2b2b2b; color: #fff; font: 500 11px/1 -apple-system, "Segoe UI", sans-serif; padding: 4px 8px; border-radius: 5px; white-space: nowrap; z-index: 5; }
.ttl { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--mac-dim); pointer-events: none; }
.win.focus .ttl { color: var(--mac-ink); }
.tools { margin-left: auto; display: flex; gap: 6px; }
.tools button, .tb { border: 0; background: rgba(255,255,255,.08); color: var(--mac-ink); border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: default; font-family: inherit; }
.tools button:hover, .tb:hover { background: rgba(255,255,255,.16); }
.body { flex: 1; min-height: 0; display: flex; }
.sidebar { width: 210px; flex: none; background: var(--mac-side); border-right: .5px solid var(--mac-sep); overflow-y: auto; padding: 8px; }
.sidebar .sh { font-size: 11px; color: var(--mac-dim); font-weight: 600; padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: .03em; }
.sidebar .si { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 6px; font-size: 13px; cursor: default; white-space: nowrap; }
.sidebar .si:hover { background: rgba(255,255,255,.07); }
.sidebar .si.on { background: var(--mac-blue); color: #fff; }
.sidebar .si .i { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(255,255,255,.12); flex: none; }
.sidebar .si.on .i { background: rgba(255,255,255,.25); }
.sidebar .search { margin: 4px 2px 8px; padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,.08); font-size: 12px; color: var(--mac-dim); }
.sidebar .me { display: flex; align-items: center; gap: 10px; padding: 8px 6px 12px; }
.sidebar .me .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #5ac8fa, #0a84ff); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sidebar .me b { display: block; font-size: 13px; } .sidebar .me span { font-size: 11px; color: var(--mac-dim); }
.pane { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 22px 24px; }
.pane h1 { font-size: 20px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.pane h1 .bk { border: 0; background: rgba(255,255,255,.1); color: var(--mac-ink); border-radius: 6px; width: 26px; height: 24px; cursor: default; font-size: 14px; }
.pane h2 { font-size: 13px; font-weight: 600; color: var(--mac-dim); margin: 18px 0 6px; }
.grp { background: var(--mac-card); border-radius: 10px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); margin-bottom: 14px; }
.cell { display: flex; align-items: center; gap: 12px; padding: 9px 14px; min-height: 40px; position: relative; font-size: 13px; }
.cell + .cell::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--mac-sep); }
.cell .ci { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255,255,255,.1); flex: none; }
.cell .ct { flex: 1; min-width: 0; } .cell .ct b { display: block; font-weight: 500; } .cell .ct span { display: block; font-size: 11.5px; color: var(--mac-dim); margin-top: 1px; }
.cell .cr { color: var(--mac-dim); font-size: 12.5px; flex: none; max-width: 50%; text-align: right; }
.cell.link { cursor: default; } .cell.link:hover { background: rgba(255,255,255,.05); }
.cell .chev { color: var(--mac-dim); margin-left: 4px; }
.cell .sw { width: 38px; height: 22px; border-radius: 11px; background: #48484a; position: relative; flex: none; cursor: default; transition: background .15s; }
.cell .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cell .sw.on { background: var(--mac-blue); } .cell .sw.on::after { left: 18px; }
.cell select, .cell input[type=text], .cell input[type=password], .cell input:not([type]) { background: rgba(255,255,255,.08); border: .5px solid rgba(255,255,255,.18); color: var(--mac-ink); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; font-family: inherit; min-width: 160px; }
.cell input:focus, .cell select:focus { outline: 2px solid var(--mac-blue); outline-offset: -1px; }
.btn { border: 0; border-radius: 6px; padding: 5px 12px; font-size: 12.5px; font-family: inherit; background: rgba(255,255,255,.12); color: var(--mac-ink); cursor: default; }
.btn:hover { background: rgba(255,255,255,.2); }
.btn.blue { background: var(--mac-blue); color: #fff; } .btn.blue:hover { filter: brightness(1.1); }
.btn.red { background: var(--mac-red); color: #fff; }
.btn[disabled] { opacity: .4; }
.btns { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 0 4px; }
.note { font-size: 12px; color: var(--mac-dim); line-height: 1.5; margin: 6px 2px 14px; }
.note.warn { color: #ffb84d; } .note.bad { color: #ff7b72; } .note.good { color: #6ee89a; }
.about { display: flex; gap: 22px; align-items: center; padding: 10px 0 18px; }
.about .mac { font-size: 70px; }
.about b { font-size: 22px; display: block; } .about span { display: block; font-size: 12.5px; color: var(--mac-dim); margin-top: 2px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 12.5px; }
.kv dt { color: var(--mac-dim); text-align: right; } .kv dd { margin: 0; }
.radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; cursor: default; }
.radio i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--mac-dim); display: inline-block; } .radio.on i { border-color: var(--mac-blue); background: radial-gradient(circle, var(--mac-blue) 45%, transparent 50%); }
.prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin: 8px 0; } .prog i { display: block; height: 100%; background: var(--mac-blue); transition: width .3s; }

/* sheets & alerts */
.sheet { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.sheet .box { width: 400px; background: rgba(44,44,46,.98); border-radius: 12px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.14); text-align: center; }
.sheet .box .big { font-size: 40px; margin-bottom: 8px; }
.sheet .box h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.sheet .box p { margin: 0 0 14px; font-size: 12px; color: var(--mac-dim); line-height: 1.5; }
.sheet .box input { width: 100%; margin-bottom: 10px; padding: 6px 9px; border-radius: 6px; border: .5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-family: inherit; font-size: 13px; }
.sheet .box .btns { justify-content: center; }
.toast { position: absolute; top: 36px; right: 14px; z-index: 80; width: 300px; background: rgba(44,44,46,.96); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.14); display: flex; gap: 10px; align-items: flex-start; font-size: 12px; animation: toastIn .2s ease-out; }
.toast .ti { font-size: 20px; } .toast b { display: block; font-size: 12.5px; } .toast span { color: var(--mac-dim); }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* notification centre */
.nc { position: absolute; top: 30px; right: 10px; width: 330px; z-index: 72; display: flex; flex-direction: column; gap: 8px; }
.nc .n { background: rgba(44,44,46,.92); backdrop-filter: blur(20px); border-radius: 12px; padding: 10px 12px; font-size: 12px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); position: relative; }
.nc .n b { display: block; } .nc .n span { color: var(--mac-dim); }
.nc .n .x { position: absolute; top: 6px; right: 8px; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; cursor: default; }

/* spotlight */
.spot { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: 640px; z-index: 78; background: rgba(44,44,46,.96); backdrop-filter: blur(24px); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.16); overflow: hidden; }
.spot input { width: 100%; border: 0; background: none; color: #fff; font-size: 22px; padding: 14px 18px; outline: none; font-family: inherit; }
.spot .res { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 13px; cursor: default; }
.spot .res:hover, .spot .res.on { background: var(--mac-blue); }
.spot .res .i { font-size: 20px; width: 28px; text-align: center; }
.spot .res span { color: var(--mac-dim); font-size: 11.5px; margin-left: auto; }
.spot .res:hover span { color: #fff; }

/* finder */
.finder-grid { display: grid; grid-template-columns: repeat(auto-fill, 96px); gap: 14px; padding: 6px; }
.fi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 8px; cursor: default; text-align: center; }
.fi:hover { background: rgba(255,255,255,.07); } .fi.sel { background: rgba(10,132,255,.35); }
.fi .ic { font-size: 40px; } .fi .nm { font-size: 11.5px; word-break: break-word; }
.pathbar { font-size: 11.5px; color: var(--mac-dim); padding: 6px 10px; border-top: .5px solid var(--mac-sep); }
.droptarget { border: 2px dashed rgba(255,255,255,.25); border-radius: 12px; padding: 18px; text-align: center; color: var(--mac-dim); font-size: 12px; margin-top: 10px; }
.droptarget.over { border-color: var(--mac-blue); color: #fff; background: rgba(10,132,255,.1); }
.dmg { background: linear-gradient(160deg, #2b2f3a, #1b1e26); display: flex; align-items: center; justify-content: center; gap: 40px; padding: 30px; border-radius: 10px; }
.dmg .arrow { font-size: 40px; color: var(--mac-dim); }

/* terminal */
.term { flex: 1; background: #1a1a1a; color: #e8e8e8; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; padding: 8px 10px; overflow-y: auto; white-space: pre-wrap; line-height: 1.45; cursor: text; }
.term .in { color: #fff; } .term .dim { color: #8a8a8e; } .term .err { color: #ff7b72; } .term .ok { color: #6ee89a; }
.term input { background: none; border: 0; color: #fff; font: inherit; outline: none; width: 70%; padding: 0; }

/* safari */
.urlbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(50,50,52,.9); border-bottom: .5px solid var(--mac-sep); }
.urlbar input { flex: 1; background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 7px; padding: 6px 10px; font-size: 12.5px; font-family: inherit; outline: none; text-align: center; }
.page { padding: 20px 26px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.55; }
.page h1 { font-size: 22px; margin: 0 0 8px; }
.page a { color: var(--mac-blue); cursor: default; }

/* mail */
.mail-list { width: 300px; flex: none; border-right: .5px solid var(--mac-sep); overflow-y: auto; }
.mail-row { padding: 10px 14px; border-bottom: .5px solid var(--mac-sep); cursor: default; font-size: 12.5px; }
.mail-row:hover { background: rgba(255,255,255,.05); } .mail-row.on { background: var(--mac-blue); }
.mail-row b { display: flex; justify-content: space-between; } .mail-row b small { font-weight: 400; color: var(--mac-dim); }
.mail-row .s { display: block; margin-top: 2px; } .mail-row .p { display: block; color: var(--mac-dim); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row.on .p, .mail-row.on small { color: rgba(255,255,255,.8); }
.frozen { position: absolute; inset: 38px 0 0; background: rgba(0,0,0,.35); z-index: 5; cursor: wait; display: flex; align-items: center; justify-content: center; }
.frozen .beach { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#ff5f57, #febc2e, #28c840, #0a84ff, #bf5af2, #ff5f57); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* activity monitor / tables */
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th { text-align: left; color: var(--mac-dim); font-weight: 600; padding: 6px 8px; border-bottom: .5px solid var(--mac-sep); }
table.tbl td { padding: 6px 8px; border-bottom: .5px solid rgba(255,255,255,.05); }
table.tbl tr.sel td { background: rgba(10,132,255,.35); }
table.tbl tr.hot td:nth-child(2) { color: var(--mac-red); font-weight: 600; }

/* ── side panel ──────────────────────────────────────────────────── */
.side { display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.panel h2 { margin: 0 0 4px; font-size: .98rem; font-weight: 650; }
.panel .sub { margin: 0 0 14px; font-size: .78rem; color: var(--ink-dim); line-height: 1.6; }
.progress-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 10px 0 16px; }
.progress-line i { display: block; height: 100%; background: var(--good); width: 0; transition: width .4s ease; }
.task { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.task:first-of-type { border-top: 0; }
.task .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; margin-top: 1px; }
.task.done .mark { background: var(--good); border-color: var(--good); color: #06310f; }
.task .tx { flex: 1; min-width: 0; }
.task .tx b { display: block; font-size: .83rem; font-weight: 600; line-height: 1.4; }
.task.done .tx b { color: var(--ink-dim); text-decoration: line-through; }
.task .tx span { display: block; font-size: .75rem; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
.task .tx .path { display: inline-block; margin-top: 6px; font-size: .71rem; background: rgba(10,132,255,.12); border: 1px solid rgba(10,132,255,.26); color: #6cb6ff; padding: 3px 9px; border-radius: 7px; }
.sheetp table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.sheetp td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.sheetp td:first-child { color: var(--ink-dim); width: 46%; } .sheetp td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sheetp tr:first-child td { border-top: 0; }
.keys { font-size: .75rem; color: var(--ink-dim); line-height: 1.9; }
.keys kbd { background: #202631; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; font-size: .72rem; color: var(--ink); font-family: inherit; }
.done-banner { background: linear-gradient(135deg, rgba(48,209,88,.2), rgba(48,209,88,.06)); border: 1px solid rgba(48,209,88,.4); color: #7ee2a0; border-radius: 14px; padding: 14px 16px; font-size: .82rem; line-height: 1.6; }
html[dir="rtl"] .lab-head, html[dir="rtl"] .panel { text-align: right; }
html[dir="rtl"] .sheetp td:last-child { direction: ltr; text-align: right; }

/* embedded in the site */
html.embed { --page: transparent; --panel: #fff; --line: rgba(0,0,0,.09); --ink: #1d1d1f; --ink-dim: #6e6e73; }
html.embed body { background: transparent; }
html.embed .lab { padding: 10px 18px 22px; gap: 22px; }
html.embed .lab-head h1, html.embed .lab-head .tag, html.embed #android-btn, html.embed #ios-btn { display: none; }
html.embed .lab-head { justify-content: flex-end; }
html.embed .minibtn { background: #fff; border-color: rgba(0,0,0,.12); color: #1d1d1f; }
html.embed .minibtn[aria-pressed="true"] { background: rgba(0,113,227,.1); border-color: rgba(0,113,227,.4); color: #0071e3; }
html.embed .progress-line { background: rgba(0,0,0,.07); }
html.embed .task .mark { border-color: rgba(0,0,0,.18); } html.embed .task.done .mark { color: #fff; }
html.embed .task .tx .path { background: rgba(0,113,227,.08); border-color: rgba(0,113,227,.22); color: #0071e3; }
html.embed .keys kbd { background: #f5f5f7; border-color: rgba(0,0,0,.12); color: #1d1d1f; }
html.embed .done-banner { background: rgba(48,209,88,.12); border-color: rgba(48,209,88,.35); color: #1f7a3a; }
@media (min-width: 1081px) { html.embed .side { max-height: 760px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; } }
@media (max-width: 1080px) { .lab { grid-template-columns: minmax(0, 1fr); } }

/* a green power LED on the base: off with the machine, a slow blink while it runs */
.base .led { position: absolute; left: 28px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #1b1f24; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; }
.laptop:has(.screen:not(.off)) .base .led { background: #eaf6ff; box-shadow: 0 0 3px 0 rgba(234,246,255,.55), 0 0 8px 1px rgba(190,230,255,.28); animation: led-blink 2.2s ease-in-out infinite; }
@keyframes led-blink { 0%, 100% { opacity: .85; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .laptop:has(.screen:not(.off)) .base .led { animation: none; } }

/* ═══ full screen: the device and the exercises, nothing else ═══ */
html.fs, html.fs body { height: 100%; overflow: hidden; }
html.fs .lab { max-width: none; height: 100vh; box-sizing: border-box; padding: 8px 16px 10px; gap: 10px 18px; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
html.fs .lab-head { grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
html.fs .lab-head h1, html.fs .lab-head .tag, html.fs .lab-head .other, html.fs #wide-btn { display: none; }
html.fs .side { position: static; display: flex; min-height: 0; max-height: none; height: auto; align-self: stretch; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-right: 4px; }
html.fs .stage { touch-action: pan-y; }
html.fs .side .panel:not(:first-child) { display: none; }
html.fs .lab.wide { grid-template-columns: minmax(0, 1fr) 400px; } html.fs .lab.wide .side { display: flex; }
html.fs .stage { min-height: 0; height: 100%; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; }
html.fs #fs-btn { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.5); }
@media (max-width: 900px) { html.fs .lab { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } html.fs .side { max-height: 34vh; } }
html.fs .laptop { width: min(100%, calc((100vh - 120px) * 1.6)); margin: 0 auto; }

/* phones: no full-screen mode; the laptop keeps a legible size and the stage pans sideways */
@media (max-width: 900px), (pointer: coarse) { #fs-btn { display: none !important; } }
@media (max-width: 760px) { .stage { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 12px !important; } .laptop { width: 640px !important; min-width: 640px !important; max-width: none !important; } .lab-head { gap: 8px !important; } .lab-head .minibtn { padding: 8px 12px !important; font-size: .8rem !important; } .side { max-height: none !important; } }
#wide-btn { display: none !important; }

/* the Apple logo is drawn: U+F8FF only exists in Apple's fonts */
.apl { width: 1em; height: 1em; display: block; }
.menubar .mitem.apple .apl { width: 15px; height: 15px; margin-top: -1px; }

/* Terminal zoom: the text size follows --term-fs */
.term { font-size: var(--term-fs, 16px) !important; }
.term-zoom { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mac-dim); }
.term-zoom span { min-width: 34px; text-align: center; }
.tools .term-zoom button { padding: 2px 8px; }

/* commands inside Arabic task text read left to right, in order, even when they wrap */
.task .tx code { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

/* pop-up menus: dark rows and light text, as macOS draws them in dark mode */
#screen select { color-scheme: dark; }
#screen select option, #screen select optgroup { background-color: #2c2c2e; color: #f5f5f7; }
#screen select option:disabled { color: #8e8e93; }

/* drawn icons */
.xi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex: none; overflow: visible; }
.dock .d > .xi { width: 50px; height: 50px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.dicon .ic .xi { width: 58px; height: 58px; font-size: 58px; }
.fi .ic .xi { width: 58px; height: 58px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.spot .res .i .xi { width: 26px; height: 26px; }
.sidebar .si .i:has(> .xi) { background: none; }
.sidebar .si .i > .xi { width: 22px; height: 22px; }
.sidebar .si .i > .xi[class*="xi-g-"] { width: 17px; height: 17px; color: var(--mac-blue); }
.sidebar .si.on .i > .xi[class*="xi-g-"] { color: #fff; }
.cell .ci:has(> .xi) { background: none; }
.cell .ci > .xi { width: 26px; height: 26px; }
.cell .ci > .xi[class*="xi-g-"] { width: 18px; height: 18px; }
.menubar .mitem > .xi { width: 16px; height: 16px; }
.menubar .mitem .bat { display: inline-flex; align-items: center; gap: 5px; }
.menubar .mitem .bat-ic { width: 25px; height: 13px; vertical-align: middle; }
.cc-mod .r .dot > .xi { width: 14px; height: 14px; }
.toast .ti .xi { width: 32px; height: 32px; }
.sheet .box .big .xi { width: 56px; height: 56px; }
.nc .n b .xi { width: 16px; height: 16px; vertical-align: -3px; }
.login .avatar:has(> .xi) { background: none; }
.login .avatar > .xi { width: 100%; height: 100%; }
.login .foot button span > .xi { width: 15px; height: 15px; }
.tools button .xi { width: 14px; height: 14px; }
/* Control Centre section titles sit inside their module (the window-title rule made them absolute) */
.cc-mod .ttl { position: static; text-align: left; font-size: 12px; color: var(--mac-ink); pointer-events: auto; }
/* Spotlight: the icon stays at the left of its row (the label rule pushed it to the middle) */
.spot .res .i { margin-left: 0; color: inherit; display: inline-flex; align-items: center; justify-content: center; }

/* window edges and corners: the resize cursor wins over every element's own */
.screen.rz-ns, .screen.rz-ns * { cursor: ns-resize !important; }
.screen.rz-ew, .screen.rz-ew * { cursor: ew-resize !important; }
.screen.rz-nesw, .screen.rz-nesw * { cursor: nesw-resize !important; }
.screen.rz-nwse, .screen.rz-nwse * { cursor: nwse-resize !important; }
.term { overflow-wrap: anywhere; }

/* full screen: the lab sheet stays in the side column - scroll down past the exercises to reach it */
html.fs .side .panel.sheetp { display: block; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Sonoma, closer (2026-10-29): glass that lets the wallpaper through, a
   Dock that magnifies and bounces, windows with real shadows and lights
   that show their glyphs on hover, Control Centre modules, Notification
   Centre widgets, Spotlight sections, Launchpad and Mission Control.
   These rules override the ones above. Only transform and opacity move;
   blur stays on the small bars and panels; Reduce Motion stops it all.
   ═══════════════════════════════════════════════════════════════════════ */

/* menu bar: translucent over the wallpaper; only an open menu is highlighted */
.menubar { padding: 0 6px; background: rgba(16,18,40,.28); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); box-shadow: inset 0 -.5px 0 rgba(0,0,0,.2); color: #fff; }
.menubar .mitem { height: 22px; padding: 0 8px; margin: 0 1px; border-radius: 5px; }
.menubar .mitem:hover { background: none; }
.menubar .mitem.open { background: rgba(255,255,255,.24); }
.menubar .status { gap: 1px; }
.menubar .status .mitem { padding: 0 7px; }

/* menus: frosted, hairline edge, tight rows */
.menu { padding: 5px; border-radius: 10px; background: rgba(40,40,46,.8); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
    box-shadow: 0 0 0 .5px rgba(0,0,0,.75), inset 0 0 0 .5px rgba(255,255,255,.17), 0 12px 36px rgba(0,0,0,.45); }
.menu .it { padding: 3px 10px; min-height: 22px; border-radius: 5px; }
.menu .sep { height: 1px; transform: scaleY(.5); background: rgba(255,255,255,.16); margin: 5px 10px; }

/* Control Centre: modules on glass, round toggles, sliders with a knob and their icon */
.menu.cc { width: 324px; padding: 10px; border-radius: 16px; background: rgba(36,36,44,.72); }
.cc-grid { gap: 9px; }
.cc-mod { background: rgba(255,255,255,.1); border-radius: 12px; padding: 9px 10px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.14); }
.cc-mod .r { gap: 9px; padding: 3px 0; line-height: 1.25; }
.cc-mod .r b { font-weight: 600; font-size: 12.5px; }
.cc-mod .r small { color: rgba(255,255,255,.55); font-size: 11px; }
.cc-mod .r .dot { width: 28px; height: 28px; background: rgba(255,255,255,.17); color: #fff; }
.cc-mod .r .dot.on { background: var(--mac-blue); box-shadow: 0 1px 4px rgba(10,132,255,.45); }
.cc-mod .r .dot > .xi { width: 15px; height: 15px; }
.cc-mod .r:active .dot { filter: brightness(1.25); }
.cc-mod .ttl { font-size: 12.5px; margin-bottom: 5px; }
.cc-mod .ttl span { font-weight: 500; color: rgba(255,255,255,.6); }
.cc-mod .sl { height: 22px; border-radius: 11px; background: rgba(255,255,255,.15); margin-top: 3px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.cc-mod .sl i { min-width: 22px; max-width: 100%; border-radius: 11px; background: #fff; }
.cc-mod .sl i::after { content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.35); }
.cc-mod .sl b { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: rgba(40,40,46,.7); pointer-events: none; }
.cc-mod .sl b .xi { width: 13px; height: 13px; }

/* the Dock: glass behind (it widens as the icons magnify), dots under running apps */
.dock { bottom: 6px; gap: 0; padding: 5px 5px 8px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 20px; }
.dock::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--grow, 0px) * -.5); right: calc(var(--grow, 0px) * -.5); z-index: -1; border-radius: 20px;
    background: rgba(64,64,76,.34); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.24), 0 0 0 .5px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.32); transition: left .12s ease-out, right .12s ease-out; }
.dock .d { width: 52px; height: 52px; margin: 0 1.5px; transform-origin: 50% 100%; transition: transform .1s ease-out; will-change: transform; }
.dock .d:hover { transform: none; }
.dock .d > .xi { width: 52px; height: 52px; filter: drop-shadow(0 2px 2.5px rgba(0,0,0,.32)); }
.dock .d:active > .xi { filter: drop-shadow(0 2px 2.5px rgba(0,0,0,.32)) brightness(.62); }
.dock .d::after { bottom: -6px; left: 50%; margin-left: -2px; width: 4px; height: 4px; background: rgba(255,255,255,.82); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.dock .sep { width: 1px; height: 46px; margin: 0 7px 3px; align-self: center; background: rgba(255,255,255,.26); transition: transform .1s ease-out; }
.dock .d .tip { bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) scale(calc(1 / var(--s, 1))); transform-origin: 50% 100%; padding: 3px 10px 4px; border-radius: 7px;
    background: rgba(44,44,50,.92); box-shadow: 0 0 0 .5px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.35); font-size: 12.5px; font-weight: 500; }
.dock .d .tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(44,44,50,.92); }
/* a launch bounces the icon (the icon inside, so the magnification is left alone) */
.dock .d.bounce > .xi { animation: dock-bounce .55s cubic-bezier(.3,.7,.4,1) 2 both; animation-delay: var(--bd, 0ms); }
@keyframes dock-bounce { 0%, 100% { transform: translateY(0); } 38% { transform: translateY(-22px); } 72% { transform: translateY(0); } 86% { transform: translateY(-4px); } }
/* a minimised window: its picture, with its app's icon on the corner */
.dock .d.mini .thumb { position: absolute; left: 3px; right: 3px; top: 9px; bottom: 7px; border-radius: 4px; overflow: hidden; background: #262628;
    box-shadow: 0 0 0 .5px rgba(0,0,0,.7), inset 0 0 0 .5px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.4); }
.dock .d.mini .thumb::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: radial-gradient(circle at 4px 3.5px, #ff5f57 1.3px, transparent 1.6px), radial-gradient(circle at 8px 3.5px, #febc2e 1.3px, transparent 1.6px), radial-gradient(circle at 12px 3.5px, #28c840 1.3px, transparent 1.6px), #3a3a3c; }
.dock .d.mini .thumb i { position: absolute; left: 0; right: 0; top: 7px; bottom: 0; background: linear-gradient(90deg, #303033 0 32%, transparent 32%), repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,.22) 4px 5px, transparent 5px 8px) 90% 3px / 60% 100% no-repeat; }
.dock .d.mini .th-terminal { background: #141414; }
.dock .d.mini .th-terminal i { background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(110,232,154,.55) 3px 4px, transparent 4px 7px) 3px 2px / 70% 100% no-repeat; }
.dock .d.mini .th-safari i, .dock .d.mini .th-notes i { background: #f5f5f7 repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,.18) 5px 6px, transparent 6px 9px) 50% 4px / 76% 100% no-repeat; }
.dock .d.mini .th-calc i { background: radial-gradient(circle, #ff9f0a 1.4px, transparent 1.7px) 70% 0 / 6px 6px, radial-gradient(circle, #5a5a5e 1.4px, transparent 1.7px) 0 0 / 6px 6px, #1c1c1e; }
.dock .d.mini > .xi { position: absolute; right: -1px; bottom: 1px; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* windows: two-layer shadow (deeper on the window in front), a hairline edge over everything inside */
.win { border-radius: 10px; box-shadow: 0 0 0 .5px rgba(0,0,0,.8), 0 6px 16px rgba(0,0,0,.24), 0 16px 44px rgba(0,0,0,.3); }
.win.focus { box-shadow: 0 0 0 .5px rgba(0,0,0,.85), 0 10px 24px rgba(0,0,0,.34), 0 28px 80px rgba(0,0,0,.52); }
.win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 7; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.07); }
.win.max { border-radius: 0; }
.titlebar { box-shadow: inset 0 -.5px 0 rgba(0,0,0,.5); }
/* the three lights: glyphs only while the pointer is over them; grey on a window in the back */
.lights { gap: 8px; }
.lights i { width: 13px; height: 13px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3); }
.lights i::before { content: '' !important; width: 9px; height: 9px; background: center / 9px 9px no-repeat; opacity: 0; transition: opacity .08s; }
.lights .c::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.6 2.6l4.8 4.8M7.4 2.6L2.6 7.4' stroke='%234d0000' stroke-opacity='.8' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lights .m::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.1 5h5.8' stroke='%23985600' stroke-opacity='.9' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lights .z::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5V3.7l3.8 3.8zM7.5 2.5v3.8L3.7 2.5z' fill='%23006500' fill-opacity='.85'/%3E%3C/svg%3E"); }
.lights:hover i::before { opacity: 1; }
.win:not(.focus) .lights i { opacity: 1; }
.win:not(.focus) .lights:not(:hover) i { background: #505054; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35); }
.lights i:hover::after { animation: light-tip .15s .7s both; }
@keyframes light-tip { from { opacity: 0; } to { opacity: 1; } }
/* what leaves the screen is a copy: it never takes a click */
.fx-ghost, .fx-ghost * { pointer-events: none !important; }

/* Spotlight: one rounded field, results grouped under small headings */
.spot { left: 50%; margin-left: -340px; transform: none; width: 680px; top: 140px; border-radius: 14px; background: rgba(40,40,46,.8); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
    box-shadow: 0 0 0 .5px rgba(0,0,0,.7), inset 0 0 0 .5px rgba(255,255,255,.17), 0 24px 64px rgba(0,0,0,.5); }
.spot-f { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; }
.spot-f > .xi { width: 21px; height: 21px; color: rgba(255,255,255,.5); }
.spot input { padding: 0; height: 54px; font-size: 23px; font-weight: 300; }
.spot input::placeholder { color: rgba(255,255,255,.38); }
#spot-res:not(:empty) { border-top: .5px solid rgba(255,255,255,.14); padding: 4px 6px 6px; max-height: 380px; overflow-y: auto; }
.spot .sec { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.48); padding: 7px 10px 3px; }
.spot .res { padding: 5px 10px; border-radius: 6px; gap: 10px; }
.spot .res:hover { background: none; }
.spot .res.on { background: var(--mac-blue); }
.spot .res:hover span { color: var(--mac-dim); }
.spot .res.on span { color: rgba(255,255,255,.85); }
.spot .res .i .xi { width: 24px; height: 24px; }

/* Notification Centre: cards and widgets down the right edge, scrolling if they must */
.nc { top: 32px; right: 8px; bottom: 8px; width: 336px; gap: 10px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 1px 1px 6px; }
.nc::-webkit-scrollbar { display: none; }
.nc .n { flex: none; background: linear-gradient(#34343c, #2c2c34); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 16px; padding: 11px 30px 11px 54px; min-height: 58px; line-height: 1.35;
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.22); }
.nc .n b { font-size: 12.5px; font-weight: 600; margin-bottom: 1px; }
.nc .n b .xi { position: absolute; left: 12px; top: 13px; width: 32px; height: 32px; vertical-align: 0; }
.nc .n span { font-size: 12px; color: rgba(255,255,255,.72); }
.nc .n .x { top: -6px; left: -6px; right: auto; width: 20px; height: 20px; background: rgba(60,60,66,.96); box-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4); opacity: 0; transition: opacity .12s; }
.nc .n:hover .x { opacity: 1; }
.nc .n.clear { min-height: 0; padding: 0; background: none; box-shadow: none; text-align: right !important; }
.nc .n.clear .btn { border-radius: 980px; padding: 4px 12px; font-size: 11.5px; background: #3c3c44; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); }
.nc .n.none { min-height: 0; padding: 6px 0; background: none; box-shadow: none; text-align: center; }
.nc .n.none b { color: rgba(255,255,255,.7); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.wgs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wg { position: relative; height: 162px; border-radius: 20px; overflow: hidden; padding: 12px 14px; color: #fff; font-size: 12px; background: linear-gradient(#34343c, #282830); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.22); }
.wg.m { grid-column: span 2; }
.wg-clock { padding: 9px; background: #1e1e22; }
.wg-clock svg { width: 100%; height: 100%; display: block; }
.wg-bat { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; }
.wg-bat .ring svg { width: 100%; height: 100%; display: block; }
.wg-bat .ring circle { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 4.5; }
.wg-bat .ring circle.v { stroke-linecap: round; }
.wg-bat .ring.empty circle { stroke: rgba(255,255,255,.08); }
.wg-cal { display: flex; gap: 14px; }
.wg-cal .cl { width: 92px; flex: none; display: flex; flex-direction: column; }
.wg-cal small { font-size: 10.5px; font-weight: 700; color: #ff453a; letter-spacing: .02em; }
.wg-cal .cl b { font-size: 40px; font-weight: 300; line-height: 1.05; margin-top: 2px; }
.wg-cal .cl span { margin-top: auto; font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.3; }
.wg-cal .cr { flex: 1; }
.wg-cal .cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 2px; margin-top: 4px; text-align: center; font-size: 9.5px; font-weight: 600; }
.wg-cal .cg u { text-decoration: none; color: rgba(255,255,255,.45); font-size: 9px; }
.wg-cal .cg i { font-style: normal; height: 15px; line-height: 15px; border-radius: 50%; }
.wg-cal .cg i.on { background: #ff453a; color: #fff; width: 15px; justify-self: center; }
.wg-wx { background: linear-gradient(180deg, #2f7fd6 0%, #5aa6ec 100%); display: flex; flex-direction: column; justify-content: space-between; }
.wg-wx.night { background: linear-gradient(180deg, #0d1b3d 0%, #263c6e 100%); }
.wg-wx.off { background: linear-gradient(180deg, #3a3a42, #2a2a30); justify-content: flex-start; gap: 8px; }
.wg-wx .wx-top { display: flex; justify-content: space-between; }
.wg-wx b { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.wg-wx .loc { width: 10px; height: 10px; }
.wg-wx strong { display: block; font-size: 40px; font-weight: 300; line-height: 1.05; }
.wg-wx .wx-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; font-weight: 600; gap: 1px; }
.wg-wx .wx-r .wxi { width: 20px; height: 20px; margin-bottom: 2px; }
.wg-wx .wx-row { display: flex; justify-content: space-between; text-align: center; }
.wg-wx .wx-row div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.wg-wx .wx-row small { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.wg-wx .wx-row .wxi { width: 18px; height: 18px; }
.wg-wx .wx-row b { font-size: 12px; }
.wg-wx .wx-off { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 18px; }
.wg-wx .wx-off .xi { width: 18px; height: 18px; color: rgba(255,255,255,.6); }
.wg-wx.off small { color: rgba(255,255,255,.6); font-size: 11.5px; line-height: 1.4; }

/* Launchpad: every app over the blurred desktop (the Dock stays, the menu bar goes) */
.lp { position: absolute; inset: 0; z-index: 58; display: flex; flex-direction: column; align-items: center; padding-top: 44px;
    background: rgba(14,16,40,.4); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.lp-search { display: flex; align-items: center; gap: 6px; width: 230px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22); color: rgba(255,255,255,.65); }
.lp-search > .xi { width: 13px; height: 13px; }
.lp-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 13px; padding: 0; }
.lp-search input::placeholder { color: rgba(255,255,255,.55); }
.lp-grid { display: grid; grid-template-columns: repeat(7, 112px); gap: 26px 28px; margin-top: 48px; justify-content: center; align-content: start; }
.lp-app { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: default; }
.lp-app .ic { display: flex; }
.lp-app .ic .xi { width: 78px; height: 78px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.lp-app:active .ic .xi { filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)) brightness(.65); }
.lp-app .nm { font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-align: center; white-space: nowrap; }
.lp-none { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.7); font-size: 17px; margin-top: 70px; }
.lp-dots { position: absolute; bottom: 92px; display: flex; gap: 8px; }
.lp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.9); }
.screen.lp-on .menubar { opacity: 0; pointer-events: none; }

/* Mission Control: the windows step back into a grid; the one under the pointer is ringed in blue */
.screen.mc .menubar, .screen.mc .desk-icons { opacity: 0; pointer-events: none; }
.screen.mc .win > :not(.mc-hit) { pointer-events: none; }
.mc-hit { position: absolute; inset: 0; z-index: 9; }
.screen.mc .win:hover { box-shadow: 0 0 0 calc(3px / var(--mcs, 1)) var(--mac-blue), 0 20px 50px rgba(0,0,0,.5); }
.mc-lbl { position: absolute; z-index: 57; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 7px; background: rgba(30,30,36,.78); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.mc-lbl .xi { width: 18px; height: 18px; }
.win:hover + .mc-lbl { opacity: 1; }
.mc-spaces { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 57; display: flex; justify-content: center; align-items: center; pointer-events: none; background: linear-gradient(rgba(0,0,0,.35), transparent); }
.mc-spaces span { padding: 3px 14px; border-radius: 7px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); font-size: 12px; font-weight: 600; color: #fff; }

/* login: the time large at the top, the user at the bottom, as Sonoma draws it */
.login { justify-content: flex-end; padding-bottom: 132px; gap: 10px; }
.login .date { top: 40px; font-size: 18px; font-weight: 600; color: rgba(255,255,255,.88); }
.login .clock { top: 60px; font-size: 92px; font-weight: 600; letter-spacing: -.02em; color: rgba(255,255,255,.9); line-height: 1; }
.login .avatar { width: 66px; height: 66px; }
.login .name { font-size: 15px; margin-top: 0; }
.login input { width: 196px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); }

/* a notification banner sits under an open menu, as on a Mac (it used to cover the clock menu) */
.toast { z-index: 74; border-radius: 16px; background: rgba(44,44,52,.96); box-shadow: 0 0 0 .5px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.15), 0 10px 30px rgba(0,0,0,.45); }

/* System Settings: the account row at the top opens the Apple ID page, and is selected while it shows */
.sidebar .me[data-act] { border-radius: 8px; margin: 0 0 4px; padding: 6px; cursor: default; }
.sidebar .me[data-act]:hover { background: rgba(255,255,255,.07); }
.sidebar .me.on { background: var(--mac-blue); }
.sidebar .me.on span { color: rgba(255,255,255,.85); }
/* System Information: keys right-aligned against their values */
.win .kv dt { white-space: nowrap; }

/* Reduce Motion: nothing bounces, magnifies or slides */
@media (prefers-reduced-motion: reduce) {
    .dock .d, .dock .sep, .dock::before { transition: none; }
    .dock .d.bounce > .xi { animation: none; }
}