/* Home/content entry badges only; no sidebar selectors or credit gating. */
.app-access-badge { display:inline-flex; align-items:center; justify-content:center; align-self:center; flex-shrink:0; width:max-content; padding:2px 9px; border-radius:999px; background:#c74426; color:#fff; font-size:11px; font-weight:800; line-height:1.25; white-space:nowrap; }
.home-free-tools { margin:20px 0 0;max-width:none;padding:20px 0 0;border:0;border-top:1px solid #dfe5f0;border-radius:0; }
.home-free-tools-cylinder { width:min(1180px,calc(100% - 32px));box-sizing:border-box;margin:14px auto 0;padding:0;border:0;background:transparent; }
.home-free-tools-cylinder .beginner-reel { overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none; }
.home-free-tools-cylinder .beginner-reel::before { display:none; }
.home-free-tools-cylinder .beginner-reel-viewport { min-height:102px;padding:0; }
.home-free-tools-cylinder .beginner-reel-track { height:102px; }
.home-free-tools-cylinder .beginner-reel-stage { padding:0; }
.home-free-tools h2 { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:58px; margin:0 0 12px; color:#5c5573; font-size:11px; font-weight:900; letter-spacing:.12em; line-height:1.15; text-align:center; text-shadow:0 1px 0 #fff,0 -1px 0 rgba(55,43,91,.22); }
.home-free-tools h2 strong { display:block; margin-top:4px; color:#6f5a9f; font-size:22px; font-weight:950; letter-spacing:-.055em; text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(68,51,113,.30),0 5px 12px rgba(70,51,121,.12); }
.beginner-reel { --reel-duration:4000ms; position:relative; overflow:hidden; border:1px solid rgba(117,94,179,.20); border-radius:22px; background:linear-gradient(145deg,#fbfcff 0%,#f3f0ff 42%,#edf4ff 100%); box-shadow:0 15px 32px rgba(72,57,119,.09),inset 0 1px 0 rgba(255,255,255,.92); }
.beginner-reel::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.74),transparent 28%,transparent 72%,rgba(119,91,185,.07)); }
.beginner-reel-controls { position:relative; z-index:2; display:grid; grid-template-columns:54px minmax(0,1fr) 54px; align-items:center; min-height:50px; border-bottom:1px solid rgba(117,94,179,.16); background:linear-gradient(90deg,rgba(120,96,186,.10),rgba(255,255,255,.72),rgba(106,142,210,.12)); }
.beginner-reel-arrow { display:grid; place-items:center; justify-self:center; width:34px; height:34px; border:1px solid rgba(104,82,166,.26); border-radius:50%; background:linear-gradient(145deg,#fff,#e8e2f8); color:#6f55ac; box-shadow:0 3px 8px rgba(72,57,119,.14),inset 0 1px rgba(255,255,255,.95); cursor:pointer; transition:transform .22s ease,box-shadow .22s ease; }
.beginner-reel-arrow:hover { transform:translateY(-1px) scale(1.05); box-shadow:0 6px 13px rgba(72,57,119,.20),inset 0 1px rgba(255,255,255,.95); }
.beginner-reel-arrow:focus-visible,.beginner-reel-stage-button:focus-visible,.beginner-reel-viewport:focus-visible,.beginner-reel-tool:focus-visible { outline:3px solid rgba(91,65,194,.34); outline-offset:3px; }
.beginner-reel-stage-button { min-width:0; height:50px; padding:0; border:0; background:transparent; color:#33415b; font:inherit; font-size:13px; font-weight:850; letter-spacing:-.02em; cursor:pointer; }
.beginner-reel-stage-window { position:relative; display:block; height:20px; overflow:hidden; }
.beginner-reel-stage-track { display:block; transition:transform var(--reel-duration) cubic-bezier(.22,.78,.25,1); }
.beginner-reel-stage-name { display:flex; height:20px; align-items:center; justify-content:center; white-space:nowrap; }
.beginner-reel-viewport { position:relative; z-index:1; overflow:hidden; min-height:122px; padding:7px 0 6px; touch-action:pan-y; }
.beginner-reel-cylinder-shell { position:absolute; z-index:0; inset:0; min-height:102px; pointer-events:none; background:url('/static/beginner-reel/premium-horizontal-cylinder-left-rim-full.webp?v=20261030-left-rim-full1') center center/100% 100% no-repeat; filter:drop-shadow(0 8px 10px rgba(23,34,56,.15)); }
.beginner-reel-track { position:relative; z-index:1; width:100%; height:102px; overflow:hidden; /* The moving face is visible only between the inner upper and lower metal lines. */ clip-path:inset(12% 0 12% 0); }
/* The cylinder is a fixed outer frame.  A stage is only its label-and-icon
   sheet, which slides through that frame from top to bottom as one unit. */
.beginner-reel-stage { position:absolute; inset:0; min-width:0; padding:0 11px; opacity:0; pointer-events:none; transform:translateY(-100%); will-change:transform; transition:transform var(--reel-duration) cubic-bezier(.42,0,.58,1); }
/* Every visible face travels in one direction only: top to bottom.  The next
   face follows directly from above while the current one exits below. */
.beginner-reel-stage.is-stage-enter-down { z-index:1; opacity:1; transform:translateY(-100%); }
.beginner-reel-stage.is-stage-leave-down { z-index:1; opacity:1; transform:translateY(100%); }
.beginner-reel-stage.is-active { z-index:2; opacity:1; pointer-events:auto; transform:translateY(0); }
.beginner-reel-cylinder { position:relative; min-height:102px; background:transparent; filter:none; }
.beginner-reel-cylinder::before,.beginner-reel-cylinder::after { display:none; }
.beginner-reel-fixed-menu { position:absolute; z-index:3; top:12%; bottom:12%; left:4.2%; width:26.7%; display:grid; grid-template-columns:96px minmax(108px,1fr); column-gap:23px; align-items:center; padding:0 14px 0 0; border-right:1px dashed rgba(184,208,239,.48); color:#fff8df; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.92); pointer-events:auto; }
.beginner-reel-fixed-menu-title { display:flex; flex-direction:column; justify-content:center; align-self:stretch; gap:7px; margin:0; padding-right:10px; border-right:1px solid rgba(225,232,255,.24); color:#fff; letter-spacing:-.10em; line-height:1; }
.beginner-reel-fixed-menu-title span,.beginner-reel-fixed-menu-title strong { display:block; color:#fff; filter:none; text-shadow:0 -1px 0 rgba(255,255,255,.56),0 1px 0 #9eacbc,0 2px 0 #15283e,0 4px 6px rgba(0,0,0,.90),0 0 9px rgba(217,234,255,.22); }
.beginner-reel-fixed-menu-title span { font-size:11px; font-weight:800; letter-spacing:.05em; }
.beginner-reel-fixed-menu-title strong { font-size:clamp(15px,1.08vw,18px); font-weight:820; }
.beginner-reel-fixed-menu-list { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); justify-items:stretch; justify-self:center; align-self:stretch; gap:1px; width:clamp(108px,9.4vw,140px); }
.beginner-reel-menu-item { position:relative; display:flex; align-items:center; justify-content:center; gap:5px; height:auto; min-height:0; box-sizing:border-box; padding:0 5px; border:1px solid rgba(229,238,255,.31); border-radius:0; background:linear-gradient(180deg,rgba(49,74,118,.74),rgba(5,17,39,.84)); color:rgba(240,246,255,.95); font:inherit; font-size:clamp(9px,.70vw,11px); font-weight:900; line-height:1; letter-spacing:-.055em; text-shadow:0 1px 3px rgba(0,0,0,.92); cursor:pointer; transition:background .3s ease,color .3s ease,box-shadow .3s ease,filter .3s ease,border-color .3s ease; }
.beginner-reel-menu-item b { min-width:11px; color:#ffedb2; font-size:.9em; }
.beginner-reel-menu-item.is-active { border-color:rgba(255,229,148,.94); background:linear-gradient(90deg,rgba(255,228,127,.98),rgba(255,160,67,.90)); color:#10192d; text-shadow:0 1px 0 rgba(255,255,255,.60); box-shadow:inset 0 1px rgba(255,255,255,.84),0 0 9px rgba(255,205,99,.76); filter:saturate(1.18); }
.beginner-reel-menu-item.is-active::before,.beginner-reel-menu-item.is-active::after { content:''; position:absolute; top:50%; z-index:2; width:8px; height:8px; border-top:2px solid #f7d980; border-right:2px solid #f7d980; filter:drop-shadow(0 1px 2px rgba(0,0,0,.92)) drop-shadow(0 0 5px rgba(255,223,137,.42)); animation:beginner-reel-arrow-glow 1.8s ease-in-out infinite; pointer-events:none; }
.beginner-reel-menu-item.is-active::before { left:-17px; transform:translateY(-50%) rotate(45deg); }
.beginner-reel-menu-item.is-active::after { right:-17px; transform:translateY(-50%) rotate(225deg); }
@keyframes beginner-reel-arrow-glow { 0%,100% { opacity:.76; } 50% { opacity:1; } }
.beginner-reel-menu-item.is-active b { color:#3c2740; }
.beginner-reel-menu-item:hover:not(.is-active),.beginner-reel-menu-item:focus-visible { background:rgba(236,231,255,.24); color:#fff; outline:0; }
.beginner-reel-icon-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); column-gap:7px; min-height:102px; align-items:stretch; padding:12px 7.2% 12px 36.2%; }
.beginner-reel-tool { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px 3px; color:#f8fbff; text-align:center; text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.beginner-reel-tool:not(:last-child)::after { content:''; position:absolute; top:15%; right:-4px; height:70%; border-right:1px dashed rgba(4,13,28,.88); box-shadow:1px 0 rgba(177,205,237,.28); filter:drop-shadow(0 1px 1px rgba(0,0,0,.72)); }
.beginner-reel-tool i { color:var(--stage-accent); font-size:23px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.78)); }
.beginner-reel-tool span { overflow:hidden; max-width:100%; font-size:11px; font-weight:760; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
/* Icons are fixed markings on the cylinder face.  Hovering keeps the face
   still for selection, but never lifts an individual icon off that face. */
.beginner-reel-tool:hover { transform:none; filter:none; }
.beginner-reel-guide { position:relative; z-index:1; margin:0; padding:0 14px 10px; color:#778398; font-size:11px; font-weight:650; text-align:center; }
.beginner-reel-guide i { margin-right:5px; color:#8064b3; }
.app-access-note { font-size:12px; color:var(--text-muted); line-height:1.6; word-break:keep-all; }
.content-app-info .app-access-badge { align-self:flex-start; }
.academy-home-banner .app-access-badge,.score-heading .app-access-badge { display:inline-flex; color:#fff; letter-spacing:normal; font-size:11px; }
@media(max-width:760px) { .home-learning-suite { width:calc(100% - 24px);margin-top:14px;padding:14px 12px;border-radius:15px; } .home-free-tools-cylinder { width:calc(100% - 24px);margin:12px auto 0;padding:0; } .home-free-tools h2 { min-height:50px; font-size:9px; } .home-free-tools h2 strong { font-size:18px; } .beginner-reel { border-radius:18px; } .home-free-tools-cylinder .beginner-reel { border-radius:0; } .beginner-reel-controls { grid-template-columns:45px minmax(0,1fr) 45px; min-height:44px; } .beginner-reel-stage-button,.beginner-reel-stage-window,.beginner-reel-stage-name { height:18px; font-size:11px; } .beginner-reel-viewport { min-height:132px; } .beginner-reel-track { height:112px; } .beginner-reel-stage { padding:0 5px; } .home-free-tools-cylinder .beginner-reel-viewport { min-height:100px; } .home-free-tools-cylinder .beginner-reel-track { height:100px; } .home-free-tools-cylinder .beginner-reel-stage { padding:0; } .home-free-tools-cylinder .beginner-reel-cylinder,.home-free-tools-cylinder .beginner-reel-cylinder-shell { min-height:100px; } .beginner-reel-cylinder { min-height:112px; background-size:100% 100%; } .beginner-reel-fixed-menu { left:3.2%; width:32.4%; grid-template-columns:55px minmax(80px,1fr); column-gap:16px; padding-right:4px; } .beginner-reel-fixed-menu-title { gap:3px; padding-right:3px; } .beginner-reel-fixed-menu-title span { font-size:7px; } .beginner-reel-fixed-menu-title strong { font-size:10px; } .beginner-reel-fixed-menu-list { gap:1px; width:100%; } .beginner-reel-menu-item { gap:2px; height:auto; min-height:0; padding:0 2px; font-size:7px; } .beginner-reel-menu-item b { min-width:7px; } .beginner-reel-menu-item.is-active::before,.beginner-reel-menu-item.is-active::after { width:6px; height:6px; border-width:1.5px; } .beginner-reel-menu-item.is-active::before { left:-12px; } .beginner-reel-menu-item.is-active::after { right:-12px; } .beginner-reel-icon-row { grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:0; min-height:112px; padding:8px 8px; } .home-free-tools-cylinder .beginner-reel-icon-row { column-gap:3px; min-height:100px; padding:12px 4% 12px 38%; } .beginner-reel-tool:nth-child(5)::after { display:none; } .beginner-reel-tool { gap:4px; padding:5px 2px; } .beginner-reel-tool i { font-size:20px; } .beginner-reel-tool span { font-size:10px; } .beginner-reel-guide { font-size:10px; } .cat-item:has(.app-access-badge) { min-height:72px; } .app-access-note { font-size:11px; } }
/* The reel already moves slowly (four seconds per face). Do not shorten it
   under the OS motion preference: shortening was visually more abrupt and
   could desynchronise it from the controller's cleanup timer. */
@media(prefers-reduced-motion:reduce){.beginner-reel *{animation-duration:.01ms!important}}