/* App shell (shell owner). Tokens come from tokens.css; no raw colours or sizes outside the token scale. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); }
body { font-family: var(--font); color: var(--text); }
#viewport { position: fixed; inset: 0; background: var(--bg); overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
#stage.idle { cursor: none; }

/* scenes: stacked, cross-faded */
#stage > .scene { opacity: 0; pointer-events: none; z-index: 1; transition: opacity var(--t-med) ease; }
#stage > .scene.active { opacity: 1; pointer-events: auto; z-index: 2; }

/* placeholder card (scene missing or failed to load) */
.ph-card { position: absolute; left: 320px; top: 214px; width: 640px; box-sizing: border-box; padding: 36px 40px;
           background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; }
.ph-card .ph-title { margin: 0; font-size: var(--fs-l); font-weight: 600; line-height: 1.2; color: var(--text); }
.ph-card .ph-name { margin: 12px 0 0; font-size: var(--fs-m); font-weight: 500; color: var(--text-2); }
.ph-card .ph-step { margin: 24px 0 0; font-size: var(--fs-min); color: var(--text-3); }
.ph-card .ph-note { margin: 8px 0 0; font-size: var(--fs-min); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* scene tracker: bottom right, inside x >= 1040 (scene footers keep that area free) */
#tracker { position: absolute; right: var(--margin-x); bottom: 10px; width: 192px; z-index: 20; text-align: right;
           transition: opacity var(--t-med) ease; }
#tracker.off { opacity: 0; pointer-events: none; }
#tracker-label { font-size: var(--fs-min); font-weight: 500; line-height: 24px; color: var(--text-2);
                 white-space: nowrap; }
#tracker-label .k-num { font-family: var(--font-display); font-weight: 600; color: var(--accent); margin-right: 6px; }
#tracker-label .k-sep { display: none; }
/* scene marks drawn as short rain ticks (one per scene); the current scene is the long dark one */
#tracker-dots { display: flex; justify-content: flex-end; align-items: center; gap: 9px; height: 24px; margin-top: 2px; }
#tracker-dots i { box-sizing: border-box; display: block; width: 3px; height: 14px; border-radius: 1px; cursor: pointer;
                  background: var(--axis); transform: skewX(-8deg); transition: all var(--t-fast) ease; }
#tracker-dots i.done { background: var(--text-3); }
#tracker-dots i.cur { height: 22px; background: var(--accent); }

/* help overlay */
#help { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--bg) 82%, transparent); opacity: 0; pointer-events: none;
        transition: opacity var(--t-fast) ease; }
#help.open { opacity: 1; pointer-events: auto; }
.help-panel { width: 640px; padding: 28px 36px 32px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; }
.help-panel h2 { margin: 0 0 18px; font-size: var(--fs-m); font-weight: 600; color: var(--text); }
.help-panel dl { display: grid; grid-template-columns: 230px 1fr; row-gap: 12px; column-gap: 20px; margin: 0; align-items: baseline; }
.help-panel dt { font-size: var(--fs-s); color: var(--text); white-space: nowrap; }
.help-panel dd { margin: 0; font-size: var(--fs-s); color: var(--text-2); }
kbd { display: inline-block; min-width: 14px; padding: 1px 8px; font: inherit; font-size: var(--fs-min); font-weight: 600; text-align: center;
      color: var(--text); background: var(--bg); border: 1px solid var(--axis); border-radius: 5px; }

/* toast */
#toast { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 45; padding: 8px 18px;
         font-size: var(--fs-s); color: var(--text); background: var(--panel); border: 1px solid var(--panel-line);
         border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) ease; white-space: nowrap; }
#toast.on { opacity: 1; }