/* Smart Recall demo: one scene, glass over sky and grass. Everything outside the stage stays quiet. */
.dm-stage { position: relative; margin: 8px auto 0; max-width: 940px; aspect-ratio: 16 / 10; min-height: 470px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 38% 42% at 14% 8%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #4fb2ec 0%, #8fd0f5 46%, #d4f0fb 78%, #e9f8ee 100%);
  box-shadow: 0 18px 40px rgba(11,63,115,.28), inset 0 0 0 1px rgba(255,255,255,.65); }
.dm-rays { position: absolute; inset: -30%; z-index: 0; pointer-events: none; opacity: .16; mix-blend-mode: soft-light;
  background: repeating-conic-gradient(from 195deg at 14% 6%, rgba(255,255,255,.9) 0 3deg, rgba(255,255,255,0) 3deg 11deg); }
.dm-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 1; pointer-events: none; }
#dm-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* the file window */
.dm-win { position: absolute; z-index: 2; left: 5%; top: 9%; width: 61%; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(214,238,250,.42));
  border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 12px 28px rgba(11,63,115,.25), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -18px 30px rgba(255,255,255,.18); }
.dm-win::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.dm-title { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font: 700 12px var(--font-ui); color: var(--deep-water);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(150,205,240,.5)); border-bottom: 1px solid rgba(76,155,214,.35); text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.dm-title span:last-child { font-weight: 400; opacity: .8; }
.dm-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.dm-tile { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border: 1px solid rgba(255,255,255,.0); border-radius: 10px; background: transparent; cursor: pointer;
  font: 11px/1.25 var(--font-web); color: var(--deep-water); text-align: center; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.dm-tile svg { width: 44px; height: 44px; filter: drop-shadow(0 3px 3px rgba(11,63,115,.25)); }
.dm-tile span { overflow-wrap: anywhere; max-width: 100%; }
.dm-tile:hover, .dm-tile:focus-visible { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.8); transform: translateY(-2px); outline: none; }
.dm-tile:focus-visible { box-shadow: 0 0 0 2px #27c7dc; }
/* the engine's ring: it sits on the file before you get there */
.dm-tile.ready { background: radial-gradient(circle at 50% 38%, rgba(39,199,220,.30), rgba(39,199,220,.06) 70%); border-color: rgba(39,199,220,.9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 18px rgba(39,199,220,.75), 0 0 36px rgba(39,199,220,.35); }
.dm-tile.ready::after { content: "ready"; position: absolute; top: -9px; right: 6px; padding: 1px 7px; border-radius: 9px; font: 700 10px var(--font-ui); color: #04465a;
  background: linear-gradient(180deg, #c6f4f9, #6ad9e8); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 2px 4px rgba(11,63,115,.25); }
.dm-tile.opened { background: linear-gradient(180deg, rgba(180,238,150,.5), rgba(120,205,95,.35)); border-color: rgba(63,174,58,.9); transform: scale(1.04); }
.dm-status { position: relative; padding: 8px 14px 11px; font: 12.5px var(--font-web); color: var(--deep-water); min-height: 1.4em; }

/* the engine panel */
.dm-eng { position: absolute; z-index: 2; right: 4%; top: 9%; width: 25%; border-radius: 12px; overflow: hidden; font: 11px/1.55 var(--font-mono); color: #d9f6ff;
  background: linear-gradient(180deg, rgba(8,46,84,.66), rgba(8,46,84,.82)); border: 1px solid rgba(160,225,250,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 28px rgba(11,63,115,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.dm-eng .dm-title { background: linear-gradient(180deg, rgba(120,200,240,.4), rgba(60,140,200,.35)); color: #eaf9ff; text-shadow: none; border-bottom-color: rgba(160,225,250,.35); }
.dm-tally { padding: 8px 12px 2px; font: 700 12px var(--font-ui); color: #bff5ff; }
.dm-tally b { font-size: 20px; color: #fff; }
.dm-read { padding: 4px 12px 0; opacity: .85; }
.dm-log { margin: 0; padding: 6px 12px 10px; white-space: pre-wrap; min-height: 9.2em; }
.dm-log i { font-style: normal; color: #7be3f0; }

.dm-note { max-width: 640px; margin: 22px auto 6px; padding: 0 16px; font: 13.5px/1.7 var(--font-web); color: var(--ink); }
.dm-note h2 { font: 700 16px var(--font-ui); color: var(--deep-water); margin: 0 0 6px; }
.dm-note p { margin: 0 0 8px; }
.dm-note .gel { text-decoration: none; display: inline-block; cursor: pointer; }

html[data-night] .dm-stage { background: radial-gradient(ellipse 34% 40% at 14% 8%, rgba(190,225,255,.5), rgba(190,225,255,0) 70%), linear-gradient(180deg, #0b2447 0%, #15427a 52%, #1d5f8f 82%, #1d4a52 100%); }
html[data-night] .dm-win { background: linear-gradient(180deg, rgba(150,200,240,.28), rgba(40,90,150,.28)); border-color: rgba(190,225,255,.5); }
html[data-night] .dm-title, html[data-night] .dm-tile, html[data-night] .dm-status { color: #e4f4fb; text-shadow: none; }

@media (max-width: 800px) {
  .dm-stage { aspect-ratio: auto; display: grid; gap: 12px; padding: 14px; min-height: 0; }
  .dm-win, .dm-eng { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .dm-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 6px; }
  .dm-tile { font-size: 10px; padding: 8px 2px 6px; }
  .dm-hills { height: 30%; }
}
@media (prefers-reduced-motion: reduce) { .dm-tile { transition: none; } }