/* The desktop: a macOS layer over every page (desktop.js builds it). Menus under the menu bar, Control Center with a
   display switcher, Notification Center behind the clock, Spotlight, a Dock with the OromMac Store, windows with
   working traffic lights, a lock screen. It copies how macOS 26 looks and behaves (glass panels, concentric corners,
   blue selection) but every icon and picture is our own: no Apple logo, icons or artwork.
   Tokens extend style.css; light theme follows <html data-theme="light">. */
:root{
  --accent:#0a84ff;
  --mat:#26262cb3;--mat-blur:blur(30px) saturate(190%);
  --mat-edge:inset 0 .5px 0 #ffffff4d,inset 0 0 0 .5px #ffffff1f,0 0 0 .5px #00000099,0 24px 60px -14px #00000099;
  --mod:#ffffff12;--mod-edge:inset 0 .5px 0 #ffffff1f,inset 0 0 0 .5px #ffffff0f;--mod-2:#ffffff24;
  --track:#ffffff2e;--fill:#f5f5f7;
  --win:#1c1c1f;--win-side:#2a2a2f99;--win-edge:inset 0 .5px 0 #ffffff2e,0 0 0 .5px #000,0 0 0 1px #ffffff12,0 32px 90px -12px #000000c7;
  --dock:#2a2a3175;--wall:var(--wall-dusk);
  --wall-dusk:radial-gradient(70% 70% at 82% -14%,#6050e68c,#0000 62%),radial-gradient(60% 70% at 4% 112%,#cc3e8057,#0000 62%),radial-gradient(55% 60% at 46% 62%,#2256aa4d,#0000 66%),linear-gradient(158deg,#18152c,#0d0c18 46%,#130d1c);
  --wall-aurora:radial-gradient(70% 70% at 82% -14%,#2bb8b270,#0000 62%),radial-gradient(60% 70% at 4% 112%,#4f46e566,#0000 62%),radial-gradient(55% 60% at 46% 62%,#2256aa4d,#0000 66%),linear-gradient(158deg,#0f2226,#0b1016 46%,#120f22);
  --wall-ember:radial-gradient(70% 70% at 82% -14%,#ec46406b,#0000 62%),radial-gradient(60% 70% at 4% 112%,#f5bf4f40,#0000 62%),radial-gradient(55% 60% at 46% 62%,#5b3aa84d,#0000 66%),linear-gradient(158deg,#261418,#120c14 46%,#151024);
  --wall-graphite:radial-gradient(80% 70% at 70% 0,#5a5f6e66,#0000 60%),radial-gradient(60% 60% at 10% 100%,#3a3f4a80,#0000 60%),linear-gradient(160deg,#202227,#121316 55%,#18191d);
  --wall-dawn:radial-gradient(70% 70% at 80% 0,#ffb27a99,#0000 60%),radial-gradient(70% 80% at 0 100%,#8f7bff8c,#0000 62%),radial-gradient(50% 60% at 60% 70%,#ff6f9166,#0000 66%),linear-gradient(160deg,#3b2a5a,#5a3a62 50%,#2a2350);
  --rounded:ui-rounded,"SF Pro Rounded",var(--display);
}
:root[data-theme=light]{
  --accent:#007aff;
  --mat:#f6f6f8c2;
  --mat-edge:inset 0 .5px 0 #fff,inset 0 0 0 .5px #ffffff80,0 0 0 .5px #0000002e,0 24px 60px -16px #00000047;
  --mod:#ffffff8c;--mod-edge:0 0 0 .5px #0000000d,0 1px 2px #0000000a;--mod-2:#0000000f;
  --track:#00000017;--fill:#fff;
  --win:#fbfbfd;--win-side:#eeeef3b3;--win-edge:inset 0 .5px 0 #fff,0 0 0 .5px #00000038,0 32px 90px -16px #00000059;
  --dock:#f4f4f794;
}
:root[data-wall=aurora]{--wall:var(--wall-aurora)}:root[data-wall=ember]{--wall:var(--wall-ember)}
:root[data-wall=graphite]{--wall:var(--wall-graphite)}:root[data-wall=dawn]{--wall:var(--wall-dawn)}:root[data-wall=dusk]{--wall:var(--wall-dusk)}
:root[data-wall] .set .wallpaper{background-image:var(--wall)}

.glyph{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.glyph .f{fill:currentColor;stroke:none}
.mat{background:var(--mat);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-edge);color:var(--fg)}
.dt-hidden{display:none!important}

/* ---------- menu bar: menus open on click, like a Mac (the links still work without JavaScript) ---------- */
.menubar-nav{z-index:9100}
.menubar-nav [data-menu],.menubar-nav .status-icon,.menubar-nav .clock{cursor:default;-webkit-tap-highlight-color:transparent}
.menubar-nav [aria-expanded=true]{background:var(--menubar-hover)}
.menubar-nav button.status-icon,.menubar-nav button.clock{border:0;background:none;color:var(--menubar-fg);font:inherit;padding:0}
.menubar-nav button.status-icon:hover,.menubar-nav button.clock:hover{background:var(--menubar-hover)}
.menubar-nav button.clock{padding:3px 6px 3px 10px;border-radius:5px;font-variant-numeric:tabular-nums}
.menubar-nav .focus-mark{display:grid;place-items:center;width:24px;height:24px;color:var(--menubar-fg)}
.menubar-nav .focus-mark svg{width:15px;height:15px}
@media (max-width:420px){.menubar-nav .status a.status-icon{display:none}}

.dmenu{position:fixed;z-index:9500;min-width:220px;max-width:min(400px,calc(100vw - 16px));max-height:calc(100vh - 56px);overflow:auto;padding:5px;border-radius:12px;font:13px/1.25 var(--sans);user-select:none;-webkit-user-select:none;outline:none}
.dmenu .mi{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:24px;padding:3px 10px;border:0;border-radius:7px;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:default}
.dmenu.checks .mi{padding-left:24px}
.dmenu .mi:focus{outline:none;background:var(--accent);color:#fff}
.dmenu .mi[aria-disabled=true]{color:var(--faint);background:none}
.dmenu .mi[aria-checked=true]::before{content:"";position:absolute;left:8px;top:50%;width:10px;height:10px;translate:0 -50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.4l2.3 2.3 4.7-5.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.4l2.3 2.3 4.7-5.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.dmenu .mi .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dmenu .mi .k{flex:none;margin-left:18px;color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.dmenu .mi:focus .k{color:#ffffffc7}
.dmenu .mi img,.dmenu .mi .glyph{width:16px;height:16px;flex:none}
.dmenu hr{height:1px;margin:5px 10px;border:0;background:var(--line)}
.dmenu .hd{padding:6px 10px 3px;color:var(--muted);font-size:11.5px;font-weight:600}
.dmenu.checks .hd{padding-left:10px}
.dmenu .row{display:flex;align-items:center;gap:9px;padding:4px 10px}
.dmenu .row img{width:18px;height:18px}
.dmenu .row input{flex:1}
.dmenu .row output{width:38px;text-align:right;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pop-in{animation:pop-in .16s var(--ease) backwards}
.pop-out{animation:pop-out .14s ease-in both;pointer-events:none}
@keyframes pop-in{from{opacity:0;scale:.97;translate:0 -4px}}
@keyframes pop-out{to{opacity:0}}

/* sliders: a thick capsule with a white fill, like Control Center's */
.slider{position:relative;display:block;height:24px}
.slider input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;border-radius:12px;cursor:default;background:linear-gradient(90deg,var(--fill) calc(12px + (100% - 24px) * var(--f,.5)),var(--track) 0);outline-offset:2px}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0000005c,0 0 0 .5px #00000026}
.slider input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0000005c,0 0 0 .5px #00000026}
.slider input::-moz-range-track{background:none}
.slider .glyph{position:absolute;left:4px;top:4px;color:#3a3a3c;pointer-events:none}
.dmenu .slider{flex:1;height:18px}.dmenu .slider input{height:18px}
.dmenu .slider input::-webkit-slider-thumb{width:18px;height:18px}.dmenu .slider input::-moz-range-thumb{width:18px;height:18px}
.dmenu .slider input{background:linear-gradient(90deg,var(--fill) calc(9px + (100% - 18px) * var(--f,.5)),var(--track) 0)}

/* switches: macOS's pill toggle */
.switch-tg{position:relative;flex:none;width:38px;height:22px;border:0;border-radius:11px;padding:0;background:var(--mod-2);cursor:default;transition:background-color .2s}
.switch-tg::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:translate .25s var(--spring)}
.switch-tg[aria-checked=true]{background:var(--accent)}
.switch-tg[aria-checked=true]::after{translate:16px 0}

/* ---------- Control Center ---------- */
.cc{position:fixed;z-index:9500;top:43px;right:8px;width:344px;max-width:calc(100vw - 16px);max-height:calc(100vh - 52px);overflow:auto;padding:12px;border-radius:28px;font:13px/1.25 var(--sans);user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.cc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cc-mod{position:relative;border-radius:20px;background:var(--mod);box-shadow:var(--mod-edge);padding:11px 12px}
.cc-big{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;padding:12px 10px}
.cc-wide{grid-column:span 2;display:flex;align-items:center;padding:10px}
.cc-sq{display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;color:inherit;cursor:default}
.cc-full{grid-column:1/-1}
.cc-tg{display:flex;align-items:center;gap:9px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:default;border-radius:999px}
.cc-tg .ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mod-2);transition:background-color .2s,color .2s}
.cc-tg .ic .glyph{width:17px;height:17px}
.cc-tg[aria-checked=true] .ic{background:var(--accent);color:#fff}
.cc-tg b{display:block;font-weight:600;font-size:13px;white-space:nowrap}
.cc-tg small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap}
.cc-sq .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:background-color .2s}
.cc-sq .ic .glyph{width:19px;height:19px}
.cc-sq[aria-checked=true] .ic,.cc-sq[aria-pressed=true] .ic{background:#ff9f0a;color:#fff}
.cc-sq:hover,.cc-mod.click:hover{background:color-mix(in srgb,var(--mod) 100%,var(--fg) 6%)}
.cc-sq:focus-visible,.cc-tg:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.cc-head b{font-weight:600}
.cc-more{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 6px 0 9px;border:0;border-radius:999px;background:var(--mod-2);color:var(--fg);font:500 11.5px var(--sans);cursor:default}
.cc-more .glyph{width:11px;height:11px}
.cc-more:hover{background:color-mix(in srgb,var(--mod-2) 100%,var(--fg) 8%)}
.cc-note{margin:7px 0 0;color:var(--muted);font-size:11.5px}
.np{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px}
.np .art{width:44px;height:44px;border-radius:10px;background:var(--mod-2);display:grid;place-items:center;overflow:hidden}
.np .art img{width:100%;height:100%}
.np b,.np small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.np small{color:var(--muted);font-size:11.5px;margin-top:1px}
.np small a{color:var(--accent);text-decoration:none}
.np .ctl{display:flex;gap:2px}
.np .ctl button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--fg);cursor:default}
.np .ctl button:hover{background:var(--mod-2)}
.np .ctl button:disabled{opacity:.35}
.np .ctl .glyph{width:15px;height:15px}
/* the Display page inside Control Center: the display switcher */
.cc-sub{display:grid;gap:10px}
.cc-back{display:flex;align-items:center;gap:6px;padding:2px 4px 4px;font-weight:600;font-size:15px}
.cc-back button{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:var(--mod-2);color:var(--fg);cursor:default}
.cc-back button .glyph{width:13px;height:13px}
.cc-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px}
.cc-line+.cc-line{margin-top:8px}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:grid;gap:5px;justify-items:center;padding:0;border:0;background:none;color:var(--muted);font:11px/1.2 var(--sans);text-align:center;cursor:default}
.opt .thumb{position:relative;width:100%;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--wall);box-shadow:0 0 0 .5px var(--line);transition:box-shadow .15s}
.opt[aria-checked=true]{color:var(--fg)}
.opt[aria-checked=true] .thumb{box-shadow:0 0 0 2px var(--accent)}
.opt:focus-visible{outline:none}.opt:focus-visible .thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.thumb .pg{position:absolute;inset:16% 0 0;background:var(--bg);display:grid;align-content:start;gap:calc(3px * var(--z));padding:calc(6px * var(--z)) 18%}
.thumb .pg i{display:block;height:calc(2.4px * var(--z));border-radius:2px;background:var(--faint)}
.thumb .pg i:first-child{height:calc(4px * var(--z));width:70%;margin:0 auto calc(2px * var(--z));background:var(--fg)}
.thumb .pg i:nth-child(3){width:86%}
.thumb .bar{position:absolute;inset:0 0 auto;height:16%;background:var(--menubar)}
.thumb.inwin .pg{inset:24% 12% 0;border-radius:4px 4px 0 0;padding-top:12%}
.thumb.inwin .pg::before{content:"";position:absolute;left:6%;top:5%;width:16%;height:6%;background:radial-gradient(circle at 12% 50%,#ff5f57 30%,#0000 34%),radial-gradient(circle at 50% 50%,#febc2e 30%,#0000 34%),radial-gradient(circle at 88% 50%,#28c840 30%,#0000 34%)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--sw);box-shadow:0 0 0 .5px var(--line);cursor:default}
.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.swatch.auto{background:conic-gradient(from 200deg,#2bb8b2,#5464ec,#e8473d,#2bb8b2)}

/* ---------- notifications ---------- */
.banners{position:fixed;z-index:9400;top:46px;right:10px;display:grid;gap:8px;width:min(360px,calc(100vw - 20px));pointer-events:none}
.banner{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:1px 11px;align-items:start;width:100%;padding:12px 14px 13px;border:0;border-radius:22px;font:13px/1.32 var(--sans);text-align:left;cursor:default;pointer-events:auto;animation:banner-in .5s var(--spring) backwards}
.banner.gone{animation:banner-out .3s ease-in both}
.banner img{grid-row:1/3;width:34px;height:34px;margin-top:1px}
.banner b{font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.banner time{color:var(--muted);font-size:12px}
.banner p{grid-column:2/4;margin:0;color:var(--body)}
.banner .x{position:absolute;left:-7px;top:-7px;display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;padding:0;color:var(--fg);opacity:0;transition:opacity .15s;cursor:default}
.banner .x .glyph{width:10px;height:10px;stroke-width:1.8}
.banner:hover .x,.banner:focus-within .x{opacity:1}
.banner .acts,.banner .reply{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.banner .acts button{flex:1 1 auto;height:28px;padding:0 12px;border:0;border-radius:14px;background:var(--mod-2);color:var(--fg);font:500 12.5px var(--sans);cursor:default}
.banner .acts button:hover{background:color-mix(in srgb,var(--mod-2) 100%,var(--fg) 10%)}
.banner .acts button:focus-visible,.banner .reply button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.banner .reply{flex-wrap:nowrap}
.banner .reply input{flex:1;min-width:0;height:30px;padding:0 12px;border:0;border-radius:15px;background:var(--mod-2);color:var(--fg);font:13px var(--sans);outline:none}
.banner .reply input:focus{box-shadow:0 0 0 2px var(--accent)}
.banner .reply button{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:default}
.banner .reply .glyph{width:14px;height:14px;stroke-width:1.9}
@keyframes banner-in{from{translate:calc(100% + 24px) 0}}
@keyframes banner-out{to{translate:calc(100% + 24px) 0;opacity:0}}

.nc{position:fixed;z-index:9500;top:43px;right:8px;width:356px;max-width:calc(100vw - 16px);max-height:calc(100vh - 52px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:1px;font:13px/1.3 var(--sans);animation:nc-in .35s var(--ease) backwards;overscroll-behavior:contain}
.nc.pop-out{animation:nc-out .25s ease-in both}
@keyframes nc-in{from{opacity:0;translate:40px 0}}
@keyframes nc-out{to{opacity:0;translate:40px 0}}
.widget{border-radius:22px;padding:14px 16px}
.widget h4{margin:0 0 8px;font:600 11.5px var(--sans);color:var(--muted)}
.nc-list{display:grid;gap:8px}
.nc-list .banner{animation:none;background:var(--mod);box-shadow:var(--mod-edge);-webkit-backdrop-filter:none;backdrop-filter:none}
.nc-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.nc-head b{font:600 15px var(--display);color:#fff;text-shadow:0 1px 3px #0008}
:root[data-theme=light] .nc-head b{color:var(--fg);text-shadow:none}
.nc-head button{border:0;background:var(--mat);border-radius:999px;padding:3px 10px;font:500 12px var(--sans);color:var(--fg);cursor:default;-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur)}
.cal{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.cal .day small{display:block;color:var(--red);font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.04em}
.cal .day b{display:block;font:300 44px/1 var(--display);letter-spacing:-.02em}
.cal .day span{display:block;margin-top:8px;color:var(--muted);font-size:12px;max-width:96px}
.cal table{width:100%;border-collapse:collapse;font:600 10.5px var(--sans);text-align:center}
.cal caption{text-align:left;color:var(--red);font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px}
.cal th{color:var(--muted);font-weight:600;padding:2px 0}
.cal td{padding:1.5px 0}
.cal td span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%}
.cal td.out{color:var(--faint)}
.cal td.today span{background:var(--red);color:#fff}
.clockw{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.dial{position:relative;width:76px;height:76px;border-radius:50%;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.dial i{position:absolute;left:50%;bottom:50%;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--bg);transform-origin:50% 100%}
.dial .hr{height:20px}.dial .mn{height:30px;width:2px;margin-left:-1px}
.dial::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ff9f0a}
.dial b{position:absolute;inset:6px;border-radius:50%;background:repeating-conic-gradient(from -1deg,var(--bg) 0 2deg,#0000 2deg 30deg);-webkit-mask:radial-gradient(circle,#0000 63%,#000 64%);mask:radial-gradient(circle,#0000 63%,#000 64%);opacity:.55}
.clockw strong{display:block;font:600 15px var(--display)}
.clockw p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.clockw .t{font:300 26px var(--display);letter-spacing:-.01em;color:var(--fg);margin-top:4px;font-variant-numeric:tabular-nums}
.posts-w{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;padding:0;list-style:none}
.posts-w a{display:block;padding:7px 8px;margin:0 -8px;border-radius:10px;text-decoration:none}
.posts-w a:hover{background:var(--mod-2)}
.posts-w b{display:block;font-weight:600;font-size:12.5px;line-height:1.3}
.posts-w span{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- Spotlight ---------- */
.spot{position:fixed;z-index:9600;left:50%;top:max(15vh,58px);translate:-50% 0;width:min(680px,calc(100vw - 20px));font:13px var(--sans)}
.spot-top{display:flex;gap:8px}
.spot-field{flex:1;display:flex;align-items:center;gap:12px;height:54px;padding:0 20px;border-radius:27px}
.spot-field .glyph{width:21px;height:21px;color:var(--muted);stroke-width:1.6}
.spot-field input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--fg);font:400 21px var(--sans);letter-spacing:-.01em}
.spot-field input::placeholder{color:var(--muted)}
.spot-cats{display:flex;gap:6px}
.spot-cats button{display:grid;place-items:center;width:54px;height:54px;border:0;border-radius:50%;cursor:default;color:var(--fg)}
.spot-cats button .glyph{width:19px;height:19px}
.spot-cats button[aria-pressed=true]{background:var(--accent);color:#fff}
@media (max-width:640px){.spot-cats{display:none}.spot-field{height:48px}.spot-field input{font-size:18px}}
.spot-res{margin-top:8px;padding:6px;border-radius:22px;max-height:min(440px,62vh);overflow:auto;overscroll-behavior:contain}
.spot-res:empty{display:none}
.spot-res .hd{padding:8px 10px 4px;color:var(--muted);font-size:11.5px;font-weight:600}
.spot-res .row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:40px;padding:5px 10px;border:0;border-radius:12px;background:none;color:var(--fg);font:inherit;text-align:left;text-decoration:none;cursor:default}
.spot-res .row img,.spot-res .row .ico{width:28px;height:28px}
.spot-res .row .ico{display:grid;place-items:center;border-radius:8px;background:var(--mod-2)}
.spot-res .row .ico .glyph{width:16px;height:16px}
.spot-res .row b{display:block;font-weight:500;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.spot-res .row small{display:block;color:var(--muted);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.spot-res .row .kind{color:var(--muted);font-size:12px}
.spot-res .row[aria-selected=true]{background:var(--accent);color:#fff}
.spot-res .row[aria-selected=true] small,.spot-res .row[aria-selected=true] .kind{color:#ffffffc7}
.spot-res .row[aria-selected=true] .ico{background:#ffffff33}
.spot-res .math b{font:600 22px var(--display)}
.spot-res .none{padding:18px;color:var(--muted);text-align:center}

/* ---------- windows ---------- */
.dwin{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:260px;border-radius:24px;background:var(--win);box-shadow:var(--win-edge);color:var(--fg);overflow:hidden;font:13px/1.45 var(--sans);animation:win-in .32s var(--spring) backwards}
.dwin.closing{animation:win-out .18s ease-in both;pointer-events:none}
.dwin:focus,.ql:focus,.fb-sent:focus{outline:none}
@keyframes win-in{from{opacity:0;scale:.93}}
@keyframes win-out{to{opacity:0;scale:.95}}
.win-bar{position:absolute;inset:0 0 auto;z-index:5;height:52px;display:flex;align-items:center;padding:0 18px;cursor:default;touch-action:none}
.win-title{position:absolute;left:50%;translate:-50% 0;font-weight:600;font-size:13px;pointer-events:none;white-space:nowrap}
.dwin:not(.key) .win-title{color:var(--muted)}
.win-tools{display:flex;align-items:center;gap:6px;margin-left:16px}
.win-tools.end{margin-left:auto}
.tool{display:grid;place-items:center;min-width:32px;height:30px;padding:0 10px;border:0;border-radius:15px;background:var(--mod-2);color:var(--fg);font:500 12.5px var(--sans);cursor:default}
.tool:hover{background:color-mix(in srgb,var(--mod-2) 100%,var(--fg) 8%)}
.tool:disabled{opacity:.4}
.store-win .st-tools{position:absolute;left:252px;margin:0}
.store-win.sheet .st-tools{left:auto;right:16px}
.tool .glyph{width:14px;height:14px}
.win-body{position:relative;flex:1;min-height:0;overflow:auto;user-select:text}
.lights{display:flex;gap:8px;flex:none}
.lights button{display:grid;place-items:center;width:13px;height:13px;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 .5px #00000040;cursor:default}
.lights .close{background:#ff5f57}.lights .min{background:#febc2e}.lights .zoom{background:#28c840}
.lights svg{width:9px;height:9px;opacity:0;fill:none;stroke:#00000094;stroke-width:1.6;stroke-linecap:round}
.lights:hover svg,.lights button:focus-visible svg{opacity:1}
.lights button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dwin:not(.key) .lights:not(:hover) button{background:#ffffff26}
:root[data-theme=light] .dwin:not(.key) .lights:not(:hover) button{background:#0000001f}
.dwin.sheet{left:8px!important;right:8px;top:44px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto!important;height:auto!important;border-radius:22px}
.dwin.zoomed{border-radius:16px}
/* on a phone the window is a sheet that stops above the Dock, so nothing at its bottom hides behind it */
:root.has-dock .dwin.sheet{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){:root.has-dock .dwin.sheet{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}

/* store window: a floating sidebar with the traffic lights on it, content on the right */
.store{display:grid;grid-template-columns:224px minmax(0,1fr);height:100%}
.store-side{display:flex;flex-direction:column;gap:2px;margin:9px 0 9px 9px;padding:50px 9px 10px;border-radius:17px;background:var(--win-side);box-shadow:inset 0 0 0 .5px var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:auto}
.store-search{display:flex;align-items:center;gap:7px;height:30px;margin:0 0 10px;padding:0 10px;border-radius:15px;background:var(--mod-2)}
.store-search .glyph{width:13px;height:13px;color:var(--muted)}
.store-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--fg);font:13px var(--sans)}
.store-side .nav{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--fg);font:500 13px var(--sans);text-align:left;cursor:default}
.store-side .nav .glyph{width:16px;height:16px;color:var(--accent)}
.store-side .nav[aria-current=true]{background:var(--mod-2)}
.store-side .nav:hover:not([aria-current=true]){background:color-mix(in srgb,var(--mod-2) 50%,transparent)}
.store-side .side-hd{margin:16px 10px 4px;color:var(--muted);font:600 11px var(--sans)}
.store-side .foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 6px 2px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.store-side .foot .face{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ours);color:#fff;font-weight:600}
.store-side .foot b{display:block;color:var(--fg);font-weight:600}
.store-main{overflow:auto;padding:58px 28px 28px;scroll-behavior:smooth}
.store-main h2{font:700 22px/1.2 var(--display);letter-spacing:-.015em;margin:28px 0 12px}
.store-main h2:first-child{margin-top:0}
.st-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;min-height:230px;padding:24px 26px;border-radius:18px;background:var(--wall-aurora);color:#fff;overflow:hidden}
.st-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#00000059);pointer-events:none}
.st-hero>*{position:relative;z-index:1}
.st-hero small{display:block;font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.st-hero strong{display:block;margin-top:6px;font:700 30px/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.st-hero p{margin:8px 0 0;max-width:420px;color:#ffffffd1;font-size:14px}
.st-hero .art{display:flex;align-self:center}
.st-hero .art img{width:96px;height:96px;filter:drop-shadow(0 14px 24px #0007)}
.st-hero .art img+img{margin-left:-18px;rotate:8deg;translate:0 8px}
.st-hero .art img:first-child{rotate:-6deg}
.st-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-app{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px 12px 12px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--card-edge);color:var(--fg);font:inherit;text-align:left;cursor:default}
.st-app>img{width:64px;height:64px}
.st-app b{display:block;font-size:15px;font-weight:600}
.st-app span{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.st-app .side{display:grid;justify-items:center;gap:4px}
.st-app .side small{color:var(--muted);font-size:10px}
.get{position:relative;display:inline-grid;place-items:center;min-width:72px;height:28px;padding:0 14px;border:0;border-radius:14px;background:var(--mod-2);color:var(--accent);font:700 13px var(--sans);letter-spacing:.01em;text-decoration:none;cursor:default;transition:min-width .25s var(--ease),background-color .2s}
.get:hover{background:color-mix(in srgb,var(--mod-2) 100%,var(--accent) 14%)}
.get.big{min-width:84px;height:30px;font-size:14px;background:var(--accent);color:#fff}
.get.big:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.get.busy{min-width:28px;width:28px;padding:0;background:none}
.get.busy svg{width:28px;height:28px;rotate:-90deg}
.get.busy circle{fill:none;stroke-width:2.4}
.get.busy .bg{stroke:var(--mod-2)}.get.busy .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:72;stroke-dashoffset:72;animation:get-ring 1.3s var(--ease) forwards}
.get.done{color:var(--fg);background:var(--mod-2)}
@keyframes get-ring{to{stroke-dashoffset:0}}
.st-fixes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-fix{padding:14px 16px;border-radius:16px;background:var(--card);box-shadow:var(--card-edge);font-size:13px}
.st-fix s{display:block;color:var(--muted);text-decoration-color:var(--faint)}
.st-fix b{display:block;margin-top:6px;font-weight:600;line-height:1.35}
.st-fix img{width:22px;height:22px;margin-bottom:8px}
.st-bench{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.st-bench a{color:var(--accent);text-decoration:none;white-space:nowrap}
.st-head{display:grid;grid-template-columns:116px minmax(0,1fr);gap:22px;align-items:center}
.st-head>img{width:116px;height:116px}
.st-head h1{margin:0;font:700 28px/1.1 var(--display);letter-spacing:-.02em}
.st-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.st-head .acts{display:flex;align-items:center;gap:12px;margin-top:14px}
.st-head .acts small{color:var(--muted);font-size:12px;line-height:1.3}
.st-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:22px 0 4px;padding:10px 0;border-block:1px solid var(--line);text-align:center}
.st-stats div{padding:0 8px}
.st-stats div+div{border-left:1px solid var(--line)}
.st-stats small{display:block;color:var(--muted);font:600 10px var(--sans);letter-spacing:.05em;text-transform:uppercase}
.st-stats b{display:block;margin:3px 0 1px;font:600 17px var(--display);white-space:nowrap}
.st-stats span{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-shots{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.st-shots figure{flex:none;margin:0;height:230px;aspect-ratio:16/10;display:grid;place-items:center;border-radius:12px;background:var(--wall);overflow:hidden;scroll-snap-align:start;box-shadow:0 0 0 .5px var(--line)}
.st-shots img{max-width:88%;max-height:86%;object-fit:contain;filter:drop-shadow(0 10px 20px #0008)}
.st-desc{max-width:62ch;color:var(--body);font-size:14px;line-height:1.55}
.st-list{margin:0;padding:0;list-style:none}
.st-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.st-list s{display:block;color:var(--muted);text-decoration-color:var(--faint)}
.st-list b{display:block;font-weight:600;margin-top:2px}
.st-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:0}
.st-info dt{color:var(--muted);font-size:12px}
.st-info dd{margin:2px 0 0;font-size:13px}
.st-info a,.st-links a{color:var(--accent);text-decoration:none}
.st-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;font-size:13px}
.st-empty{padding:40px 0;color:var(--muted);text-align:center}
/* Report a Bug and Contact Support: a form in the Store, grouped like a Settings pane */
.fb{position:relative;display:grid;gap:18px;max-width:640px}
.fb-head{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center}
.fb-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--ours);color:#fff;box-shadow:0 8px 20px -8px #0009}
.fb-ic .glyph{width:26px;height:26px;stroke-width:1.5}
.fb-ic.ok{background:var(--green)}
.fb-head h1,.fb-sent h1{margin:0;font:700 24px/1.15 var(--display);letter-spacing:-.015em}
.fb-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
.fb-chips legend{float:left;width:100%;margin-bottom:8px;padding:0;font-weight:600;font-size:13px}
.chip{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:17px;background:var(--mod-2);font-size:13px;cursor:default;transition:background-color .15s,color .15s}
.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:default}
.chip img,.chip .glyph{width:18px;height:18px}
.chip:has(input:checked){background:var(--accent);color:#fff}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fb-box{display:grid;gap:14px;padding:16px;border-radius:16px;background:var(--card);box-shadow:var(--card-edge)}
.fb-f{display:grid;gap:6px;min-width:0;font-size:13px;font-weight:600}
.fb-f small{margin-left:4px;color:var(--muted);font-weight:400}
.fb-f input,.fb-f textarea,.fb-f select{width:100%;padding:8px 11px;border:0;border-radius:9px;background:var(--mod-2);color:var(--fg);font:400 13px/1.45 var(--sans);outline:none;resize:vertical;transition:box-shadow .15s}
.fb-f input,.fb-f select{height:34px;padding-block:0}
.fb-f input::placeholder,.fb-f textarea::placeholder{color:var(--muted);opacity:.8}
.fb-f :focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.fb-f [aria-invalid=true]{box-shadow:0 0 0 2px var(--red)}
.fb-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fb:has(input[value=site]:checked) .fb-mac{display:none}
.fb-check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.fb-check input{flex:none;width:15px;height:15px;margin:0;accent-color:var(--accent)}
.fb-tip{display:none;margin:-6px 0 0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:13px}
.fb-tip a,.fb-note a{color:var(--accent)}
.fb:has(input[value=license]:checked) .fb-tip[data-for=license],.fb:has(input[value=refund]:checked) .fb-tip[data-for=refund]{display:block}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.fb-note{flex:1;color:var(--muted);font-size:12.5px}
.fb-note.err{color:var(--red)}
.fb-sent{display:grid;justify-items:center;gap:10px;max-width:420px;margin:48px auto;text-align:center;outline:none;animation:pop-in .3s var(--ease) backwards}
.fb-sent p{margin:0 0 6px;color:var(--muted);font-size:14px}
.fb-sent b{color:var(--fg)}
@media (max-width:720px){
  .store{grid-template-columns:minmax(0,1fr)}
  .store-side .side-hd{display:none}
  .fb-two{grid-template-columns:minmax(0,1fr)}
  .fb-head{grid-template-columns:44px minmax(0,1fr);gap:12px}.fb-ic{width:44px;height:44px;border-radius:13px}
  .store-side{flex-direction:row;align-items:center;margin:9px 9px 0;padding:44px 8px 8px;overflow-x:auto;overflow-y:hidden}
  .store-search,.store-side .foot{display:none}
  .store-side .nav{flex:none}
  .store{grid-template-rows:auto minmax(0,1fr)}
  .store-main{padding:18px 16px 24px}
  .st-apps,.st-fixes,.st-info{grid-template-columns:minmax(0,1fr)}
  .st-hero{grid-template-columns:minmax(0,1fr)}.st-hero .art{display:none}
  .st-head{grid-template-columns:72px minmax(0,1fr);gap:14px}.st-head>img{width:72px;height:72px}
  .st-stats{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0}
  .st-stats div:nth-child(3n+1){border-left:0}
  .st-shots figure{height:170px}
}

/* about this site */
.about{display:flex;flex-direction:column;align-items:center;padding:46px 26px 20px;text-align:center}
.about>img{width:108px;height:108px;filter:drop-shadow(0 14px 26px #00000059)}
.about h3{margin:16px 0 0;font:700 22px var(--display);letter-spacing:-.01em}
.about .sub{margin:2px 0 16px;color:var(--muted);font-size:12px}
.about dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;margin:0 0 18px;text-align:left;font-size:12px}
.about dt{text-align:right;font-weight:600}
.about dd{margin:0;color:var(--muted)}
.about .tool{height:26px;font-size:12.5px}
.about .fine{margin:16px 0 0;color:var(--faint);font-size:10.5px}

/* trash: a Finder window in icon view, with Quick Look */
.trash-win .win-body{display:flex;flex-direction:column;overflow:hidden}
.trash{flex:1;min-height:0;overflow:auto;padding:62px 16px 16px}
.fd-status{flex:none;display:grid;place-items:center;height:28px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px}
.fd-status:empty{display:none}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px 4px;align-items:start}
.file{display:grid;justify-items:center;gap:5px;min-width:0;padding:6px 4px;border:0;border-radius:10px;background:none;color:var(--fg);font:12px/1.3 var(--sans);text-align:center;cursor:default;transition:opacity .4s,scale .4s var(--ease),translate .5s var(--ease);-webkit-tap-highlight-color:transparent}
.file .ic{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:9px}
.file .ic img{width:64px;height:64px}
.file .nm{max-width:100%;padding:1px 5px;border-radius:5px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.file:focus{outline:none}
.file.sel .ic,.file:focus-visible .ic{background:var(--mod-2)}
.file.sel .nm,.file:focus-visible .nm{background:var(--accent);color:#fff}
.file.gone{opacity:0;scale:.3;translate:0 40px}
.file .badge{position:absolute;left:50%;bottom:13px;translate:-50% 0;padding:1px 5px;border-radius:4px;background:#7c8594;color:#fff;font:700 8.5px/1.4 var(--sans);letter-spacing:.05em}
.file .badge.k-PDF{background:#e8473d}.file .badge.k-KEY{background:#5464ec}
.thumb{display:block;width:62px;height:44px;border-radius:4px;box-shadow:0 2px 6px #0006,0 0 0 1px #ffffff26}
.thumb.shot{background:linear-gradient(#fbfbfd,#fbfbfd) 8% 18%/34% 34% no-repeat,linear-gradient(#e2e2ea,#e2e2ea) 62% 28%/32% 40% no-repeat,linear-gradient(#fbfbfd,#fbfbfd) 28% 78%/40% 30% no-repeat,linear-gradient(#d4d4de,#d4d4de) 88% 82%/26% 30% no-repeat,var(--wall-ember)}
.thumb.memet{width:50px;height:50px;background:linear-gradient(#1d1d1f,#1d1d1f) 50% 12%/70% 3px no-repeat,linear-gradient(#1d1d1f,#1d1d1f) 50% 90%/56% 3px no-repeat,linear-gradient(135deg,#ffb27a,#8f7bff) 50% 52%/84% 56% no-repeat,#fff}
.ql{position:fixed;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;width:min(560px,calc(100vw - 24px));max-height:min(82vh,660px);border-radius:22px;overflow:hidden;outline:none;font:13px/1.45 var(--sans);animation:ql-in .24s var(--spring) backwards}
@keyframes ql-in{from{opacity:0;scale:.92}}
.ql-bar{flex:none;position:relative;display:flex;align-items:center;justify-content:center;height:44px;padding:0 46px;font-weight:600}
.ql-bar b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ql-x{position:absolute;left:12px;top:50%;translate:0 -50%;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--mod-2);color:var(--fg);cursor:default}
.ql-x .glyph{width:11px;height:11px;stroke-width:1.9}
.ql-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ql-body{flex:1;min-height:0;overflow:auto;padding:2px 18px 18px}
.ql-foot{margin:12px 0 0;color:var(--muted);font-size:12px;text-align:center}
.ql-paper{position:relative;padding:28px 30px 20px;border-radius:6px;background:#fdfdfb;color:#1d1d1f;box-shadow:0 1px 3px #0003}
.ql-paper small{color:#6e6e73;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.ql-paper h3{margin:4px 0 16px;font:700 20px var(--display)}
.ql-paper dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;margin:0}
.ql-paper dt{color:#6e6e73}
.ql-paper dd{margin:0;border-bottom:1px dotted #c9cdd3;font-weight:500}
.ql-paper .stamp{position:absolute;right:24px;top:30px;rotate:-11deg;padding:4px 10px;border:2.5px solid #e8473d;border-radius:6px;color:#e8473d;font:800 14px var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ql-paper .ql-foot{color:#6e6e73}
@media (max-width:520px){.ql-paper{padding:22px 20px 18px}.ql-paper .stamp{position:static;display:inline-block;margin:8px 0 2px;font-size:12px}.ql-paper h3{margin-top:0}}
.ql-slide .slide{position:relative;display:grid;align-content:center;aspect-ratio:16/9;padding:8%;border-radius:8px;background:linear-gradient(135deg,#1b1f4b,#3b2a5a);color:#fff;box-shadow:0 10px 30px -10px #000a}
.ql-slide small{color:#ffffffa6;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ql-slide h3{margin:6px 0;font:800 clamp(28px,6vw,44px)/1 var(--display);letter-spacing:-.02em}
.ql-slide p{margin:0;color:#ffffffa6}
.ql-slide .sticky{position:absolute;right:6%;bottom:9%;rotate:4deg;padding:10px 12px;background:#ffd968;color:#3a2e00;font:600 12px var(--sans);box-shadow:0 6px 14px -4px #0008}
.ql-txt{margin:0;padding:18px 20px;border-radius:8px;background:var(--card);box-shadow:var(--card-edge);font:12.5px/1.7 var(--mono);white-space:pre;overflow-x:auto}
.ql-nice{display:grid;justify-items:center;gap:6px;padding:46px 20px;font-family:var(--sans);white-space:normal;text-align:center}
.ql-nice b{font:800 34px var(--display)}
.ql-nice p{margin:0;color:var(--muted)}
.ql-shot{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--wall-ember)}
.ql-shot i{position:absolute;border-radius:6px;background:var(--win);box-shadow:0 6px 18px -6px #000c,0 0 0 .5px #ffffff26}
.ql-shot i::before{content:"";position:absolute;left:6px;top:5px;width:22px;height:6px;background:radial-gradient(circle at 3px 3px,#ff5f57 2.4px,#0000 2.8px),radial-gradient(circle at 11px 3px,#febc2e 2.4px,#0000 2.8px),radial-gradient(circle at 19px 3px,#28c840 2.4px,#0000 2.8px)}
.ql-fix{display:grid;justify-items:center;gap:10px;padding:16px 10px 6px;text-align:center}
.ql-fix img{width:64px;height:64px}
.ql-fix s{color:var(--muted);text-decoration-color:var(--faint)}
.ql-fix b{max-width:40ch;font:600 16px/1.35 var(--display)}
.ql-fix span{color:var(--muted);font-size:12px}
.meme{display:grid;gap:10px;padding:26px 24px;border-radius:8px;background:#fff;color:#111;font:500 16px/1.4 var(--sans)}
.meme p{margin:0}
.meme blockquote{margin:4px 0 0;padding:14px 16px;border-radius:12px;background:#f0f0f3;font-weight:600}
.meme.chart b{font:700 15px/1.3 var(--sans)}
.meme .bars{display:flex;align-items:flex-end;gap:28px;height:200px;margin:8px 0 26px;padding:0 12%;border-bottom:2px solid #111}
.meme .bars span{position:relative;flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(#ff6b5f,#c42f2a)}
.meme .bars span+span{background:linear-gradient(#2bb8b2,#0e7a73)}
.meme .bars i{position:absolute;left:50%;top:100%;translate:-50% 7px;font:600 12px var(--sans);font-style:normal;white-space:nowrap}
.trash .empty{display:grid;justify-items:center;gap:6px;padding:40px 20px;text-align:center;color:var(--muted)}
.trash .empty b{color:var(--fg);font:600 17px var(--display)}
.trash .empty a{color:var(--accent);text-decoration:none}
.alert{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:20px;background:#00000059;animation:pop-in .2s var(--ease) backwards}
.alert-box{width:min(290px,100%);background:color-mix(in srgb,var(--win) 88%,transparent)!important;padding:20px 18px 16px;border-radius:24px;text-align:center}
.alert-box img{width:56px;height:56px;margin:0 auto 10px}
.alert-box b{display:block;font-weight:700;font-size:13px;line-height:1.35}
.alert-box p{margin:6px 0 16px;color:var(--body);font-size:12px}
.alert-box .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.alert-box .btns button{height:30px;border:0;border-radius:15px;background:var(--mod-2);color:var(--fg);font:500 13px var(--sans);cursor:default}
.alert-box .btns .def{background:var(--accent);color:#fff}

/* SoundPost and Mission Boost in their own windows: the try-it demos from try.css, inside a window */
.app-in{display:grid;gap:16px;padding:60px 20px 20px}
.app-tabs{justify-self:center}
.app-tabs button{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;white-space:nowrap}
@media (max-width:520px){.app-tabs button{padding:5px 9px}.app-tabs .glyph{display:none}.app-in{padding-inline:14px}}
.app-tabs .glyph{width:14px;height:14px}
.app-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.app-pane[hidden]{display:none}
.app-lede{margin:0;color:var(--muted);font-size:13px;text-align:center;text-wrap:balance}
.app-lede a{color:var(--accent)}
.app-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--muted);font-size:12.5px}
.app-foot a:last-child{margin-left:auto;color:var(--accent);text-decoration:none}
.app-win .mc-stage{max-height:none}

/* ---------- the Jukebox: a record that spins while it plays, or YouTube's player ---------- */
[data-art=morning]{--art:linear-gradient(160deg,#ffd38c,#ff9b77 36%,#c96d99 68%,#5a5fc8)}
[data-art=piano]{--art:linear-gradient(160deg,#6a6c7a,#2a2a33 55%,#0e0e12)}
[data-art=film]{--art:linear-gradient(160deg,#d2dc82,#6fa65c 40%,#2f6b45 72%,#1b3a2b)}
[data-art=rock]{--art:linear-gradient(160deg,#ff7043,#b3122e 48%,#2a0a12)}
[data-art=dnb]{--art:linear-gradient(160deg,#3be3d2,#4060f0 45%,#2b0f5e 78%,#120726)}
.np .jb-tile{background:var(--art);color:#fff}
.np .jb-tile .glyph{width:20px;height:20px}
.jb-main{display:flex;flex-direction:column;gap:14px}
.jb-stage{position:relative;flex:none;aspect-ratio:16/9;min-height:200px;max-height:max(200px,46vh);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 .5px var(--line)}
.jb-stage [hidden]{display:none!important}
.jb-art{position:absolute;inset:0;display:grid;place-items:center;background:var(--art)}
.jb-art::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 25% 0%,#ffffff33,#0000 60%)}
.jb-disc{position:relative;width:min(46%,230px);aspect-ratio:1;border-radius:50%;box-shadow:0 18px 44px #0009}
.jb-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,#0000 0 9%,#ffffff2b 14%,#0000 20% 59%,#ffffff1c 64%,#0000 70%);pointer-events:none}
.jb-vinyl{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#0c0c0f 0 1.5px,#1a1a1f 1.5px 3px);animation:jb-spin 3.6s linear infinite paused}
.jb.on .jb-vinyl{animation-play-state:running}
.jb-vinyl span{display:grid;place-items:center;width:36%;aspect-ratio:1;border-radius:50%;background:var(--art);color:#fff;box-shadow:inset 0 0 0 1px #ffffff2e}
.jb-vinyl .glyph{width:36%;height:36%}
@keyframes jb-spin{to{rotate:360deg}}
.jb-arm{position:absolute;z-index:1;right:-15%;top:-5%;width:14%;height:76%;transform-origin:50% 7%;rotate:-5deg;transition:rotate .8s var(--ease);pointer-events:none}
.jb-arm::before{content:"";position:absolute;z-index:1;left:50%;top:0;width:52%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#5a5a66 0 26%,#ececf1 30%);box-shadow:0 4px 10px #0006}
.jb-arm::after{content:"";position:absolute;left:50%;top:7%;width:9%;height:84%;translate:-50% 0;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#f4f4f7,#a5a5b0);box-shadow:0 6px 12px #0005;border-bottom:16px solid #e2e2e8}
.jb.on .jb-arm{rotate:19deg}
.jb-yt{position:absolute;inset:0}
.jb-yt iframe{display:block;width:100%;height:100%;border:0}
.jb-gate{position:absolute;inset:0;z-index:2;display:grid;align-content:end;justify-items:center;gap:10px;padding:20px 24px 18px;background:linear-gradient(180deg,#0000 35%,#000000a6);color:#fff;text-align:center}
.jb-gate p{max-width:420px;margin:0;color:#ffffffd9;font-size:12px;line-height:1.4;text-wrap:balance;text-shadow:0 1px 4px #0009}
.jb-gate a{color:#fff}
.jb-big{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px 0 15px;border:0;border-radius:19px;background:#ffffffeb;color:#111;font:600 14px var(--sans);box-shadow:0 8px 24px #0006;cursor:default}
.jb-big:hover{background:#fff}
.jb-big .glyph{width:15px;height:15px}
.jb-big:focus-visible{outline:2px solid #fff;outline-offset:2px}
.jb-meta small{display:block;color:var(--muted);font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.store-main.jb-main h2{margin:4px 0 2px;font:700 24px/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance}
.jb-meta .by{margin:0;font-size:14px}
.jb-meta .why{margin:4px 0 0;color:var(--muted);font-size:13px}
.jb-ctl{display:grid;grid-template-columns:auto auto auto auto minmax(0,1fr) auto;align-items:center;gap:8px}
.jb-ctl button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--fg);cursor:default}
.jb-ctl button:hover{background:var(--mod-2)}
.jb-ctl .glyph{width:17px;height:17px}
.jb-ctl .jb-play{width:44px;height:44px;background:var(--fg);color:var(--bg)}
.jb-ctl .jb-play:hover{background:color-mix(in srgb,var(--fg) 82%,var(--bg))}
.jb-ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jb-t,.jb-d{min-width:38px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.jb-t{text-align:right}
.jb-seek{height:16px}
.jb-seek input{height:16px;border-radius:0;background:linear-gradient(90deg,var(--fg) calc(6px + (100% - 12px) * var(--f,0)),var(--track) 0) center/100% 4px no-repeat}
.jb-seek input::-webkit-slider-thumb{width:12px;height:12px;opacity:0;transition:opacity .15s}
.jb-seek input::-moz-range-thumb{width:12px;height:12px;opacity:0;transition:opacity .15s}
.jb-seek:hover input::-webkit-slider-thumb,.jb-seek input:focus-visible::-webkit-slider-thumb{opacity:1}
.jb-seek:hover input::-moz-range-thumb,.jb-seek input:focus-visible::-moz-range-thumb{opacity:1}
.jb-src{margin:0;color:var(--muted);font-size:12px}
.jb-src a,.jb-foot a{color:var(--accent);text-decoration:none}
.jb-src a:hover,.jb-foot a:hover{text-decoration:underline}
.jb .nav span{flex:1}
.store-side .jb-foot{display:block;margin:auto 0 0;padding:12px 6px 2px;line-height:1.4}
.eq{display:none;align-items:flex-end;gap:2px;width:12px;height:12px}
.eq b{flex:1;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate}
.eq b:nth-child(2){animation-duration:.6s;animation-delay:-.3s}
.eq b:nth-child(3){animation-duration:1.15s;animation-delay:-.7s}
@keyframes eq{from{scale:1 .25}}
.jb.on .nav[aria-current=true] .eq{display:flex;color:var(--accent)}
.menubar-nav .np-mark .glyph{width:15px;height:15px}
.menubar-nav .np-mark .eq{width:13px;height:11px}
.menubar-nav .np-mark.on .glyph{display:none}
.menubar-nav .np-mark.on .eq{display:flex}
.np-pop{width:300px;display:grid;gap:8px}
.np-open{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border:0;border-radius:14px;background:var(--mod);box-shadow:var(--mod-edge);color:var(--fg);font:500 13px var(--sans);cursor:default}
.np-open:hover{background:var(--mod-2)}
.np-open .glyph{width:14px;height:14px}
@media (max-width:720px){.store-side .jb-foot{display:none}}
@media (max-width:520px){.jb-ctl{grid-template-columns:auto auto auto minmax(0,1fr)}.jb-ctl .jb-t,.jb-ctl .jb-d{display:none}.store-main.jb-main h2{font-size:20px}.jb-gate{gap:8px;padding:12px 14px}.jb-gate p{font-size:11px}.jb-big{height:34px;font-size:13px}}

/* ---------- the Dock ---------- */
.dock{position:fixed;z-index:9000;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:flex;align-items:flex-end;height:calc(var(--s) + 12px);gap:2px;padding:6px 7px;border-radius:24px;background:var(--dock);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);box-shadow:var(--mat-edge);transition:translate .4s var(--ease),opacity .3s;--s:52px}
.dock.away{translate:-50% calc(100% + 24px)}
.dock-item{position:relative;flex:none;display:block;width:var(--s);height:var(--s);padding:0;border:0;background:none;color:var(--fg);cursor:default;transition:width .1s ease-out,height .1s ease-out;-webkit-tap-highlight-color:transparent}
.dock-item>img,.dock-item>.stack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.dock-item:focus-visible{outline:none}
.dock-item:focus-visible>img{filter:drop-shadow(0 0 0 1.5px var(--accent)) brightness(1.08)}
.dock-item:active>img{filter:brightness(.75)}
.dock-item.running::after{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fg);opacity:.75}
.dock-item .tip{position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50% 0;padding:4px 11px;border-radius:9px;font:500 13px var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.dock-item:hover .tip,.dock-item:focus-visible .tip{opacity:1}
.dock-sep{flex:none;align-self:stretch;width:1px;margin:4px 6px;background:color-mix(in srgb,var(--fg) 22%,transparent)}
.dock-item.bounce>img,.dock-item.bounce>.stack{animation:dock-bounce .8s cubic-bezier(.3,.7,.4,1)}
@keyframes dock-bounce{0%,100%{translate:0}22%{translate:0 -42%}44%{translate:0}62%{translate:0 -20%}80%{translate:0}}
.stack img{position:absolute;inset:11%;width:78%;height:78%}
.stack img:first-child{rotate:-13deg;translate:-15% 5%}
.stack img:nth-child(2){rotate:8deg;translate:13% -3%}
.dock-item .badge{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font:600 12px/20px var(--sans);text-align:center;box-shadow:0 1px 3px #0006}
.dock-item.mini>img{inset:6%;width:88%;height:88%;border-radius:6px;object-fit:cover;box-shadow:0 2px 6px #0006}
.dock-item.mini .app{position:absolute;right:-2px;bottom:-2px;width:45%;height:45%}
.mini-thumb{position:absolute;inset:8%;border-radius:6px;overflow:hidden;background:var(--win);box-shadow:0 2px 8px #0007,0 0 0 .5px var(--line);pointer-events:none}
.mini-thumb::before{content:"";position:absolute;left:8%;top:8%;width:30%;height:7%;background:radial-gradient(circle at 15% 50%,#ff5f57 30%,#0000 34%),radial-gradient(circle at 50% 50%,#febc2e 30%,#0000 34%),radial-gradient(circle at 85% 50%,#28c840 30%,#0000 34%)}
.mini-thumb i{position:absolute;left:14%;right:14%;height:7%;border-radius:2px;background:var(--faint)}
.mini-thumb i:nth-child(1){top:32%;right:34%;background:var(--fg)}.mini-thumb i:nth-child(2){top:50%}.mini-thumb i:nth-child(3){top:64%;right:26%}
.mini-thumb img{position:absolute;right:-1px;bottom:-1px;width:48%;height:48%}
.fan{position:fixed;z-index:9500;display:grid;gap:8px;justify-items:end;padding:0;pointer-events:none}
.fan a{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font:500 13px var(--sans);pointer-events:auto;transform-origin:100% 100%;animation:fan-in .35s var(--spring) backwards;cursor:default}
.fan a span{padding:4px 10px;border-radius:9px}
.fan a img{width:52px;height:52px;filter:drop-shadow(0 6px 12px #0007)}
.fan a:hover span,.fan a:focus-visible span{background:var(--accent);color:#fff}
.fan a:focus-visible{outline:none}
@keyframes fan-in{from{opacity:0;translate:0 60px;rotate:0deg}}
:root.has-dock body{padding-bottom:84px}
@media (max-width:760px){.wide-only{display:none!important}}
@media (max-width:640px){.dock{--s:44px;padding:5px 6px;border-radius:21px}}

/* ---------- lock screen and sleep ---------- */
.lock{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;background-color:#000;background-image:var(--wall);background-size:cover;color:#fff;font-family:var(--sans);cursor:default;user-select:none;animation:lock-in .45s var(--ease) backwards}
.lock.out{animation:lock-out .45s var(--ease) both}
@keyframes lock-in{from{opacity:0;scale:1.04}}
@keyframes lock-out{to{opacity:0;translate:0 -6%}}
.lock .date{margin-top:max(9vh,52px);font:600 clamp(17px,2.2vw,24px) var(--display);color:#ffffffd9;text-shadow:0 1px 8px #0005}
.lock .time{margin-top:2px;font:700 clamp(92px,15vw,168px)/1 var(--rounded);letter-spacing:-.02em;color:#ffffffe0;text-shadow:0 2px 30px #0004;font-variant-numeric:tabular-nums}
.lock .who{margin-top:auto;margin-bottom:max(8vh,40px);display:grid;justify-items:center;gap:10px}
.lock .face{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ours);font:600 26px var(--display);box-shadow:0 6px 24px #0006}
.lock .who b{font:600 15px var(--display);text-shadow:0 1px 6px #0006}
.lock .who span{padding:8px 18px;border-radius:999px;background:#ffffff2b;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:13px;color:#ffffffe6;box-shadow:inset 0 .5px 0 #ffffff59}
.sleep{position:fixed;inset:0;z-index:10001;background:#000;animation:sleep-in .9s ease-in both;cursor:none}
.sleep.wake{animation:sleep-out .5s ease-out both}
@keyframes sleep-in{from{opacity:0}}
@keyframes sleep-out{to{opacity:0}}

/* ---------- display: brightness, Night Shift, text size and arrangement ---------- */
:root::before,:root::after{content:"";position:fixed;inset:0;z-index:2147483600;pointer-events:none;transition:opacity .6s}
:root::before{background:#000;opacity:var(--dim,0)}
:root::after{background:#ff8f3a;mix-blend-mode:multiply;opacity:0}
:root[data-night]::after{opacity:.2}
:root[data-theme=light][data-night]::after{opacity:.24}
:root{--z:1}
:root[data-size=xl]{--z:1.18}:root[data-size=l]{--z:1.08}:root[data-size=s]{--z:.9}
:root[data-size] .page-win{zoom:var(--z)}
:root[data-size=s] .section,:root[data-size=s] .footer{max-width:1240px}
:root[data-size=s] .showcase{max-width:1400px}
.page-bar{display:none}
:root[data-layout=window] body{background-color:#000;background-image:var(--wall);background-attachment:fixed;background-size:cover}
:root[data-layout=window][data-theme=light] body{background-color:#d8d8e0}
:root[data-layout=window] .page-win{position:relative;max-width:1180px;margin:22px auto 0;border-radius:26px;background:var(--bg);box-shadow:var(--win-edge);overflow:clip}
:root[data-layout=window] .page-bar{position:sticky;top:calc(37px / var(--z));z-index:15;display:flex;align-items:center;gap:14px;height:46px;padding:0 18px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 .5px 0 var(--line)}
:root[data-layout=window] .page-bar .page-title{position:absolute;left:50%;translate:-50% 0;font:600 13px var(--sans);color:var(--fg);white-space:nowrap;pointer-events:none}
:root[data-layout=window] .page-bar .page-title img{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px}
:root[data-layout=window] .footer{border-top:1px solid var(--line)}
:root[data-layout=window] .hero{padding-top:52px}
:root[data-layout=window].has-dock body{padding-bottom:96px}
:root[data-closed] .page-win{display:none}
@media (max-width:760px){:root[data-layout=window] .page-win{margin:10px 8px 0;border-radius:20px}}
.desk{position:fixed;z-index:5;top:52px;right:18px;display:grid;gap:10px;justify-items:center}
.desk-hint{position:fixed;z-index:5;left:50%;top:42%;translate:-50% -50%;max-width:min(420px,90vw);text-align:center;color:#ffffffd9;font:500 15px/1.45 var(--sans);text-shadow:0 1px 8px #0008;animation:pop-in .5s var(--ease) .2s both}
.desk-hint b{display:block;font:700 26px/1.2 var(--display);color:#fff}
.desk a{display:grid;justify-items:center;gap:4px;width:96px;padding:6px 4px;border-radius:8px;color:#fff;text-decoration:none;font:500 12px/1.25 var(--sans);text-align:center;text-shadow:0 1px 3px #000c;cursor:default}
.desk a img{width:58px;height:58px;padding:4px;border-radius:10px}
.desk a.sel img{background:#ffffff38}
.desk a.sel span{background:var(--accent);border-radius:4px;padding:0 4px;text-shadow:none}
.desk a:focus-visible{outline:none}.desk a:focus-visible img{background:#ffffff38}

/* replaces the Apple logo the showcase menu bars used to carry */
.menubar .mark{width:1.25cqw;min-width:10px;height:auto;aspect-ratio:1;display:block}

@media (prefers-reduced-motion:reduce){
  .dock-item.bounce>img,.dock-item.bounce>.stack{animation:none}
  .banner{animation-name:fade-in}.banner.gone{animation-name:pop-out}
  .ql,.fb-sent{animation:none}
  .jb-vinyl,.eq b{animation:none}.jb-arm{transition:none}
  @keyframes fade-in{from{opacity:0}}
}