/* The account and sign-in pages: the same grey and white as the rest of the site, in cards. */
.acct { max-width: 44em; padding: 12px 0 72px; display: grid; gap: 18px; }
.acct h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin: 0 0 4px; }
.acct .sub { margin: 0; color: var(--mist); }
.card { background: var(--raise); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 4vw, 28px); display: grid; gap: 14px; min-width: 0; }
.card h2 { font-size: 1.15rem; margin: 0; letter-spacing: -0.02em; }
.card p { margin: 0; color: #d4d4d9; }
.card .note, .note { color: var(--mist); font-size: 0.92rem; }
form.row, .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field { display: grid; gap: 6px; flex: 1 1 14em; min-width: 0; }
.field span { font-size: 0.85rem; color: var(--mist); font-weight: 600; }
input[type=text], input[type=email], textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; outline: none;
}
textarea { min-height: 5.5em; resize: vertical; font-size: 0.95rem; }
input:focus, textarea:focus { border-color: var(--mist); }
.device-code { margin: 4px 0 2px; font-size: 2rem; font-weight: 700; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; user-select: all; }
input.code { letter-spacing: 0.4em; font-size: 1.3rem; font-weight: 600; text-align: center; max-width: 11em; }
.check { display: flex; gap: 10px; align-items: flex-start; color: #d4d4d9; font-size: 0.95rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #fff; flex: none; }
button.btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.btn.small { padding: 8px 16px; font-size: 0.9rem; }
.btn.danger { background: transparent; color: #ff8a80; box-shadow: inset 0 0 0 1px #5a3532; }
.btn.danger:hover { box-shadow: inset 0 0 0 1px #ff8a80; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.list li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list .what { display: grid; gap: 2px; min-width: 0; flex: 1 1 14em; }
.list .what b { font-weight: 600; overflow-wrap: anywhere; }
.list .what small { color: var(--mist); font-size: 0.85rem; overflow-wrap: anywhere; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); color: var(--mist); border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: 2px; }
.tag.on { background: #fff; color: var(--bg); border-color: #fff; }
.empty { color: var(--mist); font-size: 0.95rem; }
.msg { border-radius: 14px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); color: #d4d4d9; }
.msg.bad { border-color: #5a3532; color: #ffb4ab; }
.msg.good { border-color: #3d4a3d; color: #c8e6c9; }
code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88em; overflow-wrap: anywhere; }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; overflow-x: auto; margin: 0; font-size: 0.86rem; line-height: 1.55; }
.doc pre { margin: 12px 0; }
[hidden] { display: none !important; }

/* The sign-in page: one card in the middle, coming in with the tiles turning into place. */
.gate { min-height: calc(100svh - 84px); display: grid; place-items: center; padding: 12px 0 48px; }
.gate .card { width: min(100%, 27em); gap: 18px; padding: clamp(22px, 5vw, 34px); }
.mark { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.35rem; letter-spacing: -0.035em; }
.mark svg { width: 40px; height: 40px; }
.mark i { font-style: normal; color: var(--mist); }
.ask { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; margin: 0; text-wrap: balance; }
.ask b { font-weight: 700; }
.who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.who .dot { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bg); display: grid; place-items: center; font-weight: 700; flex: none; }
.who .what { display: grid; min-width: 0; }
.who small { color: var(--mist); overflow-wrap: anywhere; }
.scopes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scopes li { display: flex; gap: 10px; align-items: center; color: #d4d4d9; }
.scopes li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #fff; transform: rotate(45deg); flex: none; }
.warn { font-size: 0.9rem; color: var(--mist); border-left: 3px solid var(--line); padding-left: 12px; }
.warn b { color: var(--text); }
.gate .actions { margin: 0; }
.gate .actions .btn { flex: 1 1 auto; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .enter .card { animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .enter .mark .tile { animation: turn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-box: fill-box; transform-origin: center; }
  .enter .mark .t1 { animation-delay: 0.05s } .enter .mark .t2 { animation-delay: 0.1s } .enter .mark .t3 { animation-delay: 0.15s }
  .enter .mark .name { animation: slide 0.6s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
/* The tiles' own place is in their transform attribute, so the turn is drawn with rotate alone and they end where they started. */
@keyframes turn { from { rotate: -90deg; opacity: 0; scale: 0.6 } to { rotate: 0deg; opacity: 1; scale: 1 } }
@keyframes rise { from { opacity: 0; translate: 0 18px } to { opacity: 1; translate: 0 0 } }
@keyframes slide { from { opacity: 0; translate: -10px 0 } to { opacity: 1; translate: 0 0 } }

/* Signed out, the page is the brand: the tiles full size on the left, slowly passing the light round, over a
   faint floor of the same diamonds; every way in sits in one bar on the right. The site's header and footer
   step aside so the art has the whole window. */
body.signing header, body.signing footer { display: none; }
body.signing .wrap { width: 100%; }
.signin { display: grid; grid-template-columns: minmax(0, 1fr) min(440px, 100%); min-height: 100svh; }
.art {
  position: relative; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: clamp(20px, 4vh, 36px);
  padding: 48px 24px; background: radial-gradient(90% 70% at 50% 45%, #222225, var(--bg) 70%);
}
/* The floor: the logo's own diamond, tiled, fading out from the middle. */
.art::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect x='22' y='22' width='28' height='28' rx='7' fill='%23ffffff' transform='rotate(45 36 36)'/%3E%3C/svg%3E") 0 0 / 72px 72px;
  opacity: .035; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.giant { position: relative; width: min(46vmin, 400px); height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.tagline { position: relative; margin: 0; text-align: center; color: var(--mist); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; text-wrap: balance; }
.bar { display: flex; flex-direction: column; gap: 28px; min-width: 0; background: var(--raise); border-left: 1px solid var(--line); padding: clamp(24px, 4vw, 40px); }
.bar-body { flex: 1; display: grid; align-content: center; gap: 18px; min-width: 0; }
.bar form { display: grid; gap: 14px; }
.bar .ask { font-size: 1.5rem; margin: 0; }
.bar input.code { max-width: none; }
.bar .actions { display: grid; gap: 10px; }
.bar .actions .btn, .bar form > .btn { width: 100%; text-align: center; }
.providers { display: grid; gap: 18px; }
.provider { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.provider svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--mist); font-size: 0.85rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.legal { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.legal a { color: var(--text); }
/* On a phone the art is a short band over the bar, and the bar is the page. */
@media (max-width: 760px) {
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .art { padding: 36px 16px 28px; }
  .giant { width: min(34vmin, 150px); }
  .tagline { font-size: 1rem; }
  .bar { border-left: 0; border-top: 1px solid var(--line); padding: 24px max(16px, env(safe-area-inset-left, 0px)) 28px; }
  .bar .mark { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The home page's light, passing round the four tiles in turn. */
  .giant .tile { animation: lit 3.2s ease-in-out infinite; }
  .giant .t2 { animation-delay: -2.4s; } .giant .t3 { animation-delay: -1.6s; } .giant .t0 { animation-delay: -0.8s; }
  .enter .giant { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .enter .tagline { animation: rise 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .enter .bar-body { animation: rise 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}

/* The consent card: Quarterturn and the app side by side, then who you are, what the app gets, and the choice.
   Everything is scoped to .consent so the "can't go ahead" card and the account page keep their own look. */
.gate .card.consent { gap: 22px; }
.consent .pair { display: flex; align-items: center; justify-content: center; gap: 14px; }
.consent .badge { width: 58px; height: 58px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); flex: none; }
.consent .badge svg { width: 36px; height: 36px; }
.consent .badge.qt { background: var(--raise); }
.consent .badge.qt svg { width: 40px; height: 40px; }
.consent .badge.qt .t2 { fill: #4a4a52; }
.consent .badge.qt .t3 { fill: #6a6a72; }
.consent .badge.app { background: #fff; border-color: #fff; color: var(--bg); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.consent .link { display: flex; gap: 6px; }
.consent .link i { width: 5px; height: 5px; border-radius: 50%; background: var(--mist); opacity: .35; }
.consent .head { display: grid; gap: 6px; text-align: center; }
.consent .head .ask { font-size: 1.45rem; }
.consent .sub { margin: 0; color: var(--mist); }
.consent .qtname { color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.consent .qtname i { font-style: normal; color: var(--mist); }

.consent .who { padding: 10px 10px 10px 12px; }
.consent .who .what { flex: 1 1 auto; }
.consent .who .what b, .consent .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.consent .who small { font-size: .85rem; }
.consent .swap { flex: none; white-space: nowrap; font-size: .85rem; color: var(--text); text-decoration: none; padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, box-shadow .15s; }
.consent .swap:hover { background: var(--raise); box-shadow: inset 0 0 0 1px var(--mist); }

.consent .label { margin: 0 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.consent .label span { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--text); }
.consent .scopes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; }
.consent .scopes li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; }
.consent .scopes li + li { border-top: 1px solid var(--line); }
.consent .scopes li::before { content: none; display: none; }
.consent .scopes .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--raise); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.consent .scopes .ic svg { width: 17px; height: 17px; }
.consent .scopes .what { display: grid; gap: 1px; min-width: 0; }
.consent .scopes .what small { color: var(--mist); font-size: .85rem; line-height: 1.35; }

.consent .warn { display: flex; gap: 12px; align-items: flex-start; border-left: 0; padding: 12px 14px; border-radius: 14px; background: rgba(242, 198, 109, .06); border: 1px solid #4a4130; color: #d9cfb8; font-size: .9rem; line-height: 1.45; }
.consent .warn[hidden] { display: none; }
.consent .warn svg { width: 20px; height: 20px; flex: none; color: #f2c66d; margin-top: 1px; }
.consent .warn p { margin: 0; }
.consent .warn b { color: #fff; overflow-wrap: anywhere; }

.consent .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.consent .actions .btn { width: 100%; padding: 14px 26px; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s; }
.consent .actions .btn:active { transform: scale(.985); }
.consent .actions .btn[disabled] { opacity: .65; cursor: progress; }
.consent .foot { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; color: var(--mist); font-size: .85rem; }
.consent .foot a { color: var(--text); }

/* In the small window an app opens, there's nowhere to go but back, so the site's header and footer step aside. */
body.popup header, body.popup footer { display: none; }
body.popup .gate { min-height: 100svh; padding: 0; }
/* The SDK's window is 480 by 720: the card is the whole window there, a little tighter, so Cancel is on screen
   without scrolling once the browser's own bar has taken its share. */
body.popup .gate .card.consent { gap: 14px; padding: 20px 22px; border: 0; border-radius: 0; box-shadow: none; background: transparent; max-width: none; }
body.popup .consent .head { gap: 2px; }
body.popup .consent .warn { padding-block: 10px; }
body.popup .consent .badge { width: 50px; height: 50px; border-radius: 16px; }
body.popup .consent .badge svg { width: 34px; height: 34px; }
body.popup .consent .head .ask { font-size: 1.3rem; }
body.popup .consent .scopes li { padding-block: 9px; }
body.popup .consent .actions .btn { padding-block: 12px; }
body.popup .consent .foot { padding-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .enter .consent > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  .enter .consent > :nth-child(2) { animation-delay: .06s; }
  .enter .consent > :nth-child(3) { animation-delay: .12s; }
  .enter .consent > :nth-child(4) { animation-delay: .18s; }
  .enter .consent > :nth-child(5) { animation-delay: .22s; }
  .enter .consent > :nth-child(n+6) { animation-delay: .26s; }
  .enter .consent .qt { animation: from-left .6s cubic-bezier(.2, .8, .2, 1) both; }
  .enter .consent .app { animation: from-right .6s cubic-bezier(.2, .8, .2, 1) .05s both; }
  .enter .consent .qt .tile { transform-box: fill-box; transform-origin: center; animation: turn .55s cubic-bezier(.2, .8, .2, 1) both; }
  .enter .consent .qt .t1 { animation-delay: .08s; }
  .enter .consent .qt .t2 { animation-delay: .14s; }
  .enter .consent .qt .t3 { animation-delay: .2s; }
  .consent .link i { animation: beat 1.4s ease-in-out infinite; }
  .consent .link i:nth-child(2) { animation-delay: .18s; }
  .consent .link i:nth-child(3) { animation-delay: .36s; }
}
@keyframes from-left { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes from-right { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes beat { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Linked accounts: a library shelf. Each place you've used Quarterturn is a portrait cover with its name
   under it, in one row that scrolls sideways; picking one slides its details in from the right. */
.shelf { display: grid; gap: 12px; min-width: 0; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shelf h2 { font-size: 1.15rem; margin: 0; letter-spacing: -0.02em; }
.shelf-arrows { display: flex; gap: 6px; }
.shelf-arrows[hidden] { display: none; }
.arrow, .drawer-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--raise); color: var(--text); cursor: pointer; }
.arrow:hover:not(:disabled), .drawer-x:hover { border-color: var(--mist); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow svg, .drawer-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lib { list-style: none; margin: 0 -4px; padding: 4px 4px 12px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; }
.lib > li { flex: 0 0 clamp(8.5rem, 30vw, 11rem); scroll-snap-align: start; min-width: 0; }
.lib .empty { flex: 1 1 auto; color: var(--mist); font-size: 0.92rem; padding: 6px 0; }
.lib-tile { display: grid; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lib-cover {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 14px; border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px),
    radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--tint, #8a8a92) 60%, #1c1c1e), #141416 75%);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.lib-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.lib-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff; color: var(--bg); font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.lib-cover small { color: rgba(255,255,255,.72); font-size: 0.76rem; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.lib-tile:hover .lib-cover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.lib-tile:focus-visible { outline: none; }
.lib-tile:focus-visible .lib-cover { outline: 2px solid var(--text); outline-offset: 3px; }
.lib-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.lib-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-more { flex: none; color: var(--mist); font-weight: 700; letter-spacing: 0.05em; }
.lib-meta { margin-top: -4px; color: var(--mist); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The sidebar: a full-height panel on the right, over a dimmed page. */
html.locked { overflow: hidden; }
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(26rem, 100%); max-width: 100%; height: 100%; max-height: none; padding: 0;
  border: 0; border-left: 1px solid var(--line); background: var(--raise); color: var(--text);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.drawer.in { transform: none; }
.drawer::backdrop { background: rgba(0,0,0,.6); opacity: 0; transition: opacity .35s; }
.drawer.in::backdrop { opacity: 1; }
.drawer-in {
  box-sizing: border-box; height: 100%; overflow-y: auto; display: grid; align-content: start; gap: 16px;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) 20px;
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; color: var(--mist); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.drawer-body { display: grid; gap: 14px; min-width: 0; }
.drawer-body .lib-cover { aspect-ratio: 16 / 9; border-radius: 14px; }
.drawer-body .lib-mark { width: 72px; height: 72px; font-size: 2.2rem; border-radius: 20px; }
.drawer-body h3 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-body .note { margin: -8px 0 0; }
.drawer-site { justify-self: start; margin-top: -8px; color: var(--mist); font-size: 0.88rem; text-decoration: none; overflow-wrap: anywhere; }
.drawer-site:hover { color: var(--text); text-decoration: underline; }
.drawer-body .note a { color: var(--text); }
.drawer-body h4 { margin: 6px 0 0; color: var(--mist); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.drawer-devices { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer-devices li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.drawer-devices li:last-child { border-bottom: 1px solid var(--line); }
.drawer-devices li > span { display: grid; flex: 1 1 10em; min-width: 0; }
.drawer-devices b { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.drawer-devices small { color: var(--mist); font-size: 0.8rem; }
.drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .lib > li { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
  .lib > li:nth-child(2) { animation-delay: .05s; }
  .lib > li:nth-child(3) { animation-delay: .1s; }
  .lib > li:nth-child(n+4) { animation-delay: .15s; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer::backdrop, .lib-cover { transition: none; }
}