/* ===========================================================
   CHRISTIAN.OS — Compact Macintosh shell + System UI
   Palette via tokens.css (Mexico City Retro-OS).
   Screen is a warm 1-bit-ish phosphor; case is warm beige.
   =========================================================== */
@import url('tokens.css');

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body.os{
  font-family:var(--sans);color:var(--ink);overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #c4623f 0%, #a8472a 42%, #7d3320 100%);
  position:relative;
}
/* plaster texture + soft vignette on the wall */
body.os::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body.os::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(60,18,8,.55) 100%);
}

/* ---- stage / scaling ---- */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;}
.mac-wrap{transform-origin:center center;}

/* ===========================================================
   THE MACINTOSH
   case 1180 x 1010 ; screen at x150 y60 w880 h600
   =========================================================== */
.mac{
  position:relative;width:1180px;height:1010px;border-radius:60px 60px 44px 44px;
  background:
    linear-gradient(168deg,#e4d9c2 0%, #d8cbb0 22%, #ccbd9e 60%, #bdac8a 100%);
  box-shadow:
    inset 0 6px 12px rgba(255,255,255,.55),
    inset 0 -22px 40px rgba(120,98,60,.4),
    inset 22px 0 40px rgba(255,255,255,.18),
    inset -26px 0 46px rgba(120,98,60,.32),
    0 50px 90px -30px rgba(40,12,4,.7),
    0 18px 30px -16px rgba(40,12,4,.55);
}
/* top breathing vents */
.mac .vents-top{position:absolute;top:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;}
.mac .vents-top i{width:4px;height:16px;border-radius:3px;background:linear-gradient(#9c8a64,#7d6c47);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3);display:block;}

/* recessed screen bezel */
.bezel{
  position:absolute;left:120px;top:44px;width:940px;height:632px;border-radius:26px;
  background:linear-gradient(160deg,#c6b794,#b09f7c);
  background-color:#bdae8e;
  box-shadow:
    inset 0 5px 10px rgba(120,98,60,.55),
    inset 0 -4px 8px rgba(255,255,255,.35);
  padding:16px;
}
.bezel-inner{
  position:relative;width:100%;height:100%;border-radius:16px;background:#2b2622;
  padding:14px;
  box-shadow:inset 0 0 0 3px #15120f, inset 0 0 22px rgba(0,0,0,.8);
}

/* the live screen (desktop) */
.screen{
  position:relative;width:880px;height:600px;border-radius:9px;overflow:hidden;
  background:var(--paper);
  box-shadow:inset 0 0 30px rgba(30,40,60,.18);
  cursor:default;
}
/* CRT glow + scanlines + corner darkening */
.screen .crt{position:absolute;inset:0;pointer-events:none;z-index:9000;}
.screen .crt::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(40,27,18,.05) 0 1px, transparent 1px 3px);}
.screen .crt::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(20,30,45,.22) 100%);
  box-shadow:inset 0 0 60px rgba(255,255,255,.12);}

/* chin: logo, label, floppy */
.chin{position:absolute;left:0;right:0;top:700px;height:310px;}
.apple{position:absolute;left:150px;top:34px;width:46px;height:56px;}
.mac-label{position:absolute;left:206px;top:46px;font-family:'Times New Roman',Georgia,serif;
  font-style:italic;font-weight:600;font-size:30px;color:#6f5f40;letter-spacing:.5px;
  text-shadow:0 1px 0 rgba(255,255,255,.4);}
.floppy{position:absolute;right:150px;top:54px;width:300px;height:26px;border-radius:4px;
  background:linear-gradient(#9d8c66,#83734d);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.3);}
.floppy::after{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:200px;height:5px;border-radius:3px;background:#5f5235;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);}
.chin-vents{position:absolute;right:150px;top:150px;width:300px;display:flex;flex-direction:column;gap:9px;}
.chin-vents i{height:5px;border-radius:3px;background:linear-gradient(#9c8a64,#7d6c47);box-shadow:inset 0 1px 1px rgba(255,255,255,.25);}

/* little base/foot shadow under the mac */
.mac-foot{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:78%;height:46px;
  background:#a9986f;border-radius:0 0 30px 30px;
  box-shadow:0 26px 40px -16px rgba(40,12,4,.6);z-index:-1;}

/* ===========================================================
   SYSTEM UI (inside .screen)
   =========================================================== */
.menubar{
  position:absolute;top:0;left:0;right:0;height:24px;z-index:5000;
  background:var(--paper);border-bottom:1.5px solid var(--ink);
  display:flex;align-items:center;gap:2px;padding:0 8px;
  font-family:var(--pixel);font-weight:600;font-size:15px;
}
.menubar .mb-apple{width:16px;height:18px;margin-right:6px;display:flex;align-items:center;}
.menubar .mi{padding:1px 9px;border-radius:3px;cursor:default;line-height:20px;}
.menubar .mi:hover,.menubar .mi.open{background:var(--ink);color:var(--paper);}
.menubar .sp{flex:1;}
.menubar .mb-clock{font-family:var(--pixel);font-size:14px;padding:1px 6px;white-space:nowrap;}

/* dropdown menus */
.dropdown{position:absolute;top:24px;z-index:6000;min-width:200px;background:var(--paper);
  border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(36,27,18,.5);display:none;padding:3px;}
.dropdown.show{display:block;}
.dropdown .dd{display:flex;justify-content:space-between;gap:18px;align-items:center;
  font-family:var(--pixel);font-weight:600;font-size:14px;padding:4px 12px;cursor:default;border-radius:2px;}
.dropdown .dd:hover{background:var(--sinopia);color:var(--paper);}
.dropdown .dd.disabled{color:#b3a489;pointer-events:none;}
.dropdown .dd .k{font-family:var(--pixel);opacity:.6;font-size:12px;}
.dropdown .sep{height:1.5px;background:var(--ink);margin:4px 6px;opacity:.25;}

/* desktop area */
.desktop{position:absolute;top:24px;left:0;right:0;bottom:0;overflow:hidden;}

/* wallpaper patterns (set on .desktop via data-wp) */
.desktop{background-color:var(--paper);}
.desktop[data-wp="classic"]{background-image:radial-gradient(rgba(36,27,18,.32) 1px, transparent 1.4px);background-size:4px 4px;}
.desktop[data-wp="weave"]{background-image:
  linear-gradient(45deg, rgba(36,27,18,.18) 25%, transparent 25%, transparent 75%, rgba(36,27,18,.18) 75%),
  linear-gradient(45deg, rgba(36,27,18,.18) 25%, transparent 25%, transparent 75%, rgba(36,27,18,.18) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;}
.desktop[data-wp="dots"]{background-image:radial-gradient(var(--sinopia) 1.6px, transparent 1.8px);background-size:20px 20px;background-color:#f1e7d2;}
.desktop[data-wp="talavera"]{background-image:
  radial-gradient(circle at 10px 10px, rgba(51,100,103,.5) 3px, transparent 4px),
  radial-gradient(circle at 0 0, rgba(215,52,11,.35) 2px, transparent 3px),
  radial-gradient(circle at 20px 20px, rgba(215,52,11,.35) 2px, transparent 3px);
  background-size:20px 20px;background-color:#efe6cf;}
.desktop[data-wp="grid"]{background-image:
  linear-gradient(rgba(51,100,103,.25) 1px, transparent 1px),
  linear-gradient(90deg, rgba(51,100,103,.25) 1px, transparent 1px);
  background-size:22px 22px;background-color:#f3ecd8;}
.desktop[data-wp="plain"]{background-color:#efe6d1;}
.desktop[data-wp="sky"]{background:linear-gradient(180deg,#bcd6d8,#e7e0cb 75%);}

/* desktop icons */
.dicon{position:absolute;width:80px;text-align:center;cursor:default;z-index:30;
  display:flex;flex-direction:column;align-items:center;gap:3px;user-select:none;}
.dicon .gly{width:48px;height:46px;display:flex;align-items:center;justify-content:center;}
.dicon .lbl{font-family:var(--pixel);font-weight:600;font-size:12.5px;line-height:1.15;color:var(--ink);
  background:var(--paper);padding:0 4px;border-radius:2px;}
.dicon.sel .lbl{background:var(--ink);color:var(--paper);}
.dicon.sel .gly{filter:none;}
.dicon svg{display:block;}

/* ===========================================================
   WINDOWS (classic Mac)
   =========================================================== */
.win{position:absolute;background:var(--paper);border:1.5px solid var(--ink);z-index:100;
  box-shadow:1px 1px 0 var(--ink),5px 6px 14px -4px rgba(36,27,18,.5);
  display:flex;flex-direction:column;min-width:200px;animation:winpop .26s var(--ease-pop) both;}
@keyframes winpop{from{opacity:0;transform:scale(.96) translateY(6px);}to{opacity:1;transform:none;}}
.win.closing{animation:winclose .16s ease forwards;}
@keyframes winclose{to{opacity:0;transform:scale(.95);}}
.title{height:21px;display:flex;align-items:center;gap:6px;padding:0 6px;border-bottom:1.5px solid var(--ink);
  position:relative;cursor:grab;background:var(--paper);}
.title:active{cursor:grabbing;}
.title .close{width:13px;height:13px;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;flex:0 0 auto;}
.title .close:hover{background:var(--sinopia);}
.title .tt{flex:1;text-align:center;font-family:var(--pixel);font-weight:600;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;background:var(--paper);position:relative;z-index:1;}
/* the classic 6 stripes on active title bar */
.win.active .title::before{content:"";position:absolute;left:24px;right:8px;top:3px;bottom:3px;
  background:repeating-linear-gradient(0deg,var(--ink) 0 1px, transparent 1px 3px);opacity:.9;}
.win:not(.active) .title .tt{color:#8a7c63;}
.win:not(.active){box-shadow:1px 1px 0 var(--ink);}
.body{padding:14px;overflow:auto;flex:1;}
.body::-webkit-scrollbar{width:14px;height:14px;}
.body::-webkit-scrollbar-track{background:var(--paper-2);border-left:1.5px solid var(--ink);}
.body::-webkit-scrollbar-thumb{background:var(--sand);border:1.5px solid var(--ink);}
.resize{position:absolute;right:0;bottom:0;width:15px;height:15px;cursor:nwse-resize;
  background:
    linear-gradient(135deg,transparent 46%,var(--ink) 46% 52%,transparent 52% 70%,var(--ink) 70% 76%,transparent 76%);
  border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);background-color:var(--paper);}

/* ---- content typography inside windows ---- */
.body h2{font-family:var(--pixel);font-weight:700;font-size:22px;margin:0 0 8px;}
.body h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:14px 0 6px;}
.body p{font-size:14px;line-height:1.6;margin:0 0 10px;}
.body .mono{font-family:var(--mono);font-size:13px;}
.tagline{font-family:var(--mono);font-size:12px;color:var(--rust);text-transform:uppercase;letter-spacing:1px;}

/* list rows (work / writing) */
.rowlist{list-style:none;margin:0;padding:0;}
.rowlist li{border:1.5px solid var(--ink);background:var(--paper-2);margin-bottom:8px;padding:9px 11px;
  cursor:default;display:flex;justify-content:space-between;align-items:center;gap:10px;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);}
.rowlist li:hover{transform:translate(-2px,-2px);box-shadow:2px 2px 0 var(--ink);background:var(--vanilla);}
.rowlist .t{font-family:var(--sans);font-weight:600;font-size:14px;}
.rowlist .m{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap;}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.thumb{border:1.5px solid var(--ink);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:8px;
  font-family:var(--pixel);font-weight:600;font-size:14px;color:var(--paper);cursor:default;
  transition:transform var(--t-fast);}
.thumb:hover{transform:translate(-2px,-2px) rotate(-1deg);}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-family:var(--pixel);font-weight:600;font-size:13px;border:1.5px solid var(--ink);background:var(--paper);
  padding:4px 9px;box-shadow:1px 1px 0 var(--ink);cursor:default;}
.chip:hover{background:var(--marigold);}
.linklist a{display:flex;justify-content:space-between;align-items:center;font-family:var(--pixel);font-weight:600;
  font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1.5px dashed var(--ink);padding:9px 2px;}
.linklist a:hover{color:var(--sinopia);padding-left:8px;}
.btn{font-family:var(--pixel);font-weight:600;font-size:14px;border:1.5px solid var(--ink);background:var(--vanilla);
  padding:6px 13px;box-shadow:1px 1px 0 var(--ink);cursor:pointer;border-radius:9px;}
.btn:hover{background:var(--sand);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink);}
.btn:active{transform:translate(1px,1px);box-shadow:none;}
.btn.primary{background:var(--sinopia);color:var(--paper);}
.btn.primary:hover{background:var(--rust);}

/* boot screen */
.boot{position:absolute;inset:0;z-index:9500;background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;}
.boot.hide{display:none;}
.happy{width:84px;height:84px;border:2px solid var(--ink);border-radius:10px;display:flex;align-items:center;
  justify-content:center;animation:boot-bob .9s var(--ease-pop) infinite alternate;background:var(--paper);}
@keyframes boot-bob{to{transform:translateY(-6px);}}
.boot .welcome{font-family:'Snell Roundhand','Brush Script MT',cursive;font-size:60px;color:var(--ink);
  opacity:0;animation:fadein .6s ease .3s forwards;}
.boot .bl{width:200px;height:12px;border:1.5px solid var(--ink);background:var(--paper);overflow:hidden;}
.boot .bl i{display:block;height:100%;width:0;background:var(--sinopia);animation:load 1.6s ease forwards;}
@keyframes load{to{width:100%;}}
@keyframes fadein{to{opacity:1;}}

/* generic app layout helpers */
.app-pad{padding:0;}
.field{font-family:var(--mono);font-size:13px;border:1.5px solid var(--ink);background:var(--paper);padding:7px 10px;width:100%;color:var(--ink);}
.field:focus{outline:none;box-shadow:inset 0 0 0 2px var(--caribbean);}

/* fill-window apps shouldn't double-scroll */
.body:has(.term){padding:0;overflow:hidden;}
.body:has(.calc),.body:has(.px-wrap),.body:has(.phys-wrap){overflow:hidden;}

/* ---- Calculator ---- */
.calc{display:flex;flex-direction:column;gap:8px;height:100%;}
.calc-display{font-family:var(--mono);font-size:26px;text-align:right;border:1.5px solid var(--ink);
  background:#e7eee2;padding:8px 10px;min-height:44px;overflow:hidden;}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;}
.calc-key{font-family:var(--pixel);font-weight:600;font-size:18px;border:1.5px solid var(--ink);
  background:var(--paper);box-shadow:1px 1px 0 var(--ink);cursor:pointer;border-radius:7px;}
.calc-key:hover{background:var(--vanilla);}
.calc-key:active{transform:translate(1px,1px);box-shadow:none;}
.calc-key.op{background:var(--caribbean);color:var(--paper);}
.calc-key.op:hover{background:#3d7a7e;}
.calc-key.fn{background:var(--sand);}
.calc-key.eq{background:var(--sinopia);color:var(--paper);}
.calc-key.eq:hover{background:var(--rust);}
.calc-key.wide{grid-column:span 2;}

/* ---- Terminal ---- */
.term{display:flex;flex-direction:column;height:100%;background:#221a11;padding:12px;}
.term-out{flex:1;overflow:auto;font-family:var(--mono);font-size:12.5px;color:#e7dcc4;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.term-line{margin-bottom:2px;}
.term-line.dim{color:#a08d6a;}
.term-line b{color:#e0a126;font-weight:500;}
.term-prompt{color:#8bbf8f;}
.term-row{display:flex;gap:6px;align-items:center;border-top:1px solid #3a2f22;padding-top:7px;margin-top:7px;}
.term-input{flex:1;background:transparent;border:0;outline:none;color:#e7dcc4;font-family:var(--mono);font-size:12.5px;caret-color:#e0a126;}
.neo{margin:0;font-family:var(--mono);color:#e7dcc4;}
.term-out::-webkit-scrollbar{width:9px;} .term-out::-webkit-scrollbar-thumb{background:#4a3c29;}

/* ---- Pixel Studio ---- */
.px-wrap{display:flex;flex-direction:column;gap:8px;height:100%;}
.px-tools{display:flex;flex-wrap:wrap;gap:5px;}
.px-sw{width:21px;height:21px;border:1.5px solid var(--ink);cursor:pointer;border-radius:3px;padding:0;}
.px-sw.on{box-shadow:0 0 0 2px var(--sinopia);transform:scale(1.1);}
.px-mid{display:flex;gap:8px;align-items:flex-start;}
.px-tbtns{display:flex;flex-direction:column;gap:5px;}
.px-tb{width:32px;height:32px;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:6px;font-size:14px;box-shadow:1px 1px 0 var(--ink);}
.px-tb.on{background:var(--caribbean);}
.px-canvas{border:1.5px solid var(--ink);background:var(--paper);touch-action:none;image-rendering:pixelated;
  width:288px;height:288px;max-width:100%;cursor:crosshair;}
.px-actions{display:flex;gap:6px;}
.px-actions .btn{font-size:12px;padding:6px 9px;}

/* ---- Physics Lab ---- */
.phys-wrap{display:flex;flex-direction:column;gap:8px;height:100%;}
.phys-bar{display:flex;gap:6px;flex-wrap:wrap;}
.phys-bar .btn{font-size:12px;padding:6px 9px;}
.phys-stage{position:relative;flex:1;border:1.5px solid var(--ink);background:#efe6d1;overflow:hidden;min-height:150px;}
.phys-canvas{display:block;touch-action:none;}
.phys-hint{position:absolute;left:8px;bottom:6px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);pointer-events:none;}

/* ---- Control Panel: wallpaper previews ---- */
.wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.wp-cell{display:flex;flex-direction:column;gap:5px;border:1.5px solid var(--ink);background:var(--paper);
  padding:6px;cursor:pointer;box-shadow:1px 1px 0 var(--ink);text-align:left;}
.wp-cell:hover{background:var(--vanilla);}
.wp-cell.on{box-shadow:0 0 0 2px var(--sinopia),1px 1px 0 var(--ink);}
.wp-prev{display:block;height:44px;border:1.5px solid var(--ink);background-color:var(--paper);}
.wp-name{font-family:var(--pixel);font-weight:600;font-size:12px;}
.wp-prev[data-wp="classic"]{background-image:radial-gradient(rgba(36,27,18,.32) 1px, transparent 1.4px);background-size:4px 4px;}
.wp-prev[data-wp="weave"]{background-image:linear-gradient(45deg,rgba(36,27,18,.18) 25%,transparent 25% 75%,rgba(36,27,18,.18) 75%),linear-gradient(45deg,rgba(36,27,18,.18) 25%,transparent 25% 75%,rgba(36,27,18,.18) 75%);background-size:14px 14px;background-position:0 0,7px 7px;}
.wp-prev[data-wp="dots"]{background-image:radial-gradient(var(--sinopia) 1.6px, transparent 1.8px);background-size:14px 14px;background-color:#f1e7d2;}
.wp-prev[data-wp="talavera"]{background-image:radial-gradient(circle at 10px 10px,rgba(51,100,103,.5) 3px,transparent 4px),radial-gradient(circle at 0 0,rgba(215,52,11,.35) 2px,transparent 3px),radial-gradient(circle at 20px 20px,rgba(215,52,11,.35) 2px,transparent 3px);background-size:20px 20px;background-color:#efe6cf;}
.wp-prev[data-wp="grid"]{background-image:linear-gradient(rgba(51,100,103,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(51,100,103,.25) 1px,transparent 1px);background-size:14px 14px;background-color:#f3ecd8;}
.wp-prev[data-wp="plain"]{background-color:#efe6d1;}
.wp-prev[data-wp="sky"]{background:linear-gradient(180deg,#bcd6d8,#e7e0cb 75%);}

/* ===========================================================
   MOBILE — portrait hardware shell + floating OS + dock
   Desktop is untouched; everything below only applies ≤760px.
   =========================================================== */
.mdock,.mswitch{display:none;}

@media (max-width:760px){
  body.os{padding:0;}
  body.os::after{display:none;}
  .stage{align-items:stretch;justify-content:stretch;}
  .mac-wrap{transform:none !important;width:100%;height:100%;}
  .mac{width:100vw;height:100dvh;min-height:100dvh;border-radius:0;padding:0;
    display:flex;flex-direction:column;
    box-shadow:inset 0 3px 8px rgba(255,255,255,.4), inset 0 -10px 26px rgba(120,98,60,.4);}
  .vents-top{display:none;}
  .bezel{position:static;left:auto;top:auto;width:auto;height:auto;flex:1;min-height:0;
    margin:10px 9px 4px;padding:9px;border-radius:16px;}
  .bezel-inner{flex:1;min-height:0;padding:9px;border-radius:11px;}
  .screen{width:100%;height:100%;border-radius:8px;}
  .chin{position:static;left:auto;top:auto;right:auto;height:auto;
    display:flex;align-items:center;gap:12px;padding:5px 16px 11px;}
  .chin .apple{position:static;left:auto;top:auto;width:22px;height:26px;}
  .chin .mac-label{position:static;left:auto;top:auto;font-size:19px;}
  .chin .floppy{position:static;right:auto;top:auto;margin-left:auto;width:118px;height:13px;}
  .chin .chin-vents{display:none;}
  .mac-foot{display:none;}

  /* menubar: keep apple + clock, drop the text menus */
  .menubar{height:30px;}
  .menubar .mi[data-menu]:not(.mb-apple){display:none;}
  .menubar .mb-apple{font-size:17px;}

  /* desktop icons hidden — the dock replaces them */
  .desktop .dicon{display:none;}

  /* windows: touch-friendly, no manual resize */
  .win .title{height:32px;}
  .win .title .close{width:18px;height:18px;}
  .win .title .tt{font-size:16px;}
  .resize{display:none;}

  /* window switcher (open windows) */
  .mswitch{display:flex;position:absolute;left:0;right:0;bottom:62px;z-index:3990;
    gap:6px;padding:6px 9px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .mswitch:empty{display:none;}
  .mswitch .pill{flex:0 0 auto;display:flex;align-items:center;gap:9px;border:1.5px solid var(--ink);
    background:var(--vanilla);padding:6px 11px;border-radius:16px;font-family:var(--pixel);
    font-weight:600;font-size:12px;box-shadow:1px 1px 0 var(--ink);cursor:pointer;color:var(--ink);}
  .mswitch .pill.active{background:var(--marigold);}
  .mswitch .pill .x{font-weight:700;font-size:15px;line-height:1;}

  /* dock (app launcher) */
  .mdock{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:4000;
    gap:5px;padding:7px 9px calc(7px + env(safe-area-inset-bottom));
    background:rgba(246,240,226,.97);border-top:1.5px solid var(--ink);
    overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .mdock .dk{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
    width:54px;background:none;border:0;cursor:pointer;padding:2px;}
  .mdock .dk .gly{width:38px;height:38px;display:flex;align-items:center;justify-content:center;}
  .mdock .dk .gly svg{width:34px;height:34px;}
  .mdock .dk .lbl{font-family:var(--pixel);font-weight:600;font-size:10px;color:var(--ink);}
  .mdock .dk:active{transform:translateY(-2px);}
}