:root { --db-ink:#101a1b; --db-paper:#efe9dd; --db-paper-light:#f7f2e8; --db-line:rgba(16,26,27,.15); --db-gold:#d3a04b; --db-muted:#5f6b68; }
* { box-sizing:border-box; }
.db-page { min-height:100vh; color:var(--db-ink); background:var(--db-paper); }
.db-heading { min-height:330px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:3rem; padding:4rem max(1rem,calc((100vw - 1320px)/2)) 2.7rem; color:#f3eee3; background:#081213; position:relative; overflow:hidden; isolation:isolate; }
.db-heading::after { content:''; width:520px; height:520px; position:absolute; right:-90px; bottom:-300px; z-index:-1; border:1px solid rgba(232,184,94,.24); border-radius:50%; box-shadow:0 0 0 55px rgba(232,184,94,.025),0 0 0 110px rgba(232,184,94,.018); }
.db-heading h1 { margin:.25rem 0 .7rem; font-family:var(--display); font-size:clamp(3.5rem,6vw,6.3rem); font-weight:400; line-height:.92; }
.db-heading > div > p:last-child { max-width:680px; margin:0; color:rgba(243,238,227,.64); }
.db-stats { display:flex; border-block:1px solid rgba(255,255,255,.18); }
.db-stats span { min-height:72px; display:grid; align-content:center; padding:.7rem 1.2rem; border-right:1px solid rgba(255,255,255,.13); color:rgba(243,238,227,.55); font-size:.65rem; }
.db-stats span:last-child { border-right:0; }.db-stats strong { color:#efc372; font-family:var(--display); font-size:1.35rem; font-weight:400; }
.db-workspace,.growth-details { padding:2.8rem max(1rem,calc((100vw - 1320px)/2)) 4rem; }
.db-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) 230px; gap:.8rem; align-items:center; }
.db-toolbar select,.calculator-controls input,.calculator-controls select { min-height:46px; border:1px solid var(--db-line); padding:0 .85rem; color:var(--db-ink); background:var(--db-paper-light); }
.db-result-line { display:flex; justify-content:space-between; gap:1rem; margin-top:1.4rem; padding:.75rem 0; border-top:1px solid var(--db-ink); border-bottom:1px solid var(--db-line); }
.db-result-line p,.db-result-line small { margin:0; }.db-result-line small { color:var(--db-muted); }
.portrait-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--db-line); border:1px solid var(--db-line); }
.portrait-record,.pet-record { min-width:0; min-height:225px; display:grid; grid-template-rows:150px auto auto; align-content:start; margin:0; border:0; padding:.75rem; color:var(--db-ink); background:var(--db-paper-light); text-align:left; }
.portrait-record { cursor:pointer; transition:background .18s,transform .18s; }.portrait-record:hover { z-index:1; background:#fff; transform:translateY(-2px); }
.portrait-record > span,.pet-record > span { height:145px; display:grid; place-items:center; overflow:hidden; background:rgba(82,111,101,.07); }
.portrait-record img,.pet-record img { max-width:135px; max-height:138px; object-fit:contain; image-rendering:pixelated; transition:transform .22s; }.portrait-record:hover img { transform:scale(1.07); }
.portrait-record strong,.pet-record strong { overflow:hidden; margin-top:.55rem; font-family:var(--display); font-size:1.05rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.portrait-record small,.pet-record small { overflow:hidden; color:var(--db-muted); font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.pet-record { min-height:245px; grid-template-rows:170px auto; }.pet-record > span { height:165px; }.pet-record img { max-width:155px; max-height:158px; }.pet-record figcaption { display:grid; }
.load-more { width:100%; min-height:48px; margin-top:1rem; cursor:pointer; border:1px solid var(--db-ink); color:var(--db-ink); background:transparent; }.load-more:hover { color:#fff; background:var(--db-ink); }.load-more[hidden] { display:none; }
.segmented,.system-tabs { display:flex; overflow-x:auto; border-bottom:1px solid var(--db-line); }
.segmented button,.system-tabs button { min-height:46px; flex:0 0 auto; cursor:pointer; border:0; border-bottom:2px solid transparent; padding:0 .9rem; color:var(--db-muted); background:transparent; }.segmented button[aria-current=true],.system-tabs button[aria-current=true] { color:var(--db-ink); border-bottom-color:var(--db-gold); }.segmented small { margin-left:.35rem; color:#98691d; }
.record-dialog { width:min(1000px,calc(100vw - 2rem)); max-height:90vh; grid-template-columns:300px minmax(0,1fr); gap:2rem; overflow:auto; border:1px solid rgba(232,184,94,.42); padding:3rem 2rem 2rem; color:#f3eee3; background:#101a1b; box-shadow:0 30px 90px rgba(0,0,0,.6); }.record-dialog[open] { display:grid; }.record-dialog::backdrop { background:rgba(2,8,9,.82); backdrop-filter:blur(4px); }
.dialog-close { position:absolute; top:.8rem; right:1rem; cursor:pointer; border:0; color:rgba(255,255,255,.7); background:transparent; }.record-visual { min-height:320px; display:grid; place-items:center; background:rgba(255,255,255,.035); }.record-visual img { max-width:280px; max-height:310px; image-rendering:pixelated; }.record-kicker { margin:0;color:#dfb565;font-size:.65rem; }.record-dialog h2 { margin:.25rem 0 1.2rem; font-family:var(--display); font-size:2.7rem; font-weight:400; }.record-dialog h3 { margin:1rem 0 .45rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.14); font-size:.75rem; }.record-dialog ul { margin:0; padding-left:1.2rem; color:rgba(255,255,255,.7); }.record-dialog a { color:#efc372; }
.tag-list { display:flex; flex-wrap:wrap; gap:.35rem; }.tag-list a,.tag-list span { padding:.28rem .55rem; border:1px solid rgba(239,195,114,.3); color:#efc372; font-size:.66rem; }
.store-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }.store-items a { display:grid; grid-template-columns:36px minmax(0,1fr); gap:.4rem; align-items:center; min-width:0; padding:.35rem; background:rgba(255,255,255,.04); }.store-items img { width:34px; height:34px; object-fit:contain; image-rendering:pixelated; }.store-items span { overflow:hidden; color:#eee8dc; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }.store-items small { display:block; color:rgba(255,255,255,.46); }.muted { color:rgba(255,255,255,.52); }
.system-tabs { margin-bottom:1rem; border-top:1px solid var(--db-ink); }.system-tabs button { min-height:54px; padding-inline:1.2rem; }
.system-records { border-top:1px solid var(--db-ink); }.system-record { display:grid; grid-template-columns:minmax(230px,.45fr) minmax(0,1fr); gap:2rem; padding:1.25rem 0; border-bottom:1px solid var(--db-line); }.system-record header small { color:#97691f; }.system-record h2 { margin:.25rem 0 0; font-family:var(--display); font-size:1.35rem; font-weight:400; }
.craft-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }.craft-flow > div { min-width:160px; }.craft-flow > div > span,.set-columns h3 { display:block; margin-bottom:.35rem; color:var(--db-muted); font-size:.62rem; }.craft-flow > b { color:#a16e1f; font-weight:400; }
.item-chip { min-width:130px; display:inline-grid; grid-template-columns:38px minmax(0,1fr); gap:.45rem; align-items:center; margin:.15rem; padding:.35rem; color:var(--db-ink); background:rgba(255,255,255,.55); vertical-align:middle; }.item-chip img { width:36px; height:36px; object-fit:contain; image-rendering:pixelated; }.item-chip span { overflow:hidden; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }.item-chip small { display:block; color:#966820; }
.set-columns { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }.set-columns ol { margin:0; padding:0; list-style:none; }.set-columns li { display:grid; grid-template-columns:60px 1fr; gap:.5rem; padding:.35rem 0; border-bottom:1px solid var(--db-line); font-size:.7rem; }.socket-record p span { display:inline-block; margin:.2rem; padding:.2rem .45rem; border:1px solid var(--db-line); }
.enchant-facts { display:flex; flex-wrap:wrap; gap:.35rem; }.enchant-facts span { padding:.35rem .55rem; border:1px solid var(--db-line); background:rgba(255,255,255,.45); font-size:.65rem; }
.calculator-shell { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:3rem; padding:2.5rem max(1rem,calc((100vw - 1320px)/2)); color:#eee8dd; background:#101a1b; }.calculator-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; align-items:end; }.calculator-controls label { display:grid; gap:.35rem; color:rgba(255,255,255,.58); font-size:.68rem; }.calculator-controls input,.calculator-controls select { color:#eee8dd; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); }
.calculator-answer { padding-left:2rem; border-left:1px solid rgba(255,255,255,.18); }.calculator-answer p,.calculator-answer span { margin:0; color:rgba(255,255,255,.53); font-size:.65rem; }.calculator-answer strong { display:block; color:#efc372; font-family:var(--display); font-size:2.5rem; font-weight:400; }
.growth-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--db-ink); }.growth-stat-strip div { min-height:90px; display:grid; align-content:center; padding:1rem; border-right:1px solid var(--db-line); }.growth-stat-strip div:last-child { border-right:0; }.growth-stat-strip small { color:var(--db-muted); }.growth-stat-strip strong { font-family:var(--display); font-size:1.45rem; font-weight:400; }
.growth-chart,.experience-table { margin-top:3rem; }.bar-chart { height:260px; display:flex; align-items:end; gap:2px; padding-top:1rem; border-bottom:1px solid var(--db-ink); }.bar-chart > span { height:100%; flex:1; display:grid; grid-template-rows:1fr 25px; align-items:end; }.bar-chart i { height:var(--height); min-width:2px; display:block; background:#b78535; transition:height .35s; }.bar-chart small { overflow:hidden; padding-top:.35rem; color:var(--db-muted); font-size:.5rem; writing-mode:vertical-rl; }.experience-table .section-intro { align-items:end; }.experience-table .search-control { width:260px; }.experience-table #experience-rows { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--db-ink); border-left:1px solid var(--db-line); }.experience-table #experience-rows > div { min-height:70px; display:grid; grid-template-columns:auto 1fr; gap:.15rem .6rem; padding:.75rem; border-right:1px solid var(--db-line); border-bottom:1px solid var(--db-line); }.experience-table strong { font-family:var(--display); font-weight:400; }.experience-table span { justify-self:end; font-variant-numeric:tabular-nums; }.experience-table small { grid-column:1/-1; color:var(--db-muted); }
.mobile-db-nav { display:none; }
.network-section { padding:3rem max(1rem,calc((100vw - 1320px)/2)) 4rem; color:var(--db-ink); background:var(--db-paper); }
.network-toolbar { display:grid; grid-template-columns:minmax(280px,1fr) 220px; gap:.8rem; margin:1.2rem 0; }.network-toolbar select { min-height:46px; border:1px solid var(--db-line); padding:0 .8rem; background:var(--db-paper-light); }
.network-layout { min-height:620px; display:grid; grid-template-columns:280px minmax(0,1fr); border-top:1px solid var(--db-ink); }
.network-index { max-height:700px; overflow:auto; border-right:1px solid var(--db-line); }.network-index button { width:100%; display:grid; gap:.18rem; cursor:pointer; border:0; border-bottom:1px solid var(--db-line); padding:.7rem .8rem; color:var(--db-ink); background:transparent; text-align:left; }.network-index button:hover,.network-index button.is-active { background:rgba(211,160,75,.12); }.network-index span { font-family:var(--display); font-size:1rem; }.network-index small { color:var(--db-muted); }
.network-detail { min-width:0; padding:1.2rem 0 0 2rem; }.network-focus p { margin:0;color:#97691f;font-size:.62rem; }.network-focus h3 { margin:.15rem 0;font-family:var(--display);font-size:2.1rem;font-weight:400; }.network-focus small { color:var(--db-muted); }
#network-graph { width:100%; height:430px; margin-top:.5rem; background:rgba(255,255,255,.25); }#network-graph line { stroke:rgba(16,26,27,.25);stroke-width:1.5; }#network-graph circle { fill:var(--db-paper-light);stroke:rgba(16,26,27,.28);stroke-width:1.5; }#network-graph text { fill:var(--db-ink);font-family:'Noto Serif SC',serif;font-size:12px;text-anchor:middle;dominant-baseline:middle;pointer-events:none; }.focus-node circle { fill:#142526!important;stroke:#d8aa5b!important;stroke-width:2!important; }.focus-node text { fill:#f1eadf!important;font-size:15px!important; }.adjacent-node { cursor:pointer; }.adjacent-node:hover circle { fill:#ead7b4!important;stroke:#9d6b20!important; }
.point-list { border-top:1px solid var(--db-ink);padding-top:.8rem; }.point-list h3 { margin:0 0 .5rem;font-size:.72rem; }.point-list>div { display:flex;flex-wrap:wrap;gap:.35rem; }.point-list a { display:flex;gap:.5rem;padding:.35rem .55rem;color:var(--db-ink);background:rgba(255,255,255,.48); }.point-list a span { color:#99691f;font-size:.62rem; }.point-list a strong { font-size:.68rem; }.point-list p { color:var(--db-muted);font-size:.68rem; }
@media(max-width:1100px){.portrait-grid{grid-template-columns:repeat(4,1fr)}.system-record{grid-template-columns:1fr}.experience-table #experience-rows{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){body{padding-bottom:58px}.db-heading{min-height:390px;grid-template-columns:1fr;gap:1.2rem;padding:2.7rem 1rem 2rem}.db-heading h1{font-size:3.5rem}.db-stats{overflow-x:auto}.db-workspace,.growth-details{padding:2rem 1rem 3rem}.db-toolbar{grid-template-columns:1fr}.db-result-line{align-items:start;flex-direction:column}.portrait-grid{grid-template-columns:repeat(2,1fr)}.portrait-record,.pet-record{min-height:210px;grid-template-rows:130px auto auto}.portrait-record>span,.pet-record>span{height:125px}.portrait-record img,.pet-record img{max-width:115px;max-height:120px}.record-dialog[open]{grid-template-columns:1fr}.record-visual{min-height:220px}.record-visual img{max-height:210px}.store-items{grid-template-columns:1fr 1fr}.set-columns{grid-template-columns:1fr}.calculator-shell{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1rem}.calculator-controls{grid-template-columns:1fr 1fr}.calculator-controls label:last-child{grid-column:1/-1}.calculator-answer{padding:1rem 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.18)}.growth-stat-strip{grid-template-columns:1fr 1fr}.growth-stat-strip div:nth-child(2){border-right:0}.growth-stat-strip div:nth-child(-n+2){border-bottom:1px solid var(--db-line)}.bar-chart{height:210px}.experience-table #experience-rows{grid-template-columns:1fr 1fr}.experience-table .section-intro{align-items:start}.experience-table .search-control{width:100%}.network-section{padding:2rem 1rem 3rem}.network-toolbar{grid-template-columns:1fr}.network-layout{grid-template-columns:1fr}.network-index{max-height:240px;border-right:0;border-bottom:1px solid var(--db-line)}.network-detail{padding:1.2rem 0}.network-focus h3{font-size:1.75rem}#network-graph{height:auto;min-height:300px}.mobile-db-nav{height:58px;display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;color:#eee8dc;background:rgba(7,17,19,.98);border-top:1px solid rgba(255,255,255,.14)}.mobile-db-nav a{display:grid;place-items:center;color:rgba(255,255,255,.55);font-family:var(--display);font-size:1rem}.mobile-db-nav a[aria-current=page]{color:#efc372}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}