/* Genshin Impact / Columbina: a visible character portrait integrated with lunar panels. */
:root{--bg:#151124;--surface:#211c32;--surface2:#30263f;--line:#493953;--text:#f6effb;--muted:#c6b4d0;--accent:#e5b6da;--green:#8cdab7;--amber:#edc789;--blue:#b0c0fa;--soft-accent:#d39ec819;--soft-green:#8cdab713;--shadow:0 8px 26px #09041117;--silver:#c8b6d9;--ribbon:#ac5f96}
:root[data-theme=light]{--bg:#f5f0f8;--surface:#fffaff;--surface2:#f0e4f1;--line:#d9c3df;--text:#37233f;--muted:#745c7f;--accent:#965282;--green:#1a6c4e;--amber:#8b5e15;--blue:#5463a6;--soft-accent:#a66b9911;--soft-green:#1a6c4e0c;--silver:#b08dbb;--ribbon:#a4558b}
body{background:radial-gradient(ellipse at 0 30%,#6b3b6a38,transparent 70%),radial-gradient(ellipse at 100% 0%,#6f5d9e20,transparent 60%),var(--bg)}
.shell{max-width:1500px;display:grid;grid-template-columns:minmax(200px,23%) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:22px;row-gap:12px;min-height:100svh;padding:18px 24px;align-content:start}
.character-panel{grid-column:1;grid-row:1/4;position:relative;isolation:isolate;min-height:470px;overflow:hidden;border-radius:20px;border:1px solid #e6cef552;background:#191b45;box-shadow:inset 0 0 0 5px #0d0d2025,0 14px 35px #05031024;color:#fff6ff}
.character-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 45%;z-index:-3}
.character-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#111127c9 0%,transparent 23%,transparent 59%,#1c142bc4 82%,#1b112bf2 100%)}
.character-panel::before{content:'';position:absolute;inset:7px;border:1px solid #f6d9f12f;border-radius:14px;pointer-events:none}.character-panel::after{content:'';position:absolute;width:220px;height:220px;border:1px solid #eed6ff33;border-radius:50%;right:-130px;bottom:55px;pointer-events:none}
.character-origin{position:absolute;left:20px;top:20px;display:flex;flex-direction:column;gap:1px;line-height:1.25}.character-origin strong{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-size:23px;font-weight:600;letter-spacing:3px}.character-origin span{font-size:7px;letter-spacing:1.6px;color:#ead9ee}
.character-caption{position:absolute;left:15px;right:15px;bottom:22px;text-align:center}.character-kicker{font-size:9px;letter-spacing:4px;color:#efc9e9}.character-caption h2{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-size:32px;font-weight:500;line-height:1.3;letter-spacing:5px;margin:5px 0 8px}.character-rule{display:flex;align-items:center;justify-content:center;gap:9px;color:#e8c9e7;font-size:9px}.character-rule i{display:block;width:32px;height:1px;background:linear-gradient(90deg,transparent,#e8c9e7)}.character-rule i:last-child{transform:rotate(180deg)}.character-caption p{font-size:9px;letter-spacing:1px;margin:8px 0 8px;color:#e4d4e9}.character-caption a{font-size:7px;color:#d9c9df}.feather-corner{position:absolute;top:20px;right:16px;width:28px;height:35px;color:#f6eaff90;pointer-events:none}
.topbar{grid-column:2;height:54px;border-bottom:1px solid var(--line);padding-bottom:10px;gap:10px}.brand-mark{border-radius:50%;background:var(--soft-accent);width:38px;height:38px;color:var(--accent);border:1px solid #d6b7e128}.brand h1{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-weight:500;font-size:22px;letter-spacing:2px}.brand-caption{font-size:10px;color:var(--muted)}.topbar .connection{gap:8px}.header-actions{gap:10px}.update-time{font-size:9px}.topbar .status-pill{font-size:10px}.icon-button{background:var(--surface2);border-radius:50%;width:32px;height:32px}
main{grid-column:2;display:flex;gap:12px;align-self:start}.overview{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr)) 1.5fr}.summary{position:relative;background:linear-gradient(145deg,var(--surface),var(--surface2));border-color:var(--line);border-radius:10px;padding:12px;min-height:100px}.summary::before{content:'';position:absolute;top:0;left:15px;right:15px;height:1px;background:linear-gradient(90deg,transparent,var(--silver),transparent);opacity:.5;pointer-events:none}.summary-label{font-size:10px}.summary-value{font-size:28px}.summary-note{font-size:9px}.network-values{gap:9px}.network-values strong{font-size:14px}.network-values small{font-size:8px}.network-summary .summary-note{font-size:8px}
.nodes-section{grid-template-columns:165px minmax(0,1fr);column-gap:10px;row-gap:10px}.section-heading h2{font-size:13px}.section-heading .text-button{font-size:10px}.toolbar{gap:7px}.search{min-width:110px}.search input{font-size:10px}.filters button{padding-left:8px;padding-right:8px;font-size:10px}.sort select{font-size:10px;padding-left:6px;padding-right:6px;max-width:125px}.sort>span{display:none}.nodes{gap:12px}.node{background:linear-gradient(160deg,var(--surface),var(--surface));border-radius:12px;position:relative}.node::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;opacity:.8;background:linear-gradient(transparent,var(--ribbon),transparent);pointer-events:none}.node-head{padding:14px 14px 10px}.node h3{font-size:14px}.node-meta{font-size:9px}.os-icon{background:var(--soft-accent);color:var(--accent);border-radius:50%;height:31px;width:31px}.node .status-pill{font-size:9px;padding:3px 6px}.resources{padding:3px 14px 15px;gap:15px}.metric-label{font-size:10px}.metric-value{font-size:27px}.bar{background:var(--surface2);height:4px}.bar span{background:linear-gradient(90deg,#b48adb,var(--accent))}.bar span.warning{background:var(--amber)}.node-network{margin:0 14px;padding:12px 0;gap:15px}.network-rate{font-size:16px}.network-label,.month{font-size:9px}.node-facts{padding:10px 14px;grid-template-columns:1fr 1fr;font-size:9px;gap:6px 12px}.node-facts>div{gap:5px}.node-facts dt{font-size:9px;white-space:normal}.node-facts dd{font-size:9px}.legend{font-size:9px;gap:12px;flex-wrap:wrap}footer{grid-column:2;margin:0;padding:3px 0 0;min-height:16px;font-size:8px;border-top:1px solid var(--line)}
:root[data-theme=light] body{background:radial-gradient(ellipse at 0 30%,#ceb5e33b,transparent 70%),var(--bg)}:root[data-theme=light] .summary{background:linear-gradient(145deg,#fffaff,#f3eaf8)}:root[data-theme=light] .node{background:linear-gradient(160deg,#fffaff,#fcf7ff)}:root[data-theme=light] .bar span{background:var(--accent)}
@media(min-width:1350px){.shell{column-gap:28px;padding:24px 32px;grid-template-columns:260px minmax(0,1fr)}.character-caption h2{font-size:36px}.node h3{font-size:16px}.node-facts{font-size:11px}.node-facts dt,.node-facts dd{font-size:10px}.summary-label{font-size:12px}.summary-note{font-size:10px}.metric-value{font-size:30px}.topbar{height:62px}}
@media(max-height:700px) and (min-width:761px){.shell{padding:12px 20px;gap:10px 18px;grid-template-columns:minmax(190px,22%) minmax(0,1fr)}.character-panel{min-height:450px}.topbar{height:46px;padding-bottom:6px}.brand h1{font-size:20px}.brand-caption{font-size:9px}main{gap:9px}.summary{min-height:86px;padding:10px}.summary-value{font-size:26px;margin:5px 0 3px}.nodes-section{row-gap:8px}.node-head{padding-top:11px;padding-bottom:8px}.resources{padding-top:1px;padding-bottom:12px}.metric-value{font-size:25px}.node-network{padding-top:10px;padding-bottom:10px}.node-facts{padding-top:8px;padding-bottom:8px;gap:5px 10px}.legend{font-size:8px}footer{min-height:15px;font-size:8px}.character-origin{top:16px;left:16px}.character-caption{bottom:17px}}
@media(max-height:600px) and (min-width:761px){.shell{padding:9px 18px;gap:7px 16px}.character-panel{min-height:0}.topbar{height:42px}.brand-mark{width:33px;height:33px}.brand h1{font-size:18px}.summary{min-height:78px;padding:8px 10px}.summary-value{font-size:24px}.summary-note{font-size:8px}.network-values strong{font-size:12px}.nodes-section{row-gap:7px}.node-head{padding-top:9px;padding-bottom:6px}.resources{padding-bottom:10px}.metric-label{margin-bottom:4px}.metric-value{font-size:24px}.node-network{padding-top:8px;padding-bottom:8px}.network-rate{font-size:15px}.node-facts{padding-top:7px;padding-bottom:7px;gap:4px 8px}.character-caption h2{font-size:30px}.character-caption p{font-size:8px}}
@media(max-width:1000px) and (min-width:761px){.shell{grid-template-columns:180px minmax(0,1fr);padding-left:14px;padding-right:14px;column-gap:14px}.nodes-section{grid-template-columns:1fr}.toolbar,.section-heading{grid-column:1}.section-heading{min-height:21px}.topbar .connection{flex-direction:column;align-items:flex-end;gap:3px}.node-facts{grid-template-columns:1fr;gap:3px}.summary{padding-left:8px;padding-right:8px}.network-values{display:flex;flex-direction:column;gap:2px}.network-values>span{flex-direction:row;gap:4px}.network-values strong{font-size:11px}.network-values small{font-size:7px}.character-caption h2{font-size:26px}}
@media(max-width:760px){.shell{display:flex;flex-direction:column;padding:8px 14px;gap:8px;min-height:100svh}.character-panel{flex:none;min-height:0;height:90px;border-radius:12px;overflow:hidden}.character-portrait{width:54%;right:0;left:auto;height:240px;top:-66px;object-fit:cover;object-position:70% 46%}.character-shade{background:linear-gradient(90deg,#20172d 16%,#20172de0 40%,transparent 80%)}.character-origin{left:14px;top:10px;flex-direction:row;align-items:center;gap:7px}.character-origin strong{font-size:13px;letter-spacing:1px}.character-origin span{font-size:5.5px;letter-spacing:1px}.character-caption{left:14px;right:auto;bottom:11px;text-align:left}.character-caption h2{font-size:24px;letter-spacing:3px;margin:0;line-height:1.3}.character-kicker{font-size:6px;letter-spacing:2px;display:block;margin:0 0 1px}.character-caption p,.character-rule{display:none}.character-caption a{font-size:6px;position:absolute;left:140px;bottom:0;white-space:nowrap;color:#ecddf0}.feather-corner{display:none}.character-panel::before{inset:4px;border-radius:8px}.character-panel::after{display:none}.topbar{flex:none;height:43px;border:0;padding:0;gap:8px}.brand-mark{width:29px;height:29px}.brand-mark svg{width:22px;height:22px}.brand h1{font-size:17px;letter-spacing:1px}.brand-caption{font-size:8px;margin-top:1px}.topbar .connection{flex-direction:column;gap:2px}.topbar .status-pill{font-size:9px}.update-time{font-size:8px}.header-actions{gap:7px}.icon-button{width:29px;height:29px}main{gap:7px;flex:1}.overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.summary{min-height:43px;padding:5px 9px;border-radius:8px;display:grid;grid-template-columns:1fr auto}.summary-label{font-size:9px}.summary-value{font-size:22px;margin:0;grid-row:1/3}.summary-note{font-size:7.5px}.summary-unit{font-size:9px}.network-values{display:flex;flex-direction:column;gap:1px;grid-row:1/3;margin:0}.network-values>span{flex-direction:row;gap:3px}.network-values strong{font-size:9px}.network-values small{font-size:7px}.network-summary .summary-note{font-size:7px}.nodes-section{display:flex;gap:5px}.section-heading{min-height:20px}.section-heading h2{font-size:12px}.section-heading .text-button{font-size:9px}.toolbar{gap:5px}.search{height:28px;flex-basis:100%;min-width:0}.search input{min-height:25px;font-size:10px}.filters button{font-size:9px;min-height:23px;padding:3px 9px}.sort select{height:28px;font-size:9px;max-width:145px}.nodes{grid-template-columns:1fr;gap:7px}.node-head{padding:8px 11px 5px}.node h3{font-size:13px}.os-icon{width:27px;height:27px;font-size:12px}.node-meta{font-size:8px;margin-top:1px}.node .status-pill{font-size:9px}.resources{padding:1px 11px 7px;gap:18px}.metric-label{font-size:9px;margin-bottom:2px}.metric-value{font-size:20px}.metric-unit{font-size:9px}.bar{height:3px;margin-top:5px}.node-network{margin:0 11px;padding:5px 0;gap:16px}.network-rate{font-size:13px;margin-top:2px}.network-label,.month{font-size:9px;line-height:1.2}.month{margin-top:1px}.node-facts{grid-template-columns:1fr 1.3fr;padding:5px 11px;gap:2px 8px;font-size:9px;line-height:1.3}.node-facts dt,.node-facts dd{font-size:9px}.legend{font-size:7.5px;gap:4px 8px;line-height:1.2;min-height:11px}.notice{font-size:9px;padding:5px 8px}footer{flex:none;min-height:15px;margin:0;padding:4px 0 0;font-size:7px;gap:3px}}
@media(max-width:390px){.shell{padding:6px 10px;gap:6px}.character-panel{height:82px}.character-caption h2{font-size:22px}.character-portrait{top:-68px}.topbar{height:39px}.brand h1{font-size:16px}.brand-caption{display:none}.brand-mark{width:28px;height:28px}.summary{min-height:41px;padding:5px 7px}.summary-note{font-size:7px}.summary-label{font-size:8px}.summary-value{font-size:21px}.network-values strong{font-size:8.5px}.node-facts{gap:2px 7px}.node-facts>div{gap:4px}.character-caption a{left:125px;font-size:5.5px}}

/* One continuous moonlit canvas: the portrait fades into the monitoring area. */
:root{--blend-panel:33,28,50;--blend-line:115,91,133;--blend-glow:111,115,195;--portrait-fade:linear-gradient(90deg,#000 0%,#000 55%,rgba(0,0,0,.96)64%,rgba(0,0,0,.72)77%,rgba(0,0,0,.30)90%,transparent 100%)}
:root[data-theme=light]{--blend-panel:255,250,255;--blend-line:174,142,190;--blend-glow:153,137,201}
.shell{isolation:isolate}
.shell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 520px 78% at 18% 44%,rgba(var(--blend-glow),.15),transparent 80%),linear-gradient(90deg,rgba(var(--blend-glow),.07),transparent 65%)}
.character-panel{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.character-panel::before,.character-panel::after{display:none}
.character-portrait,.character-shade{-webkit-mask-image:var(--portrait-fade);mask-image:var(--portrait-fade);border-radius:18px 0 0 18px}
.character-shade{background:linear-gradient(180deg,#111127b8 0%,transparent 24%,transparent 58%,#1c142ba8 82%,#1b112be6 100%)}
.character-origin,.character-caption{text-shadow:0 1px 7px #100b2066}
.feather-corner{opacity:.32;right:8px}
.summary{background:linear-gradient(110deg,rgba(var(--blend-panel),.76),rgba(var(--blend-panel),.96));border-color:rgba(var(--blend-line),.38);box-shadow:0 6px 22px #08061408}
.node{background:linear-gradient(110deg,rgba(var(--blend-panel),.82),rgba(var(--blend-panel),.97));border-color:rgba(var(--blend-line),.36);box-shadow:0 8px 26px #0806140a}
.topbar{border-bottom-color:rgba(var(--blend-line),.32)}
.node::before{opacity:.4}
:root[data-theme=light] .summary{background:linear-gradient(110deg,rgba(247,238,253,.78),rgba(255,250,255,.96))}
:root[data-theme=light] .node{background:linear-gradient(110deg,rgba(249,241,255,.83),rgba(255,250,255,.97))}
:root[data-theme=light] .character-shade{background:linear-gradient(180deg,#111127a3 0%,transparent 24%,transparent 58%,#1c142b8f 82%,#1b112bd9 100%)}
@media(max-width:760px){
  .character-panel{overflow:hidden;border-radius:0;background:transparent}
  .character-portrait{-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 82%,transparent),linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 82%,transparent),linear-gradient(180deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;border-radius:0}
  .character-shade{-webkit-mask-image:linear-gradient(180deg,#000 20%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 20%,#000 55%,transparent 100%);background:linear-gradient(90deg,#20172d 10%,#20172dd9 38%,transparent 82%);border-radius:0}
  .shell::before{background:radial-gradient(ellipse 95% 210px at 45% 0%,rgba(var(--blend-glow),.16),transparent 90%)}
  .character-origin,.character-caption{color:var(--text);text-shadow:none}
  .character-origin span,.character-kicker,.character-caption a{color:var(--muted)}
  :root[data-theme=light] .character-shade{background:linear-gradient(90deg,#f5f0f8 10%,#f5f0f8d9 38%,transparent 82%)}
}