.phases-figure{gap:var(--space-lg);flex-direction:column;margin:0;display:flex}.phases-layout{gap:var(--space-xl);align-items:center;display:grid}.phases-stage{aspect-ratio:1;inline-size:100%;position:relative;container-type:inline-size}.phases-canvas{position:absolute;inset:0}.phases-canvas canvas{block-size:100%;inline-size:100%;display:block}.phases-plate{align-items:center;gap:var(--space-xs);transition:opacity var(--dur-slow) var(--ease-out);flex-direction:column;display:flex;position:absolute;inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.phases-plate-han{font-size:var(--text-2xl);color:var(--text-faint)}.phases-figure[data-live=yes] .phases-plate{opacity:0}.phases-nodes{position:absolute;inset:0}.phases-node{aspect-ratio:1;border-radius:var(--radius-pill);color:var(--text-soft);cursor:pointer;transition:color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:.2em;padding:0;display:flex;position:absolute;transform:translate(-50%,-50%)}.phases-node:hover,.phases-node[aria-pressed=true]{color:var(--text);transform:translate(-50%,-50%)scale(1.06)}.phases-node:focus-visible{outline:var(--hairline) solid var(--focus);outline-offset:var(--space-2xs)}.phases-node-han{font-size:clamp(var(--text-body), 6cqw, var(--text-xl));color:var(--text-faint);transition:color var(--dur) var(--ease-out);line-height:1}.phases-node:hover .phases-node-han,.phases-node[aria-pressed=true] .phases-node-han{color:var(--accent-deep)}.phases-node-name{font-family:var(--font-mono);font-size:clamp(var(--text-2xs), 2.1cqw, var(--text-sm));letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1}.phases-detail{min-block-size:22rem}.phases-card{gap:var(--space-sm);animation:phase-card-in var(--dur) var(--ease-out) both;flex-direction:column;display:flex}.phases-card-title{align-items:baseline;gap:var(--space-sm);flex-wrap:wrap;margin:0;display:flex}.phases-card-han{font-size:var(--text-lg);color:var(--accent-deep)}.phases-card-line{max-inline-size:var(--measure)}.phases-card-specs{margin:var(--space-sm) 0 0}.phases-card-specs .spec dt{font-family:var(--font-mono)}.phases-caption{border-block-start:var(--hairline) solid var(--border);max-inline-size:var(--measure-wide);color:var(--text-faint);padding-block-start:var(--space-sm)}@keyframes phase-card-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.phases-card{animation:none}.phases-node,.phases-node-han,.phases-plate{transition:none}.phases-node:hover,.phases-node[aria-pressed=true]{transform:translate(-50%,-50%)}}@media (min-width:56rem){.phases-layout{gap:var(--space-2xl);grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.phase-table-scroll{border-block-start:var(--hairline) solid var(--border);max-inline-size:100%;padding-block-start:var(--space-md);overflow-x:auto}.phase-table-scroll:focus-visible{outline:var(--hairline) solid var(--focus);outline-offset:var(--space-2xs)}.phase-table{border-collapse:collapse;text-align:start;inline-size:100%;min-inline-size:46rem}.phase-table-caption{caption-side:top;text-align:start;color:var(--text-faint);padding-block-end:var(--space-md)}.phase-table thead th{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);text-align:start;padding-block:0 var(--space-xs);border-block-end:var(--hairline) solid var(--rule-strong);white-space:nowrap;padding-inline-end:var(--space-md);font-weight:500}.phase-table tbody th,.phase-table tbody td{padding-block:var(--space-md);border-block-end:var(--hairline) solid var(--border);vertical-align:baseline;text-align:start;font-weight:400;font-size:var(--text-sm);color:var(--text-soft);padding-inline-end:var(--space-md)}.phase-table tbody th{min-inline-size:9rem;color:var(--text)}.phase-table-han{font-size:var(--text-lg);color:var(--accent-deep);line-height:1;display:block}.phase-table-name{font-size:var(--text-body);color:var(--text);margin-block-start:var(--space-2xs);font-weight:500;display:block}.phase-table-pinyin{color:var(--text-faint);display:block}