:root { color-scheme:light; --bg:#f5f6f8; --bg2:#ffffff; --bg3:#eceef2; --line:#d8dce4; --fg:#1b1f27; --fg2:#5a6474; --fg3:#8892a4; --accent:#0b6bcb; --accent2:#0a5aa8; --vlum:42%; --vbg:14%; --vbd:55%; --subsel:#6d4bd6; --ok:#1a7f37; --warn:#9a6700; --fail:#b42318; --info:#0a5aa8; --rung-direct:#1a7f37; --rung-nat:#9a6700; --rung-mona:#7048c6; --flash:#fff6c2; --acct-lmin:24; --acct-lmax:44; --acct-gl:.92; --acct-gcmin:.04; --acct-gcmax:.09; --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace; --r:8px; --row:30px; --mmb-feather:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent); } :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme:dark; --bg:#0f1216; --bg2:#161a21; --bg3:#1d2229; --line:#2a313b; --fg:#e6e9ef; --fg2:#a3adbb; --fg3:#6f7987; --accent:#4ea1ff; --accent2:#77b8ff; --vlum:72%; --vbg:18%; --vbd:52%; --subsel:#a78bfa; --ok:#3fb950; --warn:#d29922; --fail:#f85149; --info:#58a6ff; --rung-direct:#3fb950; --rung-nat:#d29922; --rung-mona:#a371f7; --flash:#3a3413; --acct-lmin:58; --acct-lmax:80; --acct-gl:.42; --acct-gcmin:.13; --acct-gcmax:.2; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme:light; --bg:#f5f6f8; --bg2:#ffffff; --bg3:#eceef2; --line:#d8dce4; --fg:#1b1f27; --fg2:#5a6474; --fg3:#8892a4; --accent:#0b6bcb; --accent2:#0a5aa8; --vlum:42%; --vbg:14%; --vbd:55%; --subsel:#6d4bd6; --ok:#1a7f37; --warn:#9a6700; --fail:#b42318; --info:#0a5aa8; --rung-direct:#1a7f37; --rung-nat:#9a6700; --rung-mona:#7048c6; --flash:#fff6c2; --acct-lmin:24; --acct-lmax:44; --acct-gl:.92; --acct-gcmin:.04; --acct-gcmax:.09; } } *{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--fg); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .top{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--bg2); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:36;flex-wrap:wrap} .brand{font-weight:700;font-size:17px;letter-spacing:.2px;cursor:pointer; user-select:none;-webkit-user-select:none;-moz-user-select:none} .brand:active{opacity:.65} .brand span{color:var(--accent);font-weight:600;margin-left:7px} td.nick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px} .brand small{color:var(--fg3);font-weight:400;margin-left:6px} .brand{position:relative} .brand .brand-a{color:inherit;font-weight:inherit;margin-left:0} .brand .brand-b{color:var(--accent);font-weight:600;margin-left:7px;white-space:pre} .brand .brand-b i{font-style:normal;display:inline-block} @media (hover:hover) and (min-width:701px) and (prefers-reduced-motion:no-preference){ .brand:hover .brand-b i{animation:brand-glow 1s cubic-bezier(.3,.6,.3,1) calc(var(--i) * 55ms) both} } @keyframes brand-glow{ 0%{transform:none;text-shadow:none} 35%{transform:translateY(-2px);color:color-mix(in srgb,var(--accent) 55%,#fff); text-shadow:0 0 6px color-mix(in srgb,var(--accent) 90%,transparent),0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)} 100%{transform:none;text-shadow:0 0 7px color-mix(in srgb,var(--accent) 45%,transparent)} } @media (max-width:700px){ .brand{display:inline-grid;grid-template-areas:"w";align-items:center;overflow:hidden} .brand .brand-a,.brand .brand-b{grid-area:w;margin-left:0;white-space:nowrap} .brand .brand-a{animation:brand-a 9s cubic-bezier(.65,0,.35,1) infinite} .brand .brand-b{animation:brand-b 9s cubic-bezier(.65,0,.35,1) infinite} .brand::after{content:"";position:absolute;top:10%;bottom:10%;left:0;width:2px;border-radius:2px;pointer-events:none; background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 60%,transparent); opacity:0;animation:brand-edge 9s cubic-bezier(.65,0,.35,1) infinite} } @media (max-width:700px) and (prefers-reduced-motion:reduce){ .brand .brand-a,.brand .brand-b,.brand::after{animation:none} .brand .brand-b,.brand::after{display:none} } @keyframes brand-a{0%,42%{clip-path:inset(0 0 0 0)} 50%{clip-path:inset(0 0 0 100%)} 50.01%,92%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)}} @keyframes brand-b{0%,42%{clip-path:inset(0 100% 0 0)} 50%,92%{clip-path:inset(0 0 0 0)} 99.99%{clip-path:inset(0 0 0 100%)} 100%{clip-path:inset(0 100% 0 0)}} @keyframes brand-edge{0%,41.9%{left:0;opacity:0} 42%{left:0;opacity:1} 50%{left:100%;opacity:1} 50.1%,91.9%{left:0;opacity:0} 92%{left:0;opacity:1} 99.9%{left:100%;opacity:1} 100%{left:100%;opacity:0}} .spacer{flex:1} .tabs{display:flex;gap:4px;flex-wrap:wrap;padding:6px 14px;background:var(--bg2); border-bottom:1px solid var(--line);position:sticky;top:45px;z-index:19} .tab{padding:7px 13px;border-radius:9px;cursor:pointer;color:var(--fg2);font-weight:550; border:1px solid transparent;white-space:nowrap;font-size:14px} .tab:hover{background:var(--bg3);color:var(--fg)} .tab.on{background:var(--accent);color:#fff} .tabs{display:block;padding:0} .tabrow{display:flex;gap:4px;flex-wrap:wrap;padding:7px 16px} .tabrow.sectiontabs{padding:0;margin-left:18px} .tabrow.subrow{background:var(--bg3);border-top:1px solid var(--line);padding:4px 16px;isolation:isolate} .tab.sec{font-size:14px;font-weight:650} .tab.sec.on{background:var(--accent);color:#fff} .subrow .tab{font-size:13.5px;font-weight:600} .tabstrip{display:flex;gap:4px;flex-wrap:wrap;min-width:0;flex:0 1 auto} .tabtools { flex:0 0 auto; align-self:center; margin-left:auto; padding-left:10px } .tabafter { flex:0 0 auto; align-self:center; display:flex; align-items:center; gap:6px } .tabhint { flex:0 0 auto; min-width:0; align-self:center; display:flex; align-items:baseline; gap:6px; margin-left:10px; padding-left:13px; border-left:1px solid var(--line); color:var(--fg2); font-size:12.5px; line-height:1.35; overflow:hidden } .tabinfo { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:none; color:var(--info); cursor:pointer; position:relative } .tabinfo svg { width:17px; height:17px; display:block; position:relative } .tabinfo::before { content:''; position:absolute; inset:-1px; border-radius:50%; opacity:0; background:radial-gradient(circle, color-mix(in srgb, var(--info) 34%, transparent) 0%, color-mix(in srgb, var(--info) 14%, transparent) 46%, transparent 72%); transition:opacity .14s ease-out } .tabinfo:hover::before, .tabinfo:focus-visible::before { opacity:1 } .tabinfo:hover { color:var(--fg) } .defgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:10px } .defrow { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:11px 12px 12px; border-radius:12px; border:1px solid color-mix(in srgb, var(--line) 88%, transparent); background:radial-gradient(125% 145% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%), color-mix(in srgb, var(--bg2) 74%, transparent); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%) } .defrow::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent) } .defname { min-width:0; display:flex; flex-direction:column; gap:3px } .defrow .defname b { display:block; font-weight:650; font-size:11px; line-height:1.35; letter-spacing:.85px; text-transform:uppercase; white-space:normal; overflow-wrap:anywhere; font-variant-numeric:normal; color:color-mix(in srgb, var(--accent) 66%, var(--fg)) } .defsub { font-size:10.5px; line-height:1.35; color:var(--fg3) } .defrow select { width:100%; margin-top:auto; font-size:12.5px } .aboutback { position:fixed; inset:0; z-index:62; display:flex; justify-content:center; overflow:auto; overscroll-behavior:contain; padding:16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); padding-top:max(16px, env(safe-area-inset-top)); background:rgba(8,12,18,.54); animation:aboutfade .16s ease-out } @keyframes aboutfade { from { opacity:0 } } .aboutcard:focus { outline:none } .aboutcard { --ab1:#0a7565; --ab2:#1166c9; position:relative; margin:auto; width:min(1040px, 100%); max-height:min(860px, calc(100vh - 32px)); max-height:min(860px, calc(100dvh - 32px)); display:flex; flex-direction:column; overflow:hidden; color:var(--fg); border-radius:20px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:radial-gradient(780px 300px at 6% -12%, color-mix(in srgb, var(--ab1) 15%, transparent), transparent 66%), radial-gradient(720px 320px at 97% 2%, color-mix(in srgb, var(--ab2) 14%, transparent), transparent 64%), color-mix(in srgb, var(--bg2) 94%, transparent); -webkit-backdrop-filter:blur(26px) saturate(165%); backdrop-filter:blur(26px) saturate(165%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); animation:aboutin .28s cubic-bezier(.2,.9,.3,1.08) } @keyframes aboutin { from { opacity:0; transform:translateY(12px) scale(.975) } } :root[data-theme="dark"] .aboutcard, :root:not([data-theme="light"]) .aboutcard { --ab1:#39d3b6; --ab2:#5aa9ff } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .aboutcard { --ab1:#0a7565; --ab2:#1166c9 } } .aboutcard::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; background:linear-gradient(90deg, transparent, var(--ab1) 22%, var(--ab2) 64%, transparent); opacity:.85 } .abouthead { flex:none; display:flex; align-items:flex-start; gap:12px; padding:17px 18px 13px 20px; border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent) } .aboutico { flex:none; position:relative; width:44px; height:44px; display:grid; place-items:center; color:var(--ab1) } .aboutico::before { content:''; position:absolute; inset:-5px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--ab1) 24%, transparent) 0%, color-mix(in srgb, var(--ab1) 9%, transparent) 48%, transparent 74%) } .aboutico svg { position:relative; width:40px; height:40px; display:block; stroke-width:1.65; filter:drop-shadow(0 0 9px color-mix(in srgb, var(--ab1) 42%, transparent)) } .aboutht { flex:1; min-width:0 } .aboutht h3 { margin:0; font:650 19px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.15px; color:var(--fg) } .aboutsub { margin:4px 0 0; font-size:12.5px; color:var(--fg3) } .abtshort { display:none } .aboutwip { flex:none; display:flex; align-items:center; gap:9px; margin:13px 0 4px; padding:9px 12px; border-radius:11px; font-size:12.5px; color:var(--fg2); background:color-mix(in srgb, var(--warn) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 34%, transparent) } .aboutwipico { color:var(--warn); font-size:14px; line-height:1 } .aboutwait { padding:48px; text-align:center; color:var(--fg3); font-size:13px } .aboutbody { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px 18px 20px 20px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--fg) 22%, transparent) transparent } .aboutbody::-webkit-scrollbar { width:10px } .aboutbody::-webkit-scrollbar-track { background:transparent } .aboutbody::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--fg) 15%, transparent); border-radius:10px; border:3px solid transparent; background-clip:content-box } .aboutbody:hover::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--fg) 26%, transparent) } .aboutgroup { display:flex; align-items:center; gap:10px; margin:26px 2px 10px; font:650 13.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.1px; color:var(--fg) } .aboutgroup::after { content:''; flex:1 1 auto; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--ab1) 42%, transparent), transparent) } .aboutgroup:first-child { margin-top:10px } .aboutglead { margin:-4px 2px 10px; font-size:12.5px; line-height:1.5; color:var(--fg3) } .aboutsec { margin:18px 2px 7px; font:700 10px/1 system-ui,sans-serif; letter-spacing:1.5px; text-transform:uppercase; color:var(--fg3) } .aboutsec:first-child { margin-top:8px } .aboutitem { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border-radius:12px; margin-bottom:5px; overflow:hidden; background:color-mix(in srgb, var(--fg) 3%, transparent); box-shadow:inset 0 0 0 1px transparent; transition:background .14s, box-shadow .14s } .aboutitem:hover { background:color-mix(in srgb, var(--fg) 6%, transparent) } .aboutitem.abouton { background:color-mix(in srgb, var(--ab1) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ab1) 26%, transparent) } .aboutrow, .aboutrow:hover, .aboutrow:focus, .aboutcopy, .aboutcopy:hover, .aboutcopy:focus { background:none !important } .aboutrow { grid-column:1; display:flex; align-items:center; gap:9px; width:100%; padding:11px 4px 11px 13px; border:0; text-align:left; cursor:pointer; color:var(--fg); font:600 14px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif } .aboutrow:focus-visible { outline:2px solid color-mix(in srgb, var(--ab1) 70%, transparent); outline-offset:-2px } .aboutcar { display:grid; place-items:center; width:15px; height:15px; flex:0 0 15px; color:var(--fg3); transition:transform .16s cubic-bezier(.2,.8,.2,1) } .aboutcar svg { width:15px; height:15px; display:block } .aboutitem:hover .aboutcar { color:var(--fg2) } .abouton .aboutcar { transform:rotate(90deg); color:var(--ab1) } .aboutrowt { min-width:0; overflow-wrap:anywhere } .aboutcopy { grid-column:2; position:relative; display:grid; place-items:center; width:30px; height:30px; margin-right:9px; padding:0; border:0; border-radius:8px; cursor:pointer; color:var(--fg3); opacity:0; transition:opacity .14s, color .14s, background .14s } .aboutcopy svg { width:15px; height:15px; display:block } .aboutitem:hover .aboutcopy, .aboutitem.abouton .aboutcopy, .aboutcopy:focus-visible { opacity:1 } .aboutcopy:hover { color:var(--ab1); background:color-mix(in srgb, var(--fg) 9%, transparent) !important } .aboutcopy:focus-visible { outline:2px solid color-mix(in srgb, var(--ab1) 70%, transparent); outline-offset:-2px } .aboutcopy.aboutcopied { color:var(--ok); opacity:1 } .aboutcopy.aboutcopied::after { content:'Copied'; position:absolute; right:100%; top:50%; margin-right:5px; transform:translateY(-50%); font:600 11px/1 system-ui,sans-serif; white-space:nowrap; color:var(--ok); pointer-events:none } .aboutdraw { grid-column:1 / -1; display:none; padding:0 16px 14px 37px } .abouton .aboutdraw { display:block; animation:aboutdraw .18s ease-out } @keyframes aboutdraw { from { opacity:0; transform:translateY(-4px) } } .aboutlead { margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--fg2) } .aboutlead b { color:var(--fg); font-weight:650 } .aboutlead a { color:var(--ab2); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ab2) 40%, transparent) } .aboutlead a:hover { border-bottom-color:var(--ab2) } .abouttodo { display:flex; align-items:center; gap:7px; margin:0; font-size:12.5px; color:var(--fg3) } .aboutrich { font-size:13px; line-height:1.62; color:var(--fg2) } .aboutrich p { margin:0 0 9px } .aboutrich p:last-child { margin-bottom:0 } .aboutrich b, .aboutrich strong { color:var(--fg); font-weight:650 } .aboutrich h4 { margin:15px 0 7px; font:700 11px/1.2 system-ui,sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:var(--ab1) } .aboutrich h4:first-child { margin-top:2px } .aboutrich ul, .aboutrich ol { margin:0 0 10px; padding-left:19px } .aboutrich li { margin:0 0 5px } .aboutrich li::marker { color:color-mix(in srgb, var(--ab1) 75%, transparent) } .aboutrich a { color:var(--ab2); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ab2) 40%, transparent) } .aboutrich a:hover { border-bottom-color:var(--ab2) } .aboutrich code { padding:1px 5px; border-radius:5px; font:600 12px/1.4 var(--mono); color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent) } .aboutrich kbd { padding:1px 6px; border-radius:5px; font:600 11.5px/1.5 var(--mono); color:var(--fg); background:color-mix(in srgb, var(--fg) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent), 0 1px 0 color-mix(in srgb, var(--fg) 12%, transparent) } .aboutrich o, .aboutlead o { display:inline-block; padding:0 7px; border-radius:6px; white-space:nowrap; font:600 12.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:color-mix(in srgb, var(--fg) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent) } .aboutrich k { display:inline-block; padding:0 6px; border-radius:6px; font:700 11.5px/1.65 var(--mono); letter-spacing:.2px; color:var(--ab1); white-space:nowrap; background:color-mix(in srgb, var(--ab1) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ab1) 26%, transparent) } .aboutrich .abnote { display:flex; gap:9px; margin:12px 0 0; padding:9px 12px 9px 11px; border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--fg2); background:color-mix(in srgb, var(--ab2) 8%, transparent); border-left:2px solid color-mix(in srgb, var(--ab2) 55%, transparent) } .aboutrich .abfacts { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:8px; margin:12px 0 4px } .aboutrich .abfacts > div { padding:9px 12px; border-radius:10px; background:color-mix(in srgb, var(--fg) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent) } .aboutrich .abfacts b { display:block; font:700 10px/1.3 system-ui,sans-serif; letter-spacing:1.1px; text-transform:uppercase; color:var(--fg3) } .aboutrich .abfacts span { display:block; margin-top:2px; font-size:12.5px; color:var(--fg); overflow-wrap:anywhere } @media (max-width:760px) { .aboutback { padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); padding-top:max(8px, env(safe-area-inset-top)) } .aboutcard { width:100%; max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px) } .abouthead { padding:14px 12px 12px 14px } .aboutico { width:32px; height:32px } .aboutico svg { width:28px; height:28px } .abouthead { gap:10px } .aboutht h3 { font-size:clamp(15px, 4.35vw, 17px); letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .aboutht h3 .abtlong { display:none } .aboutht h3 .abtshort { display:inline } .aboutcard .aboutsub { max-height:5em; overflow:hidden; transition:max-height .22s ease, opacity .18s ease, margin-top .22s ease } .aboutcard.aboutscrolled .aboutsub { max-height:0; opacity:0; margin-top:0 } .aboutcard.aboutscrolled .abouthead { align-items:center } .aboutbody { padding:4px 12px 24px 14px } .aboutdraw { padding:0 12px 14px 14px } .aboutcopy { opacity:.75 } } @media (prefers-reduced-motion: reduce) { .aboutcar { transition:none !important } .aboutback, .aboutcard, .abouton .aboutdraw { animation:none !important } } .tabhintlink { flex:0 0 auto; color:var(--accent); white-space:nowrap } .tabhintlink:hover { text-decoration:underline } .tabhinttext { min-width:0; overflow:hidden; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2 } @media (max-width:900px) { .tabhint { flex:0 0 auto; margin:0 0 0 4px; padding:0; border-left:0; border-top:0 } .tabhinttext { display:none } } body[data-view="worldmap"] #tabtools, body[data-view="worldmap"] .tabhint, body[data-view="worldmap"] .tabs, body[data-view="worldmap"] .top { opacity:1; filter:none; visibility:visible; max-height:280px; transition: max-height .26s ease, max-width .26s ease, padding .26s ease, border-width .26s ease, opacity .18s ease .26s, filter .18s ease .26s, visibility 0s; } @media (max-width:700px) { body[data-view="worldmap"].wzc1 #tabtools, body[data-view="worldmap"].wzc1 .tabhint { max-height:0; max-width:0; padding:0; margin:0; border-width:0; opacity:0; filter:blur(7px); visibility:hidden; overflow:hidden; pointer-events:none; transition: opacity .18s ease, filter .18s ease, max-height .26s ease .18s, max-width .26s ease .18s, padding .26s ease .18s, margin .26s ease .18s, border-width .26s ease .18s, visibility 0s linear .18s; } } @media (min-width:701px) { body[data-view="worldmap"].wzc1 .tabs { max-height:0; padding-top:0; padding-bottom:0; border-top-width:0; border-bottom-width:0; opacity:0; filter:blur(7px); visibility:hidden; overflow:hidden; pointer-events:none; transition: opacity .18s ease, filter .18s ease, max-height .26s ease .18s, padding .26s ease .18s, border-width .26s ease .18s, visibility 0s linear .18s; } } body[data-view="worldmap"].wzc2 .tabs, body[data-view="worldmap"].wzc3 .top { max-height:0; padding-top:0; padding-bottom:0; border-top-width:0; border-bottom-width:0; opacity:0; filter:blur(7px); visibility:hidden; overflow:hidden; pointer-events:none; transition: opacity .18s ease, filter .18s ease, max-height .26s ease .18s, padding .26s ease .18s, border-width .26s ease .18s, visibility 0s linear .18s; } @media (prefers-reduced-motion:reduce) { body[data-view="worldmap"] #tabtools, body[data-view="worldmap"] .tabhint, body[data-view="worldmap"] .tabs, body[data-view="worldmap"] .top, body[data-view="worldmap"].wzc1 #tabtools, body[data-view="worldmap"].wzc1 .tabhint, body[data-view="worldmap"].wzc2 .tabs, body[data-view="worldmap"].wzc3 .top { transition:none } } .subrow .tab{ position:relative; background:none; border:1px solid transparent; transition:color .16s ease, transform .12s ease; } .subrow .tab::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; background-image: linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), color-mix(in srgb, #fff 2%, transparent) 55%, transparent), linear-gradient(color-mix(in srgb, var(--fg) 5%, transparent), color-mix(in srgb, var(--fg) 5%, transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 11%, transparent); transition:opacity .14s ease-out; } .subrow .tab:hover{ color:var(--fg); background:none } .subrow .tab:hover::before{ opacity:1 } .subrow .tab:active{ transform:translateY(1px) } .subrow .tab.on{ background:none; color:var(--fg); } .subrow .tab.on::before{ opacity:1; box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent); background-image: radial-gradient(150% 205% at 50% 122%, color-mix(in srgb, var(--subsel) 38%, transparent) 0%, color-mix(in srgb, var(--subsel) 17%, transparent) 38%, color-mix(in srgb, var(--subsel) 5%, transparent) 64%, transparent 86%), linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 52%), linear-gradient(color-mix(in srgb, #000 20%, transparent), color-mix(in srgb, #000 20%, transparent)); } .subrow .tab.on:hover::before{ box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent) } .subrow .tab.on::after{ content:''; position:absolute; left:11%; right:11%; bottom:1px; height:2px; z-index:-1; border-radius:2px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--subsel) 88%, #fff) 22%, color-mix(in srgb, var(--subsel) 88%, #fff) 78%, transparent); box-shadow:0 0 9px color-mix(in srgb, var(--subsel) 60%, transparent); } .subrow .tab:focus-visible{ outline:2px solid var(--subsel); outline-offset:2px } @media (prefers-reduced-motion:reduce) { .subrow .tab, .subrow .tab::before { transition:none } .subrow .tab:active { transform:none } } .subrow .tab.locked{ background:transparent; box-shadow:none } .tabrow.sectiontabs { isolation:isolate } .sectiontabs .tab.sec { position:relative; border:0; padding:8px 14px; border-radius:11px; color:var(--fg3); font-weight:650; transition:color .16s ease, transform .12s ease; } .sectiontabs .tab.sec, .sectiontabs .tab.sec:hover, .sectiontabs .tab.sec.on, .sectiontabs .tab.sec.on:hover { background:none } .sectiontabs .tab.sec::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; background-image: linear-gradient(180deg, color-mix(in srgb, #fff 9%, transparent), color-mix(in srgb, #fff 2%, transparent) 55%, transparent), linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent), color-mix(in srgb, var(--fg) 6%, transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent); transition:opacity .14s ease-out; } .sectiontabs .tab.sec:hover { color:var(--fg) } .sectiontabs .tab.sec:hover::before { opacity:1 } .sectiontabs .tab.sec:active { transform:translateY(1px) } .sectiontabs .tab.sec.on { color:var(--fg) } .sectiontabs .tab.sec.on::before { opacity:1; box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); background-image: radial-gradient(150% 205% at 50% 122%, color-mix(in srgb, var(--accent) 44%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 38%, color-mix(in srgb, var(--accent) 6%, transparent) 64%, transparent 86%), linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 52%), linear-gradient(color-mix(in srgb, #000 20%, transparent), color-mix(in srgb, #000 20%, transparent)); } .sectiontabs .tab.sec.on:hover::before { box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent) } .sectiontabs .tab.sec.on::after { content:''; position:absolute; left:11%; right:11%; bottom:1px; height:2px; z-index:-1; border-radius:2px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 88%, #fff) 22%, color-mix(in srgb, var(--accent) 88%, #fff) 78%, transparent); box-shadow:0 0 11px color-mix(in srgb, var(--accent) 70%, transparent); } .sectiontabs .tab.sec:focus-visible { outline:2px solid var(--accent); outline-offset:2px } @media (prefers-reduced-motion:reduce) { .sectiontabs .tab.sec { transition:none } .sectiontabs .tab.sec::before { transition:none } .sectiontabs .tab.sec:active { transform:none } } .tab.locked{color:var(--fg3);border-style:dashed;border-color:var(--line)} .tab.locked:hover{color:var(--accent);border-color:var(--accent);border-style:solid} .tab.locked .lockicon{margin-left:6px;font-size:11px;opacity:.85;vertical-align:middle} .acctbtn.needpick{ border-color:color-mix(in srgb, var(--warn) 60%, transparent); color:var(--warn) } .acctwho{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:6px; border-radius:13px; background:linear-gradient(120deg, color-mix(in srgb, var(--me, var(--accent)) 17%, transparent), color-mix(in srgb, var(--me, var(--accent)) 3%, transparent) 72%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--me, var(--accent)) 22%, transparent) } .acctav{ flex:0 0 56px; width:56px; height:44px; border-radius:11px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg, var(--me, var(--accent)), color-mix(in srgb, var(--me, var(--accent)) 55%, #000)); box-shadow:0 8px 18px -10px var(--me, var(--accent)), inset 0 0 0 1px rgba(255,255,255,.2) } .acctav img{ display:block; width:100%; height:100%; object-fit:cover } .acctav span{ font:700 19px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4) } .acctwhot{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:3px 9px } .acctwhot > b{ flex:1 0 100% } .acctwhot > .acctmailsm{ flex:1 1 0; min-width:0 } .acctwho b{ display:block; font:650 16px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.1px; color:var(--me, var(--fg)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctmailsm{ display:block; font-size:11.5px; color:var(--fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .enhmark{ --eg1:#febc34; --eg2:#39d3b6; flex:none; display:inline-flex; align-items:center; gap:5px; font:750 10.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:1.3px; text-transform:uppercase; white-space:nowrap; cursor:default } :root[data-theme="light"] .enhmark{ --eg1:#b37d00; --eg2:#0c8f7a } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .enhmark{ --eg1:#b37d00; --eg2:#0c8f7a } } .enhmark > i{ flex:none; width:12px; height:12px; filter:drop-shadow(0 0 3px color-mix(in srgb, var(--eg1) 65%, transparent)) } .enhmark > i::before{ content:""; display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--eg1) 35%, var(--eg2)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.2 16.8 11.1 24 12C16.8 12.9 12.9 16.8 12 24C11.1 16.8 7.2 12.9 0 12C7.2 11.1 11.1 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.2 16.8 11.1 24 12C16.8 12.9 12.9 16.8 12 24C11.1 16.8 7.2 12.9 0 12C7.2 11.1 11.1 7.2 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat } span.enhmark > span{ font-size:inherit; color:transparent; -webkit-text-fill-color:transparent; background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) 100% 0 / 260% 100% no-repeat, linear-gradient(90deg, var(--eg1), var(--eg2)); -webkit-background-clip:text; background-clip:text; animation:enhmarksheen 1.2s cubic-bezier(.4,0,.2,1) .2s 1 both } @keyframes enhmarksheen { from { background-position:100% 0, 0 0 } to { background-position:0% 0, 0 0 } } .acctcols{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px } .acctcol{ min-width:0; display:flex; flex-direction:column; gap:2px } .acctsec{ padding:7px 10px 4px; font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg3) } .acctmenu .acctitem{ --ic:var(--accent); display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border:0; border-radius:11px; background:none; color:var(--fg); font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:background .15s ease } .acctmenu .acctitem:hover{ background:color-mix(in srgb, var(--ic) 11%, transparent); text-decoration:none } .acctmenu .acctitem:focus-visible{ outline:2px solid color-mix(in srgb, var(--ic) 70%, transparent); outline-offset:-2px } .acctemo{ flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; font-size:16px; line-height:1; background:color-mix(in srgb, var(--ic, var(--accent)) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--accent)) 22%, transparent); transition:background .15s ease, box-shadow .15s ease } .acctemo i{ display:block; font-style:normal; transition:transform .18s ease-out } .acctmenu .acctitem:hover .acctemo{ background:color-mix(in srgb, var(--ic) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic) 36%, transparent) } .acctmenu .acctitem:hover .acctemo i{ transform:scale(1.2) } .acctlbl{ min-width:0; display:flex; flex-direction:column; gap:1px } .acctlbl b{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctlbl small{ font-size:11px; color:var(--fg3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .acctemo.danger{ color:var(--fail) } .acctsep{ height:1px; margin:6px 8px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent) } .acctmenu .acctitem.acctout b{ color:var(--fail) } .acctmenu .acctitem.acctout:hover{ background:color-mix(in srgb, var(--fail) 13%, transparent) } .sgcard{ max-width:430px } .sgback .pfrow{ justify-content:flex-end } .pfback{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, #000 55%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) } .pfcard-wrap{ width:min(620px, 100%); max-height:min(80vh, 720px); display:flex; flex-direction:column; gap:9px; padding:16px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.5) } .pfcard-wrap h3{ margin:0; font-size:16px; color:var(--fg) } .pfsub{ margin:0; font-size:12px; color:var(--fg2); line-height:1.45 } .pfnick{ color:var(--accent); font-weight:700 } .pfpback{ background:rgba(8,12,18,.45); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px) } .pfcard-wrap.pfpick{ width:min(760px, 100%); max-height:min(84vh, 780px); gap:0; padding:0; overflow:hidden; border-radius:18px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--bg2) 95%, transparent); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); animation:pfpin .18s ease-out } @keyframes pfpin { from { opacity:0; transform:translateY(8px) scale(.985) } } .pfphead{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 10px } .pfpht{ flex:1; min-width:0 } .pfpick h3{ margin:0 0 3px; font-size:18px; font-weight:650; letter-spacing:-.15px } .pfpx{ width:32px; height:32px; margin:-4px -6px 0 0; border:0; border-radius:9px; background:none; color:var(--fg3); font-size:22px; line-height:1; cursor:pointer } .pfpx:hover{ color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent) } .pfpsearch{ position:relative; display:block; margin:0 18px 12px } .pfpsearch svg{ position:absolute; left:11px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--fg3); pointer-events:none } .pfpsearch input{ width:100%; box-sizing:border-box; height:38px; padding:0 12px 0 34px; border-radius:11px; font:inherit; font-size:13.5px; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--fg) 5%, transparent); outline:none; transition:border-color .15s ease, box-shadow .15s ease } .pfpsearch input:focus{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) } .pfpgrid{ flex:1; min-height:120px; overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); align-content:start; gap:8px; padding:8px 18px 16px; scrollbar-gutter:stable } .pfpgrid::-webkit-scrollbar{ width:10px } .pfpgrid::-webkit-scrollbar-track{ background:transparent } .pfpgrid::-webkit-scrollbar-button{ display:none; height:0 } .pfpgrid::-webkit-scrollbar-thumb{ background-color:color-mix(in srgb, var(--fg) 15%, transparent); border-radius:10px; border:3px solid transparent; background-clip:content-box; min-height:40px } .pfpgrid:hover::-webkit-scrollbar-thumb{ background-color:color-mix(in srgb, var(--fg) 26%, transparent) } @supports not selector(::-webkit-scrollbar) { .pfpgrid{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--fg) 22%, transparent) transparent } } .pfp{ position:relative; display:flex; align-items:center; gap:11px; min-width:0; padding:8px 12px 8px 8px; border-radius:13px; cursor:pointer; text-align:left; font:inherit; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 9%, transparent); background:color-mix(in srgb, var(--fg) 3%, transparent); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease } .pfp:hover{ background:color-mix(in srgb, var(--fg) 7%, transparent); border-color:color-mix(in srgb, var(--fg) 18%, transparent) } .pfp:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:1px } .pfp.on{ border-color:color-mix(in srgb, var(--accent) 70%, transparent); background:color-mix(in srgb, var(--accent) 13%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 24px -16px var(--accent) } .pfpav{ flex:0 0 52px; width:52px; height:41px; display:grid; place-items:center; border-radius:9px; overflow:hidden; font:700 18px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); background:linear-gradient(145deg, hsl(var(--h, 210) 55% 52%), hsl(var(--h, 210) 50% 34%)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) } .pfpav.pfpimg{ background:#10151d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) } .pfpav img{ width:100%; height:100%; object-fit:contain } .pfptxt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .pfptxt b{ font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pfptxt small{ font-size:11.5px; color:var(--fg3); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pfpnow{ margin-right:5px; font-weight:700; color:var(--accent) } .pfpick{ --pfp-lmin:58; --pfp-lmax:80 } :root[data-theme="light"] .pfpick{ --pfp-lmin:24; --pfp-lmax:44 } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pfpick{ --pfp-lmin:24; --pfp-lmax:44 } } .pfptxt b.pfpnc{ color:var(--nc) } @supports (color: hsl(from red h s l)) { .pfptxt b.pfpnc{ color:hsl(from var(--nc) h s clamp(var(--pfp-lmin), l, var(--pfp-lmax))) } } .pfpcheck{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font:800 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-style:normal; color:#fff; background:var(--accent); box-shadow:0 0 0 2px var(--bg2); opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .18s ease } .pfp.on .pfpcheck{ opacity:1; transform:none } .pfpnone{ grid-column:1/-1; padding:26px 14px; text-align:center; color:var(--fg3); font-size:13px } .pfpfoot{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid color-mix(in srgb, var(--fg) 9%, transparent) } .pfpcount{ flex:1; font-size:12px; color:var(--fg3) } .pfpick .pfok, .pfpick .pfcancel{ height:36px; padding:0 18px; border-radius:10px; font-size:13.5px } .pfpick .pfok:disabled{ opacity:.45 } @media (max-width: 560px) { .pfback.pfpback{ padding:0; align-items:stretch } .pfcard-wrap.pfpick{ width:100%; max-height:none; height:100%; height:100dvh; border-radius:0; border:0 } .pfpgrid{ grid-template-columns:minmax(0, 1fr); padding:8px 14px 14px } .pfphead{ padding:14px 14px 8px } .pfpsearch{ margin:0 14px 10px } .pfpfoot{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)) } } @media (prefers-reduced-motion: reduce) { .pfcard-wrap.pfpick, .pfp, .pfpcheck { animation:none !important; transition:none !important } } .mmbx{ width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; padding:0; border:0 !important; border-radius:10px; background:none !important; color:var(--fg3); cursor:pointer; transition:background .15s, color .15s } .mmbx:hover{ color:var(--fg); background:color-mix(in srgb, var(--fg) 9%, transparent) !important } .mmbx:active{ transform:scale(.92) } .mmbx svg{ width:15px; height:15px; display:block } .pfpx{ margin:-3px -6px 0 0 } .qrtop .mmbx.x{ position:absolute; top:8px; right:8px } .modalhead .mmbx{ margin-left:auto } .locwrap{ width:min(460px, 100%); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--bg2) 95%, transparent); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); border-radius:18px; animation:qrin .22s cubic-bezier(.2,.8,.2,1) } .loctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:-2px -4px 2px 0 } .sgcard{ max-width:430px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:color-mix(in srgb, var(--bg2) 95%, transparent); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); border-radius:18px; animation:qrin .22s cubic-bezier(.2,.8,.2,1) } .locopt{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px; margin-top:8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:var(--bg3); transition:border-color .15s ease, background .15s ease } .locopt:hover{ border-color:var(--fg3); background:var(--bg2) } .locopt input{ margin:3px 0 0; flex:none; accent-color:var(--accent); width:16px; height:16px } .locopt:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--bg2)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) } .locoptt{ display:flex; flex-direction:column; gap:3px; min-width:0 } .locoptname{ font-size:13.5px; font-weight:650; color:var(--accent); letter-spacing:.1px } .locopt:has(input:checked) .locoptname{ color:var(--accent2) } .locoptd{ font-size:12.5px; color:var(--fg2); line-height:1.5 } .locoptname .locoptflag{ height:1.05em; vertical-align:-.12em; display:inline-block } .locnote{ margin-top:9px; padding:8px 10px; border-radius:8px; font-size:11.5px; line-height:1.45; color:var(--fg); border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background:color-mix(in srgb, var(--warn) 12%, var(--bg2)) } .pfrow{ display:flex; justify-content:flex-end; gap:8px } .pfok,.pfcancel{ font:inherit; font-size:13px; padding:7px 16px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--bg3); color:var(--fg2) } .pfok{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600 } .pfok:disabled{ opacity:.7; cursor:default } .pfcancel:hover{ color:var(--fg); border-color:var(--fg3) } .main{padding:14px;max-width:none;margin:0} @media (max-width:900px){.tabs{top:0;position:static}} @media (max-width:900px) { .top{gap:8px;row-gap:6px;padding:7px 12px} .brand{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .top button,.top .tab{font-size:12.5px;padding:4px 9px} #themeBtn .themelbl{display:none} #themeBtn{padding:4px 8px;font-size:14px;line-height:1} .top .note{display:none} .top:has(.acctwrap) .spacer{display:none} .acctwrap{flex:1 1 0;min-width:0;display:flex;justify-content:flex-end} .top .acctbtn{max-width:100%;min-width:0;padding:3px 7px 3px 9px;gap:7px;font-size:13px} .top .acctbtn .acctgear{width:16px;height:16px} .acctmail{min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .caretdn{flex:none} .tabrow.sectiontabs{order:9;flex:1 0 100%;margin-left:0;padding:2px 0 1px} .tabstrip,.tabrow.sectiontabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none} .tabstrip::-webkit-scrollbar,.tabrow.sectiontabs::-webkit-scrollbar{display:none} .tabrow.subrow{display:block;padding:4px 12px;position:relative} .tabrow.subrow .tabhint{flex:none;margin:0 0 0 2px;padding:0;border:0;align-self:center} .tabrow.subrow .tabstrip{padding-right:0} .tabstrip .tabafter:not(:empty){flex:none;margin-left:8px;padding-left:10px; border-left:1px solid var(--line)} .tabstrip{width:100%} .tab{padding:6px 11px;font-size:13.5px} .tabrow.sectiontabs .tab.sec{padding:6px 11px;font-size:13.5px;border-radius:9px} .tabrow.subrow .tabtools{margin-left:0;padding-left:0;padding-right:0} .tabrow.subrow .wtools{gap:2px;flex-wrap:nowrap;justify-content:flex-start;margin:0;padding:0} .tabrow.subrow .maptool{gap:4px;padding:6px 5px;font-size:11.5px} .tabrow.subrow .mtico{font-size:12.5px} } @media (max-width:340px) { .tabrow.subrow .wtools{gap:0} .tabrow.subrow .maptool{gap:3px;padding:6px 4px;font-size:11px} .tabrow.subrow .mtico{font-size:12px} } .tabstrip.hasmore,.sectiontabs.hasmore{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)} .acctwrap{position:relative} #themeBtn{display:inline-flex;align-items:center;gap:6px} #themeBtn .themeico{font-style:normal;line-height:1} .top .acctbtn{ --me-b:var(--me, var(--accent)); position:relative; display:inline-flex; align-items:center; gap:8px; padding:4px 9px 4px 11px; border-radius:10px; cursor:pointer; max-width:300px; white-space:nowrap; color:var(--fg); font:600 13.5px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.1px; background:transparent; border:1px solid transparent; transition:background .18s, border-color .18s } .top .acctbtn:hover, .top .acctbtn[aria-expanded="true"]{ background:var(--bg3); border-color:var(--line) } .acctmail{ position:relative; isolation:isolate; overflow:hidden; text-overflow:ellipsis; max-width:226px; padding:6px 13px; margin:-6px -13px; color:hsl(from var(--me) h s clamp(var(--acct-lmin), l, var(--acct-lmax))) } .acctmail::before{ content:""; position:absolute; z-index:-1; left:6px; right:6px; top:8px; bottom:6px; border-radius:999px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--acct-glow) 80%, transparent) 7px, color-mix(in srgb, var(--acct-glow) 80%, transparent) calc(100% - 7px), transparent); filter:blur(3px); opacity:0; transform:scaleX(0); transform-origin:left center; transition:opacity .45s ease-out, transform 0s .45s } @supports (text-box: trim-both cap alphabetic) { .acctmail{ text-box:trim-both cap alphabetic } .acctmail::before{ top:3px; bottom:3px } } .acctwrap .acctbtn{ --acct-glow:oklch(from var(--accent) var(--acct-gl) clamp(var(--acct-gcmin), c, var(--acct-gcmax)) h) } .acctwrap[style*="--me"] .acctbtn{ --acct-glow:oklch(from var(--me) var(--acct-gl) clamp(var(--acct-gcmin), calc(c * 1.1), var(--acct-gcmax)) calc(h + 180)) } .top .acctbtn:hover .acctmail::before, .top .acctbtn[aria-expanded="true"] .acctmail::before{ opacity:1; transform:none; transition:opacity .4s ease-out, transform 1.2s cubic-bezier(.25,.8,.25,1) } .acctgear{ flex:none; width:17px; height:17px; color:var(--fg3); transition:color .18s } .top .acctbtn.acctnogear .acctgear{ display:none } .acctgear svg{ display:block; width:100%; height:100%; animation:acctspin 1.4s cubic-bezier(.25,.1,.1,1) .5s 1 backwards; transition:transform .6s cubic-bezier(.3,1.3,.5,1) } @keyframes acctspin { from { transform:rotate(-360deg) } } .top .acctbtn:hover .acctgear, .top .acctbtn[aria-expanded="true"] .acctgear{ color:var(--fg2) } .top .acctbtn:hover .acctgear svg{ transform:rotate(90deg) } .top .acctbtn.needpick{ --me-b:var(--warn); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 60%, transparent) } .top .acctbtn.acctcall{ animation:acctring 2.4s ease-out infinite } @keyframes acctring { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--me-b) 55%, transparent) } 55%, 100% { box-shadow:0 0 0 10px color-mix(in srgb, var(--me-b) 0%, transparent) } } .acctguestmenu .acctsignin:not(.acctin) .acctemo, .acctguestmenu .acctsignin:not(.acctin) .acctlbl{ opacity:.6; transition:opacity .15s } .acctguestmenu .acctsignin:not(.acctin):hover .acctemo, .acctguestmenu .acctsignin:not(.acctin):hover .acctlbl{ opacity:1 } .acctguestmenu .acctsignin:not(.acctin)::after{ content:"Sign in"; flex:none; margin-left:auto; padding:3px 9px; border-radius:999px; font:600 11px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); opacity:0; transition:opacity .15s } .acctguestmenu .acctsignin:not(.acctin):hover::after{ opacity:1 } .acctguestmenu .acctin b{ color:var(--accent) } .acctguestmenu .acctav{ background:linear-gradient(145deg, color-mix(in srgb, var(--fg) 30%, transparent), color-mix(in srgb, var(--fg) 12%, transparent)) } @property --agr { syntax:''; inherits:false; initial-value:0deg; } .acctguide{ position:fixed; z-index:34; width:min(560px, calc(100vw - 24px)); padding:16px 18px 16px; border-radius:18px; color:var(--fg); cursor:pointer; border:2px solid transparent; background:linear-gradient(color-mix(in srgb, var(--bg2) 97%, transparent), color-mix(in srgb, var(--bg2) 97%, transparent)) padding-box, conic-gradient(from var(--agr), #a06bff, #27b3d3, #febc34, #e0588a, #a06bff) border-box; box-shadow:0 28px 64px -22px rgba(0,0,0,.65), 0 0 40px -18px #27b3d3; animation:agin .5s cubic-bezier(.2,.9,.3,1.12) both, agturn 7s linear infinite, agbob 2.8s ease-in-out 1s infinite } @keyframes agin { from { opacity:0; transform:translateY(-12px) scale(.95) } } @keyframes agturn { to { --agr:360deg } } @keyframes agbob { 50% { translate:0 -5px } } .agarrow{ position:absolute; top:-9px; width:16px; height:16px; transform:translateX(-50%) rotate(45deg); border-radius:3px 0 0 0; background:var(--bg2); border-top:2px solid #27b3d3; border-left:2px solid #27b3d3 } .agtitle{ display:block; font:700 19px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.2px; text-wrap:balance } .agemos{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px } .agemos span{ position:relative; width:56px; height:56px; display:grid; place-items:center; font-size:29px; line-height:1; border-radius:16px; background:color-mix(in srgb, var(--ic) 17%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic) 42%, transparent); animation:agpop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(.35s + var(--i) * .09s) } @keyframes agpop { from { opacity:0; transform:scale(.4) translateY(8px) } } .agemos .agenh i{ position:absolute; top:-6px; right:-6px; padding:2px 5px; border-radius:999px; font-style:normal; font-size:10.5px; font-weight:800; color:#1a1203; background:#febc34; box-shadow:0 0 0 2px var(--bg2) } .agopen{ margin-left:auto; height:34px; padding:0 18px; border-radius:10px; font-weight:700; cursor:pointer; color:#06171c !important; border:0 !important; background:linear-gradient(180deg, color-mix(in srgb, #39d3b6 88%, #fff), #39d3b6) !important } .acctguidestem{ position:fixed; z-index:37; width:2px; pointer-events:none; border-radius:2px; background:repeating-linear-gradient(to top, #27b3d3 0 5px, transparent 5px 9px) 0 0 / 2px 18px; animation:agstem .9s linear infinite; filter:drop-shadow(0 0 3px color-mix(in srgb, #27b3d3 70%, transparent)) } .acctguidestem::before{ content:""; position:absolute; left:50%; top:-3px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#27b3d3; box-shadow:0 0 0 3px color-mix(in srgb, #27b3d3 28%, transparent), 0 0 10px #27b3d3 } @keyframes agstem { to { background-position:0 -18px } } body:has(#mmc.mmc--window, #mmc.mmc--full, .psback, .ctback, .ctdback, .modalback, .aboutback, .pfback:not([hidden]), #acctMenu:not([hidden])) :is(.acctguide, .acctguidestem){ display:none } @media (max-width: 640px) { .acctguide{ padding:14px 14px 12px } .agtitle{ font-size:17px } .agemos span{ width:50px; height:50px; font-size:26px } } @media (prefers-reduced-motion: reduce) { .acctgear svg, .top .acctbtn.acctcall, .acctguide, .acctguidestem, .agemos span{ animation:none !important } } .acctmenu{ position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:min(540px, calc(100vw - 20px)); padding:8px; border-radius:18px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--me, var(--accent)) 9%, transparent), transparent 40%), color-mix(in srgb, var(--bg2) 84%, transparent); -webkit-backdrop-filter:blur(24px) saturate(165%); backdrop-filter:blur(24px) saturate(165%); box-shadow:0 26px 60px -22px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1); animation:acctin .16s ease-out } @keyframes acctin { from { opacity:0; transform:translateY(-4px) } } @media (max-width: 560px) { .acctmenu{ position:fixed; left:10px; right:10px; top:58px; width:auto; padding:6px; max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow:auto; overscroll-behavior:contain } .acctcols{ grid-template-columns:1fr; gap:0 } .acctwho{ padding:8px 10px; margin-bottom:2px } .acctav{ flex-basis:48px; width:48px; height:38px } .acctsec{ padding:6px 10px 2px } .acctmenu .acctitem{ padding:5px 8px } .acctemo{ flex-basis:30px; width:30px; height:30px } .acctsep{ margin:4px 8px } } @media (prefers-reduced-motion: reduce) { .acctmenu, .acctemo, .acctemo i, .enhmark > span { animation:none !important; transition:none !important } } .verifywall{max-width:640px;margin:36px auto;padding:26px 28px;text-align:center; background:var(--bg2);border:1px solid var(--line);border-radius:14px} .vwicon{font-size:40px;line-height:1;margin-bottom:6px} .verifywall h2{margin:6px 0 12px;font-size:21px} .verifywall p{margin:0 0 12px;line-height:1.6;color:var(--fg2);text-align:left} .vwlead{color:var(--fg)!important;font-size:15px} .vwacts{display:flex;gap:12px;align-items:center;justify-content:center; flex-wrap:wrap;margin-top:18px;text-align:center!important} .vwgo{display:inline-block;padding:10px 18px;border-radius:9px;font-weight:600; background:var(--accent);color:#fff;border:1px solid var(--accent)} .vwgo:hover{text-decoration:none;filter:brightness(1.08)} .vwalt{color:var(--fg2);font-size:13.5px} .vwfoot{text-align:center!important;font-size:12.5px} .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px} input,select,button{font:inherit;color:var(--fg);background:var(--bg2); border:1px solid var(--line);border-radius:var(--r);padding:5px 9px} input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px} button{cursor:pointer} button:hover{background:var(--bg3)} button.dflt{color:var(--fg3);border-style:dashed;padding:2px 8px;font-size:12.5px} button.dflt:hover{color:var(--fg);border-style:solid} .modalback{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex; align-items:flex-start;justify-content:center;padding:60px 16px;z-index:50;overflow:auto} button.warn{color:var(--warn,#d08a2a);border-color:color-mix(in srgb,var(--warn,#d08a2a) 45%,transparent)} button.danger{color:var(--fail);border-color:color-mix(in srgb,var(--fail) 45%,transparent)} button.danger:hover{background:color-mix(in srgb,var(--fail) 12%,transparent); border-color:var(--fail)} button.on{background:var(--accent);border-color:var(--accent);color:#fff} .grow{flex:1;min-width:160px} .note{color:var(--fg3);font-size:13.5px} .warnbar{background:color-mix(in srgb,var(--warn) 18%,var(--bg2));border:1px solid var(--warn); border-radius:var(--r);padding:6px 10px;margin-bottom:8px} .tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)} table{border-collapse:collapse;width:100%;font-size:14px} th{position:sticky;top:0;background:var(--bg3);text-align:left;font-weight:600;color:var(--fg2); padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1} td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:top} tr.r:hover{background:var(--bg3);cursor:pointer} td.drag{width:22px;padding-right:0} .grip{cursor:grab;color:var(--fg3);user-select:none;font-size:15px;line-height:1} .grip:active{cursor:grabbing} .grip:hover{color:var(--fg)} tr.dragging{opacity:.45} tr.rowgood td:first-child{box-shadow:inset 3px 0 0 #2ea043} tr.rowwarn td:first-child{box-shadow:inset 3px 0 0 #d29922} tr.rowbad td:first-child{box-shadow:inset 3px 0 0 #f85149} tr.rowoff td:first-child{box-shadow:inset 3px 0 0 var(--fg3)} tr.rowgood td{background:rgba(46,160,67,.07)} tr.rowwarn td{background:rgba(210,153,34,.09)} tr.rowbad td{background:rgba(248,81,73,.09)} tr.rowoff td{opacity:.55} .compact td{padding:5px 11px} td.mono,.mono{font-family:var(--mono);font-size:13px} td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} td.time{color:var(--fg2);white-space:nowrap;font-variant-numeric:tabular-nums} .trunc{max-width:var(--truncw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} @keyframes flashrow{from{background:var(--flash)}to{background:transparent}} tr.new{animation:flashrow var(--flashms,1400ms) ease-out 1} @keyframes flashcell { from { opacity:1 } to { opacity:0 } } td.cellflash{position:relative;isolation:isolate} td.cellflash::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:opacity; background:color-mix(in srgb, var(--accent) 34%, transparent);animation:flashcell var(--flashms,1400ms) ease-out 1 forwards} @media (prefers-reduced-motion:reduce){ td.cellflash{animation:none;box-shadow:inset 0 -2px 0 var(--accent)} } tr.rowmp > td{background:color-mix(in srgb, var(--sr2) 7%, transparent)} tr.rowmp > td:first-child{box-shadow:inset 3px 0 0 var(--sr2)} .pill.st-mp{border-color:color-mix(in srgb,var(--sr2) 55%,var(--line)); background:color-mix(in srgb,var(--sr2) 14%,transparent)} .pill.st-obs{border-color:color-mix(in srgb,var(--info) 55%,var(--line)); background:color-mix(in srgb,var(--info) 12%,transparent)} .pill.st-sp,.pill.st-menu{color:var(--fg2)} .flag{line-height:1;margin-right:7px;display:inline-flex;align-items:center} .flagimg{ height:1.15em; width:auto; aspect-ratio:4/3; display:block; border-radius:2px; vertical-align:-.15em; box-shadow:0 0 0 1px rgba(0,0,0,.18); background:var(--bg3); } :root:not([data-theme="light"]) .flagimg{ box-shadow:0 0 0 1px rgba(255,255,255,.22) } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .flagimg{ box-shadow:0 0 0 1px rgba(0,0,0,.18) } } :root[data-theme="dark"] .flagimg{ box-shadow:0 0 0 1px rgba(255,255,255,.22) } .cname{font-size:13.5px;color:var(--fg)} @media (min-width:701px){ td.ctry, table.rowcards > tbody > tr > td[data-m=act]{white-space:nowrap} } td.statuscell{white-space:nowrap;width:1%} table.fitcols th,table.fitcols td{width:1%;white-space:nowrap} table.fitcols th.expander,table.fitcols td.expander{width:100%} .dbgrid{display:flex;flex-wrap:wrap;gap:5px 8px} .dbkv{display:flex;align-items:baseline;gap:6px;padding:2px 9px;border-radius:6px; border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 4%,transparent); max-width:100%;min-width:0} .dbk{font-family:var(--mono);font-size:11.5px;color:var(--fg3);white-space:nowrap} .dbk::after{content:':'} .dbv{font-size:12.5px;color:var(--fg);word-break:break-all;min-width:0} .dbv.dbempty{color:var(--fg3)} @media (prefers-reduced-motion:reduce){tr.new{animation:none;box-shadow:inset 3px 0 0 var(--accent)}} .pill{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--bg3); border:1px solid var(--line);font-size:12.5px;white-space:nowrap} .perm-tree{margin-top:10px;display:flex;flex-direction:column;gap:2px} .perm-sec{border:1px solid var(--bd,#3a3a3a);border-radius:6px;padding:7px 10px} .perm-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600} .perm-name{flex:0 0 auto} .perm-count{color:var(--fg3);font-weight:400;font-size:12px} .perm-kids{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 2px 22px} .perm-kids label{display:flex;align-items:center;gap:6px;font-weight:400;cursor:pointer} .perm-admin{display:flex;align-items:center;gap:6px;margin:12px 0 4px;cursor:pointer} .ca-check{display:flex;align-items:baseline;gap:2px;margin:6px 0;cursor:pointer;flex-wrap:wrap} .ca-check .hint{color:var(--fg3);font-size:12.5px} .ca-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0} .ca-chans{display:flex;flex-direction:column;margin:4px 0 10px} tr.ca-off td{opacity:.55} .card .pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)} .card .pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} .pill.vpn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent); border-color:color-mix(in srgb,var(--warn) 45%,var(--line));font-size:11px;padding:0 5px;margin-right:4px} .seen{font-size:11px;line-height:1.6;white-space:nowrap;opacity:.9} .ok{color:var(--ok)} .warn{color:var(--warn)} .fail{color:var(--fail)} .ladder{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--bg3); min-width:clamp(120px,17vw,250px)} .ladder i{display:block;height:100%;position:relative;overflow:hidden} .ladder b{display:none;text-align:center;white-space:nowrap; font:600 10px/16px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)} @media (min-width:900px){ .ladder{height:16px} .ladder i.lab b{display:block} } .ladder i.d{background:var(--rung-direct)} .ladder i.n{background:var(--rung-nat)} .ladder i.m{background:var(--rung-mona)} .lad-l{font-size:11px;color:var(--fg3);white-space:nowrap} tr.det td{background:var(--bg3);padding:10px 14px} .kv{display:grid;grid-template-columns:190px 1fr;gap:4px 14px;font-size:13.5px} .kv dt{color:var(--fg3)} .kv dd{margin:0;font-family:var(--mono);word-break:break-word;white-space:pre-wrap} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:12px} .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px} .cards > .card{display:flex;flex-direction:column;text-align:center;min-height:88px} .cards > .card > b{line-height:36px;min-height:36px} .card b{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums} .card > span{color:var(--fg3);font-size:12px;text-transform:uppercase;letter-spacing:.6px} .nick, .tname, .wtipnick, td.nick, .card .nick, .card .tname { text-transform:none; letter-spacing:0 } .chart{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px} .chart svg{display:block;width:100%;height:auto} .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--fg2);margin-top:6px} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px} .cats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px} .cats label{display:inline-flex;align-items:center;gap:4px;cursor:pointer} .logview{font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;max-height:70vh;overflow:auto; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px} .fld{display:flex;flex-direction:column;gap:3px} .fld>label{color:var(--fg3);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px} .fld input,.fld select{width:100%} .fld .hint{font-size:11.5px;line-height:1.35} .bar.top{align-items:flex-start} .cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:14px;align-items:start} th.num{text-align:right} .cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px; max-height:230px;overflow:auto;margin:8px 0} .cmppick{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:var(--r); padding:6px 9px;background:var(--bg2);cursor:pointer} .cmppick.sel{border-color:var(--accent)} .cmppick i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;background:var(--line)} .cmppick .who{font-weight:600} .cmppick .sub{color:var(--fg2);font-size:11px} .cmpline{display:flex;gap:8px;padding:1px 6px;border-left:3px solid var(--c);white-space:pre-wrap; word-break:break-word} .cmpline:hover{background:var(--bg3)} .cmpline .t{color:var(--fg2);flex:0 0 auto} .cmpline .w{color:var(--c);font-weight:600;flex:0 0 auto} .cmpline.hit{background:color-mix(in srgb,var(--accent) 14%,transparent)} .cmpwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2); font-family:var(--mono);font-size:12px;line-height:1.5;overflow:auto;max-height:64vh;padding:6px 0} .threads{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .thread{border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer; background:var(--bg2);font-family:var(--mono);font-size:11px} .thread.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)} .thread b{font-weight:600} .thread span{color:var(--fg2)} .tag-new{background:color-mix(in srgb,var(--accent) 18%,transparent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .tag-hq{background:color-mix(in srgb,#d29922 22%,transparent); border:1px solid color-mix(in srgb,#d29922 55%,transparent)} .tag-rc{background:color-mix(in srgb,var(--rung-mona) 20%,transparent); border:1px solid color-mix(in srgb,var(--rung-mona) 55%,transparent)} .tag-other{background:var(--bg3);border:1px solid var(--line)} :root { --s1:6px; --s2:10px; --s3:14px; --s4:22px; } .stack > * + * { margin-top: var(--s3); } .stack.tight > * + * { margin-top: var(--s2); } .pagehead { border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:var(--s3) } .pagehead:empty { display:none } .pagehead h2 { margin:0 0 3px; font-size:19px; font-weight:650; letter-spacing:-.15px } .pagehead p { margin:0; color:var(--fg2); font-size:13.5px; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } @media (max-width:700px) { .pagehead p { white-space:normal } } .filtergroup { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px } .flabel { font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--fg3); flex:0 0 auto; min-width:150px } .cats label.off { opacity:.45 } .fcount { font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--fg3); background:var(--bg3); border-radius:999px; padding:0 5px; margin-left:1px } .pagehead .bar { margin:10px 0 0 } .sect { font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--fg3); margin:0 0 var(--s2) } .card > .sect:not(:first-child), .stack > .sect { margin-top:var(--s4) } .card h3 { margin:0 0 4px; font-size:15.5px; font-weight:650 } .card > .note:first-of-type { margin-bottom:var(--s2) } .card > .tw { border-radius:6px } .empty { color:var(--fg3); font-size:13.5px; padding:18px 14px; text-align:center; border:1px dashed var(--line); border-radius:var(--r); background:var(--bg2) } .empty.busy::after { content:""; display:inline-block; width:9px; height:9px; margin-left:8px; border-radius:50%; background:var(--accent); animation:pulse 1.1s ease-in-out infinite; vertical-align:middle } @keyframes pulse { 0%,100% { opacity:.25; transform:scale(.8) } 50% { opacity:1; transform:scale(1) } } @media (prefers-reduced-motion:reduce) { .empty.busy::after { animation:none; opacity:.7 } } .cards > .card > b > .pending{ height:.5em; max-width:100% } .pending{ display:inline-block; height:.72em; vertical-align:-.02em; border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--fg3) 22%, transparent) 0%, color-mix(in srgb, var(--fg3) 22%, transparent) 35%, color-mix(in srgb, var(--accent) 34%, transparent) 50%, color-mix(in srgb, var(--fg3) 22%, transparent) 65%, color-mix(in srgb, var(--fg3) 22%, transparent) 100%); background-size:260% 100%; animation:shimmer 1.5s linear infinite } @keyframes shimmer { from { background-position:130% 0 } to { background-position:-130% 0 } } .chartskel .chartskelplot{ position:relative; height:130px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg2); overflow:hidden } .chartskel .chartskelbar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 70%, transparent) 50%, transparent 100%); background-size:45% 100%; background-repeat:no-repeat; animation:sweep 1.6s ease-in-out infinite } @keyframes sweep { from { background-position:-45% 0 } to { background-position:145% 0 } } .chartskel .chartskelnote{ color:var(--fg3); font-size:12px; padding:7px 2px 0; text-align:center } @media (prefers-reduced-motion:reduce) { .pending{ animation:none } .chartskel .chartskelbar{ animation:none; background-position:50% 0; opacity:.6 } } .modalback .card { box-shadow:0 18px 48px rgba(0,0,0,.32); width:100% } .sicard { --si1:#0a7565; --si2:#1166c9; width:min(420px, 100%); margin:7vh auto; position:relative; overflow:hidden; border-radius:20px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); color:var(--fg); background:radial-gradient(640px 260px at 0% -12%, color-mix(in srgb, var(--si1) 16%, transparent), transparent 66%), radial-gradient(580px 280px at 100% 4%, color-mix(in srgb, var(--si2) 15%, transparent), transparent 64%), color-mix(in srgb, var(--bg2) 95%, transparent); -webkit-backdrop-filter:blur(26px) saturate(165%); backdrop-filter:blur(26px) saturate(165%); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); animation:siin .3s cubic-bezier(.2,.9,.3,1.08) } @keyframes siin { from { opacity:0; transform:translateY(12px) scale(.975) } } :root[data-theme="dark"] .sicard, :root:not([data-theme="light"]) .sicard { --si1:#39d3b6; --si2:#5aa9ff } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sicard { --si1:#0a7565; --si2:#1166c9 } } .sicard::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; background:linear-gradient(90deg, transparent, var(--si1) 24%, var(--si2) 66%, transparent); opacity:.9 } .sihead { display:flex; align-items:center; gap:12px; padding:16px 14px 14px 16px; border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent) } .siico { flex:none; width:46px; height:46px } .siico img { width:100%; height:100%; display:block; border-radius:12px; box-shadow:0 10px 24px -12px color-mix(in srgb, var(--si2) 90%, transparent), inset 0 0 0 1px rgba(255,255,255,.10) } .siht { flex:1; min-width:0 } .siht h3 { margin:0; font:650 18px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.15px; color:var(--fg) } .sisub { display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--fg3) } .sihead .mmbx { margin:-2px -4px 0 0 } .sibody { padding:16px } .siwarn { margin:0 0 12px } .sihelp { margin:0 0 12px; font-size:12.5px; line-height:1.45; color:var(--fg3) } .sihelp a { color:var(--si2) } .sirow { position:relative; margin:0 0 10px } .siri { position:absolute; left:12px; top:50%; width:18px; height:18px; margin-top:-9px; display:block; color:var(--fg3); pointer-events:none; transition:color .15s } .siri svg { width:18px; height:18px; display:block } .sirow input { width:100%; height:46px; padding:0 14px 0 40px; border-radius:12px; font-size:14px; color:var(--fg); background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid color-mix(in srgb, var(--fg) 13%, transparent); transition:border-color .15s, background .15s, box-shadow .15s } .sirow input:hover { background:color-mix(in srgb, var(--fg) 8%, transparent) } .sirow input:focus { outline:none; border-color:color-mix(in srgb, var(--si2) 70%, transparent); background:color-mix(in srgb, var(--fg) 8%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--si2) 22%, transparent) } .sirow:focus-within .siri { color:var(--si2) } .sirow input::placeholder { color:var(--fg3) } .sirow input:-webkit-autofill, .sirow input:-webkit-autofill:hover, .sirow input:-webkit-autofill:focus, .sirow input:-webkit-autofill:active { -webkit-text-fill-color:var(--fg); caret-color:var(--fg); -webkit-box-shadow:0 0 0 1000px var(--bg3) inset; box-shadow:0 0 0 1000px var(--bg3) inset; transition:background-color 100000s ease-in-out 0s } .sirow input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px var(--bg3) inset, 0 0 0 3px color-mix(in srgb, var(--si2) 22%, transparent); box-shadow:0 0 0 1000px var(--bg3) inset, 0 0 0 3px color-mix(in srgb, var(--si2) 22%, transparent) } .sicaptcha { margin:0 0 12px; display:flex; justify-content:center } iframe[src*="/recaptcha/"] { color-scheme:normal } .sibtn { width:100%; height:46px; margin-top:2px; border:0; border-radius:12px; cursor:pointer; color:#fff; font:650 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif; background:linear-gradient(180deg, color-mix(in srgb, var(--si2) 92%, #fff), var(--si2)) !important; box-shadow:0 10px 24px -12px var(--si2), inset 0 1px 0 rgba(255,255,255,.35); transition:filter .15s } .sibtn:hover { filter:brightness(1.07) } .sibtn:focus-visible { outline:2px solid var(--si2); outline-offset:2px } .sifoot { margin:12px 0 0; text-align:center; font-size:12.5px; color:var(--fg3) } .sifoot a { color:var(--fg2) } .sifoot a:hover { color:var(--fg) } .sihint { margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--fg3) } .sihint > summary { display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; cursor:pointer; color:var(--fg3); transition:color .14s } .sihint > summary::-webkit-details-marker { display:none } .sihint > summary::before { content:''; width:0; height:0; border:4px solid transparent; border-left-color:currentColor; transition:transform .16s cubic-bezier(.2,.8,.2,1) } .sihint[open] > summary::before { transform:rotate(90deg) translateX(-1px) } .sihint > summary:hover { color:var(--fg2) } .sihint p { margin:9px 0 0; padding:10px 12px; border-radius:10px; color:var(--fg2); background:color-mix(in srgb, var(--fg) 4%, transparent); border-left:2px solid color-mix(in srgb, var(--si1) 55%, transparent) } .sihint b { color:var(--fg) } .signinback { align-items:flex-start; padding-top:8vh; background:rgba(8,12,18,.46); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) } .signinback .sicard { margin:0 auto } .sipage .main { padding-top:2vh } @media (max-width:560px) { .sicard { margin:4vh auto; width:100% } .signinback { padding:12px; padding-top:6vh } .sihead { padding:14px 10px 12px 13px } .siico { width:40px; height:40px } .sibody { padding:14px } } @media (prefers-reduced-motion: reduce) { .sicard { animation:none } } .tab.signincta { border:1px solid var(--accent); color:var(--accent); font-weight:650; animation:mmbctapulse 4.5s ease-out 3 } .tab.signincta:hover { background:var(--accent); color:var(--bg2); border-color:var(--accent) } @keyframes mmbctapulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent) } 12% { box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent) } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent) } } @media (prefers-reduced-motion: reduce) { .tab.signincta { animation:none } } .modalhead { display:flex; align-items:baseline; gap:10px; margin-bottom:var(--s2) } .modalhead h3 { margin:0; flex:1 } .modalhead .x { cursor:pointer; color:var(--fg3); font-size:19px; line-height:1; padding:0 4px } .modalhead .x:hover { color:var(--fg) } td.nick .talk { margin-left:6px; cursor:pointer; color:var(--fg3); font-size:11px; border:1px solid var(--line); border-radius:999px; padding:0 6px; white-space:nowrap } td.nick .talk:hover { color:var(--accent); border-color:var(--accent) } .talkwrap { border:1px solid var(--line); border-radius:var(--r); background:var(--bg); max-height:56vh; overflow:auto; padding:4px 0 } .talkline { display:grid; grid-template-columns:74px 128px 1fr; gap:10px; align-items:baseline; padding:4px 12px; font-size:13px; border-left:3px solid transparent } .talkline + .talkline { border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent) } .talkline .t { color:var(--fg3); font-family:var(--mono); font-size:11.5px } .talkline .k { font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--fg2) } .talkline .x { word-break:break-word } .talkline.k-connected { border-left-color:var(--ok) } .talkline.k-connected .k { color:var(--ok) } .talkline.k-joining { border-left-color:var(--accent) } .talkline.k-joining .k { color:var(--accent) } .talkline.k-disconnected_self, .talkline.k-disconnected { border-left-color:var(--warn) } .talkline.k-disconnected_self .k, .talkline.k-disconnected .k { color:var(--warn) } .talkline.k-failed, .talkline.k-timeout { border-left-color:var(--fail) } .talkline.k-failed .k, .talkline.k-timeout .k { color:var(--fail) } @media (max-width:640px) { .talkline { grid-template-columns:64px 1fr } .talkline .k { grid-column:2 } .talkline .x { grid-column:1/-1 } } .eps { display:flex; flex-direction:column; gap:3px } .epswho { font-weight:600; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .epsrow { display:flex; flex-wrap:wrap; gap:4px } .ep { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; border:1px solid var(--line); border-radius:999px; padding:1px 8px; background:var(--bg3); white-space:nowrap } .ep b { font-family:inherit; font-weight:700; color:var(--fg3); font-size:10px; letter-spacing:.4px } .ep i { font-style:normal; font-size:9.5px; letter-spacing:.5px; color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); border-radius:3px; padding:0 3px } .ep i.tcp { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 55%,transparent) } .pill.game-ee2 { background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:color-mix(in srgb,var(--accent) 45%,transparent) } .pill.game-aos { background:color-mix(in srgb,var(--rung-mona) 20%,transparent); border-color:color-mix(in srgb,var(--rung-mona) 50%,transparent) } .mtubox { white-space:nowrap } .mtueff { color:var(--ok); font-weight:650 } .mtusep { color:var(--fg3) } .mtunone { color:var(--fg3) } th.expander { width:100% } td.expander, th.expander { text-align:center; padding-left:0; padding-right:8px } th { white-space:nowrap } td.expander .caret { display:inline-block; color:var(--fg3); font-size:15px; line-height:1; transition:transform .12s ease } tr.r:hover td.expander .caret { color:var(--accent) } tr.r.open td.expander .caret { transform:rotate(180deg); color:var(--accent) } @media (prefers-reduced-motion:reduce) { td.expander .caret { transition:none } } tr.det .cols2 { align-items:stretch } tr.det details > summary { cursor:pointer; list-style:revert } tr.det details[open] > summary { margin-bottom:6px } .whyi { margin-left:5px; color:var(--fg3); cursor:help; font-size:12px; vertical-align:middle } .whyi:hover { color:var(--accent) } .ep.alt { border-color:color-mix(in srgb,var(--warn) 55%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent) } .lockon { color:var(--fail); font-weight:650 } .lockoff { color:var(--fg3) } tr.rowlocked td:first-child { box-shadow:inset 3px 0 0 var(--fail) } tr.rowlocked td { background:rgba(248,81,73,.07) } .viewasbtn.on-preview { background:color-mix(in srgb,var(--warn) 22%,var(--bg2)); color:var(--fg); font-weight:600 } .viewasbtn.on-preview:hover { background:color-mix(in srgb,var(--warn) 32%,var(--bg2)) } .acctbtn.previewing { border-color:var(--warn); box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent) } .panels { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .panels > .panel { flex:0 1 auto; min-width:230px; max-width:100%; padding:12px 14px } .panels .tw { border:0; border-radius:0; background:transparent; overflow:visible } .panels table { width:auto } .panels th { background:transparent; padding:0 16px 6px 0; font-size:12px; letter-spacing:.4px; text-transform:uppercase; border-bottom:1px solid var(--line) } .panels td { padding:6px 16px; padding-left:0; font-size:14px; border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent) } .panels td.plabel { color:var(--fg); font-weight:500 } .panels td.plabel:has(> .pflag) { position:relative; isolation:isolate; text-shadow:0 0 3px var(--bg2), 0 0 1px var(--bg2) } .pflag { --pflag-o:.5; --pflag-tail:.36; position:absolute; z-index:-1; inset:4px 0 4px -8px; overflow:hidden; border-radius:4px 0 0 4px; pointer-events:none } .pflag::before, .pflag::after { content:''; position:absolute; top:0; bottom:0; left:0; background:var(--flag) center / cover no-repeat } .pflag::before { right:0; background-size:100% 100%; filter:blur(7px) saturate(1.3); transform:scale(1.1, 1.8); opacity:var(--pflag-tail); -webkit-mask-image:linear-gradient(90deg, #000 12%, transparent 88%); mask-image:linear-gradient(90deg, #000 12%, transparent 88%) } .pflag::after { aspect-ratio:17 / 10; opacity:var(--pflag-o); -webkit-mask-image:linear-gradient(90deg, #000 50%, transparent); mask-image:linear-gradient(90deg, #000 50%, transparent) } :root[data-theme="light"] .pflag { --pflag-o:.42; --pflag-tail:.3 } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pflag { --pflag-o:.42; --pflag-tail:.3 } } .panels td.pnum { color:var(--fg); font-weight:650; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap } .numstrong { font-weight:650 } .numstrong.ok { color:var(--ok) } .numstrong.warn { color:var(--warn) } .numstrong.fail { color:var(--fail) } .numzero { color:var(--fg3) } .panels td.pnum .ok { color:var(--ok) } .panels td.pnum .warn { color:var(--warn) } .panels td.pnum .fail { color:var(--fail) } .panels td.pnum .numzero { color:var(--fg3) } .pingrow .ingame, .pingrow .feedbox { width:max-content; min-width:28ch; max-width:56ch } .pingside { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .pingrow.stackside { flex-direction:column } .pingrow.stackside > * { width:100% } .feedbox { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; font-size:12.5px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb, var(--bg2) 60%, transparent) } .gamepick { flex:1 1 100%; min-width:0 } .pingrow { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .pingrow > :first-child { flex:0 1 auto; min-width:min(100%, 420px) } .pingrow > :last-child { flex:1 1 260px; min-width:0 } .crashtbl { width:auto } .crashtbl td, .crashtbl th { padding-left:14px; padding-right:14px; white-space:nowrap } .crashtbl td.exccell { max-width:46ch; overflow:hidden; text-overflow:ellipsis } .crashtbl td.time { font-size:12.5px } .vchip { display:inline-block; margin-left:8px; padding:0 6px; border-radius:5px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--fg2); border:1px solid var(--line); background:color-mix(in srgb, var(--fg) 6%, transparent) } .pingtbl { width:100% } .pingtbl th.fit, .pingtbl td.fit { width:1%; white-space:nowrap } .pingtbl td, .pingtbl th { padding-left:12px; padding-right:12px } .pingtbl td { font-size:14px } .pingtbl td.nick { font-size:14px; font-weight:600 } .chart svg { display:block } .chart + .chart { margin-top:16px } .hg { width:100% } .hg th.fit, .hg td.fit { width:1%; white-space:nowrap } .gpill { display:inline-block; padding:1px 9px; border-radius:999px; white-space:nowrap; font-size:11.5px; font-weight:650; border:1px solid transparent } .gpill.good { color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); border-color:color-mix(in srgb,var(--ok) 40%,transparent) } .gpill.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,transparent); border-color:color-mix(in srgb,var(--warn) 40%,transparent) } .gpill.bad { color:var(--fail); background:color-mix(in srgb,var(--fail) 14%,transparent); border-color:color-mix(in srgb,var(--fail) 40%,transparent) } .joinbtn { display:inline-block; background:var(--accent); border:1px solid var(--accent); color:#fff !important; font-weight:650; font-size:12.5px; padding:3px 12px; border-radius:8px; white-space:nowrap; cursor:pointer; text-decoration:none } .joinbtn:hover { filter:brightness(1.1); text-decoration:none } .joinmini { margin-left:auto; flex:none } .wcloud .joinmini.joinbtn { font-size:9.5px; padding:1px 7px; border-radius:5px; line-height:1.5 } .joinbtn.off { background:transparent; color:var(--fg3) !important; border-color:var(--line); font-weight:500; cursor:not-allowed; filter:none } .joinback { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60; display:flex; align-items:flex-start; justify-content:center; padding:190px 20px 20px } @media (max-height:620px) { .joinback { padding-top:120px } } .joincard { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:22px 26px; max-width:430px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.4) } .joincard.ok { border-color:color-mix(in srgb,var(--ok) 55%,var(--line)) } .joincard.bad { border-color:color-mix(in srgb,var(--warn) 55%,var(--line)) } .joincard h3 { margin:10px 0 8px; font-size:18px } .joinmsg { margin:0 0 16px; color:var(--fg2); line-height:1.55; font-size:13.5px } .joinspin { font-size:26px; color:var(--accent); line-height:1 } .joinarrow { font-size:30px; line-height:1; color:var(--accent); margin-bottom:2px } .joinask { font-weight:650; font-size:14px; color:var(--fg); margin-bottom:10px } @media (prefers-reduced-motion:no-preference) { .joinspin { animation:joinpulse 1.1s ease-in-out infinite } .joinarrow { animation:joinpoint 1.2s ease-in-out infinite } } @keyframes joinpulse { 0%,100% { opacity:.35 } 50% { opacity:1 } } @keyframes joinpoint { 0%,100% { transform:translateY(0); opacity:.55 } 50% { transform:translateY(-5px); opacity:1 } } .gpill.live { color:var(--info); background:color-mix(in srgb,var(--info) 14%,transparent); border-color:color-mix(in srgb,var(--info) 40%,var(--line)) } .gpill.off { color:var(--fg3); background:color-mix(in srgb,var(--fg3) 12%,transparent); border-color:color-mix(in srgb,var(--fg3) 30%,transparent) } .kvgrid { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; padding:6px 4px; font-size:12.5px } .kvk { color:var(--fg3) } .kvv { color:var(--fg); font-variant-numeric:tabular-nums } .daybars { display:block; width:100%; height:150px } .daybars rect { fill:var(--accent) } .daybars rect:hover { fill:var(--accent2) } .wmap { padding:0; --wsea:color-mix(in srgb, #1f6f9a 11%, var(--bg2)); --wland:color-mix(in srgb, var(--fg) 17%, var(--bg2)); --wlandline:color-mix(in srgb, var(--fg) 30%, transparent); --wgratline:color-mix(in srgb, var(--fg) 7%, transparent) } .wmapbox { position:relative; margin-top:8px } body[data-view="worldmap"] .main { padding:0; max-width:none } body[data-view="worldmap"] .wmapbox { margin-top:0 } body[data-view="worldmap"] .wmap .wmapbox > svg.wmapsvg { border-radius:0 } body[data-view="worldmap"] .wmap { overflow-x:clip } .wmap.wfilled .wmapbox { background:var(--wsea) } .wmap.wfilled .wmapbox > svg.wmapsvg { margin:0 auto } body[data-view="worldmap"] .main > .stack > *:not(.wmap) { padding:0 14px } body[data-view="worldmap"] .main > .stack > *:empty { display:none } .wmapbox svg { touch-action:none } .wmapbox .wclouds, .wmapbox .wcloud { touch-action:none } .wmapbox.wzoomed > svg { cursor:grab } .wmapbox.wgrabbing > svg { cursor:grabbing } .wmap .wmapbox > svg.wmapsvg { display:block; width:100%; height:auto; border-radius:10px; background:var(--wsea) } .wgrat line { stroke:var(--wgratline); stroke-width:1; vector-effect:non-scaling-stroke } .wlandpath { fill:var(--wland); stroke:var(--wlandline); stroke-width:.7; fill-rule:evenodd; vector-effect:non-scaling-stroke } .wpt { cursor:pointer; outline:none } .whalo { fill:color-mix(in srgb, var(--accent) 22%, transparent) } .wdot { fill:var(--accent); stroke:var(--bg2); stroke-width:.8; vector-effect:non-scaling-stroke; vector-effect:non-scaling-stroke } .whit { fill:transparent } .wdot.wweb { fill:var(--sr2) } .whalo.wweb { fill:color-mix(in srgb, var(--sr2) 24%, transparent) } .wpt:hover .wdot.wweb, .wpt:focus .wdot.wweb { fill:color-mix(in srgb, var(--sr2) 80%, white) } .wdot.wmp { fill:var(--ok) } .whalo.wmp { fill:color-mix(in srgb, var(--ok) 26%, transparent) } .whalo.whost { fill:color-mix(in srgb, var(--ok) 42%, transparent); transform-box:fill-box; transform-origin:center; animation:whostpulse 2.4s ease-in-out infinite } @keyframes whostpulse { 0%, 100% { transform:scale(1); opacity:.85 } 50% { transform:scale(1.5); opacity:.35 } } @media (prefers-reduced-motion: reduce) { .whalo.whost { animation:none } } .wpt:hover .wdot, .wpt:focus .wdot { fill:var(--accent2) } .wpt:hover .wdot.whost, .wpt:focus .wdot.whost { fill:color-mix(in srgb, var(--ok) 80%, white) } .wpt:hover .whalo, .wpt:focus .whalo { fill:color-mix(in srgb, var(--accent) 40%, transparent) } .wpt:focus .wdot { stroke:var(--fg) } .wflash { fill:none; stroke:var(--accent); stroke-width:.9; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:wflash 1.7s cubic-bezier(.15,.7,.3,1) forwards } @keyframes wflash { from { transform:scale(.25); opacity:.9 } to { transform:scale(2.6); opacity:0 } } @media (prefers-reduced-motion: reduce) { .wflash { display:none } } .wsaypos { pointer-events:none } .wsay { transform-box:fill-box; transform-origin:50% 100%; animation:wsay 2.1s cubic-bezier(.2,.8,.3,1) forwards } .wsaybody { fill:color-mix(in srgb, var(--bg2) 88%, transparent); stroke:#febc34; stroke-width:1.3px; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 3px rgba(254,188,52,.55)) } .wsaypm .wsaybody { stroke:#39d3b6; filter:drop-shadow(0 0 4px rgba(57,211,182,.7)) } .wsaydot { fill:#febc34; animation:wsaydot .9s ease-in-out infinite } .wsaypm .wsaydot { fill:#39d3b6 } .wsaysup .wsaybody { stroke:#f45b5b; filter:drop-shadow(0 0 4px rgba(244,91,91,.7)) } .wsaysup .wsaydot { fill:#f45b5b } .wsaydot.wsd1 { animation-delay:.15s } .wsaydot.wsd2 { animation-delay:.3s } @keyframes wsay { 0% { opacity:0; transform:translateY(0) scale(.2) } 14% { opacity:1; transform:translateY(-6%) scale(1.12) } 24% { transform:translateY(-10%) scale(1) } 72% { opacity:1; transform:translateY(-38%) scale(1) } 100% { opacity:0; transform:translateY(-70%) scale(.92) } } @keyframes wsaydot { 0%, 100% { opacity:.3 } 50% { opacity:1 } } .wpmorb { position:fixed; left:0; top:0; z-index:90; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; pointer-events:none; display:grid; place-items:center; font:12px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; background:radial-gradient(circle at 35% 30%, #fff6da, #febc34 48%, #a86f00); box-shadow:0 0 14px 4px rgba(254,188,52,.55), 0 0 32px 10px rgba(57,211,182,.22) } .wpmspark { position:fixed; left:0; top:0; z-index:89; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; pointer-events:none; background:#febc34; box-shadow:0 0 8px 2px rgba(254,188,52,.6); animation:wpmspark .7s ease-out forwards } @keyframes wpmspark { to { opacity:0; margin:-1px 0 0 -1px; width:2px; height:2px } } @media (prefers-reduced-motion: reduce) { .wsay, .wsaydot { animation:none } .wsaypos { display:none } } .wtip { position:absolute; z-index:6; pointer-events:none; overflow:hidden; max-width:260px; border-radius:9px; line-height:1.5; border:1px solid var(--line); background:color-mix(in srgb, var(--bg2) 92%, transparent); box-shadow:0 6px 20px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%) } .wtip::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 22%, transparent), transparent) } .wtip span { text-transform:none; letter-spacing:0; font-size:inherit; color:inherit } .wtiphead { padding:5px 10px 4px; font-size:11.5px; font-weight:650; color:var(--fg); display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--fg) 5%, transparent) } .wtipheadt { min-width:0; line-height:1.35; overflow:hidden; text-overflow:ellipsis } .wtipheadt.wtipheadg { max-width:176px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3 } .wtipheadt .wtipnb { white-space:nowrap } .wtiprows { display:block; padding:6px 10px; font-size:11.5px } .wtiprow { display:flex; align-items:baseline; gap:5px; white-space:nowrap; line-height:1.55 } .wtip .wtipk { color:inherit; flex:0 0 15px; width:15px; text-align:center } .wtip .wtiplbl { color:var(--fg2) } .wtip .wtipv { font-weight:650; color:var(--fg); font-variant-numeric:tabular-nums } .wtip .wtipv.wtipdim { color:var(--fg2); font-weight:400 } .wtip .wtipv.wmp, .wtip .wtipmp { color:var(--sr8) } .wtip .wtipweb { color:var(--sr2); font-weight:650 } .wtip .wtipmplbl { color:var(--fg2); font-weight:400 } .wtipnicks { margin:0 10px; padding:5px 0 7px; font-size:11.5px; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent) } .wtip .wtipnick { color:var(--accent); font-weight:600 } .wtip.wpinned { pointer-events:auto; border-color:color-mix(in srgb, #febc34 45%, var(--line)); box-shadow:0 8px 26px rgba(0,0,0,.36), 0 0 0 1px color-mix(in srgb, #febc34 18%, transparent) } .wcloud .wcloudpn { white-space:nowrap } .wpmnick { position:relative; display:inline-block; vertical-align:baseline; margin:0; padding:0; border:0; border-radius:5px; background:none; font:inherit; line-height:inherit; color:inherit; white-space:nowrap; cursor:pointer; transition:background .15s ease, box-shadow .15s ease } .wpmnick:hover, .wpmnick:focus-visible { outline:none; background:color-mix(in srgb, var(--accent) 15%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent) } .wpmnick .wpmbadge { position:absolute; top:-9px; right:-11px; width:16px; height:16px; display:grid; place-items:center; pointer-events:none; background:none; border-radius:0; font-size:0; box-shadow:none; opacity:0; transform:scale(.55); transition:opacity .14s ease-out, transform .18s cubic-bezier(.2,.9,.3,1.3) } .wpmnick .wpmbadge svg { width:16px; height:16px; display:block; color:var(--accent); filter:drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 2px 4px rgba(0,0,0,.5)) } .wpmnick:hover .wpmbadge, .wpmnick:focus-visible .wpmbadge { opacity:1; transform:none } .wtip:not(.wpinned) .wpmnick { pointer-events:none } .wnickmenu { position:fixed; z-index:75; min-width:196px; padding:6px; border-radius:13px; border:1px solid color-mix(in srgb, var(--fg) 13%, transparent); background:color-mix(in srgb, var(--bg2) 94%, transparent); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); box-shadow:0 26px 60px -22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07); animation:qrin .16s cubic-bezier(.2,.8,.2,1) } .wnmname { display:block; padding:5px 9px 6px; font-size:12.5px; font-weight:700; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .wnmact { display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:0; border-radius:9px; background:none; color:var(--fg2); font:13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif; text-align:left; cursor:pointer } .wnmact:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--fg) } .wnmico { display:grid; place-items:center; width:17px; height:17px; flex:0 0 auto; color:var(--mmc-gold) } .wnmico svg { width:17px; height:17px; display:block } .wnmico.wnmemo { font-size:15px; line-height:1 } .wnmtx { display:flex; flex-direction:column; min-width:0 } .wnmnote { margin-top:2px; font-size:11px; color:var(--fg3) } .wtally button.wtallychip.hid { pointer-events:auto; margin:0; padding:0; border:0; background:none; font:inherit; font-size:11px; color:inherit; cursor:pointer } .wtally button.wtallychip.hid:hover { background:none } .wtally button.wtallychip.hid:hover .wtallycl { color:var(--fg); text-decoration:underline } .wtally .hid .wtallydot { background:var(--fg3) } @media (pointer:coarse) { .wcloud { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none } } @media (prefers-reduced-motion: reduce) { .wpmnick, .wpmbadge { transition:none } } .wtip .wtiphint { margin:0 10px; padding:0 0 7px; font-size:10.5px; color:var(--fg3) } .wmap .wmapbox > svg.wmapsvg { will-change:transform } .wmap .wmapbox > svg.wfx { position:absolute; left:0; top:0; z-index:1; pointer-events:none; will-change:transform } .wleads { will-change:transform } .wmap .wmapbox > svg.wmapsvg .whalo.whost { animation:none; visibility:hidden } .wleads { position:absolute; left:0; top:0; z-index:2; pointer-events:none; overflow:visible; background:none; border-radius:0 } .wlead { fill:none; stroke:color-mix(in srgb, var(--ok) 60%, transparent); stroke-width:var(--leadw, 1.6); stroke-dasharray:3 4; stroke-linecap:round; animation:wleaddash 22s steps(660) infinite } @keyframes wleaddash { to { stroke-dashoffset:140 } } .wleaddot { fill:var(--ok); stroke:var(--bg2); stroke-width:1 } .wlead.wlead2 { stroke:color-mix(in srgb, var(--sr8) 52%, transparent); stroke-width:calc(var(--leadw, 1.6) * 0.8); stroke-dasharray:2 5; animation-duration:30s } .wleaddot.wlead2dot { fill:var(--sr8) } .wclouds { position:absolute; inset:0; z-index:3; pointer-events:none } .wsaycard { --say:254,188,52; position:absolute; pointer-events:auto; cursor:pointer; width:max-content; min-width:136px; max-width:214px; border-radius:15px; overflow:hidden; line-height:1.38; font-size:12px; isolation:isolate; background:linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%), color-mix(in srgb, var(--bg2) 52%, transparent); border:1px solid rgba(255,255,255,.13); box-shadow:0 14px 34px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(var(--say),.14), 0 0 22px -10px rgba(var(--say),.6); -webkit-backdrop-filter:blur(22px) saturate(185%); backdrop-filter:blur(22px) saturate(185%); transition:left .28s cubic-bezier(.2,.7,.3,1), top .28s cubic-bezier(.2,.7,.3,1), transform .18s, box-shadow .25s; animation:wsayin .34s cubic-bezier(.2,.8,.3,1) } .wsaycard.wsaypmcard { --say:57,211,182 } .wsaycard.wsaysupcard { --say:244,91,91; border-color:rgba(244,91,91,.4) } .wsaycard::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120px 70px at 0 0, rgba(var(--say),.08), transparent 70%) } .wsaycard:hover { transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(var(--say),.35), 0 0 28px -8px rgba(var(--say),.7) } .wsaycard span { text-transform:none; letter-spacing:0; font-size:inherit; color:inherit } .wsayhead { display:flex; align-items:center; gap:8px; padding:8px 11px 4px 8px } .wsaycard .wsayicon { position:relative; flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:14px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; box-shadow:inset 0 0 0 1px rgba(var(--say),.16) } .wsaycard .wsayicon::before { content:''; position:absolute; inset:0; border-radius:50%; padding:1.5px; pointer-events:none; background:conic-gradient(rgba(var(--say),0) 0deg, rgba(var(--say),.9) 70deg, rgba(var(--say),0) 150deg, rgba(var(--say),0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:wsayorbit 2.6s linear infinite } .wsaycard.wsaypmcard .wsayicon::before { animation:wsayorbit 4s linear infinite, wsaybreath 2s ease-in-out infinite } @keyframes wsayorbit { to { transform:rotate(360deg) } } @keyframes wsaybreath { 50% { opacity:.45 } } .wsaycard .wsaywho { display:flex; flex-direction:column; min-width:0; line-height:1.2 } .wsaycard .wsaynick { font-size:12.5px; font-weight:700; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsaycard .wsaywhere { margin-top:1px; font-size:10.5px; color:rgb(var(--say)); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wsaylines { padding:2px 12px 9px 6px } .wsayline { display:grid; grid-template-columns:30px minmax(0, 1fr); column-gap:6px; align-items:baseline; color:var(--fg) } .wsaycard .wsaytime { font:10px/1.5 var(--mono); color:var(--fg3); text-align:right; font-variant-numeric:tabular-nums } .wsaycard .wsaytext { overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .wsayline + .wsayline { margin-top:3px } .wsayline:not(:last-child) .wsaytext { color:var(--fg2); opacity:.8 } .wsaytext .wsaytr { display:inline-flex !important; contain:none !important; grid-column:auto !important; vertical-align:1px; margin:0 5px 0 0 } .wsaytext .wsaytr .mmc-trpill { margin:0 !important } .wsayline:last-child { animation:wsayline .6s ease-out } .wsaycard.wsaybump .wsayicon { animation:wsaybadge .5s cubic-bezier(.3,1.6,.5,1) } .wsaypmcard .wsayhead { padding-right:30px } .wsayx { position:absolute; top:7px; right:7px; width:20px; height:20px; padding:0; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--fg2); background:rgba(255,255,255,.06); opacity:.5; transition:opacity .15s, background .15s, transform .15s, color .15s } .wmap .wsaycard .wsayx svg { display:block; width:9px !important; height:9px !important; background:none !important; border-radius:0 !important; margin:0 !important; pointer-events:none } .wsaycard:hover .wsayx, .wsayx:focus-visible { opacity:.9 } .wsayx:hover { opacity:1; color:var(--fg); background:rgba(var(--say),.24); transform:scale(1.1) } .wsaycard.wsayout { opacity:0; transform:translateY(-6px) scale(.96); transition:opacity .26s, transform .26s } @keyframes wsayin { from { opacity:0; transform:translateY(8px) scale(.92) } } @keyframes wsayline { from { opacity:.2; transform:translateY(3px) } } @keyframes wsaybadge { 45% { transform:scale(1.25) rotate(-10deg) } } .wlead.wleadsay { stroke:rgba(254,188,52,.7) } .wlead.wleadsay.wleadpm { stroke:rgba(57,211,182,.75) } .wleaddot.wleadsaydot { fill:#febc34 } .wleaddot.wleadsaydot.wleadpm { fill:#39d3b6 } @media (prefers-reduced-motion: reduce) { .wsaycard, .wsayline:last-child, .wsaycard .wsayicon, .wsaycard .wsayicon::before { animation:none; transition:none } } .whostbtn { position:static; z-index:4; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:650; line-height:1; padding:7px 11px; border-radius:9px; text-decoration:none; color:var(--fg); border:1px solid var(--subsel); background:color-mix(in srgb, var(--subsel) 12%, var(--bg2)); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px) } .whostbtn.wfloat { box-shadow:0 6px 20px color-mix(in srgb, var(--subsel) 38%, transparent) } .whostbtn .whostemo { color:var(--subsel); font-size:13px; line-height:1 } .whostbtn.whostsplit { cursor:default } .whostbtn.whostsplit:hover { color:var(--fg); border-color:var(--subsel); background:color-mix(in srgb, var(--subsel) 12%, var(--bg2)) } .whostbtn.wfloat.whostsplit:hover { box-shadow:0 6px 20px color-mix(in srgb, var(--subsel) 38%, transparent) } .whostpick { display:inline-flex; gap:4px; margin-left:2px } .whostgame { display:inline-block; cursor:pointer; text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.4px; line-height:1; padding:4px 7px; border-radius:6px; color:var(--fg); border:1px solid color-mix(in srgb, var(--subsel) 55%, transparent); background:color-mix(in srgb, var(--subsel) 22%, var(--bg2)); transition:background-color .12s ease, border-color .12s ease } .whostgame:hover { text-decoration:none; background:color-mix(in srgb, var(--subsel) 46%, var(--bg2)); border-color:var(--subsel) } .whostgame:active { transform:translateY(1px) } .whostgame:focus-visible { outline:2px solid var(--subsel); outline-offset:2px } .wleadhost { stroke:color-mix(in srgb, var(--subsel) 70%, transparent) } .wleadhostdot { fill:var(--subsel) } .wcloudmine { border-color:color-mix(in srgb, var(--subsel) 34%, var(--line)) } .joinbtn.minebtn { color:var(--fg) !important; background:color-mix(in srgb, var(--subsel) 26%, var(--bg3)); border-color:color-mix(in srgb, var(--subsel) 26%, var(--bg3)) } .joinbtn.minebtn:hover { filter:none; background:color-mix(in srgb, var(--subsel) 42%, var(--bg3)); border-color:color-mix(in srgb, var(--subsel) 42%, var(--bg3)) } .whostbtn:hover { color:var(--fg); border-color:var(--subsel); background:color-mix(in srgb, var(--subsel) 26%, var(--bg2)); text-decoration:none } .whostbtn.wfloat:hover { box-shadow:0 8px 26px color-mix(in srgb, var(--subsel) 52%, transparent) } .whostbtn:not(.wfloat) { border-color:transparent; box-shadow:none; background:radial-gradient(115% 150% at 50% 50%, color-mix(in srgb, var(--subsel) 19%, transparent) 0%, color-mix(in srgb, var(--subsel) 9%, transparent) 42%, transparent 76%); transition:background .15s ease } .whostbtn:not(.wfloat):hover { border-color:transparent; box-shadow:none; background:radial-gradient(115% 150% at 50% 50%, color-mix(in srgb, var(--subsel) 32%, transparent) 0%, color-mix(in srgb, var(--subsel) 16%, transparent) 46%, transparent 80%) } .whostbtn.whostsplit:not(.wfloat):hover { box-shadow:none; background:radial-gradient(115% 150% at 50% 50%, color-mix(in srgb, var(--subsel) 19%, transparent) 0%, color-mix(in srgb, var(--subsel) 9%, transparent) 42%, transparent 76%) } .whostbtn:not(.wfloat) .whostgame { border-color:transparent; background:color-mix(in srgb, var(--subsel) 30%, transparent) } .whostbtn:not(.wfloat) .whostgame:hover { border-color:transparent; background:color-mix(in srgb, var(--subsel) 50%, transparent) } .whostbtn.wfloat { position:absolute } .whostbtn.wfloat.corner { right:8px; bottom:8px; left:auto !important; top:auto !important } .wnarrowbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px } .wmap.wnarrow .wnarrowbar .wtally { margin-top:0 } .whostbtn.wunder { flex:none; padding:8px 12px; font-size:13px; border-radius:10px } .tabafter .whostbtn { padding-top:5px; padding-bottom:5px } .wcloud { position:absolute; pointer-events:auto; width:232px; max-width:calc(100vw - 24px); border-radius:11px; overflow:hidden; line-height:1.45; border:1px solid color-mix(in srgb, var(--ok) 34%, var(--line)); background:color-mix(in srgb, var(--bg2) 88%, transparent); box-shadow:0 10px 30px rgba(0,0,0,.38), 0 0 0 1px color-mix(in srgb, var(--ok) 10%, transparent); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); transition:left .28s cubic-bezier(.2,.7,.3,1), top .28s cubic-bezier(.2,.7,.3,1) } .wcloud::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ok) 55%, transparent), transparent) } .wcloud span, .wcloud i { text-transform:none; letter-spacing:0; font-size:inherit; color:inherit; font-style:normal } .wcloudhead { padding:6px 10px 6px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ok) 9%, transparent) } .wcloudmeta1 { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; min-width:0 } .wcloud .wcloudflag { flex:none; font-size:12px; line-height:1; display:inline-flex; align-items:center } .wcloud .wcloudname { display:block; margin-top:3px; font-size:12px; font-weight:680; color:var(--fg); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .wcloud .wcloudtag { flex:none; font-size:10px; font-weight:650; padding:1px 6px; border-radius:5px; white-space:nowrap; color:hsl(var(--vh, 265) 72% var(--vlum)); border:1px solid hsl(var(--vh, 265) 62% var(--vlum) / var(--vbd)); background:hsl(var(--vh, 265) 72% var(--vlum) / var(--vbg)) } .wcloud .wcloudtag.wv0 { --vh:265 } .wcloud .wcloudtag.wv1 { --vh:330 } .wcloud .wcloudtag.wv2 { --vh:28 } .wcloud .wcloudtag.wv3 { --vh:185 } .wcloud .wcloudtag.wv4 { --vh:212 } .wcloud .wcloudtag.wv5 { --vh:95 } .wcloud .wcloudtag.wv6 { --vh:48 } .wcloud .wcloudtag.wv7 { --vh:0 } .wcloud .wcloudago { display:flex; align-items:center; gap:3px; font-size:10.5px; color:var(--fg2); white-space:nowrap; font-variant-numeric:tabular-nums; margin-left:auto } .wcloudmeta { display:grid; grid-template-columns:1fr 1fr; gap:3px 8px; padding:7px 10px 5px; font-size:11.5px } .wcloud .wfact { display:flex; align-items:baseline; gap:5px; min-width:0 } .wcloud .wfactwide { grid-column:1 / -1 } .wcloud .wfi { flex:none; width:15px; text-align:center; font-size:11px; opacity:.85; line-height:1 } .wcloud .wfv { color:var(--fg); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .wcloudteam { display:block; margin:0 10px; padding:6px 0 7px; font-size:11.5px; line-height:1.5; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent) } .wcloud .wcloudcount { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; margin-right:7px; font-variant-numeric:tabular-nums } .wcloud .wcloudcount .wfv { color:var(--ok); font-weight:700 } .wcloud .wcloudcount.wfull .wfv { color:var(--warn) } .wcloud .wcloudnick { color:var(--accent); font-weight:600; overflow-wrap:anywhere; word-break:break-word } .wcloudfoot { padding:0 10px 9px } .wcloudfoot .joinbtn { display:block; text-align:center } .wcloud { cursor:pointer } .wcloud.wchip { width:max-content; min-width:128px; max-width:270px; transition:left .28s cubic-bezier(.2,.7,.3,1), top .28s cubic-bezier(.2,.7,.3,1), border-color .18s ease } .wcloud.wchip .wcloudhead { border-bottom:0; background:none; padding:5px 9px 6px } .wcloud.wchip:hover { border-color:var(--fg3) } .wcloud.wchip.wopened { width:232px } .wcloud.wopen.wchip { width:232px } .wcloud.wchip.wopened .wcloudhead { border-bottom:1px solid var(--line); padding:6px 10px 5px } .wcloud.ggood { border-color:color-mix(in srgb, var(--ok) 40%, var(--line)) } .wcloud.gwarn { border-color:color-mix(in srgb, var(--warn) 46%, var(--line)); box-shadow:0 8px 24px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--warn) 12%, transparent) } .wcloud.glive { border-color:color-mix(in srgb, var(--info) 50%, var(--line)); box-shadow:0 8px 24px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--info) 14%, transparent) } .wcloud .wcloudst { font-size:9.5px; font-weight:700; letter-spacing:.3px; white-space:nowrap; padding:1px 5px; border-radius:4px; text-transform:uppercase; border:1px solid currentColor } .wcloud .wcloudst.ggood { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent) } .wcloud .wcloudst.gwarn { color:var(--warn); background:color-mix(in srgb, var(--warn) 15%, transparent) } .wcloud .wcloudst.glive { color:var(--info); background:color-mix(in srgb, var(--info) 15%, transparent) } .wlead.wleaddock { stroke-dasharray:2 6; opacity:.75 } .skipoos { display:inline-block; flex:none; font-size:9.5px; font-weight:700; letter-spacing:.3px; line-height:1.45; white-space:nowrap; text-transform:uppercase; text-decoration:none; vertical-align:1px; padding:1px 5px; border-radius:4px; border:1px solid currentColor; color:var(--subsel); background:color-mix(in srgb, var(--subsel) 15%, transparent) } .skipoos:hover { text-decoration:none; background:color-mix(in srgb, var(--subsel) 28%, transparent) } .wcloud .wcloudname.wnametag { display:flex; align-items:center; gap:6px } .wcloud .wcloudname.wnametag .wcloudnm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .wlead.wleaddock.gwarn { stroke:color-mix(in srgb, var(--warn) 60%, transparent) } .wlead.wleaddock.glive { stroke:color-mix(in srgb, var(--info) 60%, transparent) } .wleaddot.gwarn { fill:var(--warn) } .wleaddot.glive { fill:var(--info) } .wclouds.wstacked { position:static; inset:auto; pointer-events:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; margin-top:10px } .wclouds.wstacked .wcloud { position:static; width:auto; max-width:none; transition:none } .wmap.wnarrow .wtally { position:static; margin-top:8px; display:inline-block } .wclouds.wstacked .wcloud.wchip { max-width:none; width:auto } .wcloud { --wav:54px } .wcloud.whav, .wcloud.wchip.wopened.whav, .wcloud.wopen.wchip.whav { width:fit-content; min-width:232px; max-width:min(calc(232px + var(--wav)), calc(100vw - 24px)) } .wcloud.whav > :not(.wcloudhead) { contain:inline-size } .wcloud.wchip.whav { width:max-content; min-width:128px; max-width:min(calc(270px + var(--wav)), calc(100vw - 24px)) } .wclouds.wstacked .wcloud.wchip.whav { max-width:none; width:auto } .wcloudhead.whav { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:8px; align-items:center } .wcloudhead.whav > .wcloudav { grid-row:1 / span 2 } .wcloudhead.whav > .wcloudmeta1, .wcloudhead.whav > .wcloudname { grid-column:2 } .wcloud .wcloudav { display:block; width:46px; height:36px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) } .wcloud .wcloudav img { display:block; width:100%; height:100%; object-fit:contain; -webkit-mask-image:var(--mmb-feather); -webkit-mask-composite:source-in; mask-image:var(--mmb-feather); mask-composite:intersect } .wcloud.wpop { animation:wpop .34s cubic-bezier(.2,1.5,.4,1) both } .wcloud.wunpop { animation:wunpop .26s cubic-bezier(.4,0,.7,.2) both; pointer-events:none } @keyframes wpop { from { opacity:0; transform:scale(.72) translateY(8px) } to { opacity:1; transform:none } } @keyframes wunpop { from { opacity:1; transform:none } to { opacity:0; transform:scale(.66) translateY(10px) } } .wclouds.wsettle .wcloud { opacity:0 } .wclouds.wfadein .wcloud { animation:wsettlein .34s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--wsd, 0ms) } @keyframes wsettlein { from { opacity:0; transform:translateY(7px) scale(.97) } to { opacity:1; transform:none } } @media (prefers-reduced-motion: reduce) { .wcloud { transition:none } .wcloud.wpop, .wcloud.wunpop { animation:none } .wcloud.wunpop { opacity:0 } .wclouds.wfadein .wcloud { animation:none } .wlead { animation:none } } .wtally { position:absolute; left:10px; bottom:10px; z-index:5; pointer-events:none; padding:7px 11px 8px; border-radius:11px; line-height:1.25; border:1px solid var(--line); background:color-mix(in srgb, var(--bg2) 86%, transparent); box-shadow:0 8px 24px rgba(0,0,0,.32); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%) } .wtally::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 20%, transparent), transparent) } .wtally span, .wtally i { text-transform:none; letter-spacing:0; color:inherit; font-style:normal } .wtallyn { display:flex; align-items:baseline; gap:6px } .wtally .wtallyv { font-size:19px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; line-height:1 } .wtally .wtallyl { font-size:11px; color:var(--fg2) } .wtallysub { display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:4px; max-width:210px } .wtally .wtallychip { display:flex; align-items:center; gap:4px; font-size:11px } .wtally .wtallydot { width:7px; height:7px; border-radius:50%; flex:none } .wtally .mp .wtallydot { background:var(--sr8) } .wtally .sp .wtallydot { background:var(--accent) } .wtally .web .wtallydot { background:var(--sr2) } .wtally .host .wtallydot { background:var(--ok) } .wtally .wtallycn { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums } .wtally .wtallycl { color:var(--fg2) } .wtools { display:flex; align-items:center; gap:2px } .maptool { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:12px; font-weight:600; line-height:1; padding:6px 9px; border-radius:9px; white-space:nowrap; color:var(--fg2); border:1px solid transparent; background:none; transition:background .14s, color .14s } .maptool:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent) } .maptool:active { transform:translateY(1px) } .maptool:focus-visible { outline:none; border-color:color-mix(in srgb, var(--accent) 60%, transparent) } .mtico { font-style:normal; font-size:13.5px; line-height:1; flex:0 0 auto; color:var(--mt-c); filter:var(--mt-t); transition:filter .16s } .maptool:hover .mtico { filter:var(--mt-t) drop-shadow(0 0 6px color-mix(in srgb, var(--mt-c) 55%, transparent)) } .mtlabel { min-width:0 } .maptool { --mt-c:#c9a227; --mt-t:grayscale(1) sepia(1) saturate(1.7) hue-rotate(-8deg) brightness(.94) opacity(.88) } .maptool[data-s="alt"], .maptool[data-s="hq"], .maptool[data-s="night"] { --mt-c:var(--accent); --mt-t:grayscale(1) sepia(1) saturate(2.4) hue-rotate(176deg) brightness(.96) opacity(.9) } .maptool[data-s="day"] { --mt-c:var(--warn); --mt-t:grayscale(1) sepia(1) saturate(2.6) hue-rotate(-22deg) brightness(1) opacity(.9) } .maptool[data-s="mute"] { --mt-c:var(--fail); --mt-t:grayscale(1) sepia(1) saturate(4.2) hue-rotate(-40deg) brightness(.95) } .maptool[data-s="mute"] .mtlabel { color:color-mix(in srgb, var(--fail) 58%, var(--fg2)) } .maptool[data-s="off"] { --mt-c:var(--fg3); --mt-t:grayscale(1) opacity(.5) } .maptool[data-s="off"] .mtlabel { color:var(--fg3) } .wmap:not(.wsaton) .wsat { display:none } .wsat { pointer-events:none } .wmap.wsaton .wlandpath { fill:none; stroke:rgba(230,233,239,.42); stroke-width:.6 } .wmap.wsaton .wgrat line { stroke:rgba(230,233,239,.09) } .wmap.wsaton .wmapbox > svg.wmapsvg { background:#070b12 } .wmap.wsaton.wfilled .wmapbox { background:#070b12 } .wreset { position:absolute; right:8px; top:8px; z-index:5; cursor:pointer; font:inherit; font-size:11px; padding:3px 9px; border-radius:6px; color:var(--fg2); border:1px solid var(--line); background:color-mix(in srgb, var(--bg2) 88%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) } .wreset:hover { color:var(--fg); border-color:var(--fg3) } .wdot.wmp { fill:var(--sr8) } .whalo.wmp { fill:color-mix(in srgb, var(--sr8) 26%, transparent) } .wpt:hover .wdot.wmp, .wpt:focus .wdot.wmp { fill:var(--sr8) } .wpt:hover .whalo.wmp, .wpt:focus .whalo.wmp { fill:color-mix(in srgb, var(--sr8) 45%, transparent) } .wdot.whost { fill:var(--ok) } .whalo.whost { fill:color-mix(in srgb, var(--ok) 42%, transparent) } .wpt:hover .wdot.whost, .wpt:focus .wdot.whost { fill:color-mix(in srgb, var(--ok) 80%, white) } .wpt:hover .whalo.whost, .wpt:focus .whalo.whost { fill:color-mix(in srgb, var(--ok) 60%, transparent) } .wflash.wmp { stroke:var(--sr8) } .wflash.whost { stroke:var(--ok) } .wflash.wweb { stroke:var(--sr2) } .bands { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:flex-start } .band { flex:1 1 auto; min-width:min(100%, 320px); position:relative; overflow:hidden; padding:13px 18px 6px; border-radius:14px; border:1px solid var(--line); background:radial-gradient(130% 150% at 0% 0%, var(--bandglow), transparent 62%), color-mix(in srgb, var(--bg2) 72%, transparent); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); --bandglow:transparent; --bandink:var(--fg3) } .band::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 18%, transparent), transparent) } .band-live { flex-grow:0; --bandglow:color-mix(in srgb, var(--accent) 11%, transparent); --bandink:color-mix(in srgb, var(--accent) 55%, var(--fg2)) } .band-past { flex-grow:1; --bandglow:color-mix(in srgb, var(--fg3) 7%, transparent) } .bandhead { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--bandink) } .bandsel { position:relative; display:inline-flex; align-items:center; padding:3px 8px 3px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--line) 90%, transparent); background:color-mix(in srgb, var(--bg2) 70%, transparent); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); transition:border-color .12s ease, background-color .12s ease } .bandsel:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--bg2) 88%, transparent) } .bandsel:focus-within { border-color:var(--accent) } .bandsel::after { content:''; position:absolute; right:9px; top:50%; margin-top:-1px; width:0; height:0; pointer-events:none; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid var(--bandink) } .bandsel select { font:inherit; color:inherit; background:transparent; border:0; margin:0; padding:0 16px 0 0; cursor:pointer; outline:none; -webkit-appearance:none; appearance:none } .bandsel select:focus-visible { outline:none } .bandsel option { text-transform:none; letter-spacing:0; font-weight:400; color:var(--fg); background:var(--bg2) } .banddot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto; animation:bandpulse 2.6s ease-out infinite } .band-past .banddot { background:var(--fg3); animation:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--fg3) 16%, transparent) } @keyframes bandpulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent) } 70% { box-shadow:0 0 0 7px transparent } 100% { box-shadow:0 0 0 0 transparent } } @media (prefers-reduced-motion: reduce) { .banddot { animation:none } } .band .panel { background:transparent; border:0; box-shadow:none; padding:0 0 10px } .band .panels { gap:var(--s2) 38px } .band .panels > .panel { min-width:0 } .morerow td { padding-top:8px; border-bottom:0 } .morelink { cursor:pointer; color:var(--accent); font-size:12.5px; user-select:none } .morelink:hover { text-decoration:underline } .panels tr:last-child td { border-bottom:0 } .panels th:last-child, .panels td:last-child { padding-right:0 } .panelsub { margin:-4px 0 8px; font-size:11.5px } .panels .empty { padding:12px 10px } .panels td span { text-transform:none; letter-spacing:0; font-size:inherit; color:inherit } .panels td .tname { color:var(--accent); font-weight:500 } .panels tr.subrow td { border-bottom:0; padding-top:2px; padding-bottom:2px; font-size:13px } .panels tr.subrow td.plabel { padding-left:15px; color:var(--fg2); font-weight:400 } .panels tr.subrow td.pnum { font-weight:500 } .panels tr.rungrow td { border-bottom:0; padding-top:7px } .panels tr.rungrow:not(:first-child) td { border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent) } .card b { font-size:34px; line-height:1.05; letter-spacing:-1px; white-space:nowrap; display:block; overflow:hidden; text-overflow:ellipsis } .card b.v-med { font-size:24px; letter-spacing:-.5px } .card b.v-long { font-size:18px; letter-spacing:0 } .card b.v-xlong { font-size:15px; letter-spacing:0 } .card span { font-size:11.5px } .card b.ok { color:var(--ok) } .card b.warn { color:var(--warn) } .card b.fail { color:var(--fail) } .card .sub { display:block; color:var(--fg2); font-size:11.5px; margin-top:3px; text-transform:none; letter-spacing:0 } .cards.wide { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) } .cards { display:flex; flex-wrap:wrap; align-items:stretch } .cards > .card { flex:0 0 auto; min-width:190px } .cards.wide > .card { min-width:168px } .cards .card > span { white-space:nowrap } @media (max-width:640px) { .cards { gap:8px } .cards > .card, .cards.wide > .card { flex:1 1 calc(50% - 4px); min-width:0; max-width:calc(50% - 4px); padding:10px 9px; min-height:78px } .cards .card > b { font-size:23px !important; line-height:28px; min-height:28px; overflow-wrap:anywhere } .cards .card > span { white-space:normal; font-size:10.5px; letter-spacing:.5px } .cards .card .sub { font-size:10px } .main { padding-left:9px; padding-right:9px } } .cards .card { overflow:hidden; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--line) 88%, transparent); background:radial-gradient(125% 145% at 0% 0%, var(--cardglow), transparent 62%), color-mix(in srgb, var(--bg2) 74%, transparent); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); --cardglow:color-mix(in srgb, var(--accent) 7%, transparent); } .cards .card::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent) } .cards .card > span { color:color-mix(in srgb, var(--accent) 66%, var(--fg)); font-weight:650; font-size:11px; letter-spacing:.85px; } .cards .card .sub { display:block; margin:3px 0 0; padding:0; background:none; border:0; color:var(--fg3); font-size:10.5px; line-height:1.3; text-transform:none; letter-spacing:0; } .cards .card.link:hover { --cardglow:color-mix(in srgb, var(--accent) 16%, transparent) } .card.link { cursor:pointer; transition:border-color .12s ease, transform .12s ease } .card.link:hover { border-color:var(--accent) } .card.link:hover b { color:var(--accent) } .card.link:active { transform:translateY(1px) } .card.link:focus-visible { outline:2px solid var(--accent); outline-offset:2px } .card.link::after { content:'\2192'; position:absolute; top:9px; right:11px; color:var(--fg3); font-size:13px; opacity:0; transition:opacity .12s ease } .card.link:hover::after { opacity:1 } .cards .card { position:relative } @media (prefers-reduced-motion:reduce) { .card.link { transition:none } } .bar .push { margin-left:auto } .bar .msg { color:var(--fg3); font-size:13px } .bar .msg.ok { color:var(--ok) } .bar .msg.fail { color:var(--fail) } :root { --sr1:#0b9db3; --sr2:#b44f00; --sr3:#bb08af; --sr4:#33a803; --sr5:#035ede; --sr6:#0a7d51; --sr7:#8a6fff; --sr8:#f90f86; } :root[data-theme="dark"], :root:not([data-theme="light"]) { --sr1:#19a2b8; --sr2:#e2670d; --sr3:#ed03de; --sr4:#35ad03; --sr5:#498dfd; --sr6:#15ab70; --sr7:#8e76ff; --sr8:#ff1d8b; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --sr1:#0b9db3; --sr2:#b44f00; --sr3:#bb08af; --sr4:#33a803; --sr5:#035ede; --sr6:#0a7d51; --sr7:#8a6fff; --sr8:#f90f86; } } .chart { position:relative } .chart .ctitle { font-size:13px; color:var(--fg2); margin-bottom:6px } .chart svg .grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke } .chart svg .gridzero { stroke:var(--fg3); stroke-width:1; vector-effect:non-scaling-stroke } .chart .yaxis { position:absolute; left:6px; top:0; pointer-events:none; font-size:11px; color:var(--fg2); font-variant-numeric:tabular-nums } .chart .yaxis span { position:absolute; transform:translateY(-50%); white-space:nowrap; font-weight:600; letter-spacing:.1px; line-height:14px; border-radius:5px; background:color-mix(in srgb,var(--bg2) 72%,transparent); padding:0 5px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent) } .chart .cross { position:absolute; top:0; bottom:0; width:1px; background:var(--fg3); pointer-events:none; display:none } .chart .tip { position:absolute; z-index:5; pointer-events:none; display:none; background:var(--bg2); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.22); padding:7px 9px; font-size:12.5px; min-width:150px; max-width:280px } .chart .tip b { display:block; margin-bottom:4px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--fg3) } .chart .tip .row { display:flex; align-items:center; gap:6px; white-space:nowrap; line-height:1.6 } .chart .tip .row i { width:9px; height:9px; border-radius:2px; flex:0 0 auto } .chart .tip .row .v { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600 } .chart .dlab { position:absolute; font-size:11px; font-weight:650; white-space:nowrap; transform:translateY(-50%); pointer-events:none; text-shadow:0 0 3px var(--bg2), 0 0 3px var(--bg2) } .legend label, .legend span { display:inline-flex; align-items:center; gap:5px } .legend .off { opacity:.42 } .ingame { font-family:var(--mono); font-size:13px; line-height:1.45; white-space:pre; overflow-x:auto; padding:12px 14px; border-radius:var(--r); background:#0b0d10; color:#e8ecf2; border:1px solid var(--line); text-shadow:0 1px 0 rgba(0,0,0,.6) } :root[data-theme="light"] .ingame, :root:not([data-theme="dark"]) .ingame { border-color:#2a313b } .joinalt { display:inline-block; margin:0 0 14px; font-size:13px; color:var(--accent) } .qrback{ z-index:70 } .qrwrap{ width:min(680px, 100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; gap:0; padding:0; animation:qrin .24s cubic-bezier(.2,.8,.2,1) } @keyframes qrin{ from{ opacity:0; transform:translateY(12px) scale(.985) } to{ opacity:1; transform:none } } .qrtop{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 12px; padding:18px 48px 0; text-align:center; background:radial-gradient(110% 120% at 50% -20%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%) } .qrtop .x{ position:absolute; top:10px; right:10px; font:inherit; font-size:22px; line-height:1; padding:4px 9px; border:0; border-radius:9px; background:none; color:var(--fg3); cursor:pointer } .qrtop .x:hover{ color:var(--fg); background:var(--bg3) } .qrbadge{ width:40px; height:40px; display:grid; place-items:center; font-size:21px; border-radius:12px; background:color-mix(in srgb, var(--accent) 16%, var(--bg3)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent) } .qrwrap .qrtitle{ margin:0; font-size:22px; font-weight:750; letter-spacing:-.3px; color:var(--fg) } .qrlead{ flex-basis:100%; margin:6px auto 0; max-width:560px; font-size:14.5px; line-height:1.45; color:var(--fg2) } .qrlead .pfnick{ white-space:nowrap } .qrstage{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 28px 0 } .qrframe{ position:relative; padding:12px; border-radius:22px } .qrframe::before{ content:""; position:absolute; inset:0; pointer-events:none; --c:var(--accent); background: linear-gradient(var(--c),var(--c)) top left / 34px 4px no-repeat, linear-gradient(var(--c),var(--c)) top left / 4px 34px no-repeat, linear-gradient(var(--c),var(--c)) top right / 34px 4px no-repeat, linear-gradient(var(--c),var(--c)) top right / 4px 34px no-repeat, linear-gradient(var(--c),var(--c)) bottom left / 34px 4px no-repeat, linear-gradient(var(--c),var(--c)) bottom left / 4px 34px no-repeat, linear-gradient(var(--c),var(--c)) bottom right / 34px 4px no-repeat, linear-gradient(var(--c),var(--c)) bottom right / 4px 34px no-repeat; border-radius:6px; animation:qrbrackets 2.4s ease-in-out infinite } @keyframes qrbrackets{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } } .qrframe.is-used::before{ --c:var(--ok); animation:none; opacity:1 } .qrframe.is-expired::before{ --c:var(--warn); animation:none; opacity:.8 } .qrbox{ --qr:clamp(160px, calc(100vh - 480px), 288px); width:min(var(--qr), calc(100vw - 110px)); aspect-ratio:1; display:grid; place-items:center; background:#fff; border-radius:14px; line-height:0; box-shadow:0 14px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06); transition:opacity .25s ease, filter .25s ease } @supports (height:100dvh){ .qrbox{ --qr:clamp(160px, calc(100dvh - 480px), 288px) } } .qrbox svg{ width:100%; height:auto; border-radius:14px } .qrframe.is-used .qrbox, .qrframe.is-expired .qrbox{ opacity:.12; filter:blur(4px) } .qrcover{ position:absolute; inset:12px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:12px } .qrframe.is-used .qrcover, .qrframe.is-expired .qrcover{ display:flex; animation:qrin .24s ease } .qrcovericon{ width:58px; height:58px; display:grid; place-items:center; border-radius:50%; font-size:30px; font-weight:800; color:#fff; background:var(--ok); box-shadow:0 10px 28px color-mix(in srgb, var(--ok) 45%, transparent); margin-bottom:4px } .qrframe.is-expired .qrcovericon{ background:var(--warn); box-shadow:0 10px 28px color-mix(in srgb, var(--warn) 45%, transparent) } .qrcovertitle{ font-size:18px; font-weight:750; color:var(--fg) } .qrcoversub{ font-size:13px; color:var(--fg2) } .qrtimer{ display:flex; align-items:center; gap:12px; width:min(340px, 100%); padding:7px 14px 7px 11px; border-radius:14px; background:var(--bg3); border:1px solid var(--line) } .qrclock{ width:24px; height:24px; flex:none; color:var(--accent) } .qrhand{ transform-origin:12px 12px; animation:qrhand 6s linear infinite } @keyframes qrhand{ to{ transform:rotate(360deg) } } .qrtimetxt{ display:flex; flex-direction:column; line-height:1.1; min-width:62px } .qrtimelbl{ font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--fg2) } .qrtime{ font-size:21px; font-weight:750; font-variant-numeric:tabular-nums; color:var(--fg) } .qrtrack{ flex:1; height:6px; border-radius:99px; overflow:hidden; background:color-mix(in srgb, var(--fg3) 24%, transparent) } .qrtrack i{ display:block; height:100%; width:100%; border-radius:inherit; background:var(--accent); transition:width 1s linear, background-color .3s ease } .qronce{ flex:none; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:99px; color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent) } .qrtimer.low .qrclock, .qrtimer.low .qrtime{ color:var(--warn) } .qrtimer.low .qrtrack i{ background:var(--warn) } .qrtimer.is-expired .qrclock, .qrtimer.is-expired .qrtime{ color:var(--warn) } .qrtimer.is-used .qrclock, .qrtimer.is-used .qrtime{ color:var(--ok) } .qrtimer.is-used .qrhand, .qrtimer.is-expired .qrhand{ animation:none } .qrtimer.is-used .qronce, .qrtimer.is-expired .qronce{ visibility:hidden } .qrsteps{ list-style:none; margin:0; padding:14px 28px 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px } .qrsteps li{ --c:var(--accent); display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:9px 12px; text-align:left; border-radius:12px; background:color-mix(in srgb, var(--c) 9%, var(--bg3)); border:1px solid color-mix(in srgb, var(--c) 30%, var(--line)); animation:qrup .38s cubic-bezier(.2,.8,.2,1) both } .qrsteps li:nth-child(2){ --c:var(--rung-mona); animation-delay:.07s } .qrsteps li:nth-child(3){ --c:var(--ok); animation-delay:.14s } @keyframes qrup{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } .qrstepn{ grid-row:1 / span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:14px; font-weight:800; color:#fff; background:var(--c); box-shadow:0 5px 14px color-mix(in srgb, var(--c) 38%, transparent) } .qrsteps b{ font-size:14.5px; font-weight:650; line-height:1.25; color:var(--fg) } .qrstepsub{ font-size:12.5px; line-height:1.25; color:var(--fg2) } .qrstat{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:20px; padding:10px 28px 0; font-size:14px; color:var(--fg2); text-align:center } .qrdot{ display:none; width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); animation:pulse 1.4s ease-in-out infinite } .qrstat.wait .qrdot{ display:inline-block } .qrstat.ok{ color:var(--ok); font-weight:650 } .qrstat.warn{ color:var(--warn) } .qrstat.fail{ color:var(--fail) } .qrwarn{ display:flex; align-items:flex-start; gap:9px; margin:10px 28px 0; padding:8px 12px; border-radius:11px; font-size:12.5px; line-height:1.4; color:var(--fg2); background:color-mix(in srgb, var(--warn) 9%, var(--bg3)); border:1px solid color-mix(in srgb, var(--warn) 30%, var(--line)) } .qrwarnicon{ font-size:14px; line-height:1.3 } .qrfoot{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding:11px 28px 13px; border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg3) 50%, var(--bg2)) } .qrfoot button{ font-size:14px; padding:8px 18px; border-radius:10px } .qrfoot .pfcancel:disabled{ opacity:.55; cursor:default } @media (max-width:640px){ .qrsteps{ grid-template-columns:1fr; gap:6px } .qronce{ display:none } .qrtop{ padding:16px 44px 0 } } @media (max-height:720px){ .qrbadge{ display:none } .qrtop{ padding-top:14px } .qrlead{ margin-top:4px } } @media (prefers-reduced-motion:reduce){ .qrwrap, .qrsteps li, .qrcover{ animation:none } .qrframe::before, .qrhand, .qrdot{ animation:none } .qrtrack i, .qrbox{ transition:none } } .llcard p{ line-height:1.5 } .llrow{ display:flex; flex-direction:column; gap:8px; margin-top:12px } .llform{ margin:0 } .sdwrap{ max-width:1180px } .sdbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px } .sdsearch{ flex:1 1 320px; min-width:0; font:inherit; font-size:14px; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg2); color:var(--fg) } .sdsearch:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) } .sdstats{ display:flex; flex-wrap:wrap; gap:6px } .sdstat{ display:inline-flex; align-items:baseline; gap:5px; padding:5px 10px; border-radius:99px; font-size:12.5px; color:var(--fg2); background:var(--bg3); border:1px solid var(--line) } .sdstat b{ font-size:14px; color:var(--fg); font-variant-numeric:tabular-nums } .sdstat.live b{ color:var(--ok) } .sdrefresh{ font:inherit; font-size:13px; padding:7px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg3); color:var(--fg2); cursor:pointer } .sdrefresh:hover{ color:var(--fg); border-color:var(--fg3) } .sdlist{ display:flex; flex-direction:column; gap:10px } .sdcard{ background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden } .sdcard.open{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)) } .sdhead{ display:flex; align-items:center; gap:12px; padding:11px 14px; flex-wrap:wrap; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent) } .sdavatar{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; font-weight:800; font-size:17px; color:#fff; background:linear-gradient(135deg, var(--accent), var(--subsel)) } .sdwho{ flex:1 1 220px; min-width:0 } .sdwho1{ display:flex; align-items:center; flex-wrap:wrap; gap:6px } .sdwho1 .pfnick{ font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% } .sdwho2{ font-size:12.5px; color:var(--fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sdbadge{ display:inline-block; font-size:11px; font-weight:650; line-height:1; padding:3px 7px; border-radius:99px; color:var(--fg2); background:var(--bg3); border:1px solid var(--line); white-space:nowrap } .sdbadge.uid{ font-variant-numeric:tabular-nums } .sdbadge.admin{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)) } .sdbadge.me{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 12%, var(--bg3)) } .sdbadge.via{ font-weight:600 } .sdcount{ font-size:12.5px; color:var(--fg2); white-space:nowrap } .sdgear{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; padding:5px 10px; border-radius:9px; border:1px solid var(--line); background:var(--bg2); color:var(--fg2) } .sdgear:hover{ color:var(--fg); border-color:var(--fg3) } .sdgear[aria-expanded="true"]{ color:var(--fg); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 10%, var(--bg2)) } .sdgearico{ font-size:13px; line-height:1; transition:transform .35s cubic-bezier(.3,1.3,.5,1) } .sdgear[aria-expanded="true"] .sdgearico{ transform:rotate(60deg) } .sdgearn{ min-width:18px; padding:1px 6px; border-radius:99px; font-size:11px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent) } .sdgearchev{ font-size:10px; color:var(--fg3); transition:transform .2s } [aria-expanded="true"] > .sdgearchev{ transform:rotate(180deg) } .sdout{ font:inherit; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:9px; cursor:pointer; white-space:nowrap; color:var(--fail); border:1px solid color-mix(in srgb, var(--fail) 40%, var(--line)); background:color-mix(in srgb, var(--fail) 8%, var(--bg2)) } .sdout:hover{ background:color-mix(in srgb, var(--fail) 18%, var(--bg2)); border-color:var(--fail) } .sdout:disabled{ opacity:.6; cursor:default } .sddevs{ border-top:1px solid var(--line) } .sddev{ display:grid; grid-template-columns:34px minmax(0, 1fr) 118px 118px 96px; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent) } .sddev:first-child{ border-top:0 } .sddev.mine{ background:color-mix(in srgb, var(--accent) 5%, transparent) } .sddevicon{ font-size:20px; text-align:center } .sddevtitle{ display:flex; align-items:center; flex-wrap:wrap; gap:6px } .sddevtitle b{ font-size:14px; font-weight:650; color:var(--fg) } .sddevsub{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg2); overflow:hidden; white-space:nowrap; margin-top:3px } .sddevsub > span:last-child{ overflow:hidden; text-overflow:ellipsis; min-width:0 } .sddevsub .flag{ margin-right:0 } .sdcountry{ color:var(--fg) } .sdip{ font-family:var(--mono); font-size:11.5px; color:var(--fg2) } .sdsep{ color:var(--fg3) } .sdbadge.recovered{ color:var(--fg3); border-style:dashed; font-weight:600 } .sddevcol{ display:flex; flex-direction:column; line-height:1.25 } .sdcollbl{ font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--fg3) } .sdcolval{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--fg); font-variant-numeric:tabular-nums } .sdcolval.soon{ color:var(--warn) } .sddot{ width:8px; height:8px; border-radius:50%; background:var(--fg3); flex:none } .sddot.live{ background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent) } .sddevact{ text-align:right } .sdsetpanel{ border-top:1px solid var(--line); padding:10px 14px 12px; background:color-mix(in srgb, var(--bg3) 45%, var(--bg2)) } .sdsrcs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px } .sdsrc{ min-width:0; padding:8px 10px 6px; border-radius:11px; background:var(--bg2); border:1px solid var(--line) } .sdsrchead{ display:flex; align-items:center; gap:8px; padding-bottom:6px; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent) } .sdsrcico{ font-size:16px } .sdsrct{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25 } .sdsrct b{ font-size:13px; font-weight:650; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sdsrct span{ font-size:11px; color:var(--fg3) } .sdsrcn{ font-size:11px; color:var(--fg3); white-space:nowrap } .sdgrp{ padding-top:6px } .sdgrph{ font-size:10.5px; font-weight:650; letter-spacing:.4px; text-transform:uppercase; color:var(--fg3); margin-bottom:1px } .sdgrpnote{ font-size:11px; line-height:1.35; color:var(--fg3); margin:1px 0 3px } .sdkv{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; padding:2px 0 } .sdk{ min-width:0; color:var(--fg2) } .sdv{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--fg); text-align:right } .sdvnote{ font-size:11.5px; font-weight:500; color:var(--fg2) } .sdsetfoot{ margin-top:8px; font-size:11.5px; color:var(--fg3) } .sdinsight{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:5px; font-size:11.5px } .sdbells{ display:inline-flex; gap:1px } .sdbell{ width:16px; height:16px; display:inline-grid; place-items:center; color:var(--fg3); opacity:.45 } .sdbell svg{ width:14px; height:14px; display:block } .sdbell.on{ opacity:1 } .sdbell.dm.on{ color:var(--accent); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent)) } .sdbell.lobby.on{ color:var(--ok); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ok) 55%, transparent)) } .sdbell.sup.on{ color:var(--warn); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--warn) 55%, transparent)) } .sdbell.blocked{ color:var(--fail); opacity:1 } .sdpush, .sdapp{ padding:2px 7px; border-radius:99px; font-weight:600; white-space:nowrap } .sdpush{ color:var(--fg2); border:1px solid var(--line) } .sdpush.ok{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); background:color-mix(in srgb, var(--ok) 8%, transparent) } .sdpush.warn{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); background:color-mix(in srgb, var(--warn) 8%, transparent) } .sdpush.dead{ color:var(--fg3); border-style:dashed } .sdapp{ color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent) } .sdguides{ display:inline-flex; flex-wrap:wrap; gap:4px } .sdg{ padding:1px 6px; border-radius:6px; color:var(--fg3); background:color-mix(in srgb, var(--fg) 5%, transparent) } .sdg.done{ color:var(--fg2) } .sdnorep{ color:var(--fg3); font-style:italic } .sdins{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px } .sdtile{ display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border-radius:12px; background:var(--bg2); border:1px solid var(--line) } .sdtico{ font-size:17px; line-height:1.2 } .sdtbody{ min-width:0 } .sdttop{ display:flex; align-items:baseline; gap:6px } .sdttop b{ font-size:18px; font-weight:750; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap } .sdttop span{ font-size:12px; color:var(--fg2) } .sdtsub{ margin-top:1px; font-size:11px; line-height:1.35; color:var(--fg3) } .sdtile.good .sdttop b{ color:var(--ok) } .sdtile.warn .sdttop b{ color:var(--warn) } .sdinsnote{ grid-column:1 / -1; font-size:11.5px; color:var(--fg3) } .sdorphhead{ width:100%; display:flex; align-items:center; gap:8px; padding:10px 14px; font:inherit; font-size:13px; font-weight:650; color:var(--fg); background:none; border:0; text-align:left } .sdorphhead > span:first-child{ flex:1 } .sdorphnote{ padding:0 14px 8px; font-size:11.5px; color:var(--fg3) } .sdorphrow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:7px 14px; border-top:1px solid var(--line); font-size:11.5px } .sdorphwho{ flex:1 1 180px; min-width:0; display:flex; flex-direction:column; line-height:1.25 } .sdorphwho b{ font-size:13px; color:var(--fg) } .sdorphwho span{ color:var(--fg3) } .sdnone{ font-size:13px; color:var(--fg3) } .sdfoot{ font-size:12px } @media (max-width:760px){ .sddev{ grid-template-columns:28px minmax(0, 1fr) auto; row-gap:6px } .sddevcol{ grid-column:2 } .sddevact{ grid-column:3; grid-row:1 / span 3; align-self:start } .sddevcol{ flex-direction:row; gap:6px; align-items:baseline } } .tab .navcount { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:7px; padding:0 5px; border-radius:9px; background:#d13438; color:#fff; font:700 11px/1 system-ui,sans-serif; position:relative; top:-2px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.25); } img { -webkit-user-drag:none; -webkit-touch-callout:none } html.mmb-unfocused :is(.brand .brand-a, .brand .brand-b, .pending, .chartskel .chartskelbar, .tab.signincta, .joinspin, .joinarrow, .whalo.whost, .wsaydot, .wlead, .banddot, .acctbtn.acctcall, .acctguide, .acctguidestem), html.mmb-unfocused .brand::after, html.mmb-unfocused .empty.busy::after, html.mmb-unfocused .wsaycard .wsayicon::before { animation-play-state:paused !important } html.mmb-unfocused .wflash { animation-timing-function:steps(14) } @media (max-width:700px) { table.rowcards { display:block; font-size:13.5px } table.rowcards > thead { display:none } table.rowcards > tbody { display:flex; flex-direction:column; gap:8px } .tw:has(> table.rowcards) { border:0; border-radius:0; background:none; overflow:visible } table.rowcards tr.rc { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; padding:9px 12px 8px; border-radius:12px; border:1px solid color-mix(in srgb, var(--line) 88%, transparent); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 16%, transparent), transparent) 50% 0 / calc(100% - 24px) 1px no-repeat, radial-gradient(120% 150% at 0% 0%, var(--rcglow), transparent 62%), color-mix(in srgb, var(--bg2) 76%, transparent); box-shadow:inset 3px 0 0 var(--rcedge); --rcglow:color-mix(in srgb, var(--accent) 7%, transparent); --rcedge:transparent } table.rowcards tr.rc::before { content:''; order:-4; flex:0 0 100%; height:0 } table.rowcards tr.rc::after { content:''; order:-4; flex:0 0 100%; height:1px; margin:6px 0 3px; background:linear-gradient(90deg, color-mix(in srgb, var(--line) 95%, transparent), transparent 90%) } table.rowcards tr.rc:not(:has(> td:is([data-m=rank],[data-m=title],[data-m=chip],[data-m=flag],[data-m=corner],[data-m=sub])))::after { display:none } table.rowcards tr.rc:has(> td[data-m=clock]:not(.nil))::after { display:block; order:-3; height:0; margin:0; background:none } table.rowcards tr.rc.rowgood { --rcglow:color-mix(in srgb, var(--ok) 14%, transparent); --rcedge:var(--ok) } table.rowcards tr.rc.rowwarn { --rcglow:color-mix(in srgb, var(--warn) 16%, transparent); --rcedge:var(--warn) } table.rowcards tr.rc.rowbad, table.rowcards tr.rc.rowlocked { --rcglow:color-mix(in srgb, var(--fail) 15%, transparent); --rcedge:var(--fail) } table.rowcards tr.rc.rowmp { --rcglow:color-mix(in srgb, var(--sr2) 14%, transparent); --rcedge:var(--sr2) } table.rowcards tr.rc.rowoff { --rcedge:var(--fg3) } table.rowcards tr.rc.new { animation-name:rcflash } table.rowcards tr.rc > td { display:block; flex:1 1 auto; max-width:100%; width:auto; padding:3px 12px 3px 0; border:0; background:none; box-shadow:none; white-space:normal; text-align:left; overflow-wrap:break-word } table.rowcards tr.rc > td[data-l]::before { content:attr(data-l); display:block; margin-bottom:1px; font-size:9.5px; font-weight:650; line-height:1.35; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:color-mix(in srgb, var(--accent) 55%, var(--fg2)) } table.rowcards tr.rc > td:is(.num, .time) { white-space:nowrap } table.rowcards tr.rc > td:not([data-m=title]):not([data-m=addr]):is(.nil, :empty) { display:none } table.rowcards tr.rc:not(:has(> td:is(:not([data-m]):not(.nil):not(:empty):not(.expander), [data-m=addr], [data-m=wide], [data-m=act])))::after { display:none } table.rowcards tr.rc .pill[data-s] { font-size:0 } table.rowcards tr.rc .pill[data-s]::before { content:attr(data-s); font-size:12.5px } table.rowcards tr.rc > td.cellflash::after { inset:0 6px 0 -5px; border-radius:6px } table.rowcards tr.rc .pill { max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom } table.rowcards tr.rc > td:is(:not([data-m]), [data-m=wide]) .pill[class="pill"] { padding:0; border:0; background:none; font-size:inherit } table.rowcards tr.rc .tdate.today { display:none } table.rowcards tr.rc .trunc { max-width:100% } table.rowcards tr.rc .ep { max-width:100%; white-space:normal; overflow-wrap:anywhere } table.rowcards tr.rc .ep > :is(b, i) { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal } table.rowcards tr.rc .ladder { min-width:0; height:16px } table.rowcards tr.rc .ladder i.lab b { display:block } table.rowcards tr.rc > td > :is(input:not([type=checkbox]):not([type=radio]), select) { width:100% !important; max-width:100% } table.rowcards tr.rc > td:is([data-m=rank],[data-m=title],[data-m=chip],[data-m=corner]) { flex:0 1 auto; padding:0 6px 0 0 } table.rowcards tr.rc > td:is([data-m=rank],[data-m=title],[data-m=chip],[data-m=corner],[data-m=sub],[data-m=act])::before { display:none } table.rowcards tr.rc > td[data-m=rank] { order:-9; color:var(--fg3); font-size:12px; font-weight:650 } table.rowcards tr.rc > td[data-m=rank]::before { display:inline; content:'#' } table.rowcards tr.rc > td[data-m=title] { order:-8; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:650; color:var(--fg) } table.rowcards tr.rc > td[data-m=title]:has(> div) { white-space:normal; overflow-wrap:anywhere } table.rowcards tr.rc > td[data-m=title] > div { display:inline } table.rowcards tr.rc > td[data-m=title] > div + div { margin-left:6px; font-size:11px; font-weight:500 } table.rowcards tr.rc > td[data-m=title] .pill { padding:0; border:0; background:none; font-size:inherit; font-weight:inherit; color:inherit } table.rowcards tr.rc > td[data-m=chip] { order:-7; padding-right:4px } table.rowcards tr.rc > td[data-m=flag] { order:-7; flex:0 0 auto; display:flex; align-items:center; height:calc(1.5em + 4px); margin-right:4px; padding:0 0 0 7px; border-radius:999px; font-size:12.5px; line-height:1; white-space:nowrap; color:var(--fg2); border:1px solid color-mix(in srgb, var(--line) 90%, transparent); background:color-mix(in srgb, var(--fg) 4%, transparent) } table.rowcards tr.rc > td[data-m=flag]::before { display:inline; margin:0 4px 0 0; font-size:inherit; font-weight:400; letter-spacing:0; line-height:inherit; text-transform:none; color:inherit } table.rowcards tr.rc > td[data-m=flag] .pill { border:0; background:none; padding:0 7px 0 0; font-size:inherit; line-height:inherit; vertical-align:baseline } table.rowcards tr.rc > td[data-m=flag]:has(.pill.fail) { color:var(--fail); border-color:color-mix(in srgb, var(--fail) 50%, var(--line)) } table.rowcards tr.rc > td[data-m=corner] { order:-6; margin-left:auto; padding-right:0; font-size:11.5px; color:var(--fg3); text-align:right } table.rowcards tr.rc > td[data-m=corner] .numstrong { font-size:15px } table.rowcards tr.rc > td[data-m=count] { order:-6; flex:0 0 auto; margin-left:auto; padding:0; font-weight:650 } table.rowcards tr.rc > td[data-m=count]::before { display:inline; margin-right:5px } table.rowcards tr.rc > td.expander { order:-6; flex:0 0 auto; margin-left:auto; padding:0 0 0 8px } table.rowcards tr.rc > td[data-m=corner] ~ td.expander { margin-left:0 } table.rowcards tr.rc > td.expander:empty { display:none } table.rowcards tr.rc:not(:has(> td:is([data-m=rank],[data-m=title],[data-m=chip],[data-m=flag],[data-m=corner],[data-m=sub]))) > td.expander { position:absolute; top:7px; right:10px; padding:0 } table.rowcards tr.rc > td[data-m=sub] { order:-5; flex:1 1 100%; min-width:0; padding:1px 0 0; font-size:12.5px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } table.rowcards tr.rc > td[data-m=addr] { order:-2; flex:1 1 100%; display:flex; align-items:baseline; gap:8px; white-space:nowrap; overflow-wrap:normal; padding-right:0 } table.rowcards tr.rc > td[data-m=addr]::before { flex:0 0 34px; margin:0 } table.rowcards tr.rc > td[data-m=addr]:has(> .seen) { flex-wrap:wrap; row-gap:0 } table.rowcards tr.rc > td[data-m=addr] > div:first-child { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis } table.rowcards tr.rc > td[data-m=addr] > .seen { margin-left:auto } table.rowcards tr.rc > td[data-m=clock] { order:-3; flex:1 1 auto; display:flex; align-items:center; gap:8px; padding:5px 0 4px; white-space:nowrap; font-size:11px; color:var(--fg2); font-variant-numeric:tabular-nums } table.rowcards tr.rc > td[data-m=clock]::before { content:''; display:block; flex:1 1 auto; height:1px; margin:0; background:linear-gradient(90deg, color-mix(in srgb, var(--fg3) 50%, transparent), color-mix(in srgb, var(--fg3) 22%, transparent)) } table.rowcards tr.rc > td[data-m=clock] .clk { display:inline-flex; align-items:center; gap:5px; padding:1px 8px 1px 6px; border-radius:999px; border:1px solid color-mix(in srgb, var(--line) 85%, transparent); background:color-mix(in srgb, var(--bg2) 88%, transparent); box-shadow:0 1px 3px rgba(0,0,0,.22), inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent) } table.rowcards tr.rc > td[data-m=clock] .clk::before { content:''; width:11px; height:11px; flex:0 0 auto; background:currentColor; opacity:.8; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.4V8l2.4 1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.4V8l2.4 1.6'/%3E%3C/svg%3E") center / contain no-repeat } table.rowcards tr.rc > td[data-m=clock] .vchip { margin-left:2px } table.rowcards tr.rc:has(> td[data-m=clock]) > td.expander { order:-3; margin-left:6px; align-self:center; position:static } table.rowcards tr.rc > td[data-m=wide] { order:1; flex-basis:100% } table.rowcards tr.rc > td[data-m=act] { order:2; flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; padding:6px 0 0 } table.rowcards tr.rc > td[data-m=act] > * { margin-left:0 !important } table.rowcards tr.rc > td[data-m=hide] { display:none } table.rowcards tr.rc.open { border-bottom-left-radius:0; border-bottom-right-radius:0 } table.rowcards > tbody > tr.det { display:block; margin-top:-8px; border-radius:0 0 12px 12px; border:1px solid color-mix(in srgb, var(--line) 88%, transparent); border-top:0; background:color-mix(in srgb, var(--bg3) 72%, transparent) } table.rowcards > tbody > tr.det > td { display:block; width:auto; max-width:none; white-space:normal; padding:9px 12px 11px; border:0; background:none } table.rowcards .kv { grid-template-columns:minmax(0, 38%) minmax(0, 1fr); gap:3px 10px; font-size:12.5px } table.rowcards .kv dt { overflow-wrap:anywhere } table.rowcards .kvgrid > * { min-width:0; overflow-wrap:anywhere } .sdip { overflow-wrap:anywhere } body.mmb-staff table.rowcards { font-size:12.5px } body.mmb-staff table.rowcards > tbody { gap:6px } body.mmb-staff table.rowcards tr.rc { padding:7px 10px 6px; border-radius:10px } body.mmb-staff table.rowcards tr.rc > td:is(:not([data-m]), [data-m=wide]) { padding:2px 10px 2px 0 } body.mmb-staff table.rowcards tr.rc > td[data-l]::before { font-size:8.5px; letter-spacing:.6px } body.mmb-staff table.rowcards tr.rc > td[data-m=title] { font-size:13.5px } body.mmb-staff table.rowcards tr.rc > td[data-m=sub] { font-size:11.5px } body.mmb-staff table.rowcards tr.rc > td:is([data-m=corner], [data-m=rank], [data-m=clock]) { font-size:10.5px } body.mmb-staff table.rowcards tr.rc > td[data-m=clock] { padding:3px 0 2px } body.mmb-staff table.rowcards tr.rc .pill { font-size:11px; padding:0 6px } body.mmb-staff table.rowcards tr.rc .pill[data-s] { font-size:0 } body.mmb-staff table.rowcards tr.rc .pill[data-s]::before { font-size:11px } body.mmb-staff table.rowcards tr.rc > td[data-m=flag] { font-size:11px; height:calc(1.5em + 2px); padding:0 0 0 6px } body.mmb-staff table.rowcards tr.rc > td[data-m=flag] .pill { padding:0 6px 0 0 } body.mmb-staff .main { font-size:13.5px } body.mmb-staff .main .card { padding:9px 10px } body.mmb-staff .main .card > h3 { font-size:15px; margin:0 0 4px } body.mmb-staff .main .note { font-size:12px; line-height:1.4 } body.mmb-staff table.rowcards tr.rc button { font-size:12px; padding:3px 9px } body.mmb-staff table.rowcards tr.rc > td > :is(input, select) { font-size:12.5px; padding:3px 6px } body.mmb-staff table.rowcards > tbody > tr.det > td { padding:7px 10px 9px } body.mmb-staff table.rowcards .kv { font-size:11.5px } .band.band-live { flex-grow:1 } .band-live > .panels { flex-wrap:nowrap; gap:0 14px } .band-live > .panels > .panel { flex:1 1 0; min-width:0 } .band-live > .panels table { width:100%; table-layout:fixed } .band-live > .panels th:last-child { width:4.6em } .band-live > .panels td { font-size:13px; padding-right:8px } .band-live > .panels td.plabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .band-live > .panels .panelsub, .band-live > .panels .panel > .sect { white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .hint.msess > i { display:inline } .hint.msess > .msw { display:none } } .msess > i { display:none; font-style:normal } @media (min-width:701px) { td.mhealth { white-space:nowrap } td.mhealth > .mago { display:inline } td.mhealth > .mago::before { content:' \B7 ' } } @media (max-width:700px) and (hover:hover) { table.rowcards tr.r.rc:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) } } @media (max-width:700px) and (prefers-reduced-motion:reduce) { table.rowcards tr.rc.new { animation:none } } @keyframes rcflash { from { border-color:var(--accent) } }