/* ── Experience: a MacBook ──
   Homepage icon: a 3D CSS laptop whose lid swings open on hover (or when it
   scrolls into view on touch screens). Modal: step 1 is the laptop's desktop
   with a bouncing browser in the dock; clicking it launches the existing
   mini-browser window (styles.css, .mini-browser) out of the dock icon.
   Behaviour lives in macbook.js. */

/* ── Homepage icon ── */
.icon-macbook img{opacity:0}
.mbk{--lid:0deg;position:absolute;inset:0;pointer-events:none;perspective:900px;perspective-origin:50% 10%;transition:transform .4s var(--spring),filter .3s ease}
.icon-macbook.hover .mbk{transform:translateY(-7px) scale(1.1);filter:drop-shadow(0 18px 24px rgba(17,17,17,.14))}
.icon-macbook.active .mbk{transform:translateY(-4px) scale(1.04)}
.icon-macbook.hover .mbk,.icon-macbook.active .mbk,.icon-macbook:focus-visible .mbk,.mbk.is-open{--lid:104deg}
.icon-macbook:focus-visible .mbk{outline:2px solid var(--accent);outline-offset:-14px;border-radius:18px}
.icon-macbook.is-lifted .mbk{visibility:hidden}

.mbk-rig{position:absolute;left:55%;top:64%;width:57%;aspect-ratio:1.5;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-26deg)}
.mbk-rig>span{position:absolute;display:block}
.mbk-shadow{inset:-10% -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(58,36,23,.26),rgba(58,36,23,.1) 60%,transparent);transform:translateZ(-7px)}
.mbk-deck{inset:0;border-radius:7%/10.5%;background:linear-gradient(160deg,#eef0f2 0%,#d6dadf 55%,#c3c8ce 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.mbk-keys{position:absolute;left:10%;right:10%;top:9%;height:47%;border-radius:4px;background-color:#4a4d53;
  background-image:linear-gradient(90deg,transparent 84%,#2c2e32 84%),linear-gradient(0deg,transparent 78%,#2c2e32 78%);
  background-size:8.333% 16.666%;box-shadow:0 0 0 2px #2c2e32}
.mbk-pad{position:absolute;left:31%;width:38%;top:63%;height:30%;border-radius:5px;background:linear-gradient(160deg,#dfe2e6,#cbd0d5);box-shadow:inset 0 0 0 1px rgba(90,96,104,.18)}
.mbk-front{left:2%;right:2%;bottom:0;height:5px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#aab0b7,#8f959d);transform-origin:50% 100%;transform:rotateX(90deg)}
.mbk-side{top:3%;bottom:3%;right:0;width:5px;border-radius:0 5px 5px 0;background:#a3a9b0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.mbk-rig>.mbk-lid{inset:0;transform-style:preserve-3d;transform-origin:50% 0;transform:translateZ(2px) rotateX(var(--lid));transition:transform .75s cubic-bezier(.3,1.3,.5,1)}
.mbk-lid>span{position:absolute;inset:0;display:block;border-radius:7%/10.5%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mbk-lid-out{background:linear-gradient(135deg,#f3f4f6 0%,#dadee2 50%,#c5cad0 100%);transform:translateZ(1.5px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
/* Little stickers on the lid (no logo). */
.mbk-lid-out::before{content:'';position:absolute;left:58%;top:30%;width:17%;aspect-ratio:1;border-radius:50%;background:#f2a7b4;box-shadow:inset 0 0 0 3px #fff}
.mbk-lid-out::after{content:'';position:absolute;left:28%;top:52%;width:22%;height:14%;border-radius:4px;background:#8a5a3b;transform:rotate(-8deg);box-shadow:inset 0 0 0 2px #fff8ec}
.mbk-lid-in{background:#16161a;transform:rotateX(180deg) translateZ(1.5px);box-shadow:inset 0 0 0 1.5px #c9ced4}
.mbk-scr{position:absolute;inset:6% 4.5% 6%;border-radius:3px;overflow:hidden;
  background:radial-gradient(90% 80% at 12% 100%,#c98a5e 0,transparent 60%),radial-gradient(80% 70% at 88% 8%,#f6dcc2 0,transparent 62%),linear-gradient(165deg,#f3e3d3,#dcae88);
  filter:brightness(.35);transition:filter .5s ease .15s}
.mbk.is-open .mbk-scr,.icon-macbook.hover .mbk-scr,.icon-macbook.active .mbk-scr,.icon-macbook:focus-visible .mbk-scr{filter:brightness(1.05)}
.mbk-scr::before{content:'';position:absolute;left:0;right:0;top:0;height:7%;background:rgba(255,255,255,.45)}
.mbk-scr::after{content:'';position:absolute;left:43%;width:14%;top:0;height:7%;border-radius:0 0 3px 3px;background:#16161a}
.mbk-dock{position:absolute;left:24%;right:24%;bottom:5%;height:14%;border-radius:3px;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:space-evenly}
.mbk-dock i{width:12%;aspect-ratio:1;border-radius:25%;background:#8fb3d9}
.mbk-dock i:nth-child(2){background:#f4d35e}
.mbk-dock i:nth-child(3){background:#ef6f6c}
.mbk-dock i:nth-child(4){background:#fff;box-shadow:inset 0 0 0 1.5px #3d7bd9}
.mbk-dock i:nth-child(5){background:#b9bec5}
.mbk.is-open .mbk-dock i:nth-child(4),.icon-macbook.hover .mbk-dock i:nth-child(4){animation:mbkHop 1.4s ease-in-out .6s infinite}
@keyframes mbkHop{0%,40%,100%{transform:translateY(0)}15%{transform:translateY(-70%)}}

/* Lifted copy above the backdrop while the modal is open. */
.ghost-mbk{display:block}
.ghost-mbk .mbk{--lid:104deg}
.ghost-mbk .mbk-scr{filter:brightness(1.05)}

/* ── Modal, step 1: the desktop ── */
.popup[data-theme="experience"][data-step="desktop"]{--close-color:#d9d4cf}
.popup[data-theme="experience"][data-step="desktop"] .popup-close{top:14px;right:16px;width:22px;height:22px;font-size:18px;color:#3a2417;background:rgba(255,255,255,.55)}
.popup[data-theme="experience"][data-step="desktop"] .popup-close:hover{background:#fff}

.mac{position:relative;width:100%;height:440px;max-height:100%;background:#151518;padding:9px;font-family:Inter,system-ui,sans-serif}
.mac-desk{position:relative;height:100%;border-radius:14px;overflow:hidden;color:#2a1a10;
  background:
    radial-gradient(70% 60% at 8% 100%,rgba(138,90,59,.85) 0,transparent 70%),
    radial-gradient(60% 55% at 100% 85%,rgba(201,138,94,.75) 0,transparent 70%),
    radial-gradient(70% 70% at 85% 0%,#fbe9d6 0,transparent 65%),
    radial-gradient(50% 45% at 30% 30%,rgba(242,167,180,.45) 0,transparent 70%),
    linear-gradient(170deg,#f6e8da 0%,#e8c3a2 60%,#c98f66 100%)}
.mac-desk[hidden]{display:none}
.mac-desk::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-radial-gradient(circle at 20% 120%,transparent 0 38px,rgba(255,255,255,.18) 39px 40px)}

.mac-menubar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 48px 0 14px;background:rgba(255,248,240,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.72rem;animation:macDrop .45s ease .15s both}
.mac-mb-left,.mac-mb-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.mac-mb-left b{font-weight:700}
.mac-mb-right svg{display:block}
.mac-clock{font-variant-numeric:tabular-nums}
.mac-notch{position:absolute;z-index:3;top:0;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:0 0 10px 10px;background:#151518}
.mac-notch::after{content:'';position:absolute;left:50%;top:7px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#262a33;box-shadow:inset 0 0 0 1.5px #1c1f26}
@keyframes macDrop{from{transform:translateY(-100%)}}

.mac-files{position:absolute;top:40px;right:16px;display:flex;flex-direction:column;gap:6px;animation:mbIn .5s ease .35s both}
.mac-file{display:flex;flex-direction:column;align-items:center;gap:3px;width:92px;padding:6px 2px 4px;border:0;border-radius:8px;background:transparent;font:inherit;color:#2a1a10;text-decoration:none;cursor:pointer}
.mac-file svg{width:46px;height:40px;filter:drop-shadow(0 2px 3px rgba(58,36,23,.18))}
.mac-file span{max-width:100%;padding:1px 6px;border-radius:4px;font-size:.68rem;font-weight:600;text-shadow:0 1px 1px rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mac-file:hover,.mac-file:focus-visible{background:rgba(255,255,255,.28);outline:none}
.mac-file:focus-visible span,.mac-file.is-picked span{background:#3d7bd9;color:#fff;text-shadow:none}
.mac-file.is-wiggling svg{animation:macWiggle .45s ease}
@keyframes macWiggle{25%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}

/* Dock */
.mac-dock-wrap{position:absolute;left:0;right:0;bottom:8px;z-index:5;display:flex;justify-content:center;pointer-events:none}
.mac-dock{display:flex;align-items:flex-end;gap:7px;padding:6px 8px;border-radius:18px;background:rgba(255,250,244,.42);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 30px rgba(58,36,23,.18);pointer-events:auto;animation:macDock .55s var(--spring) .25s both}
@keyframes macDock{from{transform:translateY(130%)}}
.dock-app{position:relative;display:block;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;transform-origin:50% 100%;transition:transform .28s var(--spring)}
.dock-app:hover{transform:scale(1.24) translateY(-3px)}
.dock-app:has(+ .dock-app:hover),.dock-app:hover + .dock-app{transform:scale(1.1)}
.dock-app:focus-visible{outline:2px solid #3d7bd9;outline-offset:3px;border-radius:12px}
.dock-ico{display:block;width:100%;height:100%}
.dock-ico svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(40,25,15,.22))}
.dock-app[data-label]::before{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);padding:3px 9px;border-radius:6px;background:rgba(40,30,24,.8);color:#fff;font-size:.62rem;white-space:nowrap;transform:translateX(-50%) scale(calc(1/1.24));transform-origin:50% 100%;opacity:0;pointer-events:none;transition:opacity .15s ease}
.dock-app[data-label]:hover::before{opacity:1}
.dock-app.is-hopping .dock-ico{animation:dockHop .5s ease}
@keyframes dockHop{40%{transform:translateY(-35%)}}
.dock-sep{align-self:stretch;width:1px;margin:4px 1px;background:rgba(58,36,23,.2)}
.dock-dot{position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#3a2417;opacity:.7}
.dock-badge{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font-size:.64rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.dock-browser.is-running .dock-badge{transform:scale(0)}

/* The attention bounce, like a macOS app asking to be opened. */
.dock-browser.is-bouncing .dock-ico,.dock-browser.is-bouncing .dock-badge{animation:dockBounce 1.5s .9s infinite}
.dock-browser.is-nudged .dock-ico,.dock-browser.is-nudged .dock-badge{animation-duration:.75s}
@keyframes dockBounce{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}
  20%{transform:translateY(-62%);animation-timing-function:cubic-bezier(.55,0,.75,.4)}
  40%{transform:translateY(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}
  50%{transform:translateY(-16%);animation-timing-function:cubic-bezier(.55,0,.75,.4)}
  60%,100%{transform:translateY(0)}
}

/* ── Modal, step 2: the browser window launches out of the dock ── */
.mac-win{position:absolute;inset:0;z-index:6;display:flex;background:#fff}
.mac-win .mini-browser{height:100%}
.mac-win.is-launching{animation:macLaunch .6s cubic-bezier(.2,.85,.25,1) both}
.mac-win.is-quitting{animation:macQuit .38s cubic-bezier(.55,0,.8,.3) both}
@keyframes macLaunch{from{transform:scale(.06);opacity:.2;border-radius:40px}40%{opacity:1}to{transform:none;opacity:1}}
@keyframes macQuit{to{transform:scale(.06);opacity:0;border-radius:40px}}
.mac-win .mb-dots i{position:relative}
.mac-win .mb-dots i:first-child{cursor:pointer}
.mac-win .mb-dots i::after{content:'';position:absolute;inset:3px;opacity:0;background:linear-gradient(45deg,transparent 42%,rgba(70,10,5,.7) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,rgba(70,10,5,.7) 42% 58%,transparent 58%)}
.mac-win .mb-dots:hover i:first-child::after{opacity:1}
.mac-win .mb-dots i:focus-visible{outline:2px solid #3d7bd9;outline-offset:2px}

/* ── Desktop app windows: Notes + Bin ── */
.mac-win.mac-app{z-index:4;top:36px;bottom:84px;left:max(14px,calc(50% - 240px));right:max(14px,calc(50% - 240px));flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(40,25,15,.35),0 0 0 1px rgba(58,36,23,.12)}
.app-bar{position:relative;flex:none;display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;background:#f3eee9;border-bottom:1px solid rgba(58,36,23,.1)}
.app-title{position:absolute;left:50%;transform:translateX(-50%);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;font-weight:600;color:#5a4a3e;pointer-events:none}
.app-back{width:24px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;font-size:1.3rem;line-height:1;color:#5a4a3e;cursor:pointer}
.app-back:hover{background:rgba(58,36,23,.08)}
.app-back[hidden]{display:none}
.app-body{flex:1;min-height:0;display:flex}
.mac-app--notes .app-bar{background:#fbf6e6}

/* Notes */
.notes{display:grid;grid-template-columns:150px 1fr;width:100%;min-height:0}
.notes-side{padding:10px 8px;background:#f7f2e2;border-right:1px solid rgba(58,36,23,.08);overflow:hidden}
.notes-side-h{display:block;padding:2px 8px 6px;font-size:.64rem;font-weight:700;color:#8a7a6d}
.notes-item{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:7px;background:#f6d768}
.notes-item b{font-size:.74rem;color:#2a1a10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-item span{font-size:.64rem;color:#5a4a3e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-item em{font-style:normal;font-weight:600;margin-right:3px}
.notes-page{overflow-y:auto;padding:14px 22px 22px;color:#2a1a10;font-size:.8rem;line-height:1.5;overscroll-behavior:contain}
.popup-content .notes-page p{margin:0 0 8px;color:#2a1a10;line-height:1.5}
.popup-content .notes-page .notes-stamp{text-align:center;font-size:.64rem;color:#9a8b7f;margin-bottom:10px}
.notes-page h4{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.notes-page h5{margin:14px 0 4px;font-size:.84rem;font-weight:700}
.popup-content .notes-page .notes-intro{color:#5a4a3e}
.notes-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.notes-check label{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.notes-check input{appearance:none;-webkit-appearance:none;flex:none;width:15px;height:15px;margin:1px 0 0;border:1.5px solid #b9ada2;border-radius:50%;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.notes-check input:checked{border-color:#e0a42a;background:#e0a42a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.notes-check input:focus-visible{outline:2px solid #3d7bd9;outline-offset:2px}
.notes-check input:checked + span{color:#9a8b7f;text-decoration:line-through}
.notes-steps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.popup-content .notes-page .notes-tip{margin-top:14px;padding:8px 10px;border-radius:8px;background:#fbf3d5;color:#5a4a3e;font-size:.74rem}

/* Mail: compose a message to Ting */
.mail{display:flex;flex-direction:column;width:100%;font-size:.78rem;color:#2a1a10}
.mail-field{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 16px;border-bottom:1px solid rgba(58,36,23,.1)}
.mail-field>span:first-child{flex:none;width:52px;color:#8a7a6d}
.mail-to{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(61,123,217,.12);color:#2f63b3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-field input{flex:1;min-width:0;height:32px;border:0;background:transparent;font:inherit;color:inherit;outline:none}
.mail textarea{flex:1;min-height:0;padding:12px 16px;border:0;resize:none;font:inherit;line-height:1.55;color:inherit;outline:none}
.mail input::placeholder,.mail textarea::placeholder{color:#b3a79d}
.mail-actions{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid rgba(58,36,23,.08);background:#faf7f4}
.mail-hint{flex:1;color:#8a5a3b;font-size:.7rem}
.mail-copy{color:#8a7a6d;font-size:.66rem;text-decoration:none}
.mail-copy:hover{text-decoration:underline}
.mail-send{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:0;border-radius:999px;background:#3d7bd9;color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:transform .3s var(--spring),background .2s ease}
.mail-send:hover{background:#2f6ac4;transform:scale(1.05)}
.mail-send:focus-visible{outline:2px solid #3d7bd9;outline-offset:2px}
.mail.is-sent .mail-send span{display:inline-block;animation:mailFly .6s ease both}
@keyframes mailFly{to{transform:translate(18px,-14px);opacity:0}}
.mail-field:focus-within{background:rgba(61,123,217,.04)}

/* Bin */
.bin{display:flex;flex-direction:column;width:100%}
.bin-list{flex:1;display:flex;align-items:flex-start;padding:18px}
.bin-file{display:flex;flex-direction:column;align-items:center;gap:6px;width:112px;padding:8px 4px;border:0;border-radius:10px;background:transparent;font:inherit;cursor:pointer}
.bin-file:hover,.bin-file:focus-visible{background:rgba(61,123,217,.1);outline:none}
.bin-thumb{position:relative;display:grid;place-items:center;width:84px;height:58px;border-radius:6px;background:linear-gradient(135deg,#2b2b33,#111);box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 0 0 2px #fff}
.bin-play{width:0;height:0;border-left:14px solid rgba(255,255,255,.85);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.bin-name{padding:1px 6px;border-radius:4px;font-size:.7rem;font-weight:600;color:#2a1a10}
.bin-file:focus-visible .bin-name{background:#3d7bd9;color:#fff}
.bin-foot{flex:none;padding:6px 12px;border-top:1px solid rgba(58,36,23,.08);background:#faf7f4;font-size:.64rem;color:#8a7a6d;text-align:center}

/* The "video": a potato, spinning, for no reason. */
.vid{position:relative;display:flex;flex-direction:column;width:100%;background:#111}
.vid-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 30%,#3a1f5c,#120a1f 70%)}
.vid-ball{position:absolute;left:50%;top:-14px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:repeating-conic-gradient(#ddd 0 25%,#8a8fa0 0 50%) 0 0/8px 8px;box-shadow:0 0 18px rgba(255,255,255,.6);animation:vidSpinBall 2s linear infinite}
.vid-rays{position:absolute;left:50%;top:0;width:260%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(rgba(255,120,200,.14) 0 8deg,transparent 8deg 22deg,rgba(120,220,255,.12) 22deg 30deg,transparent 30deg 45deg);animation:vidSpin 6s linear infinite,vidHue 3s linear infinite}
.vid-potato{position:absolute;left:50%;bottom:18%;width:34%;max-width:140px;translate:-50% 0;animation:vidBop .5s ease-in-out infinite alternate,vidTwirl 3s cubic-bezier(.6,0,.4,1) infinite}
.vid-pupil{animation:vidLook .9s steps(2) infinite}
.vid-floor{position:absolute;left:0;right:0;bottom:0;height:18%;background:repeating-linear-gradient(90deg,#ff5fa2 0 25%,#5fd4ff 0 50%,#ffd35f 0 75%,#8b5fff 0 100%);background-size:80px 100%;opacity:.55;animation:vidFloor .5s steps(2) infinite,vidHue 3s linear infinite}
.popup-content .vid-sub{position:absolute;z-index:1;left:0;right:0;bottom:5%;margin:0;padding:0 10px;text-align:center;font-size:.8rem;font-weight:600;color:#fff;text-shadow:0 1px 3px #000;line-height:1.3}
.vid-controls{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#1b1b1f;color:#ddd;font-size:.66rem}
.vid-toggle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer}
.vid-toggle span{width:8px;height:10px;border-left:3px solid #fff;border-right:3px solid #fff}
.vid.is-paused .vid-toggle span{width:0;height:0;border:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.vid-toggle:focus-visible{outline:2px solid #3d7bd9;outline-offset:2px}
.vid-bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.vid-bar i{display:block;height:100%;background:#fff;transform-origin:0 50%;animation:vidProgress 9s linear infinite}
.vid-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.vid.is-paused .vid-stage,.vid.is-paused .vid-stage *,.vid.is-paused .vid-bar i{animation-play-state:paused}
@keyframes vidHue{to{filter:hue-rotate(360deg)}}
@keyframes vidSpin{to{rotate:360deg}}
@keyframes vidSpinBall{to{background-position:16px 0}}
@keyframes vidBop{from{translate:-50% 0}to{translate:-50% -14px}}
@keyframes vidTwirl{0%,20%{rotate:0deg;scale:1}50%{rotate:360deg;scale:1.15}70%,100%{rotate:720deg;scale:1}}
@keyframes vidLook{to{transform:translateX(-3px)}}
@keyframes vidFloor{to{background-position:40px 0}}
@keyframes vidProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:600px){
  .mac{height:520px;padding:7px}
  .mac-desk{border-radius:12px}
  .mac-menubar{padding:0 40px 0 10px;font-size:.66rem}
  .mac-mb-hide,.mac-date{display:none}
  .mac-notch{width:64px;margin-left:-32px}
  .mac-files{top:40px;right:6px}
  .mac-dock{gap:5px;padding:5px 6px}
  .dock-app{width:36px;height:36px}
  .dock-opt{display:none}
  .mac-win.mac-app{bottom:74px;left:8px;right:8px}
  .notes{grid-template-columns:1fr}
  .notes-side{display:none}
  .mail-copy{display:none}
  .notes-page{padding:12px 16px 18px}
}
@media (max-width:440px){
  .mac-mb-right .mac-mb-icon{display:none}
}
@media (max-width:380px){
  .dock-app{width:32px;height:32px}
}

@media (prefers-reduced-motion:reduce){
  .mbk,.mbk-rig>.mbk-lid,.mbk-scr,.dock-app,.dock-badge{transition:none}
  .mbk-dock i,.mac-menubar,.mac-files,.mac-dock,.vid-stage *,.mac-win.is-launching,.mac-win.is-quitting,.dock-app .dock-ico,.dock-browser .dock-badge,.mac-file svg{animation:none!important}
}