/* LexVoca website tour: the frame around the app window. Fonts come from the app's own folder. */
@font-face{font-family:'Figtree';src:url('app/fonts/Figtree.ttf');font-weight:100 900;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('app/fonts/EBGaramond.ttf');font-weight:400 800;font-display:swap}
:root{--bg:#141210;--bar:#1a1714;--card:#221f1b;--edge:#3a342b;--ink:#ece6d8;--sub:#b3aa96;--acc:#e6a866;--acc-ink:#191714;--flare:#ff8a5c;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at 20% 0%,#ff7d5222,transparent 50%),var(--bg);color:var(--ink);font:15px/1.55 Figtree,'Segoe UI',system-ui,sans-serif}
a{color:var(--acc)}
.skip{position:absolute;left:-9999px;top:8px}.skip:focus{left:12px;z-index:10;background:var(--card);padding:6px 12px;border-radius:8px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.tour-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:12px 20px;background:var(--bar);border-bottom:1px solid var(--edge)}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:800;font-size:19px}
.brand b{color:var(--flare);font-weight:800}
.label{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:20px;color:var(--sub)}
.note{margin:0;flex:1 1 220px;color:var(--sub);font-size:13px}
.tour-top nav{display:flex;gap:14px;align-items:center}
.tour-top nav a{color:var(--sub);text-decoration:none;font-weight:600}
.tour-top nav a:hover{color:var(--ink)}
.tour-top nav a.dl{color:var(--acc-ink);background:var(--acc);padding:6px 14px;border-radius:999px}

.tour{display:grid;gap:20px;padding:20px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.tour{display:flex;justify-content:center;gap:20px}.stage-wrap{flex:0 1 auto}.card-tour{flex:0 0 340px}}
.stage-wrap{min-width:0}
.stage{position:relative;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px -30px #000,0 0 0 1px var(--edge)}
.device{position:absolute;left:0;top:0;width:1200px;height:820px;transform-origin:0 0}
.device iframe{display:block;width:1200px;height:820px;border:0;background:#191714}
.spot{position:absolute;pointer-events:none;border:2px solid var(--acc);border-radius:14px;box-shadow:0 0 0 9999px rgba(10,8,6,.45);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease}
body.exploring .spot{display:none}
.narrow-tip{display:none;color:var(--sub);font-size:13px;margin:10px 0 0}
@media (max-width:700px){.narrow-tip{display:block}.tour{padding:12px}}

.card-tour{background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:18px 20px;position:sticky;top:20px}
body.exploring .card-tour{display:none}
.ct-dots{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.ct-dots i{width:6px;height:6px;border-radius:3px;background:#4a4337}
.ct-dots i.done{background:#b87b3e}.ct-dots i.on{width:18px;background:var(--acc)}
.ct-meta{display:flex;justify-content:space-between;margin:0;color:var(--sub);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#ct-title{font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:30px;line-height:1.1;margin:6px 0 10px}
#ct-title:focus{outline:none}
.ct-text{margin:0 0 10px}
.ct-keys{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.ct-keys:empty{display:none}
kbd{font:700 12px Figtree,sans-serif;background:#2b2721;border:1px solid var(--edge);border-bottom-width:3px;border-radius:6px;padding:2px 8px}
.ct-end[hidden]{display:none}
.ct-end{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ct-nav{display:flex;gap:8px;justify-content:space-between;margin-top:6px}
.btn{font:700 14px Figtree,sans-serif;border-radius:999px;padding:9px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:1px solid var(--edge)}
.btn.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.linkish{background:none;border:0;color:var(--acc);font:600 13px Figtree,sans-serif;cursor:pointer;padding:10px 0 0;text-decoration:underline}
.ct-hint{color:var(--sub);font-size:12px;margin:8px 0 0}
@media (max-width:700px){.ct-hint{display:none}}
.resume{position:fixed;right:20px;bottom:20px;z-index:5;font:700 14px Figtree,sans-serif;background:var(--acc);color:var(--acc-ink);border:0;border-radius:999px;padding:12px 20px;cursor:pointer;box-shadow:0 10px 30px -8px rgba(230,168,102,.6)}
@media (prefers-reduced-motion:reduce){.spot{transition:none}}
.ct-nav .btn{white-space:nowrap;justify-content:center}.ct-nav [data-act=next]{min-width:122px}   /* same size on every step, so Next never moves */