/* Diffusion Poetry (play/poetry.html) and the Play page's card art. Uses the tokens from site.css.
   Frost on dark glass: a quiet serif on a blue-black pane. A masked word is its real word in transparent ink
   with glyph noise drawn over it from data-n, so the width is right and nothing moves when it settles. */
.dp-body { background: #070b10; }
.dp-stage { --frost: #eef3f6; --frost-dim: rgba(168, 205, 232, 0.46); --frost-near: rgba(198, 224, 242, 0.72); --glass-line: rgba(180, 210, 235, 0.16);
  padding-block: clamp(28px, 6vw, 72px) 40px;
  background: radial-gradient(ellipse 80% 60% at 30% 10%, rgba(110, 160, 205, 0.12), rgba(7, 11, 16, 0) 70%), #070b10; }
.dp-stage [hidden] { display: none !important; }
.dp-wrap { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.dp-kicker { color: #9cc6e6; margin: 0; }
.dp-wrap h1 { font-weight: 300; font-size: var(--step-3); letter-spacing: -0.025em; margin: 0; }
.dp-lede { color: #cfd8de; font-size: var(--step-1); line-height: 1.5; max-width: 40ch; margin: 0; }

/* begin with a word */
.dp-begin { display: grid; gap: 10px; }
.dp-begin-label, .dp-link-label { font-family: var(--font-data); font-size: var(--step--1); color: #c6d3dc; }
.dp-begin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dp-input { flex: 1 1 220px; min-width: 0; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(198, 224, 242, 0.35); background: rgba(10, 16, 23, 0.8);
  color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); }
.dp-input::placeholder { color: #8796a2; }
.dp-input:focus-visible { outline: 2px solid #9cc6e6; outline-offset: 2px; }
.dp-begin .btn, .dp-controls .btn, .dp-freeze-actions .btn { min-height: 46px; cursor: pointer; }
.dp-begin .btn.primary, .dp-controls .btn.primary, .dp-freeze-actions .btn.primary { background: var(--frost); border-color: var(--frost); color: #071018; }
@media (hover: hover) and (pointer: fine) { .dp-stage .btn.primary:hover { background: #bfe0f7; border-color: #bfe0f7; } .dp-stage .btn:hover { border-color: #9cc6e6; } }
.dp-stage .btn:focus-visible, .dp-stage .chip:focus-visible { outline: 2px solid #9cc6e6; outline-offset: 2px; }
.dp-stage .btn:disabled { opacity: 0.45; cursor: default; }
.dp-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-ideas .chip { font-family: var(--font-data); font-size: 0.85rem; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(198, 224, 242, 0.28);
  background: transparent; color: #cfd8de; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .dp-ideas .chip:hover { border-color: #9cc6e6; color: var(--frost); } }

/* the pane of glass */
.dp-glass { position: relative; margin-top: 10px; padding: clamp(26px, 5vw, 56px) clamp(18px, 5vw, 64px) clamp(22px, 4vw, 40px); border: 1px solid var(--glass-line); border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .8  0 0 0 0 .9  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(160, 200, 232, 0.08), rgba(160, 200, 232, 0.015) 55%, rgba(160, 200, 232, 0.05));
  box-shadow: inset 0 1px 0 rgba(220, 238, 250, 0.08), 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.dp-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity 1.6s ease;
  background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(210, 232, 248, 0.10), transparent 70%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(210, 232, 248, 0.08), transparent 70%); }
.dp-glass.is-settled::before { opacity: 0.55; }
.dp-title { position: relative; margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--step-1); color: #dbe8f0; min-height: 1.4em; }
.dp-poem { position: relative; font-family: var(--font-body); font-size: clamp(1.28rem, 2.7vw, 1.85rem); line-height: 1.75; color: var(--frost); font-weight: 400; }
.dp-line { display: flex; align-items: baseline; gap: 10px; }
.dp-words { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.dp-source { position: relative; margin: 22px 0 0; font-family: var(--font-data); font-size: var(--step--2); color: #a8b8c4; }

/* tokens */
.dp-tok, .dp-title { position: relative; }
.dp-tok { border-radius: 3px; outline: none; }
.dp-tok.is-noise, .dp-title.is-noise { color: transparent; }
.dp-tok.is-noise::after, .dp-title.is-noise::after { content: attr(data-n); position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; white-space: nowrap; line-height: normal;
  color: var(--frost-dim); text-shadow: 0 0 8px rgba(150, 200, 240, 0.45); font-style: italic; animation: dp-shimmer 1.8s ease-in-out infinite alternate; }
.dp-tok.is-near::after { color: var(--frost-near); text-shadow: 0 0 10px rgba(190, 225, 255, 0.55); font-style: normal; }
.dp-tok:nth-child(3n)::after { animation-delay: -0.6s; }
.dp-tok:nth-child(3n+1)::after { animation-delay: -1.2s; }
.dp-tok.is-set, .dp-title.is-set { animation: dp-settle 1.1s var(--ease-out) both; }
.dp-tok.is-ctx.is-set { animation: none; }
.dp-tok[role="button"].is-set { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .dp-tok[role="button"].is-set:hover { text-decoration: underline dotted rgba(198, 224, 242, 0.55); text-underline-offset: 0.2em; } }
.dp-tok[role="button"]:focus-visible { box-shadow: 0 0 0 2px #9cc6e6; }
@keyframes dp-shimmer { from { opacity: 0.45; } to { opacity: 0.95; } }
@keyframes dp-settle { from { opacity: 0; filter: blur(7px); text-shadow: 0 0 24px rgba(200, 232, 255, 0.95); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); text-shadow: 0 0 0 rgba(200, 232, 255, 0); } }

.dp-redo { flex: none; width: 36px; height: 36px; margin: 0 -8px 0 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: #9cc6e6; font-size: 1.05rem; line-height: 1;
  cursor: pointer; opacity: 0.5; padding: 0; touch-action: manipulation; align-self: center; }
@media (hover: hover) and (pointer: fine) { .dp-redo { opacity: 0.22; } .dp-line:hover .dp-redo { opacity: 0.8; } .dp-redo:hover { border-color: rgba(198, 224, 242, 0.4); } }
.dp-redo:focus-visible { opacity: 1; outline: 2px solid #9cc6e6; outline-offset: 1px; }
.dp-tip { margin: -6px 0 0; font-family: var(--font-data); font-size: var(--step--1); color: #a8b8c4; }

/* controls */
.dp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dp-scrub { flex: 1 1 240px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.dp-range { flex: 1; min-width: 0; height: 44px; accent-color: #cfe4f3; cursor: pointer; background: transparent; }
.dp-range:focus-visible { outline: 2px solid #9cc6e6; outline-offset: 2px; }
.dp-step-out { font-family: var(--font-mono); font-size: var(--step--1); color: #dbe8f0; white-space: nowrap; min-width: 9.5ch; }
.dp-play { min-width: 7.5em; justify-content: center; }
.dp-status { margin: 0; min-height: 1.4em; font-family: var(--font-data); font-size: var(--step--1); color: #c6d3dc; }
@media (max-width: 600px) {
  .dp-scrub { order: -1; flex-basis: 100%; }
  .dp-controls .btn { flex: 1 1 auto; justify-content: center; padding-inline: 14px; }
  .dp-line { gap: 4px; }
  .dp-glass { padding: 24px 12px 20px 18px; }
  .dp-poem { font-size: 1.14rem; line-height: 1.7; }
  .dp-redo { width: 32px; height: 32px; margin-right: 0; }
}

/* the frozen card */
.dp-locked { overflow: hidden; }
.dp-freeze { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(4, 7, 10, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dp-freeze-in { width: min(100%, 480px); display: flex; flex-direction: column; gap: 12px; background: #0c131a; border: 1px solid var(--glass-line); border-radius: 8px; padding: clamp(18px, 4vw, 28px); }
.dp-freeze-in .label { color: #9cc6e6; margin: 0; }
.dp-freeze-in h2 { margin: 0; font-weight: 300; font-size: var(--step-2); }
.dp-card-canvas { --cw: min(calc(100vw - 74px), 44vh, 420px); align-self: center; flex: none; width: var(--cw); height: calc(var(--cw) * 1.25); border-radius: 4px; border: 1px solid var(--glass-line); background: #05080c; }
.dp-link { font-family: var(--font-mono); font-size: var(--step--2); flex: none; width: 100%; }
.dp-freeze-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-freeze-actions .btn { flex: 1 1 auto; justify-content: center; }

/* how it works */
.dp-about { padding-block: 64px 48px; background: #070b10; border-top: 1px solid var(--rule); }
.dp-about .label { color: #9cc6e6; }
.dp-about h2 { font-weight: 300; font-size: var(--step-2); margin: 8px 0 24px; }
.dp-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dp-about-grid h3 { font-size: var(--step-1); font-weight: 400; margin: 0 0 8px; }
.dp-about-grid p, .dp-real { color: #cfd8de; line-height: 1.6; margin: 0; }
.dp-real { margin-top: 28px; max-width: var(--measure); }
.dp-real a, .dp-back a { color: #cfe4f3; }
.dp-back { margin-top: 28px; font-family: var(--font-data); }
@media (max-width: 860px) { .dp-about-grid { grid-template-columns: 1fr; gap: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .dp-tok.is-noise::after, .dp-title.is-noise::after { animation: none; opacity: 0.8; }
  .dp-tok.is-set, .dp-title.is-set { animation: none; }
  .dp-glass::before { transition: none; }
}
@media (forced-colors: active) {
  .dp-tok.is-noise, .dp-title.is-noise { color: GrayText; }
  .dp-tok.is-noise::after, .dp-title.is-noise::after { display: none; }
}