/* Showcase site styles. The app's own look: Share Tech Mono for headings and numbers, duck blue, yellow and raspberry levels. */
@font-face { font-family: "Share Tech Mono"; src: url("fonts/ShareTechMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap }
:root {
  --paper: #EEF0F2; --sheet: #FAFBFC; --ink: #1D232B; --muted: #5E6874; --line: #C9CFD6;
  --duck: #FFD21F; --bill: #FF7A1A; --bar-light: #ECECEC; --bar-dark: #1E1E1E;
  --display: "Share Tech Mono", ui-monospace, monospace;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --blue: #1F5A7D; --on-blue: #FFFFFF; --warn: #6E5F00; --crit: #A0103F; --ph: #8A5A00; --ph-bg: #FFF4D6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #14181D; --sheet: #1B2027; --ink: #E6EAEF; --muted: #9AA4B0; --line: #333B45;
  --blue: #7CC3F0; --on-blue: #0E1A22; --warn: #F5E05A; --crit: #FF9AB0; --ph: #F5D27A; --ph-bg: #2B2410 } }
* { box-sizing: border-box }
html { font-synthesis: none; scroll-padding-top: 64px }
[hidden] { display: none !important }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 40px }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blue); color: var(--on-blue); padding: 8px 12px; border-radius: 6px; z-index: 10 }
.skip:focus { left: 8px }
.wrap { max-width: 1040px; margin: 0 auto; display: grid; gap: 14px }
main { display: grid; gap: 14px }
.page { max-width: 760px }
h1 { font: 400 clamp(26px, 4vw, 38px)/1.1 var(--display); margin: 0; text-wrap: balance }
h2 { font: 400 24px/1.15 var(--display); letter-spacing: -.01em; margin: 0; text-wrap: balance }
h3 { font: 400 19px/1.2 var(--display); margin: 0 }
p { margin: 0 }
a { color: var(--blue) }
.muted { color: var(--muted) }
.small { font-size: 13px }
.frame { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; min-width: 0; display: grid; gap: 11px }
.page .frame { gap: 12px }
.page h2 { font-size: 22px; margin-top: 8px }
.page ul, .page ol { margin: 0; padding-left: 22px; display: grid; gap: 6px }
.tag { display: flex; gap: 8px; align-items: center; font: 400 13px/1 var(--mono); color: var(--blue); letter-spacing: .04em; text-transform: uppercase }
.tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue) }
/* A placeholder for something that does not exist yet: dashed and labelled */
.ph { border: 2px dashed var(--ph); background: var(--ph-bg); color: var(--ph); border-radius: 10px; font: 400 13px/1.4 var(--mono); padding: 10px 14px; text-align: center }
.ph b { text-transform: uppercase; letter-spacing: .04em; font-weight: 400 }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block }
.cv24 { width: 24px; height: 24px } .cv48 { width: 48px; height: 48px } .cv26 { width: 26px; height: 16px } .cv52 { width: 52px; height: 32px }
/* Menu bar strips */
.menubar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 10px; border-radius: 6px;
  background: var(--bar-light); color: #1D232B; font: 13px/1 var(--body); overflow: hidden }
.menubar.dark { background: var(--bar-dark); color: #E6EAEF }
.menubar .title { font-weight: 700; white-space: nowrap }
.menubar .sp { flex: 1 }
.menubar .items { display: flex; align-items: center; gap: 10px }
.menubar a { color: inherit; text-decoration: none; white-space: nowrap }
.menubar a:hover, .menubar a:focus-visible { text-decoration: underline }
.navbar { position: sticky; top: max(8px, env(safe-area-inset-top, 0px)); z-index: 5; margin-top: 8px; border: 1px solid var(--line); height: 40px }
.navbar .links { display: flex; gap: 16px }
@media (max-width: 640px) { .navbar .links { display: none } }
@media (max-width: 400px) { .navbar .title { display: none } .navbar .nav-stats { font-size: 11px } }
@media (prefers-color-scheme: dark) { .navbar { background: var(--bar-dark); color: #E6EAEF } }
/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: center }
@media (max-width: 700px) { .hero { grid-template-columns: minmax(0, 1fr) } }
.hero h1 { font-size: clamp(26px, 3.2vw, 36px) }
.stack { display: grid; gap: 10px; align-content: start; min-width: 0 }
.badge { display: inline-grid; place-items: center; min-height: 48px; padding: 8px 18px; border: 2px dashed var(--ph); border-radius: 10px; background: var(--ph-bg);
  font: 400 13px/1.3 var(--mono); color: var(--ph); justify-self: start; text-align: center; text-decoration: none }
.badge:hover, .badge:focus-visible { border-style: solid }
.clip { display: grid; place-items: center; align-content: center; gap: 2px; padding: 8px 12px; flex: 0 1 220px }
.moodrow { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center }
.status { font: 13px/1.5 var(--mono); color: var(--muted) }
.stage { display: grid; justify-items: center; gap: 10px }
.stage .big { width: 192px; height: 192px; max-width: 100% }
button, .chip { font: 600 14px/1 var(--body); color: var(--ink); background: var(--sheet); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; cursor: pointer }
button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: var(--blue) }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px }
button.link { background: none; border: 0; padding: 4px; color: var(--muted); font: 13px var(--body); text-decoration: underline }
/* Playground */
.desk { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #B9C7E8, #E7C3D8 55%, #BFE3E0) }
.desk .menubar { border-radius: 0; height: 52px; background: color-mix(in srgb, var(--bar-light) 82%, transparent) }
.desk.dk .menubar { background: color-mix(in srgb, var(--bar-dark) 88%, transparent); color: #E6EAEF }
.desk { --area-h: clamp(430px, calc(100vh - 262px), 600px) }   /* one value per viewport, so the window never changes size */
.desk .area { position: relative; height: var(--area-h); overflow: hidden }
.areascroll { position: absolute; inset: 0; padding: 12px 14px; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between }
.duckbtn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px }
.caption { min-height: 1.5em; font: 400 17px/1.4 var(--mono) }
.seg { display: flex; flex-wrap: wrap; gap: 6px }
.presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
input[type=range] { width: 100%; accent-color: var(--blue) }
.disclaimer { font-size: 13px; color: var(--muted) }
/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px }
.cards.words { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.cards:not(.words) .card { font-size: 12px }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 14px; align-content: start }
.card canvas { width: 48px; height: 48px }
.cards.words .card { justify-items: start; text-align: left }
.faces { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 280px }
.faces figure { margin: 0; display: grid; gap: 4px; justify-items: center; font: 12px var(--mono); color: var(--muted) }
.faces canvas { width: 52px; height: 32px }
/* Free and unlock */
.price { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 12px }
@media (max-width: 800px) { .price { grid-template-columns: minmax(0, 1fr) } }
.col { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.col.paid { border: 2px solid var(--blue) }
.col ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px }
.colhd { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline }
.col .amt { font: 400 22px/1 var(--display); color: var(--blue) }
.pill { font: 400 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink) }
.pill.paid { background: var(--blue); border-color: var(--blue); color: var(--on-blue) }
.tiles { display: flex; flex-wrap: wrap; gap: 6px }
.tiles.single { justify-content: center }
.tile { margin: 0; display: grid; gap: 2px; justify-items: center; text-align: center; width: 66px; font-size: 12px; line-height: 1.2 }
.tiles.single .tile { width: 130px }
.tile canvas { width: 48px; height: 48px }
.tile figcaption { display: grid; gap: 1px }
.ugroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px }
.ugroup { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 4px; align-content: start; background: var(--paper) }
.ugroup h4 { font: 400 15px/1.2 var(--display); margin: 0 }
.faq { display: grid; gap: 6px }
details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px }
summary { cursor: pointer; font-weight: 700 }
summary::marker { color: var(--blue) }
details p { margin-top: 6px; color: var(--muted) }
footer.site { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px }
footer.site a { color: var(--ink) }
/* The stats text beside the duck, and the app's menus (mono caps, blue bars, yellow and raspberry levels) */
.stats { font: 400 13px/1 var(--mono); white-space: pre; letter-spacing: -.01em }
.stats .warn { color: #6E5F00 } .stats .crit { color: #A0103F }
.dark .stats .warn, .dk .stats .warn { color: #F5E05A } .dark .stats .crit, .dk .stats .crit { color: #FF9AB0 }
@media (prefers-color-scheme: dark) { .navbar .stats .warn { color: #F5E05A } .navbar .stats .crit { color: #FF9AB0 } }
.strips { display: grid; gap: 10px; justify-items: end }
.strip { height: 34px; gap: 10px; width: fit-content; max-width: 100%; padding-left: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px); mask-image: linear-gradient(to right, transparent, #000 44px) }   /* the right end of a menu bar, fading in */
.strip .items { gap: 8px }
@media (max-width: 480px) { .strip .title, .desk .menubar .title { display: none } .stats { font-size: 11px } .strip .items { gap: 6px } }
.toggle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.legend-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; font-size: 14px }
.legend-list b { font-family: var(--mono); font-weight: 400 }
.amenu { --mb: #F4F5F7; --mi: #1D232B; --ms: #6B7480; --mbar: #1F5A7D; --mtrack: #D5DAE0; --mline: #D5DAE0; --mwarn: #6E5F00; --mcrit: #A0103F;
  background: var(--mb); color: var(--mi); border: 1px solid var(--mline); border-radius: 10px; padding: 10px 0; width: min(360px, 100%);
  box-shadow: 0 10px 28px rgb(0 0 0 / .22); font: 13px/1.35 var(--body); text-align: left }
.dk .amenu, .amenu.dark { --mb: #2A2E35; --mi: #ECEFF3; --ms: #9AA3AF; --mbar: #7CC3F0; --mtrack: #15181C; --mline: #3D434C; --mwarn: #F5E05A; --mcrit: #FF9AB0 }
.amenu .hd { display: flex; gap: 8px; align-items: center; padding: 2px 14px 8px; font: 13px var(--mono); color: var(--mbar); letter-spacing: .04em }
.amenu .hd::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mbar) }
.amenu .hd .nt { margin-left: auto; color: var(--ms) }
.amenu .st { display: grid; grid-template-columns: 34px minmax(60px, 1fr) 44px minmax(0, 1.1fr); gap: 2px 8px; align-items: center; padding: 3px 14px; font: 12px/1.2 var(--mono) }
.amenu .st .k { color: var(--ms) } .amenu .st .v { text-align: right; font-variant-numeric: tabular-nums } .amenu .st .d { color: var(--ms); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.amenu .warn { color: var(--mwarn) } .amenu .crit { color: var(--mcrit) }
.amenu .bar { height: 7px; border-radius: 4px; background: var(--mtrack); overflow: hidden }
.amenu .bar i { display: block; height: 100%; background: var(--mbar); border-radius: 4px }
.amenu .bar i.warn { background: var(--mwarn) } .amenu .bar i.crit { background: var(--mcrit) } .amenu .bar i.ok-green { background: #38B24A }
.amenu .sub { white-space: pre-wrap; padding: 1px 14px 1px 56px; font: 11px/1.4 var(--mono); color: var(--ms); text-transform: uppercase }
.amenu .sub.pl { padding-left: 14px } .amenu .sub.gap { margin-top: 6px } .amenu .sub.ink { color: var(--mi) }
.amenu .inline { padding: 4px 0 0 12px }
.amenu .sh { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; color: var(--ms) }
.amenu hr { border: 0; border-top: 1px solid var(--mline); margin: 8px 12px }
.amenu .mi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 14px 3px 26px; background: none; border: 0; border-radius: 0; color: var(--mi); font: 13px/1.35 var(--body); text-align: left; cursor: default; position: relative }
.amenu button.mi { cursor: pointer } .amenu button.mi:hover, .amenu button.mi:focus-visible { background: #2F6FD0; color: #fff; outline: none }
.amenu .mi .chk { position: absolute; left: 10px } .amenu .mi .kb { margin-left: auto; color: var(--ms) } .amenu .mi .arr { margin-left: auto }
.lock { font: 11px var(--mono); color: var(--muted) }
button[aria-pressed="true"] .lock { color: inherit }
.menus { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start }
.menus figure { margin: 0; display: grid; gap: 6px; flex: 1 1 300px; max-width: 360px }
.menus figcaption { font-size: 13px; color: var(--muted) }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 40px; padding: 4px 14px 0 }
.hist i { flex: 1; background: var(--mbar); border-radius: 1px; opacity: .85 }
.hist i.chg { background: #38B24A }
.hist-axis { display: flex; justify-content: space-between; padding: 2px 14px 0; font: 10px var(--mono); color: var(--ms) }
.pg-panel { flex: none; width: 340px; max-height: 100%; overflow-y: auto; order: 3 }
.pg-details { position: absolute; top: 56px; right: 370px; z-index: 4; width: 250px; max-height: calc(100% - 66px); overflow-y: auto }
@media (max-width: 900px) {
  .desk { --area-h: 560px }
  .areascroll { flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; padding: 8px }
  .sim { order: 2; flex: none; width: auto }
  .pg-panel { order: 3; width: auto; max-height: none; overflow: visible }
  .pg-details { position: static; width: auto; max-height: none; order: 4 }
  .caption { min-height: 3em }
}
.amenu .lock { margin-left: auto; color: var(--ms) }
.amenu button.mi:hover .lock, .amenu button.mi:focus-visible .lock { color: inherit }
/* The simulate card: a translucent card on the desktop, the site's own controls (not part of the app) */
.pgview { display: grid; gap: 8px }
.sim { order: 1; flex: 0 1 366px; min-width: 0; max-height: 100%; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px;
  background: color-mix(in srgb, var(--sheet) 80%, transparent); color: var(--ink); backdrop-filter: blur(8px) }
.simhd { display: grid; gap: 2px }
.simhd h3 { font-size: 17px }
.simhd p { font-size: 12px; line-height: 1.35 }
.simgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px }
.srow { display: grid; gap: 4px; align-content: start; min-width: 0; font: 12px/1.3 var(--mono); color: var(--muted) }
.srow.wide { grid-column: 1 / -1 }
.srow output { color: var(--ink) }
.srow .seg { gap: 4px }
.srow .seg button { font: 600 12px/1.2 var(--body); padding: 6px 8px }
input[type=range] { margin: 0 }
/* The fake Settings and About windows (macOS look, over the desk) */
.win { --wb: #ECECEC; --wf: #FFFFFF; --wi: #1D232B; --ws: #6B7480; --wl: #D5DAE0; position: absolute; z-index: 6; left: 50%; top: 8px; transform: translateX(-50%); width: min(420px, calc(100% - 16px)); height: calc(100% - 16px);
  display: flex; flex-direction: column; background: var(--wb); color: var(--wi); border: 1px solid var(--wl); border-radius: 10px; box-shadow: 0 16px 40px rgb(0 0 0 / .35); font: 13px/1.35 var(--body); text-align: left; overflow: hidden }
.dk .win { --wb: #2B2B2E; --wf: #3A3A3E; --wi: #ECEFF3; --ws: #9AA3AF; --wl: #4A4A50 }
.win.about { height: auto; width: min(280px, calc(100% - 16px)); top: 90px }
.wbar { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 12px; flex: none }
.wbar h3 { font: 600 13px/1 var(--body); margin: 0 }
.wclose { position: absolute; left: 10px; width: 16px; height: 16px; min-width: 16px; padding: 0; border-radius: 50%; border: 1px solid #C2403A; background: #FF5F57; cursor: pointer }
.wclose:hover::after, .wclose:focus-visible::after { content: "×"; display: block; font: 700 12px/12px var(--body); color: #5A0F0B }
.wclose:focus-visible { outline-offset: 3px }
.wbody { overflow-y: auto; padding: 4px 14px 14px; display: grid; gap: 6px; align-content: start }
.about .wbody { justify-items: center; text-align: center; gap: 4px }
.wbody h4 { font: 600 12px/1.2 var(--body); margin: 8px 4px 0; color: var(--ws) }
.fgroup { background: var(--wf); border: 1px solid var(--wl); border-radius: 8px; display: grid }
.fgroup > * + * { border-top: 1px solid var(--wl) }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; min-width: 0 }
.frow small { display: block; font-size: 11px; color: var(--ws) }
.frow[aria-disabled="true"], .frow:has(:disabled) { color: var(--ws) }
button.frow { width: 100%; background: none; border: 0; border-radius: 0; color: var(--wi); font: 13px/1.35 var(--body); text-align: left; cursor: pointer }
button.frow:hover, button.frow:focus-visible { background: #2F6FD0; color: #fff; outline: none }
button.frow .chk { width: 14px; text-align: center; margin-left: auto }
button.frow .lock { margin-left: auto; color: inherit; opacity: .7 }
button.frow .lock + .chk { margin-left: 0 }
.fh { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; color: var(--ws); border-top: 1px solid var(--wl) }
.fnote { padding: 6px 10px; font-size: 11px; color: var(--ws) }
.wbody h4 .lock { font-weight: 400; margin-left: 6px }
.swatch { width: 22px; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .25); flex: none }
.swatch + span { margin-right: auto }
.sw { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border-radius: 10px; border: 0; background: #B8BEC6; cursor: pointer }
.sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3) }
.sw[aria-checked="true"] { background: #2F6FD0 } .sw[aria-checked="true"] i { left: 16px }
.sw:disabled { opacity: .45; cursor: default }
.sw:focus-visible { outline: 3px solid #2F6FD0; outline-offset: 2px }
.toast { position: absolute; z-index: 7; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 8px; background: #1D232B; color: #fff; font: 13px/1.3 var(--body); box-shadow: 0 6px 18px rgb(0 0 0 / .3); white-space: nowrap; max-width: calc(100% - 16px) }
/* Small pages */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 }
dl.facts dt { color: var(--muted) } dl.facts dd { margin: 0 }
@media (max-width: 480px) { dl.facts { grid-template-columns: 1fr } dl.facts dd { margin-bottom: 6px } }
.icons { display: flex; flex-wrap: wrap; gap: 16px; align-items: end }
.icons figure { margin: 0; display: grid; gap: 4px; font: 12px var(--mono); color: var(--muted) }
.icons img { display: block; image-rendering: auto; border-radius: 4px }
code { font: 14px var(--mono); background: color-mix(in srgb, var(--line) 50%, transparent); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
@media (max-width: 900px) { .sim { max-height: none; overflow: visible; flex: none } }