/* The demos: each a little screen of what taool shows, drawn in HTML (demos.js), sized by
   the tile or row it's in. */

.demo { position: relative; font-size: 14px; line-height: 1.45; }
.demo .dim { color: var(--dim); }

.app-icon { flex: none; width: 28px; height: 28px; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.app-icon.lg { width: 44px; height: 44px; }

/* Round flags, a few simple ones in CSS: the app never shows a country as an emoji. */
.flag {
    flex: none;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(236, 223, 197, 0.12);
    vertical-align: -4px;
}

.flag.se { background: linear-gradient(90deg, transparent 31%, #fecc02 31% 44%, transparent 44%), linear-gradient(transparent 40%, #fecc02 40% 60%, transparent 60%), #006aa7; }
.flag.fi { background: linear-gradient(90deg, transparent 28%, #002f6c 28% 45%, transparent 45%), linear-gradient(transparent 36%, #002f6c 36% 64%, transparent 64%), #fff; }
.flag.dk { background: linear-gradient(90deg, transparent 33%, #fff 33% 45%, transparent 45%), linear-gradient(transparent 43%, #fff 43% 57%, transparent 57%), #c8102e; }
.flag.no { background: linear-gradient(90deg, transparent 34%, #00205b 34% 42%, transparent 42%), linear-gradient(transparent 46%, #00205b 46% 54%, transparent 54%), linear-gradient(90deg, transparent 30%, #fff 30% 46%, transparent 46%), linear-gradient(transparent 42%, #fff 42% 58%, transparent 58%), #ba0c2f; }
.flag.de { background: linear-gradient(#000 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.flag.nl { background: linear-gradient(#ae1c28 33.3%, #fff 33.3% 66.6%, #21468b 66.6%); }
.flag.at { background: linear-gradient(#c8102e 33.3%, #fff 33.3% 66.6%, #c8102e 66.6%); }
.flag.fr { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.flag.it { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); }
.flag.ie { background: linear-gradient(90deg, #169b62 33.3%, #fff 33.3% 66.6%, #ff883e 66.6%); }
.flag.jp { background: radial-gradient(circle, #bc002d 29%, #fff 31%); }
.flag.ch { background: linear-gradient(#fff, #fff) center / 56% 18% no-repeat, linear-gradient(#fff, #fff) center / 18% 56% no-repeat, #d52b1e; }
.flag.us { background: linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 46% 54% no-repeat, repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%); }
.flag.be { background: linear-gradient(90deg, #000 33.3%, #fdda24 33.3% 66.6%, #ef3340 66.6%); }

/* ---------- Ranks ---------- */

.d-ranks { display: flex; flex-direction: column; height: 100%; }
.d-ranks ol { list-style: none; display: grid; gap: 4px; }
.d-ranks .sum { margin-top: auto; padding: 12px 8px 0; color: var(--dim); font-size: 13px; }
.d-ranks .sum b { color: var(--phosphor); font-weight: 400; }

.d-ranks li {
    display: grid;
    grid-template-columns: 18px 2.4ch minmax(0, 1fr) auto 4.4ch;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
}

.d-ranks li.moved { background: rgba(236, 223, 197, 0.07); }
.d-ranks .chart { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-ranks .rank { grid-column: 4; }
.d-ranks .chg { grid-column: 5; text-align: right; font-size: 13px; }
.d-ranks .new { color: var(--amber); }
.d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.d-head .dim { margin-left: auto; font-size: 13px; }

@container (max-width: 380px) { .d-ranks .chart { visibility: hidden; } }

/* ---------- Alerts: notifications dropping in ---------- */

.d-alerts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }

.d-note {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(236, 223, 197, 0.07);
    border: 1px solid rgba(236, 223, 197, 0.08);
    backdrop-filter: blur(6px);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    text-shadow: none;
}

.d-note .who { position: relative; flex: none; width: 34px; height: 34px; }
.d-note .who .app-icon { width: 34px; height: 34px; }
/* The sender's icon is your app's, with taool's on its corner, as a communication notification. */
.d-note .who .badge { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 4px; box-shadow: 0 0 0 1.5px #241c16; }
.d-note .top { display: flex; gap: 8px; }
.d-note b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-note time { color: var(--dim); font-size: 12px; }
.d-note p { color: color-mix(in srgb, var(--phosphor) 82%, transparent); }

/* ---------- Rating ---------- */

.d-rating .big { display: flex; align-items: baseline; gap: 12px; font: 55px/1 var(--mono); letter-spacing: -0.02em; }
.d-rating .stars { font-size: 18px; letter-spacing: 2px; color: var(--amber); }
.d-rating .sub { margin-top: 6px; color: var(--dim); }
.d-rating .countries { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.d-rating .countries span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }

/* ---------- Review ---------- */

.d-review .card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12, 9, 7, 0.4); }
.d-review .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.d-review .meta .stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }
.d-review .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--phosphor); transition: opacity 300ms; }
.d-review .unread.read { opacity: 0; }
.d-review h4 { margin-top: 8px; font: 600 14px/1.3 var(--mono); }
.d-review p { margin-top: 4px; min-height: 4.4em; }
.d-review .tr { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }

/* ---------- Payout ---------- */

.d-payout .when { font: 33px/1.1 var(--pixel); }
.d-payout .amount { margin-top: 8px; display: inline-flex; gap: 8px; align-items: center; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-shadow: inherit; cursor: pointer; }
.d-payout .amount .hidden-amount { letter-spacing: -1px; color: var(--dim); }
.d-payout .cal { margin-top: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 3px; max-width: 230px; font-size: 10.5px; line-height: 1.5; text-align: center; color: var(--dim); }
.d-payout .cal span { padding: 1px 0; border-radius: 3px; }
.d-payout .cal .day-head { color: var(--faint); }
.d-payout .cal .pay { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.d-payout .cal .today { box-shadow: inset 0 0 0 1px var(--dim); color: var(--phosphor); }

/* ---------- Standing ---------- */

.d-standing .line { font-size: 15px; }
.d-standing .line b { font: 400 33px/1 var(--pixel); margin-right: 6px; }
.d-standing .icons { position: relative; height: calc(var(--s, 44px) + 22px); margin-top: 18px; overflow: hidden; }
.d-standing .icons .slot { position: absolute; top: 2px; width: var(--s, 44px); text-align: center; transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
.d-standing .icons .app-icon { width: var(--s, 44px); height: var(--s, 44px); margin: 0 auto; }
.d-standing .icons .yours .app-icon { box-shadow: 0 0 0 2px var(--phosphor), 0 0 14px rgba(236, 223, 197, 0.4); }
.d-standing .icons small { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; }
.d-standing .icons .yours small { color: var(--phosphor); }

/* ---------- Listing watch ---------- */

.d-listing .pair { display: flex; align-items: center; gap: 14px; }
.d-listing canvas { width: 64px; height: 64px; border-radius: 22.5%; image-rendering: pixelated; }
.d-listing .arrow { color: var(--dim); }
.d-listing .diff { margin-top: 14px; font-size: 13px; }
.d-listing del { color: var(--err); text-decoration: line-through; }
.d-listing ins { color: var(--ok); text-decoration: none; }
.d-listing .what { margin-top: 10px; color: var(--dim); font-size: 13px; }

/* ---------- Namespace ---------- */

.d-name .q { color: var(--dim); }
.d-name .q b { color: var(--phosphor); font-weight: 400; }
.d-name .meter { margin-top: 12px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.d-name .meter i { height: 14px; border-radius: 2px; background: var(--line); }
.d-name .meter i.on { background: currentColor; box-shadow: 0 0 6px currentColor; }
.d-name .score { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; }
.d-name .score b { font: 400 44px/1 var(--mono); }
.d-name .score span { font: 22px/1 var(--pixel); }
.d-name .why { margin-top: 8px; color: var(--dim); min-height: 2.9em; }
.d-name.great .meter, .d-name.great .score span { color: var(--ok); }
.d-name.good .meter, .d-name.good .score span { color: var(--phosphor); }
.d-name.fair .meter, .d-name.fair .score span { color: var(--amber); }
.d-name.poor .meter, .d-name.poor .score span { color: var(--err); }

/* ---------- Update prompts: a phone drawn to scale ---------- */

/* The readout over the phone, or beside it where there's room. */
.d-update { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.d-update .policy {
    align-self: stretch;
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 3px 2ch;
    font-size: 13px;
}

.d-update .policy span { color: var(--dim); }
.d-update .policy b { font-weight: 400; color: var(--phosphor); }
/* A number that just changed lights up, and fades back. */
.d-update .policy b.flash { animation: flash 1.8s ease-in; }
@keyframes flash { from, 30% { color: var(--amber); } }
.d-update .policy i { font-style: normal; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-update .policy .status[data-s="available"] { color: var(--amber); }
.d-update .policy .status[data-s="required"] { color: var(--err); }
.d-update .policy .status[data-s="current"] { color: var(--ok); }

@container (max-width: 340px) {
    .d-update .policy { grid-template-columns: max-content minmax(0, 1fr); }
    .d-update .policy i { display: none; }
}

@container (min-width: 540px) {
    .d-update { flex-direction: row-reverse; justify-content: flex-end; gap: 32px; }
    .d-update .policy { align-self: center; flex: 1; }
}

/* The phone: the screen 393 points wide, drawn --w wide, everything on it in those points (--u),
   its text a touch larger (--t) so it reads at this size. */
.phone {
    --w: 216px;
    --u: calc(var(--w) / 393);
    --t: calc(var(--u) * 1.12);
    --tint: #d4473a;
    position: relative;
    flex: none;
    width: calc(var(--w) + 24 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(66 * var(--u));
    background: #0c0907;
    box-shadow: 0 0 0 1px var(--faint), inset 0 0 0 calc(2.5 * var(--u)) #2b231d, 0 18px 44px rgba(0, 0, 0, 0.55);
    text-shadow: none;
}

.phone .scr {
    position: relative;
    aspect-ratio: 393 / 852;
    border-radius: calc(54 * var(--u));
    overflow: hidden;
    background: #fbf6ef;
    color: #1d1916;
    font: calc(17 * var(--t)) / 1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    letter-spacing: -0.01em;
}

.phone .sb {
    position: absolute;
    inset: calc(11 * var(--u)) 0 auto;
    height: calc(37 * var(--u));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(36 * var(--u)) 0 calc(44 * var(--u));
    z-index: 4;
}

.phone .sb .time { font-weight: 600; font-size: calc(16 * var(--t)); }
.phone .island { position: absolute; left: 50%; top: 0; width: calc(124 * var(--u)); height: 100%; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone .batt { position: relative; width: calc(25 * var(--u)); height: calc(12 * var(--u)); border: calc(1.4 * var(--u)) solid rgba(29, 25, 22, 0.45); border-radius: calc(4 * var(--u)); padding: calc(1.6 * var(--u)); }
.phone .batt i { display: block; width: 78%; height: 100%; border-radius: calc(1.5 * var(--u)); background: #1d1916; }

/* Tomatick, a focus timer: what the prompts cover. */
.phone .app { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(14 * var(--u)); padding-bottom: calc(90 * var(--u)); }
.phone .ring { width: calc(230 * var(--u)); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: calc(16 * var(--u)) solid #f1ddd3; border-top-color: var(--tint); border-right-color: var(--tint); transform: rotate(-20deg); }
.phone .ring span { transform: rotate(20deg); font-weight: 600; font-size: calc(54 * var(--t)); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.phone .label { color: #8b7f76; }
.phone .dots { display: flex; gap: calc(9 * var(--u)); }
.phone .dots i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--tint); }
.phone .dots i.off { background: #e6d8cf; }

.phone .sym { display: block; color: var(--tint); }
.phone .sym svg { display: block; width: 100%; height: 100%; }
.phone .pill { display: inline-grid; place-items: center; padding: calc(7 * var(--u)) calc(15 * var(--u)); border-radius: 999px; background: var(--tint); color: #fff; font-weight: 600; font-size: calc(15 * var(--t)); transition: filter 0.15s, transform 0.15s; }

/* "Update Available": Liquid Glass over the app, at the bottom, until it's closed. */
.phone .banner {
    position: absolute;
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    bottom: calc(42 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(22 * var(--u));
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
    backdrop-filter: blur(10px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(60, 40, 30, 0.18);
    transform: translateY(calc(100% + 70 * var(--u)));
    transition: transform 520ms cubic-bezier(.2, .9, .25, 1.05);
    z-index: 2;
}

.phone .banner .sym { flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.phone .banner .txt { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--u)); }
.phone .banner .txt b { font-weight: 600; font-size: calc(16 * var(--t)); white-space: nowrap; }
.phone .banner .txt span { color: rgba(60, 52, 48, 0.66); font-size: calc(13.5 * var(--t)); line-height: 1.2; }
.phone .banner .pill { flex: none; }
.phone .banner .x { flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: rgba(60, 52, 48, 0.55); }

/* "Update Required": the screen over the app, why, and the App Store button. */
.phone .cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(59 * var(--u)) calc(32 * var(--u)) calc(66 * var(--u));
    background: #fff;
    opacity: 0;
    transition: opacity 420ms;
    z-index: 3;
}

.phone .cover .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); text-align: center; transform: translateY(calc(8 * var(--u))); transition: transform 520ms cubic-bezier(.2, .9, .25, 1); }
.phone .cover .sym { width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
.phone .cover h5 { font-size: calc(22 * var(--t)); font-weight: 700; letter-spacing: -0.015em; }
.phone .cover p { color: rgba(60, 52, 48, 0.66); }
.phone .cover .pill.big { width: 100%; height: calc(50 * var(--u)); padding: 0; font-size: calc(17 * var(--t)); }

.phone .home { position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(140 * var(--u)); height: calc(5 * var(--u)); border-radius: 999px; background: #1d1916; transform: translateX(-50%); z-index: 5; }

.d-update.available .banner { transform: none; }
.d-update.required .cover { opacity: 1; }
.d-update.required .cover .mid { transform: none; }
.d-update.pressing .cover .pill { filter: brightness(0.82); transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .phone .banner, .phone .cover, .phone .cover .mid { transition: none; }
}

/* A step smaller in a phone's page, where the tile is the page's width. */
@container (max-width: 340px) { .d-update .phone { --w: 196px; } }

/* The shell's output is as tall for every command, so it doesn't jump as it tours: there, the
   phone's lower part, with the banner and the screen's button, its top fading into the glass. */
.shell-out .d-update .device {
    display: flex;
    align-items: flex-end;
    max-height: 330px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 18%);
    mask-image: linear-gradient(transparent, #000 18%);
}

/* ---------- An A/B/n test ---------- */

.d-exp .head { display: flex; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 13px; }
.d-exp .head b { color: var(--phosphor); font-weight: 400; }
.d-exp .goals { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; }
@container (min-width: 520px) { .d-exp .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-exp .gname { margin-top: 12px; color: var(--phosphor); font-size: 13px; }
.d-exp .variant { margin-top: 8px; transition: opacity 0.6s; }
.d-exp .variant .lab { display: flex; justify-content: space-between; color: var(--dim); font-size: 13px; }
.d-exp .variant.win .lab { color: var(--phosphor); }
.d-exp .bar { margin-top: 4px; height: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.d-exp .bar i { display: block; height: 100%; width: 0; background: var(--dim); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.d-exp .variant.win .bar i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.d-exp .beat { margin-top: 6px; color: var(--ok); font-size: 12px; visibility: hidden; }
.d-exp.beaten .beat, .d-exp.ended .beat { visibility: visible; }
.d-exp.ended .variant.ctl { opacity: 0.3; }
.d-exp .done { margin-top: 16px; min-height: 1.5em; color: var(--ok); font-size: 13px; }
.d-exp .done .typed:not(:empty)::before { content: "> "; color: var(--dim); }

/* ---------- Feature flag rollout ---------- */

.d-flag .head { display: flex; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 13px; }
.d-flag .head b { color: var(--phosphor); font-weight: 400; }
.d-flag .vals { margin-top: 12px; display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 4px 1ch; font-size: 13px; }
.d-flag .vals span:not(.pct, .ppl) { color: var(--dim); }
.d-flag .vals b { color: var(--phosphor); font-weight: 400; }
.d-flag .steps { margin-top: 16px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.d-flag .st { padding: 5px 0; border: 1px solid var(--line); border-radius: 2px; color: var(--faint); font-size: 12px; text-align: center; transition: color 0.4s, border-color 0.4s; }
.d-flag .st.on { border-color: var(--dim); color: var(--dim); }
.d-flag .st.now { border-color: var(--phosphor); color: var(--phosphor); box-shadow: 0 0 8px rgba(236, 223, 197, 0.3); }
.d-flag.ended .st.now { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 8px var(--ok); }
.d-flag .bar { margin-top: 10px; height: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.d-flag .bar i { display: block; height: 100%; width: 0; background: var(--ok); box-shadow: 0 0 8px var(--ok); transition: width 0.9s cubic-bezier(.2, .8, .2, 1); }
.d-flag .done { margin-top: 16px; min-height: 1.5em; color: var(--ok); font-size: 13px; }
.d-flag .done .typed:not(:empty)::before { content: "> "; color: var(--dim); }

/* ---------- Mac menu bar ---------- */

.d-mac { position: relative; min-height: 230px; }

.d-mac .bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(236, 223, 197, 0.08);
    font: 500 12.5px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
}

.d-mac .bar .item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; }
.d-mac .bar .item.open { background: rgba(236, 223, 197, 0.16); }
.d-mac .bar .mk { width: 22px; }
.d-mac .bar .mk .lit { fill: #fff; }
.d-mac .bar .mk svg { filter: none; }
.d-mac .bar .clock { color: var(--dim); }

.d-mac .pop {
    position: absolute;
    top: 36px;
    right: 90px;
    width: min(300px, 100%);
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--glass), #110c09;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    font-size: 12.5px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 200ms, transform 200ms;
    pointer-events: none;
}

.d-mac.open .pop { opacity: 1; transform: none; }
.d-mac .pop .per { display: flex; gap: 4px; margin-bottom: 10px; }
.d-mac .pop .per span { padding: 1px 6px; border-radius: 3px; color: var(--dim); }
.d-mac .pop .per span.on { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.d-mac .pop .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-mac .pop .figs b { display: block; font: 400 20px/1.1 var(--mono); }
.d-mac .pop .apps { margin-top: 10px; display: grid; gap: 6px; }
.d-mac .pop .apps div { display: flex; align-items: center; gap: 8px; }
.d-mac .pop .apps .app-icon { width: 20px; height: 20px; }
.d-mac .pop .apps .rank { margin-left: auto; font-size: 12px; min-width: 0; }

@container (max-width: 520px) { .d-mac .bar .hide-narrow { display: none; } .d-mac .pop { right: 0; } }

/* ---------- Widgets: two Smart Stacks and a watch face ---------- */

.d-widgets { display: flex; gap: 16px; align-items: center; justify-content: center; height: 100%; padding: 6px 0; }
.d-widgets .stack + .stack { display: none; }
@container (min-width: 470px) { .d-widgets .stack + .stack { display: flex; } }
@container (max-width: 300px) { .d-widgets { gap: 10px; } .d-widgets .watch { zoom: 0.86; } }

.stack { display: flex; align-items: center; gap: 6px; flex: none; }
.stack .slot { width: 132px; height: 132px; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.stack .slides { height: 100%; transition: transform 620ms cubic-bezier(.3, .9, .25, 1); }
.stack .pager { display: grid; gap: 4px; }
.stack .pager i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.stack .pager i.on { background: var(--phosphor); }

@media (prefers-reduced-motion: reduce) { .stack .slides { transition: none; } }

/* A widget, as it draws in the dark: system type, a figure large. */
.w {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 13px 14px;
    background: #1d1a17;
    color: #f4efe7;
    font: 11px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    text-shadow: none;
    overflow: hidden;
}

.w .lab { color: #a39a90; font-weight: 600; white-space: nowrap; }
.w .big { margin-top: auto; font: 700 27px/1.05 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.w .big small { font-size: 13px; font-weight: 600; color: #a39a90; }
.w .sub { color: #a39a90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w .up { color: var(--ok); font-weight: 600; }
.w .star { color: var(--amber); }
.w .day { margin-top: 6px; font-weight: 600; }
.w .q { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #d8d0c6; }
.w .meter { margin: 5px 0 4px; height: 5px; border-radius: 3px; background: #3a342e; overflow: hidden; }
.w .meter i { display: block; width: 74%; height: 100%; border-radius: 3px; background: var(--ok); }
.w .px { font: 26px/1 var(--pixel); color: var(--phosphor); }

.w.app .top { display: flex; justify-content: space-between; align-items: flex-start; }
.w.app .ic { width: 34px; height: 34px; border-radius: 22.5%; }
.w.app .meta { display: grid; justify-items: end; gap: 2px; color: #a39a90; font-size: 10px; }
.w.app .fig { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }

/* The Terminal widget: the app icon's CRT, its buttons switching pages. */
.w.crt {
    position: relative;
    padding: 9px 9px 20px;
    background: linear-gradient(#e9ddc4, #c6b797);
}

.w.crt .glass {
    height: 100%;
    padding: 7px 8px;
    border-radius: 11px;
    background: radial-gradient(ellipse at 50% 40%, #2b2119, #1a130f 62%, #0b0806);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7);
    color: var(--phosphor);
    font: 9px/1.45 var(--mono);
    text-shadow: 0 0 4px rgba(236, 223, 197, 0.4);
    overflow: hidden;
    white-space: nowrap;
}

.w.crt .glass .t { color: var(--dim); }
.w.crt .btns { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.w.crt .btns i { width: 16px; height: 6px; border-radius: 2px; background: #b3a483; box-shadow: 0 1px 0 #8a7d66; }
.w.crt .btns i.on { background: #8a7d66; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }

/* The watch: its face's corner, the rank across the middle, three circles under it. */
.watch {
    flex: none;
    width: 146px;
    aspect-ratio: 0.84;
    padding: 9px;
    border-radius: 36px;
    background: #050403;
    box-shadow: 0 0 0 2px #2c231c, 0 0 0 4px #15100c, 0 10px 26px rgba(0, 0, 0, 0.5);
    text-shadow: none;
}

.watch .face { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 4px 5px; color: #f4efe7; font: 9px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.watch .tr { display: flex; justify-content: space-between; align-items: baseline; }
.watch .inl { color: var(--phosphor); font-weight: 600; }
.watch .time { font: 600 19px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.watch .rect { padding: 5px 7px; border-radius: 9px; background: #1a1714; }
.watch .rt { display: flex; align-items: center; gap: 4px; color: #a39a90; font-weight: 600; }
.watch .rt img { width: 11px; height: 11px; border-radius: 3px; }
.watch .rv { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.watch .rv .px { font: 19px/1 var(--pixel); color: var(--phosphor); }
.watch .rv .up { color: var(--ok); font-weight: 600; }
.watch .rd { margin-top: 2px; color: #a39a90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch .circles { margin-top: auto; display: flex; justify-content: space-between; }

.watch .circ {
    width: 36px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    background: #1a1714;
    line-height: 1;
}

.watch .circ b { font-size: 11px; font-weight: 700; }
.watch .circ small { font-size: 7px; color: #a39a90; }
/* TestFlight's: installed of testers, as a gauge's ring round the figure. */
.watch .circ.ring { position: relative; }
.watch .circ.ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--ok) calc(var(--p) * 1%), #3a342e 0);
    -webkit-mask: radial-gradient(circle, transparent 14.5px, #000 15px);
    mask: radial-gradient(circle, transparent 14.5px, #000 15px);
}
/* ---------- TestFlight ---------- */

.d-tf .item { display: flex; gap: 12px; align-items: flex-start; }
.d-tf .item b { font-weight: 400; }
.d-tf .item p { color: var(--dim); font-size: 13px; }
.d-tf .item .btn { margin-top: 10px; }
.d-tf .item .btn.pressed { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.d-tf .log { margin-top: 14px; min-height: 3em; font-size: 13px; }
.d-tf .log .ok { color: var(--ok); }

/* The app's TtySpinner: | / - \ in place, turned by demos.js. */
.tty { display: inline-block; width: 1ch; margin-left: 0.6ch; }

/* ---------- Blueprint ---------- */

.d-blue { display: flex; gap: 18px; align-items: center; }

.paper {
    flex: none;
    width: 132px;
    aspect-ratio: 1;
    border-radius: 22.5%;
    overflow: hidden;
    transition: background 600ms;
    text-shadow: none;
}

.paper svg { width: 100%; height: 100%; display: block; }
.paper .grid line { stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.6; }
.paper .ink { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.d-blue .opts { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
.d-blue .opts .on { color: var(--phosphor); }

/* ---------- Share cards ---------- */

.d-share { display: grid; place-items: center; height: 100%; }

.card45 {
    width: min(200px, 80%);
    aspect-ratio: 4 / 5;
    padding: 14px;
    border-radius: 14px;
    background: var(--glass), #110c09;
    border: 1px solid var(--line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-size: 11px;
}

.card45 .face { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Changing cards, as the app does: the power button's crt-off and crt-on (crt.css) on the card's
   own glass. The phosphor squashes to a line and a dot as the glass goes dark, then the next card
   comes on from a line. */
.card45 .tube { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0b0806; opacity: 0; visibility: hidden; pointer-events: none; }
.card45 .tube::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--phosphor); box-shadow: 0 0 16px var(--phosphor); opacity: 0; }
.card45.off .tube { opacity: 1; visibility: visible; transition: opacity 60ms 100ms; }
.card45.off .tube::after { animation: crt-off 440ms ease-in forwards; }
.card45.on .tube { visibility: visible; animation: fade-out 460ms ease-out forwards; }
.card45.on .tube::after { animation: crt-on 460ms ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
    .card45 .tube, .card45 .tube::after { animation: none; transition: none; }
}
.card45 .kind { color: var(--dim); }
.card45 .big { margin-top: 6px; font: 22px/1.1 var(--pixel); }
.card45 .big.huge { font-size: 55px; }
.card45 .body { flex: 1; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.card45 .flags { display: flex; flex-wrap: wrap; gap: 4px; }
.card45 .flags .flag { width: 15px; height: 15px; }
.card45 .foot { display: flex; align-items: flex-end; justify-content: space-between; color: var(--dim); }
.card45 .foot .mk { width: 26px; }
.card45 .t10 { display: grid; grid-template-columns: 2ch 14px 1fr; gap: 5px; align-items: center; font-size: 9.5px; }
.card45 .t10 .app-icon { width: 14px; height: 14px; border-radius: 4px; }
.card45 .t10 .bar { height: 5px; border-radius: 3px; background: var(--line); }
.card45 .t10 .me { color: var(--phosphor); }
.card45 .t10 .hidden { filter: blur(1.5px) saturate(0.4); }

/* ---------- Downloads ---------- */

.d-dl .fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.d-dl .fig b { font: 400 33px/1 var(--mono); }
.d-dl .bars { margin-top: 16px; height: 110px; display: flex; align-items: flex-end; gap: 3px; }
/* Dithered like the room on taool.com: a checker of phosphor, solid where it's today. */
.d-dl .bars i {
    flex: 1;
    height: 0;
    background: repeating-conic-gradient(var(--phosphor) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
    transition: height 500ms cubic-bezier(.2, .8, .2, 1);
}
.d-dl .bars i:last-child { background: var(--phosphor); box-shadow: 0 0 8px rgba(236, 223, 197, 0.4); }
.d-dl .axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 11px; }

/* ---------- Digest ---------- */

.d-digest { font-size: 13px; }
.d-digest .ln { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 1ch; min-height: 1.45em; }
.d-digest .ln .who { color: var(--dim); }
.d-digest .ln.top { color: var(--dim); margin-bottom: 6px; }
.d-digest .up { color: var(--ok); }

/* ---------- The index's tile ---------- */

.d-indie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.d-indie .it { position: relative; }
.d-indie .it .app-icon { width: 100%; height: auto; aspect-ratio: 1; }
.d-indie .it .tf { position: absolute; right: -4px; top: -4px; padding: 1px 5px; border-radius: 999px; background: var(--ok); color: var(--ink); font-size: 9px; text-shadow: none; }

/* ---------- Nearly Charting ---------- */

.d-near { display: flex; flex-direction: column; height: 100%; }
.d-near ol { list-style: none; display: grid; gap: 4px; }
.d-near li { display: grid; grid-template-columns: 18px 2.4ch minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; transition: background 0.4s; }
.d-near .chart { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-near .away { color: var(--amber); font-size: 13px; text-align: right; white-space: nowrap; }
.d-near li.in { background: rgba(236, 223, 197, 0.07); }
.d-near li.in .away { display: flex; align-items: center; gap: 8px; color: var(--ok); }
.d-near .toast { margin-top: 14px; min-height: 64px; }
.d-near .sum { margin-top: auto; padding: 12px 8px 0; color: var(--dim); font-size: 13px; }
@container (max-width: 380px) { .d-near .chart { visibility: hidden; } }

/* ---------- Insight Score ---------- */

.d-score .big { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.d-score .big b { font: 400 44px/1 var(--pixel); }
.d-score .track { position: relative; margin-top: 12px; height: 10px; border-radius: 2px; background: var(--line); }
.d-score .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--phosphor); box-shadow: 0 0 8px rgba(236, 223, 197, 0.35); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.d-score .mark { position: absolute; top: 12px; transform: translateX(-50%); color: var(--dim); font-size: 12px; line-height: 1; opacity: 0; transition: opacity 0.3s; }
.d-score .mark.you { color: var(--phosphor); }
.d-score .mark.on { opacity: 1; }
.d-score .place { margin-top: 22px; font-size: 13px; }
.d-score .checks { margin-top: 12px; display: grid; gap: 3px; font-size: 13px; }
.d-score .ck { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: 1ch; opacity: 0; transition: opacity 0.3s; }
.d-score .ck.on { opacity: 1; }
.d-score .ck .v { color: var(--dim); }
.d-score .s.ok { color: var(--ok); }
.d-score .s.part { color: var(--amber); }
.d-score .s.no { color: var(--err); }

/* ---------- Insight cards ---------- */

.d-cards { display: flex; flex-direction: column; height: 100%; }
.d-cards .card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--well); }
.d-cards .cmdline { color: var(--dim); }
.d-cards .cmdline .typed { color: var(--phosphor); }
.d-cards .meta, .d-cards h4, .d-cards .line, .d-cards .why { opacity: 0; transition: opacity 0.35s; }
.d-cards .card.shown :is(.meta, h4, .line, .why) { opacity: 1; }
.d-cards .meta { margin-top: 10px; display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.d-cards .stage { color: var(--amber); }
.d-cards .card.ahead .stage { color: var(--ok); }
.d-cards .pts { color: var(--dim); }
.d-cards h4 { margin-top: 6px; font: 400 17px/1.3 var(--mono); }
.d-cards .line { margin-top: 2px; color: var(--phosphor); font-size: 13px; }
.d-cards .why { margin-top: 10px; color: var(--dim); font-size: 13px; min-height: 2.9em; }
.d-cards .pager { margin-top: auto; padding-top: 12px; display: flex; justify-content: center; gap: 6px; }
.d-cards .pager i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.d-cards .pager i.on { background: var(--phosphor); }

/* ---------- Icon Search ---------- */

.d-icons { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.d-icons .shot { flex: 1 1 240px; max-width: 300px; position: relative; padding: 14px 12px; border-radius: 14px; background: linear-gradient(160deg, #3b3045, #1f2a3a); overflow: hidden; }
.d-icons .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.d-icons .ic { position: relative; display: grid; justify-items: center; gap: 3px; padding: 3px; border-radius: 10px; outline: 1px dashed transparent; outline-offset: 1px; transition: outline-color 0.2s, background 0.2s; }
.d-icons .ic .app-icon { width: 36px; height: 36px; }
.d-icons .ic small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #f4efe6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.d-icons .ic.found { outline-color: rgba(236, 223, 197, 0.45); }
.d-icons .ic.picked { outline: 2px solid var(--phosphor); background: rgba(236, 223, 197, 0.12); }
.d-icons .scan { position: absolute; inset: 0 0 auto; height: 30%; background: linear-gradient(transparent, rgba(236, 223, 197, 0.18), transparent); opacity: 0; pointer-events: none; }
.d-icons .shot.scanning .scan { opacity: 1; animation: icon-scan 1.4s linear; }
@keyframes icon-scan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
.d-icons .out { flex: 1 1 180px; min-width: 0; }
.d-icons .log { font-size: 13px; min-height: 1.45em; }
.d-icons .hit { margin-top: 8px; display: flex; align-items: center; gap: 12px; min-height: 48px; }
.d-icons .hit .ok { color: var(--ok); font-size: 13px; }

/* ---------- Similar Icons ---------- */

.d-similar .you { display: flex; align-items: center; gap: 12px; }
.d-similar .list { margin-top: 16px; display: grid; gap: 8px; }
.d-similar .m > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-similar .m { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.d-similar .m.on { opacity: 1; transform: none; }
.d-similar .m .g { color: var(--dim); font-size: 13px; }
.d-similar .m:first-child .g { color: var(--err); }
.d-similar .m:nth-child(2) .g { color: var(--amber); }

/* ---------- Earn's funnel ---------- */

.d-funnel .per { font-size: 13px; }
.d-funnel .st { margin-top: 10px; opacity: 0.25; transition: opacity 0.3s; }
.d-funnel .st.on { opacity: 1; }
.d-funnel .lab { display: flex; justify-content: space-between; gap: 8px; }
.d-funnel .lab b { font-weight: 400; }
.d-funnel .bar { margin-top: 4px; height: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.d-funnel .bar i { display: block; height: 100%; width: 0; background: var(--phosphor); box-shadow: 0 0 8px rgba(236, 223, 197, 0.35); transition: width 0.7s cubic-bezier(.2, .8, .2, 1); }
.d-funnel .rate { margin-top: 3px; font-size: 12px; min-height: 1.45em; }
.d-funnel .amber { color: var(--amber); }

/* ---------- > why ---------- */

.d-why .lanes { position: relative; display: grid; gap: 8px; }
.d-why .lane { display: grid; grid-template-columns: 10ch minmax(0, 1fr); align-items: end; font-size: 12px; }
.d-why .bars { height: 44px; display: flex; align-items: flex-end; gap: 2px; }
.d-why .bars i { flex: 1; background: var(--dim); border-radius: 1px 1px 0 0; }
.d-why .bars i.sofar { opacity: 0.4; }
.d-why .bars i.missing { background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 5px); }
.d-why .scrub { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }
.d-why .day { margin-top: 14px; }
.d-why .day b { font-weight: 400; }
.d-why .lines { margin-top: 4px; font-size: 13px; min-height: 5.8em; }
.d-why .lines div::before { content: "* "; color: var(--dim); }

/* ---------- A customer's timeline ---------- */

.d-story .who { display: flex; align-items: center; gap: 8px; }
.d-story .who .id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-story .who .st { margin-left: auto; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); font-size: 12px; }
.d-story ol { list-style: none; margin-top: 12px; display: grid; gap: 3px; font-size: 13px; }
.d-story li { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 1.5ch; opacity: 0; transition: opacity 0.3s; }
.d-story li.on { opacity: 1; }
.d-story li:last-child :is(.what, .more) { color: var(--ok); }
.d-story .spent { margin-top: 12px; font-size: 13px; }
.d-story .spent b { color: var(--phosphor); font-weight: 400; }

/* ---------- The entitlement API ---------- */

.d-access { font-size: 13px; }
.d-access .cmdline { overflow-wrap: anywhere; }
.d-access .json { margin-top: 10px; min-height: 9.5em; font: inherit; white-space: pre; overflow-x: auto; color: var(--phosphor); }
.d-access .note { margin-top: 8px; }
@container (max-width: 380px) { .d-access { font-size: 11px; } }