/* =========================================================
   SKIN · SYSTEM 1 — the 1984 Mac
   One bit: black, white, and the patterns made from the two. Every
   rule is scoped under body[data-skin="mac"] so nothing here can leak
   into the other skins. Photographs are turned into real dots by
   js/skins.js (Atkinson dithering); this file does everything else.

   Greys are not allowed. Where the original needed one it used a
   pattern — the 50% checker — and so does this.
   ========================================================= */
@font-face{
  font-family:'ChicagoFLF';
  /* public domain (assets/fonts/ChicagoFLF-LICENSE.txt) */
  src:url('../assets/fonts/ChicagoFLF.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

body[data-skin="mac"]{
  --chi:'ChicagoFLF',Geneva,var(--ui);
  --gen:Geneva,Verdana,var(--ui);
  --checker:conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0/2px 2px;
  /* the same checker as a MASK: half the pixels gone. A mask reads alpha,
     so the gaps have to be transparent, not white. */
  --dim:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0) 0 0/2px 2px;
  --ink:#000;--ink-2:#000;--paper:#fff;--line:#000;--line-2:#000;
  --acento:#000;--acento-d:#000;--acento-rgb:0,0,0;--kid-gold:#000;
  --radius:0px;
  background:#fff;
  -webkit-font-smoothing:none;
  font-family:var(--gen);
}
body[data-skin="mac"] :focus-visible{outline:1px dotted #000;outline-offset:1px}
/* the dots have to stay dots: no smoothing when they are drawn */
body[data-skin="mac"] img{image-rendering:pixelated}

/* ---------- what 1984 did not have ---------- */
body[data-skin="mac"] .wp-gl,
body[data-skin="mac"] .wp-stars,
body[data-skin="mac"] .wp-glow,
body[data-skin="mac"] .hero-type,
body[data-skin="mac"] .star-cursor,
body[data-skin="mac"] .mb-theme,
body[data-skin="mac"] .mb-eq{display:none!important}
body[data-skin="mac"] .desktop,
body[data-skin="mac"] .menubar,
body[data-skin="mac"] .dock{animation:none}

/* ---------- menu bar ---------- */
body[data-skin="mac"] .menubar{
  background:#fff;color:#000;border-bottom:1px solid #000;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--chi);font-size:14px;
}
body[data-skin="mac"] .menu-btn{border-radius:0;padding:3px 11px}
body[data-skin="mac"] .menu-btn:hover{background:none}
body[data-skin="mac"] .menu-btn[aria-expanded="true"]{background:#000;color:#fff}
body[data-skin="mac"] .mb-star{width:16px;height:16px}
body[data-skin="mac"] .mb-now{color:#000;font-size:12px}
body[data-skin="mac"] .mb-now-text{font-family:var(--chi)}
body[data-skin="mac"] .mb-chip{border-radius:0;border:1px solid #000;background:#fff;color:#000;font-family:var(--chi);font-size:11px;font-weight:400}
body[data-skin="mac"] .mb-chip:hover{background:#000;color:#fff;transform:none}
body[data-skin="mac"] .mb-icon{border-radius:0}
body[data-skin="mac"] .mb-icon:hover,body[data-skin="mac"] .mb-clock:hover{background:#000;color:#fff}
body[data-skin="mac"] .mb-clock{border-radius:0;font-family:var(--chi);font-size:13px}
body[data-skin="mac"] .mb-vol{height:6px;border-radius:0;border:1px solid #000;
  background:linear-gradient(90deg,#000 var(--p,70%),#fff var(--p,70%))}
body[data-skin="mac"] .mb-vol::-webkit-slider-thumb{width:8px;height:14px;border-radius:0;background:#fff;border:1px solid #000;box-shadow:none}
body[data-skin="mac"] .mb-vol::-moz-range-thumb{width:8px;height:14px;border-radius:0;background:#fff;border:1px solid #000}

/* dropdowns: white, one-pixel rule, a hard shadow, and the choice inverts */
body[data-skin="mac"] .dd{
  background:#fff;border:1px solid #000;border-radius:0;padding:0;
  box-shadow:2px 2px 0 #000;-webkit-backdrop-filter:none;backdrop-filter:none;
  animation:none;font-family:var(--chi);
}
body[data-skin="mac"] .dd button{border-radius:0;font-size:14px;padding:3px 16px}
body[data-skin="mac"] .dd button:hover:not(:disabled){background:#000;color:#fff}
body[data-skin="mac"] .dd .dd-k{font-family:var(--chi);opacity:1;font-size:13px}
/* the menu separator was a dotted grey line */
body[data-skin="mac"] .dd hr{border:0;height:1px;margin:2px 0;background:var(--checker)}

/* ---------- the desktop ---------- */
body[data-skin="mac"] .wallpaper,
body.light[data-skin="mac"] .wallpaper{background:var(--mac-desk,var(--checker));background-size:auto}
/* The chosen pattern arrives as a tiled image, which needs its own size
   back — the checker above carries 2px in its shorthand. */
body[data-skin="mac"] .wallpaper{background-repeat:repeat}

/* the desk objects: no drift, no tilt, no soft shadows — pixels cannot rotate */
body[data-skin="mac"] .obj img{animation:none;filter:none!important;transform:none!important}
body[data-skin="mac"] .obj:hover .obj-media{transform:none}
body[data-skin="mac"] .obj,body[data-skin="mac"] .work-card,body[data-skin="mac"] .polaroid,
body[data-skin="mac"] .wp-glow{translate:none}
body[data-skin="mac"] .obj.favoured .obj-media{transform:none}
/* Locked is what the Finder called dimmed: every other pixel removed. */
body[data-skin="mac"] .obj.locked .obj-media{
  -webkit-mask:var(--dim);mask:var(--dim)}
body[data-skin="mac"] .obj.locked.yearned{animation:none}
body[data-skin="mac"] .obj-label{
  background:#fff;color:#000;border:1px solid #000;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--chi);font-size:13px;letter-spacing:0;text-transform:none;padding:1px 6px}
body[data-skin="mac"] .obj .play-badge{border-radius:0;background:#000!important;box-shadow:none;width:40px;height:40px;border:2px solid #fff;outline:1px solid #000}
body[data-skin="mac"] .obj .play-badge svg{width:18px;height:18px}
body[data-skin="mac"] .work-card,body[data-skin="mac"] .polaroid{
  transform:none;box-shadow:2px 2px 0 #000;border:1px solid #000;background:#fff}
body[data-skin="mac"] .work-card:hover,body[data-skin="mac"] .polaroid:hover{transform:none;box-shadow:2px 2px 0 #000}
body[data-skin="mac"] .work-card::after{display:none}
body[data-skin="mac"] .polaroid span{font-family:var(--chi);--hand-acc:none;font-size:12px;color:#000}

body[data-skin="mac"] .hint{
  background:#fff;color:#000;border:1px solid #000;border-radius:0;
  box-shadow:2px 2px 0 #000;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--chi);font-size:13px;bottom:18px}
body[data-skin="mac"] .hint-dot{border-radius:0;background:#000;animation:none}

/* ---------- desktop icons ---------- */
/* No dock in 1984: the column is the way in, so the player joins it. */
body[data-skin="mac"] .dock{display:none}
/* On a short window the column used to run straight into the Trash: at 700px
   tall, Portfolio sat on top of it. Under 840px the icons drop to 24px — half,
   so the pixel art stays one dot per pixel (never 36: see pixelar.py) — which
   fits the column down to about 580px. Below that it wraps into a second
   column to the left rather than touch the Trash; the cap is the column's top
   (40) plus the Trash's corner (77 tall, 14 up) and a little air. Wrapping is
   only the last resort because the second column lands on the desk objects.
   840, not 800: the Spanish labels run to two lines more often, and at 812
   the full-size column was already one icon too long. Nine icons since the
   2012 headphones joined the column. */
body[data-skin="mac"] .icons{top:40px;gap:2px;column-gap:6px;flex-wrap:wrap-reverse;max-height:calc(100% - 40px - 105px)}
body[data-skin="mac"] .dicon{color:#000;gap:3px;padding:6px 4px}
@media (max-height:840px){
  body[data-skin="mac"] .dicon{padding:3px 4px}
  body[data-skin="mac"] .dicon-art{width:24px;height:24px}
}
body[data-skin="mac"] .dicon-art{color:#000;--ac:#000;filter:none;animation:none!important;background:none}
/* one bit has no glow and no spring: the inverted name is its hover */
body[data-skin="mac"] .dicon::before{display:none}
body[data-skin="mac"] .dicon-art{translate:none!important}
/* The icons' four tones in one bit: the outline and the accent black, the
   highlight white, and the body — the 48% tone — the 50% pattern. */
body[data-skin="mac"] .dicon-art svg.px path[opacity=".17"]{fill:#fff;opacity:1}
body[data-skin="mac"] .dicon-art svg.px path[opacity=".48"]{fill:url(#mac-grey);opacity:1}
body[data-skin="mac"] .dicon > span:last-child{
  background:#fff;color:#000;text-shadow:none;animation:none!important;
  font-family:var(--chi);font-size:12px;line-height:1.15;padding:0 4px;letter-spacing:0}
body[data-skin="mac"] .dicon:hover > span:last-child,body[data-skin="mac"] .dicon:focus-visible > span:last-child{background:#000;color:#fff}
body[data-skin="mac"] .dicon:focus-visible{outline:none}
body[data-skin="mac"] .dicon:hover .dicon-art svg,body[data-skin="mac"] .dicon:focus-visible .dicon-art svg{filter:invert(1)}
/* the trash sits where the Finder kept it, bottom right */
.dicon[data-w="player"],.dicon-trash{display:none}
body[data-skin="mac"] .dicon[data-w="player"]{display:flex}
body[data-skin="mac"] .dicon-trash{display:flex;position:fixed;right:16px;bottom:14px}

/* ---------- windows ---------- */
body[data-skin="mac"] .win{
  border:1px solid #000;border-radius:0;box-shadow:2px 2px 0 #000;
  background:#fff;animation:none;
}
body[data-skin="mac"] .win.closing{animation:none;display:none}
body[data-skin="mac"] .titlebar{
  height:22px;flex-basis:22px;padding:0 8px;background:#fff;
  border-bottom:1px solid #000;cursor:default;
}
/* the pinstripes, only on the window in front — the rest go plain, as
   they did */
body[data-skin="mac"] .win.focus .titlebar::before{
  content:'';position:absolute;left:2px;right:2px;top:4px;bottom:4px;
  background:repeating-linear-gradient(180deg,#000 0 1px,#fff 1px 2px);
}
body[data-skin="mac"] .win:not(.focus) .titlebar{background:#fff;color:#000}
body[data-skin="mac"] .tb-title{
  left:50%;right:auto;transform:translateX(-50%);z-index:1;
  background:#fff;padding:0 8px;white-space:nowrap;max-width:calc(100% - 70px);
  overflow:hidden;text-overflow:ellipsis;
  font-family:var(--chi);font-size:14px;font-weight:400;letter-spacing:0;line-height:20px;
}
body[data-skin="mac"] .tb-title .tb-ico{display:none}
/* the close box on the left, the zoom box on the right; no minimise in 1984 */
body[data-skin="mac"] .tb-dots{position:static;gap:0}
body[data-skin="mac"] .dot{
  width:13px;height:13px;border-radius:0;border:1px solid #000;background:#fff!important;
  box-shadow:0 0 0 2px #fff;filter:none!important;z-index:1}
body[data-skin="mac"] .dot::after{display:none}
body[data-skin="mac"] .dot-min{display:none}
body[data-skin="mac"] .dot-zoom{position:absolute;right:8px;top:4px}
body[data-skin="mac"] .dot-zoom::before{content:'';position:absolute;left:0;top:0;width:6px;height:6px;border-right:1px solid #000;border-bottom:1px solid #000}
body[data-skin="mac"] .dot:active{background:#000!important}
body[data-skin="mac"] .win:not(.focus) .dot{visibility:hidden}

body[data-skin="mac"] .win-body{background:#fff;color:#000}
body[data-skin="mac"] .win-body::-webkit-scrollbar{width:16px;height:16px}
body[data-skin="mac"] .win-body::-webkit-scrollbar-track{background:var(--checker);border-left:1px solid #000}
body[data-skin="mac"] .win-body::-webkit-scrollbar-thumb{background:#fff;border:1px solid #000;border-radius:0}
body[data-skin="mac"] .win-body::-webkit-scrollbar-button:single-button{display:block;height:16px;background:#fff;border-left:1px solid #000}
body[data-skin="mac"] .win-body{scrollbar-color:#000 #fff}
body[data-skin="mac"] .resize::after{width:11px;height:11px;right:2px;bottom:2px;background:#fff;
  border:1px solid #000;box-shadow:inset -4px -4px 0 -3px #000}

/* ---------- the content, in one bit ---------- */
body[data-skin="mac"] .win-body,
body[data-skin="mac"] .win-body p,
body[data-skin="mac"] .win-body li{font-family:var(--gen)}
body[data-skin="mac"] .hd,body[data-skin="mac"] .ah-t,body[data-skin="mac"] .pl-t,
body[data-skin="mac"] .os-name,body[data-skin="mac"] .dlg h3,body[data-skin="mac"] .trk-t,
body[data-skin="mac"] .sku h4,body[data-skin="mac"] .tr-t{font-family:var(--chi);font-weight:400;letter-spacing:0;--hand-acc:none}
body[data-skin="mac"] .eyebrow{font-family:var(--chi);letter-spacing:0;text-transform:none;font-size:12px}
body[data-skin="mac"] .win-body img{border-radius:0!important;box-shadow:none!important}
/* buttons: the rounded rectangle with a one-pixel rule, inverting when pressed */
body[data-skin="mac"] .btn{
  background:#fff;color:#000;border:1px solid #000;border-radius:7px;
  font-family:var(--chi);font-weight:400;font-size:13px;letter-spacing:0;padding:5px 16px;box-shadow:none}
body[data-skin="mac"] .btn:hover{transform:none}
body[data-skin="mac"] .btn:active{background:#000;color:#fff}
/* the default button carried a thick outer ring */
body[data-skin="mac"] .btn-o{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
body[data-skin="mac"] .soon-tag{border-color:#000}

body[data-skin="mac"] .album-hero{background:#fff;color:#000;border-bottom:1px solid #000}
body[data-skin="mac"] .album-hero img{border:1px solid #000}
body[data-skin="mac"] .album-hero .ah-m,body[data-skin="mac"] .album-hero .ah-d{opacity:1}
body[data-skin="mac"] .trk:hover,body[data-skin="mac"] .trk.is-playing{background:#000;color:#000}
body[data-skin="mac"] .trk:hover *,body[data-skin="mac"] .trk.is-playing *{color:#fff!important}
body[data-skin="mac"] .trk + .trk{border-top:1px solid #000}
body[data-skin="mac"] .trk-go{border-radius:0;background:#fff;border:1px solid #000}
body[data-skin="mac"] .trk:hover .trk-go{background:#fff;color:#000!important}
body[data-skin="mac"] .trk:hover .trk-go svg{fill:#000}
body[data-skin="mac"] .trk.locked .trk-art{filter:none;-webkit-mask:var(--dim);mask:var(--dim)}
body[data-skin="mac"] .trk-art{border:1px solid #000}

/* the player turns from a dark slab into a desk accessory */
body[data-skin="mac"] .player{background:#fff;color:#000}
body[data-skin="mac"] .pl-art img{filter:none!important}
body[data-skin="mac"] .pl-art .spin{animation:none}
body[data-skin="mac"] .pl-meta,body[data-skin="mac"] .pl-ctrl{color:#000}
body[data-skin="mac"] .pl-a,body[data-skin="mac"] .pl-times,body[data-skin="mac"] .pl-note{color:#000}
body[data-skin="mac"] .pl-viz{border-bottom:1px solid #000;margin:0 24px;padding:8px 0 0}
body[data-skin="mac"] .pl-viz i{background:#000;border-radius:0}
body[data-skin="mac"] .pl-bar-t{height:8px;border-radius:0;background:#fff;border:1px solid #000}
body[data-skin="mac"] .pl-bar-f{height:8px;border-radius:0;background:var(--checker)}
body[data-skin="mac"] .pl-bar-h{border-radius:0;width:9px;height:16px;background:#fff;border:1px solid #000;box-shadow:none}
body[data-skin="mac"] .pl-btns button{color:#000;border-radius:0}
body[data-skin="mac"] .pl-btns button:hover{color:#000;transform:none}
body[data-skin="mac"] .pl-play{background:#fff!important;color:#000!important;border:1px solid #000;border-radius:8px!important;
  box-shadow:0 0 0 2px #fff,0 0 0 4px #000!important}
body[data-skin="mac"] .pl-play:active{background:#000!important;color:#fff!important}
body[data-skin="mac"] .pl-ctrl p{color:#000!important}
body[data-skin="mac"] .pl-ctrl .btn-ghost{color:#000!important;border-color:#000!important}
body[data-skin="mac"] .pl-skip{color:#000;font-family:var(--chi);font-size:12px}
body[data-skin="mac"] .pl-skip button{border-radius:0;border:1px solid #000;background:#fff;color:#000;width:28px;height:22px}
body[data-skin="mac"] .pl-skip button:hover{transform:none}
body[data-skin="mac"] .pl-skip button:active{background:#000;color:#fff}

/* The Deck in one bit: no colour to wear, so the cover's colour becomes
   white paper and every picture is dithered (the watcher above does it).
   Played bars are solid, the rest grey dots; the song you are on is the
   inverted row, like a selected file in the Finder. */
body[data-skin="mac"] .win[data-id="player"] .win-body{background:#fff}
body[data-skin="mac"] .deck{--ink:#000;--dim:#000;--faint:#000;--line:#000;--sheet:#fff;--hover:transparent;--list-bg:#fff;
  background:#fff;color:#000;font-family:var(--chi)}
body[data-skin="mac"] .deck *{box-shadow:none!important;text-shadow:none!important}
body[data-skin="mac"] .deck :is(p,span,b,small,em,button,h2){font-family:var(--chi);font-weight:400;letter-spacing:0}
body[data-skin="mac"] .dk-t,body[data-skin="mac"] .dk-alb{--hand-acc:none;font-family:var(--chi)}
body[data-skin="mac"] .dk-t{font-size:clamp(26px,3.6cqw,36px)}
body[data-skin="mac"] .dk-art{background:#fff;border-right:1px solid #000}
body[data-skin="mac"] .dk-art::before,body[data-skin="mac"] .dk-art::after{display:none}
body[data-skin="mac"] .dk-obj{filter:none;transform:none!important;animation:none!important}
body[data-skin="mac"] .deck.is-locked .dk-obj{visibility:hidden}
body[data-skin="mac"] .deck.is-locked .dk-art{background:var(--checker)}
body[data-skin="mac"] .dk-lock{background:#fff;color:#000;border:1px solid #000;border-radius:6px;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-skin="mac"] .dk-cap{color:#fff;background:#000;border-radius:0}
body[data-skin="mac"] .dk-wave i{border-radius:0;background:var(--checker);transition:none}
body[data-skin="mac"] .dk-wave i.p,body[data-skin="mac"] .dk-wave i.h{background:#000}
body[data-skin="mac"] .dk-trans button{border-radius:0;color:#000}
body[data-skin="mac"] .dk-trans button:hover{background:none;transform:none}
body[data-skin="mac"] .dk-trans .dk-play,body[data-skin="mac"] .dk-cta{background:#fff;color:#000;border:2px solid #000;border-radius:10px}
body[data-skin="mac"] .dk-trans .dk-play:hover{background:#fff;color:#000;transform:none}
body[data-skin="mac"] .dk-trans .dk-play:active,body[data-skin="mac"] .dk-cta:active{background:#000;color:#fff}
body[data-skin="mac"] .dk-chip,body[data-skin="mac"] .dk-list footer button,body[data-skin="mac"] .dk-upnext,body[data-skin="mac"] .dk-lx{
  border:1px solid #000;border-radius:6px;background:#fff;color:#000}
body[data-skin="mac"] .dk-chip:hover,body[data-skin="mac"] .dk-list footer button:hover{background:#000;color:#fff}
body[data-skin="mac"] .dk-chip.dk-dl{border-width:2px}
body[data-skin="mac"] .dk-upnext span,body[data-skin="mac"] .dk-upnext em{color:#000}
body[data-skin="mac"] .dk-list{border-left:1px solid #000}
body[data-skin="mac"] .dk-list header{border-bottom:1px solid #000}
body[data-skin="mac"] .dk-cov,body[data-skin="mac"] .dk-th{border-radius:0;border:1px solid #000}
body[data-skin="mac"] .dk-row{border-radius:0;color:#000}
body[data-skin="mac"] .dk-row.on{background:#000}
body[data-skin="mac"] .dk-row.on :is(.dk-n,.dk-rt b,.dk-rt small,.dk-rd){color:#fff}
body[data-skin="mac"] .dk-eq i{background:#000;animation:none}
body[data-skin="mac"] .dk-row.on .dk-eq i{background:#fff}
/* a mask reads alpha: the gaps must be transparent (the skin's --dim is
   that pattern, but inside the Deck --dim is a colour) */
body[data-skin="mac"] .dk-row.lk .dk-th{filter:none;
  -webkit-mask:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0) 0 0/2px 2px;
  mask:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0) 0 0/2px 2px}
body[data-skin="mac"] .dk-row.pend .dk-th{background:var(--checker)}

body[data-skin="mac"] .gal figure{border-radius:0;box-shadow:none;border:1px solid #000;background:#fff}
body[data-skin="mac"] .gal-tabs{background:#fff;border:1px solid #000;border-radius:0;padding:0;gap:0}
body[data-skin="mac"] .gal-tab{border-radius:0;color:#000;font-family:var(--chi);font-weight:400}
body[data-skin="mac"] .gal-tab[aria-selected="true"]{background:#000;color:#fff;box-shadow:none}
body[data-skin="mac"] .bts-empty,body[data-skin="mac"] .bts-empty b{color:#000;font-family:var(--chi)}

body[data-skin="mac"] .facts{background:#000;border-color:#000}
body[data-skin="mac"] .fact b{letter-spacing:0;text-transform:none;font-family:var(--chi);font-weight:400}
body[data-skin="mac"] .sku,body[data-skin="mac"] .tr-marca,body[data-skin="mac"] .tr-hecho,body[data-skin="mac"] .os-r{
  border:1px solid #000;border-radius:0;box-shadow:none!important;background:#fff}
body[data-skin="mac"] .sku:hover,body[data-skin="mac"] .tr-marca:hover,body[data-skin="mac"] .tr-hecho:hover{transform:none;box-shadow:2px 2px 0 #000!important}
body[data-skin="mac"] .sku-ico{border-radius:0;background:#fff;border:1px solid #000;filter:grayscale(1)}
body[data-skin="mac"] .os-r.is-soon{opacity:1;-webkit-mask:var(--dim);mask:var(--dim)}
/* a store placeholder: the same System 1 "dimmed" as a disabled menu item */
body[data-skin="mac"] .sku .btn.is-soon{-webkit-mask:var(--dim);mask:var(--dim)}
body[data-skin="mac"] .os-r-tag{border-radius:0}
body[data-skin="mac"] .gb-form{background:#fff;border-bottom:1px solid #000}
body[data-skin="mac"] .gb-form input,body[data-skin="mac"] .gb-form textarea{
  border:1px solid #000;border-radius:0;background:#fff;font-family:var(--gen)}
body[data-skin="mac"] .gb-form input:focus,body[data-skin="mac"] .gb-form textarea:focus{box-shadow:none;border-color:#000;outline:1px solid #000}
body[data-skin="mac"] .gb-item{border-bottom:1px solid #000}
body[data-skin="mac"] .gb-msg::before{color:#000}
body[data-skin="mac"] .dlg-ico{filter:grayscale(1)}
body[data-skin="mac"] .txt{color:#000;font-family:Monaco,var(--mono)}
body[data-skin="mac"] .soc{color:#000;--ac:#000}

/* ---------- the character sheet, on white paper ---------- */
body[data-skin="mac"] .win-sheet .win-body,
body[data-skin="mac"] .scene-wrap{background:#fff}
body[data-skin="mac"] .scene{background:#fff;border-radius:0;border:1px solid #000}
body[data-skin="mac"] .sky{display:none}
body[data-skin="mac"] .pc-shadow{display:none}
body[data-skin="mac"] .pc-art{animation:none}
/* The glow is a colour; in one bit the selection highlight is inversion. */
body[data-skin="mac"] .pc:hover .pc-art,body[data-skin="mac"] .pc:focus-within .pc-art{filter:invert(1)}
body[data-skin="mac"] .pc-lab{color:#000;font-family:var(--chi);letter-spacing:.1em}
body[data-skin="mac"] .pc:hover .pc-lab{color:#000}
body[data-skin="mac"] .pnl{border:1px solid #000;border-radius:0;background:#fff;box-shadow:none}
body[data-skin="mac"] .pnl-bar{background:#fff;border-bottom:1px solid #000}
body[data-skin="mac"] .pnl-bar b{color:#000;font-family:var(--chi);letter-spacing:.06em}
body[data-skin="mac"] .pnl-bar i{border-color:#000;border-radius:0}
body[data-skin="mac"] .pnl--head .pnl-in{background:none}
body[data-skin="mac"] .scan{display:none}
body[data-skin="mac"] .sw{filter:grayscale(1) contrast(40);border-radius:0;border-color:#000}
body[data-skin="mac"] .id-origin,body[data-skin="mac"] .id-lines{color:#000;font-family:var(--chi);letter-spacing:0}
body[data-skin="mac"] .id-stats{border:1px solid #000;border-radius:0;background:#fff;box-shadow:none}
body[data-skin="mac"] .st b,body[data-skin="mac"] .st em{color:#000;font-family:var(--chi);letter-spacing:0}
body[data-skin="mac"] .st i{border-color:#000;border-radius:0;background:#fff}
body[data-skin="mac"] .st u{background:#000!important}
body[data-skin="mac"] .st:hover i{box-shadow:none;border-color:#000}
body[data-skin="mac"] .st:hover b{color:#000}
body[data-skin="mac"] .scene-tip{background:#fff;color:#000;border-top:1px solid #000;font-family:var(--chi);letter-spacing:.04em}

/* ---------- the era switch: menu titles, and the current one inverts ---------- */
body[data-skin="mac"] .era-bar{border:0;border-radius:0;background:none;padding:0;gap:0;font-family:var(--chi);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body[data-skin="mac"] .era-bar button{border-radius:0;opacity:1;font-size:13px;padding:2px 8px;transition:none}
body[data-skin="mac"] .era-bar button b{font:inherit;opacity:.55}
body[data-skin="mac"] .era-bar button:hover{background:none;text-decoration:underline}
body[data-skin="mac"] .era-bar button[aria-current="true"]{background:#000;color:#fff;text-decoration:none}
body[data-skin="mac"] .era-bar button[aria-current="true"] b{opacity:.7}

/* ---------- a phone ---------- */
/* The icon column is hidden on a phone, so there System 1 keeps a bar
   at the bottom — as a strip of white with a black rule, the way a
   Finder window's header looked. Off since 2026-10-26: phones have no dock
   in any era (style.css, MOBILE), and the ✦ menu holds its apps. Kept for
   the day it comes back. */
@media (max-width:840px),(max-height:500px) and (hover:none){
  body[data-skin="mac"] .dock{display:block;
    background:#fff;border-top:1px solid #000;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-skin="mac"] .dock-track{-webkit-mask-image:none;mask-image:none}
  body[data-skin="mac"] .dock-btn{color:#000;--ac:#000;border-radius:0}
  body[data-skin="mac"] .dock-btn svg.px path[opacity=".17"]{fill:#fff;opacity:1}
  body[data-skin="mac"] .dock-btn svg.px path[opacity=".48"]{fill:url(#mac-grey);opacity:1}
  body[data-skin="mac"] .dock-lab{color:#000;font-family:var(--chi);font-size:11px}
  body[data-skin="mac"] .dock-btn.on,body[data-skin="mac"] .dock-btn.pre{background:#000}
  body[data-skin="mac"] .dock-btn.on svg,body[data-skin="mac"] .dock-btn.pre svg{filter:invert(1)}
  body[data-skin="mac"] .dock-btn.on .dock-lab{color:#fff}
  body[data-skin="mac"] .dock-preview{background:#fff;border:1px solid #000;border-radius:0;box-shadow:2px 2px 0 #000;color:#000}
  /* Chicago is wider than the system font: without this the clock falls
     off the right edge of a phone */
  body[data-skin="mac"] .menubar{font-size:13px}
  body[data-skin="mac"] .menu-btn{padding:3px 7px}
  body[data-skin="mac"] .mb-vol{display:none}
  body[data-skin="mac"] .menubar .mb-era{background:#fff;border:1px solid #000;box-shadow:2px 2px 0 #000}
  body[data-skin="mac"] .dicon-trash{display:none}
  body[data-skin="mac"] .hint{bottom:calc(var(--dock-total) + 14px);white-space:normal;text-align:center}
  body[data-skin="mac"] .win{border-radius:0;border-width:1px 0 0}
  body[data-skin="mac"] .titlebar{height:30px;flex-basis:30px}
  body[data-skin="mac"] .titlebar::before{top:4px!important;bottom:4px!important;width:auto;height:auto;border-radius:0;transform:none;left:2px}
  body[data-skin="mac"] .tb-title{top:auto;line-height:28px}
  body[data-skin="mac"] .dot-zoom{display:none}
  body[data-skin="mac"] .dot{width:17px;height:17px}
}

/* =========================================================
   THE CONTROL PANEL
   Drawn for System 1 but readable in any skin: it is already one bit.
   ========================================================= */
.cp{display:grid;grid-template-columns:86px 1fr 1fr;grid-template-rows:auto auto auto;gap:6px;
  padding:8px;background:#000;height:100%;font-family:'ChicagoFLF',Geneva,var(--ui);color:#000}
.cp-cell{background:#fff;border:2px solid #fff;outline:1px solid #000;outline-offset:-3px;
  padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0}
.cp-lab{font-size:12px;line-height:1}
.cp-vol{grid-row:1 / span 3}
.cp-vol input{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:14px;height:150px;background:#fff;border:1px solid #000;margin:0;cursor:pointer}
.cp-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:12px;background:#fff;border:1px solid #000;border-radius:0}
.cp-vol input::-moz-range-thumb{width:22px;height:12px;background:#fff;border:1px solid #000;border-radius:0}
.cp-vol-row{display:flex;gap:8px;align-items:stretch}
.cp-scale{height:150px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;padding:2px 0}
.cp-scale i{font-style:normal;line-height:1}
.cp-time{grid-column:2 / span 2}
.cp-clock{font-weight:400;font-size:20px;white-space:pre;font-variant-numeric:tabular-nums;
  border:1px solid #000;padding:4px 12px}
.cp-seg{display:inline-flex;border:1px solid #000}
.cp-seg button{padding:3px 9px;font-size:13px;line-height:1.2;background:#fff;color:#000;border-left:1px solid #000;white-space:nowrap}
.cp-seg button:first-child{border-left:0}
.cp-seg button.on{background:#000;color:#fff}
.cp-pat-big{display:block;width:100%;height:40px;border:1px solid #000;background-repeat:repeat}
.cp-pats{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.cp-pats button{width:20px;height:20px;border:1px solid #000;background-repeat:repeat}
.cp-pats button.on{outline:2px solid #000;outline-offset:1px}
.cp-skin{grid-column:3}
.cp-skin .cp-seg{flex-direction:column}
.cp-skin .cp-seg button{border-left:0;border-top:1px solid #000}
.cp-skin .cp-seg button:first-child{border-top:0}
@media (max-width:840px),(max-height:500px) and (hover:none){
  .cp{grid-template-columns:70px 1fr;height:auto}
  .cp-time,.cp-skin{grid-column:2}
  .cp-vol{grid-row:1 / span 5}
}
/* Chicago runs wide: on the smallest phones the menus tighten up so the
   clock stays on screen */
@media (max-width:400px){
  body[data-skin="mac"] .menu-btn{padding:3px 5px}
  body[data-skin="mac"] .menubar{font-size:12px}
}

/* the player's "Share song": a plain 1-bit push button */
body[data-skin="mac"] .pl-share{color:#000;border:1px solid #000;border-radius:0;font-family:'ChicagoFLF',Geneva,var(--ui);font-weight:400}
body[data-skin="mac"] .pl-share:hover,body[data-skin="mac"] .pl-share:focus-visible{background:#000;color:#fff}

/* the work card in one bit */
body[data-skin="mac"] .work-card{border-radius:0;font-family:var(--chi)}
body[data-skin="mac"] .wc-mark{font-family:var(--chi);font-weight:400;letter-spacing:.08em}
body[data-skin="mac"] .wc-mark svg{fill:#000}
body[data-skin="mac"] .wc-role{color:#000}
body[data-skin="mac"] .wc-go{border:1px solid #000;border-radius:0;background:#fff;color:#000;font-family:var(--chi);font-weight:400}
body[data-skin="mac"] .wc-main{border-width:2px}
body[data-skin="mac"] .wc-go:hover,body[data-skin="mac"] .wc-go:focus-visible{background:#000;color:#fff}

/* the contact form in one bit */
body[data-skin="mac"] .ct input[name=name],body[data-skin="mac"] .ct input[type=email],body[data-skin="mac"] .ct textarea{border:1px solid #000;border-radius:0}
body[data-skin="mac"] .ct-topics span{border:1px solid #000;border-radius:0;color:#000;font-family:var(--chi)}
body[data-skin="mac"] .ct-topics input:checked+span{background:#000;color:#fff}
body[data-skin="mac"] .ct-mail,body[data-skin="mac"] .ct-sent{color:#000}

/* the official video's tag and play button in one bit */
body[data-skin="mac"] .trk-vid{border-radius:0;background:#fff;color:#000;border:1px solid #000;font-family:var(--chi);font-weight:400}
body[data-skin="mac"] .vid-play{border-radius:0;background:#000;border:2px solid #fff;outline:1px solid #000;-webkit-backdrop-filter:none;backdrop-filter:none}

/* nftOS in one bit: a black vitrine, not paper. The slab pictures carry the
   dark background baked in (slabs.sh), so on white each one dithered into a
   grey box; on black they sit flush. Holo turns to plain white. */
body[data-skin="mac"] .nft-body{background:#000;color:#fff}
body[data-skin="mac"] .nft-body::-webkit-scrollbar-track{background:var(--checker)}
body[data-skin="mac"] .nft-title,body[data-skin="mac"] .nft-name{font-family:var(--chi);font-style:normal;font-weight:400;letter-spacing:0}
body[data-skin="mac"] .nft-name{background:none;color:#fff;-webkit-text-fill-color:#fff}
body[data-skin="mac"] .nft-set,body[data-skin="mac"] .nft-count,body[data-skin="mac"] .nft-by,
body[data-skin="mac"] .nft-no,body[data-skin="mac"] .nft-foot p,body[data-skin="mac"] .nft-collect p,
body[data-skin="mac"] .nft-hint,body[data-skin="mac"] .nft-spec dt,body[data-skin="mac"] .nft-pager{color:#fff}
body[data-skin="mac"] .nft-dots i{background:none;border:1px solid #fff;border-radius:0}
body[data-skin="mac"] .nft-dots i.on{background:#fff}
body[data-skin="mac"] .nft-spec{background:#fff;border-color:#fff;border-radius:0}
body[data-skin="mac"] .nft-spec div{background:#000}
body[data-skin="mac"] .nft-stage{background:none}
body[data-skin="mac"] .slab-holo,body[data-skin="mac"] .slab-glare{display:none}
body[data-skin="mac"] .nft .soon-tag{border-color:currentColor}
body[data-skin="mac"] .nft-back,body[data-skin="mac"] .nft-flip,body[data-skin="mac"] .nft-pager button{color:#fff;border-color:#fff;border-radius:0}
body[data-skin="mac"] .nft-page{background:#000;animation:none;font-family:var(--chi)}
body[data-skin="mac"] .np-bar{border-bottom:1px solid #fff}
body[data-skin="mac"] .np-btn{color:#fff;border-radius:0}
body[data-skin="mac"] .np-home{border:2px solid #fff}
body[data-skin="mac"] .np-btn:hover{background:#fff;color:#000}
body[data-skin="mac"] .nft-share{color:#fff;text-decoration-color:#fff}
body[data-skin="mac"] .nft-dl{border-top-color:#fff}
body[data-skin="mac"] .nft-dl-btn{border:2px solid #fff;border-radius:0;font-family:var(--chi);font-weight:400}
body[data-skin="mac"] .nft-dl-btn:hover{background:#fff;color:#000}
body[data-skin="mac"] .nft-dl-price{border-radius:0;background:none;border:1px solid currentColor}
body[data-skin="mac"] .nft-dl p{color:#fff}
body[data-skin="mac"] .menu-btn.mb-nft.on{background:#000;color:#fff}
/* one bit: no accent to light it with, so it is outlined, and inverts on hover */
body[data-skin="mac"] .menu-btn.mb-support{background:#fff;color:#000;border:1px solid #000;border-radius:0;font-weight:400}
body[data-skin="mac"] .menu-btn.mb-support:hover{background:#000;color:#fff}
/* Chicago is wider than the 2026 face: when the bar is tight (fitBar in
   app.js) the menus close up as well as losing Support's word. */
body[data-skin="mac"] .menubar.bar-tight .menu-btn{padding:3px 6px}
body[data-skin="mac"] .menubar.bar-tighter .menu-btn{padding:3px 3px}
/* the album row's download pill in one bit */
body[data-skin="mac"] .trk-dl{border-radius:0;border-color:#000;color:#000;font-family:var(--chi)}
body[data-skin="mac"] .trk-dl:hover,body[data-skin="mac"] .trk-dl:focus-visible{background:#000;color:#fff;border-color:#000}
/* "How does this work?" in one bit */
body[data-skin="mac"] .how-list dt{color:#000}
body[data-skin="mac"] .how-list dd{color:#000}
body[data-skin="mac"] .how-sign{font-family:var(--chi);--hand-acc:none;font-size:13px}