/* PotoDesign-only study. The approved glass, landscape and spacing extensions
   are local tokens; Aicowork's shared controls and globals are not modified. */
@font-face { font-family: 'Poto Years'; src: url('./assets/cormorant-garamond-digits-light.ttf') format('truetype'); font-style: normal; font-weight: 300; font-display: block; }
@font-face { font-family: 'Poto Display'; src: url('./assets/cormorant-garamond-light.ttf?v=25') format('truetype'); font-style: normal; font-weight: 300; font-display: swap; }
:root {
  --poto-paper: #fff; --poto-ink: #101010; --poto-rule: #cfcfcf; --poto-muted: #595959;
  --poto-blue-deep: #193963; --poto-blue-mid: #326aa6; --poto-blue-light: #759cc9;
  --poto-year-ink: #102844; --poto-year-accent: #dceeff;
  --poto-space-xs: .25rem; --poto-space-sm: .5rem; --poto-space-md: 1rem;
  --poto-space-lg: 1.5rem; --poto-space-xl: 2rem; --poto-space-xxl: 3rem;
  --poto-control-height: 2.5rem; --poto-control-radius: .375rem;
  --poto-card-radius: 1rem; --poto-review-width: 25rem; --poto-settings-width: 20rem;
  --poto-intro-width: 42rem; --poto-panel-width: 29rem;
  --poto-glass: rgb(8 24 43 / .66); --poto-glass-header: rgb(15 40 69 / .55);
  --poto-glass-line: rgb(218 238 255 / .28); --poto-glass-muted: #c4d9ee;
  --poto-glass-blur: 24px; --poto-shadow: 0 20px 60px rgb(5 18 34 / .28);
  --poto-ease: cubic-bezier(.16, 1, .3, 1); --poto-fast: 180ms; --poto-reveal: 700ms;
  --poto-year-size: clamp(3rem, 6vw, 5.5rem); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--poto-blue-deep); color: var(--poto-paper); font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button, input { font: inherit; }
::selection { color: var(--poto-year-ink); background: var(--poto-year-accent); }
:focus-visible { outline: 2px solid var(--poto-year-accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.loading-stage { position: relative; width: 100%; height: 100dvh; min-height: 34rem; overflow: clip; isolation: isolate; background: radial-gradient(ellipse at 50% 45%, var(--poto-blue-light), var(--poto-blue-mid) 44%, var(--poto-blue-deep) 100%); }
.landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }
.landscape-video { opacity: 0; transition: opacity var(--poto-fast) var(--poto-ease); }
.landscape-video.is-ready { opacity: 1; }
.landscape-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(16 42 72 / .12), transparent 60%, rgb(3 16 29 / .16)); }
.ambient-light { position: absolute; z-index: 1; inset: -20%; pointer-events: none; background: radial-gradient(ellipse 36% 30% at 44% 37%, rgb(235 245 255 / .09), transparent 75%); transform: translate3d(var(--light-x, 0%), var(--light-y, 0%), 0); }
.poto-header { position: absolute; z-index: 5; top: var(--poto-space-lg); left: var(--poto-space-xl); right: var(--poto-space-xl); display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; pointer-events: none; transition: opacity var(--poto-reveal) var(--poto-ease), transform var(--poto-reveal) var(--poto-ease); }
/* Approved 80px logo/nav separation uses the existing 48px + 32px scale. */
.header-primary { display: flex; align-items: flex-start; gap: calc(var(--poto-space-xxl) + var(--poto-space-xl)); }
.wordmark { justify-self: start; display: inline-flex; align-items: center; min-height: var(--poto-control-height); max-width: 100%; text-decoration: none; pointer-events: auto; }
/* v22 adds 10% to v21: existing control height × .6 × 1.1; preserve SVG proportions. */
.wordmark-logo { display: block; width: auto; height: calc(var(--poto-control-height) * .66); max-width: 100%; object-fit: contain; }
.main-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; pointer-events: auto; }
.main-nav a { position: relative; display: flex; align-items: center; min-height: var(--poto-control-height); font-size: .8125rem; text-decoration: none; }
.main-nav a::after { position: absolute; left: 0; right: 0; bottom: var(--poto-space-sm); height: 1px; background: var(--poto-year-accent); content: ''; transform: scaleX(0); transform-origin: left; transition: transform var(--poto-fast) var(--poto-ease); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current='page']::after { transform: scaleX(1); }
.place-time { justify-self: end; display: grid; gap: var(--poto-space-xs); font-size: .6875rem; line-height: 1.35; text-align: right; }
.place-time time { color: var(--poto-paper); font-variant-numeric: tabular-nums; }
.header-meta { justify-self: end; display: flex; align-items: center; gap: var(--poto-space-md); pointer-events: auto; }
.scene-controls { display: flex; align-items: center; gap: var(--poto-space-xs); }
.theme-controls { display: flex; gap: var(--poto-space-xs); }
.theme-controls .poto-button[aria-pressed='true'] { background: var(--poto-glass); border-color: var(--poto-year-accent); }
.sound-toggle[aria-pressed='true'] { background: var(--poto-glass); border-color: var(--poto-year-accent); }
.sound-toggle[aria-pressed='false'] .sound-waves, .sound-toggle[aria-pressed='true'] .sound-muted { display: none; }
.sound-toggle:is(:hover, :focus-visible)[aria-pressed='true'] .sound-wave { animation: poto-sound-wave var(--poto-fast) var(--poto-ease) both; }
.sound-toggle:is(:hover, :focus-visible)[aria-pressed='true'] .sound-wave:last-child { animation-delay: calc(var(--poto-fast) / 2); }
[data-landscape-mode='night'] .career-years { color: var(--poto-glass-muted); }
.rings-background { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.rings-background[data-dragging='true'] { cursor: grabbing; }
.rings-background:focus-visible { outline-offset: -4px; }
.career-years { position: absolute; z-index: 3; left: 50%; top: 48%; display: flex; align-items: center; transform: translate(-50%, -50%); color: var(--poto-year-ink); font-family: 'Poto Years', Georgia, serif; font-size: var(--poto-year-size); font-weight: 300; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; pointer-events: none; transition: opacity 450ms var(--poto-ease), filter 450ms var(--poto-ease); }
.year-prefix { line-height: 1; }
.year-window { height: 1em; width: calc(2ch + .2em); overflow: hidden; text-align: left; color: var(--poto-year-accent); }
.year-track { will-change: transform; }
.year-track span { display: block; height: 1em; line-height: 1; }
/* v29: shorter two-line beats share one compact, fixed central glass. */
.intro-card {
  --poto-intro-width: calc(var(--poto-panel-width) + var(--poto-space-lg) * 2);
  --conversation-height: calc(var(--poto-space-xxl) * 3 + var(--poto-space-md));
  --conversation-radius: var(--poto-space-lg);
  --conversation-type: clamp(1.75rem, 2.3vw, 2rem);
  --conversation-line: 1.18;
  --conversation-settle: 700ms;
  --conversation-letter: 240ms;
  --conversation-dream: 1800ms;
  --conversation-lens: rgb(12 30 49 / .74);
  --conversation-edge: rgb(225 244 255 / .64);
  --conversation-glint: rgb(231 246 255 / .15);
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: min(var(--poto-intro-width), calc(100% - var(--poto-space-xl) * 2));
  transform: translate(-50%, calc(var(--conversation-height) / -2));
  transition: opacity var(--poto-reveal) var(--poto-ease), transform var(--poto-reveal) var(--poto-ease);
}
.conversation-glass {
  position: relative; isolation: isolate; height: var(--conversation-height);
  padding: var(--poto-space-lg); border-radius: var(--conversation-radius);
  background: linear-gradient(135deg, var(--conversation-glint), transparent 52%), var(--conversation-lens);
  box-shadow: inset 0 1px 1px var(--conversation-edge), inset 1px 0 1px rgb(230 245 255 / .2), inset 0 -1px 1px rgb(110 160 200 / .45), 0 12px 32px rgb(5 18 34 / .24);
  backdrop-filter: blur(var(--poto-glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--poto-glass-blur)) saturate(1.25);
  overflow: hidden;
}
.conversation-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--conversation-light-x, 24%) var(--conversation-light-y, 0%), rgb(225 243 255 / .11), transparent 58%); }
.conversation-glass::after { content: ''; position: absolute; inset: var(--poto-space-xs); border-radius: calc(var(--conversation-radius) - var(--poto-space-xs)); pointer-events: none; box-shadow: inset 0 1px 0 rgb(241 249 255 / .12), inset 0 -1px 0 rgb(241 249 255 / .06); }
.conversation-content { position: relative; z-index: 1; width: 100%; height: 100%; }
.conversation-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--poto-space-sm); min-height: calc(var(--poto-space-lg) * .75); margin-bottom: var(--poto-space-md); }
.conversation-identity h1, .conversation-identity p { margin: 0; font: inherit; font-size: .75rem; line-height: 1.5; }
.conversation-identity h1 { font-weight: 600; }
.conversation-identity p { color: var(--poto-glass-muted); }
.conversation-copy { margin: 0; color: var(--poto-paper); text-align: left; font-family: 'Poto Display', Georgia, serif; font-size: var(--conversation-fitted-type, var(--conversation-type)); font-weight: 300; font-synthesis: none; font-kerning: none; letter-spacing: -.015em; line-height: var(--conversation-line); cursor: default; }
.intro-card[data-conversation-font='fallback'] .conversation-copy { font-family: Arial, Helvetica, sans-serif; }
.conversation-words { display: block; }
/* Lay out the whole line once, then reveal opacity; typing cannot rewrap it. */
.conversation-word { white-space: nowrap; }
.conversation-letter { opacity: 0; transition: opacity var(--conversation-letter) linear; }
.conversation-letter.is-visible { opacity: 1; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--poto-space-sm); margin-top: var(--poto-space-md); }
.poto-button, .preview-controls button { display: inline-flex; align-items: center; justify-content: center; gap: var(--poto-space-sm); min-height: var(--poto-control-height); padding: 0 var(--poto-space-md); border: 1px solid var(--poto-glass-line); border-radius: var(--poto-control-radius); background: rgb(170 205 235 / .07); color: var(--poto-paper); font: inherit; font-size: .75rem; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background var(--poto-fast), border-color var(--poto-fast); }
.poto-button:hover, .preview-controls button:hover { background: rgb(170 205 235 / .16); border-color: var(--poto-glass-muted); }
.poto-button:active, .preview-controls button:active { background: rgb(170 205 235 / .22); }
.intro-actions .poto-button { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: calc(var(--poto-control-height) / 2 + var(--poto-space-xs)); min-height: calc(var(--poto-control-height) + var(--poto-space-xs)); padding: 0 var(--poto-space-lg); background: rgb(16 40 64 / .62); box-shadow: inset 0 1px 1px rgb(230 245 255 / .38), inset 0 -1px 1px rgb(8 20 35 / .4), 0 4px 12px rgb(5 18 34 / .16); backdrop-filter: blur(var(--poto-glass-blur)); -webkit-backdrop-filter: blur(var(--poto-glass-blur)); transition: background var(--poto-fast), box-shadow var(--poto-fast), transform var(--poto-fast) var(--poto-ease); }
.intro-actions .poto-button:hover, .intro-actions .poto-button:focus-visible { background: rgb(50 86 119 / .72); box-shadow: inset 0 1px 1px rgb(230 245 255 / .7), 0 6px 16px rgb(5 18 34 / .22); transform: translateY(-1px); }
.intro-actions .poto-button:active { transform: scale(.98); }
/* About: a pearly lens with a slow, diffuse hover bloom, no sweeping line. */
.intro-actions .about-capsule { color: var(--poto-paper); font-weight: 600; background: linear-gradient(145deg, rgb(216 238 255 / .32), rgb(89 135 177 / .12)), rgb(18 44 70 / .84); box-shadow: inset 0 1px 1px rgb(246 251 255 / .8), inset 0 -1px 1px rgb(12 30 49 / .5), 0 8px 24px rgb(5 18 34 / .28); transition: background var(--conversation-settle), box-shadow var(--conversation-settle), transform var(--poto-fast) var(--poto-ease); }
.about-capsule::before, .about-capsule::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; }
.about-capsule::before { background: radial-gradient(ellipse at 25% 0%, rgb(220 241 255 / .26), transparent 65%), radial-gradient(ellipse at 85% 100%, rgb(117 156 201 / .28), transparent 70%); }
.about-capsule::after { background: radial-gradient(ellipse at 50% 65%, rgb(220 241 255 / .38), transparent 75%); opacity: 0; transform: scale(.65); transition: opacity var(--conversation-dream) ease, transform var(--conversation-dream) var(--poto-ease); }
.intro-actions .about-capsule:is(:hover, :focus-visible) { background-color: rgb(25 53 79 / .9); box-shadow: inset 0 1px 1px rgb(246 251 255 / .9), inset 0 -1px 1px rgb(109 158 199 / .36), 0 10px 28px rgb(5 18 34 / .3); }
.about-capsule:is(:hover, :focus-visible)::after { opacity: 1; transform: scale(1.35); }
.about-capsule .action-icon { transition-duration: var(--conversation-settle); }
[data-landscape-mode='day'] .intro-card { --conversation-lens: rgb(16 42 67 / .84); --conversation-glint: rgb(231 246 255 / .19); }
.action-icon, .close-icon, .theme-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms var(--poto-ease); }
.theme-controls .poto-button:is(:hover, :focus-visible) .sun-ray { animation: poto-sun-ray var(--poto-fast) var(--poto-ease) both; animation-delay: calc(var(--ray) * var(--poto-fast) / 8); }
.theme-controls .poto-button:is(:hover, :focus-visible) .moon-icon { animation: poto-moon var(--poto-reveal) var(--poto-ease); }
@keyframes poto-sun-ray { from { opacity: 0; } to { opacity: 1; } }
@keyframes poto-sound-wave { from { opacity: 0; } to { opacity: 1; } }
@keyframes poto-moon { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }
.poto-button:hover .action-icon, .poto-button:focus-visible .action-icon { transform: translate(2px, -2px); }
.icon-button { width: var(--poto-control-height); padding: 0; flex-shrink: 0; }
.icon-button:hover .close-icon { transform: rotate(90deg); }
.content-panel { position: absolute; z-index: 6; right: var(--poto-space-xl); top: 7.25rem; bottom: 5.5rem; width: min(var(--poto-panel-width), calc(100% - 4rem)); padding: var(--poto-space-xl); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--poto-blue-light) transparent; border: 1px solid var(--poto-glass-line); border-radius: var(--poto-card-radius); background: rgb(8 24 43 / .85); box-shadow: var(--poto-shadow); backdrop-filter: blur(var(--poto-glass-blur)); -webkit-backdrop-filter: blur(var(--poto-glass-blur)); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--poto-space-md); margin-bottom: var(--poto-space-lg); }
.panel-heading h2 { margin: 0; font-family: 'Poto Display', Georgia, serif; font-size: 2.75rem; font-weight: 300; line-height: 1.05; }
.content-panel p { color: var(--poto-glass-muted); font-size: .875rem; line-height: 1.7; margin: 0 0 var(--poto-space-lg); }
.content-panel h3 { margin: var(--poto-space-xl) 0 var(--poto-space-sm); font-size: 1rem; font-weight: 400; }
.content-panel .panel-lead { font-size: 1.125rem; color: var(--poto-paper); line-height: 1.5; }
.content-panel .panel-note { font-size: .75rem; }
.content-panel .poto-button { margin-bottom: var(--poto-space-md); }
.study-list { display: grid; gap: var(--poto-space-lg); }
.study-list figure { margin: 0; }
.study-list img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--poto-control-radius); }
.study-list figcaption { color: var(--poto-glass-muted); font-size: .75rem; line-height: 1.5; margin-top: var(--poto-space-sm); }
.content-panel details { border-top: 1px solid var(--poto-glass-line); padding: var(--poto-space-md) 0; }
.content-panel details summary { display: block; min-height: var(--poto-control-height); cursor: pointer; font-size: .9375rem; }
.content-panel details summary::marker { content: ''; }
.content-panel details p { margin-bottom: 0; }
.is-opening .poto-header { opacity: 0; transform: translateY(-.5rem); pointer-events: none; }
.is-opening .intro-card { opacity: 0; transform: translate(-50%, calc(var(--conversation-height) / -2 + var(--poto-space-md))); pointer-events: none; }
.has-intro-ended .career-years { opacity: 0; filter: blur(4px); }
.has-intro-ended .intro-card { transition-delay: 250ms; }
.is-panel-open .intro-card { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.preview-controls { position: fixed; z-index: 7; bottom: max(var(--poto-space-lg), env(safe-area-inset-bottom)); left: var(--poto-space-xl); display: flex; align-items: center; gap: var(--poto-space-sm); color: var(--poto-paper); }
.preview-controls button { background: rgb(8 24 43 / .70); backdrop-filter: blur(12px); font-size: .6875rem; }
.preview-controls button:disabled, .preview-controls input:disabled { opacity: .45; cursor: default; }
.motion-settings > summary { display: flex; align-items: center; min-height: var(--poto-control-height); padding: 0 var(--poto-space-md); border: 1px solid var(--poto-glass-line); border-radius: var(--poto-control-radius); background: rgb(8 24 43 / .70); backdrop-filter: blur(12px); font-size: .6875rem; cursor: pointer; list-style: none; }
.motion-settings > summary::-webkit-details-marker { display: none; }
.motion-settings > summary:hover { background: var(--poto-glass); }
.motion-settings-panel { position: absolute; bottom: calc(100% + var(--poto-space-sm)); left: 0; width: var(--poto-settings-width); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 8rem); overflow-y: auto; padding: var(--poto-space-lg); border: 1px solid var(--poto-glass-line); border-radius: var(--poto-card-radius); background: rgb(8 24 43 / .95); }
.settings-title { margin: 0 0 var(--poto-space-md); font-size: .625rem; letter-spacing: .08em; }
.motion-settings-panel label { display: flex; justify-content: space-between; font-size: .8125rem; }
.motion-settings-panel output { font-size: .75rem; color: var(--poto-glass-muted); font-variant-numeric: tabular-nums; }
.motion-settings-panel input { display: block; width: 100%; margin: .75rem 0 var(--poto-space-md); accent-color: var(--poto-blue-light); }
.view-help, .ring-status { margin: 0 0 var(--poto-space-md); color: var(--poto-glass-muted); font-size: .75rem; line-height: 1.5; }
.ring-status { margin: var(--poto-space-sm) 0 0; font-size: .6875rem; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-script { position: fixed; bottom: var(--poto-space-lg); right: var(--poto-space-lg); font-size: .75rem; }
@media (max-width: 900px) {
  .content-panel { top: calc(var(--poto-control-height) * 4 + var(--poto-space-lg) + var(--poto-space-md)); width: min(26rem, calc(100% - 4rem)); }
}
@media (max-width: 600px) {
  .loading-stage { min-height: 36rem; }
  .poto-header { top: var(--poto-space-md); left: var(--poto-space-md); right: var(--poto-space-md); }
  .wordmark-logo { height: calc(var(--poto-space-xl) * .66); }
  .header-meta { flex-direction: column; align-items: flex-end; gap: var(--poto-space-xs); }
  .scene-controls { flex-direction: column; align-items: flex-end; }
  .main-nav a { font-size: .75rem; }
  .landscape { object-position: 50% bottom; }
  .career-years { top: 46%; }
  .intro-card { --conversation-type: 1.625rem; --conversation-top: calc(var(--poto-control-height) * 4 + var(--poto-space-xl)); --conversation-actions-height: calc(var(--poto-control-height) + var(--poto-space-md)); --conversation-total-height: calc(var(--conversation-height) + var(--conversation-actions-height)); top: max(var(--conversation-top), calc((100dvh - var(--conversation-height)) / 2)); width: calc(100% - var(--poto-space-md) * 2); transform: translate(-50%, 0); }
  .is-opening .intro-card { transform: translate(-50%, var(--poto-space-md)); }
  .conversation-glass { padding: var(--poto-space-md); }
  .conversation-content { width: 100%; }
  .conversation-identity { gap: var(--poto-space-xs); margin-bottom: var(--poto-space-md); }
  .conversation-identity h1, .conversation-identity p { font-size: .6875rem; }
  .intro-actions .poto-button { padding: 0 var(--poto-space-md); }
  .content-panel { top: 41%; bottom: 5rem; left: var(--poto-space-md); right: var(--poto-space-md); width: auto; padding: var(--poto-space-lg); }
  .panel-heading h2 { font-size: 2.25rem; }
  .preview-controls { left: var(--poto-space-md); right: var(--poto-space-md); bottom: max(var(--poto-space-lg), env(safe-area-inset-bottom)); gap: var(--poto-space-sm); }
  .preview-controls button, .motion-settings > summary { padding: 0 .75rem; }
}
/* Narrow phones need a vertical lighting group to keep the approved 80px logo/nav gap. */
@media (max-width: 22rem) {
  .theme-controls { flex-direction: column; }
  .intro-card { --conversation-actions-height: calc(var(--poto-control-height) * 2 + var(--poto-space-md) + var(--poto-space-sm) + var(--poto-space-xs)); }
  .intro-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .intro-actions .poto-button { justify-content: center; }
}
/* Short phones keep one centered glass surface clear of header and settings. */
@media (max-width: 600px) and (max-height: 700px) {
  .intro-card { top: max(var(--conversation-top), calc((100dvh - var(--conversation-total-height)) / 2)); }
}
@media (max-width: 22rem) {
  .intro-card { --conversation-type: 1.5rem; }
}
@media (max-width: 22rem) and (max-height: 700px) {
  .intro-card { --conversation-type: 1.25rem; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .poto-header { top: var(--poto-space-md); }
  .conversation-glass { padding: var(--poto-space-md); }
  .content-panel { top: 6rem; bottom: 5rem; }
}
@media (max-height: 650px) and (min-width: 601px) and (max-width: 900px) {
  .content-panel { top: calc(var(--poto-control-height) * 4 + var(--poto-space-md) * 2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .action-icon, .close-icon { transform: none !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
.reduce-motion .action-icon, .reduce-motion .close-icon { transform: none !important; }

/* Decode over fixed final glyph widths so the greeting never changes layout. */
.conversation-letter.is-decoding { position:relative; display:inline-block; color:transparent; transition:none; }
.conversation-letter.is-decoding::after { content:attr(data-glyph); position:absolute; inset:0; color:var(--poto-paper); opacity:.55; text-align:center; font-family:monospace; }