/* Standalone dialog: outside #focus-app so rendering a card cannot dismiss it. */
.di-dialog {
  --di-blue:#2463eb; --di-ink:#172c4b; --di-muted:#66758a; --di-line:#e1e7f0; --di-paper:#fff; --di-soft:#eef4ff;
  box-sizing:border-box; width:min(540px,calc(100vw - 28px)); max-height:calc(100dvh - 28px);
  padding:26px; margin:auto; border:1px solid var(--di-line); border-radius:24px;
  background:var(--di-paper); color:var(--di-ink); box-shadow:0 24px 90px #172c4b33;
  overflow:auto; overscroll-behavior:contain; font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:14px; line-height:1.65; letter-spacing:-.025em;
}
.di-dialog *, .di-dialog *::before, .di-dialog *::after { box-sizing:border-box; }
.di-dialog::backdrop { background:#172c4b66; backdrop-filter:blur(3px); }
.di-dialog [hidden] { display:none!important; }
.di-dialog :is(button,a,summary):focus-visible { outline:3px solid #79a2ff; outline-offset:3px; }
.di-dialog :is(button,h2,h3,p) { word-break:keep-all; overflow-wrap:anywhere; }
.di-dialog button { min-height:44px; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.di-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.di-kicker { display:block; color:var(--di-blue); font-size:11px; font-weight:700; margin-bottom:5px; }
.di-dialog .di-heading h2 { font-size:22px; line-height:1.45; font-weight:800; margin:0; letter-spacing:-.04em; color:var(--di-ink); }
.di-dialog .di-close { display:grid; place-items:center; flex:0 0 44px; width:44px; padding:10px; margin:-6px -8px 0 0; border:0; background:transparent; color:var(--di-muted); border-radius:12px; }
.di-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.di-close:hover { background:var(--di-soft); }
.di-dialog .di-subtitle { color:var(--di-muted); font-size:12px; margin:12px 0 18px; line-height:1.7; }
.di-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.di-dialog .di-steps button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; padding:8px 5px; border:0; border-radius:10px; color:var(--di-muted); background:transparent; font-size:12px; font-weight:600; }
.di-steps button > span { display:grid; place-items:center; width:19px; height:19px; flex:0 0 19px; border-radius:6px; background:#f1f4f8; font-size:10px; }
.di-dialog .di-steps [aria-current=step] { background:var(--di-soft); color:var(--di-blue); }
.di-steps [aria-current=step] > span { background:var(--di-blue); color:#fff; }
.di-progress { height:3px; background:var(--di-line); border-radius:3px; overflow:hidden; margin:12px 0 6px; }
.di-progress > i { display:block; height:100%; width:var(--di-progress,0%); background:var(--di-blue); }
.di-figure { margin:14px 0 22px; }
.di-figure svg { display:block; width:100%; height:auto; overflow:visible; }
.di-figure text { fill:var(--di-muted); font:11px system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; letter-spacing:0; }
.di-figure .di-graph-title { fill:var(--di-ink); font-weight:700; }
.di-grid { fill:none; stroke:var(--di-line); stroke-width:1; }
.di-sample rect, .di-calendar { fill:var(--di-paper); stroke:var(--di-line); stroke-width:1.5; }
.di-paper-line { fill:none; stroke:#c9d4e5; stroke-width:3; stroke-linecap:round; }
.di-sample-dot { fill:var(--di-soft); }
.di-sample-check { fill:none; stroke:var(--di-blue); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.di-curve-muted { fill:none; stroke:#bec9da; stroke-width:2; stroke-dasharray:4 5; }
.di-curve { fill:none; stroke:var(--di-blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.di-recall-dot { fill:var(--di-blue); stroke:var(--di-paper); stroke-width:2; }
.di-days rect { fill:var(--di-soft); stroke:#c6d7fc; }
.di-day-label text { fill:var(--di-blue); text-anchor:middle; font-size:12px; font-weight:700; }
.di-dialog .di-figure figcaption { text-align:center; color:var(--di-muted); font-size:10px; margin-top:4px; }
.di-dialog .di-copy h3 { margin:0 0 10px; color:var(--di-ink); font-size:18px; line-height:1.5; letter-spacing:-.035em; font-weight:750; }
.di-dialog .di-copy p { margin:0; color:var(--di-muted); font-size:13px; line-height:1.85; }
.di-copy { min-height:134px; }
.di-sources { margin:18px 0 14px; border-top:1px solid var(--di-line); }
.di-sources summary { min-height:44px; padding:11px 0; cursor:pointer; color:var(--di-muted); font-size:12px; }
.di-dialog .di-sources p { color:var(--di-muted); font-size:12px; line-height:1.85; margin:0 0 10px; }
.di-sources a { display:block; min-height:44px; padding:10px 0; color:var(--di-blue); font-size:12px; line-height:1.6; text-underline-offset:3px; overflow-wrap:anywhere; }
.di-controls { display:flex; gap:10px; }
.di-dialog .di-play { border:1px solid var(--di-line); border-radius:12px; background:var(--di-paper); color:var(--di-muted); min-width:88px; padding:11px 12px; font-size:13px; }
.di-dialog :is(.di-next,.di-continue) { flex:1; min-width:0; min-height:48px; border:1px solid var(--di-blue); border-radius:12px; background:var(--di-blue); color:#fff; padding:12px 14px; font-size:14px; font-weight:700; }
.di-dialog .di-footnote { color:var(--di-muted); font-size:11px; line-height:1.7; text-align:center; margin:14px 0 0; }
.di-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.di-dialog[data-motion=full] .di-draw { stroke-dasharray:1; animation:di-draw 3.5s ease-out both; }
.di-dialog[data-motion=full] .di-days rect { animation:di-day 3s ease-in-out both; }
.di-dialog[data-playing=false] :is(.di-draw,.di-days rect) { animation-play-state:paused; }
@keyframes di-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes di-day { 0% { fill:var(--di-paper); } 100% { fill:var(--di-soft); } }
@media(max-width:480px) {
  .di-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:22px 18px; border-radius:20px; }
  .di-dialog .di-heading h2 { font-size:20px; }
  .di-dialog .di-copy h3 { font-size:17px; }
  .di-dialog .di-steps button { font-size:11px; gap:4px; }
  .di-figure { margin:10px 0 18px; }
  .di-copy { min-height:156px; }
}
@media(max-width:360px) {
  .di-dialog { padding:20px 16px; }
  .di-dialog .di-heading h2 { font-size:19px; }
  .di-dialog .di-steps button { flex-direction:column; gap:4px; padding:7px 3px; }
  .di-dialog .di-play { min-width:76px; padding:11px 9px; font-size:12px; }
  .di-dialog .di-continue { font-size:12px; padding:11px 9px; }
}
html[data-theme=dark] .di-dialog { --di-blue:#8bafff; --di-ink:#e9eff9; --di-muted:#a5b3c8; --di-line:#30405a; --di-paper:#18263b; --di-soft:#223553; }
html[data-theme=dark] .di-dialog :is(.di-next,.di-continue), html[data-theme=dark] .di-steps [aria-current=step] > span { color:#101a2a; }
html[data-theme=dark] .di-steps button > span { background:#223553; }
@media(prefers-reduced-motion:reduce) {
  .di-dialog *, .di-dialog *::before, .di-dialog *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.di-dialog[data-motion=reduced] *, .di-dialog[data-motion=reduced] *::before, .di-dialog[data-motion=reduced] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }