/* RegexArena Design System v2 — derived from approved Cloud Design reference */
:root {
  --bg: #f5f7f3;
  --bg-soft: #eef3ed;
  --surface: #ffffff;
  --surface-2: #f7faf6;
  --surface-3: #edf4ef;
  --border: #dfe6df;
  --border-strong: #cbd7ce;
  --text: #1d2821;
  --text-soft: #33403a;
  --muted: #5a665f;
  --muted-2: #6b766e;
  --primary: #2f7d5b;
  --primary-hover: #25694b;
  --primary-deep: #1b4e37;
  --primary-soft: #e2f1e8;
  --primary-border: #c9e2d3;
  --success: #1f6b4b;
  --success-soft: #edf7f1;
  --warning: #7a5a17;
  --warning-soft: #fcf8ee;
  --danger: #8c3f3f;
  --danger-soft: #faf1f0;
  --code-bg: #202b24;
  --code-border: #334139;
  --code-text: #eff8f1;
  --shadow: 0 14px 40px rgba(31,50,38,.08);
  --shadow-sm: 0 6px 18px rgba(31,50,38,.06);
  --shadow-hover: 0 12px 28px rgba(31,50,38,.10);
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --max-width: 1160px;
  --header-h: 69px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

@keyframes ra-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes ra-float { from { transform:translateY(0) rotate(0deg); } to { transform:translateY(-22px) rotate(8deg); } }
@keyframes ra-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(47,125,91,.34); } 50% { box-shadow:0 0 0 10px rgba(47,125,91,0); } }
@keyframes ra-pop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.14); opacity:1; } 100% { transform:scale(1); opacity:1; } }

html { background:var(--bg); }
body.ra-design-v2 {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.ra-design-v2 a { text-underline-offset:2px; }
body.ra-design-v2 main a:not(.btn):not(.navbar-brand):not(.hook-question):not(.learn-topic-card):not(.related-link) { color:var(--primary-hover); }
body.ra-design-v2 main a:not(.btn):not(.navbar-brand):not(.hook-question):not(.learn-topic-card):not(.related-link):hover { color:var(--primary-deep); }
body.ra-design-v2 code,
body.ra-design-v2 kbd,
body.ra-design-v2 pre { font-family:var(--font-mono); }
body.ra-design-v2 :focus-visible { outline:3px solid #14503a; outline-offset:2px; border-radius:8px; }

/* Header */
body.ra-design-v2 .site-header {
  position:sticky; top:0; z-index:1030;
  background:rgba(245,247,243,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(203,215,206,.82);
}
body.ra-design-v2 .navbar { min-height:69px; padding:12px 0; }
body.ra-design-v2 .navbar > .container-shell { gap:16px; }
body.ra-design-v2 .navbar-brand { gap:10px; font-size:1.05rem; font-weight:800; letter-spacing:-.025em; text-decoration:none; }
body.ra-design-v2 .brand-mark {
  width:36px; height:36px; border-radius:11px;
  background:var(--primary-soft); border:1px solid var(--primary-border);
  color:var(--primary-hover); font-family:var(--font-mono); font-weight:700;
}
body.ra-design-v2 .navbar-nav { gap:4px !important; }
body.ra-design-v2 .nav-link {
  min-height:44px; display:flex; align-items:center;
  padding:9px 13px !important; border-radius:999px;
  color:var(--muted) !important; font-weight:650;
  text-decoration:none !important; transition:background .18s ease,color .18s ease,transform .18s ease;
}
body.ra-design-v2 .nav-link:hover { background:#e8efe9; color:var(--text) !important; }
body.ra-design-v2 .nav-link.active { background:transparent; color:var(--text) !important; font-weight:750; text-decoration:underline !important; text-decoration-color:#9bb9a5 !important; text-decoration-thickness:2px !important; text-underline-offset:5px; }
body.ra-design-v2 .navbar-toggler { width:44px; height:44px; padding:8px; border:1px solid var(--border-strong); border-radius:12px; background:#fff; }
body.ra-design-v2 .header-actions { display:flex; align-items:center; gap:8px; margin-left:8px; }
body.ra-design-v2 .lang-switch { min-height:44px; padding:10px 13px; gap:6px; font-size:.85rem; white-space:nowrap; }
body.ra-design-v2 .header-cta { min-height:44px; padding:11px 19px; }

/* Core components */
body.ra-design-v2 .container-shell { width:min(100% - 40px,var(--max-width)); }
body.ra-design-v2 .page-section { padding:64px 0; }
body.ra-design-v2 .page-title { margin-top:14px; font-size:clamp(2rem,4.8vw,3.25rem); line-height:1.08; letter-spacing:-.038em; font-weight:800; text-wrap:pretty; }
body.ra-design-v2 .page-subtitle { color:#4d5a52; font-size:1.06rem; line-height:1.65; max-width:66ch; text-wrap:pretty; }
body.ra-design-v2 .section-title { font-weight:800; letter-spacing:-.03em; }
body.ra-design-v2 .pill {
  padding:7px 12px; border:1px solid var(--primary-border); border-radius:999px;
  color:var(--primary-hover); background:var(--primary-soft); font-size:.82rem; font-weight:700;
}
body.ra-design-v2 .badge-soft { padding:6px 11px; background:var(--primary-soft); color:var(--primary-hover); font-size:.78rem; font-weight:700; }
body.ra-design-v2 .card-glass {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:none;
}
body.ra-design-v2 .card-glass:hover { border-color:#d5ded7; }
body.ra-design-v2 .btn { min-height:44px; font-weight:700; }
body.ra-design-v2 .btn-game { padding:11px 19px; background:var(--primary); border-color:var(--primary); border-radius:999px; font-weight:750; box-shadow:none; }
body.ra-design-v2 .btn-game:hover, body.ra-design-v2 .btn-game:focus { background:var(--primary-hover); border-color:var(--primary-hover); transform:translateY(-1px); }
body.ra-design-v2 .btn-outline-game { padding:10px 17px; border-color:var(--border-strong); background:#fff; color:var(--text); border-radius:999px; font-weight:700; }
body.ra-design-v2 .btn-outline-game:hover, body.ra-design-v2 .btn-outline-game:focus { background:var(--surface-3); border-color:#b9c8bd; color:var(--text); }
body.ra-design-v2 .feature-icon { width:46px; height:46px; border-radius:14px; background:var(--primary-soft); color:var(--primary-hover); font-family:var(--font-mono); font-weight:700; }
body.ra-design-v2 .code-panel { padding:14px 16px; background:var(--code-bg); border:1px solid var(--code-border); border-radius:14px; color:var(--code-text); line-height:1.75; }
body.ra-design-v2 .form-control, body.ra-design-v2 .form-select { border:1px solid var(--border-strong); border-radius:14px; background:var(--surface-2); color:var(--text); }
body.ra-design-v2 .form-control:focus, body.ra-design-v2 .form-select:focus { border-color:#8fbaa0; box-shadow:0 0 0 .2rem rgba(47,125,91,.12); background:#fff; }

/* Home */
body.ra-design-v2.page-home .retention-hero { position:relative; overflow:hidden; padding:46px 0 30px; }
body.ra-design-v2.page-home .retention-hero > .container-shell { position:relative; z-index:2; }
.hero-decoration { position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:1; overflow:hidden; }
.hero-token { position:absolute; font-family:var(--font-mono); color:#cfdfd4; filter:blur(2px); line-height:1; user-select:none; animation:ra-float 10s ease-in-out infinite alternate; }
.hero-token.t1 { left:6%; top:18%; font-size:78px; }
.hero-token.t2 { right:9%; top:8%; font-size:64px; color:#d6e5da; filter:blur(3px); animation-duration:11s; animation-direction:alternate-reverse; }
.hero-token.t3 { left:44%; bottom:4%; font-size:90px; color:#d9e7dd; filter:blur(3px); animation-duration:13s; }
.hero-token.t4 { right:30%; bottom:20%; font-size:54px; color:#d3e2d8; animation-duration:8s; animation-direction:alternate-reverse; }
body.ra-design-v2 .retention-hero-grid { gap:28px; }
body.ra-design-v2 .retention-copy { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
body.ra-design-v2 .retention-copy .eyebrow { margin:0; }
body.ra-design-v2 .retention-copy h1 { margin:0; font-size:clamp(2.1rem,5.2vw,3.4rem); line-height:1.06; letter-spacing:-.035em; font-weight:800; text-wrap:pretty; }
body.ra-design-v2 .retention-copy > p { margin:0; max-width:46ch; font-size:1.08rem; line-height:1.6; color:#4d5a52; }
body.ra-design-v2 .retention-copy .hero-actions { margin-top:0; gap:10px; }
body.ra-design-v2 .retention-copy .hero-actions .btn { min-height:52px; padding:15px 24px; font-size:1.02rem; }
body.ra-design-v2 .retention-copy .retention-cta-primary { animation:ra-pulse 3.4s ease-in-out infinite; }
body.ra-design-v2 .hook-question { margin-top:0; width:100%; max-width:520px; padding:16px 18px; border:1px solid var(--border); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }
body.ra-design-v2 .hook-question:hover { border-color:#b7d8c4; transform:translateY(-2px); box-shadow:var(--shadow-hover); }
body.ra-design-v2 .hook-icon { width:42px; height:42px; border-radius:12px; font-size:1.2rem; }
body.ra-design-v2 .hero-trust { margin-top:0; gap:8px; }
body.ra-design-v2 .hero-trust span { padding:6px 12px; background:var(--bg-soft); border-radius:999px; font-size:.88rem; }
body.ra-design-v2 .hero-trust span::before { display:none; }
body.ra-design-v2 .live-demo { padding:20px; border-radius:30px; box-shadow:var(--shadow); animation:ra-rise .6s .1s ease both; }
body.ra-design-v2 .live-demo-field { background:#fff; border:0; padding:0; }
body.ra-design-v2 .demo-regex-box { background:var(--code-bg); border-color:var(--code-border); border-radius:14px; padding:14px 16px; }
body.ra-design-v2 .live-result { padding:10px 12px; border-radius:12px; }
body.ra-design-v2 .retention-stats { padding:10px 0 8px; }
body.ra-design-v2 .stats-grid { max-width:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body.ra-design-v2 .stat-card { padding:18px; border-radius:20px; }
body.ra-design-v2 .stat-number { font-family:var(--font-mono); font-size:1.9rem; font-weight:700; }
body.ra-design-v2 .feature-card { padding:20px; border-radius:20px; }
body.ra-design-v2 .cta-panel { border-radius:30px; padding:34px 26px; }

/* Hubs, articles, exercises and challenges */
body.ra-design-v2.page-hub .learn-hub-hero { padding:52px 0 28px; }
body.ra-design-v2 .learn-hub-grid { gap:14px; }
body.ra-design-v2 .learn-topic-card {
  padding:20px; border:1px solid var(--border); border-radius:20px; background:#fff;
  box-shadow:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.ra-design-v2 .learn-topic-card:hover, body.ra-design-v2 .learn-topic-card:focus-within { transform:translateY(-2px); border-color:#b7d8c4; box-shadow:var(--shadow-sm); }
body.ra-design-v2 .learn-topic-card .topic-kicker { color:var(--primary-hover); font-family:var(--font-mono); font-size:.73rem; font-weight:750; letter-spacing:.08em; }
body.ra-design-v2 .learn-topic-card h2, body.ra-design-v2 .learn-topic-card h3 { font-weight:750; }
body.ra-design-v2 .learn-topic-card p { color:var(--muted); }
body.ra-design-v2 .article-wrap { width:min(100% - 40px,1160px); }
body.ra-design-v2 .article-layout { gap:22px; }
body.ra-design-v2 .article-main { max-width:780px; }
body.ra-design-v2 .article-breadcrumb { margin-bottom:16px; color:var(--muted-2); }
body.ra-design-v2 .article-breadcrumb a { color:var(--muted-2) !important; }
body.ra-design-v2 .article-main > .pill:first-child { margin-bottom:6px; }
body.ra-design-v2 .article-main h1 { max-width:22ch; }
body.ra-design-v2 .article-main h2 { margin-top:2.6rem; margin-bottom:.75rem; font-size:clamp(1.35rem,2.5vw,1.72rem); letter-spacing:-.022em; font-weight:780; }
body.ra-design-v2 .article-main h3 { font-size:1.15rem; font-weight:750; }
body.ra-design-v2 .article-main p, body.ra-design-v2 .article-main li { color:var(--text-soft); line-height:1.78; }
body.ra-design-v2 .article-meta { gap:8px; color:var(--muted-2); }
body.ra-design-v2 .article-meta > * { padding:5px 9px; border-radius:999px; background:var(--bg-soft); }
body.ra-design-v2 .article-toc { padding:18px; border-radius:20px; background:#fff; border:1px solid var(--border); }
body.ra-design-v2 .article-toc a { padding:6px 0; color:var(--muted) !important; text-decoration:none; }
body.ra-design-v2 .article-toc a:hover { color:var(--text) !important; }
body.ra-design-v2 .article-callout { padding:18px 20px; border:1px solid var(--primary-border); border-left:4px solid var(--primary); background:var(--primary-soft); border-radius:14px; }
body.ra-design-v2 .article-example { border-radius:16px; }
body.ra-design-v2 .related-grid { gap:10px; }
body.ra-design-v2 .related-link { padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--text) !important; font-weight:700; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
body.ra-design-v2 .related-link:hover { transform:translateY(-1px); border-color:var(--primary-border); background:#fbfdfb; }
body.ra-design-v2 .exercise-grid, body.ra-design-v2 .challenge-grid { gap:14px; }
body.ra-design-v2 .exercise-card, body.ra-design-v2 .challenge-card { padding:20px; border-radius:20px; }
body.ra-design-v2 .solution-box { border:1px solid var(--border); border-radius:14px; background:var(--surface-2); padding:14px; }
body.ra-design-v2 .challenge-tests { border:1px solid var(--border); border-radius:14px; }

/* Cheat sheet */
body.ra-design-v2.page-cheat .page-section > .container-shell { max-width:1160px; }
body.ra-design-v2 .cheat-table { border-collapse:separate; border-spacing:0 8px; }
body.ra-design-v2 .cheat-table th { border:0; background:transparent; padding:8px 14px; color:var(--muted-2); }
body.ra-design-v2 .cheat-table td { padding:12px 14px; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
body.ra-design-v2 .cheat-table td:first-child { border-left:1px solid var(--border); border-radius:14px 0 0 14px; color:var(--primary-hover); font-family:var(--font-mono); font-weight:700; }
body.ra-design-v2 .cheat-table td:last-child { border-right:1px solid var(--border); border-radius:0 14px 14px 0; color:var(--text-soft); }

/* Playground */
body.ra-design-v2.page-playground .page-section { padding-top:38px; }
body.ra-design-v2.page-playground .row.g-3 { --bs-gutter-x:16px; --bs-gutter-y:16px; }
body.ra-design-v2.page-playground .card-glass { padding:18px !important; border-radius:20px; }
body.ra-design-v2 .regex-input-wrap { background:var(--surface-2); border:1px solid var(--border-strong); border-radius:14px; padding:7px 10px; }
body.ra-design-v2 .regex-input { font-family:var(--font-mono); min-height:46px; }
body.ra-design-v2 .regex-flags { width:68px; min-height:40px; border-radius:10px; }
body.ra-design-v2.page-playground textarea.form-control { font-family:var(--font-mono); font-size:.92rem; line-height:1.6; background:var(--surface-2) !important; color:var(--text) !important; }
body.ra-design-v2 .playground-output { min-height:180px !important; }
body.ra-design-v2 .playground-output mark { background:#8fc8a4; color:#14271c; padding:2px 3px; border-radius:4px; }

/* Game */
body.ra-design-v2.page-game .game-page { padding:20px 0 40px; }
body.ra-design-v2.page-game .game-shell { gap:14px; }
body.ra-design-v2 .game-topbar { padding:16px; border-radius:20px; }
body.ra-design-v2 .level-kicker { color:var(--primary-hover); font-family:var(--font-mono); font-weight:750; letter-spacing:.08em; }
body.ra-design-v2 .level-title { font-size:1.15rem; font-weight:750; }
body.ra-design-v2 .game-stats { min-width:240px; }
body.ra-design-v2 .stat-pill { padding:9px 7px; border-radius:12px; background:var(--surface-2); }
body.ra-design-v2 .progress-track { height:8px; }
body.ra-design-v2 .world-nav { gap:8px; padding:0 0 4px; }
body.ra-design-v2 .level-dot { width:44px; height:44px; border-radius:12px; }
body.ra-design-v2 .game-grid { gap:14px; }
body.ra-design-v2 .mission-card, body.ra-design-v2 .strings-card, body.ra-design-v2 .regex-card { border-radius:20px; padding:18px; }
body.ra-design-v2 .mission-card .mascot-wrap { padding-top:0; }
body.ra-design-v2 .string-item { position:relative; padding:12px 14px; border-radius:12px; }
body.ra-design-v2 .string-item.status-correct { background:#edf7f1; border-color:#c9e2d3; }
body.ra-design-v2 .string-item.status-false-positive { background:#faf1f0; border-color:#ead0cf; }
body.ra-design-v2 .string-item.status-missed { background:#fcf8ee; border-color:#eadcb9; }
body.ra-design-v2 .state-icon { width:26px !important; height:26px !important; background:#fff !important; border:1px solid currentColor; }
body.ra-design-v2 .symbol-toolbar { gap:8px; }
body.ra-design-v2 .symbol-btn { min-width:46px; min-height:44px; border-radius:10px; }
body.ra-design-v2 .game-actions { gap:8px; }
body.ra-design-v2 .game-actions .btn { min-height:48px; }
body.ra-design-v2 .feedback { min-height:68px; border-radius:14px; padding:13px 14px; }
body.ra-design-v2 .hint-box { border-radius:14px; }
body.ra-design-v2 .complete-card { padding:30px 24px; border-radius:30px; animation:ra-rise .3s ease both; }
body.ra-design-v2 .complete-card::before { content:"✓"; width:64px; height:64px; display:grid; place-items:center; margin:0 auto 12px; border-radius:50%; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary-hover); font-size:1.9rem; font-weight:800; animation:ra-pop .45s ease both; }
body.ra-design-v2 .score-line { padding:11px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
body.ra-design-v2 .capture-xray { border-radius:14px; background:var(--surface-2); }
body.ra-design-v2 .capture-map { border-radius:10px; background:var(--code-bg); border:1px solid var(--code-border); }
body.ra-design-v2 .capture-chip, body.ra-design-v2 .assertion-chip { border-radius:999px; }

/* Footer */
body.ra-design-v2 .site-footer { padding:34px 0; background:#f0f4ef; border-top:1px solid var(--border); color:#4d5a52; }
body.ra-design-v2 .footer-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
body.ra-design-v2 .footer-brand { display:grid; gap:8px; align-content:start; }
body.ra-design-v2 .footer-brand .navbar-brand { justify-self:start; }
body.ra-design-v2 .footer-brand p { margin:0; max-width:34ch; line-height:1.55; }
body.ra-design-v2 .footer-nav { display:grid; gap:8px; align-content:start; }
body.ra-design-v2 .footer-nav strong { color:var(--text); font-size:.88rem; }
body.ra-design-v2 .footer-nav a { color:#4d5a52; text-decoration:underline; text-decoration-color:#bdc9c0; }
body.ra-design-v2 .footer-nav a:hover { color:var(--primary-deep); }
body.ra-design-v2 .footer-meta { display:grid; gap:8px; align-content:start; font-size:.88rem; }

/* Ads when enabled */
body.ra-design-v2 .ad-slot:not([hidden]) { border:1px dashed var(--border-strong); border-radius:16px; background:rgba(255,255,255,.55); color:var(--muted-2); }

@media (min-width: 992px) {
  body.ra-design-v2 .retention-hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:28px; }
  body.ra-design-v2 .article-layout { grid-template-columns:minmax(0,1fr) 300px; gap:28px; }
  body.ra-design-v2 .article-aside { top:92px; }
  body.ra-design-v2 .game-grid { grid-template-columns:minmax(260px,.82fr) minmax(0,1.75fr); }
  body.ra-design-v2 .mission-card { top:89px; }
}

@media (max-width: 991.98px) {
  body.ra-design-v2 .container-shell { width:min(100% - 30px,var(--max-width)); }
  body.ra-design-v2 .navbar-collapse { margin-top:10px; padding:10px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); }
  body.ra-design-v2 .navbar-nav { gap:2px !important; }
  body.ra-design-v2 .nav-link { padding:10px 12px !important; }
  body.ra-design-v2 .header-actions { display:grid; grid-template-columns:1fr auto; margin:8px 0 0; }
  body.ra-design-v2 .header-cta { width:100%; }
  body.ra-design-v2 .retention-copy { text-align:center; align-items:center; }
  body.ra-design-v2 .retention-copy > p { margin-inline:auto; }
  body.ra-design-v2 .retention-copy .hero-actions { justify-content:center; }
  body.ra-design-v2 .hook-question { text-align:left; }
  body.ra-design-v2 .hero-trust { justify-content:center; }
  body.ra-design-v2 .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
  body.ra-design-v2 .container-shell, body.ra-design-v2 .article-wrap { width:min(100% - 22px,var(--max-width)); }
  body.ra-design-v2 .page-section { padding:46px 0; }
  body.ra-design-v2.page-home .retention-hero { padding-top:34px; }
  body.ra-design-v2 .retention-copy h1 { font-size:clamp(2.35rem,12vw,3.2rem); }
  body.ra-design-v2 .retention-copy > p { font-size:.98rem; }
  body.ra-design-v2 .retention-copy .hero-actions { display:grid; grid-template-columns:1fr; width:100%; }
  body.ra-design-v2 .retention-copy .hero-actions .btn { width:100%; }
  body.ra-design-v2 .hook-question { grid-template-columns:auto minmax(0,1fr); }
  body.ra-design-v2 .hook-arrow { display:none; }
  .hero-token.t3, .hero-token.t4 { display:none; }
  body.ra-design-v2 .live-demo { padding:13px; border-radius:20px; }
  body.ra-design-v2 .live-demo-top { align-items:flex-start; flex-direction:column; }
  body.ra-design-v2 .stats-grid { gap:8px; }
  body.ra-design-v2 .stat-card { padding:15px 9px; }
  body.ra-design-v2 .stat-number { font-size:1.45rem; }
  body.ra-design-v2 .page-title { font-size:clamp(2rem,11vw,2.8rem); }
  body.ra-design-v2 .article-main h1 { max-width:none; }
  body.ra-design-v2 .footer-grid { grid-template-columns:1fr 1fr; }
  body.ra-design-v2 .footer-brand, body.ra-design-v2 .footer-meta { grid-column:1 / -1; }
  body.ra-design-v2 .game-stats { min-width:0; width:100%; }
  body.ra-design-v2 .game-topbar { padding:14px; }
  body.ra-design-v2 .mission-card, body.ra-design-v2 .strings-card, body.ra-design-v2 .regex-card { padding:15px; }
  body.ra-design-v2 .capture-chip, body.ra-design-v2 .assertion-chip { width:100%; border-radius:10px; justify-content:space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}


/* ADSENSE CONTENT DEPTH V3 */
.learning-path-section{padding-top:18px!important}.learning-path-heading{max-width:760px;margin:0 auto 24px;text-align:center}.learning-path{max-width:900px;margin:0 auto;display:grid;gap:0}.path-stage{background:#fff;border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)}.path-stage-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}.path-number{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);border:1px solid var(--primary-border);color:var(--primary-hover);font:700 .9rem var(--font-mono)}.path-stage h3{margin:2px 0 0;font-size:1.2rem;font-weight:780}.path-stage>p{margin:0 0 16px;color:var(--text-soft);line-height:1.7}.path-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}.path-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text)!important;text-decoration:none;font-weight:650}.path-links a:hover{border-color:var(--primary-border);background:var(--primary-soft)}.path-links a span{color:var(--primary)}.path-connector{height:46px;display:grid;place-items:center;color:var(--primary);font-size:1.35rem}.path-cta{justify-self:start}.learning-principle{max-width:900px;margin:18px auto 0;padding:16px 18px;border-radius:16px;background:var(--code-bg);color:#dce9df;display:flex;gap:10px;align-items:flex-start;line-height:1.6}.learning-principle strong{color:#9bd0ae;white-space:nowrap}.hub-library-section{padding-bottom:8px!important}.hub-library-section+.page-section{padding-top:10px!important}
.article-quick-answer{margin:20px 0 8px;padding:20px;border:1px solid var(--primary-border);border-radius:18px;background:linear-gradient(135deg,var(--primary-soft),#fbfdfb)}.article-quick-answer h2{margin:.35rem 0 .55rem!important;font-size:1.25rem!important}.article-quick-answer p{margin:0}.article-decision{margin-top:32px}.decision-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}.decision-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:#fff}.decision-index{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-hover);font:700 .72rem var(--font-mono)}.anatomy-list{display:grid;gap:9px;margin:16px 0}.anatomy-row{display:grid;grid-template-columns:minmax(120px,.65fr) minmax(0,1.7fr);gap:14px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);align-items:start}.anatomy-row code{display:inline-block;color:#b9e6c9;background:var(--code-bg);border:1px solid var(--code-border);border-radius:8px;padding:5px 8px;overflow-wrap:anywhere}.anatomy-row span{line-height:1.65;color:var(--text-soft)}.usage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.usage-good,.usage-risk{padding:19px;border:1px solid var(--border);border-radius:18px;background:#fff}.usage-good{border-color:var(--primary-border);background:#fbfdfb}.usage-risk{border-color:#eadcb9;background:#fffdf7}.usage-good h2,.usage-risk h2{margin:.35rem 0 .6rem!important;font-size:1.2rem!important}.usage-good p{margin:0}.usage-risk ul{margin:0;padding-left:1.15rem}.usage-risk li+li{margin-top:.45rem}
@media(max-width:767px){.path-links{grid-template-columns:1fr}.path-stage{padding:19px}.learning-principle{display:grid}.learning-principle strong{white-space:normal}.anatomy-row{grid-template-columns:1fr;gap:8px}.usage-grid{grid-template-columns:1fr}.learning-path-heading{text-align:left}.learning-path-heading .pill{justify-self:start}}


/* PLAYGROUND + CHEAT CONTENT V3 */
.playground-learning{margin-top:38px}.playground-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 30px}.playground-guide-grid article{padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff}.playground-guide-grid h3{margin:.35rem 0 .55rem;font-size:1.02rem;font-weight:760}.playground-guide-grid p{margin:0;color:var(--text-soft);line-height:1.65}.cheat-learning{max-width:100%}.cheat-intent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.cheat-intent-grid>div{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);display:grid;gap:5px}.cheat-intent-grid strong{font-size:.95rem}.cheat-intent-grid span{color:var(--text-soft);line-height:1.58}
@media(max-width:900px){.playground-guide-grid{grid-template-columns:1fr}.cheat-intent-grid{grid-template-columns:1fr}}