body[data-page="BEGINNER"]{
  --bg:#fff8f0;--card:#ffffff;--ink:#263048;--ink-soft:#354158;
  --ink-faint:#596175;--ruby:#625977;--line:#ddd5e7;
  --gold:#7048b8;--gold-bright:#6437a6;--gold-thin:rgba(112,72,184,.35);
  --beginner-lilac:#f1eaff;--beginner-mint:#e7f6ef;--beginner-peach:#fff0e7;
  --beginner-sky:#e9f3ff;--beginner-pink:#fcecf4;
  --beginner-start:#e7f8c9;--beginner-start-ink:#285d32;--beginner-start-action:#2d713b;
  --beginner-start-line:#9ac36e;--beginner-mark-yellow:#ffe47c;--beginner-mark-green:#4b9947;
  background:var(--bg);
}
body[data-page="BEGINNER"] header{background:var(--card);}
body[data-page="BEGINNER"] .menu-overlay{background:var(--bg);}
body[data-page="BEGINNER"] .fab{color:var(--card);}
body[data-page="BEGINNER"] #settingsBtn{background:var(--card)!important;}
body[data-page="BEGINNER"] .back-btn{background:var(--card);}
.beginner-guide{--beginner-cut:12px;color:var(--ink-soft);font-size:16px;line-height:2.2;}
.beginner-guide ruby + ruby{margin-left:0;}
.beginner-guide ruby{ruby-align:center;letter-spacing:0;}
.beginner-guide rt{font-size:max(8px,.5em);}
.beginner-guide *{box-sizing:border-box;}
.beginner-guide h1,.beginner-guide h2,.beginner-guide h3,.beginner-guide p,.beginner-guide dl,.beginner-guide ol,.beginner-guide ul{margin:0;}
.beginner-guide a{color:inherit;}
.beginner-guide a:focus-visible,.beginner-guide summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;}
.beginner-guide .beginner-intro{position:relative;padding:24px 16px;background:var(--beginner-start);border:1px solid var(--beginner-start-line);border-radius:18px 18px 6px 18px;margin-bottom:18px;}
.beginner-guide .beginner-intro::before{content:"";position:absolute;top:20px;right:16px;width:28px;height:34px;background:linear-gradient(90deg,var(--beginner-mark-yellow) 50%,var(--beginner-mark-green) 50%);clip-path:polygon(0 0,50% 12%,100% 0,100% 62%,50% 100%,0 62%);}
.beginner-guide .beginner-intro h1{color:var(--beginner-start-ink);}
.beginner-guide .beginner-eyebrow{padding-right:38px;color:var(--beginner-start-ink);font-size:12px;letter-spacing:.08em;}
.beginner-guide h1{font-family:var(--font-head);font-size:28px;line-height:1.8;color:var(--ink);letter-spacing:-.03em;margin:6px 0 12px;}
.beginner-guide .beginner-lead{font-size:16px;}
.beginner-guide .beginner-primary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-top:20px;padding:12px 18px;background:var(--beginner-start-action);color:var(--card);font-weight:900;clip-path:polygon(var(--beginner-cut) 0,100% 0,100% calc(100% - var(--beginner-cut)),calc(100% - var(--beginner-cut)) 100%,0 100%,0 var(--beginner-cut));}
.beginner-guide .beginner-primary rt{color:inherit;}
.beginner-guide .beginner-roadmap{margin:0 0 24px;padding:16px 12px;border-top:1px solid var(--gold-thin);border-bottom:1px solid var(--gold-thin);}
.beginner-guide .beginner-roadmap>p{font-size:13px;color:var(--ink-faint);margin-bottom:8px;}
.beginner-guide .beginner-roadmap ol{list-style:none;display:grid;gap:0;padding:0;}
.beginner-guide .beginner-roadmap a{display:flex;align-items:center;gap:16px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;}
.beginner-guide .beginner-roadmap li:last-child a{border-bottom:0;}
.beginner-guide .beginner-number{font-family:var(--font-en);font-variant-numeric:tabular-nums;font-size:24px;line-height:1;color:var(--gold);font-weight:700;flex:none;}
.beginner-guide .beginner-step{position:relative;margin:0 0 20px;padding:24px 16px;background:var(--card);border:1px solid var(--gold-thin);clip-path:polygon(var(--beginner-cut) 0,100% 0,100% calc(100% - var(--beginner-cut)),calc(100% - var(--beginner-cut)) 100%,0 100%,0 var(--beginner-cut));scroll-margin-top:84px;}
.beginner-guide #beginner-words{background:var(--beginner-mint);}
.beginner-guide #beginner-lanes{background:var(--beginner-sky);}
.beginner-guide #beginner-roles{background:var(--beginner-peach);}
.beginner-guide #beginner-hero{background:var(--card);}
.beginner-guide #beginner-manners{background:var(--beginner-pink);}
.beginner-guide #beginner-ranks{background:var(--beginner-lilac);}
.beginner-guide .beginner-step-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.beginner-guide h2{font-family:var(--font-head);font-size:19px;line-height:2;color:var(--ink);letter-spacing:-.01em;}
.beginner-guide .beginner-terms{margin:18px 0;}
.beginner-guide .beginner-term{padding:14px 0;border-top:1px solid var(--line);}
.beginner-guide .beginner-term dt{font-weight:900;color:var(--gold-bright);}
.beginner-guide .beginner-term dt a{display:inline-block;min-height:44px;text-decoration:underline;text-underline-offset:5px;}
.beginner-guide .beginner-term dd{margin:4px 0 0;font-size:16px;}
.beginner-guide .beginner-source{font-size:12px;line-height:2;color:var(--ink-faint);margin:12px 0;}
.beginner-guide .beginner-source a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:4px;}
.beginner-guide .beginner-text-link{display:inline-block;min-height:48px;font-size:15px;font-weight:700;color:var(--gold-bright);text-decoration:underline;text-underline-offset:6px;}
.beginner-guide .beginner-text-link>span{margin-left:12px;}
.beginner-guide .beginner-roles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0;}
.beginner-guide .beginner-roles li{border-bottom:2px solid var(--gold-thin);padding:6px 12px;font-size:14px;color:var(--ink);}
.beginner-guide .beginner-map{margin:24px 0;padding:0;}
.beginner-guide .beginner-map-image-link{display:block;}
.beginner-guide .beginner-map img{display:block;width:100%;height:auto;}
.beginner-guide .beginner-map figcaption{padding-top:12px;}
.beginner-guide .beginner-map figcaption>p:not(.beginner-source){font-size:15px;}
.beginner-guide .beginner-map-legend{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0;}
.beginner-guide .beginner-map-legend a{display:inline-block;min-height:44px;padding:8px 12px;border-left:3px solid var(--beginner-lane-color);background:color-mix(in srgb,var(--beginner-lane-color) 12%,var(--card));font-size:14px;font-weight:700;}
.beginner-guide .beginner-map-note{margin-top:12px;}
.beginner-guide .beginner-lane-guides{display:grid;gap:12px;margin-top:24px;}
.beginner-guide .beginner-lane-guide{min-width:0;padding:16px 14px;background:color-mix(in srgb,var(--beginner-lane-color) 12%,var(--card));border-left:3px solid var(--beginner-lane-color);}
.beginner-guide .beginner-lane-guide p.beginner-lane-guide-title{font-family:var(--font-head);font-size:16px;line-height:1.8;color:var(--ink);margin-bottom:6px;}
.beginner-guide .beginner-lane-guide p{font-size:14px;line-height:1.9;}
.beginner-guide .beginner-lane-guide>a{display:inline-flex;align-items:center;gap:0;min-height:44px;margin-top:8px;color:var(--gold-bright);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;}
.beginner-guide .beginner-lane-guide>a>span{margin-left:10px;}
.beginner-guide [data-beginner-lane="gold"]{--beginner-lane-color:var(--role-marksman);}
.beginner-guide [data-beginner-lane="exp"]{--beginner-lane-color:var(--role-fighter);}
.beginner-guide [data-beginner-lane="mid"]{--beginner-lane-color:var(--role-mage);}
.beginner-guide [data-beginner-lane="jungle"]{--beginner-lane-color:var(--role-assassin);}
.beginner-guide [data-beginner-lane="roam"]{--beginner-lane-color:var(--role-support);}
.beginner-guide .beginner-hero-group{scroll-margin-top:84px;margin-top:20px;padding:18px 12px;background:color-mix(in srgb,var(--beginner-lane-color) 12%,var(--card));border-left:3px solid var(--beginner-lane-color);}
.beginner-guide .beginner-heroes.beginner-featured-heroes{grid-template-columns:1fr;margin-bottom:0;}
.beginner-guide .beginner-hero-choices{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.beginner-guide .beginner-hero-choices>summary{position:relative;min-height:56px;padding:16px 36px 16px 0;font-size:16px;font-weight:700;list-style:none;cursor:pointer;color:var(--gold-bright);}
.beginner-guide .beginner-hero-choices>summary::-webkit-details-marker{display:none;}
.beginner-guide .beginner-hero-choices>summary::after{content:'+';position:absolute;right:4px;top:16px;font-family:var(--font-en);font-size:22px;line-height:1;}
.beginner-guide .beginner-hero-choices[open]>summary::after{content:'−';}
.beginner-guide .beginner-hero-choices-content{padding-bottom:20px;}
.beginner-guide .beginner-hero-choices>summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;}
.beginner-guide .beginner-hero-group h3{font-size:18px;line-height:2;color:var(--ink);font-family:var(--font-head);margin-bottom:8px;}
.beginner-guide .beginner-hero-group>p{font-size:15px;}
.beginner-guide .beginner-heroes{display:grid;gap:12px;list-style:none;padding:0;margin:18px 0 12px;}
.beginner-guide .beginner-hero{min-width:0;padding:16px;border:1px solid var(--line);background:var(--bg);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.beginner-guide .beginner-hero-link{display:flex;align-items:center;gap:14px;min-height:80px;}
.beginner-guide .beginner-hero-rank{font-size:14px;color:var(--ink-faint);margin-top:8px;}
.beginner-guide .beginner-hero-reason{font-size:16px;margin-top:8px;}
.beginner-guide .beginner-hero img{width:56px;height:56px;object-fit:cover;flex:none;border:2px solid var(--beginner-lane-color);border-radius:8px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.beginner-guide .beginner-hero-copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;font-size:13px;line-height:1.9;}
.beginner-guide .beginner-hero-copy strong{font-size:17px;color:var(--ink);}
.beginner-guide .beginner-hero-note{color:var(--ink-faint);font-size:12px;}
.beginner-guide .beginner-arrow{font-size:20px;color:var(--gold-bright);flex:none;}
.beginner-guide .beginner-quiz{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;margin-top:16px;border-top:1px solid var(--gold-thin);}
.beginner-guide .beginner-quiz>span:first-child{display:flex;flex-direction:column;gap:4px;}
.beginner-guide .beginner-quiz strong{font-size:17px;color:var(--ink);}
.beginner-guide .beginner-quiz>span>span{font-size:13px;color:var(--ink-faint);}
.beginner-guide .beginner-related{display:grid;gap:8px;margin:16px 0 0;}
.beginner-guide .beginner-related>a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:98px;padding:16px 42px 16px 14px;background:var(--bg);border:1px solid var(--line);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.beginner-guide .beginner-related strong{font-size:16px;line-height:2;color:var(--ink);}
.beginner-guide .beginner-related>a>span:not(.beginner-arrow){font-size:13px;color:var(--ink-faint);line-height:2;}
.beginner-guide .beginner-related .beginner-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);}
.beginner-guide .beginner-ranks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;list-style-position:inside;padding:0;margin:16px 0;font-size:13px;}
.beginner-guide .beginner-ranks li{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;}
.beginner-guide .beginner-ranks li::marker{font-family:var(--font-en);color:var(--gold);font-weight:700;}
.beginner-guide .beginner-section{padding:20px 8px;margin:0 0 16px;scroll-margin-top:84px;}
.beginner-guide .beginner-section>h2{margin-bottom:12px;}
.beginner-guide .beginner-faq{border-bottom:1px solid var(--line);}
.beginner-guide .beginner-faq summary{position:relative;padding:18px 28px 18px 0;list-style:none;cursor:pointer;font-size:15px;font-weight:700;color:var(--ink);}
.beginner-guide .beginner-faq summary::-webkit-details-marker{display:none;}
.beginner-guide .beginner-faq summary::after{content:'+';position:absolute;right:2px;top:18px;color:var(--gold);font-family:var(--font-en);font-size:22px;}
.beginner-guide .beginner-faq[open] summary::after{content:'−';}
.beginner-guide .beginner-faq>div{padding:0 0 18px;font-size:15px;}
.beginner-guide .beginner-term-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.beginner-guide .beginner-term-links a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border:1px solid var(--line);font-size:14px;}
.beginner-guide .beginner-popular-terms{list-style:none;padding:0;display:grid;gap:12px;margin:18px 0;}
.beginner-guide .beginner-popular-terms>li{padding:18px 16px;border:1px solid var(--line);background:var(--card);border-radius:12px;}
.beginner-guide .beginner-popular-heading{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;}
.beginner-guide .beginner-popular-heading .beginner-number{min-width:22px;}
.beginner-guide .beginner-popular-heading h3{font-size:17px;line-height:2;color:var(--ink);margin:0;font-family:var(--font-head);}
.beginner-guide .beginner-popular-heading a{display:inline-block;min-height:44px;color:var(--gold-bright);text-decoration:underline;text-underline-offset:5px;}
.beginner-guide .beginner-popular-terms p{font-size:16px;line-height:2.2;}
.device.no-furigana .beginner-guide .beginner-popular-terms p{line-height:1.8;}
.beginner-guide .beginner-sources{margin:24px 8px 12px;font-size:12px;color:var(--ink-faint);line-height:2;}
.beginner-guide .beginner-sources summary{padding:12px 0;min-height:44px;cursor:pointer;}
.beginner-guide .beginner-sources ul{padding-left:20px;}
.beginner-guide .beginner-sources a{text-decoration:underline;text-underline-offset:4px;}
.device.no-furigana .beginner-guide{font-weight:400;line-height:1.8;letter-spacing:.015em;}
.device.no-furigana .beginner-guide h1{line-height:1.4;}
.device.no-furigana .beginner-guide h2{line-height:1.6;}
.device.no-furigana .beginner-guide .beginner-term dd{line-height:1.8;}
@media(min-width:1024px){
  .beginner-guide .beginner-hero-group{scroll-margin-top:110px;}
  .beginner-guide .beginner-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 32px;padding:28px;}
  .beginner-guide .beginner-eyebrow,.beginner-guide h1,.beginner-guide .beginner-lead{grid-column:1;}
  .beginner-guide h1{font-size:36px;}
  .beginner-guide .beginner-primary{grid-column:2;grid-row:2 / 4;align-self:end;min-width:210px;margin:0;}
  .beginner-guide .beginner-roadmap{padding:18px 0;}
  .beginner-guide .beginner-roadmap ol{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
  .beginner-guide .beginner-roadmap a{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:0;font-size:13px;}
  .beginner-guide .beginner-step{padding:28px;margin-bottom:24px;}
  .beginner-guide .beginner-step-heading{gap:18px;margin-bottom:16px;}
  .beginner-guide .beginner-step-heading .beginner-number{font-size:32px;}
  .beginner-guide h2{font-size:23px;}
  .beginner-guide .beginner-heroes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .beginner-guide .beginner-lane-guides{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .beginner-guide .beginner-related{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .beginner-guide .beginner-section{padding:24px 0;}
  .beginner-guide .beginner-ranks{font-size:15px;gap:0 24px;}
  .beginner-guide .beginner-popular-terms{grid-template-columns:repeat(2,minmax(0,1fr));}
}


.account-slot.login-btn{background:var(--panel);border-color:#2A2724;color:#9A9792;opacity:1;}