.cc { position: fixed; inset: 0; z-index: var(--z-layer, 160); --edge: 22px; --peek: 5.5vw; --gap: 20px; --cc-x: calc(var(--edge) + var(--peek) + var(--gap)); --cc-y: 22px; --cc-r: 12px; --peek-w: calc(var(--cc-x) - var(--gap)); --pad: clamp(24px, 2.6vw, 44px); --peek-op: 0.45; --rail-tone: #e2e1dc; --peek-gray: #4d4d4d; --step: #1c1c1b; --plate-on-plate: #333331; --bar-h: 64px; --bar-z: 88px; --sch: calc(100svh - 2 * var(--cc-y) - var(--bar-z)); --glow: #eeede8; --glow-dim: #888785; --glow-rgb: 238, 237, 232; color: var(--ink); } .cc[hidden] { display: none; } .cc img, .cc video { display: block; max-width: 100%; } .cc :is(.icon, .lucide) { flex: none; } .cc ::selection { background: var(--acid); color: var(--paper-ink); } .cc :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .cc .label { box-shadow: none; padding: 0; border-radius: 0; background: none; } .cc-back { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.66); } .cc-stage { position: absolute; inset: var(--cc-y) var(--cc-x); } .cc-card { position: absolute; inset: 0; border-radius: var(--cc-r); color: var(--ink); overflow: visible; will-change: transform; } .cc-paper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cc-paper-fill { fill: var(--bg); } .cc-rail-tone { fill: var(--rail-tone); } .cc-progress { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: opacity 0.3s ease-out; } .cc-card.is-unlit .cc-progress { opacity: 0; } .cc-card::before, .cc-card::after { transition: opacity 0.3s ease-out, visibility 0s; } .cc-card.is-unlit::before, .cc-card.is-unlit::after { opacity: 0; visibility: hidden; } .cc-scroll { position: absolute; inset: 0 0 var(--bar-z) 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--cc-r) var(--cc-r) 0 0; } .cc-scroll::-webkit-scrollbar { display: none; } @media (min-width: 761px) { .cc-scroll { scroll-snap-type: y proximity; } .cc-scroll.is-detent { scroll-snap-type: none; } } html.reduced .cc-scroll { scroll-snap-type: none; } .cc-peek { position: absolute; z-index: 2; top: calc(var(--cc-y) + (100% - 2 * var(--cc-y)) * 0.088); bottom: calc(var(--cc-y) + (100% - 2 * var(--cc-y)) * 0.088); width: calc(var(--peek-w) + 24px); border-radius: 10px; background: var(--peek-gray); opacity: var(--peek-op); } .cc-peek--prev { left: -24px; } .cc-peek--next { right: -24px; } .cc .cc-close { position: absolute; z-index: 8; top: calc(var(--cc-y) + 14px); right: calc(var(--cc-x) + 14px); width: 52px; height: 52px; background: var(--bg-plate); color: var(--paper); --fill: var(--paper); --fill-ink: var(--paper-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cc-frames { display: block; } .cc-frame-s { position: relative; min-height: var(--sch); padding: clamp(36px, calc(var(--sch) * 0.06), 72px) max(var(--pad), 84px) clamp(36px, calc(var(--sch) * 0.06), 72px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(24px, calc(var(--sch) * 0.04), 44px); align-content: start; scroll-snap-align: start; } .cc-frame-s + .cc-frame-s { border-top: 1px solid var(--line); } .cc-fhead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .cc-fhead > .cc-wall { min-width: 0; max-width: 100%; } .cc-fwords { min-width: 0; max-width: 34rem; display: grid; gap: 16px; align-content: start; } .cc-fproof { min-width: 0; position: relative; z-index: 5; text-shadow: none; display: grid; gap: 14px; align-content: start; } .cc-frame-s--proof .cc-fproof { grid-column: 1 / -1; } .cc-frame-s--words .cc-fwords { grid-column: 1 / -1; max-width: 46rem; } .cc-wall { margin: 0; font-family: 'Söhne Wall', 'Söhne', 'Söhne Fallback', sans-serif; font-size: clamp(30px, 4.6vw, 66px); text-shadow: 0 0 10px rgba(238, 237, 232, 0.2); } .cc-wall .pl.is-wide { display: inline; white-space: normal; max-width: none; margin: 0; font-family: 'Söhne Pill', 'Söhne', 'Söhne Fallback', sans-serif; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .cc-wall.is-measuring .pl { display: inline-block; white-space: nowrap; max-width: none; } .cc-wall .pl { text-shadow: none; } .cc-wall:focus { outline: none; } .cc-where { margin: 0; color: var(--muted); } .cc-frame-s--open { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .cc-frame-s--open .cc-fwords { max-width: none; gap: clamp(24px, calc(var(--sch) * 0.04), 40px); } .cc-promise { margin: 0; max-width: 40ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.45; } .cc-figure { display: grid; gap: 10px; margin: 0; } .cc-figcap { font-size: 13px; line-height: 1.4; color: var(--muted); } .cc-frame { position: relative; z-index: 5; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: 10px; clip-path: inset(0 round 10px); background: #000; } .cc-frame > :is(video, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); } .cc .cc-film { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 48px; height: 48px; background: rgba(17, 17, 17, 0.55); color: var(--paper); --fill: var(--paper); --fill-ink: var(--paper-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media (min-width: 1100px) { .cc-frame { aspect-ratio: 16 / 9; } } .cc-credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 64px); margin: 0; padding-top: clamp(20px, calc(var(--sch) * 0.03), 28px); border-top: 1px solid var(--line); } .cc-credits div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; } .cc-credits dt { color: var(--muted); } .cc-credits dd { margin: 0; font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; } .cc-credit-q { display: block; color: var(--muted); } .cc-p { margin: 0; font-size: 17px; line-height: 1.6; } .cc-quiet { color: var(--muted); font-size: 15px; } .cc-p .text-link { font: inherit; border: 0; padding: 0; background-color: transparent; cursor: pointer; } .cc-h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .cc-then { margin-top: 10px; } .cc-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.6; } .cc-list li { padding: 10px 0; border-top: 1px solid var(--line); } .cc-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; } .cc-metrics dd { margin: 0; font-size: 28px; font-weight: 500; } .cc-kind { color: var(--muted); } .cc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; font-size: 15px; } .cc-plate { margin: 0; padding: 22px; border-radius: 12px; background: var(--step); display: grid; gap: 10px; } .cc-note { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .cc-blocks { display: grid; gap: 14px; margin: 0; } .cc-blocks dt { color: var(--muted); } .cc-blocks dd { margin: 0; font-size: 16px; line-height: 1.55; } .cc-proof-label { margin: 8px 0 0; color: var(--muted); } .cc-drawing { container-type: inline-size; position: relative; z-index: 5; padding: clamp(16px, 2vw, 26px); border-radius: 10px; background: var(--paper); color: var(--paper-ink); --accent: var(--accent-deep); --plate: var(--stone); --fill: var(--paper-ink); --fill-ink: var(--paper); text-shadow: none; } .cc-drawing .eyebrow { color: var(--paper-muted); } .cc-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .cc-side-by { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-radius: 12px; background: var(--step); } .cc-side-by .eyebrow { color: var(--muted); } .cc-card .case-compare-plinth .eyebrow { color: var(--paper-muted); } .cc-card .case-compare-note { color: var(--muted); } .cc-card .case-compare-head { border-color: var(--line); } .cc-card :is(.case-compare, .clip, .case-gallery-play, .case-gallery-frame) { position: relative; z-index: 5; text-shadow: none; } @keyframes cc-tunein { 0% { transform: scaleY(0.006); filter: brightness(2.6); } 30% { transform: scaleY(0.006); filter: brightness(2.6); } 85% { transform: scaleY(1.02); filter: brightness(1.15); } 100% { transform: none; filter: none; } } .cc-frame-s.is-tuning { animation: cc-tunein 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: 50% calc(var(--sch) / 2); } html.reduced .cc-frame-s.is-tuning { animation: none; } .cc-end { height: calc(var(--sch) * 0.06); } .cc-ask { display: grid; gap: 14px; padding: 0 var(--pad) 32px; } .cc .cc-ask-h { margin: 0; color: var(--muted); } .cc-ask-qs { display: flex; flex-wrap: wrap; gap: 6px; } .cc-ask-q { min-height: 40px; padding: 9px 15px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; line-height: 1.25; text-align: left; color: var(--ink); background: var(--bg-plate); cursor: pointer; transition: background-color 0.3s, color 0.3s; } .cc-ask-q:focus-visible { background: var(--ink); color: var(--bg); } @media (hover: hover) { .cc-ask-q:hover { background: var(--ink); color: var(--bg); } } .cc-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; } .cc-pic { display: grid; gap: 10px; margin: 0; align-content: start; min-width: 0; grid-column: 1 / -1; } .cc-pic.is-tall { grid-column: auto; } .cc-pic--film { grid-column: 1 / -1; } .cc .cc-plinth { position: relative; z-index: 5; display: block; width: 100%; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: var(--step); font: inherit; text-align: left; cursor: zoom-in; text-shadow: none; } .cc-plinth-win { position: absolute; inset: 0; display: block; } .cc-plinth-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cc-pic.is-wide .cc-plinth { background: #fff; } .cc-pic.is-tall .cc-plinth { aspect-ratio: 3 / 4; } .cc-pic.is-tall .cc-plinth-win img { inset: 6%; width: 88%; height: 88%; object-fit: contain; } .cc-plinth.is-window .cc-plinth-win img { object-position: 50% var(--pos, 0%); } .cc-pic.is-tall .cc-plinth.is-window .cc-plinth-win img { inset: 0; width: 100%; height: 100%; object-fit: cover; } .cc-pic figcaption { font-size: 14px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.cc-pic--gallery, .cc-pic--film) figcaption { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .cc-enlarge-icon { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(17, 17, 17, 0.6); color: var(--paper); opacity: 0; transition: opacity 0.25s; } .cc-enlarge-icon .icon { width: 16px; height: 16px; } .cc-plinth:is(:hover, :focus-visible) .cc-enlarge-icon { opacity: 1; } @media (hover: none) { .cc-enlarge-icon { opacity: 1; } } .cc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .cc-strip .cc-pic { grid-column: auto; grid-template-rows: 1fr auto; } .cc-strip .cc-plinth { align-self: end; } .cc-strip figcaption { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .cc-dots { display: flex; justify-content: center; gap: 0; margin-top: 4px; } .cc-dots[hidden] { display: none; } .cc-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--muted); } .cc-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color 0.3s, box-shadow 0.3s; } .cc-dot[aria-current="true"] { color: var(--paper); } .cc-dot[aria-current="true"]::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); } .cc-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 50%; } .cc-map { position: relative; display: block; flex: none; width: 52px; aspect-ratio: var(--mar, 2 / 1); overflow: hidden; border-radius: 3px; background: #fff; } .cc-map img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; } .cc-map i { position: absolute; border-radius: 1.5px; box-shadow: 0 0 0 1.5px var(--paper-ink), 0 0 0 99px rgba(222, 220, 214, 0.66); transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s; } .cc-crop-foot { display: none; } @media (max-width: 760px) { .cc-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } .cc-pic.has-region .cc-plinth { aspect-ratio: auto; display: grid; background: var(--step); } .cc-pic.has-region .cc-plinth-win { position: relative; aspect-ratio: var(--rar); overflow: hidden; background: #fff; } .cc-pic.has-region .cc-plinth-win img { inset: auto; left: calc(-100% * var(--rx) / var(--rw)); top: calc(-100% * var(--ry) / var(--rh)); width: calc(100% / var(--rw)); height: auto; max-width: none; object-fit: fill; } .cc-pic.has-region .cc-enlarge-icon { display: none; } .cc-crop-foot { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px 0 12px; overflow: hidden; font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); } .cc-crop-foot > .icon { margin-left: auto; width: 18px; height: 18px; } } .cc-viewer { position: absolute; inset: 0; z-index: 7; display: grid; grid-template-rows: minmax(0, 1fr); padding: 64px 84px 28px; border-radius: var(--cc-r); background: var(--bg); color: var(--ink); text-shadow: none; } .cc-viewer-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; height: 100%; min-height: 0; margin: 0; } .cc-viewer-pic { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--step); } .cc-viewer-pic > img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; } .cc-viewer-window { position: relative; height: 94%; max-width: 94%; aspect-ratio: var(--ar); overflow: hidden; border-radius: 6px; } .cc-viewer-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos, 0%); } .cc-pan-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; } .cc-pan { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; background: var(--step); touch-action: none; cursor: grab; } .cc-pan > img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; } .cc-pan.is-easing > img { transition: transform 0.55s var(--ease-ink, cubic-bezier(0.16, 1, 0.3, 1)); } .cc-pan-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px 9px; border-radius: 999px; background: rgba(17, 17, 17, 0.74); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity 0.4s; } .cc-pan-hint .icon { width: 15px; height: 15px; } .cc-pan-hint.is-gone { opacity: 0; } .cc-pan-tools { display: flex; align-items: center; gap: 12px; } .cc-pan-map { padding: 0; border: 0; background: none; cursor: pointer; } .cc-pan-map .cc-map { width: 96px; } .cc-pan-zoom { display: inline-flex; align-items: center; gap: 14px; height: 48px; margin-left: auto; padding: 0 16px; border: 0; background: var(--bg-plate); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; border-radius: 999px; } .cc-pan-zoom .icon { width: 18px; height: 18px; } html.reduced .cc-pan.is-easing > img, html.reduced .cc-pan-hint { transition: none; } .cc-viewer figcaption { display: flex; gap: 16px; font-size: 14px; line-height: 1.45; color: var(--muted); } .cc-viewer figcaption b { font-weight: 500; color: var(--ink); } .cc-viewer-count { flex: none; color: var(--ink); font-weight: 500; } .cc .cc-viewer-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; } .cc .cc-viewer-prev, .cc .cc-viewer-next { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; } .cc .cc-viewer-prev { left: 18px; } .cc .cc-viewer-next { right: 18px; } .cc.cc-viewing :is(.cc-close, .cc-peek, .cc-bar, .cc-guide) { opacity: 0; pointer-events: none; visibility: hidden; } .cc-loading { display: grid; gap: 18px; padding: var(--pad); } .cc-loading .cc-title { margin: 0; font-size: clamp(30px, 3vw, 48px); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; } @media (max-width: 760px) { .cc { --pad: 20px; --edge: 0px; --peek: 0px; --gap: 0px; --cc-x: 8px; --cc-y: 8px; --bar-h: 56px; --bar-z: calc(72px + env(safe-area-inset-bottom, 0px)); } .cc .cc-peek { display: none; } .cc .cc-close { width: 48px; height: 48px; top: calc(var(--cc-y) + 10px); right: calc(var(--cc-x) + 10px); } .cc-frame-s { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding: 68px var(--pad) 40px; } .cc-fwords { max-width: none; } .cc-credits { grid-template-columns: minmax(0, 1fr); } .cc-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .cc-strip::-webkit-scrollbar { display: none; } .cc-strip .cc-pic { scroll-snap-align: start; } .cc-ask { padding-bottom: 24px; } .cc-end { height: 24px; } .cc-viewer { padding: 64px 14px 18px; } .cc .cc-viewer-prev, .cc .cc-viewer-next { top: 14px; translate: none; } .cc .cc-viewer-prev { left: 14px; } .cc .cc-viewer-next { left: 70px; right: auto; } } html.reduced .cc :is(.cc-enlarge-icon, .cc-ask-q, .cc-dot::before) { transition: none; } @media (forced-colors: active) { .cc-card, .cc-viewer { border: 1px solid CanvasText; background: Canvas; } .cc-paper { display: none; } .cc-card .cc-drawing { background: Canvas; } .cc-wall .pl { forced-color-adjust: auto; border: 1px solid CanvasText; } .cc-plate, .cc-side-by { border: 1px solid CanvasText; } .cc-wall { text-shadow: none; } .cc-dot::before { box-shadow: inset 0 0 0 1.5px CanvasText; } .cc-dot[aria-current="true"]::before { background: CanvasText; } } .cc-card .cc-viewer { background: var(--bg); color: var(--ink); text-shadow: none; } .cc-card :is(.cc-viewer-pic, .cc-pan) { background: #1c1c1b; } .cc-card .cc-viewer figcaption { color: var(--muted); } .cc-card :is(.cc-viewer figcaption b, .cc-viewer-count) { color: var(--ink); } .cc-card .cc-pan-zoom { background: var(--bg-plate); color: var(--ink); } .cc .cc-close { background: var(--bg-plate); } @media (forced-colors: active) { .cc-card .cc-drawing { background: Canvas; } } .cc-frame-s--problem { grid-template-rows: auto auto; align-content: center; } .cc-challenge { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px 64px; align-items: start; } .cc-problem-lead { display: grid; gap: 30px; align-content: start; min-width: 0; } .cc-problem-lead > .cc-p { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.4; letter-spacing: -0.01em; } .cc-approach { display: grid; gap: 20px; align-content: start; min-width: 0; } .cc-approach .cc-h3 { margin: 0; font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.2; } .cc-approach .cc-p { font-size: 17px; line-height: 1.6; } .cc-approach .cc-list { font-size: 16px; line-height: 1.55; } .cc-problem-context { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .cc-frame-s--gallery .cc-fproof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; align-items: start; } .cc-frame-s--gallery .cc-pics { display: contents; } .cc-frame-s--gallery .cc-pic { grid-column: auto; margin: 0; min-width: 0; } .cc-frame-s--gallery .cc-pic:not(.is-tall) .cc-plinth { aspect-ratio: 4 / 3; background: var(--step); } .cc-frame-s--gallery .cc-pic:not(.is-tall) .cc-plinth-win img { inset: 4%; width: 92%; height: 92%; object-fit: contain; } .cc-frame-s--gallery figcaption { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.5; } .cc-frame-s--evidence .cc-plate { padding: 26px 0; background: none; border-radius: 0; border-top: 1px solid var(--line); gap: 20px; } .cc-frame-s--evidence .cc-blocks { gap: 0; } .cc-frame-s--evidence .cc-blocks dd { font-size: 18px; line-height: 1.55; } .cc-frame-s--closing .cc-fwords { border: 0; padding: 0; gap: 32px; } .cc-frame-s--closing .cc-ask { padding: 0; gap: 16px; } .cc-frame-s--closing .cc-ask-qs { flex-direction: column; align-items: flex-start; gap: 9px; } .cc-frame-s--closing .cc-ask-q { min-height: 44px; max-width: 100%; } @media (min-width: 761px) { :is(.cc-frame-s--evidence, .cc-frame-s--closing) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-content: center; align-items: start; gap: 40px 64px; } :is(.cc-frame-s--evidence, .cc-frame-s--closing) .cc-fhead { grid-column: 1; grid-row: 1; } :is(.cc-frame-s--evidence, .cc-frame-s--closing) .cc-wall { font-size: clamp(36px, 3.8vw, 60px); } .cc-frame-s--evidence .cc-fwords { grid-column: 1; grid-row: 2; } .cc-frame-s--evidence .cc-fproof { grid-column: 2; grid-row: 1 / 3; } .cc-frame-s--closing .cc-fwords { grid-column: 2; grid-row: 1; align-self: center; } .cc-frame-s--closing .cc-p { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.5; } } @media (max-width: 1100px) and (min-width: 761px) { .cc-frame-s--gallery .cc-fproof { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.cc-frame-s--evidence, .cc-frame-s--closing) { column-gap: 32px; } } @media (max-width: 1000px) { .cc-challenge { column-gap: 32px; } } @media (max-width: 760px) { .cc-frame-s--problem { align-content: start; } .cc-challenge { grid-template-columns: minmax(0, 1fr); gap: 32px; } .cc-problem-lead > .cc-p { font-size: 22px; } .cc-approach .cc-h3 { font-size: 25px; } .cc-frame-s--gallery .cc-fproof { grid-template-columns: minmax(0, 1fr); gap: 32px 14px; } .cc-frame-s--gallery:has(.cc-pics):not(:has(.is-wide)) .cc-fproof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-frame-s--evidence .cc-blocks dd { font-size: 17px; } .cc-frame-s--closing .cc-p { font-size: 20px; } } .cc-freplay, .cc-replay-frame { display: contents; } .cc-thoughts { min-width: 0; display: grid; gap: 32px; } .cc-thought-tabs { display: flex; gap: 10px; } .cc-thought-stack { display: grid; } .cc-thought-panel { grid-area: 1 / 1; min-width: 0; display: grid; align-content: start; gap: 24px; } .cc-thought-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; } .cc-thought-panel .cc-h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; } .cc-thought-panel .cc-p { font-size: 18px; line-height: 1.55; } .cc-thought-panel.is-active :is(.cc-h3, .cc-p) { animation: cc-thought-in 0.25s ease-out both; } @keyframes cc-thought-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .cc-thought-moments { display: grid; gap: 20px; } .cc-thought-moments ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; } .cc-thought-moments li { position: relative; padding-top: 16px; font-size: 15px; border-top: 1px solid var(--line); } .cc-thought-moments li::before { content: ''; position: absolute; width: 5px; height: 5px; background: var(--paper); border-radius: 50%; top: -3px; left: 0; } .cc-thoughts--path .cc-thought-moments ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .cc-thoughts--path .cc-thought-moments li { font-size: 24px; } .cc-thoughts--static .cc-thought-stack { gap: 24px; } .cc-thoughts--static .cc-thought-panel { grid-area: auto; } @media (min-width: 761px) { .cc-frame-s--decision:has(.cc-freplay) { row-gap: 26px; } .cc-frame-s--decision:has(.cc-freplay) .cc-fwords { grid-column: 1; grid-row: 2; max-width: none; } .cc-frame-s--decision .cc-replay { grid-column: 2; grid-row: 2; align-self: start; } } @media (min-width: 761px) and (max-width: 1100px) { .cc-frame-s--decision { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .cc-frame-s--decision .cc-fwords, .cc-frame-s--decision:has(.cc-freplay) .cc-fwords, .cc-frame-s--decision .cc-replay { grid-column: 1; grid-row: auto; max-width: none; } } @media (max-width: 760px) { .cc-thought-panel .cc-h3 { font-size: 29px; } .cc-thought-panel .cc-p { font-size: 17px; } .cc-thought-moments ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html.reduced .cc-thought-panel.is-active :is(.cc-h3, .cc-p) { animation: none; } @media (forced-colors: active) { .cc-thought-moments li::before { background: CanvasText; } } .cc-card .cc-replay { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2vw, 24px); border-radius: 10px; background: var(--paper); color: var(--paper-ink); text-shadow: none; --accent: var(--accent-deep); --plate: var(--stone); --fill: var(--paper-ink); --fill-ink: var(--paper); } .cc-card .cc-replay .eyebrow { margin: 0; color: var(--paper-muted); } .cc-replay p { margin: 0; } .cc-replay-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(17, 17, 17, 0.14); } .cc-replay-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--stone); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; } .cc-replay-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; } .cc-replay-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; } .cc-replay-say { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--stone); font-size: 16px; line-height: 1.35; } .cc-replay-it { justify-self: start; max-width: 85%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper-ink); color: var(--paper); font-size: 16px; line-height: 1.35; } .cc-replay-it::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); } .cc-replay-it.is-off { visibility: hidden; } .cc-replay-it.is-new { animation: cc-beat-in 0.35s var(--ease-ink); } @keyframes cc-beat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } html.reduced .cc-replay-it.is-new { animation: none; } .cc-replay-steps-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .cc-replay-status { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; } .cc-replay-status:empty::before { content: '\00a0'; } .cc-replay-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .cc-replay-steps li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(17, 17, 17, 0.06); font-size: 13px; white-space: nowrap; transition: background-color 0.35s, color 0.35s; } .cc-replay-steps li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; } .cc-replay-steps li.is-supported::before { background: currentColor; } .cc-replay-steps li.is-next { background: var(--paper-ink); color: var(--paper); } .cc-replay-steps li.is-next::before { background: currentColor; } .cc-replay-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cc-replay-next { min-width: 9.6rem; } .cc-replay-pips { display: flex; margin-left: auto; } .cc-replay-pips i { display: grid; place-items: center; width: 18px; height: 24px; } .cc-replay-pips i::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--paper-muted); box-sizing: border-box; transition: background-color 0.3s; } .cc-replay-pips i.on::before { background: var(--paper-ink); border-color: var(--paper-ink); } .cc-replay-note { font-size: 12px; line-height: 1.45; color: var(--paper-muted); } html.reduced .cc-replay-steps li, html.reduced .cc-replay-pips i::before { transition: none; } .cc-replay-top { flex-wrap: wrap; } .cc-replay-say, .cc-replay-it { max-width: 92%; } .cc-replay-steps-h { flex-direction: column; align-items: flex-start; gap: 4px; } .cc-replay-pips { flex-basis: 100%; margin-left: 0; } .cc-replay-ctl .pill { flex: 1 1 0; min-width: 0; padding: 0 18px; gap: 10px; } .cc-card .cc-replay { border: 1px solid CanvasText; } .cc-replay :is(.cc-replay-say, .cc-replay-it, .cc-replay-tag) { border: 1px solid CanvasText; } .cc-replay-it::before, .cc-replay-pips i.on::before { forced-color-adjust: none; background: CanvasText; } .cc-replay-steps li { border: 1px solid CanvasText; } .cc-replay-steps li.is-next { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } .cc-decision-proof { display: grid; gap: 22px; min-width: 0; } .cc-proof-primary { min-width: 0; } .cc-proof-primary .cc-pic.is-tall { width: min(100%, 320px); margin-inline: auto; } .cc-proof-primary figcaption { white-space: normal; overflow: visible; text-overflow: clip; } .cc-proof-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 12px; } .cc-proof-choice { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; } .cc-proof-choice:is([aria-pressed=true], .is-selected) { outline: 1px solid var(--paper); outline-offset: 2px; } .cc-proof-choice:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } .cc-proof-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; } .cc-proof-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .cc-proof-thumb.is-window img { object-fit: cover; object-position: 50% var(--pos); } .cc-proof-note { border-top: 1px solid var(--line); padding-top: 20px; } .cc-proof-note .eyebrow { margin-bottom: 10px; } .cc-decision-reason .eyebrow { margin-bottom: 14px; } .cc-decision-reason + .cc-thoughts { margin-top: 28px; } .cc-proof-fallback { display: grid; gap: 24px; } .cc-card.is-reading:not(.is-unlit)::before, .cc-card.is-reading:not(.is-unlit)::after { opacity: .3; } @media (max-width: 760px) { .cc-proof-choices { gap: 8px; } .cc-proof-choice { font-size: 12px; } } @media (forced-colors: active) { .cc-proof-choice { outline: 1px solid ButtonText; } .cc-proof-choice[aria-pressed=true] { outline: 2px solid Highlight; } } @media (min-width: 1101px) { .cc-frame-s--decision:has(.cc-decision-proof) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 42px; } } .cc-decision-reason .cc-h3 { font-size: clamp(25px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.03em; }    .cc-bar { position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 12px; height: var(--bar-h); border-radius: 14px; isolation: isolate; text-shadow: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 10px; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px), rgba(238, 237, 232, 0.08); } .cc-bar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--grain, none); background-size: var(--grain-size, 128px) var(--grain-size, 128px); mix-blend-mode: plus-lighter; pointer-events: none; } :is(.cc, .set) .cc-case-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 0; height: 48px; padding: 0 14px 0 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } :is(.cc, .set) .cc-case-btn--next { justify-self: end; flex-direction: row-reverse; padding: 0 0 0 14px; text-align: right; } .cc-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--plate-on-plate); transition: background-color 0.2s, color 0.2s; } .cc-case-btn--prev .cc-disc .icon { rotate: 180deg; } .cc-cname { display: grid; gap: 2px; min-width: 0; } .cc-cname .eyebrow { white-space: nowrap; color: var(--muted); } .cc-cname b { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.cc, .set) .cc-case-btn[aria-disabled="true"] { cursor: default; opacity: 0.4; } :is(.cc, .set) .cc-case-btn:not([aria-disabled="true"]):is(:hover, :focus-visible) .cc-disc { background: var(--paper); color: var(--ink-on-paper, #111); } .cc-mid { display: flex; align-items: center; gap: 12px; min-width: 0; } @media (min-width: 761px) { .cc-bar .cc-mid { position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; } .cc-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } :is(.cc, .set) .cc-case-btn--next { grid-column: 2; } } @media (min-width: 761px) and (max-width: 1099px) { .cc-cname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .cc-dial { flex: none; position: relative; width: 56px; height: 56px; border-radius: 50%; touch-action: none; cursor: grab; display: grid; place-items: center; } .cc-dial:active { cursor: grabbing; } .cc-ticks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cc-ticks line { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .cc-ticks line.on { stroke: var(--paper); } .cc-knob { width: 40px; height: 40px; border-radius: 50%; background: var(--plate-on-plate); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.45); transform: rotate(var(--turn, -120deg)); transition: transform 0.28s var(--ease-ink); position: relative; } .cc-knob::before { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: var(--paper); } .cc-knob::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(238, 237, 232, 0.1); } .cc-dial:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } body.is-touch .cc-dial { display: none; } :is(.cc, .set) .cc-chap, .cc-chap-ruler span { font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 16px; white-space: nowrap; } :is(.cc, .set) .cc-chap { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; width: var(--chap-w, calc(var(--chap-n, 0) * 0.68em + 32px)); overflow: hidden; border: 0; border-radius: 6px; background: #0b0b0b; color: var(--glow); cursor: pointer; text-shadow: 0 0 6px rgba(var(--glow-rgb), 0.4); box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(238, 237, 232, 0.07), 0 1px 0 rgba(238, 237, 232, 0.06); transition: text-shadow 0.2s; } :is(.cc, .set) .cc-chap:is(:hover, :focus-visible, [aria-expanded="true"]) { text-shadow: 0 0 10px rgba(var(--glow-rgb), 0.75); } :is(.cc, .set) .cc-chap::after { content: ''; position: absolute; inset: 4px; border-radius: 3px; background: rgba(var(--glow-rgb), 0.07); opacity: 0; transition: opacity 0.2s; pointer-events: none; } :is(.cc, .set) .cc-chap:is(:hover, :focus-visible, [aria-expanded="true"])::after { opacity: 1; } :is(.cc, .set) .cc-chap:focus-visible { outline: 2px solid var(--glow-dim); outline-offset: 3px; } :is(.cc, .set) .cc-chap .icon { width: 12px; height: 12px; filter: drop-shadow(0 0 4px rgba(var(--glow-rgb), 0.45)); transition: rotate 0.3s var(--ease-ink); } :is(.cc, .set) .cc-chap[aria-expanded="true"] .icon { rotate: 180deg; } @media (min-width: 761px) { :is(.cc, .set) .cc-chap .icon { display: none; } } .cc-chap-ruler { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; } .cc-chap-ruler span { display: inline-block; } .cc-chap-name, .cc-guide :is(a, button) { -webkit-mask-image: radial-gradient(circle, #000 0.7px, rgba(0, 0, 0, 0.62) 1.05px); mask-image: radial-gradient(circle, #000 0.7px, rgba(0, 0, 0, 0.62) 1.05px); -webkit-mask-size: 2px 2px; mask-size: 2px 2px; } @keyframes cc-ledflick { 0% { opacity: 1; } 40% { opacity: 0.3; } 100% { opacity: 1; } } .cc-chap-name.is-flick { animation: cc-ledflick 0.12s steps(2, end); } html.reduced .cc-chap-name.is-flick { animation: none; } html.reduced :is(.cc-knob, :is(.cc, .set) .cc-chap, .cc-disc) { transition: none; } .cc-guide { position: absolute; z-index: 7; left: var(--guide-x, 50%); bottom: calc(var(--bar-z) + 6px); translate: -50% 0; width: max-content; min-width: 220px; max-width: calc(100% - 24px); padding: 8px; border-radius: 14px; text-shadow: none; transform-origin: 50% 100%; background: #0b0b0b; color: var(--glow); box-shadow: inset 0 2px 9px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(238, 237, 232, 0.08), 0 16px 40px rgba(0, 0, 0, 0.45); } .cc-guide[hidden] { display: none; } .cc-guide:not([hidden]) { animation: cc-guidein 0.26s var(--ease-ink); } @keyframes cc-guidein { from { opacity: 0; transform: translateY(8px) scale(0.92, 0.6); } to { opacity: 1; transform: none; } } html.reduced .cc-guide:not([hidden]) { animation: none; } .cc-guide .eyebrow { display: block; padding: 10px 14px 6px; color: var(--muted); } .cc-guide ol { list-style: none; display: grid; margin: 0; padding: 0; } :is(.cc, .set) .cc-guide :is(a, button) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; color: var(--glow-dim); text-decoration: none; font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; } .cc-guide :is(a, button)::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; } :is(.cc, .set) .cc-guide :is(a, button):is(:hover, :focus-visible) { background: rgba(var(--glow-rgb), 0.07); color: var(--glow); } :is(.cc, .set) .cc-guide :is(a, button):focus-visible { outline: 2px solid var(--glow-dim); outline-offset: -2px; box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.25); } :is(.cc, .set) .cc-guide :is(a, button)[aria-current] { color: var(--glow); text-shadow: 0 0 6px rgba(var(--glow-rgb), 0.4); } .cc-guide :is(a, button)[aria-current]::before { background: var(--glow); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.7); } .cc-bar:not(.has-mono) .cc-chap-name, .cc-guide:not(.has-mono) :is(a, button) { opacity: 0; } .cc-bar:not(.has-mono) .cc-chap-name { animation: none; } :is(.cc, .set) .cc-readout { cursor: default; } .cc-readout:not(.has-mono) .cc-chap-name { opacity: 0; animation: none; } @media (max-width: 760px) { .cc-bar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; padding: 0 6px; border-radius: 12px; } .cc-dial { display: none; } :is(.cc, .set) .cc-case-btn, :is(.cc, .set) .cc-case-btn--next { padding: 0; } .cc-cname { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :is(.cc, .set) .cc-chap, .cc-chap-ruler span { letter-spacing: 0.03em; padding: 0 10px 0 12px; } :is(.cc, .set) .cc-chap { width: var(--chap-w, calc(var(--chap-n, 0) * 0.63em + 22px)); } :is(.cc, .set) .cc-chap { max-width: 100%; overflow: hidden; flex-direction: column; justify-content: center; gap: 1px; } .cc-guide { left: 8px; right: 8px; width: auto; translate: none; bottom: calc(var(--bar-z) + 4px); border-radius: 12px; } @keyframes cc-guidein { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } } @media (max-width: 399px) { :is(.cc, .set) .cc-chap, .cc-chap-ruler span { font-size: 15px; letter-spacing: 0.02em; } :is(.cc, .set) .cc-chap { width: var(--chap-w, calc(var(--chap-n, 0) * 0.62em + 22px)); } .cc-bar { padding: 0 4px; } .cc-disc { width: 42px; height: 42px; } } @media (max-width: 374px) { :is(.cc, .set) .cc-chap, .cc-chap-ruler span { letter-spacing: 0; padding: 0 8px 0 10px; } :is(.cc, .set) .cc-chap { width: var(--chap-w, calc(var(--chap-n, 0) * 0.6em + 18px)); } } @media (forced-colors: active) { :is(.cc, .set) :is(.cc-knob, .cc-chap, .cc-bar, .cc-guide, .cc-disc) { border: 1px solid CanvasText; } .cc-knob::before { background: CanvasText; } .cc-ticks line { stroke: CanvasText; } .cc-chap-name, .cc-guide :is(a, button) { -webkit-mask-image: none; mask-image: none; } :is(.cc, .set) .cc-guide :is(a, button)[aria-current] { color: Highlight; } :is(.cc, .set) .cc-case-btn[aria-disabled="true"], :is(.cc, .set) .cc-case-btn[aria-disabled="true"] :is(.cc-disc, .cc-cname, .cc-cname *, .eyebrow, .icon) { color: GrayText; opacity: 1; border-color: GrayText; } :is(.cc, .set) .cc-chap, :is(.cc, .set) .cc-guide :is(a, button) { text-shadow: none; } } .cc-guide button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; } .cc-guide button::before { display: none; } .cc-guide button .icon { width: 18px; height: 18px; flex: none; } .cc-guide button span { flex: 1; } .cc-guide button kbd { margin-left: 24px; font: inherit; color: var(--glow-dim); } .cc-guide button[aria-current] kbd { color: var(--glow); } .cc-guide button[aria-current]::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: 12px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.7); } .cc-guide button[aria-disabled="true"] { opacity: 0.4; cursor: default; } @media (hover: none) { .cc-guide button kbd { display: none; } } @media (forced-colors: active) { .cc-guide button[aria-current]::after { background: CanvasText; box-shadow: none; } }