@font-face {
  font-family: "Tex Gyre";
  src: url("../fonts/texgyreheros-regular.otf") format("opentype")
}

  *,
  *:before,
  *:after {

    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  a {
    color: currentColor;
    text-decoration: none;
    vertical-align:baseline;
  }

  li {
    list-style: none;
  }

  p {
    overflow: hidden;
  }
  /* the page fits the window; nothing should ever scroll it sideways */
  html, body { overflow-x: hidden; }
  body {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -200;
    font-size: 24px;
    font-family: "Tex Gyre";
    background: #f5f5f5;

  }

  .uplabel{
width: auto;

  }
  .info,
  #phone-note {
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: min(740px, 90vw);
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ui) transparent;
    /* frosted and rounded, like the controls' boxes */
    background: rgba(245, 245, 245, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 18px 22px;
    z-index: 60;
    font-size: 14px;
    line-height: 1.4;
    /* fades in and out, like Save specimen and Download Font */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .info.open,
  #phone-note.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }
  /* behind an open panel: an invisible layer over the whole page, there only
     to catch a click outside the panel and close it */
  .info-veil {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .info-veil.on { opacity: 1; pointer-events: auto; }
  .info p { overflow: visible; }
  .info p + p,
  #phone-note p + p,
  .info p + dl,
  .info dl + p { margin-top: 0.8em; }
  .info h3 {
    margin-top: 1em;
    font-size: inherit; /* same size as the text; set apart by its lighter tone */
    font-weight: normal;
    opacity: 0.6;
  }
  .info a[href] { text-decoration: underline; text-underline-offset: 2px; }
  .info dl {
    margin-top: 0.8em;
    display: grid;
    grid-template-columns: 90px 1fr;
    column-gap: 12px;
    row-gap: 0.15em;
  }
  .info dt { opacity: 0.6; }
  /* the closing lines (In use, By …) each sit a full empty line apart */
  .info .info-foot { margin-top: 1.4em; }

form:hover{
  cursor:pointer;
}
  #opentypeCanvas {
    width:100vw;
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    z-index: -100;
  }

  #tester {
    position: absolute;
    transform: translate(-99999px,-99999px);
  }
  /* the cursor while typing: a thin light bar, blinking */
  #caret {
    position: absolute;
    width: 2px;
    background: color-mix(in srgb, var(--ui) 40%, transparent); /* light, like the unselected options */
    pointer-events: none;
    display: none;
    z-index: -90; /* over the type (-100), under every control */
    animation: caret-blink 1.1s steps(1) infinite;
  }
  #caret.on { display: block; }
  @keyframes caret-blink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0; }
  }
  /* the controls sit 24px in from the sides and 18px from the top and
     bottom, so their frost boxes (12px / 6px beyond them) clear the edges */
  #top-controls{
    padding:18px 24px;
    position: absolute;
    width:100%;
    top:0;
    left:0;
  }
  #top-controls div{
    float:left;

  }

  /* mode and fonts: everything left of the mode controls (520px column top right) */
  #top-controls .section:nth-child(1){
    width: calc(100% - 580px);
  }
  /* label and value always share a line, top aligned; a long font name is
     cut with … */
  #top-controls .selector {
    display: flex;
    align-items: flex-start;
  }
  /* each dropdown works on its own: the row stays put (its arrow turned up)
     and the list opens just below it, over whatever is beneath. Its own
     frost box (placed by script) grows down to hold it and rises above the
     other rows' boxes; nothing else moves */
  #top-controls .selector .menu {
    position: absolute;
    top: 100%;
    left: 95px;
    z-index: 50;
    width: max-content; /* as wide as its longest name, so it sits in its box */
    max-height: 50vh;
    scrollbar-width: none; /* no scrollbar: a scrim shows there's more */
    padding: 2px 24px 10px 0;
    overscroll-behavior: contain; /* scrolling past the end stays in the list */
    /* its own compositing layer, so scrolling it doesn't make the browser
       repaint the blurred box behind on every frame (that flickered) */
    will-change: transform;
    transform: translateZ(0);
  }
  /* the open selector's row stays above its risen box until the box has
     settled back (.lifted, set by script), so it never disappears */
  #top-controls .selector.lifted > .label,
  #top-controls .selector.lifted > .font-selector {
    position: relative;
    z-index: 50;
  }
  .frost.raised { z-index: 49; }
  #top-controls .selector .menu::-webkit-scrollbar { display: none; }
  /* scroll indicator: a long list fades out where there's more to scroll
     to, below and (once scrolled) above; set by script */
  #top-controls .selector .menu.more-below {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  }
  #top-controls .selector .menu.more-above {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
  }
  #top-controls .selector .menu.more-above.more-below {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  }
  #top-controls .selector .label { flex: none; }
  #top-controls .selector .font-selector {
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* the mode's controls (style + sliders) sit top right */
  #top-controls .section:nth-child(2){
    position: absolute;
    right: 24px;
    width: 520px;
  }
  #top-controls .section:nth-child(3){
    position: absolute;
    right:0;
    overflow: hidden;
    width:auto;
    margin-right: 15px;
  }

  .label{
    float:left;
    width:95px;
    font-size: 14px;
    line-height: 28px;
    /* margin-right: 30px; */
  }
  .font-selector:hover {

    cursor:pointer;
  }
  /* dropdowns float over the page (nothing gets pushed down) and scroll when long;
     no side padding, so the items line up with the selected value above */
  /* dropdowns fade open and closed, slow and calm, without moving; closing,
     the backdrop goes once its items have faded (--close, set by script) */
  .menu  {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease var(--close, 0.4s), visibility 0s linear calc(var(--close, 0.4s) + 0.4s);
    position: absolute;
    top: 100%;
    left: 95px;
    z-index: 50;
    min-width: 240px;
    white-space: nowrap;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 24px 8px 0;
    /* no background: the Mode/Font frost box grows to sit behind it */
  }
  /* Frost: each group of controls (Mode/Font, the settings, the specimen
     stack, the file name with the buttons) sits on its own frosted rounded
     box in the page's tint, always there, placed by script; it shows where
     type passes underneath */
  .frost {
    position: fixed;
    will-change: transform; /* its own layer: steady while things scroll over it */
    transform: translateZ(0);
    z-index: -50; /* above the type (-100), below the controls */
    pointer-events: none;
    border-radius: 12px;
    background: rgba(245, 245, 245, 0.75); /* the page's own tint, frosted */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* items in the interface colour, light like unselected options; the
     current choice and the one under the pointer at full strength. They fade
     in down the list and out from the bottom, on eased delays (--in, --out,
     set by script: quick at first, spreading out), with a soft ease-out;
     once open (.settled) hover answers straight away */
  .menu .item {
    display: block;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1);
    transition-delay: var(--out, 0ms);
  }
  .menu.open .item {
    opacity: 0.4;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--in, 0ms);
  }
  .menu.open .item.current,
  .menu.open .item:hover {
    opacity: 1;
  }
  .menu.open.settled .item {
    transition-duration: 0.25s;
    transition-delay: 0s;
  }
  .menu .item:hover {

    cursor:pointer;
  }
  .remix-icon {
    margin-top:10px;
    width:60px;
    height:60px;
    display: block;
    margin-right:15px;
    float: left;
    position: relative;

  }
  .remix-icon:hover {
    cursor: pointer;
  }
  .fill:hover {
    cursor: pointer;
  }
  .filled {
    /* transform:translateY(-3px); */
  }
  .filled .fill {
    background-color:hsl(70,60%,22%);
  }
  .active .fill {
    background-color:hsl(70,60%,22%);
  }
  .remix-icon .fill {
    position: absolute;
  }
  .remix-icon .round {
    border-radius: 50%;
  }
  #top-controls .slider {
    width: 100%;
    height: 28px;
    clear: both;
  }
  .outline {
    box-shadow: inset 0 0 0 1.5px hsl(70,60%,22%);
  }
  .open {
    display: block;
  }
  .menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease;
  }

  /* the generated font's file name, bottom right, with room below it for
     the buttons */
  #bottom-controls > #caption {
    position: absolute;
    right: 24px;
    bottom: 74px; /* clear of the buttons' own box below */
    max-width: 38vw;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere; /* long names wrap, preferring their hyphens */
  }
  #caption p {
    overflow: visible; /* long remix names shouldn't be clipped */
  }

  #bottom-controls{
    width: 100%;
    position: absolute;
    bottom:0;
    padding: 18px 24px;
  }
  /* Clear / Specimen / Download / ?: bottom right, under the file name */
  #buttons {
    position: absolute;
    right: 24px;
    bottom: 24px;
    font-size: 14px;
    line-height: 16px; /* just the text, so its box pads evenly */
  }
  #buttons a {
    cursor: pointer;
  }
  #buttons > a:not(:first-of-type) { margin-left: 20px; } /* gaps between, none before the first */

  .ui-slider .ui-slider-handle{
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 20px;
    background-color: hsl(70,60%,22%);
    margin-top:-2px;
  }
  .ui-corner-all {
    background-color: hsl(70,60%,22%);
  }
  .ui-state-default:focus {
    outline: none;
    border: 0;
  }
  .ui-slider{
    margin-top:19px;
    width: calc(100% - 165px);
    float:left;
    height:1.5px;
    border: 0;
    border-radius: 0;
    background-color: hsl(70,60%,22%);
  }
  .ui-widget.ui-widget-content {
    border:0;
  }

  /* selectors */
  #top-controls .selector {
    width: 100%;
    position: relative; /* anchors its dropdown */
  }
  #top-controls .panel {
    width: 100%;
  }
  #top-controls .section:nth-child(3) .panel {
    width: auto;
  }
  .remix-icon:last-child {
    margin-right: 0;
  }

  /* style switchers: a labelled row under the sliders (text options, or icons for Remix's folds) */
  #top-controls .styles {
    clear: both;
    width: 100%;
    margin-bottom: 4px;
  }
  #top-controls .styles .label {
    line-height: 26px;
  }
  .style-text,
  .option-text,
  .specimen-text {
    float: left;
    font-size: 14px;
    line-height: 26px;
    margin-right: 14px;
    cursor: pointer;
    opacity: 0.4;
  }
  .style-text.active,
  .style-text:hover,
  .option-text.active,
  .option-text:hover,
  .specimen-text.active,
  .specimen-text:hover {
    opacity: 1;
  }
  #top-controls .styles .remix-icon {
    width: 26px;
    height: 26px;
    margin: 0 12px 0 0;
  }

  /* small labels, centred on their slider lines */
  #top-controls .slider .label { line-height: 26px; }
  /* Pixel's Character: one character to type, on a faint chip */
  .char-input {
    float: left;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    outline: none;
  }
  .char-input:focus { background: rgba(0, 0, 0, 0.1); }
  .char-input.off { opacity: 0.4; } /* Self is on: the typed glyph is set aside */
  .char-self { margin-left: 14px; }




  /* bottom left: specimen, size, width and color stacked like the top sliders */
  #bottom-controls .stack {
    float: left;
    width: 436px; /* its box 460px, as the Foundry's */
  }
  #bottom-controls .stack > div {
    float: left;
    clear: both;
    width: 100%;
    height: 28px;
  }
  #bottom-controls .stack .label,
  #bottom-controls .stack .specimen-text,
  #bottom-controls .stack .option-text,
  #bottom-controls .stack .value {
    line-height: 26px;
  }

  /* slider readouts */
  .slider .value {
    float: left;
    width: 55px;
    margin-left: 12px;
    font-size: 14px;
    white-space: nowrap;
  }
  #top-controls .slider .value { line-height: 26px; }
  /* the display sliders show no value, and run on into its room */
  #bottom-controls .stack .value { display: none; }
  #bottom-controls .stack .ui-slider { width: calc(100% - 95px); }


  /* sliders: a 20px tall hit area with the line drawn through its middle,
     the filled part thicker so progress reads at a glance */
  .slider .ui-slider {
    position: relative;
    margin-top: 3px;
    height: 20px;
    background: transparent !important;
    cursor: pointer;
    touch-action: none;
  }
  .slider .ui-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 1.5px;
    background: currentColor;
    opacity: 0.35;
  }
  .slider .ui-slider .ui-slider-range {
    top: 8.5px;
    height: 3px;
    border-radius: 3px;
  }
  .slider .ui-slider.ui-slider-horizontal .ui-slider-handle {
    top: 2px;
    width: 16px;
    height: 16px;
    margin-top: 0;
    margin-left: -8px;
    border-radius: 50%;
    cursor: grab;
    transition: transform 0.1s;
  }
  .slider .ui-slider .ui-slider-handle:hover,
  .slider .ui-slider .ui-slider-handle.ui-state-active {
    transform: scale(1.2);
  }
  .slider .ui-slider .ui-slider-handle.ui-state-active {
    cursor: grabbing;
  }
  .slider .label,
  .slider .value {
    cursor: default;
    user-select: none;
  }

  /* our own scrollbar for the dropdowns: a thin line in the interface colour */
  :root { --ui: hsl(70, 60%, 22%); } /* the interface, a step deeper than the type */
  .menu {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: var(--ui) transparent;
  }
  .menu::-webkit-scrollbar {
    width: 3px;
  }
  .menu::-webkit-scrollbar-track {
    background: transparent;
  }
  .menu::-webkit-scrollbar-thumb {
    background: var(--ui);
    border-radius: 0;
  }
  .menu::-webkit-scrollbar-button {
    display: none;
    height: 0;
  }

  /* dropdown indicator: a small chevron after the selected value, flips while open */
  .font-selector::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    vertical-align: middle;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .font-selector:has(+ .menu.open)::after {
    transform: translateY(0) rotate(-135deg);
  }

  .info::-webkit-scrollbar { width: 3px; }
  .info::-webkit-scrollbar-track { background: transparent; }
  .info::-webkit-scrollbar-thumb { background: var(--ui); }

  /* busy: whatever is working gently dims and comes back, slowly */
  .busy {
    animation: busy-fade 2.4s ease-in-out infinite;
  }
  @keyframes busy-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
  /* specimen switch: a crossfade, never a blank moment (see crossfade()) */
  #opentypeCanvas {
    transition: opacity 0.35s ease-in-out;
  }
  #opentypeCanvas.hidden-now {
    opacity: 0;
    transition: none;
  }
  #specimen-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -99; /* just over the type */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
  }
  #specimen-ghost.shown {
    opacity: 1;
    transition: none;
  }

  /* the mode's settings float over the specimen and can be hidden, so they
     never have to push the type around */
  #top-controls #settings {
    z-index: 20;
    padding-bottom: 6px;
  }
  /* only the rows and controls themselves take the pointer, so faded rows
     and the empty space around them don't get in the way */
  #top-controls #settings,
  #bottom-controls {
    pointer-events: none;
  }
  #top-controls #settings .panel > div,
  #settings-toggle,
  #bottom-controls .stack,
  #bottom-controls #caption,
  #bottom-controls #buttons {
    pointer-events: auto;
  }

  /* show more / less: a chevron like the dropdowns', centred under the last
     row showing; it fades out and back in when it moves, never slides */
  #settings-toggle {
    position: absolute;
    left: 50%;
    margin-left: -12px; /* centred: half its 24px hit area */
    width: 24px;
    justify-content: center;
    top: 0; /* set by script: just under the last row showing */
    z-index: 1;
    display: flex;
    align-items: center;
    height: 26px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.35s ease;
    user-select: none;
  }
  #settings-toggle.moving { opacity: 0 !important; }
  #settings-toggle.none { display: none; }
  #settings-toggle:hover,
  #settings.collapsed #settings-toggle:hover { opacity: 1; }
  /* chevron up: show less; chevron down: show more. They cross-fade */
  #settings-toggle svg {
    display: block;
    transition: opacity 0.5s ease;
  }
  #settings-toggle .icon-more { position: absolute; left: 5px; top: 6px; opacity: 0; }
  #settings.collapsed #settings-toggle .icon-less { opacity: 0; }
  #settings.collapsed #settings-toggle .icon-more { opacity: 1; }
  /* show less keeps each mode's top rows; the rest fade in place on the same
     eased cascade as the dropdowns (--in top-down, --out bottom-up, set by
     script). Nothing moves; the frost box grows before rows fade in and
     shrinks only once they've faded out */
  #top-controls #settings .panel > div {
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--in, 0ms);
  }
  #top-controls #settings.collapsed .panel > div.extra {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1);
    transition-delay: var(--out, 0ms);
  }

  /* while a specimen image is taken: every setting showing, no fades, and
     the file name on one line, bottom left */
  .capturing #top-controls #settings .panel > div {
    opacity: 1 !important;
    transition: none !important;
  }
  .capturing #bottom-controls > #caption {
    right: auto;
    left: 24px;
    bottom: 24px;
    max-width: none;
    white-space: nowrap;
    text-align: left;
  }

  /* loading: no mode's settings show until the current one is picked */
  html.booting #top-controls .panel { visibility: hidden; }

  /* the Save specimen and Download Font panels: open in the middle of the
     screen over the veil, like About; frosted and rounded, fading in and out */
  #buttons .drop-menu {
    position: fixed; /* a panel in the middle of the screen, over the veil */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 18px 22px;
    border-radius: 12px;
    background: rgba(245, 245, 245, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  #buttons .drop-menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }
  /* the panel's headline: same size as the text, set apart by space below */
  .drop-menu .menu-head,
  .info .menu-head,
  #phone-note .menu-head { line-height: 22px; margin-bottom: 10px; }
  #phone-note a[href] { text-decoration: underline; text-underline-offset: 2px; }
  .info-close { display: none; } /* phones only (below) */
  /* the phone note's OK (and About's Close on a phone): its own line, under the text */
  #phone-note .note-ok,
  .info .info-close {
    display: inline-block;
    margin-top: 28px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .drop-menu .save-row { display: flex; line-height: 22px; padding: 2px 0; }
  .drop-menu .save-label {
    flex: none;
    width: 64px;
    opacity: 0.6;
  }
  .drop-menu .save-value { white-space: normal; max-width: 340px; overflow-wrap: anywhere; }
  .drop-menu .option-text { float: none; margin-right: 12px; line-height: 22px; }
  .drop-menu a[href] { text-decoration: underline; text-underline-offset: 2px; }
  .drop-menu .dl-copy { opacity: 0.6; cursor: pointer; margin-left: 4px; }
  .drop-menu .dl-copy:hover { opacity: 1; }
  /* the primary action (Save / Download): centred under a thin hairline
     across the panel, so it reads as the button */
  #buttons .drop-menu .save-row:has(.save-go) {
    justify-content: center;
    /* edge to edge along the panel's bottom, under a hairline */
    margin: 12px -22px -18px;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--ui) 25%, transparent);
  }
  /* the whole strip is the button; on hover the frost behind it turns more opaque */
  #buttons .drop-menu .save-go {
    flex: 1;
    text-align: center;
    padding: 10px 22px 14px;
    border-radius: 0 0 12px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  #buttons .drop-menu .save-go:hover { background-color: rgba(250, 250, 250, 0.85); }

  /* the Download Font menu holds longer lines: give it room */
  #buttons #download-menu { width: 420px; white-space: normal; }

  #bar-name { display: none; } /* phones only (below) */

  /* ---------- phones and portrait tablets (up to 900px) ---------- (last,
     so it overrides the desktop rules)
     A lite version: Mode and Font across the top (each mode at its own
     settings, which aren't shown); the type in the middle, across the
     screen; the display settings (Case, Specimen, Size, Colour) open above
     a bar with the name on the left, About and Foundry on the right. No
     Width (the type fits the screen), Download Font, Save specimen or file
     name.
     Everything looks as on desktop; only the area that takes a touch is
     bigger */
  @media only screen and (max-width: 900px) {
    body { overflow: hidden; }
    #top-controls { padding: 66px 24px 14px; } /* below the bar */
    #top-controls .section:nth-child(1) { width: 100%; }
    #top-controls .section:nth-child(1) .label { width: 64px; }
    #top-controls .selector .menu { left: 64px; max-height: 45vh; }

    #top-controls #settings { display: none !important; }
    #bottom-controls .stack > div:has(#wrap-slider) { display: none; }

    /* the display settings: at the bottom */
    #bottom-controls .stack {
      position: fixed;
      left: 24px;
      right: 24px;
      bottom: 18px; /* its box inset 12px, as the Foundry's */
      width: auto;
    }

    /* touch: the whole row's height takes a drag, and a ring around the
     handle takes a grab; nothing you see changes */
    .slider .ui-slider::after {
      content: "";
      position: absolute;
      left: -8px;
      right: -8px;
      top: -4px;
      bottom: -4px;
    }
    .slider .ui-slider .ui-slider-handle::after {
      content: "";
      position: absolute;
      inset: -12px;
    }

    /* the bar, at the top as in the Foundry: the name on the left; About and Foundry as text, as on
       desktop, together on the right, each taking a touch over a taller area */
    #caption, #sample, #download { display: none !important; }
    .menu .item.upload { display: none; } /* no font upload on a phone */
    #buttons {
      left: 24px;
      right: 24px;
      position: fixed;
      top: 24px; /* its box inset 12px, as the Foundry's, the controls' 8px below it */
      bottom: auto;
      display: flex;
      gap: 20px;
    }
    #buttons > a,
    #buttons > a:not(:first-of-type) { position: relative; margin: 0; }
    /* each takes a touch over a taller area than it shows */
    #buttons > a::after { content: ""; position: absolute; inset: -12px -8px; }
    #bar-name { display: inline; margin-right: auto; }
    #buttons { z-index: 70; } /* over About and the note, so they're always there */

    /* About and the phone note take over the whole screen, frosted, their
       text from the same top margin (About scrolling) */
    .info,
    #phone-note {
      left: 0;
      top: 0;
      transform: none;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      border-radius: 0;
      padding: 72px 24px 24px; /* clear of the bar, which stays over them */
      background: rgba(245, 245, 245, 0.82);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }
    .info .info-close { display: inline-block; }
  }