/* vaporos-tour.css — shared furniture for the walkthroughs built on
 * vaporos-tour.js: the world, the camera's pointer and keycaps, annotations
 * and side panels. Section-specific drawing lives beside each section's script.
 *
 * Sizes here are in desktop pixels: the world is laid out at 1920×1000 and the
 * camera scales it. Every transition is behind prefers-reduced-motion.
 */
.t-world{position:absolute;left:0;top:0;transform-origin:0 0;font:13px/1.35 "VaporBar",ui-monospace,monospace;color:#cdd6f4;-webkit-font-smoothing:antialiased;user-select:none;overflow:hidden}
.t-wall{position:absolute;inset:0;background:
  radial-gradient(40% 55% at 18% 22%,#cba6f75c,transparent 70%),
  radial-gradient(35% 45% at 82% 18%,#74c7ec4a,transparent 70%),
  radial-gradient(45% 60% at 70% 85%,#94e2d53d,transparent 70%),
  linear-gradient(160deg,#27213d,#141421 60%,#11111b)}
.t-wall::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff05 0 2px,transparent 2px 9px)}

/* a window, the way the compositor draws one */
.t-win{position:absolute;border-radius:10px;border:2px solid #45475a;background:#1e1e2ef2;box-shadow:0 12px 34px #0000008a;overflow:hidden}
.t-win.focus{border-color:var(--wc,#cba6f7)}
.t-win>header{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;background:#181825;color:#a6adc8;font-size:14px;white-space:nowrap;overflow:hidden}
.t-win>header b{font-weight:400;color:var(--wc,#cba6f7);font-size:16px}
.t-win .ln{display:block;height:9px;margin:14px 16px 0;border-radius:5px;background:#cdd6f41a}
.t-win .ln.hi{background:color-mix(in srgb,var(--wc,#cba6f7) 45%,transparent);width:36%}
.t-win .ln.s{width:58%}
.t-win .ln.m{width:76%}

/* a bar strip, for sections that need the bar for context */
.t-bar{position:absolute;left:0;top:0;right:0;height:40px;display:flex;align-items:flex-start;gap:10px;padding:4px 3px}
.t-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;background:#1e1e2e6b;box-shadow:inset 0 0 0 1px #cdd6f412;color:#cdd6f4;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.t-pill.dim{color:#7f849c}
.t-grow{flex:1}

/* annotations, panels, keycaps, pointer */
.t-note{position:absolute;pointer-events:none;border-radius:12px;border:2px dashed rgba(245,194,231,.85);opacity:0}
.t-note.on{opacity:1}
.t-note b{position:absolute;left:0;top:100%;margin-top:8px;padding:6px 10px;border-radius:8px;background:#11111bf2;box-shadow:inset 0 0 0 1px #f5c2e766;color:#f5c2e7;font:400 13px/1.5 "VaporBar",monospace;white-space:pre}
.t-note.up b{top:auto;bottom:100%;margin:0 0 8px}
.t-note.side b{left:100%;top:0;margin:0 0 0 12px}
.t-note.inside b{left:auto;right:10px;top:50%;margin:0;transform:translateY(-50%);text-align:right}

.t-panel{position:absolute;width:520px;padding:14px 16px;border-radius:14px;background:#11111bd9;box-shadow:inset 0 0 0 1px #cdd6f41f,0 20px 50px #0008;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:13px/1.65 "VaporBar",monospace;color:#a6adc8;opacity:0}
.t-panel.on{opacity:1}
.t-panel h5{margin:0 0 8px;font:700 13px "VaporBar",monospace;color:#cdd6f4}
.t-panel h5+h5{margin-top:12px}
.t-panel ol,.t-panel ul{margin:0;padding:0;list-style:none;counter-reset:s}
.t-panel li{counter-increment:s;display:flex;gap:10px;padding:4px 8px;border-radius:8px}
.t-panel ol li::before{content:counter(s);color:#6c7086;min-width:14px}
.t-panel li.lit{background:#cdd6f414;color:#cdd6f4}
.t-panel li.ok{color:#a6e3a1}
.t-panel li.no{color:#f38ba8}
.t-panel pre{margin:0;padding:0;background:none;box-shadow:none;font:12px/1.7 "VaporBar",monospace;color:#a6adc8;white-space:pre-wrap;overflow:visible}
.t-panel b{font-weight:400;color:#cdd6f4}
.t-panel em{font-style:normal;color:#fab387}
.t-panel code{color:#a6e3a1}
.t-panel .add{color:#a6e3a1}
.t-panel .del{color:#f38ba8;text-decoration:line-through}

.t-keys{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);display:flex;gap:8px;opacity:0;transform-origin:50% 100%}
.t-keys.on{opacity:1}
.t-keys kbd{display:inline-block;min-width:44px;padding:9px 14px;border-radius:10px;background:#1e1e2ee6;box-shadow:inset 0 0 0 1px #cdd6f42e,inset 0 -3px 0 #11111b,0 8px 20px #0008;font:600 22px "VaporBar",monospace;color:#cdd6f4;text-align:center}

.t-cur{position:absolute;left:960px;top:500px;width:26px;height:30px;z-index:20;pointer-events:none;transform-origin:0 0;opacity:0}
.t-cur.on{opacity:1}
.t-cur svg{display:block;filter:drop-shadow(0 2px 3px #000a)}
.t-cur .fx{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid #a7f3d6;opacity:0}

@media(prefers-reduced-motion:no-preference){
  .t-world{transition:transform 1s cubic-bezier(.65,0,.25,1)}
  .t-world.t-snap{transition:none}
  .t-note,.t-panel{transition:opacity .25s,left .45s cubic-bezier(.2,.8,.25,1),top .45s cubic-bezier(.2,.8,.25,1),width .45s cubic-bezier(.2,.8,.25,1),height .45s cubic-bezier(.2,.8,.25,1)}
  .t-keys{transition:opacity .15s}
  .t-keys kbd.down{transform:translateY(2px);box-shadow:inset 0 0 0 1px #cdd6f42e,inset 0 -1px 0 #11111b,0 4px 10px #0008}
  .t-cur{transition:left .6s cubic-bezier(.45,0,.2,1),top .6s cubic-bezier(.45,0,.2,1),opacity .3s}
  .t-cur .fx.go{animation:t-ripple .45s ease-out}
  .t-win{transition:left .5s cubic-bezier(.2,.8,.25,1),top .5s cubic-bezier(.2,.8,.25,1),width .5s cubic-bezier(.2,.8,.25,1),height .5s cubic-bezier(.2,.8,.25,1),opacity .35s,transform .5s cubic-bezier(.2,.8,.25,1),border-color .3s}
  .t-panel li{transition:background-color .2s,color .2s}
}
@keyframes t-ripple{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}