.experience { --tour-accent:#8fe8cd; --tour-bg:#0b1420; --tour-panel:#142330; --tour-text:#eef5f7; --tour-muted:#b5c6d3; background:var(--tour-bg); color:var(--tour-text); padding:clamp(24px,5vw,72px) 20px; font:16px/1.65 system-ui,sans-serif; }
.experience[data-experience="author"] { --tour-accent:#f3c68c; --tour-bg:#101114; --tour-panel:#1b1d21; --tour-muted:#c3bcb4; }
.experience * { box-sizing:border-box; }
.experience .tour-shell { max-width:1160px; margin:auto; }
.experience h1 { font-size:clamp(34px,5vw,64px); line-height:1.08; letter-spacing:-.045em; max-width:850px; margin:18px 0; color:var(--tour-text); }
.experience h2 { font-size:clamp(28px,3vw,42px); line-height:1.18; margin:12px 0 20px; color:var(--tour-text); }
.experience h3 { font-size:21px; color:var(--tour-text); }
.experience p { max-width:72ch; }
.experience .tour-kicker { color:var(--tour-accent); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:750; }
.experience .tour-intro { font-size:19px; color:var(--tour-muted); }
.experience .tour-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:30px; margin-top:36px; }
.experience .tour-menu { display:grid; gap:7px; align-content:start; }
.experience button, .experience .tour-link { min-height:46px; border:1px solid #647580; border-radius:12px; padding:12px 16px; font:inherit; cursor:pointer; color:var(--tour-text); background:transparent; text-decoration:none; }
.experience .tour-menu button { text-align:left; }
.experience .tour-menu button[aria-current="step"] { background:var(--tour-accent); color:var(--tour-bg); border-color:var(--tour-accent); font-weight:700; }
.experience button:hover, .experience .tour-link:hover { border-color:var(--tour-accent); }
.experience :focus-visible { outline:3px solid var(--tour-accent); outline-offset:4px; }
.experience button:disabled { opacity:.45; cursor:default; }
.experience .tour-panel { background:var(--tour-panel); border:1px solid #52606a; border-radius:24px; padding:clamp(22px,4vw,42px); min-width:0; }
.experience [hidden] { display:none!important; }
.experience .tour-note { padding:16px 18px; border-left:3px solid var(--tour-accent); background:#ffffff08; color:var(--tour-muted); }
.experience .tour-link { display:inline-flex; align-items:center; margin:8px 8px 8px 0; background:var(--tour-accent); color:var(--tour-bg); font-weight:700; }
.experience .tour-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:24px; }
.experience .tour-controls p { margin:0; color:var(--tour-muted); }
.experience .tour-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.experience .tour-stat { border:1px solid #52606a; border-radius:14px; padding:14px; }
.experience .tour-stat strong { display:block; color:var(--tour-accent); font-size:30px; }
.experience .tour-switch { display:flex; align-items:center; gap:12px; min-height:48px; cursor:pointer; }
.experience input[type="checkbox"] { width:20px; height:20px; accent-color:var(--tour-accent); flex-shrink:0; }
.experience blockquote { margin:20px 0; border-left:3px solid var(--tour-accent); padding:16px 20px; background:#ffffff08; }
.experience small { color:var(--tour-muted); }
.experience .tour-status { min-height:60px; font-weight:650; }
@media(max-width:760px) { .experience .tour-layout { grid-template-columns:1fr; gap:20px; } .experience .tour-menu { grid-template-columns:repeat(2,minmax(0,1fr)); } .experience .tour-menu button { font-size:14px; padding:10px; } .experience .tour-grid { grid-template-columns:1fr; } }