/* ToxicsGuard public site - Toxics Land 2.0. Self-contained (no app.css). Light + dark via [data-theme] on (set by theme.js). */ @font-face { font-family: "Inter"; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); font-weight: 700 900; font-display: swap; } @font-face { font-family: "Silkscreen"; src: url(/fonts/silkscreen-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Silkscreen"; src: url(/fonts/silkscreen-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500 700; font-display: swap; } :root, [data-theme="dark"] { color-scheme: dark; --fg: 255,255,255; --bg: #080c09; --bg2: #0d130f; --card: #101812; --card2: #152019; --card3: #1b2820; --slot: #161b17; --line: rgba(255,255,255,.075); --line2: rgba(255,255,255,.135); --text: #edf4ee; --text2: #b3c2b6; --muted: #7b8c7f; --acc-rgb: 72,230,94; --acc: #48e65e; --acc2: #93ff80; --acc-ink: #03140a; --btn: #48e65e; --btn-hover: #6cf07e; --btn-ink: #03140a; --gold-rgb: 255,210,63; --gold: #ffd23f; --amber-rgb: 255,181,71; --amber: #ffb547; --red-rgb: 255,107,107; --red: #ff6b6b; --blue-rgb: 108,184,255; --blue: #6cb8ff; --purple: #c38bff; --top-bg: rgba(8,12,9,.78); --glass: rgba(8,12,9,.55); --glass2: rgba(8,12,9,.88); --compose-bg: rgba(16,24,18,.96); --toast-bg: #1a261d; --shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 12px 32px -12px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7); --glow: 0 0 0 1px rgba(72,230,94,.35), 0 8px 30px -6px rgba(72,230,94,.45); --hero-a: rgba(72,230,94,.16); --hero-b: rgba(255,210,63,.07); } [data-theme="light"] { color-scheme: light; --fg: 14,26,18; --bg: #f4f7f4; --bg2: #edf2ee; --card: #ffffff; --card2: #f6f9f7; --card3: #ebf1ec; --slot: #2a302b; --line: rgba(14,26,18,.09); --line2: rgba(14,26,18,.16); --text: #0e1a12; --text2: #3a4a3f; --muted: #627566; --acc-rgb: 22,163,74; --acc: #16a34a; --acc2: #13803b; --acc-ink: #ffffff; --btn: #15803d; --btn-hover: #166534; --btn-ink: #ffffff; --gold-rgb: 183,121,31; --gold: #a86a0c; --amber-rgb: 194,106,0; --amber: #b45f00; --red-rgb: 220,38,38; --red: #c81e1e; --blue-rgb: 37,99,235; --blue: #1d5fd8; --purple: #7c3aed; --top-bg: rgba(255,255,255,.82); --glass: rgba(255,255,255,.7); --glass2: rgba(255,255,255,.9); --compose-bg: rgba(255,255,255,.96); --toast-bg: #ffffff; --shadow: 0 1px 2px rgba(14,26,18,.05), 0 10px 28px -14px rgba(14,26,18,.18); --shadow-lg: 0 26px 60px -20px rgba(14,26,18,.28); --glow: 0 0 0 1px rgba(22,163,74,.35), 0 8px 26px -8px rgba(22,163,74,.4); --hero-a: rgba(22,163,74,.13); --hero-b: rgba(255,190,40,.12); } :root { /* the old names, so every page keeps working */ --green: var(--acc); --green2: var(--acc2); --green-ink: var(--acc-ink); --green-soft: rgba(var(--acc-rgb),.1); --green-line: rgba(var(--acc-rgb),.34); --gold-soft: rgba(var(--gold-rgb),.11); --gold-line: rgba(var(--gold-rgb),.36); --amber-soft: rgba(var(--amber-rgb),.12); --amber-line: rgba(var(--amber-rgb),.36); --red-soft: rgba(var(--red-rgb),.11); --red-line: rgba(var(--red-rgb),.36); --blue-soft: rgba(var(--blue-rgb),.11); --blue-line: rgba(var(--blue-rgb),.34); --r: 18px; --r2: 12px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --pixel: "Silkscreen", var(--mono); --tabbar: 0px; --topH: 66px; --ease: cubic-bezier(.2,.8,.2,1); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topH) + 12px); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15.5px/1.6 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; padding-bottom: var(--tabbar); background-image: radial-gradient(1100px 520px at 50% -180px, var(--hero-a), transparent 70%); background-repeat: no-repeat; transition: background-color .25s var(--ease), color .25s var(--ease); } h1, h2, h3, h4 { margin: 0; line-height: 1.22; letter-spacing: -.018em; color: var(--text); } h1 { font-size: 30px; font-weight: 800; } h2 { font-size: 20px; font-weight: 750; } h3 { font-size: 16px; font-weight: 700; } p { margin: 0; } a { color: var(--acc2); text-decoration: none; text-underline-offset: 3px; } a:hover { text-decoration: underline; } img { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(var(--acc-rgb),.3); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--btn); color: var(--btn-ink); padding: 8px 14px; border-radius: 10px; font-weight: 700; } .skip:focus { left: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; } .page { padding-top: 26px; padding-bottom: 56px; min-height: 62vh; } .muted { color: var(--muted); } .t2 { color: var(--text2); } .mono { font-family: var(--mono); } .small { font-size: 13.5px; } .tiny { font-size: 12.5px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .between { justify-content: space-between; } .stack { display: flex; flex-direction: column; gap: 14px; } .grow { flex: 1 1 auto; min-width: 0; } .nowrap { white-space: nowrap; } .mt { margin-top: 18px; } .mt-s { margin-top: 8px; } .mt-l { margin-top: 32px; } .gold { color: var(--gold); } .green { color: var(--acc); } .ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; } .center { text-align: center; } /* ================= top bar ================= */ .top { position: sticky; top: 0; z-index: 30; background: var(--top-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .top-in { display: flex; align-items: center; gap: 14px; height: var(--topH); } .brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none !important; min-width: 0; flex: none; } .brand .logo { width: 36px; height: 36px; border-radius: 10px; flex: none; display: block; box-shadow: 0 0 0 1px var(--line2), 0 6px 18px -6px rgba(var(--acc-rgb),.55); } .brand .logo img { width: 100%; height: 100%; display: block; border-radius: 10px; } .brand-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 7px; } .v2 { font-family: var(--pixel); font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: .02em; padding: 3px 5px 2px; border-radius: 5px; background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 14px -2px rgba(var(--acc-rgb),.6); } .brand small { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; } .nav > a, .nav > .dd > button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 10px; color: var(--text2); font-weight: 600; font-size: 14.5px; background: none; border: 0; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; } .nav > a:hover, .nav > .dd > button:hover { background: rgba(var(--fg),.055); color: var(--text); } .nav > a[aria-current="page"], .nav .dd.on > button { color: var(--text); background: rgba(var(--fg),.07); } .nav > a[aria-current="page"]::after { content: none; } .dd { position: relative; } .dd button .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); } .dd button[aria-expanded="true"] .chev { transform: rotate(180deg); } .menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; background: var(--card); border: 1px solid var(--line2); border-radius: 16px; padding: 7px; box-shadow: var(--shadow-lg); display: none; transform-origin: top left; } .menu.open { display: block; animation: pop .16s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .menu a, .menu button.mi { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; } .menu a:hover, .menu a:focus-visible, .menu button.mi:hover, .menu button.mi:focus-visible { background: rgba(var(--fg),.06); text-decoration: none; outline: none; } .menu a .mi-ic, .menu button .mi-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--fg),.06); color: var(--acc2); flex: none; } .menu a .mi-ic .ic { width: 17px; height: 17px; } .menu .mi-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .menu .mi-t small { font-weight: 500; color: var(--muted); font-size: 12.5px; } .menu .sep { height: 1px; background: var(--line); margin: 6px 4px; } .menu .more { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 4px 2px; } .menu .more a { width: auto; padding: 6px 9px; font-size: 13px; font-weight: 600; color: var(--text2); } .menu.right { left: auto; right: 0; transform-origin: top right; } .acct { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; } .icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 11px; border: 1px solid var(--line2); background: transparent; color: var(--text2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; flex: none; } .icon-btn:hover { background: rgba(var(--fg),.06); color: var(--text); } .icon-btn .ic { width: 18px; height: 18px; } .btn-login { height: 42px; padding: 0 18px; font-size: 15px; } .avatar-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font-weight: 650; font-size: 14px; cursor: pointer; } .avatar-btn:hover { border-color: var(--green-line); } .avatar-btn .chev { width: 14px; height: 14px; color: var(--muted); } .av { width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--btn), #0d6b2a); color: #fff; font-weight: 800; font-size: 14px; image-rendering: pixelated; object-fit: cover; } img.av { background: var(--card3); } .av.lg { width: 76px; height: 76px; border-radius: 20px; font-size: 30px; } .dot-badge { position: relative; } .dot-badge::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--card); } /* breadcrumbs */ .crumbs { margin: -8px 0 16px; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); } .crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-top: 1.6px solid var(--muted); transform: rotate(45deg); margin: 0 6px 0 2px; opacity: .7; } .crumbs a { color: var(--text2); font-weight: 600; } .crumbs [aria-current] { color: var(--text); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; } /* ================= phone tab bar + sheet ================= */ .tabbar { display: none; } @media (max-width: 859.98px) { :root { --tabbar: calc(66px + env(safe-area-inset-bottom)); --topH: 60px; } .nav, .avatar-btn .nm, .avatar-btn .chev { display: none; } .icon-btn.theme-desk { width: 38px; height: 38px; } .avatar-btn { padding: 3px; } .btn-login { height: 38px; padding: 0 14px; font-size: 14px; } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--top-bg); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line2); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; font-size: 11.5px; font-weight: 650; color: var(--muted); background: none; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; position: relative; } .tabbar .ic { width: 23px; height: 23px; } .tabbar [aria-current="page"], .tabbar button[aria-expanded="true"] { color: var(--acc2); } .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: -7px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); } } .sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet-bg.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--card); border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s var(--ease); max-height: 84vh; overflow: auto; visibility: hidden; box-shadow: var(--shadow-lg); } .sheet.open { transform: none; visibility: visible; } .sheet .grab { width: 42px; height: 5px; border-radius: 5px; background: var(--line2); margin: 2px auto 12px; } .sheet a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; color: var(--text); font-weight: 650; } .sheet a:hover { background: rgba(var(--fg),.05); text-decoration: none; } .sheet a .ic { color: var(--acc2); } .sheet .sheet-more { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 6px; } .sheet .sheet-more a { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13px; } /* ================= basics ================= */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; box-shadow: var(--shadow); } .card.pad-s { padding: 14px; } .card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .card-h h2, .card-h h3 { display: flex; align-items: center; gap: 9px; } .card-h .ic { color: var(--acc2); } .eyebrow { font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .px { font-family: var(--pixel); letter-spacing: .02em; text-transform: none; } .grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } @media (max-width: 900px) { .g3, .side { grid-template-columns: minmax(0, 1fr); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .g2 { grid-template-columns: minmax(0, 1fr); } } .page-h { margin-bottom: 22px; } .page-h h1 { font-size: 32px; } .page-h p { color: var(--text2); margin-top: 8px; max-width: 68ch; font-size: 16px; } @media (max-width: 640px) { .page-h h1 { font-size: 26px; } h1 { font-size: 26px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 17px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, transform .12s var(--ease), box-shadow .15s; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--card3); border-color: rgba(var(--fg),.22); } .btn:active { transform: translateY(1px) scale(.99); } .btn.primary { background: var(--btn); border-color: transparent; color: var(--btn-ink); box-shadow: 0 6px 20px -8px rgba(var(--acc-rgb),.75), inset 0 1px 0 rgba(255,255,255,.25); } .btn.primary:hover { background: var(--btn-hover); } .btn.gold { background: var(--gold); border-color: transparent; color: #1d1600; } .btn.danger { background: var(--red-soft); border-color: var(--red-line); color: var(--red); } .btn.danger:hover { background: rgba(var(--red-rgb),.18); } .btn.discord { background: #5865f2; border-color: transparent; color: #fff; box-shadow: 0 6px 20px -8px rgba(88,101,242,.8); } .btn.discord:hover { background: #4752c4; } .btn.ghost { background: transparent; } .btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; } .btn.lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: 14px; } .btn.xl { height: 58px; padding: 0 28px; font-size: 17px; border-radius: 16px; } .btn.block { width: 100%; } .btn.icon { width: 34px; padding: 0; } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn .ic { width: 17px; height: 17px; } .btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .linkbtn { background: none; border: 0; padding: 0; color: var(--acc2); cursor: pointer; font-weight: 650; } .linkbtn:hover { text-decoration: underline; } .input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; font-size: 15.5px; } textarea.input { height: auto; padding: 12px 14px; resize: vertical; min-height: 120px; line-height: 1.5; } select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .input:hover { border-color: rgba(var(--fg),.22); } .input:focus { border-color: var(--green-line); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.12); background: var(--card); } .input::placeholder { color: var(--muted); opacity: .8; } .input[aria-invalid="true"] { border-color: var(--red-line); box-shadow: 0 0 0 4px var(--red-soft); } label.f { display: block; font-size: 14px; font-weight: 650; color: var(--text); } .stack > label.f { margin-bottom: -7px; } .reply textarea { flex: 1 1 220px; width: auto; } label.f .hint, .hint { font-weight: 500; color: var(--muted); font-size: 13px; } .field { display: flex; flex-direction: column; gap: 7px; } .field .hint { margin-top: -2px; } .pw-wrap { position: relative; } .pw-wrap .input { padding-right: 48px; } .pw-eye { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border-radius: 9px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .pw-eye:hover { color: var(--text); background: rgba(var(--fg),.06); } .search { position: relative; } .search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search .input { padding-left: 42px; } .err { color: var(--red); font-size: 13.5px; font-weight: 600; min-height: 0; } .err:empty { display: none; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(var(--fg),.06); color: var(--text2); border: 1px solid var(--line); white-space: nowrap; } .pill.green { background: var(--green-soft); color: var(--acc2); border-color: var(--green-line); } .pill.gold { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); } .pill.red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); } .pill.amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); } .pill.blue { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); } .pill.gray { background: rgba(var(--fg),.05); color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; } .dot.on { background: var(--acc); box-shadow: 0 0 0 3px var(--green-soft); } .dot.live { background: var(--acc); animation: livepulse 2s infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),.55); } 70% { box-shadow: 0 0 0 8px rgba(var(--acc-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),0); } } .badge-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--gold); color: #1d1600; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; } .bar { position: relative; height: 10px; border-radius: 999px; background: rgba(var(--fg),.08); overflow: hidden; } .bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--acc2), var(--acc)); transition: width .6s var(--ease); } .bar.gold > i { background: linear-gradient(90deg, #d9a900, #ffd23f); } .bar.thin { height: 6px; } .bar .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card); } .meter-l { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text2); margin-bottom: 7px; } .meter-l b { color: var(--text); font-variant-numeric: tabular-nums; } .notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); margin-bottom: 18px; font-size: 14.5px; color: var(--text); } .notice .ic { margin-top: 2px; } .notice.blue { border-color: var(--blue-line); background: var(--blue-soft); } .notice.blue > .ic { color: var(--blue); } .notice.green { border-color: var(--green-line); background: var(--green-soft); } .notice.green > .ic { color: var(--acc); } .notice.gold, .notice.yellow { border-color: var(--gold-line); background: var(--gold-soft); } .notice.gold > .ic, .notice.yellow > .ic { color: var(--gold); } .notice.amber, .notice.orange { border-color: var(--amber-line); background: var(--amber-soft); } .notice.amber > .ic, .notice.orange > .ic { color: var(--amber); } .notice.red { border-color: var(--red-line); background: var(--red-soft); } .notice.red > .ic { color: var(--red); } .empty { text-align: center; padding: 34px 18px; color: var(--muted); } .empty .e-ic { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: rgba(var(--fg),.05); border: 1px solid var(--line); color: var(--muted); } .empty .e-ic .ic { width: 28px; height: 28px; } .empty > .ic { width: 30px; height: 30px; color: var(--muted); margin-bottom: 8px; } .empty b { display: block; color: var(--text); font-size: 16.5px; margin-bottom: 5px; } .empty p { max-width: 46ch; margin: 0 auto; color: var(--text2); font-size: 14.5px; } .empty .btn { margin-top: 16px; } .empty .row { justify-content: center; margin-top: 4px; } .sk { display: block; border-radius: 10px; background: linear-gradient(90deg, rgba(var(--fg),.045) 25%, rgba(var(--fg),.09) 37%, rgba(var(--fg),.045) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .sk + .sk { margin-top: 10px; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .toasts { position: fixed; z-index: 300; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + 18px); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; background: var(--toast-bg); color: var(--text); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); font-size: 14.5px; font-weight: 550; animation: tin .25s var(--ease); } .toast .ic { color: var(--acc); } .toast.bad .ic { color: var(--red); } .toast.bad { border-color: var(--red-line); } @keyframes tin { from { opacity: 0; transform: translateY(10px) scale(.98); } } .head { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; flex: none; background: var(--card3); } .head.s { width: 24px; height: 24px; border-radius: 6px; } .head.l { width: 56px; height: 56px; border-radius: 13px; } .head.xl { width: 76px; height: 76px; border-radius: 18px; } .mcb { font-family: var(--mono); font-size: 13px; padding: 1px 7px; border-radius: 6px; background: var(--slot); border: 1px solid var(--line); text-shadow: 1px 1px 0 rgba(0,0,0,.6); white-space: nowrap; } .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 13px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; font-size: 14.5px; cursor: pointer; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--acc); } .tab .n { font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: rgba(var(--fg),.08); display: inline-grid; place-items: center; color: var(--text2); } .tab .n.hot { background: var(--gold); color: #1d1600; } .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); } .seg button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; } .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 0 0 1px var(--line2); } .seg button:disabled { opacity: .45; cursor: default; } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--text2); font-weight: 650; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .chip:hover { color: var(--text); text-decoration: none; border-color: rgba(var(--fg),.25); } .chip[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green-line); color: var(--acc2); } .chip .ic { width: 15px; height: 15px; } @media (max-width: 719.98px) { .hscroll { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; margin-right: -20px; padding-right: 20px; } } .switch { position: relative; width: 50px; height: 30px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card3); cursor: pointer; flex: none; transition: background .2s; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text2); transition: transform .22s var(--ease), background .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch[aria-checked="true"] { background: var(--btn); border-color: var(--btn); } .switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; } /* ================= footer ================= */ .foot { border-top: 1px solid var(--line); margin-top: 28px; padding: 34px 0 30px; color: var(--muted); font-size: 14px; background: linear-gradient(180deg, transparent, rgba(var(--acc-rgb),.03)); } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 26px; } .foot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 10px; font-weight: 800; } .foot nav { display: flex; flex-direction: column; gap: 7px; } .foot a { color: var(--text2); font-weight: 550; } .foot a:hover { color: var(--text); } .foot .brand { margin-bottom: 12px; } .foot-ip { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line2); max-width: 330px; margin-top: 4px; } .foot-ip code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; } .made { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--text2); } .made .heart { color: var(--acc); } .foot .store-l { font-size: 12.5px; opacity: .85; } @media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } } /* ---------- home ---------- */ .ipbox { display: flex; align-items: center; gap: 6px; margin-top: 20px; padding: 6px 6px 6px 16px; border-radius: 13px; background: var(--bg); border: 1px solid var(--line2); max-width: 440px; } .ipbox code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .online-line { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text2); font-size: 14px; flex-wrap: wrap; } .online-line b { color: var(--text); font-variant-numeric: tabular-nums; } .heads { display: flex; flex-wrap: wrap; gap: 6px; } .heads a { display: block; border-radius: 7px; } .heads .more { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--card3); font-size: 11.5px; font-weight: 700; color: var(--text2); } .psearch { position: relative; } .results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 5px; box-shadow: 0 16px 34px rgba(0,0,0,.5); } .results:empty { display: none; } .results a { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; color: var(--text); font-weight: 600; } .results a:hover, .results a.act { background: rgba(var(--fg),.06); text-decoration: none; } .top3 { display: flex; flex-direction: column; gap: 4px; } .qlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .qlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qlink { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; } .qlink:hover { border-color: var(--green-line); text-decoration: none; transform: translateY(-1px); } .qlink .ic { width: 22px; height: 22px; color: var(--green2); } .qlink b { font-size: 15px; } .qlink span { font-size: 13px; color: var(--muted); } .goal + .goal { margin-top: 16px; } .ev { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; } .ev + .ev { border-top: 1px solid var(--line); } .ev .when { flex: none; width: 52px; text-align: center; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); padding: 5px 0; line-height: 1.15; } .ev .when b { display: block; font-size: 18px; } .ev .when small { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; } /* ---------- leaderboard rows / podium ---------- */ .lb { display: flex; flex-direction: column; gap: 2px; } .lbr { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; color: var(--text); font-size: 14px; } .lbr:hover { background: rgba(var(--fg),.04); text-decoration: none; } .lbr .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbr .v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text2); white-space: nowrap; } .lbr.me { background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-line); } .rank { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(var(--fg),.06); color: var(--text2); font-variant-numeric: tabular-nums; } .rank.r1 { background: var(--gold); color: #231a00; } .rank.r2 { background: #d5dde4; color: #1a2026; } .rank.r3 { background: #d8935a; color: #261203; } .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 18px; } .pod { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); min-width: 0; } .pod:hover { text-decoration: none; } .pod img { width: 64px; height: 64px; border-radius: 12px; image-rendering: pixelated; margin-bottom: 8px; } .pod.p1 img { width: 88px; height: 88px; border-radius: 16px; box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(var(--gold-rgb),.18); } .pod .nm { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod .v { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; } .pod .step { width: 100%; margin-top: 10px; border-radius: 12px 12px 0 0; display: grid; place-items: center; font-weight: 800; font-size: 22px; background: var(--card2); border: 1px solid var(--line); border-bottom: 0; } .pod.p1 .step { height: 92px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.16), var(--card2)); color: var(--gold); border-color: var(--gold-line); } .pod.p2 .step { height: 66px; color: #d5dde4; } .pod.p3 .step { height: 48px; color: #d8935a; } .pod.me .nm { color: var(--green2); } @media (max-width: 480px) { .pod img { width: 48px; height: 48px; } .pod.p1 img { width: 64px; height: 64px; } .pod .nm { font-size: 13px; } } /* ---------- me ---------- */ .me-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .me-head .me-who { flex: 1; min-width: 200px; } .item { padding: 14px 16px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); } .item + .item { margin-top: 10px; } .item-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .item-h .grow b { display: block; } .code { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); color: var(--text2); } .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .kv > div { padding: 11px 13px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); min-width: 0; } .kv > div > span { display: block; font-size: 12px; color: var(--muted); } .kv b { font-size: 18px; font-variant-numeric: tabular-nums; } .thread { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .bub { max-width: 82%; padding: 10px 13px; border-radius: 14px; background: var(--card3); border: 1px solid var(--line); white-space: pre-wrap; word-wrap: break-word; font-size: 14px; } .bub.me { align-self: flex-end; background: var(--green-soft); border-color: var(--green-line); border-bottom-right-radius: 4px; } .bub.staff { align-self: flex-start; border-bottom-left-radius: 4px; } .bub .by { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; font-weight: 600; white-space: normal; } .bub.staff .by { color: var(--gold); } .qa dt { font-weight: 650; font-size: 13px; color: var(--text2); } .qa dd { margin: 2px 0 10px; } .tk-toggle { width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; } .countdown { font-family: var(--mono); font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; } .switch { position: relative; width: 48px; height: 28px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card3); cursor: pointer; flex: none; transition: background .15s; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text2); transition: transform .15s, background .15s; } .switch[aria-checked="true"] { background: var(--green); border-color: var(--green); } .switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--green-ink); } .bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .bdg { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--bg2); min-width: 0; } .bdg.on { border-color: var(--gold-line); background: linear-gradient(160deg, rgba(var(--gold-rgb),.07), var(--bg2) 60%); } .bdg.locked { opacity: .7; } .bdg .bi { width: 40px; height: 40px; border-radius: 10px; background: var(--slot); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 18px; flex: none; text-shadow: 1px 1px 0 rgba(0,0,0,.6); overflow: hidden; } .bdg b { display: block; font-size: 14px; } .bdg small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; } .lv { display: inline-flex; gap: 3px; margin-top: 5px; } .lv i { width: 14px; height: 4px; border-radius: 3px; background: rgba(var(--fg),.12); } .lv i.on { background: var(--gold); } .days7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .dday { border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); padding: 10px 6px; text-align: center; min-width: 0; } .dday b { display: block; font-size: 12px; color: var(--muted); } .dday .ic { width: 20px; height: 20px; margin: 6px 0; color: var(--muted); } .dday small { display: block; font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dday.got { border-color: var(--green-line); background: var(--green-soft); } .dday.got .ic { color: var(--green); } .dday.today { border-color: var(--gold-line); box-shadow: 0 0 0 1px var(--gold-line); } .dday.today .ic { color: var(--gold); } @media (max-width: 560px) { .days7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ring { --p: 0; width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--p) * 1%), rgba(var(--fg),.08) 0); display: grid; place-items: center; flex: none; } .ring > div { width: 88px; height: 88px; border-radius: 50%; background: var(--card); display: grid; place-items: center; text-align: center; line-height: 1.1; } .ring b { font-size: 22px; } .ring small { font-size: 11px; color: var(--muted); } /* ---------- login / codes ---------- */ .narrow { max-width: 560px; margin: 0 auto; } .steps { counter-reset: s; list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; } .steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--text2); } .steps li::before { counter-increment: s; content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green2); font-weight: 800; font-size: 13px; display: grid; place-items: center; } .steps code, .cmd { font-family: var(--mono); color: var(--text); background: var(--bg2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: 13.5px; } .codein { font-family: var(--mono); font-size: 26px; letter-spacing: .45em; text-align: center; text-transform: uppercase; height: 60px; padding-left: calc(13px + .45em); } .codebox { font-family: var(--mono); font-size: 24px; letter-spacing: .12em; font-weight: 700; color: var(--green2); background: var(--green-soft); border: 1px dashed var(--green-line); border-radius: 12px; padding: 12px 18px; margin: 12px 0; display: inline-block; } .done { text-align: center; padding: 34px 20px; } .done > .ic { width: 42px; height: 42px; color: var(--green); } .done h2 { margin-top: 10px; } .done p { color: var(--text2); margin-top: 6px; } .tips { margin: 0; padding-left: 18px; color: var(--text2); font-size: 14px; line-height: 1.8; } /* ---------- timeline ---------- */ .tl { list-style: none; margin: 16px 0 0; padding: 0; position: relative; } .tl li { position: relative; padding: 0 0 18px 30px; } .tl li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; background: var(--line2); } .tl li:last-child { padding-bottom: 0; } .tl li:last-child::before { display: none; } .tl .nd { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card3); border: 2px solid var(--line2); } .tl li.ok .nd { background: var(--green); border-color: var(--green); } .tl li.now .nd { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .tl li.bad .nd { background: var(--red); border-color: var(--red); } .tl b { display: block; } .tl small { color: var(--muted); font-size: 12.5px; } .tl li.todo b { color: var(--muted); font-weight: 600; } .tl .quote { margin-top: 8px; } .quote { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 13px; white-space: pre-wrap; font-size: 14px; color: var(--text); } /* ---------- vote ---------- */ .site { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--bg2); } .site + .site { margin-top: 8px; } .site .n { width: 30px; height: 30px; border-radius: 9px; background: var(--card3); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; color: var(--text2); } .site.voted { border-color: var(--green-line); } .site.voted .n { background: var(--green); color: var(--green-ink); } .site .host { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal { max-width: 380px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .cal .wd { font-size: 11px; color: var(--muted); text-align: center; font-weight: 700; } .cal .c { aspect-ratio: 1; border-radius: 7px; background: rgba(var(--fg),.05); display: grid; place-items: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .cal .c.v { background: rgba(var(--acc-rgb),.2); box-shadow: inset 0 0 0 1px var(--green-line); color: var(--green2); font-weight: 800; } .cal .c.t { box-shadow: 0 0 0 2px var(--gold); } .cal .c.x { background: none; } .ms { display: flex; gap: 6px; flex-wrap: wrap; } .pips { display: flex; gap: 5px; } .pips i { width: 22px; height: 8px; border-radius: 4px; background: rgba(var(--fg),.1); } .pips i.on { background: var(--gold); } .big-num { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } /* ---------- rules ---------- */ .rule { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; } .rule + .rule { margin-top: 12px; } .rule .no { width: 40px; height: 40px; border-radius: 11px; background: var(--card3); display: grid; place-items: center; font-weight: 800; color: var(--text2); } .ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .ladder > div { padding: 8px 11px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); min-width: 0; } .ladder small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .ladder b { font-size: 13.5px; font-weight: 650; } .ladder .warn b { color: var(--blue); } .ladder .mute b { color: var(--amber); } .ladder .ban b { color: var(--red); } @media (max-width: 560px) { .ladder { grid-template-columns: minmax(0, 1fr); } .rule { grid-template-columns: minmax(0, 1fr); } .rule .no { width: 32px; height: 32px; } } /* ---------- status ---------- */ .chart { width: 100%; height: auto; display: block; } .chart .grid-l { stroke: rgba(var(--fg),.06); } .chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); } .chart .area { fill: url(#cg); } .chart .ln { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; } .chart .hair { stroke: var(--line2); } .chart .hd { fill: var(--green); stroke: var(--bg); stroke-width: 2; } .chart-wrap { position: relative; } .chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--card3); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; transform: translateX(-50%); } .upbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; align-items: end; height: 90px; } .upbars div { border-radius: 5px 5px 2px 2px; background: var(--green); min-height: 4px; } .upbars div.mid { background: var(--gold); } .upbars div.low { background: var(--red); } .upbars div.none { background: rgba(var(--fg),.08); } .uplbl { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; margin-top: 6px; font-size: 10.5px; color: var(--muted); text-align: center; } .statuswidget { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); } .statuswidget small { display: block; font-size: 12px; color: var(--muted); } .codeblock { font-family: var(--mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; margin: 0; white-space: pre; } body.embed { background: transparent; padding: 0; } body.embed .statuswidget { border-radius: 12px; } /* ---------- profile ---------- */ .prof { display: flex; gap: 24px; align-items: center; } .prof .body { width: 104px; flex: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); } @media (max-width: 600px) { .prof { flex-direction: column; text-align: center; } .prof .row { justify-content: center; } } .heat { display: block; width: 100%; max-width: 100%; height: auto; } .heat rect.d { rx: 2.5px; } .heat text { fill: var(--muted); font-size: 9px; font-family: var(--font); } .legend { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); } .legend i { flex: none; width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .btl { list-style: none; margin: 0; padding: 0; } .btl li { display: flex; gap: 12px; align-items: center; padding: 8px 0; } .btl li + li { border-top: 1px solid var(--line); } .btl .bi { width: 34px; height: 34px; border-radius: 9px; background: var(--slot); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); flex: none; overflow: hidden; } .cmp { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } .cmp th, .cmp td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; overflow: hidden; text-overflow: ellipsis; } .cmp td:first-child, .cmp th:first-child { text-align: left; color: var(--text2); width: 38%; } .cmp td.win { color: var(--gold); font-weight: 800; } .cmp thead th { font-weight: 700; } .cmp thead img { display: block; margin: 0 auto 4px; } /* ---------- tables (bans) ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line2); } .tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .who { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; } @media (max-width: 640px) { .tbl thead { display: none; } .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; } .tbl tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .tbl tr:last-child { border-bottom: 0; } .tbl td { border: 0; padding: 3px 0; } .tbl td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12.5px; } } .filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; } @media (max-width: 700px) { .filters { grid-template-columns: minmax(0, 1fr); } } /* ---------- footer ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .sk { background: rgba(var(--fg),.06); } } @media (max-width: 480px) { .ipbox { flex-wrap: wrap; padding: 10px; gap: 10px; } .ipbox code { flex-basis: 100%; text-align: center; font-size: 15px; } .ipbox .btn { width: 100%; } } .lbr.hist { flex-wrap: wrap; } .lbr.hist .nm { white-space: normal; flex: 1 1 120px; } @media (max-width: 640px) { .tbl tr { display: flex; flex-wrap: wrap; gap: 2px 14px; } .tbl td { width: auto; font-size: 13.5px; } .tbl td:first-child, .tbl td[data-l="Reason"] { flex-basis: 100%; } .tbl td[data-l="Reason"] { font-size: 14px; } .tbl td[data-l="Reason"]::before { content: none; } } @media (max-width: 560px) { .ladder > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; } .ladder b { text-align: right; } } /* ================= 3.6: news, seasonal event, launch, supporters, claim box, network ================= */ .menu a .pill, .sheet a .pill { margin-left: auto; height: 20px; font-size: 11px; padding: 0 8px; } .gap-b { margin-bottom: 16px; } .sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .sec-h .ic { color: #8ea1ff; } .h-s { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } /* item icons (/icon/.png) */ .itm { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--slot); border: 1px solid var(--line); display: inline-grid; place-items: center; overflow: hidden; } .itm img { width: 26px; height: 26px; image-rendering: pixelated; } .itm.s { width: 22px; height: 22px; border-radius: 6px; border: 0; background: rgba(0,0,0,.25); } .itm.s img { width: 18px; height: 18px; } /* seasonal event */ .ev-card { --ev: #ff7a18; border-color: var(--line); border-color: color-mix(in srgb, var(--ev) 38%, transparent); background: var(--card); background: linear-gradient(160deg, color-mix(in srgb, var(--ev) 13%, var(--card)) 0%, var(--card) 55%); position: relative; overflow: hidden; } .ev-card .eyebrow { color: var(--ev); display: inline-flex; align-items: center; gap: 5px; } .ev-card .eyebrow .ic { width: 14px; height: 14px; color: var(--ev); } .ev-name { color: var(--ev); font-size: 22px; font-weight: 800; margin-top: 2px; overflow-wrap: anywhere; } .ev-pill { color: var(--text); border-color: color-mix(in srgb, var(--ev) 45%, transparent); background: color-mix(in srgb, var(--ev) 14%, transparent); } .ev-pill .ic { width: 14px; height: 14px; } .ev-cur { color: var(--gold); } .earn { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text2); } .earn li { display: flex; gap: 8px; align-items: baseline; } .earn li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--ev); transform: translateY(-2px); } .shopchips { gap: 6px; } .schip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 5px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); font-size: 13px; font-weight: 600; color: var(--text); max-width: 100%; min-width: 0; } .schip.more { padding: 0 12px; color: var(--text2); } .schip .price { margin-left: 2px; } .price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; } .shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } @media (max-width: 560px) { .shopgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shopit { padding: 8px; gap: 8px; } .shopit .itm { width: 30px; height: 30px; } .shopit .itm img { width: 22px; height: 22px; } } .shopit { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); min-width: 0; } .shopit b { display: block; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; } /* launch */ .launch-card { background: linear-gradient(160deg, rgba(var(--gold-rgb),.07), var(--card) 55%); border-color: var(--gold-line); } .launch-card .eyebrow, .launch .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 5px; } .launch-card .eyebrow .ic, .launch .eyebrow .ic { width: 14px; height: 14px; } .lc-count { display: flex; flex-direction: column; gap: 2px; } .lc-count .countdown { font-size: 26px; color: var(--gold); line-height: 1.15; } .ipbox.ipbox-s { margin-top: 14px; padding: 4px 4px 4px 12px; max-width: none; } .ipbox.ipbox-s code { font-size: 14px; } .launch { padding: 0; overflow: hidden; } .launch .banner { background: var(--bg2); border-bottom: 1px solid var(--line); } .launch .banner { background: radial-gradient(ellipse at center, var(--card3), var(--bg2) 75%); } .launch .banner img { display: block; width: 100%; max-width: 900px; max-height: 360px; margin: 0 auto; object-fit: contain; } .launch-in { padding: 24px; } .launch h1 { font-size: 34px; font-weight: 800; } .cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 560px; } .cd > div { text-align: center; padding: 14px 4px 10px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--gold-line); box-shadow: inset 0 -30px 40px -30px rgba(var(--gold-rgb),.12); } .cd b { display: block; font-family: var(--mono); font-size: 42px; font-weight: 800; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .cd small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .live-banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--green-soft); border: 1px solid var(--green-line); } .live-banner > .ic { width: 30px; height: 30px; color: var(--green); } .live-banner b:first-child { display: block; font-size: 22px; color: var(--green2); } .live-banner span { color: var(--text2); } .launch-reg { align-items: flex-end; } .launch-reg .grow { flex: 1 1 280px; } .regcount { text-align: right; } .regcount b { display: block; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .regcount span { font-size: 13px; color: var(--muted); } @media (max-width: 560px) { .launch-in { padding: 18px; } .launch h1 { font-size: 27px; } .cd { gap: 6px; } .cd > div { padding: 10px 2px 8px; border-radius: 11px; } .cd b { font-size: 28px; } .cd small { font-size: 9.5px; letter-spacing: .04em; } .regcount { text-align: left; } .launch-reg .btn.lg { width: 100%; } } /* news */ .nlist { display: flex; flex-direction: column; } .nrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; color: var(--text); } .nrow + .nrow { border-top: 1px solid var(--line); } .nrow:hover { background: rgba(var(--fg),.04); text-decoration: none; } .nrow b { display: block; font-size: 14.5px; } .nrow .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news { scroll-margin-top: 74px; } .news:focus { outline: none; } .news.flash { animation: flash 2s ease; } @keyframes flash { 0%, 40% { border-color: var(--green-line); box-shadow: 0 0 0 3px var(--green-soft); } } .nimg { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg2); } .nimg img { display: block; width: 100%; max-width: 900px; max-height: 440px; margin: 0 auto; object-fit: contain; } .md.small { font-size: 13.5px; } .md { font-size: 15px; line-height: 1.65; color: var(--text2); overflow-wrap: anywhere; } .md > * + * { margin-top: 10px; } .md strong { color: var(--text); } .md a { text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb),.4); } .md code { font-family: var(--mono); font-size: .88em; background: var(--bg2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; color: var(--text); } .md .md-pre { font-family: var(--mono); font-size: 13px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 10px 0 0; } .md .md-pre code { background: none; border: 0; padding: 0; font-size: inherit; } .md blockquote { margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line2); color: var(--text2); } .md ul { margin: 8px 0 0; padding-left: 20px; } .md .md-h { color: var(--text); font-weight: 750; } .md .md-h1 { font-size: 20px; } .md .md-h2 { font-size: 17.5px; } .md .md-h3 { font-size: 16px; } .md .md-sub { font-size: 12.5px; color: var(--muted); } .spoiler { background: var(--card3); color: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; transition: color .15s; } .spoiler * { color: transparent !important; } .spoiler:focus, .spoiler:hover { color: inherit; outline: none; } .spoiler:focus *, .spoiler:hover * { color: inherit !important; } /* Discord events / giveaways */ .gw { display: flex; align-items: center; gap: 12px; padding: 11px 0; flex-wrap: wrap; } .gw + .gw { border-top: 1px solid var(--line); } .gw-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold); flex: none; } .gw-end { text-align: right; display: flex; flex-direction: column; margin-left: auto; } .pill .ic { width: 13px; height: 13px; } /* supporters */ .supgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .sup { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); font-weight: 650; font-size: 13.5px; min-width: 0; } .sup span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup:nth-child(-n+3) { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(var(--gold-rgb),.07), var(--bg2)); } a.sup:hover { border-color: var(--green-line); text-decoration: none; } /* my stuff: claim box, settings, header extras */ .claim { display: flex; align-items: center; gap: 12px; padding: 10px 6px; flex-wrap: wrap; } .claim + .claim { border-top: 1px solid var(--line); } .claim .grow b { display: block; } .claim .grow .small { display: block; } .setlist .setrow { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; } .setlist .setrow + .setrow { border-top: 1px solid var(--line); } .setlist .setrow:last-child { padding-bottom: 0; } .season-chip { text-decoration: none !important; max-width: 100%; overflow: hidden; } .season-chip .muted { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .me-launch { margin-bottom: 0; align-items: center; flex-wrap: wrap; } /* profile: all servers */ .srvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .srv { padding: 13px 14px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); min-width: 0; } .srv.this { border-color: var(--green-line); background: linear-gradient(160deg, var(--green-soft), var(--bg2) 60%); } .srv b .ic { color: var(--green2); } .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 12px 0 10px; } .mini dt { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } #scopeSeg .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; } .notice .btn .ic { color: inherit; margin-top: 0; } .me-launch .grow { flex: 1 1 220px; } .me-launch .btn { margin-left: auto; } @media (max-width: 560px) { .kv.kv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kv.kv3 > div { padding: 9px 10px; } .kv.kv3 > div > span { font-size: 11px; line-height: 1.3; } .kv.kv3 b { font-size: 16px; } } /* ---- 3.7 shared items (/share/) */ .share-h { display: flex; align-items: center; gap: 18px; } .share-h h1 { font-size: 28px; font-family: var(--mono); letter-spacing: 0; text-shadow: 2px 2px 0 rgba(0,0,0,.45); overflow-wrap: anywhere; } .share-h .eyebrow { display: inline-flex; align-items: center; gap: 6px; } .share-h .eyebrow .ic { width: 14px; height: 14px; color: var(--green2); } .share-h .head.xl { box-shadow: 0 6px 22px rgba(0,0,0,.4); } .share-act { flex: none; align-self: flex-start; } .share-gui { --s: 46px; padding: 22px; background: linear-gradient(180deg, rgba(var(--acc-rgb),.035), transparent 60%), var(--card); } .gwrap { display: flex; justify-content: center; overflow-x: auto; padding: 4px 2px 8px; } .share-gui .mcgui { display: inline-block; background: #c6c6c6; border: 3px solid; border-color: #fff #555 #555 #fff; border-radius: 4px; padding: 8px 9px 10px; box-shadow: 0 0 0 2px #000, 0 18px 50px rgba(0,0,0,.5); } .share-gui .mcgui-t { font-family: var(--mono); font-size: 14px; color: #404040; margin: 0 0 6px 1px; } .mcrow { display: grid; grid-template-columns: repeat(9, var(--s)); } .mcrow.div { height: 10px; overflow: hidden; margin: 2px 0; } .mcrow.div .mcs { height: 10px; visibility: hidden; } .mcrow.hot { margin-top: calc(var(--s) * .18); } .share-gui .mcs { position: relative; width: var(--s); height: var(--s); background: #8b8b8b; border: 2px solid; border-color: #373737 #fff #fff #373737; display: grid; place-items: center; padding: 0; margin: 0; font: inherit; color: inherit; border-radius: 0; } .share-gui .mcs.off { background: #a4a4a4; border-color: #9a9a9a; } .share-gui .mcs.headslot img { width: 72%; height: 72%; border-radius: 2px; image-rendering: pixelated; } .share-gui button.mcs { cursor: pointer; } .share-gui button.mcs:hover, .share-gui button.mcs:focus-visible { background: #b0b0b0; outline: none; } .share-gui .mcs.sel { box-shadow: inset 0 0 0 2px #fff; background: #b0b0b0; } .share-gui .mcs img { width: 78%; height: 78%; image-rendering: pixelated; pointer-events: none; } .share-gui .mcs.ench img { filter: drop-shadow(0 0 3px rgba(180,110,255,.95)) saturate(1.3); animation: shglint 2.6s ease-in-out infinite; } @keyframes shglint { 50% { filter: drop-shadow(0 0 6px rgba(200,140,255,1)) saturate(1.5) brightness(1.08); } } .share-gui .mcs b { position: absolute; right: 1px; bottom: -3px; font: 700 calc(var(--s) * .33)/1 var(--mono); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; } .share-gui .mcs .fb { display: none; font-size: 8.5px; line-height: 1.05; color: #222; text-align: center; padding: 1px; overflow: hidden; max-height: 100%; word-break: break-word; } .share-gui .mcs.noimg .fb { display: block; } .share-one { display: flex; align-items: flex-start; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 10px 0; } .share-gui .mcs.big { --b: 112px; width: var(--b); height: var(--b); border-width: 4px; box-shadow: 0 0 0 2px #000, 0 18px 50px rgba(0,0,0,.5); cursor: default; background: #8b8b8b; } .share-gui .mcs.big .fb { font-size: 12px; } .share-gui .mcs.big b { font-size: 26px; right: 4px; bottom: 0; } .shtip { background: rgba(16,0,16,.96); border: 2px solid #28015e; outline: 2px solid rgba(16,0,16,.96); border-radius: 3px; padding: 6px 10px 7px; font: 14px/1.45 var(--mono); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 340px; } .shtip .tipl { white-space: pre-wrap; overflow-wrap: anywhere; } .shtip .nm { margin-bottom: 2px; } .shtip .en { color: #aaa; } .shtip .lo { color: #a0a; font-style: italic; } .shtip .am { color: #555; margin-top: 2px; } .shtip.float { position: fixed; z-index: 200; pointer-events: none; max-width: min(340px, calc(100vw - 16px)); } .shtip.static { min-width: 180px; } .shdetail { margin-top: 14px; min-height: 44px; display: flex; justify-content: center; text-align: center; } .shsel { display: flex; align-items: flex-start; gap: 12px; text-align: left; } .shsel .itm { width: 44px; height: 44px; } .shsel .itm img { width: 32px; height: 32px; } .shfancy { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .shfancy-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .shf { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 5px; border-radius: 9px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); cursor: pointer; font: 13px var(--mono); text-shadow: 1px 1px 0 rgba(0,0,0,.6); } .shf:hover { background: var(--card3); } .share-foot { text-align: center; } .share-gone > .ic { color: var(--muted); } @media (hover: none) { .hover-only { display: none; } } @media (max-width: 640px) { .share-h { flex-direction: column; text-align: center; gap: 12px; } .share-h h1 { font-size: 23px; } .share-act { align-self: center; justify-content: center; } .share-gui { padding: 14px 10px; --s: min(44px, calc((100vw - 32px - 20px - 28px) / 9)); } .share-gui .mcgui { padding: 6px 6px 8px; border-width: 2px; } .share-gui .mcs { border-width: 1.5px; } .share-gui .mcgui-t { font-size: 12px; } .share-gui .mcs.big { --b: 92px; } .share-one { gap: 16px; } .shtip { font-size: 13px; } } /* ================= 3.8: a ticket by its code (/t/) ================= */ .tv { max-width: 820px; margin: 0 auto; } .tv-move { align-items: center; } .tv-move b { color: var(--gold); } .tv-emo { font-size: 20px; line-height: 1; } .tv-head { padding: 20px 22px; } .tv-top { display: flex; gap: 14px; align-items: flex-start; } .tv-top h1 { font-size: 23px; margin: 4px 0 10px; overflow-wrap: anywhere; } .tv-meta { gap: 8px; } .tv-meta .pill .ic { width: 14px; height: 14px; } .tv-live { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--green-line); background: var(--green-soft); color: var(--green2); font-size: 12.5px; font-weight: 700; flex: none; } .tv-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(var(--acc-rgb),.6); animation: tvpulse 2s infinite; } .tv-live.paused, .tv-live.off { border-color: var(--line2); background: rgba(var(--fg),.04); color: var(--muted); } .tv-live.paused .dot, .tv-live.off .dot { background: var(--muted); animation: none; } .tv-live.err { border-color: rgba(var(--amber-rgb),.35); background: var(--amber-soft); color: var(--amber); } .tv-live.err .dot { background: var(--amber); animation: none; } @keyframes tvpulse { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),.55); } 70% { box-shadow: 0 0 0 7px rgba(var(--acc-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb),0); } } #tvBan:empty { display: none; } #tvBan { margin-top: 14px; } #tvBan .notice { margin-bottom: 0; } .tv-reason { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); } .tv-conv { margin-top: 14px; padding: 0; overflow: visible; } .tv-open { margin: 18px 18px 4px; padding: 14px 16px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--line); } .tv-open-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; } .tv-open-h .ic { color: var(--green2); width: 16px; height: 16px; } .tv-qa { margin: 0; } .tv-qa dt { font-size: 12.5px; font-weight: 650; color: var(--muted); } .tv-qa dd { margin: 2px 0 12px; overflow-wrap: anywhere; } .tv-qa dd:last-child { margin-bottom: 0; } .tv-thread { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 6px; } .tv-none { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px dashed var(--line2); border-radius: 13px; color: var(--text2); } .tv-none .ic { color: var(--gold); width: 22px; height: 22px; } .tv-none b { display: block; color: var(--text); } .tvm { max-width: 80%; padding: 10px 14px 11px; border-radius: 15px; background: var(--card3); border: 1px solid var(--line); overflow-wrap: anywhere; animation: tvin .25s ease; } .tvm.me { align-self: flex-end; background: var(--green-soft); border-color: var(--green-line); border-bottom-right-radius: 5px; } .tvm.staff { align-self: flex-start; border-color: var(--gold-line); background: linear-gradient(160deg, rgba(var(--gold-rgb),.07), var(--card3) 55%); border-bottom-left-radius: 5px; } .tvm-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 4px; } .tvm-h b { font-size: 13px; } .tvm.staff .tvm-h b { color: var(--gold); } .tvm-h time { color: var(--muted); margin-left: auto; padding-left: 6px; font-size: 12px; white-space: nowrap; } .tvm-av { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--gold-soft); color: var(--gold); } .tvm-av .ic { width: 13px; height: 13px; } .tvb { height: 19px; padding: 0 7px; font-size: 10.5px; } .tvsrc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); padding: 0 6px; height: 18px; border-radius: 999px; background: rgba(var(--fg),.05); } .tvsrc .ic { width: 11px; height: 11px; } .tv .md { font-size: 14.5px; line-height: 1.5; color: var(--text); } .tv .md > * + * { margin-top: 6px; } .tv .md p { margin: 0; } .tv-qa dd.md { color: var(--text); } @keyframes tvin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .tv-compose { position: sticky; bottom: calc(var(--tabbar) + 0px); z-index: 5; margin-top: 10px; padding: 12px 16px 14px; background: var(--compose-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); } .tv-compose textarea.input { min-height: 52px; max-height: 240px; resize: none; line-height: 1.45; } .tv-cbar { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .tv-cbar #tvHint { flex: 1; min-width: 0; } .tv-cbar .btn { flex: none; } .tv-compose .err { margin-top: 6px; } kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text2); } .tv-foot { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 0; text-align: center; } .tv-foot .ic { width: 15px; height: 15px; } .tv-conv > .tv-thread:last-child { padding-bottom: 18px; } @media (max-width: 640px) { .tv-head { padding: 16px; } .tv-top { flex-direction: column-reverse; gap: 8px; } .tv-top h1 { font-size: 20px; } .tv-live { height: 24px; font-size: 11.5px; } .tv-open { margin: 12px 12px 2px; padding: 12px; } .tv-thread { padding: 12px 12px 4px; } .tvm { max-width: 92%; } .tv-compose { padding: 10px 12px 12px; } .tv-cbar kbd, .tv-cbar .kb { display: none; } .tv-move { font-size: 13.5px; } } /* ---- 3.9: pictures, lightbox, typing, seen, auto-close warning, rating */ .tv-top h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tv-seen { display: inline-flex; align-items: center; gap: 5px; } .tv-seen:empty { display: none; } .tv-seen .ic { width: 14px; height: 14px; } .tv-warn { align-items: center; } .tv-warn b { color: var(--amber); } .tvm-sys { align-self: center; display: flex; align-items: center; gap: 7px; max-width: 92%; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--amber-rgb),.3); background: var(--amber-soft); color: var(--text); font-size: 13px; text-align: left; animation: tvin .25s ease; } .tvm-sys .ic { width: 15px; height: 15px; color: var(--amber); flex: none; } .tvpics { display: grid; gap: 6px; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 150px)); } .tvpics.n1 { grid-template-columns: minmax(0, 280px); } .tvm-h + .tvpics { margin-top: 4px; } .tvpic { display: block; padding: 0; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; background: var(--bg2); cursor: zoom-in; aspect-ratio: 4 / 3; } .tvpics.n1 .tvpic { aspect-ratio: auto; max-height: 240px; } .tvpic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; } .tvpics.n1 .tvpic img { height: auto; max-height: 240px; object-fit: contain; } .tvpic:hover img { transform: scale(1.03); } .tvpic:focus-visible { outline-offset: 1px; } .tv-in { display: flex; gap: 8px; align-items: flex-end; } .tv-in textarea.input { flex: 1; min-width: 0; } .tv-clip { flex: none; width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; cursor: pointer; border: 1px solid var(--line2); } .tv-clip .ic { width: 18px; height: 18px; } .tv-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .tvatt { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: visible; border: 1px solid var(--line2); background: var(--bg2); } .tvatt img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; } .tvatt.up img { opacity: .45; } .tvatt.err { border-color: rgba(var(--red-rgb),.6); } .tvatt.err img { opacity: .35; } .tvatt-s { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--red); } .tvatt-s .ic { width: 20px; height: 20px; } .tvatt .spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(var(--fg),.25); border-top-color: var(--green); animation: tvspin .8s linear infinite; } @keyframes tvspin { to { transform: rotate(360deg); } } .tvatt-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card3); color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; } .tvatt-x .ic { width: 12px; height: 12px; } .tvatt-x:hover { background: var(--red); color: #fff; } .tvatt-e { position: absolute; left: 0; top: 100%; width: 160px; font-size: 11px; color: var(--red); margin-top: 3px; line-height: 1.3; } .tvatt.err { margin-bottom: 30px; } .tv-compose { position: sticky; } .tv-dropmsg { display: none; } .tv-compose.drop { outline: 2px dashed var(--green); outline-offset: -6px; } .tv-compose.drop .tv-dropmsg { display: flex; position: absolute; inset: 6px; border-radius: 12px; align-items: center; justify-content: center; gap: 8px; background: var(--glass2); color: var(--green2); font-weight: 700; pointer-events: none; } .tv-dropmsg .ic { width: 20px; height: 20px; } .tv-typing { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); margin: 0 0 8px 2px; } .tv-dots { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: 999px; background: var(--card3); border: 1px solid var(--line); } .tv-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: tvdot 1.2s infinite ease-in-out; } .tv-dots i:nth-child(2) { animation-delay: .15s; } .tv-dots i:nth-child(3) { animation-delay: .3s; } @keyframes tvdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } #tvRate:empty { display: none; } #tvRate { margin-top: 14px; } .tv-rate { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-color: var(--gold-line); background: linear-gradient(160deg, rgba(var(--gold-rgb),.06), var(--card) 60%); } .tv-rate-h { display: flex; flex-direction: column; gap: 2px; } .tv-rate-h b { font-size: 16px; } .tv-stars { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .tv-stars button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--line2); font-size: 24px; line-height: 1; cursor: pointer; transition: transform .12s ease, color .12s ease, background .12s ease; padding: 0; } .tv-stars button.on, .tv-stars button.hov { color: var(--gold); background: var(--gold-soft); border-color: var(--gold-line); } .tv-stars button:hover { transform: translateY(-1px) scale(1.05); } .tv-rlbl { margin-left: 8px; min-width: 90px; } .tv-rate textarea.input { min-height: 46px; resize: vertical; } .tv-rate-b { justify-content: flex-end; } .tv-rate-b .err { flex: 1; margin: 0; } .tv-rate.done { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; } .tv-rate.done > div { display: flex; flex-direction: column; } .tv-starline { color: var(--line2); font-size: 20px; letter-spacing: 1px; white-space: nowrap; } .tv-starline .on { color: var(--gold); } body.tvlb-open { overflow: hidden; } .tvlb { position: fixed; inset: 0; z-index: 200; background: rgba(4,7,5,.92); display: flex; flex-direction: column; animation: tvfade .15s ease; } @keyframes tvfade { from { opacity: 0; } } .tvlb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); color: var(--text2); font-size: 13px; } .tvlb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tvlb-n { font-variant-numeric: tabular-nums; color: var(--muted); } .tvlb-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 56px 24px; cursor: zoom-out; } .tvlb-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; background: var(--bg2); } .tvlb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card2); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; } .tvlb-nav .ic { width: 22px; height: 22px; } .tvlb-nav.prev { left: 10px; } .tvlb-nav.next { right: 10px; } .tvlb-nav:hover { background: var(--card3); border-color: var(--green-line); } @media (max-width: 640px) { .tvpics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tvpics.n1 { grid-template-columns: minmax(0, 240px); } .tv-clip { width: 40px; height: 40px; } .tv-stars button { width: 40px; height: 40px; font-size: 22px; } .tv-rlbl { flex-basis: 100%; margin: 4px 0 0 2px; } .tv-rate { padding: 16px; } .tvlb-img { padding: 6px 6px 70px; } .tvlb-nav { top: auto; bottom: 14px; transform: none; } .tvlb-nav.prev { left: calc(50% - 54px); } .tvlb-nav.next { right: calc(50% - 54px); } .tvlb-bar .lbl { display: none; } } /* ---- 3.9 ticket page: calmer header with "whose turn" line, easy attachments (pictures + videos), link cards, locked replies */ .tv-move { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 13.5px; color: var(--text2); } .tv-move b { color: var(--text); } .tv-move .tv-emo { font-size: 16px; } .tv-head { padding: 20px 22px 16px; } .tv-eb { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .tv-top h1 { font-size: 22px; line-height: 1.3; margin: 4px 0 0; } .tv-turn { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); } .tv-turn b { display: block; font-size: 15px; } .tv-turn .grow span { display: block; font-size: 13px; color: var(--text2); margin-top: 1px; } .tv-turn-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--card3); color: var(--muted); } .tv-turn-ic .ic { width: 18px; height: 18px; } .tv-turn.green { border-color: var(--green-line); background: var(--green-soft); } .tv-turn.green .tv-turn-ic { background: var(--green-soft); color: var(--green2); } .tv-turn.green b { color: var(--green2); } .tv-turn.amber { border-color: rgba(var(--amber-rgb),.3); background: var(--amber-soft); } .tv-turn.amber .tv-turn-ic { background: rgba(var(--amber-rgb),.16); color: var(--amber); } .tv-turn.blue .tv-turn-ic { color: var(--blue, #6cb4ff); } .tv-turn.red { border-color: rgba(var(--red-rgb),.35); } .tv-turn.red .tv-turn-ic { color: var(--red); } .tv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .tv-m-d { display: inline-flex; align-items: center; gap: 5px; } .tv-m-d .ic { width: 14px; height: 14px; } .tv-thread { gap: 14px; } .tvm { max-width: min(600px, 82%); } .tv .md { font-size: 15px; line-height: 1.6; } .tv .tvm .md { max-width: 66ch; } .tvsrc { padding: 0 4px; background: none; } .tv-compose textarea.input { width: 100%; font-size: 15px; } .tv-cbar { flex-wrap: wrap; } .tv-clip { width: auto; height: 36px; padding: 0 12px; gap: 7px; display: inline-flex; align-items: center; border: 1px dashed var(--line2); font-size: 13.5px; font-weight: 600; color: var(--text2); cursor: pointer; } .tv-clip:hover { border-color: var(--green-line); color: var(--green2); } .tv-clip .ic { width: 16px; height: 16px; } .tv-hint { flex: 1; min-width: 0; } .tvatt { margin-bottom: 18px; } .tvatt-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 9px; background: var(--card3); color: var(--text2); } .tvatt-v .ic { width: 20px; height: 20px; } .tvatt-v small { font-size: 10px; color: var(--muted); } .tvatt-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; } .tvatt-bar i { display: block; height: 100%; background: var(--green); transition: width .15s ease; } .tvatt-n { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; font-size: 10.5px; color: var(--muted); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tvatt.err .tvatt-n { display: none; } .tvvid { margin-top: 8px; max-width: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); background: #000; } .tvvid video { display: block; width: 100%; max-height: 300px; background: #000; } .tvlinks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .tvlink { display: flex; align-items: center; gap: 10px; max-width: 340px; padding: 7px 10px 7px 7px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text) !important; text-decoration: none !important; } .tvlink:hover { border-color: var(--green-line); } .tvlink img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; flex: none; } .tvlink-ic { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--card3); color: var(--text2); } .tvlink-ic .ic { width: 18px; height: 18px; } .tvlink-ic.v { background: rgba(var(--red-rgb),.13); color: var(--red); } .tvlink-ic.d { color: #8c9eff; } .tvlink-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tvlink-t b { font-size: 13px; } .tvlink-t small { font-size: 11.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tvlink > .ic:last-child { width: 14px; height: 14px; color: var(--muted); flex: none; } .tv-locked { display: flex; gap: 10px; align-items: center; margin: 10px 16px 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line2); color: var(--text2); font-size: 13.5px; } .tv-locked .ic { width: 18px; height: 18px; color: var(--muted); flex: none; } @media (max-width: 640px) { .tv-move { font-size: 12.5px; } .tv-head { padding: 16px 16px 14px; } .tv-top { flex-direction: row; align-items: flex-start; } .tv-top h1 { font-size: 19px; } .tv-turn { padding: 10px 12px; gap: 10px; } .tv-turn b { font-size: 14.5px; } .tvm { max-width: 92%; } .tv-clip span { display: none; } .tv-clip { width: 40px; justify-content: center; padding: 0; } .tv-hint { display: none; } .tv-cbar .btn.primary { flex: 1; justify-content: center; } } /* ===================================================================================== 4.0 - Toxics Land 2.0 components ===================================================================================== */ .mb { margin-bottom: 4px; } .sec { margin-top: 44px; } .sec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .sec-top h2 { font-size: 24px; margin-top: 2px; } .big-num small { font-size: 16px; font-weight: 600; } .kv b.sm { font-size: 15px; } .kv b small { font-size: 13px; color: var(--muted); font-weight: 600; } .v2.big { font-size: 15px; padding: 5px 8px 4px; border-radius: 8px; vertical-align: middle; position: relative; top: -6px; } /* ---------- home hero ---------- */ .hero2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; align-items: center; padding: 38px 40px; border-radius: 28px; overflow: hidden; background: radial-gradient(700px 360px at 85% 30%, var(--hero-a), transparent 65%), radial-gradient(500px 300px at 10% 110%, var(--hero-b), transparent 70%), var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); isolation: isolate; } .hero2::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(var(--fg),.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fg),.035) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); } .hero-copy { position: relative; z-index: 1; min-width: 0; } .hero-k { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line2); font-size: 13.5px; color: var(--text2); font-weight: 600; backdrop-filter: blur(6px); } .hero-k b { color: var(--text); font-variant-numeric: tabular-nums; } .hk-new { color: var(--gold); padding-left: 9px; border-left: 1px solid var(--line2); } .tops { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } @media (max-width: 420px) { .hk-new { display: none; } } .hero2 h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 900; letter-spacing: -.035em; margin-top: 16px; line-height: 1.02; } .hero2 .tag { color: var(--text2); margin-top: 12px; font-size: 17.5px; max-width: 46ch; line-height: 1.55; } .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; } .hero-art::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc-rgb),.35), transparent 65%); filter: blur(24px); } .hero-art img { position: relative; width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-10px) rotate(-.6deg); } } @media (max-width: 900px) { .hero2 { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; border-radius: 24px; } .hero-art { order: -1; margin: -8px 0 -10px; } .hero-art img { max-width: 300px; } } @media (max-width: 480px) { .hero2 { padding: 18px 16px 20px; } .hero-art img { max-width: 210px; } .hero2 h1 { margin-top: 12px; } .hero2 .tag { font-size: 16px; } .hero-cta .btn { flex: 1 1 0; padding: 0 12px; font-size: 15px; } .join { margin-top: 16px; } } /* join box (address + copy + Java + Bedrock) */ .join { margin-top: 22px; padding: 14px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line2); max-width: 520px; backdrop-filter: blur(8px); } .join-l { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; } .join-l .ic { width: 15px; height: 15px; color: var(--acc2); } .join-ip { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line2); } .join-ip code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; } .join-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 2px 0; font-size: 13px; } .jn-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--green-soft); border: 1px solid var(--green-line); color: var(--acc2); font-weight: 800; font-size: 11.5px; letter-spacing: .02em; } .join-n .plus { color: var(--muted); font-weight: 800; } .join-n a { margin-left: auto; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .join-n a .ic { width: 14px; height: 14px; } @media (max-width: 480px) { .join-ip { flex-wrap: wrap; padding: 10px; } .join-ip code { flex-basis: 100%; text-align: center; font-size: 16px; } .join-ip .btn { width: 100%; } .join-n a { margin-left: 0; } } /* what's happening cards */ .hgrid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .hgrid.n1 { grid-template-columns: minmax(0, 1fr); } .hgrid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hgrid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .hgrid, .hgrid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hgrid, .hgrid.n2, .hgrid.n3 { grid-template-columns: minmax(0, 1fr); } } .hcard { --tone: var(--acc); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--text); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; min-width: 0; } .hcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone); opacity: .9; } .hcard::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--tone); opacity: .07; } .hcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 45%, transparent); text-decoration: none; box-shadow: var(--shadow-lg); } .hc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); margin-bottom: 6px; } .hc-ic .ic { width: 20px; height: 20px; } .hc-k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); } .hc-t { font-size: 18px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; } .hc-s { font-size: 13.5px; color: var(--text2); } .hc-s .countdown { color: var(--gold); font-size: 15px; } .hcard .bar { margin: 4px 0 2px; } .hc-go { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 750; color: var(--acc2); display: inline-flex; align-items: center; gap: 5px; } .hc-go .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); } .hcard:hover .hc-go .ic { transform: translateX(3px); } /* need help banner */ .help-banner { position: relative; display: flex; align-items: center; gap: 22px; margin-top: 44px; padding: 28px 30px; border-radius: 24px; overflow: hidden; background: linear-gradient(120deg, rgba(var(--acc-rgb),.16), rgba(var(--acc-rgb),.04) 55%, transparent), var(--card); border: 1px solid var(--green-line); box-shadow: var(--shadow); } .help-banner::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(var(--acc-rgb),.07); pointer-events: none; } .hb-ic { width: 64px; height: 64px; border-radius: 20px; flex: none; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); box-shadow: var(--glow); } .hb-ic .ic { width: 32px; height: 32px; } .help-banner h2 { font-size: 26px; margin: 2px 0 4px; } .help-banner p { color: var(--text2); max-width: 56ch; } .hb-cta { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; } @media (max-width: 820px) { .help-banner { flex-direction: column; align-items: flex-start; padding: 22px; } .hb-cta { width: 100%; } .hb-cta .btn { flex: 1 1 auto; } } /* blog cards */ .pgrid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pgrid { grid-template-columns: minmax(0, 1fr); } } .pcard { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; min-width: 0; } .pcard:hover { transform: translateY(-3px); text-decoration: none; border-color: var(--green-line); box-shadow: var(--shadow-lg); } .pcard-im { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(var(--acc-rgb),.25), rgba(var(--acc-rgb),.04)), var(--card3); overflow: hidden; display: block; } .pcard-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); } .pcard:hover .pcard-im img { transform: scale(1.04); } .pcard-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(var(--acc-rgb),.7); } .pcard-ph .ic { width: 40px; height: 40px; } .pcard-b { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; } .pcard-tags { display: flex; gap: 6px; flex-wrap: wrap; } .pcard-tags span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--acc2); } .pcard-t { font-size: 17.5px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; } .pcard-e { font-size: 14px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard-m { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; } .pcard.big { grid-column: span 2; flex-direction: row; } .pcard.big .pcard-im { aspect-ratio: auto; flex: 1.2; min-height: 260px; } .pcard.big .pcard-b { flex: 1; padding: 24px; justify-content: center; } .pcard.big .pcard-t { font-size: 24px; } @media (max-width: 960px) { .pcard.big { grid-column: auto; flex-direction: column; } .pcard.big .pcard-im { aspect-ratio: 16/9; min-height: 0; } .pcard.big .pcard-t { font-size: 19px; } } /* ---------- play ---------- */ .play-h h1 { font-size: 36px; } .play-card { padding: 24px; } .pc-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; } .pc-ic .ic { width: 26px; height: 26px; } .pc-ic.java { background: rgba(var(--amber-rgb),.14); color: var(--amber); } .pc-ic.bedrock { background: rgba(var(--blue-rgb),.14); color: var(--blue); } .psteps { list-style: none; counter-reset: ps; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .psteps li { counter-increment: ps; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; } .psteps li::before { content: counter(ps); grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--green-soft); border: 1px solid var(--green-line); color: var(--acc2); font-weight: 800; } .psteps b { font-size: 15.5px; } .psteps span { color: var(--text2); font-size: 14.5px; } /* ---------- accounts ---------- */ .auth { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; align-items: stretch; max-width: 1040px; margin: 0 auto; } .auth-main { min-width: 0; } .auth-card { padding: 30px; } .auth-card h1 { font-size: 30px; margin-top: 4px; } .auth-side { position: relative; border-radius: 26px; overflow: hidden; background: radial-gradient(500px 300px at 50% 20%, rgba(var(--acc-rgb),.22), transparent 70%), var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 30px; } .as-in { max-width: 380px; text-align: left; } .as-in img { display: block; width: 100%; max-width: 300px; margin: 0 auto 18px; filter: drop-shadow(0 20px 36px rgba(0,0,0,.4)); } .as-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .as-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text2); font-size: 14.5px; } .as-list .ic { width: 20px; height: 20px; color: var(--acc2); flex: none; margin-top: 1px; } .as-list b { color: var(--text); } @media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .auth-side { display: none; } .auth-card { padding: 22px; } } .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); } .alt-login { border-top: 1px solid var(--line); padding-top: 14px; } .alt-login summary, .acc-d summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text2); display: flex; align-items: center; gap: 8px; list-style: none; padding: 6px 0; } .alt-login summary::-webkit-details-marker, .acc-d summary::-webkit-details-marker { display: none; } .alt-login summary::after, .acc-d summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: auto; transition: transform .2s; } .alt-login[open] summary::after, .acc-d[open] summary::after { transform: rotate(225deg); } .alt-login summary .ic { color: var(--acc2); } .pw-box:empty { display: none; } .pw-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -6px; } .pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 140px; } .pw-meter i { height: 5px; border-radius: 3px; background: rgba(var(--fg),.1); transition: background .2s; } .pw-meter.s1 i:nth-child(-n+1) { background: var(--red); } .pw-meter.s2 i:nth-child(-n+2) { background: var(--amber); } .pw-meter.s3 i:nth-child(-n+3) { background: var(--acc); } .pw-meter.s4 i { background: var(--acc); } .pw-word { font-size: 12.5px; font-weight: 700; color: var(--muted); } .pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; } .pw-rules li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; } .pw-rules .ic { width: 13px; height: 13px; } .pw-rules li.ok { color: var(--acc2); } .pw-eye.on { color: var(--acc2); } .done-big { text-align: center; padding: 10px 4px; } .done-big h1 { margin-top: 12px; } .done-big p { margin-top: 8px; } .tick { width: 84px; height: 84px; display: block; margin: 0 auto; } .tick-c { fill: rgba(var(--acc-rgb),.12); stroke: var(--acc); stroke-width: 3; stroke-dasharray: 227; stroke-dashoffset: 227; animation: tickc .6s var(--ease) forwards; } .tick-p { fill: none; stroke: var(--acc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tickp .35s .45s var(--ease) forwards; } @keyframes tickc { to { stroke-dashoffset: 0; } } @keyframes tickp { to { stroke-dashoffset: 0; } } /* profile & settings */ .acct-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .ah-av { flex: none; } .ah-body { display: block; width: 84px; height: 110px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(var(--acc-rgb),.25), transparent 70%), var(--card3); border: 1px solid var(--line); } .ah-body .body { width: 84px; margin-top: 4px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); } .ah-tags { gap: 6px; } .ah-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 860px) { .set-grid { grid-template-columns: minmax(0, 1fr); } .ah-cta { margin-left: 0; width: 100%; } } .set-card { display: flex; flex-direction: column; gap: 14px; } .set-card.hl { border-color: var(--green-line); box-shadow: var(--shadow), 0 0 0 4px rgba(var(--acc-rgb),.06); } .set-card.celebrate { animation: celebrate 1s var(--ease); } @keyframes celebrate { 30% { box-shadow: 0 0 0 6px rgba(var(--acc-rgb),.35); transform: scale(1.01); } } .sc-h { display: flex; gap: 13px; align-items: flex-start; } .sc-h h2 { font-size: 18px; } .sc-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(var(--fg),.06); color: var(--text2); } .sc-ic .ic { width: 21px; height: 21px; } .sc-ic.mc { background: var(--green-soft); color: var(--acc2); } .sc-ic.dc { background: rgba(88,101,242,.15); color: #8791f5; } .sc-ic.em { background: var(--blue-soft); color: var(--blue); } .sc-ic.pr { background: var(--gold-soft); color: var(--gold); } .linked-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); } .linked-row .grow b { display: block; } .lc-wrap { display: flex; flex-direction: column; gap: 10px; } .lcode { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 16px 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(var(--acc-rgb),.1), transparent), var(--bg2); border: 1px dashed var(--green-line); } .lcode span { width: 38px; height: 50px; display: grid; place-items: center; border-radius: 10px; background: var(--card); border: 1px solid var(--line2); font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--text); box-shadow: 0 2px 0 rgba(var(--fg),.06); } .lcode .sep { font-style: normal; color: var(--muted); font-weight: 800; padding: 0 2px; } @media (max-width: 420px) { .lcode span { width: 31px; height: 44px; font-size: 20px; } .lcode { gap: 3px; } } .lc-cmd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--slot); border: 1px solid var(--line); } .lc-cmd code { flex: 1; font-family: var(--mono); font-size: 14.5px; color: #e8f5ea; } .lc-cmd code b { color: #8dff7a; } .lc-foot .dot { vertical-align: 1px; margin-right: 4px; } .lc-foot .exp { color: var(--amber); } .acc-d { border-top: 1px solid var(--line); padding-top: 8px; } .acc-d:first-of-type { border-top: 0; padding-top: 0; } .setrow2 { display: flex; align-items: center; gap: 14px; padding: 12px 0; } .setrow2 + .setrow2 { border-top: 1px solid var(--line); } .setrow2 .grow b { display: block; font-size: 14.5px; } .setrow2 .grow span { display: block; } .danger-zone { border-color: var(--red-line); background: linear-gradient(160deg, var(--red-soft), var(--card) 50%); } .danger-zone h2 { color: var(--red); font-size: 18px; } /* ---------- my stuff ---------- */ .me-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: radial-gradient(600px 240px at 90% 0%, rgba(var(--acc-rgb),.12), transparent 70%), var(--card); } .me-hero h1 { font-size: 30px; } .mh-cta { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } @media (max-width: 700px) { .mh-cta { margin-left: 0; width: 100%; } .mh-cta .btn { flex: 1; } } .link-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, rgba(var(--acc-rgb),.18), rgba(var(--acc-rgb),.05)); border: 1px solid var(--green-line); color: var(--text); } .link-banner:hover { text-decoration: none; border-color: var(--acc); } .link-banner > .ic { color: var(--acc2); } .lb-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); flex: none; } .link-banner b { display: block; font-size: 16px; } .link-banner .grow > span { color: var(--text2); font-size: 14px; } .dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1020px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .dash { grid-template-columns: minmax(0, 1fr); } } .dcard { --tone: var(--acc); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .dcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone); opacity: .85; } .dc-h { display: flex; align-items: center; gap: 11px; } .dc-h h2 { font-size: 17px; flex: 1; } .dc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone); flex: none; } .dc-ic .ic { width: 19px; height: 19px; } .dc-b { flex: 1; min-width: 0; } .dc-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); } .mini-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg2); border: 1px dashed var(--line2); color: var(--text2); font-size: 14px; } .mini-empty .ic { width: 22px; height: 22px; color: var(--muted); flex: none; } .prof-mini { display: flex; align-items: center; gap: 12px; } .prof-mini .grow b { font-size: 16px; } .prof-mini .grow .small { display: block; } .sclist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .scrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; } .scrow .grow b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lvl { font-family: var(--pixel); font-size: 11px; padding: 4px 6px 3px; border-radius: 6px; background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); flex: none; } .streak { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .streak .fl { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(var(--amber-rgb),.3), rgba(var(--red-rgb),.15)); color: var(--amber); } .streak .fl .ic { width: 26px; height: 26px; } .la-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; } .la-row + .la-row { border-top: 1px solid var(--line); } .la-row .grow b { display: block; font-size: 14.5px; } .la-row .grow .tiny { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .la-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--fg),.06); color: var(--muted); flex: none; } .la-ic.ok { background: var(--green-soft); color: var(--acc2); } .la-ic .ic { width: 17px; height: 17px; } .la-ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); } .la-ok .ic { width: 15px; height: 15px; } .tlist { display: flex; flex-direction: column; gap: 6px; } .tlist.big { gap: 10px; } .trow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, background .15s, transform .15s var(--ease); min-width: 0; } .trow:hover { text-decoration: none; border-color: var(--green-line); background: var(--card2); } .tlist.big .trow { padding: 15px 16px; background: var(--card); box-shadow: var(--shadow); } .trow .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; } .tlist.big .trow .grow b { font-size: 15.5px; } .trow.unread { border-color: var(--gold-line); background: linear-gradient(90deg, var(--gold-soft), transparent 60%), var(--bg2); } .tlist.big .trow.unread { background: linear-gradient(90deg, var(--gold-soft), transparent 60%), var(--card); } .trow-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(var(--fg),.06); color: var(--muted); } .trow-ic .ic { width: 17px; height: 17px; } .trow-ic.green { background: var(--green-soft); color: var(--acc2); } .trow-ic.amber { background: var(--amber-soft); color: var(--amber); } .trow-ic.blue { background: var(--blue-soft); color: var(--blue); } .trow-ic.red { background: var(--red-soft); color: var(--red); } .trow.compact .pill { display: none; } .trow.compact .badge-n { font-size: 0; min-width: 10px; width: 10px; height: 10px; padding: 0; } @media (max-width: 520px) { .trow .pill { display: none; } } .code-find { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .code-find .cf-row { flex-wrap: nowrap; flex: 1 1 280px; } .code-find .cf-row .input { flex: 1; } /* ---------- ticket wizard ---------- */ .wz { max-width: 820px; margin: 0 auto; } .wz-top { position: sticky; top: var(--topH); z-index: 6; padding: 12px 0 10px; margin-bottom: 8px; background: linear-gradient(var(--bg) 70%, transparent); } .wz-prog { height: 8px; border-radius: 99px; background: rgba(var(--fg),.08); overflow: hidden; } .wz-prog i { display: block; height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--acc2), var(--acc)); box-shadow: 0 0 14px rgba(var(--acc-rgb),.6); transition: width .5s var(--ease); } .wz-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); } .wz-steps li { display: flex; align-items: center; gap: 6px; transition: color .2s; } .wz-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(var(--fg),.07); color: var(--muted); transition: background .2s, color .2s; } .wz-steps li.st-on { color: var(--text); } .wz-steps li.st-on span { background: var(--btn); color: var(--btn-ink); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.15); } .wz-steps li.st-done { color: var(--acc2); } .wz-steps li.st-done span { background: var(--green-soft); color: var(--acc2); } .wz-steps li.skip { opacity: .45; text-decoration: line-through; } @media (max-width: 600px) { .wz-steps li:not(.st-on) { font-size: 0; gap: 0; } .wz-steps li.st-on { font-size: 12.5px; } } .wz-stage { position: relative; overflow: hidden; padding: 4px 2px 8px; margin: 0 -2px; } .wz-pane { will-change: transform, opacity; } .wz-pane.in-r { animation: wzInR .32s var(--ease) both; } .wz-pane.in-l { animation: wzInL .32s var(--ease) both; } .wz-pane.out-l { position: absolute; inset: 4px 2px auto; animation: wzOutL .26s var(--ease) both; pointer-events: none; } .wz-pane.out-r { position: absolute; inset: 4px 2px auto; animation: wzOutR .26s var(--ease) both; pointer-events: none; } @keyframes wzInR { from { opacity: 0; transform: translateX(46px); } } @keyframes wzInL { from { opacity: 0; transform: translateX(-46px); } } @keyframes wzOutL { to { opacity: 0; transform: translateX(-46px); } } @keyframes wzOutR { to { opacity: 0; transform: translateX(46px); } } .wz-h { margin: 8px 0 18px; } .wz-h h1 { font-size: 30px; margin-top: 8px; } .wz-h p { margin-top: 6px; font-size: 16px; } .wz-h.sm { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .wz-tag { --tc: var(--acc); display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 750; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); } .wz-tag .ic { width: 16px; height: 16px; } .wz-wait { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .ww-i { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); font-size: 13.5px; color: var(--text2); } .ww-i b { color: var(--text); } .ww-i .ic { width: 15px; height: 15px; color: var(--muted); } .wz-resume { align-items: center; flex-wrap: wrap; } .wz-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .wz-type { --tc: var(--acc); position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 18px 40px 18px 18px; min-height: 104px; border-radius: 20px; border: 1px solid var(--line2); background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow); transition: transform .18s var(--ease), border-color .18s, box-shadow .18s, background .18s; animation: wtIn .4s var(--ease) both; animation-delay: calc(var(--i) * 40ms); -webkit-tap-highlight-color: transparent; } @keyframes wtIn { from { opacity: 0; transform: translateY(10px); } } .wz-type:hover, .wz-type:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 9%, var(--card)), var(--card) 70%); box-shadow: var(--shadow-lg); outline: none; } .wz-type:active { transform: scale(.985); } .wt-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); transition: transform .2s var(--ease); } .wz-type:hover .wt-ic { transform: rotate(-6deg) scale(1.06); } .wt-ic .ic { width: 26px; height: 26px; } .wt-t { font-size: 16.5px; font-weight: 800; line-height: 1.25; align-self: end; } .wt-d { font-size: 13.5px; color: var(--text2); line-height: 1.4; align-self: start; margin-top: 2px; } .wt-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); transition: transform .2s var(--ease), color .2s; } .wz-type:hover .wt-go { color: var(--tc); transform: translate(3px, -50%); } @media (max-width: 520px) { .wz-types { grid-template-columns: minmax(0, 1fr); gap: 10px; } .wz-type { min-height: 84px; padding: 14px 38px 14px 14px; } .wt-ic { width: 46px; height: 46px; } .wz-type { grid-template-columns: 46px minmax(0, 1fr); } .wz-h h1 { font-size: 25px; } } .qc-list { display: flex; flex-direction: column; gap: 12px; } .qc { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); animation: wtIn .4s var(--ease) both; animation-delay: calc(var(--i) * 70ms); } .qc b { font-size: 16px; display: block; margin-bottom: 3px; } .qc-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--green-soft); color: var(--acc2); font-weight: 800; } .wz-foot { position: sticky; bottom: var(--tabbar); z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px -2px 0; padding: 14px 2px calc(14px + env(safe-area-inset-bottom) * 0); background: linear-gradient(transparent, var(--bg) 26%); } @media (max-width: 600px) { .wz-foot .btn.lg { height: 48px; padding: 0 16px; font-size: 15px; } .wz-foot .grow { display: none; } .wz-foot .btn.primary { flex: 1; } #qcFix { flex: 1; } .wz-foot.sum #sumEdit { display: none; } } .wz-form { display: flex; flex-direction: column; gap: 18px; } .wq { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .wq-l { font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .wq-l .opt { font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(var(--fg),.06); padding: 2px 7px; border-radius: 6px; vertical-align: 2px; margin-left: 4px; } .wq-h { font-size: 14px; color: var(--text2); margin-top: -4px; } .wq textarea.input { min-height: 140px; } .wq-meta { display: flex; justify-content: space-between; gap: 10px; min-height: 18px; } .wq-warn { font-size: 13px; color: var(--amber); font-weight: 650; } .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .opt-b, .yn-b, .death { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--bg2); color: var(--text); font-weight: 700; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease); -webkit-tap-highlight-color: transparent; } .opt-b:hover, .yn-b:hover, .death:hover { border-color: rgba(var(--fg),.28); } .opt-b:active, .yn-b:active, .death:active { transform: scale(.985); } .opt-b[aria-checked="true"], .yn-b[aria-checked="true"], .death[aria-checked="true"] { border-color: var(--acc); background: var(--green-soft); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.12); } .opt-b[aria-checked="true"]::after { content: ""; position: absolute; right: 14px; width: 9px; height: 15px; border-right: 3px solid var(--acc); border-bottom: 3px solid var(--acc); transform: rotate(45deg); top: 14px; } .yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .yn-b { justify-content: center; font-size: 17px; min-height: 60px; } .yn-b .ic { width: 20px; height: 20px; } .yn-b[aria-checked="true"] .ic { color: var(--acc); } .chips.dt .chip { height: 42px; padding: 0 16px; font-size: 14.5px; } .chips.dt .chip[aria-checked="true"] { background: var(--green-soft); border-color: var(--acc); color: var(--acc2); } .dt-pick .input { max-width: 300px; } .deaths { display: flex; flex-direction: column; gap: 8px; } .death { min-height: 60px; } .death .grow b { display: block; font-size: 14.5px; } .d-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--fg),.06); color: var(--text2); flex: none; } .death[aria-checked="true"] .d-ic { background: var(--btn); color: var(--btn-ink); } .death.none { border-style: dashed; } .drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border-radius: 16px; border: 2px dashed var(--line2); background: var(--bg2); cursor: pointer; transition: border-color .15s, background .15s; } .drop:hover, .drop.over, .drop:focus-visible { border-color: var(--acc); background: var(--green-soft); outline: none; } .drop-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line2); color: var(--acc2); } .drop-ic .ic { width: 24px; height: 24px; } .wz-atts { margin-top: 4px; } .wq-player .results { top: calc(100% + 4px); } .wz-sum { padding: 6px 20px; } .sum-sec { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; } .sum-sec + .sum-sec { border-top: 1px solid var(--line); } .sum-sec dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 8px 16px; } .sum-sec dt { font-size: 13.5px; font-weight: 650; color: var(--muted); } .sum-sec dd { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } @media (max-width: 560px) { .sum-sec dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sum-sec dd { margin-bottom: 8px; } } .sum-k { display: block; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; } .edit-b { font-size: 15px; flex: none; } .sum-info { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 0 4px; } .sum-info .ic { width: 16px; height: 16px; color: var(--muted); } .confirm { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; animation: tvfade .15s; } .confirm-in { max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); animation: pop .2s var(--ease); } .wz-done { text-align: center; padding: 20px 0 10px; } .wz-done h1 { font-size: 32px; margin-top: 14px; } .wz-done > p { margin-top: 8px; font-size: 16px; } .done-link { max-width: 520px; margin: 22px auto 0; text-align: left; display: flex; flex-direction: column; gap: 10px; } .dl-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line2); } .dl-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-code { display: flex; align-items: center; gap: 10px; } .dl-code b { font-size: 20px; letter-spacing: .12em; color: var(--acc2); } .done-dm { max-width: 520px; margin: 12px auto 0; text-align: left; padding: 6px 18px; } /* ---------- ticket page 2.0 ---------- */ .tv-tl { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .tv-tl li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; min-width: 0; } .tv-tl li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--line2); z-index: 0; } .tv-tl li:first-child::before { display: none; } .tv-tl li.ok::before, .tv-tl li.now::before, .tv-tl li.bad::before { background: var(--acc); } .tl-d { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--card3); color: var(--muted); border: 2px solid var(--line2); } .tl-d .ic { width: 16px; height: 16px; } .tv-tl li.ok .tl-d { background: var(--btn); color: var(--btn-ink); border-color: transparent; } .tv-tl li.now .tl-d { background: var(--gold); color: #1d1600; border-color: transparent; box-shadow: 0 0 0 5px var(--gold-soft); animation: nowpulse 2.2s infinite; } .tv-tl li.bad .tl-d { background: var(--red); color: #fff; border-color: transparent; } @keyframes nowpulse { 50% { box-shadow: 0 0 0 8px rgba(var(--gold-rgb),.06); } } .tv-tl b { font-size: 13px; line-height: 1.2; } .tv-tl li.todo b { color: var(--muted); font-weight: 650; } .tv-tl small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @media (max-width: 480px) { .tv-tl b { font-size: 11.5px; } .tv-tl small { display: none; } .tl-d { width: 28px; height: 28px; } .tv-tl li::before { top: 13px; } } .tv-turn { flex-wrap: wrap; } .tv-close-b { margin-left: auto; } .tv-close-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); border: 1px solid var(--green-line); font-size: 14px; } .tv-close-ask span { flex: 1 1 220px; } .tv-move { background: linear-gradient(90deg, var(--gold-soft), transparent 70%), var(--card); border-color: var(--gold-line); } .tv-move b { color: var(--gold); } .tv-compose { bottom: var(--tabbar); box-shadow: 0 -12px 24px -12px rgba(0,0,0,.25); } /* ---------- blog ---------- */ .blog-h { margin-bottom: 18px; } .blog-h h1 { font-size: 38px; letter-spacing: -.03em; } .blog-h p { margin-top: 6px; font-size: 16.5px; } .tagbar { margin: 4px 0 6px; } .feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); } .feature:hover { text-decoration: none; border-color: var(--green-line); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .f-im { position: relative; min-height: 300px; background: linear-gradient(135deg, rgba(var(--acc-rgb),.25), rgba(var(--acc-rgb),.05)), var(--card3); overflow: hidden; } .f-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .f-b { display: flex; flex-direction: column; gap: 10px; padding: 30px; justify-content: center; align-items: flex-start; } .f-b .pill { margin-right: 4px; } .f-t { font-size: 28px; line-height: 1.18; font-weight: 850; letter-spacing: -.02em; } .f-e { color: var(--text2); font-size: 15.5px; } .f-go { font-weight: 750; color: var(--acc2); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; } @media (max-width: 820px) { .feature { grid-template-columns: minmax(0, 1fr); } .f-im { min-height: 0; aspect-ratio: 16/9; } .f-b { padding: 20px; } .f-t { font-size: 22px; } } .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .article { max-width: 760px; margin: 0 auto; } .art-head { text-align: left; } .art-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .art-tags .pill:hover { text-decoration: none; border-color: var(--green-line); color: var(--acc2); } .article h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -.03em; font-weight: 900; } .art-lead { font-size: 19px; line-height: 1.55; color: var(--text2); margin-top: 14px; } .art-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; } .av.sm { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; } .art-cover { margin: 26px 0 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--card3); box-shadow: var(--shadow); } .art-cover img { display: block; width: 100%; max-height: 480px; object-fit: cover; } .prose { margin-top: 28px; font-size: 17.5px; line-height: 1.75; color: var(--text); overflow-wrap: break-word; } .prose > * + * { margin-top: 1.1em; } .prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 1.7em; line-height: 1.25; } .prose h1 { font-size: 30px; } .prose h2 { font-size: 26px; } .prose h3 { font-size: 21px; } .prose h4 { font-size: 18px; } .prose p { margin-bottom: 0; } .prose a { color: var(--acc2); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb),.45); text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--acc); } .prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--acc); color: var(--text2); font-size: 18.5px; font-style: italic; } .prose img { display: block; max-width: 100%; height: auto; border-radius: 16px; margin-left: auto; margin-right: auto; } .prose figure { margin: 1.6em 0; } .prose figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: 8px; } .prose pre { font-family: var(--mono); font-size: 14px; line-height: 1.6; background: var(--slot); color: #e8f5ea; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; overflow-x: auto; } .prose code { font-family: var(--mono); font-size: .88em; background: rgba(var(--fg),.07); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; } .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; } .prose hr { border: 0; height: 1px; background: var(--line2); margin: 2.2em 0; } .prose mark { background: var(--gold-soft); color: var(--text); padding: 0 3px; border-radius: 4px; } .prose .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; } .prose th { background: var(--bg2); font-weight: 750; } .prose tr:last-child td { border-bottom: 0; } .prose .embed { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); } .prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .prose details { padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); } .prose summary { cursor: pointer; font-weight: 700; } .prose .callout { display: flex; gap: 12px; padding: 14px 18px; border-radius: 14px; background: rgba(var(--acc-rgb),.08); border: 1px solid rgba(var(--acc-rgb),.28); } .prose .callout::before { content: "💡"; font-size: 20px; line-height: 1.5; flex: none; } .prose .callout > * { margin: 0; } .prose .callout > * + * { margin-top: .6em; } .prose .callout.warn { background: rgba(240,160,48,.1); border-color: rgba(240,160,48,.35); } .prose .callout.warn::before { content: "⚠️"; } .prose .callout.info { background: rgba(95,168,240,.1); border-color: rgba(95,168,240,.32); } .prose .callout.info::before { content: "ℹ️"; } .prose .callout.good { background: rgba(62,207,116,.1); border-color: rgba(62,207,116,.32); } .prose .callout.good::before { content: "✅"; } .prose p.cta { text-align: center; } .prose a.btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 800; text-decoration: none; color: #1f1300; background: linear-gradient(135deg, #ffc247, #ff8a2a); box-shadow: 0 8px 22px -10px rgba(255,160,50,.6); } .prose a.btn-cta:hover { filter: brightness(1.06); } .prose figure.video { margin: 1.6em 0; } /* 4.0: previews inside the staff dashboard (ticket types, blog editor) */ html.pv header.top, html.pv .foot, html.pv .tabbar, html.pv .crumbs, html.pv .skip, html.pv .sheet-bg, html.pv .sheet { display: none !important; } html.pv body { padding-bottom: 0; } html.pv main.page { padding-top: 22px; padding-bottom: 30px; } html.pv .wz-top { margin-bottom: 14px; } html.pv .wz-type.pv-on { outline: 3px solid var(--acc); outline-offset: 3px; } @media (max-width: 600px) { .prose { font-size: 16.5px; } .art-lead { font-size: 17px; } } .art-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); } .share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .related { max-width: 1100px; margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .sk { background: rgba(var(--fg),.06); } .tick-c, .tick-p { stroke-dashoffset: 0; } .wz-pane.out-l, .wz-pane.out-r { display: none; } }