/* Clarity interactive demo. Self-contained; every rule is scoped to .cdemo. */
.cdemo {
  --win: #1e1e20; --bar: #2a2a2c; --barline: #111; --winline: rgba(255,255,255,.16);
  --field: #3a3a3c; --fieldtext: #d0d0d2; --side: #252527; --bubble: #3a3a3c; --sel: rgba(255,255,255,.1);
  --line: #303033; --hint: #7c7c80; --evtext: #e5e5e7; --input: #3a3a3c;
  --text: #f5f5f7; --text2: #ababb0; --text3: #b4b4b9; --body: #d4d4d6; --title: #c7c7cc;
  --f1: rgba(255,255,255,.05); --f2: rgba(255,255,255,.06); --f3: rgba(255,255,255,.1); --f4: rgba(255,255,255,.12);
  --track: rgba(255,255,255,.2); --ring: #5b5b60; --blue: #0A84FF; --hair: rgba(255,255,255,.1);
  --ease: cubic-bezier(.2,.7,.3,1); --fxe: .36s cubic-bezier(.22,1,.36,1);
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: #0f141c;
  color: var(--text); font: 13px/1.4 system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
  text-align: left; letter-spacing: 0; outline: none; contain: paint;
}
:where(.cdemo) *, :where(.cdemo) *::before, :where(.cdemo) *::after { box-sizing: border-box; margin: 0; padding: 0; }
:where(.cdemo) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit;
  -webkit-tap-highlight-color: transparent; }
.cdemo :focus-visible, .cdemo:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.cdemo [hidden] { display: none !important; }
.cdemo svg { display: block; flex: none; }
.cd-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cd-f { fill: currentColor; }
.cd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- wallpaper + the effect layer over it ---- */
.cd-wall { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 78% 18%, #4A3322, rgba(74,51,34,0) 70%),
    radial-gradient(60% 80% at 10% 90%, #163A5C, rgba(22,58,92,0) 70%),
    radial-gradient(50% 60% at 40% 40%, #15333A, rgba(21,51,58,0) 72%),
    linear-gradient(160deg, #0F1822, #1C1814); }
.cd-wall svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-desk { position: absolute; right: 12px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.cd-desk div { width: 70px; text-align: center; font-size: 10px; line-height: 1.2; color: #fff; }
.cd-desk span { display: inline-block; padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.55); }
.cd-desk svg { width: 34px; height: 40px; margin: 0 auto 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.cd-fx { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; z-index: 2; pointer-events: none;
  transition: backdrop-filter var(--fxe), -webkit-backdrop-filter var(--fxe); }
.cd-fx i { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity var(--fxe); }

/* ---- windows (laid out in a scaled stage) ---- */
.cd-stage { position: absolute; left: 0; top: 28px; z-index: 3; transform-origin: 0 0; }
.cd-win { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: var(--win); box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.25), 0 0 0 .5px var(--winline);
  transition: filter var(--fxe); cursor: default; }
.cd-ov { position: absolute; inset: -1px; background: #000; opacity: 0; pointer-events: none; z-index: 5; transition: opacity var(--fxe); }
.cd-bar { position: relative; flex: none; height: var(--tbh, 40px); background: var(--bar); border-bottom: 1px solid var(--barline);
  display: flex; align-items: center; justify-content: center; }
.cd-tl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; pointer-events: none; z-index: 1; }
.cd-tl i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.cd-tl i:nth-child(1) { background: #ff5f57; } .cd-tl i:nth-child(2) { background: #febc2e; } .cd-tl i:nth-child(3) { background: #28c840; }
.cd-win:not(.key) .cd-tl i { background: #47474b; box-shadow: none; }
.cd-tb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--ph, 28px) + 10px) 0 72px;
  font-size: 13px; font-weight: 600; color: var(--title); white-space: nowrap; overflow: hidden; }
.cd-win:not(.key) .cd-tb { color: var(--text2); }
.cdemo .cd-tb:focus-visible { outline-offset: -3px; border-radius: 12px 12px 0 0; }
.cd-tb > span { min-width: 0; overflow: hidden; white-space: nowrap; }
.cd-pin { position: absolute; right: 4px; top: 50%; z-index: 2; width: var(--ph, 28px); height: var(--ph, 28px);
  margin-top: calc(var(--ph, 28px) / -2); display: grid; place-items: center; color: var(--text2); }
.cd-pin span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; opacity: .6; transition: opacity .15s, background .15s; }
.cd-pin svg { width: 14px; height: 14px; }
.cd-pin .cd-f, .pinned .cd-pin .cd-i { display: none; }
.pinned .cd-pin .cd-f { display: block; }
.cd-pin:hover span { opacity: 1; background: var(--f3); }
.pinned .cd-pin { color: #fff; }
.pinned .cd-pin span { opacity: 1; background: var(--blue); }
.cd-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* writer */
.cd-doc { max-width: 520px; margin: 0 auto; padding: 24px 32px; }
.cd-d1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.cd-dm { color: #aeaeb3; margin: 3px 0 14px; }
/* phone: the stacked cards leave Writer a strip above the sheet, where the tips sit; it shows its title only */
.cdemo.cd-narrow .cd-w-writer .cd-doc > :not(.cd-d1) { display: none; }
.cd-doc p { color: var(--body); line-height: 1.55; margin-bottom: 10px; }
.cd-doc p.cd-li { margin-bottom: 3px; }
.cd-d2 { font-size: 14.5px; font-weight: 600; margin: 14px 0 6px; }
/* browser */
.cd-url { display: flex; align-items: center; justify-content: center; gap: 6px; width: min(62%, 380px); height: 26px; border-radius: 8px;
  background: var(--field); color: var(--fieldtext); font-size: 12px; font-weight: 400; box-shadow: 0 0 0 .5px var(--hair); }
.cd-url svg { width: 10px; height: 10px; }
.cd-web { height: 100%; background: #fbfaf8; color: #1d1d1f; padding: 16px 28px; display: flex; flex-direction: column; gap: 18px; }
.cd-wn { display: flex; gap: 18px; font-size: 12px; color: #666; white-space: nowrap; }
.cd-wn b { color: #111; margin-right: auto; font-size: 13px; }
.cd-wh { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.cd-w1 { font-size: 34px; line-height: 1.02; font-weight: 700; letter-spacing: -.035em; margin-bottom: 12px; }
.cd-wh p { color: #555; line-height: 1.5; margin-bottom: 14px; }
.cd-wb { display: inline-block; padding: 8px 15px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; font-weight: 600; }
.cd-wg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-wg i { height: 78px; border-radius: 12px; background: linear-gradient(135deg, #c9e7ff, #7fb6f0); }
.cd-wg i:first-child { grid-column: 1 / -1; height: 118px; background: linear-gradient(135deg, #ffd9b8, #f39a6b); }
.cd-wg i:last-child { background: linear-gradient(135deg, #d3f1e8, #6cc3b0); }
.cd-wf { font-size: 11.5px; color: #888; border-top: 1px solid #e7e5e1; padding-top: 12px; white-space: nowrap; }
/* chat */
.cd-chat { display: flex; height: 100%; }
.cd-cs { flex: none; width: 36%; max-width: 150px; background: var(--side); border-right: 1px solid var(--barline); padding: 8px;
  display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.cd-cs small { font-size: 10.5px; font-weight: 600; color: var(--text2); padding: 8px 8px 3px; }
.cd-cs span, .cd-cs small { flex: none; }
.cd-cs span { padding: 4px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.cd-cs .on { background: var(--sel); font-weight: 600; }
.cd-cm { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; }
.cd-ms { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cd-m { display: flex; gap: 7px; align-items: flex-end; }
.cd-m i { flex: none; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; display: grid; place-items: center; }
.cd-m span { padding: 7px 10px; border-radius: 13px; background: var(--bubble); font-size: 12px; line-height: 1.35; max-width: 84%; }
.cd-m.me { flex-direction: row-reverse; }
.cd-m.me span { background: var(--blue); color: #fff; }
.cd-ci { flex: none; margin-top: 8px; height: 30px; border-radius: 15px; box-shadow: 0 0 0 1px var(--input); color: var(--hint);
  font-size: 12px; padding: 0 12px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
/* calendar */
.cd-cal { height: 100%; display: grid; grid-template-columns: 42px repeat(5, 1fr); grid-template-rows: 26px repeat(8, 1fr);
  column-gap: 3px; padding: 4px 10px 8px 0; font-size: 10.5px; }
.cd-cal b { font-size: 11px; color: var(--text2); font-weight: 600; align-self: center; padding-left: 4px; white-space: nowrap; }
.cd-cal b.t { color: #ff453a; }
.cd-cal u { text-decoration: none; color: var(--hint); font-size: 10px; text-align: right; padding-right: 6px; transform: translateY(-6px); white-space: nowrap; }
.cd-cal em { grid-column: 2 / -1; border-top: 1px solid var(--line); }
.cd-ev { position: relative; border-radius: 5px; border-left: 3px solid; padding: 2px 5px; margin: 1px 0; color: var(--evtext); line-height: 1.2; overflow: hidden; }
/* mail */
.cd-ml { position: relative; padding: 7px 14px 7px 28px; border-bottom: 1px solid var(--line); font-size: 11.5px; line-height: 1.4; }
.cd-ml:first-child { background: var(--sel); }
.cd-ml.u::before { content: ""; position: absolute; left: 11px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.cd-ml b { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.cd-ml s.cd-sj { color: var(--text); font-size: 11.5px; }
.cd-ml b span { font-weight: 400; font-size: 10.5px; color: var(--text2); }
.cd-ml s { text-decoration: none; display: block; color: var(--text2); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
/* sticky note */
.cd-w-note { background: #5c5230; }
.cd-w-note .cd-bar { background: #4f4629; border-bottom: 0; --text2: #e6dcb8; }
.cd-w-note .cd-tb { padding: 0 calc(var(--ph, 28px) + 10px); color: #e6dcb8; font-weight: 500; font-size: 12px; }
.cd-note span { display: block; }
.cd-note { padding: 10px 16px; font: 13px/1.6 "Marker Felt", "Noteworthy", system-ui, sans-serif; color: #f3ecd2; white-space: nowrap; }

/* ---- app icons, dock ---- */
.cd-app { --s: 28px; width: var(--s); height: var(--s); flex: none; border-radius: 22.5%; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 .5px 1.5px rgba(0,0,0,.3), inset 0 0 0 .5px rgba(255,255,255,.12); }
.cd-app svg { width: 64%; height: 64%; }
.cd-app .cd-full { width: 100%; height: 100%; }
.cd-dock { position: absolute; left: 50%; bottom: 6px; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 18px; background: #26272c; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cd-dock .cd-app { --s: 38px; position: relative; overflow: visible; }
.cd-dock .cd-app > * { border-radius: inherit; }
.cd-dock .run::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.6); }
.cd-dsep { flex: none; width: 1px; height: 32px; background: rgba(255,255,255,.18); margin: 0 2px; }
.cd-nodock .cd-dock, .cd-nodock .cd-desk { display: none; }

/* ---- menu bar ---- */
.cd-mb { position: absolute; left: 0; right: 0; top: 0; height: 28px; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 16px; color: #fff; font-size: 13px; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.16));
  text-shadow: 0 1px 1px rgba(0,0,0,.2); white-space: nowrap; }
.cd-menus { flex: 1; min-width: 0; display: flex; gap: 18px; overflow: hidden; }
.cd-menus b { font-weight: 700; }
.cd-mr { flex: none; display: flex; align-items: center; gap: 14px; }
.cd-mr svg { width: 16px; height: 16px; }
.cd-bat { width: 23px; height: 11px; border-radius: 3px; border: 1.3px solid #fff; padding: 1.3px; }
.cd-bat i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #fff; }
.cd-mbi { position: relative; width: 32px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.cd-mbi[aria-expanded="true"] { background: rgba(255,255,255,.22); }
.cd-mbi svg { width: 21px; height: 21px; }
.cd-mbi .on, .cd-mbi.lit .off { display: none; }
.cd-mbi.lit .on { display: block; }
.cd-cks { display: none; }
.cd-narrow .cd-menus span:nth-child(n+4), .cd-narrow .cd-wide, .cd-narrow .cd-ckl { display: none; }
.cd-narrow .cd-cks { display: inline; }
.cd-narrow .cd-mb { padding: 0 10px 0 14px; }
.cd-narrow .cd-menus { gap: 14px; }

/* ---- Clarity panel ---- */
.cd-panel { position: absolute; z-index: 6; top: 36px; width: 320px; max-height: calc(100% - 44px); display: flex; flex-direction: column;
  padding: 14px; border-radius: 20px; background: #26262a; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  transform-origin: var(--nx, 50%) -8px; transition: opacity .2s ease-out, transform .2s var(--ease), visibility 0s linear .2s; }
.cd-panel.open { transition-delay: 0s; }
.cd-panel:not(.open) { opacity: 0; visibility: hidden; transform: scale(.96) translateY(-6px); }
.cd-notch { position: absolute; top: -7px; left: var(--nx, 50%); width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: #26262a; border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1); border-radius: 3px 0 0 0; }
.cd-pg { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.cd-head { display: flex; align-items: center; gap: 10px; }
.cd-head > div { flex: 1; min-width: 0; }
.cd-h { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.cd-st { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; }
.cd-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; }
.cd-st.on i { background: #30d158; } .cd-st.pz i { background: #ff9f0a; }
.cd-kbd { font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--f4); color: var(--text3); letter-spacing: .04em; }
.cd-sw { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: rgba(120,120,128,.5); transition: background .2s; }
.cd-sw i { position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.cd-sw[aria-checked="true"] { background: var(--blue); }
.cd-sw[aria-checked="true"] i { transform: translateX(20px); }
.cd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-tile { border-radius: 14px; background: var(--f2); padding: 9px 10px 5px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.cd-tile.on { background: rgba(10,132,255,.13); border-color: rgba(10,132,255,.35); }
.cd-tgl { display: grid; grid-template-columns: 30px 1fr; column-gap: 9px; align-items: center; width: 100%; border-radius: 10px; }
.cd-ico { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--f4); color: var(--text3); display: grid; place-items: center; transition: background .2s, color .2s; }
.cd-ico svg { width: 16px; height: 16px; }
.on .cd-ico { background: var(--blue); color: #fff; }
.cd-tt { font-weight: 600; font-size: 14px; line-height: 1.15; }
.cd-val { font-size: 12px; color: var(--text2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cd-rng { --p: 50%; --fill: #8e8e93; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin-top: 3px;
  background: transparent; cursor: pointer; touch-action: none; }
.on .cd-rng { --fill: var(--blue); }
.cd-rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--fill) var(--p), var(--track) var(--p)); }
.cd-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 14px; margin-top: -5px; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cd-rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
.cd-rng::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fill); }
.cd-rng::-moz-range-thumb { width: 22px; height: 14px; border: 0; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.cd-rng:focus-visible { outline-offset: 0; border-radius: 6px; }
.cd-keep { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 14px; background: var(--f2); }
.cd-keep:hover, .cd-prow:hover { background: var(--f3); }
.cd-ki, .cd-pi { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--f4); color: var(--text3); display: grid; place-items: center; }
.cd-ki svg, .cd-pi svg { width: 15px; height: 15px; }
.cd-ki.on, .cd-pi { background: var(--blue); color: #fff; }
.cd-pi { border-radius: 50%; width: 28px; height: 28px; }
.cd-kt, .cd-pt, .cd-ph > div { flex: 1; min-width: 0; display: block; }
.cd-kt b, .cd-pt b, .cd-ph b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.cd-kt small, .cd-pt small { display: block; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; }
.cd-keep > svg { width: 14px; height: 14px; color: var(--text2); }
.cd-row { display: flex; align-items: center; gap: 8px; }
.cd-pill { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--f3); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, opacity .15s; }
.cd-pill svg { width: 13px; height: 13px; }
.cd-pill:hover { background: var(--f4); }
.cd-peek { flex: 1; min-width: 0; -webkit-touch-callout: none; touch-action: none; }
.cd-peek.held { background: var(--blue); color: #fff; }
.cd-pill[aria-disabled="true"] { opacity: .4; cursor: default; }
.cd-pw { width: 32px; padding: 0; color: var(--text3); }
.cd-pw svg { width: 15px; height: 15px; }
.cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; font-size: 12.5px; }
.cd-done { font-weight: 600; color: var(--text); }
.cd-done:not(:empty)::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 7px; vertical-align: 1px; }
.cd-reset, .cd-clear { font-size: 11.5px; color: var(--text2); text-decoration: underline; text-underline-offset: 2px; padding: 2px 0; }
.cd-reset:hover, .cd-clear:hover { color: var(--text); }
.cd-ph { display: flex; align-items: flex-start; gap: 10px; }
.cd-ph small { display: block; font-size: 11.5px; color: var(--text2); line-height: 1.3; }
.cd-back { height: 28px; padding: 0 11px 0 7px; font-size: 12.5px; }
.cd-seg { align-self: center; display: flex; padding: 2px; border-radius: 8px; background: var(--f3); }
.cd-seg button { height: 24px; padding: 0 16px; border-radius: 6px; font-size: 12.5px; font-weight: 500; }
.cd-seg [aria-pressed="true"] { background: var(--blue); color: #fff; }
.cd-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.cd-prow { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--f1); cursor: pointer; }
.cd-pt b { font-size: 13.5px; }
.cd-pt small { font-size: 11.5px; }
.cd-chk { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ring);
  cursor: pointer; transition: background-color .15s, border-color .15s; }
.cd-chk:checked { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cd-pf { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--text2); }

/* narrow hosts: the panel is a bottom sheet */
.cd-narrow .cd-panel { left: 8px !important; right: 8px; top: auto; bottom: 8px; width: auto !important; height: 292px; max-height: none;
  border-radius: 22px; padding: 14px 14px 12px; transform-origin: 50% 100%; }
.cd-narrow .cd-panel:not(.open) { transform: translateY(28px); }
.cd-narrow .cd-notch { display: none; }
.cd-narrow .cd-tile { padding: 8px 9px 4px; }
.cd-narrow .cd-tgl { column-gap: 8px; }

.cdemo.cd-drag { --fxe: 0s; }
/* short narrow hosts (e.g. 342x440): a compact sheet */
.cd-short .cd-panel { height: 222px; }
.cd-short .cd-main { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-content: start; }
.cd-short .cd-head, .cd-short .cd-tiles, .cd-short .cd-foot { grid-column: 1 / -1; }
.cd-short .cd-keep { width: auto; padding: 4px 12px 4px 4px; gap: 7px; height: 36px; border-radius: 18px; }
.cd-short .cd-ki { width: 28px; height: 28px; border-radius: 50%; }
.cd-short .cd-keep small, .cd-short .cd-keep > svg, .cd-short .cd-kbd, .cd-short .cd-pw, .cd-short .cd-pause .cd-lb, .cd-short .cd-ph small { display: none; }
.cd-short .cd-kt b { font-size: 13px; white-space: nowrap; }
.cd-short .cd-pill { height: 36px; border-radius: 18px; }
.cd-short .cd-pause { width: 36px; padding: 0; }
.cd-short .cd-pins { gap: 7px; }
.cd-short .cd-ph { align-items: center; }

/* ---- first-run hints ---- */
.cd-hint { position: absolute; z-index: 8; left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  pointer-events: none; animation: cd-in .25s ease-out; }
.cd-hl { flex-direction: row-reverse; }
.cd-chip { position: relative; padding: 8px 13px; border-radius: 999px; background: #0A84FF; color: #0b0d12; font-size: 13px; font-weight: 600;
  line-height: 1; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.cd-chip::after { content: ""; position: absolute; width: 10px; height: 10px; background: #0A84FF; border-radius: 2px; transform: rotate(45deg); }
.cd-hb .cd-chip::after { top: -4px; left: var(--ax, 50%); margin-left: -5px; }
.cd-ha .cd-chip::after { bottom: -4px; left: var(--ax, 50%); margin-left: -5px; }
.cd-hl .cd-chip::after { right: -4px; top: 50%; margin-top: -5px; }
.cd-skip { pointer-events: auto; padding: 5px 10px; border-radius: 999px; background: rgba(11,13,18,.85); font-size: 11.5px; line-height: 1.2; color: #f5f5f7;
  text-decoration: underline; text-underline-offset: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.cd-pulse .cd-chip { animation: cd-pulse .9s ease-out 1; }
@keyframes cd-in { from { opacity: 0; } }
@keyframes cd-pulse { 40% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(10,132,255,.28), 0 6px 18px rgba(0,0,0,.4); } }

@media (pointer: coarse) {
  .cd-sw::before, .cd-mbi::before, .cd-pill::before { content: ""; position: absolute; inset: -7px; }
  .cd-pill { position: relative; }
  .cd-rng { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdemo *, .cdemo *::before, .cdemo *::after { transition: none !important; animation: none !important; }
}