:root { --ui-bg:#111112; --ui-panel:#202022; --ui-inset:#18181a; --ui-border:#383638; --ui-text:#f5f4f2; --ui-muted:#aaa5a4; --ui-accent:#f06448; --ui-profit:#92d8b1; }
/* Reserve the same scrollbar space on the home and guide pages. */
@media(min-width:801px) { html { scrollbar-gutter:stable; } }
.dashboard-save { display:inline-grid;place-items:center;flex-shrink:0;width:34px;height:34px;padding:6px;border:1px solid transparent;border-radius:7px;background:transparent;color:#a99b92;cursor:pointer; }
.dashboard-save svg { display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.dashboard-save:hover { border-color:#805a43;background:#3b2b22;color:#edb28a; }
.dashboard-save[aria-pressed="true"] { color:#e6a370; }
.dashboard-save[aria-pressed="true"] svg { fill:currentColor; }
.dashboard-bookmark-context { position:relative; }
.dashboard-context-save { position:absolute;right:12px;top:12px; }
.dashboard-bookmark-context:has(> .dashboard-context-save) { padding-right:54px; }
.journal-detail-top .dashboard-context-save, #sub-major-content > h3 .dashboard-context-save, #general > .quest-list-heading .dashboard-context-save, .ui-page-intro .dashboard-context-save { top:0;right:0; }
.quest-identity.dashboard-bookmark-context { padding-right:36px; }
.dashboard-row-save { position:absolute;right:0;top:0;width:30px;height:30px;padding:5px; }
#dashboard-toast { position:fixed;z-index:120;right:18px;bottom:18px;max-width:calc(100vw - 36px);padding:10px 15px;border:1px solid #80583e;border-radius:9px;background:#352820;color:#f1ccaf;box-shadow:0 6px 24px #0007;font-size:12px;pointer-events:none; }
#dashboard-toast[hidden] { display:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ui-bg); color:var(--ui-text); font-family:'42dot Sans','Malgun Gothic',sans-serif; line-height:1.6; }
button,input,select { font:inherit; }
a { color:#edab98; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--ui-accent); outline-offset:4px; }
.recommendation { position:fixed; inset:0 0 auto; height:38px; z-index:102; padding:0 max(24px,calc((100vw - 1560px)/2)); background:#121213; border-bottom:1px solid #282628; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.linkicon { display:flex; align-items:center; gap:14px; }
.linkicon a { display:flex; align-items:center; }
.linkicon img { width:24px; height:19px; object-fit:contain; opacity:.85; }
#best-trade { max-width:calc(100vw - 120px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; background:transparent; color:#eaa38e; font-size:12px; cursor:pointer; padding:5px 0; }
.navbar { position:fixed; inset:38px 0 auto; z-index:101; height:82px; padding:0 max(24px,calc((100vw - 1560px)/2)); display:flex; justify-content:space-between; align-items:center; gap:24px; background:rgba(29,29,31,.97); border-bottom:1px solid var(--ui-border); backdrop-filter:blur(16px); }
.logo { display:block; flex-shrink:0; }
.logo img { display:block; height:58px; width:auto; max-width:210px; object-fit:contain; }
.menu { display:flex; align-items:center; gap:12px; margin:0; padding:0; list-style:none; }
.dropdown { position:relative; list-style:none; }
.nav-category { display:flex; align-items:center; gap:12px; border:0; background:transparent; color:#d5d0cd; padding:13px 18px; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; }
.nav-category { text-decoration:none; padding-right:40px; }
.nav-submenu-toggle { position:absolute;right:8px;top:11px;width:24px;height:30px;padding:0;border:0;border-radius:5px;background:transparent;color:#bba79d;cursor:pointer;font-size:14px; }
.nav-submenu-toggle:hover { background:#4a3530;color:#ffd0b9; }
.nav-category:hover,.dropdown.is-open>.nav-category,.dropdown.has-current>.nav-category { background:#352a28; color:#ffac96; }
.submenu { display:none; position:absolute; top:calc(100% + 4px); right:0; min-width:220px; list-style:none; margin:0; padding:7px; background:#242123; border:1px solid #494043; border-radius:12px; box-shadow:0 18px 45px #0006; }
.dropdown.is-open>.submenu { display:block; }
.submenu a { display:block; border-radius:7px; padding:10px 12px; color:#d5ceca; text-decoration:none; font-size:14px; white-space:nowrap; }
.submenu a:hover,.submenu a[aria-current="page"] { background:#3b2c28; color:#ffb39f; }
.submenu a[aria-disabled="true"] { color:#817a77; cursor:default; }
.menu-toggle { display:none; border:1px solid #4d4240; background:#2c2626; color:#f1d6cd; border-radius:8px; width:44px; height:44px; cursor:pointer; font-size:22px; }
#content, .imperial-page #content { width:100%; max-width:1612px; margin:120px auto 0; padding:38px 26px 64px; min-height:calc(100vh - 120px); }
.ui-page-intro { margin-bottom:28px; }
.ui-page-intro .ui-eyebrow { margin:0 0 8px; color:var(--ui-accent); font-size:12px; font-weight:700; letter-spacing:.12em; }
.ui-page-intro h1 { margin:0; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; line-height:1.25; }
.ui-page-intro p:not(.ui-eyebrow) { color:var(--ui-muted); margin:12px 0 0; font-size:15px; }
#content :is(#calculator,#mf_calculator,.cookrate,.BYTB,.atkdefContent,.lurSection,.growthsection,.Completarmor) { padding:26px; border:1px solid var(--ui-border); border-radius:16px; background:var(--ui-panel); width:100%; min-width:0; margin:0; }
#content :is(#calculator,#mf_calculator,.cookrate,.BYTB,.atkdefContent,.lurSection,.growthsection,.Completarmor) h2 { font-size:20px; color:var(--ui-text); text-shadow:none; font-weight:700; margin:0 0 22px; letter-spacing:-.02em; }
#content :is(#calculator,#mf_calculator,.cookrate,.atkdefContent) :is(input:not([type="checkbox"]),select) { width:100%; height:46px; min-width:0; padding:0 12px; border:1px solid #494144; border-radius:8px; background:#141416; color:var(--ui-text); font-size:15px; color-scheme:dark; text-shadow:none; }
#content :is(input:not([type="checkbox"]),select):focus { border-color:var(--ui-accent); }
#content input[type="checkbox"] { accent-color:var(--ui-accent); width:17px; height:17px; flex-shrink:0; margin:0; }
#content .ui-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid #363134; }
#content .ui-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
#content .ui-field>label:first-child { font-size:12px; font-weight:500; color:#c6c0bd; line-height:1.5; }
#content .ui-field>label:nth-child(2) { display:block; min-height:38px; padding:8px 0; color:var(--ui-profit); font-size:17px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#content .ui-field>label:nth-child(2) label { font:inherit; color:inherit; }
#content :is(.checkbox-container,.checkbox-container1) { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:12px 0; padding:0; }
#content :is(.checkbox-container,.checkbox-container1)>label { display:flex; align-items:center; gap:9px; border:1px solid #423a3b; padding:12px; border-radius:8px; background:var(--ui-inset); color:#c7c0bc; font-size:12px; cursor:pointer; }
#content :is(.checkbox-container,.checkbox-container1)>label:has(:checked) { border-color:#986052; background:#382720; color:#ffb39f; }
#content #result { padding:20px 24px; margin-top:24px; background:#2a2220; border:1px solid #654238; border-radius:12px; color:#c7bbb5; font-size:17px; }
#content #final-mastery { color:var(--ui-profit); font-size:32px; font-weight:800; margin:0 8px; font-variant-numeric:tabular-nums; }
#content :is(.mf-results-container,.mf-results-container1) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
#content :is(.mf-results-container,.mf-results-container1)>h1 { margin:0; font-size:18px; padding:18px; border:1px solid #654238; border-radius:10px; background:#2a2220; color:var(--ui-profit); font-weight:600; overflow-wrap:anywhere; }
#content :is(.mf-results-container,.mf-results-container1)>h1:empty { display:none; }
#content #table-wrapper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:26px; }
#content #table-wrapper>div { min-width:0; padding:18px; background:var(--ui-inset); border:1px solid var(--ui-border); border-radius:12px; }
#content #table-wrapper h2 { font-size:16px; }
#content .ui-table-scroll { overflow-x:auto; max-width:100%; min-width:0; scrollbar-color:#795448 #252123; border:1px solid var(--ui-border); border-radius:10px; }
#content .ui-table-scroll table { border:0; border-collapse:collapse; width:100%; font-size:14px; text-align:left; font-variant-numeric:tabular-nums; }
#content .ui-table-scroll th { border:0; background:#302827; color:#e0b7a9; padding:13px 15px; font-size:12px; font-weight:600; white-space:nowrap; }
#content .ui-table-scroll td { border:0; border-top:1px solid #353032; background:transparent; padding:12px 15px; color:#d5d0ce; font-size:13px; }
#content .ui-table-scroll tbody tr:hover { background:#2c2525; }
#content .ui-table-scroll td:not(:first-child) { text-align:right; }
#content #cookLine1 { display:flex; align-items:center; gap:16px; padding:18px; background:var(--ui-inset); border:1px solid var(--ui-border); border-radius:10px; max-width:420px; }
#content #cookLine1 label { white-space:nowrap; font-size:13px; color:var(--ui-muted); }
#content :is(#cookLine2,#cookLine3) { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
#content :is(#cookLine2,#cookLine3) .ui-field { padding:18px; background:#2a2220; border:1px solid #654238; border-radius:10px; }
#content .ckratetable { margin-top:26px; }
#content :is(.TBLine1,.TBLine2) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
#content :is(.TBLine1,.TBLine2)>div { min-width:0; padding:20px; background:var(--ui-inset); border:1px solid var(--ui-border); border-radius:12px; }
#content .BYTB h2 { font-size:18px; margin-bottom:16px; }
#content .atkdefTBLine { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; align-items:start; }
#content .atkdefTBLine>div { min-width:0; }
#content .atkdefTBLine h2 { font-size:17px; }
#content .ipgroup { grid-template-columns:repeat(5,minmax(0,1fr)); }
#content .growthsection { padding:0; background:transparent; border:0; }
#content .growthsection>div:not(:empty) { padding:24px; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:14px; margin-bottom:18px; }
#content .growthsection label { font-size:15px; color:#c9c1bc; line-height:2; overflow-wrap:anywhere; }
#content .growthsection label span[style] { color:#ecb298 !important; text-shadow:none !important; }
#content .growthsection a { color:#f2a88e; text-decoration:underline; text-underline-offset:4px; }
#content .growthsection a:hover { color:#ffd3c3; }
#content .lurSection>div { border-left:2px solid #805043; background:var(--ui-inset); padding:18px 22px; margin:0 0 14px; border-radius:0 10px 10px 0; font-size:15px; color:#d8cdc7; line-height:1.9; }
#content .Completarmor #cparmrank { padding:18px; border:1px solid #654238; border-radius:10px; background:#2a2220; color:var(--ui-profit); font-size:20px; margin:24px 0 12px; }
#content .Completarmor>br { display:none; }
#content .Completarmor>div label { display:block; padding:14px 18px; margin:8px 0; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-inset); color:#d5ccc6; font-size:14px; }
#content .ui-home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
#content .ui-home-card { padding:25px; border:1px solid var(--ui-border); border-radius:16px; background:var(--ui-panel); }
#content .ui-home-card h2 { margin:0 0 18px; font-size:22px; }
#content .ui-home-card a { display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-top:1px solid #393234; color:#c9c1bd; font-size:14px; text-decoration:none; }
#content .ui-home-card a::after { content:'↗'; color:var(--ui-accent); }
#content .ui-home-card a:hover { color:#ffb7a3; }
@media(max-width:1100px) {
 .navbar { height:76px; }
 .nav-category { padding:12px; font-size:14px; }
 #content .ui-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #content :is(.checkbox-container,.checkbox-container1) { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #content #table-wrapper { grid-template-columns:1fr; }
 #content :is(.TBLine1,.TBLine2) { grid-template-columns:1fr; }
}
@media(max-width:1000px) {
 .recommendation { padding:0 16px; }
 .navbar { height:70px; padding:0 16px; }
 .logo img { height:48px; }
 .menu-toggle { display:block; }
 .menu { display:none; position:absolute; inset:70px 0 auto; max-height:calc(100dvh - 108px); overflow-y:auto; padding:12px 16px 18px; background:#201d1e; border-bottom:1px solid #4a3b38; }
 .menu.active { display:block; }
 .nav-category { width:100%; justify-content:space-between; font-size:16px; text-align:left; }
 .submenu { position:static; min-width:0; box-shadow:none; border:0; background:#181617; margin:4px 0 8px; padding:6px; }
 .submenu a { white-space:normal; }
 #content,.imperial-page #content { margin-top:108px; padding:28px 18px 44px; }
 #content .atkdefTBLine { grid-template-columns:1fr; }
 #content .ui-home-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 #content :is(#calculator,#mf_calculator,.cookrate,.BYTB,.atkdefContent,.lurSection,.Completarmor) { padding:18px 14px; border-radius:12px; }
 #content .ui-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; }
 #content :is(.checkbox-container,.checkbox-container1) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 #content :is(.checkbox-container,.checkbox-container1)>label { padding:10px; font-size:11px; }
 #content :is(.mf-results-container,.mf-results-container1) { grid-template-columns:1fr; }
 #content .ui-table-scroll th,#content .ui-table-scroll td { padding:10px; font-size:12px; }
 #content .BYTB .ui-table-scroll table,#content .ckratetable table { min-width:480px; }
 #content :is(.TBLine1,.TBLine2)>div { padding:14px; }
 #content .growthsection>div:not(:empty) { padding:18px; }
 #content .growthsection label { font-size:13px; }
 #content .growthsection h2 { font-size:18px; }
 .ui-page-intro p:not(.ui-eyebrow) { font-size:13px; }
 #content .Completarmor #cparmrank { font-size:17px; }
 #content .Completarmor>div label { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

#content .mastery-storage-status {
  color: var(--muted, #a7adb8);
  font-size: 13px;
  line-height: 1.6;
  margin: -4px 0 20px;
}
.quest-submenu { max-height:calc(100dvh - 160px); overflow-y:auto; overscroll-behavior:contain; }
.class-submenu { width:480px; grid-template-columns:repeat(4,minmax(0,1fr)); max-height:calc(100dvh - 160px); overflow-y:auto; }
.dropdown.is-open>.class-submenu { display:grid; }
@media(min-width:1001px) and (max-width:1150px) { .navbar { gap:10px;padding-inline:18px; }.menu { gap:2px; }.nav-category { padding:12px 10px;gap:6px;font-size:14px; }.logo img { max-width:160px; } }
.nav-category { padding-right:40px; }
@media(min-width:1001px) and (max-width:1150px) { .nav-category { padding-right:30px; }.nav-submenu-toggle { right:3px;width:22px; } }
@media(min-width:1001px) { .class-submenu { left:0;right:auto; } }
@media(min-width:1001px) and (max-width:1250px) { .class-submenu { left:auto;right:0;transform:translateX(150px); } }
@media(max-width:1000px) { .class-submenu { width:100%;grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible; }.class-submenu a { padding:8px;font-size:12px; } }
#quest-pagination { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; }
@media(max-width:1000px) { .quest-submenu { max-height:none; overflow:visible; } }

/* Frame the chosen artwork without changing its lettering or emblem. */
.logo-crop { display:block; position:relative; overflow:hidden; width:210px; aspect-ratio:1146 / 352; }
.logo .logo-crop>img { position:absolute; left:-27.3997%; top:-69.8864%; display:block; width:154.7993%; height:auto; max-width:none; mix-blend-mode:lighten; }
@media(min-width:1001px) and (max-width:1250px) { .logo-crop { width:145px; } }
@media(max-width:1000px) { .logo-crop { width:180px; } }

/* Shared menu icons keep the navigation readable at every header width. */
.menu { gap:4px; }
.nav-category { gap:7px; padding:13px 33px 13px 12px; font-size:15px; white-space:nowrap; }
.nav-icon { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:#c79581; }
.nav-label { min-width:0; }
.nav-category:hover .nav-icon,.dropdown.is-open>.nav-category .nav-icon,.dropdown.has-current>.nav-category .nav-icon { color:#ffac96; }
.nav-submenu-toggle { right:5px; }
@media(min-width:1001px) and (max-width:1250px) {
 .navbar { gap:12px; padding-inline:18px; }
 .logo img { max-width:145px; }
 .menu { gap:2px; }
 .nav-category { padding:12px 27px 12px 8px; gap:6px; font-size:13px; }
 .nav-icon { width:16px; height:16px; flex-basis:16px; }
 .nav-submenu-toggle { right:2px; width:22px; }
}
@media(max-width:1000px) {
 .nav-category { justify-content:flex-start; gap:12px; padding:12px 56px 12px 12px; font-size:16px; }
 .nav-icon { width:20px; height:20px; flex-basis:20px; }
 .nav-submenu-toggle { right:5px; top:3px; width:44px; height:44px; }
}

/* Align the logo with the page title, including the desktop ad layout. */
@media(min-width:1001px) {
 .navbar { padding-left:max(26px,calc((100% - 1612px)/2 + 26px)); }
}
@media(min-width:1848px) and (min-height:820px) {
 .navbar { padding-left:calc((100% - 1796px)/2 + 26px); }
}
.navbar { padding-left:var(--site-title-left,max(26px,calc((100% - 1612px)/2 + 26px))); }