/* ========================================================================== Aksh Niti — EVE's guided demo (.akt) and feature tips (.akh). Two presentations of one tour, chosen by viewport in core/akshTour.js: data-mode="spot" laptop. The real page stays on screen, dimmed, with a lit cutout over the thing being explained and a coach card beside it. Nothing is mocked up — you are looking at your own portal. data-mode="story" phone. A full-screen deck, the way an app intro reads on a phone: EVE presents, one idea per card, thumb at the bottom. A phone has no room for a card beside a target, and a 340px popover over a 375px screen IS the screen — so on a phone the tour stops pretending to be a popover. Steps that are about *where a control is* (the bottom nav, the menu button) still light the real control and drop the card to a sheet. The chrome is dark in both themes on purpose. EVE is white with cyan eyes — on a light card she disappears — and the dark shell is the same near-black the AI Teacher panel uses, so the demo reads as the same character's space. Nothing here depends on --bg / --text, so this file behaves identically in the portal (data-theme) and the study app (html.theme-light/dark). ========================================================================== */ /* The palette, shared by the tour and the feature tips. Both are siblings on rather than nested, so the tokens are declared on every root that needs them instead of inherited from one. */ .akt, .akh, .akh-ring { /* One accent ramp, the AI Teacher's: blue → violet → rose. */ --akt-a1: #6ea8fe; --akt-a2: #a78bfa; --akt-a3: #f472b6; --akt-accent: linear-gradient(115deg, var(--akt-a1), var(--akt-a2) 52%, var(--akt-a3)); --akt-shell: #0b0d12; --akt-shell-2: #111621; --akt-line: rgba(255, 255, 255, 0.10); --akt-line-hi: rgba(255, 255, 255, 0.18); --akt-ink: #e8eef8; --akt-ink-soft: #b3c0d4; --akt-ink-faint: #7d8ba3; --akt-ease: cubic-bezier(0.22, 1, 0.36, 1); --akt-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } .akt { position: fixed; inset: 0; /* Above the study app's tallest modal (10000060) and below the result cover in app/index.html, which must never be painted over. */ z-index: 2147483000; font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--akt-ink); -webkit-font-smoothing: antialiased; } .akt[hidden] { display: none !important; } /* The panels and lists in here are flex/grid, and a display declaration beats the UA's [hidden] rule — without this the phone deck stays on screen behind the laptop card and an empty bullet list holds its own gap. */ .akt [hidden] { display: none !important; } /* The page under the tour must not scroll behind it. */ body.akt-open { overflow: hidden !important; } /* ---------- the scrim ---------------------------------------------------- In spot mode the dimming is done by the cutout's own box-shadow, so the scrim here is only a click blocker — it keeps the tour linear instead of letting a stray click open the thing being described. */ .akt-scrim { position: absolute; inset: 0; z-index: 0; background: rgba(6, 8, 14, 0.86); opacity: 0; transition: opacity 0.4s var(--akt-ease), background 0.45s var(--akt-ease); } .akt.is-in .akt-scrim { opacity: 1; } /* Whenever a real control is lit, the dimming is the cutout's job — a scrim over the top would black out the very thing being pointed at. The two hand the dimming back and forth as steps with and without a target alternate. */ .akt.has-spot .akt-scrim { background: transparent; } /* ---------- the cutout --------------------------------------------------- A 100vmax spread on a transparent element: everything outside the box is dimmed by the shadow, everything inside keeps the real page. Animating top/left/width/height then moves the light from one control to the next in one gesture, which is the whole trick — the student's eye follows it and never has to re-find the page. */ .akt-hole { position: fixed; z-index: 1; top: 50%; left: 50%; width: 0; height: 0; border-radius: 20px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 100vmax rgba(6, 8, 14, 0.82), 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 5px rgba(110, 168, 254, 0.16), 0 0 46px rgba(110, 168, 254, 0.30); transition: top 0.55s var(--akt-ease), left 0.55s var(--akt-ease), width 0.55s var(--akt-ease), height 0.55s var(--akt-ease), border-radius 0.4s var(--akt-ease), opacity 0.35s linear; } /* Only ever shown at a real size. A zero-width box paints no box-shadow at all in Chromium, so a "cutout" over nothing would silently take the dimming with it — the scrim above covers the targetless steps instead. */ .akt.has-spot .akt-hole { opacity: 1; } /* A slow breath on the ring, so a lit control still reads as "this one" after the move has finished. */ .akt-ring { position: fixed; z-index: 1; border-radius: 22px; pointer-events: none; border: 1.5px solid rgba(167, 139, 250, 0.55); opacity: 0; transition: top 0.55s var(--akt-ease), left 0.55s var(--akt-ease), width 0.55s var(--akt-ease), height 0.55s var(--akt-ease), opacity 0.3s linear; } .akt.has-spot .akt-ring { opacity: 1; animation: akt-breathe 2.6s ease-in-out infinite; } @keyframes akt-breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.035); opacity: 0.18; } } /* ========================================================================== EVE ========================================================================== */ .akt-eve { position: relative; display: grid; place-items: center; flex: none; } /* Two orbit rings and a glow behind her. She is the only thing in the tour allowed to move on its own. */ .akt-eve::before, .akt-eve::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .akt-eve::before { inset: -18%; background: radial-gradient(circle at 50% 42%, rgba(0, 229, 255, 0.30), transparent 68%); filter: blur(6px); } .akt-eve::after { inset: -12%; border: 1px solid rgba(0, 229, 255, 0.22); animation: akt-orbit 5.5s linear infinite; } .akt-eve svg { position: relative; z-index: 1; } @keyframes akt-orbit { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.06); } to { transform: rotate(360deg) scale(1); } } /* ========================================================================== Laptop — the coach card ========================================================================== */ .akt-card { position: fixed; z-index: 3; width: min(392px, calc(100vw - 32px)); padding: 20px 20px 16px; border-radius: 24px; background: radial-gradient(120% 100% at 0% 0%, rgba(110, 168, 254, 0.14), transparent 58%), radial-gradient(120% 100% at 100% 0%, rgba(244, 114, 182, 0.10), transparent 60%), var(--akt-shell); border: 1px solid var(--akt-line-hi); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.32s var(--akt-ease), transform 0.42s var(--akt-spring), top 0.5s var(--akt-ease), left 0.5s var(--akt-ease); } .akt.is-in .akt-card { opacity: 1; transform: none; } .akt-card.is-swapping { opacity: 0.25; transform: translateY(4px); transition-duration: 0.14s; } /* The pointer at the card's edge. Sized to read at a glance without becoming a decoration — it exists to say which of two nearby controls is meant. */ .akt-beak { position: absolute; width: 14px; height: 14px; background: var(--akt-shell); border: 1px solid var(--akt-line-hi); transform: rotate(45deg); } .akt-card[data-place="bottom"] .akt-beak { top: -8px; border-right: 0; border-bottom: 0; } .akt-card[data-place="top"] .akt-beak { bottom: -8px; border-left: 0; border-top: 0; } .akt-card[data-place="right"] .akt-beak { left: -8px; border-right: 0; border-top: 0; } .akt-card[data-place="left"] .akt-beak { right: -8px; border-left: 0; border-bottom: 0; } .akt-card[data-place="center"] .akt-beak { display: none; } .akt-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .akt-head .akt-eve { width: 46px; height: 46px; } .akt-kicker { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akt-ink-faint); } .akt-name { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; background: var(--akt-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .akt-title { margin: 0 0 7px; font-size: 1.16rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: #fff; } .akt-body { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--akt-ink-soft); } .akt-points { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .akt-points li { position: relative; padding-left: 20px; font-size: 0.83rem; line-height: 1.5; color: var(--akt-ink-soft); } .akt-points li::before { content: ''; position: absolute; left: 2px; top: 0.52em; width: 7px; height: 7px; border-radius: 50%; background: var(--akt-accent); } .akt-points li b { color: #fff; font-weight: 600; } /* ---------- footer ---------- */ .akt-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--akt-line); } .akt-dots { display: flex; align-items: center; gap: 5px; margin-right: auto; } .akt-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: width 0.3s var(--akt-ease), background 0.3s var(--akt-ease); } .akt-dot.is-done { background: rgba(255, 255, 255, 0.34); } .akt-dot.is-now { width: 20px; background: var(--akt-accent); } .akt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--akt-line); background: rgba(255, 255, 255, 0.05); color: var(--akt-ink); font-family: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background 0.18s var(--akt-ease), border-color 0.18s var(--akt-ease), transform 0.18s var(--akt-spring), color 0.18s var(--akt-ease); } .akt-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--akt-line-hi); } .akt-btn:active { transform: scale(0.96); } .akt-btn:focus-visible { outline: 2px solid var(--akt-a1); outline-offset: 2px; } .akt-btn.is-primary { border-color: transparent; background: var(--akt-accent); color: #0b0d12; box-shadow: 0 8px 24px rgba(110, 168, 254, 0.28); } .akt-btn.is-primary:hover { filter: brightness(1.08); } .akt-btn.is-quiet { height: 34px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--akt-ink-faint); font-weight: 500; } .akt-btn.is-quiet:hover { color: var(--akt-ink); background: rgba(255, 255, 255, 0.06); } .akt-btn[hidden] { display: none; } /* The skip sits apart from Back/Next — it is the one control that ends the tour, and it should never be the thing a fast hand hits twice. */ .akt-close { position: fixed; z-index: 4; top: max(14px, env(safe-area-inset-top)); right: 14px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--akt-line); background: rgba(11, 13, 18, 0.85); backdrop-filter: blur(8px); color: var(--akt-ink-soft); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity 0.35s var(--akt-ease) 0.15s, color 0.18s, background 0.18s; } .akt.is-in .akt-close { opacity: 1; } .akt-close:hover { color: #fff; background: rgba(30, 36, 48, 0.95); } /* Clear of the story's progress bars, which own the very top of the phone. */ .akt[data-mode="story"] .akt-close { top: calc(env(safe-area-inset-top) + 26px); } /* Keyboard hint, laptop only. Two arrow keys are faster than the buttons and nobody discovers them on their own. */ .akt-keys { position: fixed; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--akt-ink-faint); opacity: 0; transition: opacity 0.4s var(--akt-ease) 0.35s; pointer-events: none; } .akt.is-in .akt-keys { opacity: 1; } /* There is no keyboard on the surface this is drawn for, and the hint lands exactly where the thumb reaches for Next. */ .akt[data-mode="story"] .akt-keys { display: none; } .akt-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--akt-line-hi); border-bottom-width: 2px; background: rgba(255, 255, 255, 0.06); font-family: inherit; font-size: 0.7rem; color: var(--akt-ink-soft); } /* ========================================================================== Phone — the story deck ========================================================================== */ .akt-story { position: fixed; z-index: 2; inset: 0; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 46px) 20px calc(env(safe-area-inset-bottom) + 18px); background: radial-gradient(120% 70% at 50% -8%, rgba(110, 168, 254, 0.20), transparent 62%), radial-gradient(110% 60% at 100% 108%, rgba(244, 114, 182, 0.16), transparent 66%), var(--akt-shell); opacity: 0; transform: translateY(14px); transition: opacity 0.36s var(--akt-ease), transform 0.42s var(--akt-ease), border-radius 0.3s var(--akt-ease); } .akt.is-in .akt-story { opacity: 1; transform: none; } /* A step whose whole point is *where the control is* keeps the real control lit and drops the deck to a sheet under (or over) it. */ .akt-story.is-sheet { inset: auto 0 0 0; padding: 22px 20px calc(env(safe-area-inset-bottom) + 18px); border-radius: 26px 26px 0 0; border-top: 1px solid var(--akt-line-hi); box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6); } .akt-story.is-sheet.is-top { inset: 0 0 auto 0; padding-top: calc(env(safe-area-inset-top) + 54px); border-radius: 0 0 26px 26px; border-top: 0; border-bottom: 1px solid var(--akt-line-hi); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } /* ---------- segmented progress, the way a story reads ---------- */ .akt-bars { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 14px; right: 14px; display: flex; gap: 4px; } .akt-story.is-sheet .akt-bars { display: none; } .akt-bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; } .akt-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--akt-accent); transition: width 0.45s var(--akt-ease); } .akt-bar.is-done span { width: 100%; } .akt-bar.is-now span { width: 100%; } /* ---------- the stage ---------- */ .akt-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .akt-story.is-sheet .akt-stage { justify-content: flex-start; gap: 14px; } .akt-hero { display: flex; align-items: center; gap: 14px; } .akt-hero .akt-eve { width: 62px; height: 62px; } .akt-story.is-sheet .akt-hero .akt-eve { width: 42px; height: 42px; } .akt-story .akt-title { font-size: 1.5rem; line-height: 1.24; } .akt-story.is-sheet .akt-title { font-size: 1.15rem; } .akt-story .akt-body { font-size: 0.96rem; line-height: 1.65; } .akt-story.is-sheet .akt-body { font-size: 0.88rem; } .akt-story .akt-points li { font-size: 0.88rem; } .akt-copy { animation: akt-copy-in 0.44s var(--akt-ease) both; } @keyframes akt-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- the art panel ---------------------------------------------- Each card carries a small drawing of the thing it is describing, built out of the same shapes the real screen uses. A phone card with only a heading and a paragraph reads as a terms-and-conditions screen; the drawing is what makes it a demo. */ .akt-art { position: relative; border-radius: 20px; padding: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)), var(--akt-shell-2); border: 1px solid var(--akt-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; animation: akt-copy-in 0.5s var(--akt-ease) 0.06s both; } .akt-story.is-sheet .akt-art { display: none; } .akt-art[hidden] { display: none; } .akt-art-row { display: flex; gap: 9px; } .akt-art-col { display: grid; gap: 9px; } /* A miniature of a real card: icon block, two text bars, a meter. */ .akt-mini { flex: 1; min-width: 0; padding: 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--akt-line); display: grid; gap: 8px; } .akt-mini.is-lit { border-color: rgba(167, 139, 250, 0.5); background: rgba(167, 139, 250, 0.12); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1); } .akt-mini i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(110, 168, 254, 0.16); color: var(--akt-a1); font-size: 0.8rem; } .akt-mini.is-lit i { background: rgba(167, 139, 250, 0.2); color: var(--akt-a2); } .akt-mini b { font-size: 0.74rem; font-weight: 600; color: var(--akt-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .akt-mini small { font-size: 0.66rem; color: var(--akt-ink-faint); } .akt-line { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); } .akt-line.is-short { width: 46%; } .akt-line.is-mid { width: 68%; } .akt-meter { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .akt-meter span { display: block; height: 100%; border-radius: inherit; background: var(--akt-accent); animation: akt-fill 1.1s var(--akt-ease) 0.25s both; } @keyframes akt-fill { from { width: 0; } } .akt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .akt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--akt-line); font-size: 0.7rem; font-weight: 600; color: var(--akt-ink-soft); } .akt-chip i { font-size: 0.66rem; color: var(--akt-a1); } .akt-chip.is-lit { border-color: rgba(167, 139, 250, 0.45); color: #fff; } /* A 5×4 question palette, the exam-hall shape. */ .akt-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; } .akt-grid b { aspect-ratio: 1; border-radius: 5px; background: rgba(255, 255, 255, 0.08); } .akt-grid b.is-ok { background: rgba(52, 211, 153, 0.55); } .akt-grid b.is-no { background: rgba(248, 113, 113, 0.5); } .akt-grid b.is-mark { background: rgba(167, 139, 250, 0.6); } /* ---------- foot ---------- */ .akt-story-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .akt-story-foot .akt-btn { height: 46px; border-radius: 14px; font-size: 0.9rem; } .akt-story-foot .akt-next { flex: 1; } .akt-story-foot .akt-back { width: 46px; padding: 0; flex: none; } /* Tap zones. A story that only advances from a button is a story nobody finishes on a phone — but the zones stop at the foot so they can never swallow a press on Next. */ .akt-tap { position: absolute; top: 0; bottom: 88px; width: 30%; background: transparent; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; } .akt-tap-back { left: 0; } .akt-tap-next { left: 30%; width: 70%; } .akt-story.is-sheet .akt-tap { display: none; } /* ========================================================================== The launcher chip — how the demo gets a second chance ========================================================================== */ .akt-launch { display: inline-flex; align-items: center; gap: 8px; } .akt-launch .eve-bot-icon { filter: drop-shadow(0 2px 6px rgba(0, 229, 255, 0.5)); } /* ========================================================================== Motion off ========================================================================== */ @media (prefers-reduced-motion: reduce) { .akt *, .akt-hole, .akt-ring, .akt-card, .akt-story { animation: none !important; transition-duration: 0.01s !important; } .akt-meter span { width: var(--akt-w, 60%); } } /* ========================================================================== Feature tips (.akh) The quiet half of the onboarding. Where the tour takes the screen over, a tip sits beside one control and lets the student carry on working: no scrim, nothing blocked, and it leaves on its own. Same shell and same accent ramp as the tour, one size down — the two are the same character speaking, so they should not look like two products. ========================================================================== */ .akh { position: fixed; /* Above the study app's tallest modal, below the tour: a tip must never cover the tour, and the queue in akshHint.js keeps them from coexisting anyway. */ z-index: 2147482000; width: min(316px, calc(100vw - 24px)); padding: 14px 15px 13px; border-radius: 18px; background: radial-gradient(120% 100% at 0% 0%, rgba(110, 168, 254, 0.16), transparent 62%), var(--akt-shell); border: 1px solid var(--akt-line-hi); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3); color: var(--akt-ink); font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.24s var(--akt-ease), transform 0.32s var(--akt-spring), top 0.25s var(--akt-ease), left 0.25s var(--akt-ease); } .akh.is-in { opacity: 1; transform: none; } .akh-beak { position: absolute; width: 12px; height: 12px; background: var(--akt-shell); border: 1px solid var(--akt-line-hi); transform: rotate(45deg); } .akh[data-place="bottom"] .akh-beak { top: -7px; border-right: 0; border-bottom: 0; } .akh[data-place="top"] .akh-beak { bottom: -7px; border-left: 0; border-top: 0; } .akh[data-place="right"] .akh-beak { left: -7px; border-right: 0; border-top: 0; } .akh[data-place="left"] .akh-beak { right: -7px; border-left: 0; border-bottom: 0; } .akh[data-place="docked"] .akh-beak { display: none; } .akh-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .akh-eve { display: grid; place-items: center; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 229, 255, 0.35)); } .akh-title { flex: 1; min-width: 0; margin: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.32; letter-spacing: -0.012em; color: #fff; } .akh-x { flex: none; width: 26px; height: 26px; margin: -4px -4px -4px 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--akt-ink-faint); font-size: 0.8rem; cursor: pointer; transition: color 0.16s, background 0.16s; } .akh-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .akh-body { margin: 0; font-size: 0.845rem; line-height: 1.58; color: var(--akt-ink-soft); } .akh-body b { color: #fff; font-weight: 600; } .akh-tip { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--akt-ink-faint); } .akh-tip kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; border: 1px solid var(--akt-line-hi); background: rgba(255, 255, 255, 0.06); font-family: inherit; font-size: 0.68rem; color: var(--akt-ink-soft); } .akh-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .akh-btn { height: 32px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--akt-line); background: rgba(255, 255, 255, 0.05); color: var(--akt-ink); font-family: inherit; font-size: 0.79rem; font-weight: 600; cursor: pointer; transition: background 0.16s, border-color 0.16s, transform 0.16s var(--akt-spring); } .akh-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--akt-line-hi); } .akh-btn:active { transform: scale(0.96); } .akh-btn:focus-visible { outline: 2px solid var(--akt-a1); outline-offset: 2px; } .akh-btn.is-primary { border-color: transparent; background: var(--akt-accent); color: #0b0d12; } .akh-btn.is-primary:hover { filter: brightness(1.08); } .akh-more { margin-right: auto; border-color: transparent; background: transparent; color: var(--akt-a1); padding-inline: 4px; } .akh-more:hover { background: rgba(110, 168, 254, 0.12); color: #fff; } /* ---------- the ring ---------------------------------------------------- A tip points; it does not black the page out. The control keeps its own colours and gets a ring, which is enough to say "this one" without the student losing the screen they are standing on. */ .akh-ring { position: fixed; z-index: 2147481999; border-radius: 14px; pointer-events: none; border: 2px solid rgba(167, 139, 250, 0.75); box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.16), 0 0 26px rgba(110, 168, 254, 0.35); opacity: 0; transition: opacity 0.24s var(--akt-ease), top 0.25s var(--akt-ease), left 0.25s var(--akt-ease), width 0.25s var(--akt-ease), height 0.25s var(--akt-ease); } .akh-ring.is-in { opacity: 1; animation: akh-ring-breathe 2.4s ease-in-out infinite; } @keyframes akh-ring-breathe { 0%, 100% { box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.16), 0 0 26px rgba(110, 168, 254, 0.35); } 50% { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0.05), 0 0 26px rgba(110, 168, 254, 0.18); } } /* Phone: a 316px bubble beside a control does not fit next to anything, so tips dock to the bottom of the screen and point with the ring alone. */ @media (max-width: 560px) { .akh { width: calc(100vw - 20px); left: 10px !important; right: 10px; } .akh-beak { display: none; } } @media (prefers-reduced-motion: reduce) { .akh, .akh-ring { animation: none !important; transition-duration: 0.01s !important; } }