/* Bubble98: the desktop, its windows, controls, taskbar and Start menu, pixel for pixel in the spirit of 1998 */
@font-face { font-family: W98; src: url(/assets/fonts/ms_sans_serif.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: W98; font-weight: 700; src: url(/assets/fonts/ms_sans_serif_bold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Silk; src: url(/assets/fonts/silkscreen.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Silk; font-weight: 700; src: url(/assets/fonts/silkscreen-bold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: PS2P; src: url(/assets/fonts/pressstart.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Comic; src: url(/assets/fonts/comicneue.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Comic; font-weight: 700; src: url(/assets/fonts/comicneue-bold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: VT; src: url(/assets/fonts/vt323.woff2) format('woff2'); font-display: swap; }

:root {
  --face: #c0c0c0; --hi: #fff; --lite: #dfdfdf; --sh: #808080; --dk: #0a0a0a; --desk: #008080; --navy: #000080; --sel: #000080;
  --ui: W98, Tahoma, 'Segoe UI', Verdana, sans-serif; --pix: Silk, W98, monospace;
  --fs: 15px; --tb: 44px; --strip: 34px;
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--lite), inset -2px -2px var(--sh), inset 2px 2px var(--hi);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--lite), inset 2px 2px var(--sh);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--lite), inset 2px 2px var(--dk);
  --well: inset -1px -1px var(--hi), inset 1px 1px var(--sh);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--desk); color: #000; font: 400 var(--fs)/1.35 var(--ui); -webkit-font-smoothing: none; -webkit-text-size-adjust: 100%; overflow: hidden; }
img.px, canvas.px, .px { image-rendering: pixelated; }
a { color: #0000ee; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sel); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the contract strip */
.ca-strip { height: var(--strip); background: var(--face); box-shadow: inset 0 -1px var(--sh), inset 0 1px var(--hi); display: flex; align-items: center; gap: 10px; padding: 0 10px; position: relative; z-index: 60; white-space: nowrap; overflow: hidden; }
.ca-strip .who { display: flex; align-items: center; gap: 8px; font-weight: 700; flex: none; }
.ca-strip .who img { width: 20px; height: 20px; }
.ca-strip .meta { color: #202020; flex: none; }
.ca-strip .sep { width: 2px; height: 20px; box-shadow: inset 1px 0 var(--sh), inset -1px 0 var(--hi); flex: none; }
.ca-strip .field { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; background: #fff; box-shadow: var(--sunken); padding: 3px 8px; height: 26px; }
.ca-strip .field span { flex: none; color: var(--sh); }
.ca-strip code { font: 400 14px/1 'Lucida Console', Monaco, Consolas, monospace; white-space: nowrap; letter-spacing: 0; }
.ca-strip.soon code { font: 700 13px/1 var(--pix); letter-spacing: 1px; }
.ca-strip .btn { flex: none; min-width: 0; height: 26px; padding: 0 12px; }

/* ---------------------------------------------------------------- the desktop */
.desk { position: fixed; left: 0; right: 0; top: calc(var(--strip) + var(--tape, 0px)); bottom: var(--tb); overflow: hidden; }
.wall { position: absolute; inset: 0; overflow: hidden; background: var(--desk); }
/* the wallpaper: plain 1998 teal with the Bubble98 mark low in the middle, a shade darker than the desk */
.wall-mark { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; opacity: .22; pointer-events: none; user-select: none; }
.wall-mark img { width: 72px; height: 72px; filter: grayscale(1) brightness(.35) sepia(1) hue-rotate(130deg) saturate(3); }
.wall-mark span { font: 900 40px/1 'Arial Black', 'Helvetica Neue', Arial, sans-serif; color: #003c3c; letter-spacing: -1px; }
.wall-mark b { font-size: .5em; vertical-align: top; margin-left: 3px; }
.hero-slot { display: contents; }

.icons { position: absolute; left: 12px; top: 14px; bottom: 12px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 104px); grid-auto-columns: 104px; gap: 4px 6px; z-index: 2; }
.dicon { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 4px 2px; border: 0; background: none; color: #fff; cursor: default; text-align: center; font: 400 14px/1.2 var(--ui); outline: none; -webkit-tap-highlight-color: transparent; }
.dicon img { width: 64px; height: 64px; }
.dicon span { padding: 1px 4px; text-shadow: 1px 1px 0 #000; }
.dicon:focus-visible span, .dicon.sel span { background: var(--sel); text-shadow: none; outline: 1px dotted #ff0; }
.dicon.sel img, .dicon:active img { filter: brightness(.55) sepia(1) hue-rotate(190deg) saturate(4); }

.stack { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.stack > * { pointer-events: auto; }

/* ---------------------------------------------------------------- windows */
.win { position: absolute; display: flex; flex-direction: column; background: var(--face); box-shadow: var(--raised), 6px 8px 0 rgba(0, 0, 0, .28); padding: 3px; min-width: 220px; max-width: 100%; }
.win.opening { animation: winopen .16s steps(4) both; }
@keyframes winopen { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
.win.closing { animation: winclose .12s steps(3) both; }
@keyframes winclose { to { clip-path: inset(50% 50% 50% 50%); } }
.title { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 3px 0 5px; background: linear-gradient(90deg, #808080, #b5b5b5); color: #d4d0c8; font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: none; }
.win.active > .title { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; }
.title img { width: 18px; height: 18px; flex: none; }
.title .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; letter-spacing: .2px; }
.title .ctl { display: flex; gap: 2px; flex: none; }
.title .ctl button { width: 22px; height: 20px; padding: 0; border: 0; background: var(--face); box-shadow: var(--raised); display: grid; place-items: center; cursor: pointer; }
.title .ctl button:active { box-shadow: var(--pressed); }
.title .ctl button svg { width: 10px; height: 9px; display: block; }
.title .ctl button.x { margin-left: 2px; }
.title .ctl button:active svg { transform: translate(1px, 1px); }
.win .menubar { display: flex; gap: 0; padding: 2px 0; flex: none; }
.win .menubar > .m { position: relative; }
.win .menubar > .m > button { border: 0; background: none; padding: 3px 9px; cursor: pointer; }
.win .menubar > .m > button u { text-decoration: underline; }
.win .menubar > .m.open > button { box-shadow: var(--pressed); }
.win .body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.win .status { display: flex; gap: 2px; flex: none; margin-top: 2px; }
.win .status > * { box-shadow: var(--well); padding: 3px 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.win .status > .grow { flex: 1; }
.win .grip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 0 45%, var(--hi) 45% 52%, var(--sh) 52% 60%, transparent 60% 70%, var(--hi) 70% 77%, var(--sh) 77% 85%, transparent 85%); touch-action: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: var(--raised); }
.win.max .grip { display: none; }
.win.min { display: none; }
.win.shake { animation: shake .3s steps(6); }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.drag-ghost { position: absolute; border: 3px solid transparent; border-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 1 / 2px; pointer-events: none; z-index: 999; }

/* ---------------------------------------------------------------- controls */
.btn { min-width: 88px; height: 32px; padding: 0 14px; border: 0; background: var(--face); box-shadow: var(--raised); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #000; text-decoration: none; white-space: nowrap; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.def { box-shadow: inset -1px -1px var(--dk), inset 1px 1px var(--dk), inset -2px -2px var(--dk), inset 2px 2px var(--lite), inset -3px -3px var(--sh), inset 3px 3px var(--hi); }
.btn:active:not(:disabled), .btn.on { box-shadow: var(--pressed); }
.btn:active:not(:disabled) > * { transform: translate(1px, 1px); }
.btn:disabled { color: var(--sh); text-shadow: 1px 1px 0 var(--hi); cursor: default; }
.btn img { width: 18px; height: 18px; }
.btn.small { height: 26px; min-width: 0; padding: 0 10px; font-size: 14px; }
.btn.big { height: 44px; padding: 0 20px; font-weight: 700; }
.field, .input, textarea.input, select.input { background: #fff; box-shadow: var(--sunken); border: 0; padding: 6px 8px; min-width: 0; width: 100%; outline: none; border-radius: 0; }
textarea.input { resize: vertical; min-height: 70px; line-height: 1.35; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' shape-rendering='crispEdges'%3E%3Crect width='22' height='22' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h21v1H1v20H0z' fill='%23fff'/%3E%3Cpath d='M21 0h1v22H0v-1h21z' fill='%23000'/%3E%3Cpath d='M7 9h8v1H7zM8 10h6v1H8zM9 11h4v1H9zM10 12h2v1h-2z' fill='%23000'/%3E%3C/svg%3E") right 3px center no-repeat; }
.input:disabled { background: var(--face); color: var(--sh); }
label.row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; background: #fff; box-shadow: var(--sunken); display: inline-grid; place-items: center; flex: none; cursor: pointer; }
.check:checked::after { content: ''; width: 9px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M8 0h1v3H8v1H7v1H6v1H5v1H3V6H2V5H1V4H0V2h1v1h1v1h1v1h2V4h1V3h1V2h1z'/%3E%3C/svg%3E"); }
.radio { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: #fff; box-shadow: inset 1px 1px var(--sh), inset -1px -1px var(--hi), inset 2px 2px var(--dk), inset -2px -2px var(--lite); flex: none; cursor: pointer; display: inline-grid; place-items: center; }
.radio:checked::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #000; }
fieldset.group { border: 0; margin: 0; padding: 18px 12px 12px; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--sh), inset 2px 2px var(--hi); position: relative; }
fieldset.group > legend { position: absolute; top: -9px; left: 8px; background: var(--face); padding: 0 4px; }
.sunk { background: #fff; box-shadow: var(--sunken); padding: 2px; }
.well { box-shadow: var(--well); }
.hr { height: 2px; box-shadow: inset 0 1px var(--sh), inset 0 -1px var(--hi); margin: 10px 0; }
.prog { height: 24px; background: #fff; box-shadow: var(--sunken); padding: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 12px, transparent 12px 14px); transition: width .4s steps(8); }
.prog.green i { background: repeating-linear-gradient(90deg, #00a000 0 12px, transparent 12px 14px); }
.tabs { display: flex; gap: 0; padding-left: 4px; position: relative; z-index: 1; }
.tabs button { border: 0; background: var(--face); padding: 5px 14px 6px; margin-bottom: -2px; box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--sh), inset 2px 2px var(--lite); cursor: pointer; }
.tabs button.on { padding-top: 7px; margin-top: -3px; z-index: 2; position: relative; background: var(--face); }
.tabpanel { box-shadow: var(--raised); padding: 16px; }
.lnk { color: #0000ee; text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; }
.muted { color: #404040; }
.pixh { font-family: var(--pix); font-weight: 700; letter-spacing: .5px; }
.note { font-size: 14px; color: #202020; }
.err { color: #a00000; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: #404040; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mono { font-family: 'Lucida Console', Monaco, Consolas, monospace; font-size: 13px; }
.listview { background: #fff; box-shadow: var(--sunken); overflow: auto; }
.listview table { width: 100%; border-collapse: collapse; }
.listview th { position: sticky; top: 0; background: var(--face); box-shadow: var(--raised); text-align: left; font-weight: 400; padding: 4px 8px; white-space: nowrap; z-index: 1; }
.listview td { padding: 5px 8px; white-space: nowrap; }
.listview tr:hover td { background: #e8e8ff; }
.listview tr.sel td { background: var(--sel); color: #fff; }

/* ---------------------------------------------------------------- taskbar and Start */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb); background: var(--face); box-shadow: inset 0 1px var(--lite), inset 0 2px var(--hi); display: flex; align-items: center; gap: 4px; padding: 4px 4px 2px; z-index: 80; }
.start { height: 34px; padding: 0 10px 0 6px; font-weight: 700; font-size: 16px; min-width: 0; gap: 6px; flex: none; }
.start img { width: 26px; height: 26px; }
.tb-sep { width: 2px; align-self: stretch; margin: 2px 2px; box-shadow: inset 1px 0 var(--sh), inset -1px 0 var(--hi); flex: none; }
.quick { display: flex; gap: 2px; flex: none; }
.quick button { width: 32px; height: 32px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; padding: 0; }
.quick button:hover { box-shadow: var(--raised); }
.quick button:active { box-shadow: var(--pressed); }
.quick img { width: 22px; height: 22px; }
.tasks { flex: 1; display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.task { height: 34px; flex: 0 1 190px; min-width: 44px; justify-content: flex-start; padding: 0 8px; font-size: 14px; overflow: hidden; }
.task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task.on { background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; font-weight: 700; }
.tray { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; box-shadow: var(--well); flex: none; }
.tray button { border: 0; background: none; padding: 0; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.tray img { width: 22px; height: 22px; }
.tray .clock { min-width: 64px; text-align: right; font-size: 14px; cursor: default; }
.tray .ticker { width: 300px; overflow: hidden; white-space: nowrap; font-size: 14px; box-shadow: var(--well); padding: 2px 0; background: #000; color: #0f0; font-family: VT, monospace; font-size: 19px; line-height: 20px; height: 26px; }
.tray .ticker span { display: inline-block; padding-left: 100%; animation: tick 40s linear infinite; }
.tray .ticker b { color: #ff0; font-weight: 400; }
.tray .ticker em { font-style: normal; color: #0ff; }
@keyframes tick { to { transform: translateX(-100%); } }

.menu { position: fixed; background: var(--face); box-shadow: var(--raised), 3px 3px 0 rgba(0, 0, 0, .3); padding: 3px; z-index: 200; min-width: 220px; display: none; }
.menu.open { display: flex; }
.menu .items { display: grid; flex: 1; align-content: start; }
.menu .it { display: flex; align-items: center; gap: 12px; padding: 6px 28px 6px 10px; border: 0; background: none; text-align: left; cursor: pointer; white-space: nowrap; position: relative; color: #000; text-decoration: none; }
.menu .it img { width: 24px; height: 24px; flex: none; }
.menu .it:hover, .menu .it:focus-visible, .menu .it.hot { background: var(--sel); color: #fff; outline: none; }
.menu .it.sub::after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 5px solid currentColor; border-right: 0; }
.menu .it:disabled { color: var(--sh); background: none; cursor: default; }
.menu .line { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--sh), inset 0 -1px var(--hi); }
.startmenu { bottom: calc(var(--tb) - 4px); left: 2px; }
.startmenu .banner { width: 30px; background: linear-gradient(0deg, #000080, #1084d0); color: #fff; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; flex: none; }
.startmenu .banner span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 22px/1 var(--ui); letter-spacing: .5px; white-space: nowrap; }
.startmenu .banner span b { font-weight: 400; color: #c0c0ff; }
.startmenu .it { padding: 8px 40px 8px 10px; }
.startmenu .it img { width: 32px; height: 32px; }
.startmenu .it u { text-decoration: underline; }

/* ---------------------------------------------------------------- message boxes and the tray balloon */
.msg { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 16px 16px 8px; }
.msg .ico { width: 36px; height: 36px; }
.msg-actions { display: flex; justify-content: center; gap: 8px; padding: 10px 12px 12px; }
.balloon { position: fixed; right: 10px; bottom: calc(var(--tb) + 8px); z-index: 300; max-width: 340px; background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 8px; padding: 10px 14px 12px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .25); display: none; font-size: 14px; }
.balloon.show { display: block; animation: pop .2s steps(3); }
.balloon b { display: block; margin-bottom: 4px; }
.balloon::after { content: ''; position: absolute; right: 60px; bottom: -10px; border: 10px solid transparent; border-top-color: #000; border-bottom: 0; }
.balloon::before { content: ''; position: absolute; right: 61px; bottom: -8px; border: 9px solid transparent; border-top-color: #ffffe1; border-bottom: 0; z-index: 1; }
.balloon.err b { color: #a00000; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

/* ---------------------------------------------------------------- the assistant */
.assistant { position: absolute; right: 22px; bottom: 16px; z-index: 6; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.assistant canvas { width: 112px; height: 112px; pointer-events: auto; cursor: pointer; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .3)); }
.assistant .say { pointer-events: auto; position: absolute; right: 70px; bottom: 118px; width: 300px; background: #ffffcc; border: 1px solid #000; border-radius: 10px; padding: 12px 14px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .25); font-size: 14px; display: none; }
.assistant .say.show { display: block; animation: pop .18s steps(3); }
.assistant .say::after { content: ''; position: absolute; right: 30px; bottom: -14px; border: 14px solid transparent; border-top-color: #000; border-bottom: 0; border-right: 0; }
.assistant .say::before { content: ''; position: absolute; right: 31px; bottom: -12px; border: 12px solid transparent; border-top-color: #ffffcc; border-bottom: 0; border-right: 0; z-index: 1; }
.assistant .say p { margin: 0 0 10px; }
.assistant .say .acts { display: grid; gap: 6px; }
.assistant .say .acts button { text-align: left; border: 0; background: none; padding: 2px 0; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.assistant .say .acts button::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #1084d0; box-shadow: inset -2px -2px #000080; flex: none; }
.assistant .say .acts button:hover { color: #0000ee; text-decoration: underline; }

/* ---------------------------------------------------------------- the shut down screen and confetti */
.shutdown { position: fixed; inset: 0; background: #000; z-index: 1000; display: grid; place-items: center; color: #ff8c00; font: 400 clamp(22px, 4vw, 44px)/1.3 var(--pix); text-align: center; padding: 20px; cursor: pointer; }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 900; }

/* ---------------------------------------------------------------- phones: the same desktop, stacked */
@media (max-width: 760px) {
  :root { --fs: 15px; --tb: 48px; --strip: 38px; }
  body { overflow: auto; overflow-x: hidden; }
  .desk { position: relative; inset: auto; top: 0 !important; overflow: visible; padding-bottom: calc(var(--tb) + 24px); }
  .wall { position: relative; inset: auto; padding: 12px 10px 4px; overflow: visible; }
  .wall-mark { display: none; }
  .hero-slot { display: block; position: relative; z-index: 3; width: 100%; }
  .icons { position: static; display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-columns: auto; gap: 10px 4px; padding: 18px 8px 8px; }
  .dicon { font-size: 13px; }
  .dicon img { width: 48px; height: 48px; }
  .stack { position: static; display: grid; gap: 16px; padding: 8px 12px 0; pointer-events: auto; }
  .win { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-height: none; }
  .win .body { overflow: visible; }
  .win .grip { display: none; }
  .win.max, .win.fullscreen { position: fixed !important; inset: 0 0 var(--tb) 0 !important; z-index: 70; height: auto !important; }
  .win.max .body, .win.fullscreen .body { overflow: auto; }
  .hero-slot .win { box-shadow: var(--raised), 5px 6px 0 rgba(0, 0, 0, .3); }
  .ca-strip { gap: 5px; padding: 0 5px; }
  .ca-strip .meta, .ca-strip .sep.m-hide, .ca-strip .field span { display: none; }
  .ca-strip .who { gap: 4px; font-size: 12px; }
  .ca-strip .who img { width: 16px; height: 16px; }
  .ca-strip .field { padding: 3px 5px; flex: 1 1 auto; }
  .ca-strip .who b { display: none; }
  .ca-strip.soon .who b, .ca-strip.soon .field span { display: inline; }
  .ca-strip code { font-size: 10.4px; letter-spacing: -.1px; }
  .ca-strip .btn { padding: 0 7px; font-size: 13px; }
  .tasks { visibility: hidden; }
  .taskbar { padding-bottom: calc(2px + env(safe-area-inset-bottom)); height: calc(var(--tb) + env(safe-area-inset-bottom)); }
  .quick, .tray .ticker, .tb-sep.q { display: none; }
  .task { flex-basis: 120px; }
  .assistant { display: none; }
  .startmenu { left: 0; right: 0; bottom: calc(var(--tb) - 2px + env(safe-area-inset-bottom)); max-height: 80vh; overflow: auto; }
  .balloon { left: 10px; right: 10px; max-width: none; }
}
body.has-max .assistant { display: none; }
/* the Dial-Up box with no wallet in the browser: the wallet apps and install pages, one row each */
.du-link { display: flex; align-items: center; gap: 8px; color: #000; text-decoration: none; padding: 2px 0; }
.du-link:hover, .du-link:focus { color: #000080; text-decoration: underline; }

/* ---------------------------------------------------------------- the ticker tape under the contract strip */
body.has-tape { --tape: 28px; }
.tape { height: 28px; background: #000; box-shadow: inset 0 1px var(--sh), inset 0 -1px var(--hi); display: flex; align-items: center; position: relative; z-index: 59; overflow: hidden; font: 700 13px/1 var(--pix); letter-spacing: .6px; }
.tape[hidden] { display: none; }
.tape-tag { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 12px; background: var(--navy); color: #fff; box-shadow: inset -1px 0 var(--hi); }
.tape-view { flex: 1; min-width: 0; overflow: hidden; }
.tape-track { display: flex; width: max-content; animation: tape var(--dur, 40s) linear infinite; }
.tape:hover .tape-track, .tape:focus-within .tape-track { animation-play-state: paused; }
.tape-g { display: flex; flex: none; }
.tape-i { flex: none; border: 0; background: none; padding: 0 22px 0 0; margin: 0 0 0 22px; white-space: nowrap; font: inherit; letter-spacing: inherit; cursor: pointer; color: #c8c8c8; position: relative; height: 28px; display: inline-flex; align-items: center; }
.tape-i::after { content: ''; position: absolute; right: 0; top: 11px; width: 4px; height: 4px; background: #505050; }
.tape-i.up { color: #20e020; } .tape-i.dn { color: #ff4a4a; } .tape-i.burn { color: #ffb000; cursor: default; }
.tape-i:hover:not(.burn) { text-decoration: underline; }
@keyframes tape { to { transform: translateX(calc(-1 * var(--gw, 50%))); } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } .tape-view { overflow-x: auto; } }
@media (max-width: 760px) { .tape-tag { padding: 0 8px; font-size: 11px; } .tape { font-size: 12px; } }