/* PassCLLT Road Rules Learning — standalone V4 Energy */
:root {
  --rrl-navy:#061b3d;
  --rrl-navy-2:#092b61;
  --rrl-ink:#0b2148;
  --rrl-gold:#ffd225;
  --rrl-gold-deep:#d99d00;
  --rrl-paper:#f4f7ff;
  --rrl-accent:#6d3de0;
  --rrl-accent-2:#206ce8;
  --rrl-accent-soft:#eee9ff;
  --rrl-accent-deep:#4320a0;
}
* { box-sizing:border-box; }
#fn-road_rules_learning { background:#061b3d; color:var(--rrl-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#fn-road_rules_learning button { font:inherit; -webkit-tap-highlight-color:transparent; }
#fn-road_rules_learning button:focus-visible { outline:3px solid rgba(255,210,37,.96); outline-offset:3px; }
.rrl-shell {
  min-height:100vh; max-width:640px; margin:0 auto; padding:0 18px 38px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 94% -2%, rgba(255,210,37,.30), transparent 19%),
    radial-gradient(circle at -12% 42%, rgba(117,62,231,.32), transparent 24%),
    radial-gradient(circle at 91% 52%, rgba(29,132,251,.18), transparent 19%),
    linear-gradient(160deg,#041734 0%,#08285a 34%,#092d65 100%);
}
.rrl-shell::after { content:""; pointer-events:none; position:absolute; inset:auto -140px -260px auto; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,211,37,.16),transparent 66%); }
.rrl-theme-violet { --rrl-accent:#7a3cff; --rrl-accent-2:#355df0; --rrl-accent-soft:#eee9ff; --rrl-accent-deep:#4f19bc; }
.rrl-theme-blue { --rrl-accent:#166fe9; --rrl-accent-2:#10b8f1; --rrl-accent-soft:#e2f5ff; --rrl-accent-deep:#0955c4; }
.rrl-theme-teal { --rrl-accent:#00a88b; --rrl-accent-2:#1bd8b4; --rrl-accent-soft:#ddfbf5; --rrl-accent-deep:#007665; }
.rrl-theme-gold { --rrl-accent:#e59600; --rrl-accent-2:#ffc52a; --rrl-accent-soft:#fff5d6; --rrl-accent-deep:#a85b00; }
.rrl-theme-indigo { --rrl-accent:#5969ec; --rrl-accent-2:#b63df0; --rrl-accent-soft:#f0eaff; --rrl-accent-deep:#363ea5; }
.rrl-theme-rose { --rrl-accent:#ee4972; --rrl-accent-2:#ff884f; --rrl-accent-soft:#ffe8f0; --rrl-accent-deep:#c52352; }
.rrl-theme-slate { --rrl-accent:#2d76b9; --rrl-accent-2:#5fa6f6; --rrl-accent-soft:#e4f1ff; --rrl-accent-deep:#1d4e85; }
.rrl-header { height:72px; display:flex; align-items:center; gap:9px; color:#fff; font-size:14px; font-weight:900; letter-spacing:.03em; position:relative; z-index:1; }
.rrl-header img { width:31px; height:31px; margin-left:auto; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.28)); }
.rrl-header>span { margin-right:auto; }.rrl-header>span span{color:var(--rrl-gold)}
.rrl-back { border:0; background:transparent; color:#fff; font-weight:850; padding:9px 0; cursor:pointer; opacity:.97; }
.rrl-intro { padding:25px 4px 25px; color:#fff; position:relative; z-index:1; }
.rrl-eyebrow,.rrl-card-kicker { margin:0 0 9px; color:#8c9bbb; font-size:10px; font-weight:950; letter-spacing:.18em; }
.rrl-intro .rrl-eyebrow { color:#bbd4ff; }
.rrl-intro h1,.rrl-complete h1 { font-size:clamp(34px,8vw,49px); line-height:1.01; letter-spacing:-.065em; margin:0; }
.rrl-intro h1 em { color:var(--rrl-gold); font-style:normal; text-shadow:0 4px 18px rgba(255,210,37,.18); }
.rrl-intro>p:last-child { font-size:16px; line-height:1.52; color:#dce7fb; max-width:480px; margin:16px 0 0; }
.rrl-list-heading { display:flex; justify-content:space-between; align-items:end; margin:1px 3px 12px; color:#fff; position:relative; z-index:1; }
.rrl-list-heading h2 { margin:0; font-size:17px; letter-spacing:-.02em; }.rrl-list-heading span { font-size:11px; color:#b5c9ee; font-weight:800; }
.rrl-topic-list { display:grid; gap:12px; position:relative; z-index:1; }
.rrl-topic { display:block; text-align:left; border:1px solid rgba(255,255,255,.28); border-radius:22px; padding:16px 16px 15px 18px; color:#fff; cursor:pointer; position:relative; overflow:hidden; min-height:111px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; box-shadow:0 13px 27px rgba(0,7,26,.25); background:linear-gradient(126deg,rgba(255,255,255,.12),rgba(255,255,255,.045)); isolation:isolate; }
.rrl-topic::before { content:""; position:absolute; inset:0; opacity:.92; background:linear-gradient(112deg,var(--rrl-accent-deep),var(--rrl-accent) 54%,var(--rrl-accent-2)); z-index:-2; }
.rrl-topic::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-69px; top:-76px; background:radial-gradient(circle,rgba(255,255,255,.31) 0 20%,rgba(255,255,255,.10) 21% 50%,transparent 51%); z-index:-1; }
.rrl-topic:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.62); box-shadow:0 20px 36px rgba(0,7,26,.36),0 0 26px color-mix(in srgb,var(--rrl-accent) 43%,transparent); }.rrl-topic:active { transform:translateY(1px) scale(.99); }
.rrl-topic-top,.rrl-topic-bottom { display:flex; justify-content:space-between; gap:13px; position:relative; z-index:1; }.rrl-topic-copy { display:grid; gap:3px; padding-right:56px; }
.rrl-topic-index { display:inline-flex; width:max-content; padding:3px 7px; border-radius:999px; color:#fff; background:rgba(1,17,49,.27); border:1px solid rgba(255,255,255,.22); font-size:9px; letter-spacing:.14em; font-weight:950; }
.rrl-topic strong { font-size:18px; letter-spacing:-.03em; line-height:1.13; margin-top:3px; }.rrl-topic small { font-size:12px; color:rgba(255,255,255,.83); line-height:1.28; }
.rrl-topic-arrow { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; align-self:start; background:rgba(255,255,255,.93); color:var(--rrl-accent-deep); font-size:33px; line-height:32px; font-weight:400; box-shadow:0 7px 16px rgba(0,0,0,.16); }
.rrl-topic-bottom { align-items:center; margin-top:12px; font-size:11px; color:#fff; font-weight:850; }.rrl-bar { display:block; width:102px; height:8px; background:rgba(3,12,39,.30); border:1px solid rgba(255,255,255,.18); border-radius:20px; overflow:hidden; }.rrl-bar b,.rrl-progress b { display:block; height:100%; background:linear-gradient(90deg,#fff4a6,var(--rrl-gold)); border-radius:inherit; box-shadow:0 0 12px rgba(255,219,69,.85); }
.rrl-accent-violet { --rrl-accent:#7a3cff; --rrl-accent-2:#355df0; --rrl-accent-deep:#4f19bc; }.rrl-accent-blue { --rrl-accent:#166fe9; --rrl-accent-2:#10b8f1; --rrl-accent-deep:#0955c4; }.rrl-accent-teal { --rrl-accent:#00a88b; --rrl-accent-2:#1bd8b4; --rrl-accent-deep:#007665; }.rrl-accent-gold { --rrl-accent:#e59600; --rrl-accent-2:#ffc52a; --rrl-accent-deep:#a85b00; }.rrl-accent-indigo { --rrl-accent:#5969ec; --rrl-accent-2:#b63df0; --rrl-accent-deep:#363ea5; }.rrl-accent-rose { --rrl-accent:#ee4972; --rrl-accent-2:#ff884f; --rrl-accent-deep:#c52352; }.rrl-accent-slate { --rrl-accent:#2d76b9; --rrl-accent-2:#5fa6f6; --rrl-accent-deep:#1d4e85; }
.rrl-learning-head { display:flex; justify-content:space-between; align-items:end; margin:15px 2px 8px; color:#fff; position:relative; z-index:1; }.rrl-learning-head p { font-size:12px; font-weight:900; color:#d3e6ff; margin:0 0 3px; }.rrl-learning-head strong { font-size:15px; }.rrl-learning-head span { font-size:11px; font-weight:850; color:#edf5ff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.17); padding:5px 8px; border-radius:999px; }
.rrl-progress { height:10px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.17); border-radius:10px; overflow:hidden; margin:0 0 20px; position:relative; z-index:1; }.rrl-progress b { background:linear-gradient(90deg,#ffe774,var(--rrl-gold)); box-shadow:0 0 16px rgba(255,210,37,.65); }
.rrl-card { background:#fff; border:1px solid rgba(255,255,255,.86); border-radius:28px; padding:27px 22px; box-shadow:0 20px 40px rgba(0,7,28,.30); animation:rrl-card-in .32s cubic-bezier(.2,.8,.2,1) both; position:relative; z-index:1; overflow:hidden; }
.rrl-card h2 { font-size:clamp(24px,6vw,34px); line-height:1.13; letter-spacing:-.052em; margin:0; color:var(--rrl-navy); }
.rrl-prompt-card { min-height:390px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(144deg,var(--rrl-accent-deep),var(--rrl-accent) 48%,var(--rrl-accent-2)); border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 42px rgba(0,7,28,.37),0 0 38px color-mix(in srgb,var(--rrl-accent) 37%,transparent); }
.rrl-prompt-card::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-120px; top:-105px; background:radial-gradient(circle,rgba(255,255,255,.37),rgba(255,255,255,.11) 38%,transparent 67%); }.rrl-prompt-card::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; left:-90px; bottom:-112px; background:radial-gradient(circle,rgba(255,217,60,.43),transparent 64%); }
.rrl-prompt-card .rrl-card-kicker,.rrl-prompt-card h2,.rrl-prompt-card .rrl-primary { position:relative; z-index:1; }.rrl-prompt-card .rrl-card-kicker { color:rgba(255,255,255,.76); }.rrl-prompt-card h2 { color:#fff; text-shadow:0 3px 17px rgba(0,12,52,.24); }.rrl-prompt-card .rrl-primary { margin-top:42px; }
.rrl-reveal-card,.rrl-check-card { border-top:8px solid var(--rrl-accent); background:linear-gradient(148deg,#ffffff 0%,#ffffff 61%,var(--rrl-accent-soft) 154%); }
.rrl-reveal-card::before,.rrl-check-card::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:64px; background:linear-gradient(90deg,color-mix(in srgb,var(--rrl-accent) 14%,white),transparent); pointer-events:none; }
.rrl-reveal-card>* ,.rrl-check-card>* { position:relative; z-index:1; }.rrl-reveal-card h2 { font-size:24px; line-height:1.3; letter-spacing:-.03em; }
.rrl-insight,.rrl-example { border-radius:18px; padding:15px 16px; margin:18px 0 0; box-shadow:0 8px 16px rgba(20,46,90,.07); }.rrl-insight { background:linear-gradient(135deg,var(--rrl-accent-soft),#fff); border:1px solid color-mix(in srgb,var(--rrl-accent) 27%,white); }.rrl-example { background:linear-gradient(135deg,#fff4c6,#fffaf0); border:1px solid rgba(255,194,18,.43); }.rrl-insight strong,.rrl-example strong { display:block; text-transform:uppercase; font-size:10px; letter-spacing:.14em; color:var(--rrl-accent-deep); }.rrl-example strong { color:#996300; }.rrl-insight p,.rrl-example p { font-size:14px; line-height:1.48; margin:5px 0 0; color:#263b5b; }
.rrl-primary,.rrl-secondary { border:0; border-radius:16px; width:100%; min-height:57px; padding:13px 17px; font-weight:950; cursor:pointer; font-size:15px; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }.rrl-primary { background:linear-gradient(135deg,#ffe46d,var(--rrl-gold)); color:#162242; margin-top:24px; box-shadow:0 7px 0 var(--rrl-gold-deep),0 15px 27px rgba(193,133,0,.33); }.rrl-primary:hover { filter:brightness(1.04); transform:translateY(-1px); }.rrl-primary:active { transform:translateY(5px); box-shadow:0 2px 0 var(--rrl-gold-deep); }.rrl-primary span,.rrl-secondary span { float:right; font-size:20px; line-height:15px; }.rrl-secondary { background:linear-gradient(135deg,var(--rrl-accent),var(--rrl-accent-2)); color:#fff; margin-top:18px; box-shadow:0 8px 17px color-mix(in srgb,var(--rrl-accent) 25%,transparent); }
.rrl-check-card h2 { font-size:23px; line-height:1.25; letter-spacing:-.035em; }.rrl-choices { display:grid; gap:11px; margin-top:22px; }.rrl-choice { min-height:62px; border:1.5px solid color-mix(in srgb,var(--rrl-accent) 20%,#dce5f2); background:linear-gradient(135deg,#fff,var(--rrl-accent-soft)); border-radius:17px; text-align:left; padding:11px 14px; color:#263852; font-weight:800; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:11px; transition:border .16s ease,transform .16s ease,background .16s ease,box-shadow .16s ease; }.rrl-choice:hover { border-color:var(--rrl-accent); background:linear-gradient(135deg,var(--rrl-accent-soft),#fff); transform:translateX(3px); box-shadow:0 8px 17px color-mix(in srgb,var(--rrl-accent) 17%,transparent); }.rrl-choice:active { transform:scale(.99); }.rrl-choice span { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--rrl-accent),var(--rrl-accent-2)); color:#fff; font-size:12px; flex:0 0 auto; box-shadow:0 4px 9px color-mix(in srgb,var(--rrl-accent) 30%,transparent); }.rrl-choices-locked .rrl-choice { cursor:default; }.rrl-choice.is-correct { border-color:#18a964; background:#effbf4; }.rrl-choice.is-correct span { background:#1aa462; color:#fff; }.rrl-choice.is-incorrect { border-color:#e25869; background:#fff3f5; }.rrl-choice.is-incorrect span { background:#e25869; color:#fff; }
.rrl-feedback { border-radius:17px; padding:15px 16px; margin-top:18px; background:linear-gradient(135deg,#e5fff0,#f9fffc); border:1px solid #97e6bf; color:#125b38; animation:rrl-feedback-pop .28s ease-out both; box-shadow:0 8px 17px rgba(16,113,70,.10); }.rrl-feedback.is-incorrect { background:linear-gradient(135deg,#fff0e4,#fffaf6); border-color:#ffc77c; color:#8a4d12; }.rrl-feedback strong { font-size:14px; }.rrl-feedback p { font-size:13px; line-height:1.48; margin:5px 0 0; }.rrl-feedback .rrl-kind { font-weight:800; }
.rrl-complete { text-align:center; background:linear-gradient(150deg,#fff 0%,#fff 46%,var(--rrl-accent-soft) 160%); border:1px solid rgba(255,255,255,.95); border-top:8px solid var(--rrl-accent); border-radius:28px; padding:45px 24px; box-shadow:0 20px 40px rgba(0,7,28,.30); margin-top:35px; position:relative; overflow:hidden; animation:rrl-card-in .32s cubic-bezier(.2,.8,.2,1) both; z-index:1; }.rrl-complete::before { content:""; position:absolute; width:280px; height:280px; top:-170px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--rrl-accent) 31%,transparent),transparent 69%); }.rrl-complete>* { position:relative; z-index:1; }.rrl-complete>p { line-height:1.5; color:#51617b; }.rrl-complete h1 { color:var(--rrl-navy); }.rrl-score { display:grid; gap:2px; margin:22px auto; background:linear-gradient(135deg,var(--rrl-accent-soft),#fff); border:1px solid color-mix(in srgb,var(--rrl-accent) 32%,white); border-radius:20px; padding:18px; max-width:190px; box-shadow:0 9px 17px color-mix(in srgb,var(--rrl-accent) 12%,transparent); }.rrl-score strong { font-size:31px; color:var(--rrl-accent-deep); letter-spacing:-.05em; }.rrl-score span { font-size:11px; color:#586a86; font-weight:850; }.rrl-repeat { font-size:14px; margin:22px auto; max-width:360px; }.rrl-complete .rrl-primary { margin-top:4px; }
@keyframes rrl-card-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes rrl-feedback-pop { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:390px){.rrl-shell{padding-left:14px;padding-right:14px}.rrl-card{padding:24px 18px}.rrl-topic{padding:15px 14px}.rrl-intro{padding-top:18px}.rrl-prompt-card{min-height:360px}.rrl-topic strong{font-size:17px}}