/* 01 腕上一瞥. Black OLED screens; vermilion only for questions, brightest for the urgent ones. */
.w-wrap { --w-red: #ff5a36; --w-red-dim: #7a3324; --w-ease: cubic-bezier(.2,.75,.25,1);
  position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 36px 32px 28px;
  background: radial-gradient(ellipse at 50% 42%, #fbfaf5 0%, var(--paper) 70%); }
.w-lede { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 15px; color: var(--ink-2); text-align: center; }
.w-lede-q { font-size: 15px; color: var(--ink); }
.w-lede-a { font-size: 15px; }
.w-lede.is-yes .w-lede-a { color: oklch(0.5 0.17 35); font-weight: 600; }
.w-row { display: flex; gap: 48px; align-items: flex-start; }
.w-fig { margin: 0; width: 300px; }
.w-fig figcaption { margin-top: 20px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.w-fig figcaption b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.w-fig figcaption > span { display: block; }
.w-haptic { margin-top: 6px; font: 12px var(--mono); color: var(--ink); }
.w-crown-hint { margin-top: 8px; display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.w-crown-hint kbd { font: 11px var(--mono); padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
.w-next { min-height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0 12px; font-size: 12.5px; }
.w-next[hidden] { display: none; }
.w-keys { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.w-replay { min-height: 26px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 500; }
.w-replay[hidden] { display: none; }

.w-case { position: relative; width: 300px; height: 360px; padding: 16px; border-radius: 74px; background: linear-gradient(145deg, #d9d6cf, #a9a59c 55%, #c9c5bd); box-shadow: 0 24px 50px rgb(40 36 28 / .25), inset 0 1px 0 rgb(255 255 255 / .6); }
.w-crown { position: absolute; right: -10px; top: 92px; width: 14px; height: 48px; padding: 0; border: 0; border-radius: 4px; background: repeating-linear-gradient(to bottom, #9b978f 0 2px, #d3d0c8 2px 4px); cursor: pointer; transition: transform .2s var(--w-ease); }
.w-crown:active { transform: translateX(-2px); }
.w-crown:disabled { cursor: default; opacity: .8; }
.w-crown:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* isolation: the stack's own layers (card, peeks, ghost) stay inside its screen, under the hover and detail cards. */
.w-screen { position: relative; isolation: isolate; display: block; width: 100%; height: 100%; overflow: hidden; border: 0; padding: 0; border-radius: 58px; background: #000; color: #f3f1ea; text-align: left; font-family: -apple-system, "SF Pro Rounded", "PingFang SC", sans-serif; }
.w-screen:focus-visible { outline: 3px solid var(--w-red); outline-offset: 3px; }

/* face */
.w-face { display: grid; place-items: center; }
/* Ticks: stroke, width and opacity per level are set by watch.mjs (LOOK), which also draws the turn's three beats.
   The ring is not clipped to its square, so the grains come in from the screen's own edge. */
.w-ring { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translateY(-50%); overflow: visible; }
.w-ring line { stroke-linecap: round; }
.w-glow path { fill: none; stroke: #fff; stroke-width: 24; }
.w-grains circle { fill: #9a978e; }
.w-pulse { position: absolute; inset: 10px; border-radius: 50%; box-shadow: 0 0 0 3px var(--w-red), 0 0 28px 6px #ff5a3666; opacity: 0; pointer-events: none; }
.w-center { position: relative; display: flex; flex-direction: column; align-items: center; width: 176px; text-align: center; margin-top: -2px; }
.w-time { font-size: 17px; font-weight: 600; letter-spacing: .02em; color: #bdb9b0; font-variant-numeric: tabular-nums; }
.w-count { position: relative; height: 84px; clip-path: inset(0 -80px); font-size: 86px; line-height: 86px; font-weight: 700; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.w-count span { display: inline-block; }
/* The number it rolls away from at the third beat. */
.w-count .w-n.is-old { position: absolute; left: 50%; top: 0; white-space: nowrap; transform: translateX(-50%); opacity: 0; }
.w-count .w-n.is-old:empty { display: none; }
.w-count.is-zero { color: #5f5d58; }
.w-unit { font-size: 15px; color: var(--w-red); font-weight: 650; margin-top: 1px; }
.w-count.is-zero + .w-unit { color: #9a978e; font-weight: 500; font-size: 13.5px; }
.w-comp { margin-top: 8px; max-width: 136px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12.5px; line-height: 1.32; color: #d9d6cc; text-wrap: balance; }
.w-comp em { font-style: normal; font-size: 11px; color: #a9a69d; font-variant-numeric: tabular-nums; }
.w-comp em.is-hot { color: var(--w-red); font-weight: 600; }
.w-comp.is-calm { color: #8f8c84; font-size: 12px; }
.w-comp[data-id] { cursor: pointer; }

/* Under the face: the four largest on the ring (hover or click one like its ticks), the rest and the blank. */
.w-names { margin: 16px 0 0; padding: 0 4px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.w-names li { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.w-names li[data-id] { cursor: pointer; }
.w-names li span { overflow: hidden; text-overflow: ellipsis; }
.w-names b { flex: none; width: 20px; text-align: right; font: 600 12px var(--mono); color: var(--ink-2); }
.w-names .is-hot b { color: var(--vermilion); }
.w-names .is-ask b { color: oklch(0.6 0.12 35 / .8); }
.w-names .is-done b { color: var(--ink); }
.w-names li.is-key span { text-decoration: underline; text-underline-offset: 3px; }
.w-names .w-names-rest { grid-column: 1 / -1; padding-left: 27px; font-size: 11.5px; color: var(--ink-2); }
.w-names + figcaption { margin-top: 12px; }

/* Over the whole page: the stepped-out ticks, the keyboard ring and the leaders to the cards (ix.mjs). */
.w-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.w-over path { fill: none; }
.w-pop line { stroke-linecap: round; }
.w-focus { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.w-xline, .w-pline { stroke: var(--ink); stroke-width: 1; }
.w-halo { stroke: var(--paper); stroke-width: 3; }
.w-xline, .w-xhalo { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* Opening an item cuts the conclusion to “这一件 · 第 N 轮”. */
.w-lede.is-cut .w-lede-q { font: 600 12px var(--mono); letter-spacing: .03em; color: var(--ink-2); }
.w-lede.is-cut .w-lede-a { color: var(--ink); font-weight: 600; }

/* stack */
.w-stack { padding: 24px 16px 16px; outline: none; }
.w-stack:focus-visible { box-shadow: inset 0 0 0 2px #ff5a3699; }
.w-top { display: flex; justify-content: space-between; padding: 0 12px 10px; font-size: 14px; font-weight: 600; color: #b9d4ff; font-variant-numeric: tabular-nums; }
.w-top span:last-child { color: #fff; }
.w-deck { position: relative; }
.w-card { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 5px; min-height: 196px; box-sizing: border-box; padding: 14px 16px 13px 20px; border-radius: 24px; background: #fff; color: #111; }
.w-card::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: #ff3b1f; transition: background-color .3s; }
.w-card.is-calm::before, .w-card.is-done::before { background: #c9c6bd; }
.w-card-ghost { position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; }
.w-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.w-due { font-size: 12.5px; font-weight: 700; color: #6a6760; font-variant-numeric: tabular-nums; }
.w-due.is-hot { color: #e8361b; }
.w-due.is-calm { color: #2f7f4f; }
.w-pos { font-size: 11px; color: #a7a49b; font-variant-numeric: tabular-nums; }
.w-card strong { font-size: 21px; line-height: 1.26; letter-spacing: -.005em; }
.w-card em { font-style: normal; font-size: 12px; color: #8a877f; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-where { margin-top: auto; font-size: 11.5px; color: #8a877f; }
.w-where.is-wrist { color: #e8361b; font-weight: 600; }
.w-card.is-done strong { color: #6a6760; }
.w-stamp { position: absolute; right: 14px; bottom: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-size: 13px; }
.w-peek { position: relative; z-index: 2; height: 10px; margin: -2px 10px 0; border-radius: 0 0 18px 18px; background: #d8d5cd; }
.w-peek.is-2 { z-index: 1; margin: -2px 22px 0; background: #8f8c84; }
.w-more { margin-top: 8px; text-align: center; font-size: 12px; color: #8a877f; }

/* reply */
.w-reply { padding: 28px 20px 18px; display: flex; flex-direction: column; }
.w-reply-due { margin: 0 4px 2px; font-size: 12.5px; font-weight: 600; color: #a9a69d; font-variant-numeric: tabular-nums; }
.w-reply-due.is-hot { color: var(--w-red); }
.w-prompt { margin: 2px 4px 14px; font-size: 19px; line-height: 1.3; font-weight: 650; }
.w-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.w-actions button { min-height: 46px; border: 0; border-radius: 23px; background: #3a2520; color: #ffd8cd; font-size: 15px; font-weight: 650; transition: transform .12s var(--w-ease), filter .15s; }
.w-actions button:active { transform: scale(.97); }
.w-actions button.is-rec { background: #ff4d2e; color: #fff; }
.w-actions button.is-handoff { background: #f3f1ea; color: #111; }
.w-actions .is-quiet { min-height: 38px; background: #222; color: #b9b6ad; font-weight: 500; font-size: 13px; }
.w-actions button:focus-visible, .w-undo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.w-phone { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 12px; color: #b9b6ad; text-align: center; }
.w-phone-icon { display: grid; place-items: center; width: 34px; height: 46px; border: 2px solid #b9b6ad; border-radius: 8px; font-size: 0; margin-bottom: 6px; }
.w-phone p { margin: 0; font-size: 15px; color: #f3f1ea; font-weight: 600; }
.w-phone small { font-size: 12px; }
.w-done, .w-calm { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; color: #c9c6bd; }
.w-done p, .w-calm p { margin: 12px 14px 4px; font-size: 16px; color: #fff; font-weight: 600; }
.w-done small, .w-calm small { font-size: 12px; color: #9a978e; line-height: 1.45; padding: 0 10px; }
.w-tick { width: 58px; height: 58px; }
.w-tick circle { fill: #1f3d2b; stroke: #7fe0a0; stroke-width: 2; stroke-dasharray: 145; stroke-dashoffset: 0; }
.w-tick path { fill: none; stroke: #7fe0a0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 0; }
.w-done.is-saved .w-tick circle { fill: transparent; }
.w-tick.is-drawing circle { animation: w-draw .42s var(--w-ease) both; }
.w-tick.is-drawing path { animation: w-draw-tick .32s var(--w-ease) .2s both; }
@keyframes w-draw { from { stroke-dashoffset: 145; } }
@keyframes w-draw-tick { from { stroke-dashoffset: 36; } }
.w-ok { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #1f3d2b; color: #7fe0a0; font-size: 26px; }
.w-undo { margin-top: 14px; min-height: 36px; border: 0; background: #262626; color: #e9e6dc; border-radius: 999px; padding: 0 18px; font-size: 13px; }

/* side legend */
.w-legend-title { margin: 14px 0 6px; font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.w-legend-title:first-child { margin-top: 0; }
.w-legend { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.w-legend li { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 2px 0; }
.w-legend li small { flex-basis: 100%; padding-left: 34px; font-size: 11px; color: var(--ink-2); }
.w-legend span { flex: none; width: 26px; text-align: right; font: 600 12px var(--mono); color: var(--ink-2); }
.w-legend span.is-hot { color: var(--vermilion); }
.w-legend span.is-ask { color: oklch(0.6 0.12 35 / .7); }
.w-legend span.is-blank { color: #b9b6ad; }
.w-legend-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 1100px) { .w-row { flex-wrap: wrap; justify-content: center; } }
/* Short windows (the all.html embed is 760 px tall): tighter rows, so the names under the face still fit without scrolling. */
@media (max-height: 820px) { .w-wrap { gap: 18px; padding-top: 22px; padding-bottom: 16px; } .w-names { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .w-wrap *, .w-wrap *::before { transition: none !important; animation: none !important; }
}
.w-keys.is-playing { color: var(--ink); font-weight: 600; }