/* MerlinXSL clickthrough demo — the real screens in a boxed browser frame (inside .wrap). */

.demo-intro { padding-bottom:clamp(20px,3vw,32px); }
.demo-intro .h-detail { font-size:clamp(40px,6vw,84px); }
.demo { padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--line); }

/* ---------- guide ---------- */
.tour { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px 18px; align-items:center;
  padding:14px 18px 18px; margin-bottom:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.tour-count { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.tour-text { margin:0; font-size:15px; line-height:1.45; text-wrap:pretty; min-height:2.9em; display:flex; align-items:center; flex-wrap:wrap; gap:0 .35em; }
.tour-text b { font-family:var(--serif); font-weight:500; font-size:19px; }
.tour-acts { display:flex; flex-wrap:wrap; gap:8px; }
.tour-btn { padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:500 14px 'Instrument Sans', system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
.tour-btn:hover { border-color:var(--ink); }
.tour-btn.primary { background:var(--accent); border-color:var(--accent); color:var(--btnFg); font-weight:600; }
.tour-btn:disabled { opacity:.45; cursor:default; border-color:var(--line); }
.tour-bar { position:absolute; inset:auto 0 0 0; height:3px; background:var(--tint); border-radius:0 0 var(--r) var(--r); overflow:hidden; }
.tour-bar > div { height:100%; width:0; background:var(--accent); transition:width .3s; }
@media (max-width:860px) { .tour { grid-template-columns:1fr; } }

/* ---------- browser frame ---------- */
.click-layer { position:absolute; inset:0; cursor:default; }
.hotspot { position:absolute; z-index:2; padding:0; border:2px solid var(--accent); border-radius:8px; background:rgba(234,88,12,.08); cursor:pointer;
  box-shadow:0 0 0 0 rgba(234,88,12,.45); animation:hsPulse 1.6s ease-in-out infinite; }
.hotspot:hover { background:rgba(234,88,12,.16); }
.hotspot:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.hotspot.nudge { animation:hsNudge .45s ease-in-out 2, hsPulse 1.6s ease-in-out .9s infinite; }
@keyframes hsPulse { 0%,100% { box-shadow:0 0 0 0 rgba(234,88,12,.45); } 50% { box-shadow:0 0 0 10px rgba(234,88,12,0); } }
@keyframes hsNudge { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
.reduced .hotspot, .reduced .hotspot.nudge { animation:none; }
.reduced .screen-frame { transition:none; }
.demo-note { margin:12px 0 0; font-size:12.5px; color:var(--muted); }