@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-500-cyrillic.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-600-cyrillic.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700-cyrillic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800-cyrillic.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-500-cyrillic.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-600-cyrillic.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-700-cyrillic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } [hidden] { display: none !important; } :root { --bg: #0b0b0c; --bg2: #121214; --card: #17171a; --line: #26262b; --text: #f4f4f1; --mute: #9a9aa2; --acc: #c8ff3d; --acc-ink: #0b0b0c; --acc-t: var(--acc); --hot: #ff5a36; --vio: #8b7bff; --g1: #c8ff3d; --g2: #8b7bff; --g3: #3da5ff; --g4: #ff5a36; --r: 22px; --head: "Unbounded", system-ui, sans-serif; --body: "Manrope", system-ui, sans-serif; --ui: "Manrope", system-ui, sans-serif; --inp: #0f0f11; --s1: #151517; --s2: #1d1d21; --s3: #26262b; --s4: #36363d; --s5: #4a4a52; --wv: #8c8c94; --wv2: #a8a8b0; --t2: #cfcfd4; --glass: rgba(11,11,12,.86); --pill: #141416; } * { box-sizing: border-box; } html { scroll-padding-top: 76px; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2 { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; margin: 0; } h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: .98; } h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; max-width: 820px; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 600px) { .wrap { padding: 0 16px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 15px 26px; background: var(--acc); color: var(--acc-ink); font-weight: 600; transition: transform .15s, box-shadow .15s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--acc) 55%, transparent); } .btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--acc); } .btn--sm { padding: 10px 18px; font-size: 14px; } .top { position: sticky; top: 0; z-index: 1000; background: var(--glass); border-bottom: 1px solid var(--line); } .top__in { display: flex; align-items: center; gap: 28px; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .04em; } .logo__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--acc); color: var(--acc-ink); font-size: 16px; } .logo__txt { position: relative; } .logo__txt::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; background: var(--hot); transform: rotate(-4deg); } .nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--mute); } .nav a:hover { color: var(--text); } @media (max-width: 900px) { .nav { display: none; } .top .btn { margin-left: auto; } } .hero { padding: 72px 0 96px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; width: 760px; height: 760px; right: -200px; top: -220px; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 16%, transparent), transparent); pointer-events: none; } .hero::after { content: ""; position: absolute; width: 620px; height: 620px; left: -260px; bottom: -300px; background: radial-gradient(closest-side, rgba(139,123,255,.16), transparent); pointer-events: none; } .hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative; z-index: 1; } @media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } } .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--mute); margin: 0 0 26px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 0%, transparent); } } .lead { font-size: 19px; color: var(--t2); max-width: 560px; margin: 26px 0 32px; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } .who { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 34px 0 0; list-style: none; } .who li { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--card); color: var(--mute); } .phone { justify-self: center; width: 320px; max-width: 100%; aspect-ratio: 9/18.5; border-radius: 46px; padding: 12px; background: linear-gradient(160deg, var(--s3), #0f0f12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), inset 0 0 0 1px var(--s4); transform: rotate(3deg); } .phone__screen { height: 100%; border-radius: 36px; background: var(--bg); padding: 22px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; } .ph-head { display: flex; align-items: center; gap: 10px; } .ph-ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--vio), var(--acc)); display: grid; place-items: center; font-weight: 700; color: var(--acc-ink); } .ph-name { font-weight: 600; font-size: 14px; } .ph-lvl { font-size: 11px; color: var(--mute); } .ph-coins { margin-left: auto; font-size: 12px; background: var(--card); padding: 5px 9px; border-radius: 999px; } .ph-xp { height: 5px; border-radius: 9px; background: var(--card); overflow: hidden; } .ph-xp i { display: block; height: 100%; background: var(--acc); border-radius: 9px; } .ph-search { font-size: 12px; color: var(--mute); background: var(--card); border-radius: 14px; padding: 11px 13px; } .ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .ph-tile { background: var(--card); border-radius: 14px; padding: 10px 8px; font-size: 10.5px; line-height: 1.2; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; } .ph-tile b { font-size: 18px; font-weight: 400; } .ph-tile:nth-child(1) { background: var(--acc); color: var(--acc-ink); } .ph-hot { margin-top: auto; background: linear-gradient(135deg, #2a140e, var(--s1)); border: 1px solid #4a2418; border-radius: 16px; padding: 12px; } .ph-hot__tag { font-size: 10px; color: var(--hot); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .ph-hot__t { font-size: 13px; font-weight: 600; margin: 3px 0; } .ph-hot__p { font-size: 12px; } .ph-hot__p s { color: var(--mute); margin-right: 4px; } .sec { padding: 104px 0; } .sec--alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); margin: 0 0 14px; } .sub { color: var(--mute); font-size: 18px; max-width: 680px; margin: 18px 0 44px; } .note, .hint { color: var(--mute); font-size: 13.5px; margin: 18px 0 0; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 36px; } .two--rev > :first-child { order: 2; } } .svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1000px) { .svc { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .svc { grid-template-columns: 1fr 1fr; gap: 10px; } .svc__c { padding: 16px; min-height: 0; } .svc__c b { font-size: 14px; } .svc__c p { font-size: 13px; } .badge { top: 12px; right: 12px; } } .svc__c { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; transition: border-color .2s, transform .2s; position: relative; } .svc__c:hover { border-color: var(--s5); transform: translateY(-3px); } .svc__i { font-size: 28px; } .svc__c b { font-family: var(--head); font-size: 17px; font-weight: 600; } .svc__c p { margin: 0; color: var(--mute); font-size: 14.5px; } .svc__c--wide { grid-column: span 2; background: linear-gradient(135deg, #1d2410, var(--card)); border-color: #34421a; } @media (max-width: 520px) { .svc__c--wide { grid-column: auto; } } .badge { position: absolute; top: 18px; right: 18px; font-size: 11px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc-t); } .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; } .seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; color: var(--mute); font-size: 14px; } .seg button.on { background: var(--text); color: var(--bg); } .seg a { padding: 8px 14px; border-radius: 999px; color: var(--mute); font-size: 14px; } .seg a.on { background: var(--text); color: var(--bg); } .seg--center { display: flex; width: max-content; max-width: 100%; margin: 0 auto 34px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chips button { border: 1px solid var(--line); background: transparent; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--mute); } .chips button.on { border-color: var(--acc); color: var(--acc-t); background: color-mix(in srgb, var(--acc) 8%, transparent); } .price { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); padding-left: 6px; } .price input { accent-color: var(--acc); width: 120px; } .mapbox__bar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .mapbox__body { display: grid; grid-template-columns: 1fr 360px; height: 560px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); } @media (max-width: 900px) { .mapbox__body { grid-template-columns: 1fr; height: auto; } .mapbox__map { height: 380px; } .mapbox__list { max-height: 420px; } } .mapbox__map { background: #101012; } .mapbox__list { background: var(--card); overflow-y: auto; border-left: 1px solid var(--line); } .place { padding: 16px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; } .place:hover, .place.sel { background: var(--s2); } .place__top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); } .place__t { font-weight: 600; margin: 4px 0 2px; } .place__m { font-size: 13.5px; color: var(--mute); } .place__p { font-size: 14px; margin-top: 6px; } .place__p s { color: var(--mute); margin-right: 6px; } .place__act { display: none; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .place.sel .place__act { display: flex; } .place__act button { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13px; background: var(--acc); color: var(--acc-ink); font-weight: 600; } .place__act button.g { background: var(--s3); color: var(--text); } .place__act button.done { background: var(--s3); color: var(--acc-t); } .place__act a.g { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; background: var(--s3); color: var(--text); } .place__act a.g .ic { width: 14px; height: 14px; } .going { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); margin-top: 8px; } .going i { width: 20px; height: 20px; border-radius: 50%; display: inline-block; margin-right: -10px; border: 2px solid var(--card); } .going span { margin-left: 10px; } .tag-hot { color: var(--hot); font-weight: 600; } .empty { padding: 30px 18px; color: var(--mute); text-align: center; } .pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.6); border: 2px solid #0b0b0c; } .pin span { transform: rotate(45deg); font-size: 14px; } .pin--studio { background: var(--acc); } .pin--concert { background: var(--vio); } .pin--event { background: #ffcf3d; } .pin--hot { background: var(--hot); animation: hot 1.4s infinite; } @keyframes hot { 50% { box-shadow: 0 0 0 8px rgba(255,90,54,0); } 0% { box-shadow: 0 0 0 0 rgba(255,90,54,.6); } } .pin.sel { outline: 3px solid #fff; } .me-dot { width: 16px; height: 16px; border-radius: 50%; background: #3da5ff; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(61,165,255,.25); } .leaflet-container { font: inherit; background: #101012; } .leaflet-control-attribution { background: rgba(11,11,12,.7) !important; color: #777 !important; font-size: 10px; } .leaflet-control-attribution a { color: #999 !important; } .leaflet-bar a { background: var(--card) !important; color: var(--text) !important; border-color: var(--line) !important; } .steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 14px; } .steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; } .steps li::before { content: counter(s); grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--head); font-size: 14px; color: var(--acc-t); } .steps span { color: var(--mute); font-size: 14.5px; } .split { padding: 24px; } .split__head { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; } .split__cover { width: 64px; height: 64px; border-radius: 12px; background: conic-gradient(from 200deg, var(--acc), var(--vio), var(--hot), var(--acc)); } .split__title { font-family: var(--head); font-weight: 600; } .split__meta { color: var(--mute); font-size: 14px; margin-top: 4px; } .split__meta { white-space: nowrap; } .split__meta input { width: 100px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; } .srow { display: grid; grid-template-columns: 1fr 90px 1fr 70px 28px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; } .srow input[type=text] { background: transparent; border: 0; padding: 4px 0; min-width: 0; } .srow select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px; font-size: 12.5px; } .srow input[type=range] { accent-color: var(--acc); min-width: 0; } .srow .pct { text-align: right; font-variant-numeric: tabular-nums; } .srow .amt { grid-column: 1 / -1; font-size: 12.5px; color: var(--mute); margin-top: -6px; } .srow .x { border: 0; background: none; color: var(--mute); font-size: 18px; } @media (max-width: 520px) { .srow { grid-template-columns: 1fr 1fr 44px 28px; grid-template-areas: "n r r x" "s s p p" "a a a a"; } .srow input[type=text] { grid-area: n; } .srow select { grid-area: r; } .srow input[type=range] { grid-area: s; } .srow .pct { grid-area: p; } .srow .x { grid-area: x; } .srow .amt { grid-area: a; } } .split__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; } .split__sum { font-size: 14px; font-weight: 600; } .split__sum.bad { color: var(--hot); } .split__sum.ok { color: var(--acc-t); } .room { position: relative; aspect-ratio: 1; overflow: hidden; background: #1a1730; } .room__wall { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #2b2550, #1f1b3a); } .room__floor { position: absolute; inset: 62% 0 0 0; background: repeating-linear-gradient(90deg, #3a2a20 0 60px, #33251c 60px 120px); } .room__poster { position: absolute; top: 12%; left: 10%; padding: 14px; background: var(--acc); color: var(--acc-ink); font: 700 16px/1 var(--head); transform: rotate(-4deg); } .room__desk { position: absolute; right: 8%; bottom: 30%; width: 36%; height: 14%; background: #121216; border-radius: 6px; display: flex; gap: 6px; padding: 8px; align-items: flex-end; } .room__desk::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 100%; height: 70%; background: #0c0c10; border: 3px solid var(--s3); border-radius: 6px; box-shadow: inset 0 0 20px rgba(139,123,255,.4); } .room__desk i { flex: 1; background: var(--s3); height: 50%; border-radius: 3px; } .avatar { position: absolute; left: 34%; bottom: 18%; width: 22%; display: flex; flex-direction: column; align-items: center; animation: bob 3s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-6px); } } .avatar__head { width: 54%; aspect-ratio: 1; border-radius: 46% 46% 42% 42%; background: #d9a77f; position: relative; } .avatar__cap { position: absolute; left: -6%; right: -6%; top: -8%; height: 46%; border-radius: 60% 60% 10% 10%; background: var(--c-cap, #0b0b0c); } .avatar__body { width: 90%; aspect-ratio: 1.15; margin-top: -4%; border-radius: 34% 34% 12% 12%; background: var(--c-body, #8b7bff); transition: background .4s; } .avatar__legs { width: 66%; aspect-ratio: 1.3; background: #23232a; border-radius: 0 0 10px 10px; } .room__gem { position: absolute; top: 9%; right: 9%; color: var(--acc-t); font-size: 26px; animation: spin 6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .room__tag { position: absolute; left: 16px; bottom: 16px; background: rgba(11,11,12,.75); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .room[data-lvl="5"] .room__wall, .room[data-lvl="6"] .room__wall { background: linear-gradient(180deg, #3a1d45, #22183a); } .room[data-lvl="6"] .avatar__cap { background: var(--acc); } .levels { display: flex; gap: 6px; margin-bottom: 22px; } .lv { flex: 1; text-align: center; font-size: 11px; color: var(--mute); } .lv i { display: block; height: 6px; border-radius: 9px; background: var(--line); margin-bottom: 7px; transition: background .3s; } .lv.on i { background: var(--acc); } .lv.cur { color: var(--text); font-weight: 600; } @media (max-width: 520px) { .lv span { display: none; } .lv.cur span { display: inline; } } .quests { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 8px 18px; } .quests__h { display: flex; justify-content: space-between; font-weight: 600; padding: 10px 0; font-size: 14px; } .quests__h span { color: var(--acc-t); } .q { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; cursor: pointer; } .q input { accent-color: var(--acc); width: 18px; height: 18px; } .q em { margin-left: auto; font-style: normal; color: var(--acc-t); font-size: 13px; } .q.done span { color: var(--mute); text-decoration: line-through; } .ai { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; } @media (max-width: 900px) { .ai { grid-template-columns: 1fr; } } .ai__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .ai__tools { grid-template-columns: 1fr; } } .tool { padding: 22px; } .tool__vis { height: 120px; border-radius: 14px; margin-bottom: 16px; position: relative; overflow: hidden; } .tool b { font-family: var(--head); font-weight: 600; font-size: 16px; } .tool p { color: var(--mute); font-size: 14px; margin: 6px 0 0; } .tool__c { float: right; font-size: 12px; color: var(--acc-t); background: color-mix(in srgb, var(--acc) 10%, transparent); padding: 3px 9px; border-radius: 999px; } .vis-cover { background: conic-gradient(from 90deg at 30% 60%, #ff5a36, #8b7bff, #c8ff3d, #ff5a36); filter: saturate(1.2); } .vis-cover::after { content: "3000×3000"; position: absolute; right: 10px; bottom: 8px; font-size: 11px; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 6px; } .vis-wave { background: #101012; display: flex; align-items: center; gap: 3px; padding: 0 14px; } .vis-wave i { flex: 1; background: var(--acc); border-radius: 3px; animation: eq 1.1s ease-in-out infinite alternate; } @keyframes eq { from { transform: scaleY(.25); } } .vis-video { background: linear-gradient(135deg, #22183a, #101012); display: grid; place-items: center; } .vis-video::before { content: "▶"; width: 46px; height: 46px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 16px; } .vis-master { background: #101012; display: flex; align-items: flex-end; gap: 4px; padding: 14px; } .vis-master i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--vio), var(--acc)); } .ai__calc { padding: 24px; } .ai__calc-h { font-family: var(--head); font-weight: 600; margin-bottom: 10px; } .arow { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .arow small { display: block; color: var(--mute); font-size: 12.5px; } .stepper { display: inline-flex; align-items: center; gap: 10px; } .stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); } .stepper output { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; } .ai__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; font-weight: 600; } .ai__total b { font-family: var(--head); font-size: 28px; color: var(--acc-t); } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .plans { grid-template-columns: 1fr; } } .plan { padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; } .plan--top { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 30px 80px -40px color-mix(in srgb, var(--acc) 50%, transparent); } .plan__n { font-family: var(--head); font-size: 22px; font-weight: 700; } .plan__w { color: var(--mute); font-size: 14px; margin-top: -8px; } .plan__p { font-family: var(--head); font-size: 30px; font-weight: 700; } .plan__p small { font: 500 14px var(--body); color: var(--mute); } .plan__p .soon { font-size: 18px; color: var(--mute); } .plan__save { font-size: 12.5px; color: var(--acc-t); min-height: 18px; } .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; } .plan li { padding-left: 24px; position: relative; } .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-t); } .plan .btn { margin-top: auto; } .once { margin-top: 44px; } .once__h { font-family: var(--head); font-weight: 600; margin-bottom: 14px; } .once__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 900px) { .once__grid { grid-template-columns: repeat(2, 1fr); } } .o { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; font-size: 14px; } .o b { display: block; font-family: var(--head); font-size: 17px; margin-top: 6px; } .o b.soon { color: var(--mute); font-size: 14px; font-family: var(--body); font-weight: 500; } .partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; } @media (max-width: 900px) { .partners { grid-template-columns: 1fr; } } .p { padding: 26px; } .p__i { font-size: 30px; margin-bottom: 12px; } .p b { font-family: var(--head); font-weight: 600; } .p p { color: var(--mute); font-size: 14.5px; margin: 8px 0 0; } .road { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: r; } @media (max-width: 1000px) { .road { grid-template-columns: 1fr; } } .road li { counter-increment: r; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; position: relative; } .road li::before { content: "0" counter(r); font-family: var(--head); font-size: 13px; color: var(--mute); } .road li.now { border-color: var(--acc); } .road li.now::after { content: "сейчас"; position: absolute; top: 18px; right: 18px; font-size: 11px; color: var(--acc-ink); background: var(--acc); padding: 3px 8px; border-radius: 999px; font-weight: 600; } .road b { display: block; margin: 12px 0 6px; font-family: var(--head); font-weight: 600; font-size: 15px; } .road span { color: var(--mute); font-size: 14px; } .join__in { display: grid; grid-template-columns: 1fr 440px; gap: 48px; align-items: center; } @media (max-width: 900px) { .join__in { grid-template-columns: 1fr; } } .join .sub { margin-bottom: 0; } .form { padding: 26px; display: grid; gap: 14px; } .form label { display: grid; gap: 6px; font-size: 13px; color: var(--mute); } .form input, .form select { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; color: var(--text); } .form input:focus, .form select:focus { outline: none; border-color: var(--acc); } .form .err { border-color: var(--hot); } .form__ok { margin: 0; color: var(--acc-t); font-weight: 600; } .foot { border-top: 1px solid var(--line); padding: 30px 0; } .foot__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--mute); font-size: 13px; } .foot p { margin: 0; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *:not(.bg i), *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } .tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35); } .ph-rel { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 14px; padding: 10px; } .ph-rel__c { width: 38px; height: 38px; border-radius: 9px; background: conic-gradient(from 200deg, var(--acc), var(--vio), var(--hot), var(--acc)); flex: none; } .ph-rel__t { font-size: 12.5px; font-weight: 600; } .ph-rel__m { font-size: 11px; color: var(--acc-t); } .center { text-align: center; } .center h2, .center .sub { margin-left: auto; margin-right: auto; } .nav a.on { color: var(--acc-t); } .sec--tiles { padding-top: 64px; } .tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 172px; gap: 14px; max-width: 1080px; margin: 0 auto; } .tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .2s, border-color .2s, background .2s; } .tile:hover { transform: translateY(-4px); border-color: var(--s5); background: var(--s2); } .tile__i { position: absolute; top: 18px; left: 20px; font-size: 38px; line-height: 1; transition: transform .25s; } .tile:hover .tile__i { transform: scale(1.12) rotate(-6deg); } .tile__t { font-family: var(--head); font-weight: 600; font-size: 17px; } .tile__d { font-size: 13px; color: var(--mute); line-height: 1.35; } .tile__go { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: 15px; opacity: 0; transform: translate(-4px, 4px); transition: .2s; } .tile:hover .tile__go { opacity: 1; transform: none; } .tile .badge { top: 18px; right: 16px; transition: opacity .2s; } .tile:hover .badge { opacity: 0; } .tile--big { grid-column: span 2; grid-row: span 2; background: var(--acc); color: var(--acc-ink); border-color: var(--acc); padding: 28px; } .tile--big:hover { background: #d4ff63; border-color: #d4ff63; } .tile--big .tile__i { font-size: 76px; top: 28px; left: 28px; } .tile--big .tile__t { font-size: 34px; } .tile--big .tile__d { color: rgba(11,11,12,.7); font-size: 16px; max-width: 360px; } .tile--big .badge { background: var(--acc-ink); color: var(--acc); } .tile--big .tile__go { background: var(--acc-ink); color: var(--acc); } @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } } @media (max-width: 520px) { .tiles { gap: 10px; grid-auto-rows: 132px; } .tile { padding: 14px; border-radius: 20px; } .tile__i { font-size: 30px; top: 14px; left: 14px; } .tile__t { font-size: 14px; } .tile__d { display: none; } .tile--big .tile__d { display: block; font-size: 13px; } .tile--big .tile__t { font-size: 24px; } .tile--big .tile__i { font-size: 56px; } .tile .badge { display: none; } } .tiles--sm { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 118px; max-width: none; margin-top: 34px; } .tile--sm .tile__i { font-size: 28px; } .tile--sm .tile__t { font-size: 14px; } .tile--sm .tile__d, .tile--sm .badge { display: none; } @media (max-width: 1000px) { .tiles--sm { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .tiles--sm { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 104px; } } a.ph-tile:hover { outline: 1px solid var(--acc); } .pg-hero { padding: 40px 0 56px; position: relative; } .pg-hero::before { content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -300px; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 13%, transparent), transparent); pointer-events: none; } .back { display: inline-block; color: var(--mute); font-size: 14px; margin-bottom: 34px; } .back:hover { color: var(--acc-t); } .pg-hero__in { display: grid; grid-template-columns: 140px 1fr; gap: 36px; align-items: start; position: relative; } .pg-ico { width: 140px; height: 140px; border-radius: 36px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-size: 72px; } .pg-hero h1 { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04; max-width: 860px; } .pg-hero .lead { margin: 20px 0 28px; } @media (max-width: 700px) { .pg-hero__in { grid-template-columns: 1fr; gap: 20px; } .pg-ico { width: 84px; height: 84px; border-radius: 24px; font-size: 44px; } } .sec--tight { padding-top: 24px; } .bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .bar .note { margin: 0; } .road--steps { margin-top: 34px; } .partners--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1000px) { .partners--5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .partners--5 { grid-template-columns: 1fr; } } .ticks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; } .ticks li { padding-left: 26px; position: relative; } .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-t); } .link { background: none; border: 0; color: var(--acc-t); padding: 0; text-decoration: underline; } .beats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1000px) { .beats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .beats { grid-template-columns: 1fr; } } .beat { overflow: hidden; } .beat__cover { aspect-ratio: 1.4; display: grid; place-items: center; } .play { width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(11,11,12,.75); color: var(--text); font-size: 16px; } .play.on { background: var(--text); color: var(--bg); } .beat__body { padding: 16px; display: grid; gap: 4px; } .beat__body b { font-family: var(--head); font-weight: 600; } .beat__by, .beat__meta { font-size: 13px; color: var(--mute); } .ver { color: var(--acc-t); } .beat__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-weight: 600; } .engs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1000px) { .engs { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .engs { grid-template-columns: 1fr; } } .eng { padding: 20px; display: grid; gap: 12px; } .eng__top { display: flex; gap: 12px; align-items: center; } .eng__ava { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--acc-ink); } .eng__m, .eng__g { font-size: 13px; color: var(--mute); } .eng__p { display: flex; gap: 8px; flex-wrap: wrap; } .eng__p div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 12px; color: var(--mute); } .eng__p div.on { border-color: var(--acc); } .eng__p b { display: block; color: var(--text); font-size: 14px; } .ab { display: grid; grid-template-columns: auto auto auto 1fr; gap: 6px; align-items: center; } .ab__pp { width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; background: var(--acc) !important; border-color: var(--acc) !important; color: var(--acc-ink) !important; transition: transform .15s; } .ab__pp:hover { transform: scale(1.08); } .ab__pp .ic { width: 15px; height: 15px; fill: currentColor; } .ab__wave { cursor: pointer; } .ab button { border: 1px solid var(--line); background: transparent; color: var(--mute); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; } .ab button.on { background: var(--text); color: var(--bg); border-color: var(--text); } .ab__wave { display: flex; align-items: center; justify-content: space-between; gap: 1px; height: 34px; min-width: 0; overflow: hidden; } .ab__wave i { flex: 0 1 3px; min-width: 2px; height: calc(var(--h) * .55); background: var(--s5); border-radius: 2px; transition: height .25s ease, background-color .25s; } .ab.after .ab__wave i { background: var(--acc); height: var(--h); } .ab.playing .ab__wave i { opacity: .45; } .ab.playing .ab__wave i.ab-on, .ab .ab__wave i.ab-on { opacity: 1; background: var(--text); } .ab.after .ab__wave i.ab-on { background: var(--acc); } .ab.playing .ab__wave i:not(.ab-on) { animation: abPulse 1.2s ease-in-out infinite alternate; } @keyframes abPulse { to { opacity: .7; } } .dsgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1000px) { .dsgs { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .dsgs { grid-template-columns: 1fr; } } .dsg { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 12px; } .dsg > :not(.dsg__pf) { margin: 0 6px; } .dsg__pf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .dsg__pf i { aspect-ratio: 1; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .dsg__go { align-self: flex-start; margin-top: auto; } @media (max-width: 620px) { #dsSvc { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } #dsSvc::-webkit-scrollbar { display: none; } #dsSvc button { flex: none; } } .col { display: grid; grid-template-columns: 1fr minmax(320px, 400px); gap: 40px; align-items: start; } @media (max-width: 860px) { .col { grid-template-columns: 1fr; } .col__deck { order: -1; } } .col__m { margin-top: 26px; } .col__mh { font-weight: 800; margin-bottom: 10px; } .col__mh span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 13px; } .col__ml { display: flex; flex-wrap: wrap; gap: 8px; } .col__mi { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; } .col__mi:hover { border-color: var(--acc); } .col__mi i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--acc-ink); } .col__mi .ic { width: 15px; height: 15px; color: var(--mute); } .col__deck { display: grid; justify-items: center; gap: 18px; } .deck { position: relative; width: 100%; max-width: 380px; height: 560px; perspective: 1200px; } .ak { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); touch-action: pan-y; user-select: none; cursor: grab; --yes: 0; --no: 0; } .ak--drag { cursor: grabbing; } .ak--in { animation: akIn .5s cubic-bezier(.2,.9,.3,1.15) backwards; } .ak--in-r { animation: akBackR .5s cubic-bezier(.2,.9,.3,1.1) backwards; } .ak--in-l { animation: akBackL .5s cubic-bezier(.2,.9,.3,1.1) backwards; } @keyframes akIn { from { opacity: 0; transform: translateY(26px) scale(.9); } } @keyframes akBackR { from { opacity: 0; transform: translate(120%, -30px) rotate(24deg); } } @keyframes akBackL { from { opacity: 0; transform: translate(-120%, -30px) rotate(-24deg); } } .ak__hero { position: relative; flex: 1 1 52%; min-height: 220px; display: grid; place-items: center; overflow: hidden; } .ak__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); } .ak__big { font: 800 170px/1 var(--head); color: rgba(11,11,12,.45); transform: translateY(-14px); } .ak__lvl, .ak__pos { position: absolute; top: 14px; z-index: 1; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(11,11,12,.55); color: #fff; backdrop-filter: blur(6px); } .ak__lvl { left: 14px; color: var(--acc-t); } .ak__pos { right: 14px; } .ak__name { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; color: #fff; } .ak__name b { display: block; font: 800 30px/1.05 var(--head); letter-spacing: -.02em; } .ak__name span { font-size: 14px; opacity: .85; } .ak__stamp { position: absolute; top: 26px; z-index: 2; padding: 6px 14px; border: 4px solid; border-radius: 12px; font: 900 30px/1 var(--head); font-style: normal; letter-spacing: .02em; pointer-events: none; } .ak__stamp--yes { left: 22px; color: var(--acc-t); border-color: var(--acc); transform: rotate(-14deg) scale(calc(.7 + var(--yes) * .3)); opacity: var(--yes); } .ak__stamp--no { right: 22px; color: #ff5a36; border-color: #ff5a36; transform: rotate(14deg) scale(calc(.7 + var(--no) * .3)); opacity: var(--no); } .ak__body { padding: 16px 18px 18px; display: grid; gap: 10px; } .ak__row span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .ak__row b { font-weight: 700; font-size: 15px; } .ak__tags { display: flex; flex-wrap: wrap; gap: 6px; } .ak__tags span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--s2); color: var(--t2); } .ak__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ak__stats div { background: var(--s2); border-radius: 12px; padding: 7px 10px; } .ak__stats b { display: block; font-weight: 800; } .ak__stats span { font-size: 11.5px; color: var(--mute); } .ak__demo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .ak__demo .ic { width: 14px; height: 14px; fill: currentColor; } .ak__demo.on { border-color: var(--acc); color: var(--acc-t); } .ak--end { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 30px; cursor: default; } .ak--end > div .ic { width: 46px; height: 46px; color: var(--acc-t); } .ak--end b { font: 800 22px var(--head); } .ak--end p { color: var(--mute); margin: 0 0 6px; } .deck__btns { display: flex; gap: 18px; align-items: center; } .dbtn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--s1); color: var(--text); cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .15s, box-shadow .2s; } .dbtn:hover { transform: scale(1.1); } .dbtn:active { transform: scale(.92); } .dbtn .ic { width: 26px; height: 26px; } .dbtn--undo { width: 48px; height: 48px; color: var(--mute); } .dbtn--undo .ic { width: 20px; height: 20px; } .dbtn--no { color: #ff5a36; } .dbtn--no:hover { box-shadow: 0 0 0 6px rgba(255,90,54,.15); } .dbtn--yes { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); } .dbtn--yes .ic { fill: currentColor; } .dbtn--yes:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 25%, transparent); } .deck__hint { color: var(--mute); font-size: 13px; margin: 0; } @media (max-width: 520px) { .deck { height: 520px; } .ak__big { font-size: 130px; } } .mt { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; background: rgba(5,5,6,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: amFade .25s; } .mt__in { position: relative; text-align: center; display: grid; justify-items: center; gap: 10px; } .mt__h { font: 800 clamp(44px, 8vw, 72px)/1 var(--head); color: var(--acc-t); letter-spacing: -.03em; animation: mtPop .6s cubic-bezier(.3,1.7,.5,1) both; } .mt__in > p { color: var(--t2); margin: 0 0 8px; } .mt__pair { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; } .mt__pair i { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font: 800 40px var(--head); font-style: normal; color: var(--acc-ink); box-shadow: 0 0 0 4px #0b0b0c, 0 0 0 6px var(--acc); } .mt__pair i:first-child { animation: mtL .6s cubic-bezier(.3,1.5,.5,1) .1s both; } .mt__pair i:last-child { animation: mtR .6s cubic-bezier(.3,1.5,.5,1) .1s both; } .mt__pair span { color: #ff4fa3; animation: mtBeat .9s ease-in-out .5s infinite; } .mt__pair span .ic { width: 34px; height: 34px; fill: currentColor; } .mt__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .mt__btns .ic { width: 18px; height: 18px; vertical-align: -3px; } .mt__h0, .mt__h1 { position: absolute; left: 50%; top: 44%; color: #ff4fa3; pointer-events: none; animation: mtBurst 1.1s cubic-bezier(.2,.7,.3,1) var(--d) both; } .mt__h1 { color: var(--acc-t); } .mt__h0 .ic, .mt__h1 .ic { width: 18px; height: 18px; fill: currentColor; } @keyframes mtPop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } } @keyframes mtL { from { opacity: 0; transform: translateX(-80px) rotate(-20deg); } } @keyframes mtR { from { opacity: 0; transform: translateX(80px) rotate(20deg); } } @keyframes mtBeat { 50% { transform: scale(1.25); } } @keyframes mtBurst { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-190px) scale(1.2); } } .sbtn { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 24px; transition: transform .15s; } .sbtn:hover { transform: scale(1.08); } .sbtn--yes { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); } .sbtn--no { color: var(--hot); } .mk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 22px; align-items: start; } @media (max-width: 960px) { .mk { grid-template-columns: 1fr; } } .mk__stage { position: sticky; top: 92px; padding: 18px; background: radial-gradient(circle at 50% 42%, #26262c, var(--s1) 70%); } @media (max-width: 960px) { .mk__stage { position: static; } } .mk__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .mk__fmt { font-size: 13px; color: var(--t2); font-weight: 700; } .mk__canvas { position: relative; width: min(100%, 520px); aspect-ratio: 400 / 440; margin: 14px auto 6px; user-select: none; } .mk__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 26px 34px rgba(0,0,0,.55)); } .mk__canvas svg path { transition: fill .3s; } .mk__area { position: absolute; outline: 1.5px dashed rgba(0,0,0,.35); outline-offset: 0; border-radius: 4px; overflow: hidden; touch-action: none; } .mk__area.dark { outline-color: rgba(255,255,255,.35); } .mk__l { position: absolute; cursor: grab; touch-action: none; } .mk__l:active { cursor: grabbing; } .mk__l img { display: block; width: 100%; pointer-events: none; } .mk__l.sel { outline: 1.5px solid var(--acc); outline-offset: 2px; } .mk__rh { display: none; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px #0b0b0c; cursor: nwse-resize; } .mk__l.sel .mk__rh { display: block; } .mk__area.emb .mk__l img { filter: url(#mkEmb) drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 -1px 0 rgba(255,255,255,.18)); } .mk__area.emb .mk__l::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(55deg, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,.18) 1px 2px, transparent 2px 3.5px); -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; mix-blend-mode: overlay; } .mk__warn { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #ffcf3d 14%, transparent); color: #ffcf3d; font-size: 13.5px; } .mk__hint { color: var(--mute); font-size: 12.5px; text-align: center; margin: 6px 0 0; } .mk__panel { display: grid; gap: 14px; } .mk__step { padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--s1); } .mk__h { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 12px; } .mk__h > i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); font-style: normal; font-size: 13px; } .mk__h > span { color: var(--mute); font-weight: 600; } .mk__chart { margin-left: auto; font-size: 13px; font-weight: 600; } .mk__sub { color: var(--mute); font-size: 13.5px; margin: 8px 0 0; } .mk__prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; } .mk__prods button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); color: var(--s5); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .15s, color .15s; } .mk__prods button span { color: var(--text); } .mk__prods button svg { width: 46px; height: 50px; } .mk__prods button.on { border-color: var(--acc); color: var(--acc-t); } .mk__colors { display: flex; flex-wrap: wrap; gap: 10px; } .mk__colors button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .15s; } .mk__colors button:hover { transform: scale(1.1); } .mk__colors button.on { box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--acc); } .mk__add { display: flex; flex-wrap: wrap; gap: 8px; } .mk__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s; } .mk__btn:hover { border-color: var(--acc); } .mk__btn .ic { width: 16px; height: 16px; } .mk__btn--del { color: #ff5a36; } .mk__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .mk__gallery button { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: #2a2a30; padding: 10px; cursor: pointer; display: grid; place-items: center; } .mk__gallery button:hover { border-color: var(--acc); } .mk__gallery img { width: 100%; height: 100%; object-fit: contain; } .mk__layers { display: grid; gap: 6px; margin-top: 12px; } .mk__li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .mk__li.on { border-color: var(--acc); } .mk__li img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #2a2a30; } .mk__li small { color: var(--mute); } .mk__edit { display: grid; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .mk__f { display: grid; gap: 6px; font-size: 13px; color: var(--mute); } .mk__f > span { display: flex; justify-content: space-between; gap: 10px; } .mk__f output { color: var(--text); font-weight: 700; } .mk__f input[type=range] { accent-color: var(--acc); width: 100%; } .mk__f input:not([type]) { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 15px; } .mk__fonts, .mk__inks, .mk__row { display: flex; flex-wrap: wrap; gap: 6px; } .mk__fonts button { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font-size: 14px; cursor: pointer; } .mk__fonts button.on { border-color: var(--acc); color: var(--acc-t); } .mk__inks button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .mk__inks button.on { box-shadow: 0 0 0 2px var(--s1), 0 0 0 4px var(--acc); } .mk__tech { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mk__tech button { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; cursor: pointer; } .mk__tech button span { font-size: 12.5px; color: var(--mute); } .mk__tech button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--inp)); } .mk__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .mk__sz { flex: 0 0 calc((100% - 24px) / 4); min-width: 0; } .mk__sizes.shake { animation: mkShake .5s; } @keyframes mkShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .mk__sz { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); } .mk__sz.on { border-color: var(--acc); } .mk__sz div { display: flex; align-items: center; gap: 4px; } .mk__sz button { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--s2); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; } .mk__sz span { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; } .mk__sum { padding: 16px 18px; display: grid; gap: 8px; } .mk__sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--t2); } .mk__sum > div b { color: var(--text); white-space: nowrap; } .mk__sh { font-weight: 800; color: var(--text) !important; font-size: 16px !important; } .mk__tot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px !important; } .mk__tot b { color: var(--acc-t) !important; font-size: 20px; } .mk__shop { display: grid; gap: 10px; } .mk__chk { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; } .mk__fan { display: grid; gap: 6px; font-size: 13px; color: var(--mute); max-width: 240px; } .mk__fan input { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); font: inherit; } .mk__cta { display: flex; gap: 10px; flex-wrap: wrap; } .mk__cartbox { padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 10px; } .mk__ci { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 14px; } .mk__ci i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .mk__ci b { display: block; } .mk__ci small { color: var(--mute); } .mk__cartbox .btn { justify-self: start; } .mk__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .mk__cmp { grid-template-columns: 1fr; } } .mk__cmp .card { padding: 22px; } .mk__cmp b { font: 800 22px var(--head); } .mk__cmp p { color: var(--t2); } .mk__chartc { padding: 22px; max-width: 420px; width: calc(100vw - 40px); display: grid; gap: 12px; cursor: default; } .mk__chartc table { width: 100%; border-collapse: collapse; font-size: 14px; } .mk__chartc th, .mk__chartc td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; } .mk__chartc th { color: var(--mute); font-weight: 600; font-size: 12.5px; } .mk__chartc .btn { justify-self: start; } .form--flat { padding: 0; margin: 18px 0 24px; } .form--flat .seg { justify-self: start; } .swatches { display: flex; gap: 10px; } .swatches button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); } .swatches button.on { outline: 2px solid var(--acc); outline-offset: 2px; } .docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1000px) { .docs { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .docs { grid-template-columns: 1fr; } } .tplc { padding: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; } .tplc__i { font-size: 26px; } .tplc small { color: var(--acc-t); font-size: 12px; } .tplc b { display: block; margin: 2px 0 4px; } .tplc p { margin: 0; color: var(--mute); font-size: 13.5px; } .tplc__s { font-size: 11px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; } @media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } } .kpi { padding: 18px 20px; } .kpi span { font-size: 13px; color: var(--mute); } .kpi b { display: block; font-family: var(--head); font-size: clamp(20px, 2.4vw, 28px); margin-top: 4px; } .dash { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: stretch; } .dash .chart:first-child { display: flex; flex-direction: column; } .dash .bars { flex: 1; min-height: 260px; height: auto; margin-bottom: 22px; } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } } .chart { padding: 20px; position: relative; } .chart__h { font-weight: 600; margin-bottom: 16px; } .chart__h--2 { margin-top: 24px; } .bars { display: flex; align-items: flex-end; gap: 6px; height: 260px; border-bottom: 1px solid var(--line); padding-top: 24px; } .bar-c { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; } .bar-c i { width: 100%; max-width: 34px; background: var(--acc); border-radius: 4px 4px 0 0; transition: opacity .15s; } .bars:hover .bar-c i { opacity: .45; } .bars .bar-c:hover i, .bar-c:focus i { opacity: 1; } .bar-c span { position: absolute; bottom: -22px; font-size: 11px; color: var(--mute); } .tip { position: absolute; transform: translate(-50%, -100%); background: var(--text); color: var(--bg); font-size: 12.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; } .hb { display: grid; grid-template-columns: 120px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; } .hb span { color: var(--mute); } .hb__t { height: 8px; background: var(--bg); border-radius: 9px; overflow: hidden; } .hb__t i { display: block; height: 100%; background: var(--acc); border-radius: 0 4px 4px 0; } .hb b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } .ai-tip { padding: 20px; margin-top: 14px; border-color: #34421a; background: linear-gradient(135deg, #1b2010, var(--card)); } .ai-tip p { margin: 6px 0 0; color: var(--t2); } .table-view { margin-top: 14px; color: var(--mute); font-size: 14px; } .table-view summary { cursor: pointer; } .table-view table { border-collapse: collapse; margin-top: 10px; } .table-view td, .table-view th { padding: 4px 18px 4px 0; text-align: left; border-bottom: 1px solid var(--line); } .hero--hub { padding: 56px 0 88px; } .hero--hub h1 { font-size: clamp(36px, 5.4vw, 72px); } .hero--hub .lead { margin: 20px auto 40px; max-width: 640px; } .hero--hub .tiles { position: relative; z-index: 1; } .tile { background: #111; justify-content: flex-end; isolation: isolate; } .tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s; filter: saturate(.95) brightness(.9); } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,12,0) 30%, rgba(11,11,12,.55) 62%, rgba(11,11,12,.92) 100%); } .tile:hover { background: #111; } .tile:hover .tile__img { transform: scale(1.06); filter: saturate(1.1) brightness(1); } .tile .badge { background: rgba(11,11,12,.74); } .tile__d { color: var(--t2); } .tile--big { background: #111; color: var(--text); border-color: var(--line); } .tile--big:hover { background: #111; border-color: var(--acc); } .tile--big::before { background: linear-gradient(180deg, rgba(11,11,12,0) 40%, rgba(11,11,12,.6) 70%, rgba(11,11,12,.95) 100%); } .tile--big .tile__t { color: var(--acc-t); font-size: 40px; } .tile--big .tile__d { color: var(--t2); } .tile--big .badge { background: var(--acc); color: var(--acc-ink); } .tile--big .tile__go { background: var(--acc); color: var(--acc-ink); } .tile:not(.tile--big):hover { border-color: var(--s5); } @media (max-width: 520px) { .tile--big .tile__t { font-size: 26px; } } .pg-hero__in { grid-template-columns: 1.1fr .9fr; align-items: center; } .pg-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--acc) 25%, transparent); } @media (max-width: 900px) { .pg-hero__in { grid-template-columns: 1fr; } .pg-img { order: -1; max-height: 300px; } } .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); } .bg i { position: absolute; border-radius: 50%; opacity: .75; will-change: transform; transition: background 1s; } .bg .b1 { width: 62vw; height: 62vw; left: -18vw; top: -22vw; background: radial-gradient(circle, color-mix(in srgb, var(--g1) 60%, transparent), transparent 66%); animation: drift1 14s ease-in-out infinite alternate; } .bg .b2 { width: 58vw; height: 58vw; right: -20vw; top: 6vh; background: radial-gradient(circle, color-mix(in srgb, var(--g2) 70%, transparent), transparent 66%); animation: drift2 17s ease-in-out infinite alternate; } .bg .b3 { width: 52vw; height: 52vw; left: 18vw; bottom: -26vw; background: radial-gradient(circle, color-mix(in srgb, var(--g3) 55%, transparent), transparent 66%); animation: drift3 19s ease-in-out infinite alternate; } .bg .b4 { width: 40vw; height: 40vw; right: 8vw; bottom: -12vw; background: radial-gradient(circle, color-mix(in srgb, var(--g4) 45%, transparent), transparent 66%); animation: drift4 15s ease-in-out infinite alternate; } @keyframes drift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(38vw,22vh) scale(1.3); } 100% { transform: translate(12vw,55vh) scale(.9); } } @keyframes drift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40vw,30vh) scale(1.25); } 100% { transform: translate(-15vw,-12vh) scale(1.05); } } @keyframes drift3 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30vw,-45vh) scale(1.35); } 100% { transform: translate(28vw,-25vh) scale(.95); } } @keyframes drift4 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-45vw,-25vh) scale(1.35); } 100% { transform: translate(-8vw,-55vh) scale(1); } } body { background: transparent; } html { background: var(--bg); } .hero::before, .hero::after, .pg-hero::before { display: none; } .sec--alt { background: color-mix(in srgb, var(--bg2) 55%, transparent); } .top { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .card { background-color: color-mix(in srgb, var(--card) 88%, transparent); } .tile:not(.tile--big) { background-color: #17171a; } .tile__t, .tile--sm .tile__t, .plan__n, .p b, .road b, .tool b, .beat__body b, .scard__b b, .split__title, .ai__calc-h, .once__h, .eng b, .tplc b, .kpi b, .o b, .ai__total b, .room__tag, .chart__h { font-family: var(--ui); font-weight: 800; letter-spacing: -.02em; } .tile__t { font-size: 22px; line-height: 1.1; } .tile--big .tile__t { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; font-size: 40px; } .tile__d { font-size: 14px; font-weight: 500; line-height: 1.4; } .tile--big .tile__d { font-size: 17px; } .logo { font-family: var(--head); } @media (max-width: 520px) { .tile__t { font-size: 16px; } .tile--big .tile__t { font-size: 26px; } } [data-pal="pink"] { --acc: #ff4fa3; --g1: #ff4fa3; --g2: #7b5cff; --g3: #22d3ee; --g4: #ff8a3d; } [data-pal="ocean"] { --acc: #3dd9ff; --g1: #3dd9ff; --g2: #3b5bff; --g3: #14f1b2; --g4: #8b7bff; } [data-pal="sunset"] { --acc: #ff8a1f; --g1: #ff8a1f; --g2: #ff2e63; --g3: #9b30ff; --g4: #ffd23d; } [data-pal="violet"] { --acc: #b07bff; --g1: #b07bff; --g2: #ff3dc8; --g3: #c8ff3d; --g4: #3d7bff; } .palbar { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 999px; background: rgba(11,11,12,.85); border: 1px solid var(--line); backdrop-filter: blur(10px); font-size: 13px; color: var(--mute); } .palbar button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; } .palbar button.on { border-color: #fff; } .promo { display: block; text-align: center; padding: 11px 16px; background: var(--acc); color: var(--acc-ink); font-size: 15px; font-weight: 600; } .promo u { text-underline-offset: 3px; } .top__in { display: flex; align-items: stretch; gap: 0; height: 76px; padding: 0 32px; } .top .logo { margin-right: 36px; align-self: center; font-size: 18px; } .top .logo__mark { width: 36px; height: 36px; font-size: 18px; } .top .nav { display: flex; align-items: stretch; gap: 0; margin-left: 0; font-size: 18px; font-weight: 500; color: var(--t2); } .top .nav a { display: flex; align-items: center; padding: 0 22px; position: relative; transition: color .15s; } .top .nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--acc); transform: scaleX(0); transition: transform .2s; } .top .nav a:hover { color: var(--text); } .top .nav a:hover::after { transform: scaleX(.6); opacity: .5; } .top .nav a.on { color: var(--text); } .top .nav a.on::after { transform: none; opacity: 1; } .top__cta { margin-left: auto; align-self: center; padding: 12px 22px; font-size: 15px; } @media (max-width: 1000px) { .top .nav a { padding: 0 12px; font-size: 16px; } } @media (max-width: 860px) { .top .nav { display: none; } .top__in { padding: 0 16px; height: 64px; } .promo { font-size: 13px; } } .search { position: relative; display: flex; align-items: center; max-width: 900px; margin: 0 auto 30px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 58px; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8); } .search__i { position: absolute; left: 22px; width: 24px; height: 24px; color: #8a8a92; } .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #111; font-size: 19px; padding: 14px 0; position: relative; z-index: 1; } .search__ph { position: absolute; left: 58px; right: 150px; top: 50%; transform: translateY(-50%); color: #9a9aa2; font-size: 19px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s, transform .25s; } .search__ph b { color: #7a7a82; font-weight: 700; } .search__ph.swap { opacity: 0; transform: translateY(-20%); } .search.filled .search__ph { display: none; } .search__btn { border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 18px; padding: 15px 30px; } .search__btn:hover { filter: brightness(1.08); } .browse { max-width: 900px; margin: 0 auto 56px; } .browse__h { font-weight: 800; font-size: 18px; margin: 22px 0 12px; } .browse__row { display: flex; flex-wrap: wrap; gap: 10px; } .browse__row a { border: 1.5px solid var(--s5); border-radius: 10px; padding: 6px 13px; font-size: 16px; color: var(--t2); transition: border-color .15s, color .15s, background .15s; } .browse__row a:hover { border-color: var(--acc); color: var(--acc-t); background: color-mix(in srgb, var(--acc) 8%, transparent); } .hero--hub .lead { margin-bottom: 34px; } @media (max-width: 600px) { .search { padding-left: 46px; } .search__i { left: 16px; width: 20px; } .search input, .search__ph { font-size: 16px; } .search__ph { left: 46px; right: 110px; } .search__btn { padding: 12px 18px; font-size: 15px; } .browse__row a { font-size: 14px; } } .road--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .road--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .road--4 { grid-template-columns: 1fr; } } .sec h2 + .once__grid, .sec h2 + .partners, .sec h2 + .docs { margin-top: 34px; } .tiles { grid-auto-flow: dense; } .tiles .tile--royalty.tile--big { grid-column: 3 / span 2; } @media (max-width: 900px) { .tiles .tile--royalty.tile--big { grid-column: span 2; } } .roy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .roy { grid-template-columns: 1fr; } } .roy__in, .roy__out { padding: 26px; } .roy__h { font-weight: 800; font-size: 18px; margin-bottom: 8px; display: flex; justify-content: space-between; } .roy__h output { color: var(--acc-t); } .rrow { display: grid; grid-template-columns: 1fr 150px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); } .rrow small { display: block; color: var(--mute); font-size: 12.5px; } .rrow input { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font-size: 16px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; } .rrow input:focus { outline: none; border-color: var(--acc); } .roy__share { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; } .roy__share input[type=range] { accent-color: var(--acc); width: 100%; } .roy__lbl { color: var(--mute); } .roy__big { font-family: var(--head); font-weight: 700; font-size: clamp(40px, 5vw, 64px); color: var(--acc-t); line-height: 1.1; margin: 6px 0; font-variant-numeric: tabular-nums; } .roy__sub { color: var(--mute); margin-bottom: 20px; } .roy__sub b { color: var(--text); } .roy__bars .hb { grid-template-columns: 120px 1fr 90px; } .roy > * { min-width: 0; } .roy__big, .roy__sub b, .roy__bars .hb b { overflow-wrap: anywhere; } .roy__big--long { font-size: clamp(28px, 3.2vw, 44px); } .roy__bars .hb { grid-template-columns: 120px minmax(40px, 1fr) minmax(90px, auto); } .rrow > span { min-width: 0; } .rrow input { min-width: 0; width: 100%; box-sizing: border-box; } .roy__out .btn { margin-top: 18px; } .logo img { display: block; height: auto; transition: transform .2s; } .top { position: sticky; } .top .nav { position: static; } .nav__it { display: flex; align-items: stretch; } .top .nav .nav__it > a { height: 100%; } .mega { position: absolute; left: 32px; right: 32px; top: 100%; display: grid; grid-template-columns: 1.6fr 1fr; border-radius: 0 0 24px 24px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s, transform .18s, visibility 0s .18s; z-index: 50; } .nav__it:hover .mega, .nav__it:focus-within .mega, .nav__it.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .18s .08s, transform .18s .08s, visibility 0s .08s; } .nav__it:hover > a { color: var(--text); } .mega__main { background: var(--acc); color: var(--acc-ink); padding: 40px 48px 44px; } .mega__side { background: #111113; padding: 40px 44px 44px; display: flex; flex-direction: column; gap: 14px; } .mega__h { font-family: var(--head); font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin-bottom: 18px; } .mega__side .mega__h { color: var(--text); margin-bottom: 6px; } .mega__feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: start; } .mega__feat > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); } .mega__t { font-family: var(--head); font-weight: 700; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; } .mega__feat p { margin: 14px 0 18px; font-size: 16px; line-height: 1.5; color: rgba(11,11,12,.75); } .mega__price { font-weight: 800; font-size: 17px; margin-bottom: 18px; } .mega__btn { display: inline-flex; justify-content: center; min-width: 200px; padding: 13px 26px; border-radius: 999px; background: #fff; color: #111; font-weight: 700; transition: transform .15s; } .mega__btn:hover { transform: translateY(-1px); } .mega__item { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; color: var(--text); padding: 6px; margin: 0 -6px; border-radius: 14px; transition: background .15s; } .mega__item:hover { background: var(--s2); } .mega__item img { width: 140px; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; } .mega__item b { display: block; font-weight: 800; font-size: 19px; letter-spacing: -.01em; } .mega__item small { display: block; color: var(--mute); font-size: 14px; margin-top: 4px; } .mega__more { align-self: flex-start; margin-top: 8px; border: 1.5px solid var(--t2); border-radius: 999px; padding: 9px 20px; color: var(--text); font-size: 15px; } .mega__more:hover { border-color: var(--acc); color: var(--acc-t); } .mega__strip { grid-column: 1 / -1; background: #f4f4f1; color: #111; text-align: center; padding: 18px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .top .nav .mega a::after { display: none; } .top .nav .mega a { padding: 0; display: revert; } .top .nav .mega .mega__item { display: grid; padding: 6px; } .top .nav .mega .mega__btn, .top .nav .mega .mega__more { display: inline-flex; padding: 13px 26px; } .top .nav .mega .mega__more { padding: 9px 20px; } @media (max-width: 1100px) { .mega__feat { grid-template-columns: 1fr; } .mega__feat > img { max-height: 180px; } } .cab { padding: 44px 0 96px; } .cab__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cab__title { font-size: clamp(30px, 3.6vw, 44px); } .cab__demo { font-size: 13px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .cab__tabs { display: flex; gap: 6px; margin: 26px 0 30px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .cab__tabs a { display: flex; align-items: center; gap: 9px; padding: 12px 16px; font-weight: 700; font-size: 16px; color: var(--mute); position: relative; } .cab__tabs a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cab__tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--acc); transform: scaleX(0); transition: transform .2s; } .cab__tabs a:hover { color: var(--text); } .cab__tabs a.on { color: var(--text); } .cab__tabs a.on::after { transform: none; } .cab__empty { padding: 56px 24px; text-align: center; display: grid; justify-items: center; gap: 8px; } .cab__empty-i { font-size: 46px; } .cab__empty b { font-size: 20px; } .cab__empty p { color: var(--mute); margin: 0 0 10px; } .rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .rel { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px; position: relative; align-items: center; } .rel__cover { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: conic-gradient(from 200deg, var(--acc), var(--vio), var(--hot), var(--acc)); } .rel__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rel__b { display: grid; gap: 3px; min-width: 0; } .rel__b b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rel__m { color: var(--mute); font-size: 13.5px; } .rel__del { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--mute); font-size: 20px; } .chip { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--s3); color: var(--text); } .st-review { background: color-mix(in srgb, #ffcf3d 18%, transparent); color: #ffcf3d; } .st-draft { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--t2); } .drafts { display: grid; gap: 12px; margin-bottom: 22px; } .drafts__h { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--t2); letter-spacing: .01em; } .rel--draft { border-style: dashed; } .rel--draft .rel__cover { display: grid; place-items: center; color: rgba(0,0,0,.45); } .rel--draft .rel__cover .ic { width: 40px; height: 40px; } .wiz__saved { margin: -4px 0 12px; min-height: 1.2em; font-size: 12.5px; color: var(--mute); text-align: right; } .trk__mt { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--t2); font: 600 13px/1.2 inherit; cursor: pointer; } .trk__mt .ic { width: 15px; height: 15px; } .trk__mt .ic:last-child { transition: transform .2s; } .trk__mt b { color: var(--acc-t); font-weight: 700; } .trk__mt[aria-expanded="true"] { border-color: var(--acc); } .trk__mt[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); } .trk__more { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--s3) 55%, transparent); } .trk__more[hidden] { display: none; } .trk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 760px) { .trk__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .trk__grid { grid-template-columns: 1fr; } } .trk__more .f { font-size: 12.5px; gap: 5px; align-content: start; } .trk__more .f small { font-weight: 500; color: var(--mute); } .trk__more .f input, .trk__more .f select, .trk__more .f textarea { padding: 10px 12px; font-size: 14px; font-weight: 500; } .adm__words { margin-top: 4px; font-size: 12.5px; } .adm__words summary { cursor: pointer; color: var(--acc-t); } .adm__words pre { white-space: pre-wrap; font: inherit; color: var(--t2); margin: 6px 0 0; max-height: 240px; overflow: auto; } .st-live { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc-t); } .wiz { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .wiz li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--mute); font-weight: 700; cursor: pointer; } .wiz b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: 13px; color: var(--text); flex: none; } .wiz li.on { border-color: var(--acc); color: var(--text); } .wiz li.on b { background: var(--acc); color: var(--acc-ink); } .wiz li.done b { background: color-mix(in srgb, var(--acc) 25%, var(--s3)); color: var(--acc-t); } @media (max-width: 620px) { .wiz { grid-template-columns: repeat(4, auto); } .wiz li { font-size: 0; padding: 8px; justify-content: center; } .wiz b { font-size: 13px; } } .wgrid { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; } .wgrid--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .wgrid, .wgrid--2 { grid-template-columns: 1fr; } } .wcard { padding: 24px; display: grid; gap: 14px; } .wcard__h { font-weight: 800; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .wcard__h span { color: var(--mute); font-weight: 500; font-size: 14px; } .wcard .hint { margin: -4px 0 0; } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fgrid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .fgrid, .fgrid--3 { grid-template-columns: 1fr; } } .f { display: grid; gap: 7px; font-size: 14px; font-weight: 700; color: var(--t2); } .f--2 { grid-column: span 2; } @media (max-width: 760px) { .f--2 { grid-column: auto; } } .f input, .f select, .f textarea, .trk input:not([type=checkbox]) { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; font-weight: 500; color: var(--text); width: 100%; font-family: inherit; } .f textarea { resize: vertical; } .f input:focus, .f select:focus, .f textarea:focus, .trk input:focus { outline: none; border-color: var(--acc); } .f .err, input.err, select.err { border-color: var(--hot) !important; } .f--check, .f.f--check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--t2); font-size: 14px; } .f--check input { width: 18px; height: 18px; accent-color: var(--acc); } .cover { aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; border-style: dashed; border-width: 2px; cursor: pointer; } .cover.over { border-color: var(--acc); } .cover__empty { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--mute); padding: 20px; } .cover__empty b { color: var(--text); font-size: 18px; } .cover__i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); font-size: 26px; color: var(--acc-t); } .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cover__msg { position: absolute; left: 12px; bottom: 12px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(11,11,12,.8); } .cover__msg:empty { display: none; } .ok { color: var(--acc-t); } .bad { color: var(--hot); } .trk { display: grid; grid-template-columns: 36px 1fr 28px; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; } .trk__n { width: 36px; height: 36px; border-radius: 10px; background: var(--s3); display: grid; place-items: center; font-weight: 800; } .trk--bad .trk__n { background: color-mix(in srgb, var(--hot) 25%, var(--s3)); } .trk__f { display: grid; gap: 8px; min-width: 0; } .trk__f > input { font-weight: 700 !important; } .trk__meta { font-size: 12.5px; color: var(--mute); } .trk__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; } @media (max-width: 620px) { .trk__row { grid-template-columns: 1fr; } } .trk__row input:not([type=checkbox]) { padding: 10px 12px !important; font-size: 14px !important; } .trk__x { border: 0; background: none; color: var(--mute); font-size: 22px; } .tdrop { border: 2px dashed var(--line); border-radius: 16px; padding: 28px; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--mute); transition: border-color .15s, background .15s; } .tdrop b { color: var(--text); font-size: 17px; } .tdrop.over { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, transparent); } .plats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .plat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--inp); font-weight: 700; font-size: 14.5px; cursor: pointer; } .plat.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--inp)); } .plat input { accent-color: var(--acc); width: 17px; height: 17px; } .tog { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; cursor: pointer; } .tog input { position: absolute; opacity: 0; } .tog span { width: 44px; height: 26px; border-radius: 999px; background: var(--s4); position: relative; transition: background .2s; flex: none; } .tog span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; } .tog input:checked + span { background: var(--acc); } .tog input:checked + span::after { transform: translateX(18px); } .tog input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } .review { padding: 18px; display: grid; gap: 16px; } .review__cover { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--s3); } .review__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .review__b { display: grid; gap: 6px; } .review__b b { font-size: 22px; font-weight: 800; } .review__tracks { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; } .review__tracks li span { float: right; color: var(--mute); font-variant-numeric: tabular-nums; } .review__tracks em { font-style: normal; font-size: 11px; color: var(--hot); border: 1px solid; border-radius: 4px; padding: 0 4px; margin-left: 4px; } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; } .checks li { padding-left: 28px; position: relative; } .checks li::before { position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .checks li.ok::before { content: "✓"; background: color-mix(in srgb, var(--acc) 20%, transparent); color: var(--acc-t); } .checks li.bad::before { content: "!"; background: color-mix(in srgb, var(--hot) 22%, transparent); color: var(--hot); } .checks li.warn::before { content: "!"; background: color-mix(in srgb, #ffcf3d 22%, transparent); color: #ffcf3d; } .checks li.bad { color: #ffb4a3; } .checks li.warn { color: #ffe08a; } .pay { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; font-weight: 700; } .pay b { font-family: var(--head); font-size: 28px; color: var(--acc-t); } .wnav { display: flex; align-items: center; gap: 16px; margin-top: 22px; } .wnav .btn:last-child { margin-left: auto; } .wnav__err { color: var(--hot); font-weight: 700; font-size: 14px; } .wnav__err.ok { color: var(--acc-t); } .fin { display: grid; grid-template-columns: 380px 1fr; gap: 14px; } @media (max-width: 900px) { .fin { grid-template-columns: 1fr; } } .fin__bal { padding: 26px; display: grid; gap: 10px; justify-items: start; } .fin__bal span { color: var(--mute); } .fin__bal b { font-family: var(--head); font-size: 44px; } .fin__bal .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .fin__hist { padding: 24px; } .fin__right { display: grid; gap: 14px; align-content: start; min-width: 0; } .fin__pays { padding: 24px; } .fin__pays .tx__r { display: grid; justify-items: end; gap: 6px; } .pay__note { display: block; margin-top: 2px; color: var(--t2); } .pay__card { width: min(480px, calc(100vw - 24px)); display: grid; gap: 12px; } .pay__card .cf__h { margin: 0; } .pay__card .hint { margin: 0; } .pay__amt { display: flex; gap: 12px; align-items: center; } .pay__amt input { flex: 1; min-width: 0; } .pay__seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; border-radius: 16px; } .pay__seg button { white-space: normal; line-height: 1.2; border-radius: 12px; } .pay__f { display: grid; gap: 12px; } .pay__f[hidden] { display: none; } .pay__err { margin: 0; min-height: 1.2em; color: var(--hot); font-size: 13.5px; } .pay__go { justify-self: stretch; } .adm__reply input { width: 100%; background: var(--inp); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font: inherit; } .adm__reply input:focus { outline: none; border-color: var(--acc); } .pay__sum { font-size: 26px; font-weight: 800; margin: 8px 0 -6px; font-variant-numeric: tabular-nums; } .top__login { align-self: center; margin-left: auto; margin-right: 18px; font-weight: 700; font-size: 16px; color: var(--t2); } .top__login:hover, .top__login.on { color: var(--acc-t); } .top__login + .top__cta { margin-left: 0; } @media (max-width: 860px) { .top__login { margin-right: 10px; font-size: 14px; } } .auth { padding: 48px 0 96px; } .auth__in { display: grid; grid-template-columns: 1fr 480px; gap: 18px; align-items: stretch; } @media (max-width: 900px) { .auth__in { grid-template-columns: 1fr; } .auth__art { display: none; } } .auth__art { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 520px; } .auth__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .auth__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,11,12,.92)); } .auth__art-t { position: absolute; left: 32px; right: 32px; bottom: 30px; z-index: 1; display: grid; gap: 8px; } .auth__art-t b { font-family: var(--head); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; color: var(--acc-t); } .auth__art-t span { color: var(--t2); font-size: 17px; } .auth__card { padding: 32px; display: grid; gap: 16px; align-content: start; } .auth__tabs { justify-self: start; } .auth__h { font-size: 30px; margin: 6px 0 4px; } #authForm { display: grid; gap: 14px; } .pw { position: relative; display: block; } .pw input { padding-right: 48px !important; } .pw__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; opacity: .6; } .auth__err { margin: 0; color: var(--hot); font-weight: 700; font-size: 14px; min-height: 1em; } .auth__btn { width: 100%; padding: 16px; font-size: 16px; } .auth__btn:disabled { opacity: .6; } .auth__alt { margin: 0; color: var(--mute); text-align: center; } .cab__user { display: flex; align-items: center; gap: 12px; } .cab__user b { display: block; } .cab__user small { display: block; color: var(--mute); font-size: 13px; } .cab__ava { width: 42px; height: 42px; border-radius: 12px; background: var(--vio); display: grid; place-items: center; font-weight: 800; color: #fff; } body:not(.authed) #cab .cab__tabs, body:not(.authed) #cab .cab__pane, body:not(.authed) #cab .cab__user { visibility: hidden; } .top .nav a[href="/partners/"] { color: var(--acc-t); } .top .nav a[href="/partners/"]:hover { color: var(--text); } @media (max-width: 1180px) { .top .nav a { padding: 0 14px; } } html.am-open { overflow: hidden; } .am { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; } .am__back { position: absolute; inset: 0; background: rgba(5,5,6,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: amFade .2s; } .am__card { position: relative; min-width: 0; width: 440px; max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--s1); border: 1px solid var(--line); border-radius: 28px; padding: 30px 30px 26px; display: grid; gap: 14px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9); animation: amUp .25s cubic-bezier(.2,.8,.2,1); } @keyframes amFade { from { opacity: 0; } } @keyframes amUp { from { opacity: 0; transform: translateY(16px) scale(.98); } } .am__x { position: absolute; top: 14px; right: 16px; border: 0; background: var(--s3); color: var(--text); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; } .am__logo { justify-self: center; height: 44px; width: auto; } .am__h { font-family: var(--head); font-size: 24px; text-align: center; margin: 4px 0 0; } .am__sub { margin: -6px 0 4px; text-align: center; color: var(--mute); font-size: 14.5px; } .am__vk { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-radius: 14px; background: #0077ff; color: #fff; font-weight: 800; font-size: 16px; transition: filter .15s; } .am__vk:hover { filter: brightness(1.1); } .am__vk .am__ic { background: #fff; color: #0077ff; } .am__soc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .am__soc a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--t2); transition: border-color .15s; } .am__soc a:hover { border-color: var(--s5); } .am__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; } .am__ic.ok { background: #ee8208; } .am__ic.mail { background: #005ff9; font-size: 16px; } .am__ic.ya { background: #fc3f1d; font-size: 16px; } .am__note { margin: 0; font-size: 13.5px; color: #ffe08a; text-align: center; } .am__note:empty { display: none; } .am__or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 13px; } .am__or::before, .am__or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .am__tabs { justify-self: center; } .am__form { display: grid; gap: 10px; } .am__form input:not([type=checkbox]) { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; color: var(--text); width: 100%; } .am__form input:focus { outline: none; border-color: var(--acc); } .am__form .f--check { font-size: 13px; } .am__err { margin: 0; color: var(--hot); font-weight: 700; font-size: 13.5px; } .am__err:empty { display: none; } .am__btn { width: 100%; padding: 15px; } .am__btn:disabled { opacity: .6; } .auth__art--full { min-height: 560px; } .pkinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .pkinds { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .pkinds { grid-template-columns: 1fr; } } .pk { overflow: hidden; display: grid; } .pk img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .pk b { font-weight: 800; font-size: 19px; padding: 16px 18px 2px; } .pk span { color: var(--mute); font-size: 14px; padding: 0 18px 18px; } .road--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 800px) { .road--3 { grid-template-columns: 1fr; } } .form textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; color: var(--text); font-family: inherit; resize: vertical; } .palbar { right: auto; left: 16px; } .rd { position: fixed; right: 18px; bottom: 18px; z-index: 1500; font-size: 14px; } .rd__pill { display: none; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(20,20,22,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); text-align: left; box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); max-width: 320px; } .rd--min .rd__pill { display: flex; } .rd--min .rd__panel { display: none; } .rd__pill-t { min-width: 0; display: grid; } .rd__pill-t b { font-size: 14px; } .rd__pill-t small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__eq { width: 36px; height: 36px; border-radius: 50%; background: var(--acc); display: flex; align-items: center; justify-content: center; gap: 3px; flex: none; } .rd__eq i { width: 4px; height: 14px; border-radius: 2px; background: var(--acc-ink); transform: scaleY(.4); } .rd--on .rd__eq i { animation: rdEq .9s ease-in-out infinite alternate; } .rd--on .rd__eq i:nth-child(2) { animation-delay: -.3s; } .rd--on .rd__eq i:nth-child(3) { animation-delay: -.6s; } @keyframes rdEq { to { transform: scaleY(1); } } .rd__panel { width: 360px; max-height: calc(100dvh - 140px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; border: 1px solid var(--line); background: rgba(18,18,20,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -24px rgba(0,0,0,.9); } .rd__head { display: flex; justify-content: space-between; align-items: center; } .rd__live { display: flex; align-items: center; gap: 8px; font-weight: 800; } .rd__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hot) 25%, transparent); } .rd__ic { border: 0; background: var(--s3); color: var(--text); width: 34px; height: 34px; border-radius: 50%; font-size: 14px; } .rd__now { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; } .rd__now img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--s3); } .rd__meta { min-width: 0; display: grid; gap: 2px; } .rd__meta b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__meta span { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__bar { height: 6px; border-radius: 6px; background: var(--s3); cursor: pointer; overflow: hidden; } .rd__bar i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 6px; } .rd__time { display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; margin-top: -6px; font-variant-numeric: tabular-nums; } .rd__ctl { display: flex; justify-content: center; align-items: center; gap: 18px; } .rd__play { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); font-size: 18px; font-weight: 900; } .rd__votes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .rd__votes button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font-weight: 800; transition: border-color .15s, background .15s; } .rd__votes button:hover { border-color: var(--s5); } .rd__votes button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--s2)); } .rd__votes button[data-a="dislike"].on { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 12%, var(--s2)); } .rd__tabs { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; background: var(--inp); border-radius: 12px; padding: 4px; } .rd__tabs button { border: 0; background: none; color: var(--mute); padding: 7px 4px; border-radius: 9px; font-size: 12.5px; font-weight: 700; } .rd__tabs button.on { background: var(--s3); color: var(--text); } .rd__body { overflow-y: auto; min-height: 120px; max-height: 300px; margin: 0 -6px; padding: 0 6px; } .rd__row { width: 100%; display: grid; grid-template-columns: auto 40px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; } .rd__row:hover { background: var(--s2); } .rd__row.on { background: color-mix(in srgb, var(--acc) 8%, var(--s2)); } .rd__row img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .rd__rank { width: 20px; text-align: center; font-weight: 900; color: var(--acc-t); } .rd__row:not(:has(.rd__rank)) { grid-template-columns: 40px 1fr auto; } .rd__rt { min-width: 0; display: grid; } .rd__rt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__rt small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__rm { font-size: 12px; color: var(--mute); white-space: nowrap; } .rd__empty { color: var(--mute); text-align: center; padding: 24px 10px; line-height: 1.6; } .rd__link { border: 0; background: none; color: var(--acc-t); font-weight: 700; padding: 0; text-decoration: underline; } .rd__cm-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 2px 2px 8px; font-weight: 700; } .rd__cm-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd__cms { display: grid; gap: 8px; } .rd__cm { background: var(--s2); border-radius: 12px; padding: 10px 12px; } .rd__cm-top { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rd__cm-top small { color: var(--mute); margin-left: auto; } .rd__cm p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .rd__del { border: 0; background: none; color: var(--mute); font-size: 16px; padding: 0 0 0 6px; } .rd__cf { position: sticky; bottom: 0; display: flex; gap: 8px; padding-top: 10px; background: rgba(18,18,20,.96); } .rd__cf input { flex: 1; min-width: 0; background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; color: var(--text); font-size: 14px; } .rd__cf input:focus { outline: none; border-color: var(--acc); } .rd__cf button { width: 44px; border: 0; border-radius: 12px; background: var(--acc); color: var(--acc-ink); font-size: 16px; } .rd__err { margin: 4px 0 0; color: var(--hot); font-size: 12.5px; } .rd__err:empty { display: none; } @media (max-width: 600px) { .rd { right: 10px; left: 10px; bottom: 10px; } .rd__pill { max-width: none; width: 100%; } .rd__panel { width: auto; max-height: 78dvh; } .rd__body { max-height: 34vh; } } .rd__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rd__btns { display: flex; align-items: center; gap: 14px; } .rd__vol { display: flex; align-items: center; gap: 8px; } .rd__knob { position: relative; width: 64px; height: 64px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; flex: none; } .rd__knob.drag { cursor: grabbing; } .rd__knob:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .rd__knob svg { width: 64px; height: 64px; display: block; overflow: visible; } .rd__arc, .rd__arcv { fill: none; stroke-width: 5; stroke-linecap: round; } .rd__arc { stroke: var(--s3); } .rd__arcv { stroke: var(--acc); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--acc) 60%, transparent)); } .rd__cap { fill: url(#none) var(--s3); stroke: var(--s4); stroke-width: 1.5; } .rd__knob:hover .rd__cap { stroke: var(--s5); } .rd__dot { fill: var(--acc); } .rd__vtxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--text); pointer-events: none; font-variant-numeric: tabular-nums; } .rd__knob.mute .rd__vtxt { color: var(--hot); } .rd__knob.mute .rd__vtxt::after { content: ""; } .rd__hb { display: flex; gap: 6px; align-items: center; } .rd__ic--txt { width: auto; padding: 0 12px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; border-radius: 999px; height: 34px; } .rd__badge { justify-self: start; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--acc-ink); background: var(--hot); color: #fff; padding: 2px 7px; border-radius: 6px; margin-bottom: 2px; } .rd__golive { border: 1px dashed var(--hot); background: none; color: var(--hot); border-radius: 12px; padding: 8px; font-weight: 800; } .rd__sub { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); padding: 8px 8px 4px; } .rd__row .rd__rank { width: auto; min-width: 20px; font-size: 11.5px; } .rp { padding: 44px 0 96px; } .rp__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; } .rp__head .lead { margin: 14px 0 0; } .rp__live { display: inline-flex; align-items: center; gap: 8px; color: var(--hot); } .rp__live i { width: 9px; height: 9px; border-radius: 50%; background: var(--hot); animation: pulse 1.6s infinite; } .rp__tune { padding: 16px 28px; font-size: 16px; } .rp__grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; } @media (max-width: 1100px) { .rp__grid { grid-template-columns: 1fr; } } .rp__feed { display: grid; gap: 34px; } .sc { display: grid; gap: 14px; } .sc__top { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 17px; } .sc__top b { color: var(--text); } .sc__live { font-size: 11px; font-weight: 900; color: #fff; background: #c4321b; padding: 3px 8px; border-radius: 6px; letter-spacing: .08em; } .rp__ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; font-size: 16px; } .rp__ava--me { width: 40px; height: 40px; font-size: 15px; background: #333; } .rp__ava--pin { width: 18px; height: 18px; font-size: 9px; border: 1.5px solid #111; } .sc__in { display: grid; grid-template-columns: 190px 1fr; gap: 22px; } @media (max-width: 700px) { .sc__in { grid-template-columns: 1fr; } .sc__cover { max-width: 160px; } } .sc__cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } .sc__main { min-width: 0; display: grid; gap: 12px; align-content: start; } .sc__row { display: flex; align-items: center; gap: 14px; } .sc__play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 20px; flex: none; transition: transform .15s; } .sc__play:hover { transform: scale(1.05); } .sc--on .sc__play { background: var(--acc); } .sc__meta { min-width: 0; display: grid; } .sc__meta span { color: var(--mute); font-weight: 700; } .sc__meta b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc__tag { margin-left: auto; background: var(--s3); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; } .sc__wave { position: relative; height: 92px; cursor: pointer; } .sc__bars { position: absolute; inset: 0 0 18px 0; display: flex; align-items: center; gap: 2px; } .sc__bars i { flex: 1; background: var(--wv); border-radius: 1px; min-height: 2px; transition: background .1s; } .sc__wave:hover .sc__bars i { background: var(--wv2); } .sc__bars i.sc-done { background: var(--acc) !important; } .sc__wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: var(--s5); } .sc__pins { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; } .sc__pin { position: absolute; bottom: 0; transform: translateX(-50%); } .sc__bub { position: absolute; bottom: 24px; left: 50%; transform: translateX(-20%); width: max-content; max-width: min(260px, 70vw); background: #fff; color: #111; font-size: 12.5px; padding: 7px 10px; border-radius: 10px; pointer-events: none; z-index: 2; line-height: 1.4; display: none; } .sc__pin:hover .sc__bub, .sc__pin:focus-within .sc__bub { display: block; } .sc__dur { position: absolute; right: 0; bottom: 22px; background: rgba(0,0,0,.8); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; } .sc__form { display: flex; gap: 12px; align-items: center; } .sc__form input { flex: 1; min-width: 0; background: var(--s3); border: 1px solid transparent; border-radius: 6px; padding: 15px 18px; font-size: 16px; color: var(--text); } .sc__form input:focus { outline: none; border-color: var(--acc); } .sc__form button { width: 64px; height: 52px; border: 0; border-radius: 6px; background: var(--s3); display: grid; place-items: center; } .sc__form button svg { width: 22px; height: 22px; fill: none; stroke: #aaa; stroke-width: 1.8; stroke-linejoin: round; } .sc__form button:hover svg { stroke: var(--acc); } .sc__err { margin: -4px 0 0; color: var(--hot); font-size: 13px; } .sc__err:empty { display: none; } .sc__acts { display: flex; gap: 12px; flex-wrap: wrap; } .sc__acts button { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 6px; border: 0; background: var(--s3); color: var(--text); font-size: 16px; font-weight: 800; } .sc__acts button:hover { background: var(--s4); } .sc__acts button.on { background: color-mix(in srgb, var(--acc) 16%, var(--s3)); color: var(--acc-t); } .sc__acts button.on.dis { background: color-mix(in srgb, var(--hot) 18%, var(--s3)); color: #ff9c86; } .sc__cms { display: grid; gap: 8px; } .rp__charts { padding: 20px; position: sticky; top: 96px; display: grid; gap: 12px; } .rp__ch-h { font-family: var(--head); font-size: 22px; font-weight: 700; } .rp__tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; } .rp__tabs button { font-size: 13px; padding: 8px 6px; border-radius: 10px; } .rp__ci { width: 100%; display: grid; grid-template-columns: 28px 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; } .rp__ci:hover { background: var(--s2); } .rp__ci.on { background: color-mix(in srgb, var(--acc) 10%, var(--s2)); } .rp__ci img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; } .rp__pos { font-family: var(--head); font-size: 17px; font-weight: 700; text-align: center; color: var(--acc-t); } .sc__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-page="admin"] .rd, body[data-page="admin"] .promo, body[data-page="admin"] .foot { display: none; } .adm { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 77px); } @media (max-width: 900px) { .adm { grid-template-columns: 1fr; } } .adm__nav { position: sticky; top: 77px; align-self: start; height: calc(100vh - 77px); overflow-y: auto; border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; background: rgba(11,11,12,.6); } @media (max-width: 900px) { .adm__nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } .adm__brand, .adm__me { display: none; } } .adm__brand { font-family: var(--head); font-size: 20px; font-weight: 700; padding: 0 10px 14px; } .adm__nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--t2); font-weight: 700; font-size: 15px; } .adm__nav a:hover { background: var(--s2); color: var(--text); } .adm__nav a.on { background: color-mix(in srgb, var(--acc) 12%, var(--s2)); color: var(--acc-t); } .adm__nav a b { margin-left: auto; background: var(--hot); color: #fff; font-size: 12px; min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px; } .adm__nav a b:empty, .adm__nav a b[hidden] { display: none; } .adm__me { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line); display: grid; } .adm__me small { color: var(--mute); } .adm__main { padding: 30px 32px 80px; min-width: 0; } @media (max-width: 700px) { .adm__main { padding: 20px 16px 60px; } } .adm__head { margin-bottom: 18px; } .adm__head h1 { font-size: 32px; } .adm__head p { color: var(--mute); margin: 6px 0 0; } .adm__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } .adm__search { flex: 0 1 340px; min-width: 200px; background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; color: var(--text); font-size: 15px; } .adm__search:focus, .adm__sel:focus { outline: none; border-color: var(--acc); } .adm__sel { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 14px; max-width: 260px; } .adm__sp { flex: 1; } .adm__t { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14px; } .adm__t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--s1); white-space: nowrap; } .adm__t td { padding: 11px 14px; border-bottom: 1px solid var(--s2); vertical-align: middle; overflow-wrap: anywhere; } .adm__t td small { display: block; color: var(--mute); font-size: 12.5px; } .adm__t tbody tr { cursor: pointer; transition: background .1s; } .adm__t--plain tbody tr { cursor: default; } .adm__t tbody tr:hover { background: var(--s2); } .adm__t tbody tr:last-child td { border-bottom: 0; } @media (max-width: 900px) { .adm__t { display: block; overflow-x: auto; white-space: nowrap; } } .adm__cv { display: block; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: conic-gradient(from 200deg, var(--acc), var(--vio), var(--hot), var(--acc)); } .adm__cv img { width: 100%; height: 100%; object-fit: cover; display: block; } .st-ok { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc-t); } .st-bad { background: color-mix(in srgb, var(--hot) 18%, transparent); color: #ff9c86; } .st-work { background: color-mix(in srgb, #3da5ff 18%, transparent); color: #7cc2ff; } .adm__todo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } @media (max-width: 800px) { .adm__todo { grid-template-columns: 1fr; } } .adm__todo a { padding: 18px 20px; display: flex; align-items: baseline; gap: 12px; } .adm__todo b { font-family: var(--head); font-size: 34px; } .adm__todo span { color: var(--mute); } .adm__todo a.hot { border-color: var(--hot); } .adm__todo a.hot b { color: var(--hot); } .adm__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } @media (max-width: 1000px) { .adm__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .adm__kpis .kpi b { font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .adm__kpis .kpi small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; } .adm__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1000px) { .adm__two { grid-template-columns: minmax(0, 1fr); } } .adm__box { padding: 20px; } .adm__bh { font-weight: 800; font-size: 16px; margin: 18px 0 10px; } .adm__box .adm__bh { margin-top: 0; } .adm__bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; } .adm__bars div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; } .adm__bars i { width: 100%; background: var(--acc); border-radius: 4px 4px 0 0; min-height: 2px; } .adm__bars span { font-size: 11px; color: var(--mute); } .adm__ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--s2); } .adm__ev small { display: block; color: var(--mute); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .adm__ev time, .adm__li time { color: var(--mute); font-size: 12px; white-space: nowrap; } .adm__drawer { position: fixed; inset: 0; z-index: 2500; } .adm__dback { position: absolute; inset: 0; background: rgba(5,5,6,.6); } .adm__dpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; background: var(--s1); border-left: 1px solid var(--line); padding: 28px; overflow-y: auto; animation: admIn .2s ease-out; } @keyframes admIn { from { transform: translateX(30px); opacity: 0; } } .adm__dpanel h2 { font-size: 24px; margin: 6px 0 4px; } .adm__dh { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; padding-right: 40px; } .adm__dh p { color: var(--mute); margin: 0 0 6px; } .adm__dcv { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; flex: none; } .adm__dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 16px 0; font-size: 14px; } .adm__dl dt { color: var(--mute); } .adm__dl dd { margin: 0; word-break: break-word; } .adm__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .adm__acts--big { margin: 14px 0; } .adm__bad { background: var(--hot); color: #fff; } .adm__badtxt { color: #ff9c86 !important; } .adm__mini { border: 1px solid var(--line); background: var(--s2); color: var(--text); border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 700; } .adm__mini:hover { border-color: var(--s5); } .adm__mini.bad { color: #ff9c86; } .adm__inline { display: flex; gap: 8px; } .adm__inline input { flex: 1; background: var(--inp); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); } .adm__li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--s2); font-size: 14px; } .adm__li small { color: var(--mute); } .adm__msg { background: var(--inp); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; margin: 0; } .adm__ta, .adm__dpanel textarea { width: 100%; background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; color: var(--text); font-family: inherit; font-size: 14px; resize: vertical; } .adm__form { padding: 22px; display: grid; gap: 14px; max-width: 720px; margin-bottom: 14px; } .adm__form--flat { padding: 0; margin-top: 14px; } .adm__form .adm__bh { margin: 0; } .adm__prev .promo { border-radius: 10px; } .adm__oauth { display: grid; gap: 10px; } .adm__oauth div { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .adm__form code { background: var(--inp); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; word-break: break-all; } .adm__cms { display: grid; gap: 10px; } .adm__cm { padding: 14px 16px; } .adm__cm-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; } .adm__cm-h b { cursor: pointer; } .adm__cm-h small, .adm__cm-h span { color: var(--mute); } .adm__cm-h time { margin-left: auto; color: var(--mute); font-size: 12px; } .adm__cm p { margin: 8px 0 0; white-space: pre-wrap; } .adm__toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3500; background: var(--acc); color: var(--acc-ink); font-weight: 800; padding: 12px 20px; border-radius: 999px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); } .adm__toast.bad { background: var(--hot); color: #fff; } .top__admin { align-self: center; margin-right: 14px; font-weight: 800; font-size: 14px; color: var(--hot); border: 1px solid color-mix(in srgb, var(--hot) 50%, transparent); padding: 6px 12px; border-radius: 999px; } .st-bad, .chip.st-bad { } .rel__note { font-size: 12.5px; color: #ffb4a3; background: color-mix(in srgb, var(--hot) 10%, transparent); border-radius: 8px; padding: 6px 8px; margin-top: 4px; } .rd__meta .rd__badge { color: #fff; font-size: 10.5px; } .art-link { color: inherit; } .art-link:hover { color: var(--acc-t); text-decoration: underline; } .ch, .ar { padding: 44px 0 96px; } .ch__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .ch__head .lead { margin: 14px 0 0; } .ch__tabs { margin-bottom: 18px; } .ch__list { display: grid; gap: 4px; } .cr { display: grid; grid-template-columns: 44px 64px 1fr auto; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 16px; transition: background .12s; } .cr:hover { background: rgba(255,255,255,.04); } .cr.on { background: color-mix(in srgb, var(--acc) 9%, transparent); } .cr__pos { font-family: var(--head); font-size: 22px; font-weight: 700; text-align: center; color: var(--acc-t); } .cr__cover { position: relative; width: 64px; height: 64px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: #222; } .cr__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .cr__cover span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; opacity: 0; transition: opacity .15s; } .cr:hover .cr__cover span, .cr.on .cr__cover span { opacity: 1; } .cr__t { min-width: 0; display: grid; gap: 2px; } .cr__t b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr__t span { color: var(--mute); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr__acts { display: flex; gap: 6px; align-items: center; } .cr__acts button, .cr__cm, .cr__ext { border: 0; background: var(--s2); color: var(--text); border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 14px; white-space: nowrap; } .cr__acts button:hover, .cr__cm:hover, .cr__ext:hover { background: var(--s3); } .cr__acts button.on { background: color-mix(in srgb, var(--acc) 16%, var(--s2)); color: var(--acc-t); } .cr__acts button.on.dis { background: color-mix(in srgb, var(--hot) 18%, var(--s2)); color: #ff9c86; } @media (max-width: 700px) { .cr { grid-template-columns: 30px 52px 1fr; } .cr__cover { width: 52px; height: 52px; } .cr__acts { grid-column: 2 / -1; } .cr__ext { display: none; } } .ar { padding-top: 0; } .ar__hero { position: relative; overflow: hidden; padding: 64px 0 40px; margin-bottom: 24px; } .ar__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(50px) brightness(.45) saturate(1.2); transform: scale(1.1); } .ar__in { position: relative; display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; } .ar__ava { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); } .ar__in h1 { font-size: clamp(36px, 6vw, 76px); } .ar__btns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .ar__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 800px) { .ar__stats { grid-template-columns: 1fr 1fr; } .ar__ava { width: 140px; height: 140px; } } .ar__h { font-size: 26px; margin: 34px 0 14px; } .shelf { margin-top: 34px; } .shelf__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; } .shelf__h h2 { font-family: var(--body); font-weight: 800; font-size: 26px; letter-spacing: -.01em; } .shelf__row { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 22px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scrollbar-width: thin; touch-action: pan-x pan-y; } .shelf__row--all { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: visible; } .pl { border: 0; background: none; color: var(--text); text-align: left; padding: 10px; margin: -10px; border-radius: 12px; display: grid; gap: 6px; align-content: start; transition: background .15s; } .pl:hover { background: rgba(255,255,255,.06); } .pl__art { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; padding: 16px 14px; display: flex; flex-direction: column; box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); } .pl__art b { font-family: var(--body); font-weight: 800; font-size: 25px; line-height: 1.08; color: #fff; margin-top: 18px; } .pl__art i { font-style: normal; font-weight: 800; font-size: 25px; line-height: 1.08; color: rgba(255,255,255,.62); } .pl__logo { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; } .pl__lab { margin-top: auto; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: #fff; } .pl__lab em { font-style: normal; width: 28px; height: 28px; background: #fff; color: #111; display: grid; place-items: center; font-weight: 900; } .pl__art--50 { align-items: center; justify-content: center; text-align: center; } .pl__art--50 b { margin: 0; font-size: 30px; } .pl__art--50 hr { width: 50%; border: 0; border-top: 1px solid rgba(255,255,255,.3); margin: 12px 0; } .pl__art--50 i { font-size: 11px; letter-spacing: .25em; color: rgba(255,255,255,.85); } .pl__t { font-weight: 700; font-size: 16px; margin-top: 4px; } .pl__d { color: var(--mute); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl__hero { display: flex; gap: 28px; align-items: flex-end; padding: 34px; border-radius: 20px; margin: 18px 0 22px; position: relative; overflow: hidden; } .pl__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); pointer-events: none; } .pl__hero > * { position: relative; z-index: 1; } .pl__heroart { width: 200px; height: 200px; flex: none; border-radius: 10px; position: relative; padding: 18px; display: flex; align-items: flex-end; box-shadow: 0 20px 50px -14px rgba(0,0,0,.8); filter: brightness(1.1); } .pl__heroart b { font-weight: 800; font-size: 24px; color: #fff; line-height: 1.1; } .pl__kind { font-weight: 700; font-size: 14px; } .pl__hero h1 { font-family: var(--body); font-weight: 900; font-size: clamp(32px, 5vw, 64px); margin: 6px 0; letter-spacing: -.02em; } .pl__hero p { margin: 0 0 6px; color: rgba(255,255,255,.85); } .pl__hero small { color: rgba(255,255,255,.75); font-weight: 700; } .pl__play { display: grid; margin-top: 16px; background: var(--acc); } @media (max-width: 700px) { .pl__hero { flex-direction: column; align-items: flex-start; padding: 22px; } .pl__heroart { width: 140px; height: 140px; } .shelf__row { grid-auto-columns: 160px; gap: 14px; } .pl__art b, .pl__art i { font-size: 19px; } } .top .nav a, .top__cta, .top__login, .top__admin { white-space: nowrap; } .top .nav { font-size: 16px; } .top .nav a { padding: 0 13px; } .top .logo { margin-right: 20px; } @media (max-width: 1360px) { .top .nav { font-size: 15px; } .top .nav a { padding: 0 9px; } .top__in { padding: 0 20px; } .top__cta { padding: 11px 16px; font-size: 14px; } } @media (max-width: 1180px) { .top .nav a { padding: 0 7px; font-size: 14px; } .top .logo img { width: 78px; height: auto; } } @media (max-width: 1060px) { .top .nav { display: none; } } .rp__switch { margin: 0 0 26px; } .rp__switch button { font-size: 16px; padding: 10px 22px; font-weight: 700; } #rpCharts .shelf:first-child { margin-top: 0; } .adm__grp { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #6e6e78; padding: 14px 12px 4px; } @media (max-width: 900px) { .adm__grp { display: none; } } .adm__grant { max-width: 900px; } .adm__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } .adm__preset { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--inp); cursor: pointer; } .adm__preset:has(input:checked) { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--inp)); } .adm__preset input { accent-color: var(--acc); margin-top: 3px; } .adm__preset b { display: block; font-size: 14.5px; } .adm__preset small { color: var(--mute); font-size: 12.5px; } .adm__perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); } .adm__perms.off { opacity: .4; } .adm__perms .f--check { font-size: 14px; } .adm__pick { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); } .adm__seo { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; } @media (max-width: 600px) { .adm__seo { grid-template-columns: 1fr; } } .adm__seoi { padding: 18px; display: grid; gap: 10px; } .adm__seoh { display: flex; gap: 10px; align-items: center; } .adm__seoh code { color: var(--mute); font-size: 12.5px; } .adm__seoh .chip { margin-left: auto; } .adm__seoi .f small { color: var(--mute); font-weight: 500; margin-left: 6px; } .adm__seoi .f small.bad { color: var(--hot); } .adm__seoi textarea { width: 100%; background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; color: var(--text); font-family: inherit; font-size: 14px; resize: vertical; } .adm__snip { background: #fff; border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; font-family: Arial, sans-serif; } .adm__snip-u { color: #202124; font-size: 12px; } .adm__snip-t { color: #1a0dab; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm__snip-d { color: #4d5156; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cover__msg a { color: inherit; text-decoration: underline; } .cover__msg.warn { color: #ffe08a; } .cover__msg { max-width: calc(100% - 24px); } .top__bal { align-self: center; display: flex; align-items: center; gap: 7px; margin-right: 12px; padding: 7px 8px 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--pill); color: var(--text); font-weight: 800; font-size: 14px; white-space: nowrap; } .top__bal:hover { border-color: var(--acc); } .top__bal i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; font-size: 15px; } @media (max-width: 1360px) { .top__bal span { display: none; } } .tp__bal { display: flex; justify-content: space-between; align-items: baseline; background: var(--inp); border-radius: 14px; padding: 12px 14px; color: var(--mute); } .tp__bal b { color: var(--text); font-size: 20px; } .tp__sums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tp__sums button { border: 1px solid var(--line); background: var(--s2); color: var(--text); border-radius: 14px; padding: 14px 8px; font-weight: 800; font-size: 16px; display: grid; gap: 2px; } .tp__sums button small { font-size: 11px; color: var(--acc-t); font-weight: 700; } .tp__sums button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--s2)); } .tp__own { display: grid; gap: 6px; font-size: 13px; color: var(--mute); } .tp__own input { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); font-size: 16px; } .tp__own input:focus { outline: none; border-color: var(--acc); } .tp__test { color: var(--mute); text-align: center; font-size: 12px; } .tp__test:empty { display: none; } .tx { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .tx small { display: block; color: var(--mute); font-size: 12.5px; } .tx__r { text-align: right; white-space: nowrap; } .tx__r b.ok { color: var(--acc-t); } #payBal .link, .wnav__err .link { color: var(--acc-t); } .top__in > .nav { margin-right: auto; } .top__login { margin-left: 0; } .cf { z-index: 4000; } .cf__card { width: 400px; text-align: center; gap: 10px; padding: 30px 28px 24px; } .cf__ic { justify-self: center; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--s3); } .cf__ic.bad { background: color-mix(in srgb, var(--hot) 18%, var(--s2)); } .cf__h { font-family: var(--body); font-weight: 800; font-size: 21px; margin: 6px 0 0; } .cf__p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.5; } .cf__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .cf__btns .btn { width: 100%; padding: 14px; } .cf__danger { background: var(--hot); color: #fff; } .cf__danger:hover { box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--hot) 70%, transparent); } .fin { grid-template-columns: 420px 1fr; align-items: start; } @media (max-width: 960px) { .fin { grid-template-columns: 1fr; } } .fin__left { display: grid; gap: 14px; } .bcard { position: relative; aspect-ratio: 1.586; border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; overflow: hidden; color: #0b0b0c; background: radial-gradient(120% 140% at 0% 0%, #e4ff8a 0%, var(--acc) 35%, #8bd14a 60%, #7b6cff 100%); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--acc) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.5); } .bcard::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px); pointer-events: none; } .bcard::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); } .bcard > * { position: relative; z-index: 1; } .bcard__top { display: flex; justify-content: space-between; align-items: center; } .bcard__top img { height: 32px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); } .bcard__chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f6e7a8, #c9a84f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .bcard__lbl { margin-top: auto; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; } .bcard__sum { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; line-height: 1; margin: 4px 0 14px; font-size: clamp(26px, calc(560px / (var(--len, 5) + 2.2)), 64px); } .bcard__sum b { font-family: var(--head); font-weight: 700; letter-spacing: -.02em; font-size: 1em; } .bcard__sum i { font-style: normal; font-weight: 800; font-size: .55em; opacity: .8; } .bcard__bottom { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; opacity: .75; } .fin__act { padding: 20px; display: grid; gap: 14px; } .fin__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fin__quick button { border: 1px solid var(--line); background: var(--s2); color: var(--text); border-radius: 12px; padding: 11px 6px; font-weight: 800; font-size: 14px; transition: border-color .15s; } .fin__quick button:hover { border-color: var(--acc); color: var(--acc-t); } .fin__btn { width: 100%; padding: 15px; } .fin__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fin__stats div { background: var(--inp); border-radius: 12px; padding: 10px 12px; } .fin__stats span { display: block; color: var(--mute); font-size: 12px; } .fin__stats b { font-size: 14.5px; white-space: nowrap; } .fin__act .hint { margin: 0; } .rel { cursor: pointer; transition: border-color .15s, transform .15s; } .rel:hover { border-color: var(--s5); transform: translateY(-2px); } .rv__card { width: 520px; gap: 12px; } .rv__top { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; padding-right: 36px; } .rv__cover { width: 140px; height: 140px; border-radius: 14px; overflow: hidden; background: conic-gradient(from 200deg, var(--acc), var(--vio), var(--hot), var(--acc)); } .rv__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rv__meta { display: grid; gap: 4px; min-width: 0; } .rv__meta h2 { font-family: var(--body); font-weight: 800; font-size: 24px; margin: 4px 0 0; word-break: break-word; } .rv__meta p { margin: 0; color: var(--t2); } .rv__meta small { color: var(--mute); } .rv__h { font-weight: 800; margin-top: 6px; } .rv__plats { display: flex; flex-wrap: wrap; gap: 6px; } .rv__plats span { background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; } .rv__wd { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; } .rv__wd .hint { margin: 0; } .rv__wdbtn { background: var(--hot); color: #fff; } @media (max-width: 520px) { .rv__top { grid-template-columns: 1fr; } } .cab { padding-top: 0; } .cab__bar { position: sticky; top: 77px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 calc(50% - 50vw) 26px; padding: 0 max(24px, calc(50vw - 576px)); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .cab__bar .cab__tabs { margin: 0; border: 0; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cab__bar .cab__tabs a { padding: 20px 14px; white-space: nowrap; font-size: 15.5px; } .cab__bar .cab__tabs a::after { bottom: 0; } .cab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); margin-left: -4px; align-self: flex-start; margin-top: -6px; } .cab__me { position: relative; flex: none; } .cab__me .cab__user { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); text-align: left; padding: 8px 6px; border-radius: 14px; } .cab__me .cab__user:hover { background: var(--s2); } .cab__me .cab__user small { color: var(--mute); font-size: 12.5px; display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cab__me .cab__user i { font-style: normal; color: var(--mute); font-size: 12px; } .cab__menu { position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; padding: 6px; display: grid; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); } .cab__menu a, .cab__menu button { text-align: left; border: 0; background: none; color: var(--text); padding: 11px 12px; border-radius: 10px; font-weight: 700; font-size: 14.5px; } .cab__menu a:hover, .cab__menu button:hover { background: var(--s3); } .cab__menu button { color: #ff9c86; } @media (max-width: 1100px) { .cab__me .cab__user span { display: none; } } @media (max-width: 760px) { .cab__bar { top: 64px; } } .cab__title { margin: 6px 0 22px; font-size: clamp(30px, 3.6vw, 44px); } .st__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .st__grid { grid-template-columns: 1fr; } } .st__grid .adm__box:first-child { grid-column: 1 / -1; } .st__wait { text-align: center; padding: 30px 10px; display: grid; justify-items: center; gap: 8px; color: var(--mute); } .st__wait b { color: var(--text); font-size: 18px; } .st__wait p { margin: 0 0 6px; max-width: 460px; } .st__ic { font-size: 40px; } .sl__sub { margin: -8px 0 20px; } .sl { display: grid; gap: 10px; } .sl__i { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 14px; align-items: center; } .sl__i .rel__cover { width: 72px; height: 72px; } .sl__b { display: grid; gap: 6px; min-width: 0; } .sl__b small { color: var(--mute); } .sl__url { display: flex; gap: 8px; flex-wrap: wrap; } .sl__url input { flex: 1; min-width: 200px; background: var(--inp); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; } .sp { display: grid; grid-template-columns: 420px 1fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .sp { grid-template-columns: 1fr; } } .sp__form { padding: 22px; display: grid; gap: 12px; } .sp__list { display: grid; gap: 10px; } .sp__t { padding: 16px 18px; } .sp__t p { margin: 8px 0 0; white-space: pre-wrap; } .sp__th { display: flex; gap: 10px; align-items: center; } .sp__th time { margin-left: auto; color: var(--mute); font-size: 12.5px; } .sp__ans { margin-top: 12px; background: color-mix(in srgb, var(--acc) 8%, var(--inp)); border-left: 3px solid var(--acc); border-radius: 10px; padding: 10px 14px; } .sp__ans b { color: var(--acc-t); font-size: 13px; } .sp__ans p { margin: 4px 0 0; white-space: pre-wrap; } .sp__faq { padding: 16px 18px; } .sp__faq summary { font-weight: 800; cursor: pointer; } .sp__faq p { color: var(--t2); margin: 10px 0 0; font-size: 14.5px; } .adm__reply { display: grid; gap: 8px; margin-top: 12px; } .adm__reply textarea { width: 100%; background: var(--inp); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font-family: inherit; resize: vertical; } .pf { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .pf { grid-template-columns: minmax(0, 1fr); } } .pf__card { padding: 24px; display: grid; gap: 14px; } .pf__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; } .pf__row b { display: block; font-size: 16px; } .pf__row small { color: var(--mute); } .pf__row > span { font-weight: 800; font-size: 16px; } .pf__inline { display: flex; gap: 8px; min-width: 0; max-width: 100%; } .pf__inline input { background: var(--inp); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font-weight: 700; width: 220px; min-width: 0; flex: 0 1 220px; } .am__err.ok { color: var(--acc-t); } body[data-page="link"] .promo, body[data-page="link"] .foot { display: none; } .lk { position: relative; min-height: calc(100vh - 77px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 40px 16px; overflow: hidden; } .lk__bg { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(60px) brightness(.45) saturate(1.3); transform: scale(1.1); } .lk__card { position: relative; width: 420px; max-width: 100%; padding: 26px; display: grid; gap: 10px; text-align: center; background: rgba(18,18,20,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .lk__cover { width: 220px; height: 220px; justify-self: center; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); background: #222; } .lk__cover img { width: 100%; height: 100%; object-fit: cover; } .lk__card h1 { font-family: var(--body); font-weight: 900; font-size: 28px; margin: 10px 0 0; } .lk__card > p { margin: 0; color: var(--t2); } .lk__soon { justify-self: center; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-t); font-weight: 800; padding: 5px 12px; border-radius: 999px; font-size: 13px; } .lk__list { display: grid; gap: 8px; margin-top: 10px; } .lk__list a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); color: var(--text); text-align: left; transition: border-color .15s, transform .15s; } .lk__list a:hover { border-color: var(--acc); transform: translateY(-1px); } .lk__dot { width: 12px; height: 12px; border-radius: 50%; } .lk__list b { flex: 1; } .lk__list i { font-style: normal; font-weight: 800; font-size: 13px; background: var(--text); color: var(--bg); padding: 6px 12px; border-radius: 999px; } .lk__by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--mute); font-size: 13px; } :root[data-theme="light"] { --acc-t: color-mix(in srgb, var(--acc) 45%, #000); --bg: #f4f4f1; --bg2: #ebebe6; --card: #ffffff; --line: #e1e1db; --text: #111113; --mute: #6b6b74; --inp: #f6f6f3; --s1: #ffffff; --s2: #f1f1ec; --s3: #e7e7e1; --s4: #d6d6cf; --s5: #b9b9b2; --wv: #9a9aa2; --wv2: #7a7a82; --t2: #3a3a40; --acc-ink: #0b0b0c; --glass: rgba(255,255,255,.86); --pill: #ffffff; } :root[data-theme="light"] .top, :root[data-theme="light"] .cab__bar { background: var(--glass); } :root[data-theme="light"] .bg i { opacity: .35; } :root[data-theme="light"] .tiles-dark { filter: none; } :root[data-theme="light"] .sc__play { background: #111; color: #fff; } :root[data-theme="light"] .am__back, :root[data-theme="light"] .adm__dback { background: rgba(240,240,236,.7); } :root[data-theme="light"] .rd__panel, :root[data-theme="light"] .rd__pill { background: rgba(255,255,255,.95); } :root[data-theme="light"] .rd__cf { background: rgba(255,255,255,.96); } :root[data-theme="light"] .tile::before { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.85) 100%); } :root[data-theme="light"] .tile, :root[data-theme="light"] .tile--big { color: #fff; } :root[data-theme="light"] .lk__card { background: rgba(255,255,255,.85); } :root[data-theme="light"] .cr:hover { background: rgba(0,0,0,.04); } .cab__new { flex: none; margin-left: auto; } .cab__new.on { box-shadow: 0 0 0 2px var(--text); } .cab__menu { display: none; width: 290px; gap: 2px; } .cab__me:hover .cab__menu, .cab__me:focus-within .cab__menu, .cab__me.open .cab__menu { display: grid; } .cab__me::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } .cm__head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .cm__head b { display: block; } .cm__head small { color: var(--mute); font-size: 12.5px; word-break: break-all; } .cm__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-weight: 700; font-size: 14px; } .cm__seg { padding: 3px; } .cm__seg button { padding: 5px 11px; font-size: 13px; } .cab__menu .cm__out { color: #ff9c86; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; } .cab__menu #cmSwitch { color: var(--text); } .pr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .pr { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pr { grid-template-columns: 1fr; } } .pr__c { padding: 20px; display: grid; gap: 8px; align-content: start; } .pr__c b { font-size: 17px; } .pr__c p { margin: 0 0 6px; color: var(--mute); font-size: 14px; } .pr__i { font-size: 30px; } .pr__c .btn { justify-self: start; } .pr__form { margin-top: 14px; padding: 22px; display: grid; gap: 12px; max-width: 640px; } .ct2 { padding: 24px; display: grid; gap: 14px; max-width: 720px; } .ct2 .seg { justify-self: start; } .ct2 .seg button { font-size: 15px; padding: 9px 18px; } .ct2__lock { background: var(--inp); border: 1px dashed var(--line); border-radius: 14px; padding: 14px 16px; } .ct2__lock p { margin: 6px 0 0; color: var(--mute); font-size: 14px; } .logo { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .logo .stk { position: relative; display: block; } .logo .stk img { display: block; position: relative; z-index: 1; pointer-events: none; -webkit-user-drag: none; will-change: clip-path; } .logo .stk__lift { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: drop-shadow(-3px 5px 3px rgba(0,0,0,.4)); will-change: filter; } .logo .stk__flap { position: absolute; inset: 0; display: none; transform-origin: 0 0; -webkit-mask: url(/assets/logo-mask.png) 0 0 / 100% 100% no-repeat; mask: url(/assets/logo-mask.png) 0 0 / 100% 100% no-repeat; } .cab__bar .cab__tabs a { padding: 20px 12px; } :root[data-theme="light"] { --acc-txt: #4f6b00; } :root[data-theme="light"] .top .nav a[href="/partners/"], :root[data-theme="light"] .top__login.on, :root[data-theme="light"] .kicker, :root[data-theme="light"] .rd__link, :root[data-theme="light"] .link, :root[data-theme="light"] .am__err.ok, :root[data-theme="light"] .ok, :root[data-theme="light"] .tx__r b.ok, :root[data-theme="light"] .cr__pos, :root[data-theme="light"] .rp__pos { color: var(--acc-txt); } :root[data-theme="light"] .cm__out, :root[data-theme="light"] .adm__badtxt { color: #c2361a !important; } :root[data-theme="light"] .seg button.on { background: #111; color: #fff; } :root[data-theme="light"] .logo__txt, :root[data-theme="light"] .logo img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); } .cab__me .cab__user > span:not(.cab__ava) { display: none; } .cab__me .cab__user > span.cab__ava { display: grid; } body[data-page="cabinet"] .top__login, body[data-page="cabinet"] .top__cta, body[data-page="cabinet"] .top__admin { display: none; } body[data-page="cabinet"] .top__in { gap: 4px; } .cab__tabs--top { display: flex; align-items: stretch; margin: 0 auto 0 0 !important; border: 0 !important; gap: 0 !important; overflow-x: auto; scrollbar-width: none; } .top .cab__tabs--top a { display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: 15.5px; font-weight: 600; color: var(--t2); white-space: nowrap; position: relative; } .top .cab__tabs--top a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .top .cab__tabs--top a.on { color: var(--text); } .top .cab__tabs--top a::after { left: 10px; right: 10px; } body[data-page="cabinet"] .top .cab__new { align-self: center; margin: 0 10px 0 auto; flex: none; } body[data-page="cabinet"] .top .cab__me { align-self: center; } body[data-page="cabinet"] .top__bal { margin-right: 6px; } body[data-page="cabinet"] .cab__title { margin-top: 34px; } @media (max-width: 1560px) { .top .cab__tabs--top a { padding: 0 9px; font-size: 14.5px; } .top .cab__tabs--top a svg { display: none; } } @media (max-width: 1000px) { .top .cab__tabs--top a span { font-size: 13.5px; } body[data-page="cabinet"] .top__bal span { display: none; } } .imp { position: sticky; top: 0; z-index: 3100; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 16px; background: var(--hot); color: #fff; font-size: 14px; } .imp button { border: 0; border-radius: 999px; background: #fff; color: #111; font-weight: 800; padding: 6px 14px; } .adm__switch { display: grid; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } .adm__nav .adm__sw { color: var(--mute); font-size: 14px; padding: 9px 12px; } .adm__switch + .adm__me { margin-top: 8px; } .top__mode { align-self: center; display: flex; margin-right: 12px; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hot) 45%, var(--line)); background: var(--pill); } .top__mode a { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--mute); white-space: nowrap; } .top__mode a.on { background: var(--hot); color: #fff; } .top__mode a:not(.on):hover { color: var(--text); } body[data-page="cabinet"] .top__mode { display: flex; } @media (max-width: 1360px) { .top__mode a { padding: 6px 9px; font-size: 12px; } } .top__burger { display: none; align-self: center; width: 42px; height: 42px; margin-left: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--pill); flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex: none; cursor: pointer; } .top__burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; } html.nav-open .top__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.nav-open .top__burger span:nth-child(2) { opacity: 0; } html.nav-open .top__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1060px) { .top__burger { display: flex; } html.nav-open .top .nav { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px !important; padding: 10px 12px 18px; margin: 0 !important; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); max-height: calc(100dvh - 110px); overflow-y: auto; z-index: 60; } html.nav-open .top .nav .nav__it { display: block; } html.nav-open .top .nav a { display: flex !important; padding: 14px 14px !important; font-size: 17px !important; border-radius: 12px; height: auto !important; } html.nav-open .top .nav a::after { display: none; } html.nav-open .top .nav a.on { background: var(--s2); color: var(--text); } html.nav-open .top .cab__tabs--top a svg { display: inline-block !important; } html.nav-open .top .cab__tabs--top a span { font-size: 17px !important; } .top .nav .mega { display: none !important; } } @media (max-width: 1600px) { .top__mode a span { display: none; } .top__mode a { padding: 5px 10px; font-size: 15px; } } .nav__mob, .nav__mobonly { display: none !important; } @media (max-width: 1060px) { html.nav-open .top .nav .nav__mob { display: grid !important; gap: 8px; margin-top: 8px; padding: 14px 4px 0; border-top: 1px solid var(--line); } html.nav-open .top .nav .nav__mob .btn { justify-content: center; padding: 14px !important; font-size: 16px !important; } html.nav-open .top .nav .nav__mob .btn--ghost { color: var(--text); } html.nav-open .top .nav .nav__mob .btn { margin-left: 0 !important; color: var(--acc-ink); } html.nav-open .top .nav .nav__mob .btn.btn--ghost { color: var(--text); } .top .nav .nav__mob .nav__acc { gap: 12px; align-items: center; } .nav__acc .cab__ava { width: 40px; height: 40px; } .nav__acc b { display: block; font-size: 16px; } .nav__acc small { display: block; color: var(--mute); font-size: 13px; font-weight: 500; } html.nav-open .top .cab__tabs--top .nav__mobonly { display: flex !important; color: var(--acc-t); } } @media (max-width: 600px) { .top__in { padding: 0 14px !important; gap: 6px; } .top__mode, .top__login, .top__cta, body[data-page="cabinet"] .top .cab__new { display: none !important; } .top__bal { margin-right: 0 !important; padding: 7px 9px; gap: 0; } .top__bal b, .top__bal i { display: none; } .top__bal span { display: inline !important; font-size: 18px; } .top .logo { margin-right: auto !important; } body[data-page="cabinet"] .top .cab__me { margin-left: 4px; } .top .logo img { width: 78px; height: auto; } #lvlPill { display: none !important; } } .hero--hub h1 { font-size: clamp(34px, 4.8vw, 68px); text-wrap: balance; } .hero--hub .lead { text-wrap: balance; max-width: 620px; } #pricing h2 { margin-bottom: 36px; } #pricing .seg--center { margin-top: 0; } .fine { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); opacity: .8; } .pg-hero .hero__cta .btn { padding: 20px 40px; font-size: 19px; font-weight: 800; gap: 12px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 18%, transparent), 0 18px 50px -12px color-mix(in srgb, var(--acc) 70%, transparent); } .pg-hero .hero__cta .btn::after { content: "→"; font-size: 22px; transition: transform .2s; } .pg-hero .hero__cta .btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 24%, transparent), 0 24px 60px -12px color-mix(in srgb, var(--acc) 85%, transparent); } .pg-hero .hero__cta .btn:hover::after { transform: translateX(4px); } @media (max-width: 600px) { .pg-hero .hero__cta .btn { width: 100%; padding: 18px 24px; font-size: 18px; } } .pr__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; } .pr__price b { font-family: var(--head); font-size: 20px; } .pr__price span { color: var(--acc-t); font-size: 13px; font-weight: 700; } .pr__c--paid { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); } .o small { display: block; margin-top: 4px; color: var(--acc-t); font-size: 12.5px; font-weight: 700; } .once__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: stretch; } @media (max-width: 1000px) { .once__cols { grid-template-columns: 1fr; } } .oc { padding: 22px 24px 14px; display: flex; flex-direction: column; } .oc__h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; padding-bottom: 12px; } .oc__h span { font-size: 20px; } .oc__r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); } .oc__t { font-size: 15px; } .oc__t small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; } .oc__p { text-align: right; white-space: nowrap; } .oc__p b { font-family: var(--head); font-size: 18px; } .oc__p b.soon { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--mute); } .oc__p small { display: block; color: var(--acc-t); font-size: 12px; font-weight: 700; margin-top: 2px; } :root[data-theme="light"] .oc__p small { color: var(--acc-txt); } .oc__more { border-top: 1px solid var(--line); padding: 14px 0 6px; display: grid; gap: 10px; } .oc__more > span { color: var(--mute); font-size: 13px; } .oc__chips { display: flex; flex-wrap: wrap; gap: 6px; } .oc__chips a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 13px; color: var(--t2); transition: border-color .15s, color .15s; } .oc__chips a:hover { border-color: var(--acc); color: var(--acc-t); } .oc__all { color: var(--acc-t); font-weight: 700; font-size: 14px; } .pm { padding: 34px 0 96px; } .pm h1 { font-size: clamp(32px, 4.6vw, 60px); margin-top: 6px; } .pm .lead { max-width: 720px; margin: 16px 0 26px; } .pm__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 26px; } .pm__nav button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 700; color: var(--t2); background: color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .15s, color .15s, border-color .15s, transform .15s; cursor: pointer; } .pm__nav button span { font-size: 16px; } .pm__nav button i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--mute); background: var(--s3); border-radius: 999px; padding: 1px 7px; } .pm__nav button:hover { border-color: color-mix(in srgb, var(--acc) 60%, var(--line)); color: var(--text); transform: translateY(-1px); } .pm__nav button.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); } .pm__nav button.on i { background: rgba(11,11,12,.15); color: var(--acc-ink); } @media (max-width: 700px) { .pm__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px; -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); } .pm__nav::-webkit-scrollbar { display: none; } .pm__nav button { flex: none; } } .pm__tag { display: none; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--mute); background: var(--s2); border-radius: 999px; padding: 3px 9px; } .pm--all .pm__tag { display: inline-block; } #pmList { animation: pmIn .25s ease; } @keyframes pmIn { from { opacity: .4; transform: translateY(6px); } } .pm__sec { padding-top: 34px; scroll-margin-top: 150px; } .pm__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .pm__ico { width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--s2); display: grid; place-items: center; font-size: 26px; } .pm__head h2 { font-size: 28px; } .pm__head p { margin: 6px 0 0; color: var(--mute); max-width: 720px; } .pm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1000px) { .pm__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pm__grid { grid-template-columns: 1fr; } } .pm__item { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .pm__item b { font-size: 17px; } .pm__item p { margin: 0; color: var(--mute); font-size: 14.5px; line-height: 1.5; flex: 1; } .pm__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; } .pm__foot span { color: var(--mute); font-size: 13px; } .pm__cta { margin-top: 40px; padding: 24px 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .pm__cta b { font-size: 19px; } .pm__cta p { margin: 4px 0 0; color: var(--mute); } .pr--top { grid-template-columns: 1fr 1fr; margin-bottom: 14px; } @media (max-width: 700px) { .pr--top { grid-template-columns: 1fr; } } .pr__cat { columns: 2; column-gap: 12px; } @media (max-width: 900px) { .pr__cat { columns: 1; } } .pr__grp { padding: 16px 18px 6px; break-inside: avoid; margin-bottom: 12px; display: block; } .pr__gh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; } .pr__gh span { font-size: 20px; } .pr__gh b { font-size: 16px; } .pr__gh a { margin-left: auto; color: var(--mute); font-size: 13px; } .pr__gh a:hover { color: var(--acc-t); } .pr__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); } .pr__row b { display: block; font-size: 14.5px; } .pr__row small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.45; margin-top: 2px; } .pr__row .btn { flex: none; } .picon { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; } .picon svg { width: 58%; height: 58%; } .picon--brand { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .picon--line { background: var(--s3); color: var(--text); } .picon--line svg { width: 62%; height: 62%; } .picon--xs { width: 18px; height: 18px; border-radius: 5px; } .picon--sm { width: 24px; height: 24px; border-radius: 7px; } .picon--lg { width: 56px; height: 56px; border-radius: 16px; } .pm__nav button.on .picon--line { background: rgba(11,11,12,.14); color: var(--acc-ink); } .pm__tag { display: none; align-items: center; gap: 6px; } .pm--all .pm__tag { display: inline-flex; } .oc__chips a { display: inline-flex; align-items: center; gap: 6px; } .pr__gh .picon { margin-right: 2px; } .pm__sort { margin: -8px 0 14px; color: var(--mute); font-size: 14px; } .pm__item--hot { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } .pm__hot { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--acc-ink); background: var(--acc); border-radius: 999px; padding: 3px 10px; } :root[data-theme="light"] .pm__hot { color: #0b0b0c; } .ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.17em; } .ic--up { color: var(--acc-t); width: 14px; height: 14px; margin-left: 4px; } .ic--down { color: var(--hot); width: 14px; height: 14px; margin-left: 4px; } .p__i, .pr__i, .drop__i, .cab__empty-i, .st__ic, .tplc__i, .oc__ic, .adm__evi { display: inline-grid; place-items: center; flex: none; border-radius: 14px; color: var(--acc-t); background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 20%, transparent), color-mix(in srgb, var(--vio) 16%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); font-size: 0; } .p__i, .pr__i { width: 50px; height: 50px; margin-bottom: 14px; } .p__i .ic, .pr__i .ic { width: 24px; height: 24px; } .cab__empty-i, .st__ic, .drop__i { width: 64px; height: 64px; border-radius: 20px; } .cab__empty-i .ic, .st__ic .ic, .drop__i .ic { width: 30px; height: 30px; } .tplc__i { width: 42px; height: 42px; border-radius: 12px; } .tplc__i .ic { width: 20px; height: 20px; } .oc__ic { width: 34px; height: 34px; border-radius: 10px; } .oc__ic .ic { width: 18px; height: 18px; } .oc__h span.oc__ic { font-size: 0; } .adm__evi { width: 30px; height: 30px; border-radius: 9px; } .adm__evi .ic { width: 16px; height: 16px; } .nav-ic { display: inline-grid; place-items: center; width: 22px; } .nav-ic .ic { width: 18px; height: 18px; } .adm__nav a.on .nav-ic { color: var(--acc-t); } .rd__votes button span { display: inline-flex; } .rd__votes .ic { width: 18px; height: 18px; } .rd__votes button.on .ic { color: var(--acc-t); } .rd__votes button[data-a="dislike"].on .ic { color: var(--hot); } .sc__acts button .ic, .cr__acts .ic { width: 17px; height: 17px; } .top__bal span { display: inline-flex; } .top__bal span .ic { width: 17px; height: 17px; color: var(--acc-t); } .top__mode a { display: inline-flex; align-items: center; gap: 5px; } .top__mode .ic { width: 15px; height: 15px; } .cm__seg button { display: inline-flex; } .cm__seg .ic { width: 16px; height: 16px; } .cab__menu a .ic, .cab__menu button .ic { width: 17px; height: 17px; margin-right: 6px; color: var(--mute); } .adm__sw .ic { width: 16px; height: 16px; margin-right: 4px; } .imp .ic { width: 16px; height: 16px; margin-right: 4px; } .tag-hot .ic, .pm__hot .ic { width: 13px; height: 13px; vertical-align: -2px; } .place__top .ic { width: 14px; height: 14px; color: var(--acc-t); } .pin span { display: inline-grid; } .pin span .ic { width: 15px; height: 15px; color: #0b0b0c; } .pin--concert span .ic, .pin--hot span .ic { color: #fff; } .sbtn .ic { width: 26px; height: 26px; } .sbtn--yes .ic { fill: currentColor; } .cf__ic { font-size: 0; } .cf__ic .ic { width: 28px; height: 28px; color: var(--acc-t); } .cf__ic.bad .ic { color: var(--hot); } .ai-tip b .ic, .ct2__lock b .ic { color: var(--acc-t); margin-right: 4px; } .rp__switch button .ic { width: 17px; height: 17px; margin-right: 4px; } .seg button .ic { vertical-align: -3px; } #layers button .ic, #filters button .ic { width: 15px; height: 15px; margin-right: 3px; } th .ic { width: 15px; height: 15px; } .adm__acts .btn .ic, .adm__dpanel .btn .ic { width: 16px; height: 16px; margin-right: 6px; } .nav__mob .ic { width: 17px; height: 17px; margin-right: 6px; } .rd__pcov { position: relative; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; background: var(--s3); } .rd__pcov img { width: 100%; height: 100%; object-fit: cover; display: block; } .rd__pcov .rd__eq { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; } .rd__pcov .rd__eq i { background: #fff; } .rd--on .rd__pcov .rd__eq { opacity: 1; } .rd__ctl { justify-content: center; } .rd__volrow { display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 12px; } .rd__mute { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; color: var(--text); cursor: pointer; } .rd__mtrack { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--acc); transition: background .2s; } .rd__mknob { position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #0b0b0c; transition: left .2s; } .rd__mute em { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .06em; width: 36px; text-align: left; color: var(--acc-t); white-space: nowrap; } .rd--muted .rd__mtrack { background: var(--s4); } .rd--muted .rd__mknob { left: 3px; background: var(--mute); } .rd--muted .rd__mute em { color: var(--mute); } .rd__mute:focus-visible .rd__mtrack { outline: 2px solid var(--acc); outline-offset: 2px; } .rd__vbar { position: relative; height: 22px; margin: 0 8px; cursor: pointer; touch-action: none; } .rd__vbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: var(--s3); } .rd__vfill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, var(--vio)), var(--acc)); } .rd__vthumb { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .12s; } .rd__vbar:hover .rd__vthumb, .rd__vbar.drag .rd__vthumb { transform: scale(1.2); } .rd__vbar:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 6px; } .rd--muted .rd__vfill { background: var(--s5); } .rd--muted .rd__vthumb { background: var(--mute); } .rd__vpct { font-size: 12px; font-weight: 800; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; } .search { z-index: 20; } .sg { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 50; max-height: min(460px, 60vh); overflow-y: auto; padding: 8px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); text-align: left; } .sg__i { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; color: var(--text); } .sg__i.on { background: var(--s2); } .sg__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; color: var(--acc-t); background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 18%, transparent), color-mix(in srgb, var(--vio) 14%, transparent)); } .sg__ic img { width: 100%; height: 100%; object-fit: cover; } .sg__ic .ic { width: 20px; height: 20px; } .sg__ic .picon { width: 40px; height: 40px; border-radius: 11px; } .sg__t { min-width: 0; display: grid; } .sg__t b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg__t small { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg__t mark { background: none; color: var(--acc-t); } .sg__k { font-size: 11.5px; font-weight: 700; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .sg__none { padding: 16px; color: var(--mute); font-size: 14.5px; } .sg__none a { color: var(--acc-t); } :root[data-theme="light"] .sg__t mark { color: var(--acc-txt); } @media (max-width: 600px) { .sg__k { display: none; } .sg__i { grid-template-columns: 36px 1fr; } .sg__ic { width: 36px; height: 36px; } } .pl { padding: 10px; position: relative; } .pl:hover { z-index: 3; } .vy { position: relative; display: block; aspect-ratio: 1; isolation: isolate; } .vy__disc { position: absolute; top: 6%; left: 21%; width: 88%; aspect-ratio: 1; border-radius: 50%; z-index: 0; background: radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.06) 31.5%, transparent 32%), repeating-radial-gradient(circle, #0b0b0c 0 1.6px, #19191d 1.6px 3.2px); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .vy__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, transparent 0 30%, rgba(255,255,255,.12) 38%, transparent 46%, transparent 80%, rgba(255,255,255,.08) 88%, transparent 96%); } .vy__lbl { position: absolute; inset: 31%; border-radius: 50%; background: var(--acc2) center / cover; box-shadow: 0 0 0 3px #0b0b0c, 0 0 0 4px color-mix(in srgb, var(--acc2) 60%, transparent); } .vy__lbl::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: #0b0b0c; } .pl:hover .vy__disc, .pl:focus-visible .vy__disc { transform: translateX(38%) rotate(200deg); } .vy__sleeve { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 14px 14px 12px; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc2) 22%, transparent), transparent 60%), linear-gradient(160deg, #1a1a1e, #0f0f11 75%); box-shadow: 0 14px 30px -14px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07); } .vy__sleeve::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); pointer-events: none; } .vy__sleeve::after { content: ""; position: absolute; top: 8%; bottom: 8%; right: 0; width: 3px; border-radius: 3px 0 0 3px; background: rgba(0,0,0,.6); box-shadow: -1px 0 0 rgba(255,255,255,.08); } .vy__tag { position: relative; align-self: flex-start; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #0b0b0c; background: var(--acc2); padding: 3px 7px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 2px 2px 0 rgba(0,0,0,.5); } .vy__big { position: absolute; right: 10px; bottom: 26px; font-family: var(--head); font-weight: 700; font-size: 72px; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--acc2) 55%, transparent); pointer-events: none; } .vy__t { position: relative; margin-top: 14px; font-family: var(--head); font-weight: 700; font-size: 18px; line-height: 1.08; letter-spacing: -.02em; color: #fff; overflow-wrap: break-word; } .vy__s { position: relative; margin-top: 5px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--acc2); } .vy__brand { position: relative; margin-top: auto; font-size: 9.5px; font-weight: 900; letter-spacing: .22em; color: rgba(255,255,255,.4); } .pl__t { margin-top: 8px; } .shelf__row { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 90px; } .shelf__row::-webkit-scrollbar { display: none; } .shelf__row > .pl { scroll-snap-align: start; } .shelf__row .pl { transition: background .15s, transform .5s cubic-bezier(.2,.8,.2,1); } @media (hover: hover) { .shelf__row:not(.shelf__row--all) .pl:hover ~ .pl { transform: translateX(78px); } } .shelf__row--all { column-gap: 100px; padding-right: 0; scroll-snap-type: none; } .shelf__ctl { display: flex; align-items: center; gap: 14px; } .shelf__nav { display: flex; gap: 6px; } .shelf__nav[hidden] { display: none; } .shelf__nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .15s, opacity .15s; } .shelf__nav button:hover:not(:disabled) { background: var(--s2); } .shelf__nav button:disabled { opacity: .3; cursor: default; } .shelf__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: none) { .shelf__nav { display: none; } } .ch__find { display: flex; align-items: center; gap: 10px; max-width: 360px; margin: 30px 0 -8px; padding: 0 16px; border-radius: 999px; background: var(--inp); border: 1px solid var(--line); color: var(--mute); transition: border-color .15s; } .ch__find:focus-within { border-color: var(--acc); } .ch__find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; padding: 12px 0; outline: none; } .ch__none { color: var(--mute); padding: 6px 0 4px; } .vy__big--3 { font-size: 54px; bottom: 30px; } @media (max-width: 700px) { .vy__t { font-size: 15px; } .vy__big { font-size: 52px; } .vy__big--3 { font-size: 40px; } } .vyh { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acc2) 26%, transparent), transparent 60%), var(--s1) !important; border: 1px solid var(--line); } .vyh::after { display: none; } .vyh__art { width: 230px; flex: none; } .vyh__art .vy { border-radius: 16px; } .vyh h1, .vyh p, .vyh small, .vyh .pl__kind { color: var(--text); } .vyh small { color: var(--mute); } @media (max-width: 700px) { .vyh__art { width: 160px; } } button.back { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--mute); } button.back:hover { color: var(--acc-t); } .rd__pill { padding: 6px 6px 6px 6px; gap: 10px; } .rd__pill button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; font: inherit; text-align: left; } .rd__pcov { position: relative; } .rd__pplay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s; } .rd__pplay .ic { width: 18px; height: 18px; fill: currentColor; } .rd__pcov:hover .rd__pplay, .rd__pcov:focus-visible .rd__pplay { opacity: 1; } .rd__pcov:hover .rd__eq { opacity: 0; } .rd:not(.rd--on) .rd__pplay { opacity: .85; } .rd__pill-t { flex: 1; min-width: 0; } .rd__pexp { width: 32px; height: 32px; flex: none; border-radius: 50% !important; display: grid !important; place-items: center; background: var(--s3) !important; color: var(--text); transition: background .15s, transform .15s; } .rd__pexp:hover { background: var(--acc) !important; color: var(--acc-ink) !important; transform: translateY(-2px); } .rd__pexp .ic { width: 18px; height: 18px; } .p__i { display: grid; } input[type="checkbox"]:not(.tog input), input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer; width: 22px !important; height: 22px !important; border-radius: 7px; background: var(--inp); border: 1.5px solid var(--s5); display: inline-grid; place-items: center; vertical-align: middle; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:not(.tog input)::after { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .15s cubic-bezier(.3,1.6,.5,1); background: var(--acc-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } input[type="radio"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acc-ink); transform: scale(0); transition: transform .15s cubic-bezier(.3,1.6,.5,1); } input[type="checkbox"]:not(.tog input):hover, input[type="radio"]:hover { border-color: color-mix(in srgb, var(--acc) 70%, var(--s5)); } input[type="checkbox"]:not(.tog input):checked, input[type="radio"]:checked { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); } input[type="checkbox"]:not(.tog input):checked::after, input[type="radio"]:checked::after { transform: scale(1); } input[type="checkbox"]:not(.tog input):active, input[type="radio"]:active { transform: scale(.92); } input[type="checkbox"]:not(.tog input):focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; } .f--check, .f.f--check { gap: 12px !important; cursor: pointer; line-height: 1.4; } .q input, .plat input, .adm__preset input { margin: 0 !important; } .adm__preset input { margin-top: 1px !important; } input[type="checkbox"]:not(.tog input), input[type="radio"] { position: relative; } input[type="checkbox"]:not(.tog input)::after, input[type="radio"]::after { position: absolute; inset: 0; margin: auto; } .eng, .dsg, .beat { position: relative; } [data-pro] { cursor: pointer; transition: border-color .15s; } [data-pro]:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } .pro-name, .pro-star { color: inherit; transition: color .15s; } .pro-name:hover, .pro-star:hover { color: var(--acc-t); } .pro-go { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--mute); transition: background .15s, color .15s; } .pro-go .ic { width: 16px; height: 16px; } [data-pro]:hover .pro-go { background: var(--acc); color: var(--acc-ink); } .pro .back { display: inline-block; margin-bottom: 14px; color: var(--t2); } .pro .back:hover { color: var(--acc-t); } .pro__ava { width: 200px; height: 200px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 800 84px/1 var(--head); color: var(--acc-ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); } .pro__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--t2); font-size: 15px; } .pro__meta span { display: inline-flex; align-items: center; gap: 6px; } .pro__meta .ic { width: 16px; height: 16px; } .pro__meta a { color: var(--text); font-weight: 700; } .pro__meta a:hover { color: var(--acc-t); } .pro__about { font-size: 17px; line-height: 1.6; color: var(--t2); max-width: 760px; margin: 0; } .pro__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .pro__tags span { padding: 7px 14px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); font-size: 14px; } .pro__tags--gear { margin-top: 0; } .pro__svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .pro__sv { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .pro__sv b { font-family: var(--ui); font-weight: 800; font-size: 17px; } .pro__sv p { color: var(--mute); font-size: 14px; margin: 0; flex: 1; } .pro__pr { font-weight: 800; font-size: 20px; margin: 8px 0 10px; } .pro__sv .btn { align-self: flex-start; } .pro__wks { display: grid; gap: 10px; } .pro__wk { display: grid; grid-template-columns: 56px 1fr minmax(180px, 340px); gap: 16px; align-items: center; padding: 12px 16px 12px 12px; } .pro__wk b { display: block; font-family: var(--ui); font-weight: 800; } .pro__wk small { color: var(--mute); font-size: 13px; } .pro__cov { width: 56px; aspect-ratio: 1; border-radius: 10px; } @media (max-width: 620px) { .pro__wk { grid-template-columns: 48px 1fr; } .pro__wk .ab { grid-column: 1 / -1; } .pro__cov { width: 48px; } } .pro__pf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 620px) { .pro__pf { grid-template-columns: 1fr 1fr; gap: 8px; } } .pro__pf button { aspect-ratio: 1; border: 0; border-radius: 16px; position: relative; overflow: hidden; cursor: zoom-in; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .pro__pf span { position: absolute; inset: auto 0 0 0; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; font-size: 13px; text-align: left; opacity: 0; transition: opacity .2s; } .pro__pf button:hover span, .pro__pf button:focus-visible span { opacity: 1; } .pro__pf span b { display: block; font-size: 15px; } .pro-lb { position: fixed; inset: 0; z-index: 3000; display: grid; place-content: center; justify-items: center; padding: 24px; background: rgba(5,5,6,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; animation: amFade .2s; } .pro-lb div { width: min(560px, 88vw); aspect-ratio: 1; border-radius: 20px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.9); } .pro-lb p { color: #fff; margin: 16px 0 0; text-align: center; } .pro-lb p b { display: block; font-size: 18px; } .pro__rv { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } @media (max-width: 820px) { .pro__rv { grid-template-columns: 1fr; } } .pro__sum { padding: 22px; display: grid; gap: 8px; } .pro__sum > b { font: 800 56px/1 var(--head); } .pro__sum > span { color: var(--mute); font-size: 14px; margin-bottom: 6px; } .pro__stars { color: var(--acc-t); letter-spacing: 2px; white-space: nowrap; } .pro__stars s { text-decoration: none; color: var(--s4); } .pro__bar { display: grid; grid-template-columns: 12px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; color: var(--mute); } .pro__bar span:last-child { text-align: right; } .pro__bar i { height: 6px; border-radius: 3px; background: var(--s3); position: relative; overflow: hidden; } .pro__bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--acc); border-radius: 3px; } .pro__rl { display: grid; gap: 12px; } .pro__r { padding: 18px 20px; } .pro__rh { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; } .pro__rh .eng__ava { width: 40px; height: 40px; font-size: 15px; } .pro__rh b { display: block; font-family: var(--ui); font-weight: 800; } .pro__rh small { color: var(--mute); font-size: 13px; } .pro__r p { margin: 12px 0 0; line-height: 1.55; } .pro__more { justify-self: start; } .pro__sim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 820px) { .pro__sim { grid-template-columns: 1fr; } } .pro__s { display: flex; gap: 12px; align-items: center; padding: 16px; color: var(--text); transition: border-color .15s; } .pro__s:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } .pro__s b { display: block; font-family: var(--ui); font-weight: 800; } .pro__s small { color: var(--mute); font-size: 13px; } @media (max-width: 620px) { .pro__ava { width: 120px; height: 120px; font-size: 52px; } .pro .ar__in { gap: 18px; } .ar__stats { grid-template-columns: 1fr 1fr; } } .shelf__h { gap: 14px; } .shelf__h .rd__link { white-space: nowrap; flex: none; } .closed-wrap { display: none; } html.show-closed .closed-wrap { display: block; } html.show-closed .closed { display: none; } .closed { padding: 40px 0 70px; } .closed__in { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 70px 20px; margin-top: 18px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%), var(--s1); } .closed__ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--acc-t); margin-bottom: 10px; } .closed__ic .ic { width: 28px; height: 28px; } .closed__in h1 { font-size: clamp(30px, 4.6vw, 54px); margin: 0; } .closed__in .lead { margin: 4px 0 18px; } .closed-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: color-mix(in srgb, var(--acc) 14%, var(--s1)); color: var(--text); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--line); } .closed-bar .ic { width: 16px; height: 16px; color: var(--acc-t); } .badge--soon { background: rgba(11,11,12,.7) !important; color: var(--acc) !important; } .msearch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; position: relative; } .msearch__in { position: relative; flex: 1 1 340px; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; background: var(--inp); border: 1px solid var(--line); color: var(--mute); } .msearch__in:focus-within { border-color: var(--acc); } .msearch__in > .ic { width: 18px; height: 18px; flex: none; } .msearch__in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; padding: 12px 0; outline: none; } .msearch__sg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1200; padding: 6px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); display: grid; } .msearch__sg button { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; } .msearch__sg button:hover, .msearch__sg button:focus-visible { background: var(--s2); } .msearch__sg .ic { width: 18px; height: 18px; color: var(--acc-t); } .msearch__sg b { display: block; font-weight: 700; } .msearch__sg small { color: var(--mute); font-size: 12.5px; } .msearch__none { padding: 12px; color: var(--mute); font-size: 14px; } .msearch__me { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; } .msearch__me:hover { border-color: var(--acc); } .msearch__me .ic { width: 17px; height: 17px; color: #3da5ff; } .msearch__me.busy .ic, .mctl button.busy .ic { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .msearch__from { color: var(--mute); font-size: 13.5px; } .msearch__from b { color: var(--text); } .msearch__note { flex-basis: 100%; margin: 0; padding: 9px 14px; border-radius: 12px; background: var(--s2); font-size: 14px; } .mctl { display: grid; gap: 6px; } .mctl button { width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; background: rgba(20,20,22,.92); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; } .mctl button:hover { color: var(--acc-t); } .mctl .ic { width: 19px; height: 19px; } .mstyle { display: flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(20,20,22,.92); box-shadow: 0 6px 18px rgba(0,0,0,.45); } .mstyle button { width: auto; height: auto; padding: 7px 13px; border-radius: 999px; background: none; box-shadow: none; color: var(--mute); font: inherit; font-size: 13px; font-weight: 700; } .mstyle button.on { background: var(--text); color: var(--bg); } .leaflet-control-attribution { background: rgba(11,11,12,.7) !important; color: #aaa !important; } .leaflet-control-attribution a { color: #ddd !important; } .mapbox--full { position: fixed; inset: 0; z-index: 2600; margin: 0; padding: 14px; background: var(--bg); display: flex; flex-direction: column; } .mapbox--full .mapbox__body { flex: 1; height: auto; } html.map-full { overflow: hidden; } html.map-full .rd { display: none; } .db { position: relative; display: grid; gap: 14px; } .db__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .db__sel { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--inp); color: var(--mute); } .db__sel .ic { width: 16px; height: 16px; } .db__sel select { border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; padding: 10px 0; outline: none; cursor: pointer; } .db__sel select option { background: var(--s1); } .db__csv { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; } .db__csv:hover { border-color: var(--acc); } .db__csv .ic { width: 16px; height: 16px; transform: rotate(180deg); } .db__note { margin-left: auto; color: var(--mute); font-size: 13px; } .db__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1000px) { .db__kpis { grid-template-columns: 1fr 1fr; } } .db__kpi { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 20px; border: 0; border-radius: 20px; text-align: left; font: inherit; cursor: pointer; overflow: hidden; color: #fff; box-shadow: 0 18px 40px -22px var(--kc, #000); transition: transform .2s, box-shadow .2s; } .db__kpi::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); } .db__kpi:hover { transform: translateY(-2px); } .db__kpi.on { box-shadow: 0 0 0 2px var(--text), 0 18px 40px -22px var(--kc, #000); } .db__kpi--lime { background: linear-gradient(135deg, #c8ff3d, #79b51a); color: #0b0b0c; --kc: #c8ff3d; } .db__kpi--violet { background: linear-gradient(135deg, #9c8cff, #5b46d6); --kc: #8b7bff; } .db__kpi--orange { background: linear-gradient(135deg, #ff8a5c, #e0402a); --kc: #ff5a36; } .db__kpi--blue { background: linear-gradient(135deg, #5ab8ff, #2563c9); --kc: #3da5ff; } .db__ki { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); } .db__kpi--lime .db__ki { background: rgba(11,11,12,.12); } .db__ki .ic { width: 22px; height: 22px; } .db__kpi b { display: block; font: 800 clamp(20px, 2.1vw, 28px)/1.1 var(--head); letter-spacing: -.02em; } .db__kpi small { font-size: 13px; opacity: .85; font-weight: 600; } .db__kpi em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 7px; margin-left: 4px; border-radius: 999px; background: rgba(11,11,12,.2); white-space: nowrap; } .db__kpi > span:last-child { position: relative; z-index: 1; min-width: 0; } .db__row { display: grid; gap: 14px; } .db__row--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .db__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .db__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .db__row--pl { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } @media (max-width: 1000px) { .db__row--main, .db__row--2, .db__row--3, .db__row--pl { grid-template-columns: 1fr; } } .db__card { padding: 20px 22px; min-width: 0; } .db__t { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; } .db__t .ic { width: 18px; height: 18px; color: var(--acc-t); } .db__th { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .db__ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .db__hero b { display: block; font: 800 clamp(28px, 3.2vw, 40px)/1.1 var(--head); letter-spacing: -.02em; margin-top: 6px; } .db__hero span { font-size: 13px; font-weight: 700; } .up { color: #0ca30c; } .down { color: #e66767; } .db__metric button { font-size: 13px; padding: 7px 12px; } .db__legend { display: flex; gap: 18px; align-items: center; margin: 14px 0 4px; font-size: 13px; color: var(--t2); } .db__legend span, .db__chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .db__sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; } .db__legend .db__sw { margin: 0; } .db__sw--cur { background: #c8ff3d; } .db__sw--prev { background: #6b6b75; } .db__plot { position: relative; height: 250px; outline: none; border-radius: 10px; } .db__plot:focus-visible { box-shadow: 0 0 0 2px var(--acc); } .db__plot svg { display: block; } .db__grid { stroke: #2c2c2a; stroke-width: 1; } .db__ax { fill: #898781; font-size: 11.5px; font-variant-numeric: tabular-nums; } .db__line { fill: none; stroke: #c8ff3d; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .db__prev { fill: none; stroke: #6b6b75; stroke-width: 1.5; stroke-linejoin: round; } .db__cl { stroke: #898781; stroke-width: 1; } .db__dot { fill: #c8ff3d; stroke: var(--s1); stroke-width: 2; } .db__dot--prev { fill: #6b6b75; } .db__tt { position: absolute; z-index: 5; width: 180px; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); font-size: 13px; display: grid; gap: 4px; } .db__tt b { font-size: 13px; } .db__tt small { color: var(--mute); } .db__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } @media (max-width: 700px) { .db__mini { grid-template-columns: 1fr 1fr; } } .db__mini > div { display: flex; gap: 10px; align-items: center; min-width: 0; } .db__mi { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--acc-t); } .db__mi .ic { width: 16px; height: 16px; } .db__mini small { display: block; color: var(--mute); font-size: 11.5px; line-height: 1.25; } .db__mini b { font-size: 15px; } .db__tv { margin-top: 12px; font-size: 13px; color: var(--mute); } .db__tv summary { cursor: pointer; } .db__tv table, .db__table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .db__tv td, .db__tv th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; } .db__donut { display: grid; place-items: center; margin: 10px 0 6px; } .db__donut svg { width: min(200px, 100%); height: auto; overflow: visible; } .db__donut circle { transition: opacity .2s, stroke-width .2s; cursor: pointer; outline: none; } .db__donut circle.dim { opacity: .3; } .db__dv { fill: var(--text); font: 800 30px var(--head); } .db__dn { fill: var(--mute); font-size: 12.5px; } .db__dl { display: grid; gap: 4px; } .db__dl > div { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 10px; align-items: center; padding: 5px 6px; border-radius: 10px; transition: opacity .2s; } .db__dl > div.dim { opacity: .4; } .db__dl i { width: 12px; height: 12px; border-radius: 4px; } .db__dl span { font-size: 14px; } .db__dl b { font-size: 14px; } .db__dl small { grid-column: 2 / -1; color: var(--mute); font-size: 12px; } .db__act { display: grid; gap: 14px; margin-top: 14px; } .db__ai { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; } .db__aic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; } .db__aic .ic { width: 18px; height: 18px; } .db__aic--lime { background: color-mix(in srgb, #c8ff3d 16%, transparent); color: #c8ff3d; } .db__aic--violet { background: color-mix(in srgb, #8b7bff 18%, transparent); color: #a99dff; } .db__aic--blue { background: color-mix(in srgb, #3da5ff 18%, transparent); color: #6dbcff; } .db__aic--orange { background: color-mix(in srgb, #ff5a36 18%, transparent); color: #ff8a6b; } .db__ai b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; } .db__ai small { color: var(--mute); font-size: 12.5px; } .db__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--inp); color: var(--mute); } .db__search .ic { width: 15px; height: 15px; } .db__search input { border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 8px 0; outline: none; width: 150px; } .db__tw { overflow-x: auto; } .db__table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .db__table th button { border: 0; background: none; padding: 0; color: var(--mute); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .db__table th button.on, .db__table th button:hover { color: var(--text); } .db__table td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; } .db__table tr:last-child td { border-bottom: 0; } .db__table td b { display: block; font-weight: 700; } .db__table td small { color: var(--mute); font-size: 12px; } .db__spark { display: flex; align-items: center; gap: 8px; } .db__spark em { font-style: normal; font-size: 12px; font-weight: 800; } .db__empty { color: var(--mute); } .db__bar { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; padding: 5px 0; font-size: 13.5px; } .db__bar > div { grid-column: 1 / -1; } .db__bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db__bar div { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; } .db__bar i { display: block; height: 100%; border-radius: 4px; background: #c8ff3d; } .db__bar b { text-align: right; font-variant-numeric: tabular-nums; } .db__card > [data-x="src"], .db__card > [data-x="aud"] { margin-top: 10px; } .db__gender { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 10px; font-size: 13px; color: var(--mute); } .db__gender div { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: #7d6ef0; overflow: hidden; } .db__gender i { display: block; width: var(--f); height: 100%; background: #d4448a; border-right: 2px solid var(--s1); } .db__gender span:first-of-type b { color: #e070a8; } .db__gender span:last-of-type { text-align: right; } .db__gender span:last-of-type b { color: #a99dff; } .db__geo button { font-size: 12.5px; padding: 6px 11px; } .db__tip p { color: var(--t2); line-height: 1.6; margin: 10px 0 0; } .db__chk input { position: absolute; opacity: 0; pointer-events: none; } .db__chk:has(input:not(:checked)) { opacity: .5; } .db__chk:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; } .st__note { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 14px 0; flex-wrap: wrap; } .st__note > .ic { width: 20px; height: 20px; color: var(--acc-t); flex: none; } .st__note span { flex: 1; min-width: 220px; color: var(--t2); } .st__note b { color: var(--text); margin-right: 6px; } @media (max-width: 620px) { .db__kpi { grid-template-columns: 1fr; gap: 10px; padding: 16px; } .db__ki { width: 38px; height: 38px; } .db__ki .ic { width: 18px; height: 18px; } .db__kpi b { font-size: 21px; } .db__kpi small { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .db__kpi em { margin: 0; } .db__metric, [data-f="period"] { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .db__metric button, [data-f="period"] button { flex: none; } .db__note { margin-left: 0; } } .top .cab__tabs--top { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; } .db__tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .db__tabs button { border: 0; background: none; color: var(--mute); font: inherit; font-weight: 700; font-size: 15px; padding: 12px 14px; position: relative; cursor: pointer; white-space: nowrap; } .db__tabs button.on { color: var(--text); } .db__tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--acc); } .db__tabs .db__note { margin-left: auto; padding-bottom: 12px; white-space: nowrap; } .db__plats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .db__plats button { flex: none; border: 1px solid var(--line); background: var(--s1); color: var(--t2); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .db__plats button.on { background: var(--text); color: var(--bg); border-color: var(--text); } .db__btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; } .db__btn:hover { border-color: var(--acc); } .db__btn .ic { width: 16px; height: 16px; } .db__btn[data-f="csv"] .ic { transform: rotate(180deg); } .db__btn i { font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; background: var(--acc); color: var(--acc-ink); font-size: 11px; display: inline-grid; place-items: center; } .db__btn i:empty { display: none; } .db__cat { position: relative; flex: 1 1 240px; max-width: 360px; } .db__cat input { width: 100%; } .db__sg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 6px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); display: grid; } .db__sg button { text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; cursor: pointer; } .db__sg button:hover { background: var(--s2); } .db__sg b { display: block; font-size: 14px; } .db__sg small, .db__sg p { color: var(--mute); font-size: 12.5px; margin: 0; padding: 4px 6px; } .db__fresh { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t2); margin-left: auto; cursor: help; } .db__fresh > i { width: 8px; height: 8px; border-radius: 50%; background: #0ca30c; box-shadow: 0 0 0 3px rgba(12,163,12,.2); } .db__fresh-tip { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; } .db__fresh:hover .db__fresh-tip, .db__fresh:focus-within .db__fresh-tip { display: block; } .db__more { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px 16px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); } .db__more label { display: grid; gap: 6px; font-size: 12.5px; color: var(--mute); } .db__more select { min-width: 200px; background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; color: var(--text); font: inherit; font-size: 14px; } .db__picked { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--t2); } .db__picked b { color: var(--acc-t); } .db__sub { color: var(--mute); font-size: 13px; margin: 4px 0 0; } .db__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .db__small button { font-size: 12.5px; padding: 6px 11px; } .db__ctl .db__sel { padding: 0 12px; } .db__ctl .db__sel select { padding: 7px 0; font-size: 13px; } .db__wrap { flex-wrap: wrap; margin-top: 10px; } .db__lagk { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); } .db__lagk i { width: 14px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px); } .db__ttsum { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; } .db__tt { width: 230px; } .db__tt div { display: flex; align-items: center; gap: 4px; } .db__rank { display: grid; gap: 2px; } .db__rank > div { display: grid; grid-template-columns: 18px 10px 1fr auto auto; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; font-size: 13.5px; transition: opacity .2s; } .db__rank > div.dim { opacity: .35; } .db__rank em { font-style: normal; color: var(--mute); font-size: 12px; text-align: right; } .db__rank i { width: 10px; height: 10px; border-radius: 3px; } .db__rank b { font-variant-numeric: tabular-nums; } .db__rank small { color: var(--mute); min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; } .db__ri { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .db__ri:hover { background: var(--s2); } .db__ri b { display: block; font-size: 14px; } .db__ri small { color: var(--mute); font-size: 12.5px; } .db__ri > em { font-style: normal; font-weight: 800; font-size: 13px; } .db__cov { display: inline-block; width: 36px; height: 36px; border-radius: 8px; flex: none; vertical-align: middle; } .db__new { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc-t); } .db__pos { font-style: normal; display: inline-block; width: 18px; color: var(--mute); } .db__all { margin-top: 8px; font-size: 13.5px; } .db__bar b small { color: var(--mute); font-weight: 600; margin-left: 4px; } .db__gpie { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .db__gpie > div { flex: 1; min-width: 150px; display: grid; gap: 6px; } .db__gl { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; } .db__gl i { width: 10px; height: 10px; border-radius: 3px; } .db__tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .db__chk--box { gap: 8px; font-size: 13.5px; color: var(--t2); } .db__chk--box input { position: static; opacity: 1; pointer-events: auto; } .db__colset { position: relative; } .db__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; padding: 10px 12px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); display: grid; gap: 8px; } .db__name { display: flex; align-items: center; gap: 10px; } .db__table--compact td { padding: 6px 10px; } .db__row--2eq { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .db__row--2eq { grid-template-columns: 1fr; } } .db__warnline { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: 14px; margin: 14px 0 4px; } .db__warnline .ic { width: 18px; height: 18px; color: #ffcf3d; } .db__cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 220px; margin-top: 16px; } .db__col { display: grid; grid-template-rows: 1fr auto auto; height: 100%; gap: 4px; text-align: center; } .db__col > div { display: flex; align-items: flex-end; justify-content: center; } .db__col i { display: block; width: min(46px, 70%); border-radius: 6px 6px 2px 2px; background: #c8ff3d; min-height: 3px; } .db__col b { font-size: 13px; } .db__col span { font-size: 12px; color: var(--mute); } .db__gender--big { margin-top: 18px; } .db__gender--big div { height: 18px; border-radius: 9px; } .db__gender--big span { font-size: 15px; } .db__gender--big b { font: 800 26px var(--head); display: block; } .db__gap { margin-top: 10px; } .db__kpis--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .db__kpis--3 { grid-template-columns: 1fr; } } .db__plc { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; } .db__pli { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--inp); border: 1px solid var(--line); } .db__plh { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; } .db__plpos { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, #8b7bff 18%, transparent); color: #b5aaff; font: 800 18px var(--head); } .db__plh b, .db__plt b { display: block; font-size: 15px; } .db__plh small, .db__plt small { color: var(--mute); font-size: 12.5px; } .db__plt { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; } .db__plm { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; min-height: 30px; } .db__plf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mute); } .db__plf b { display: block; color: var(--text); font-size: 13px; } @media (max-width: 620px) { .db__fresh { margin-left: 0; } .db__cat { max-width: none; } .db__ctl { justify-content: flex-start; } .db__cols { height: 180px; gap: 6px; } } .db [data-x="body"] { display: grid; gap: 14px; } .db__kpi small { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .db__kpi em { margin: 0; } .db__kpi { min-height: 112px; } .db__tt { width: 240px; } .db__pf { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px; font-size: 12.5px; color: var(--mute); } .db__pf > div { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #7d6ef0; overflow: hidden; } .db__pf > div i { display: block; height: 100%; background: #c8ff3d; border-right: 2px solid var(--s1); } .db__pf span:last-child { text-align: right; } .db__pf b { color: var(--text); } .db__legend { flex-wrap: wrap; } .db__ch--2 { margin-top: 12px; align-items: center; } .db__stack { display: grid; gap: 14px; align-content: start; } .db__gl span small { display: block; color: var(--mute); font-size: 11.5px; } .db__gpie svg circle { transition: opacity .2s; } .db__pfbig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .db__pfbig > div { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: #7d6ef0; overflow: hidden; } .db__pfbig > div i { display: block; height: 100%; background: #c8ff3d; border-right: 2px solid var(--s1); } .db__pfbig b { display: block; font: 800 22px var(--head); } .db__pfbig span:first-of-type b { color: #c8ff3d; } .db__pfbig span:last-of-type { text-align: right; } .db__pfbig span:last-of-type b { color: #a99dff; } .db__pfbig small { color: var(--mute); font-size: 12.5px; } .av__load { padding: 80px 0; text-align: center; color: var(--mute); } .top__lvl { align-self: center; height: 46px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--text); white-space: nowrap; transition: border-color .15s; } .top__lvl:hover { border-color: var(--acc); } .top__lvlr, .avh__ring { --p: 0; position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--acc) calc(var(--p) * 1%), var(--s3) 0); flex: none; } .top__lvlr::before, .avh__ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--s1); } .top__lvlr b, .avh__ring b { position: relative; font: 800 14px var(--head); } .top__lvlt b { display: block; font-size: 13px; line-height: 1.15; } .top__lvlt small { display: block; font-size: 11px; color: var(--mute); } @media (max-width: 1640px) { .top__lvlt { display: none; } .top__lvl { padding: 3px; } } .avc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; } @media (max-width: 960px) { .avc { grid-template-columns: 1fr; } } .avc__sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; } @media (max-width: 620px) { .avc__sides { grid-template-columns: 1fr 1fr; } } .avc__s { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 10px 14px; border-radius: 18px; border: 1.5px dashed var(--s4); background: var(--s1); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; } .avc__s:hover { border-color: var(--acc); transform: translateY(-2px); } .avc__s.done { border-style: solid; border-color: var(--acc); } .avc__sv { position: relative; width: 100%; aspect-ratio: 100 / 150; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #232329, #121215); overflow: hidden; display: grid; place-items: center; } .avc__sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sil { height: 92%; fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .75; } .sil .f { fill: var(--acc); stroke: none; } .avc__s b { margin-top: 6px; font-weight: 800; } .avc__s small { color: var(--mute); font-size: 12px; line-height: 1.3; min-height: 2.6em; } .avc__st { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: var(--s2); font-size: 12.5px; font-weight: 700; } .avc__s.done .avc__st { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-t); } .avc__st .ic { width: 14px; height: 14px; } .avc__note { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13px; margin-top: 14px; } .avc__note .ic { width: 15px; height: 15px; } .avc__r { display: grid; gap: 16px; padding: 22px; border-radius: 24px; background: var(--s1); border: 1px solid var(--line); } .avc__f { display: grid; gap: 8px; font-size: 13px; color: var(--mute); } .avc__f input { background: var(--inp); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 16px; } .avc__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .avc__roles button { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; cursor: pointer; } .avc__roles button .ic { grid-row: span 2; width: 20px; height: 20px; color: var(--acc-t); } .avc__roles button small { color: var(--mute); font-size: 11.5px; line-height: 1.3; } .avc__roles button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--inp)); } .avc__prog { display: grid; gap: 6px; font-size: 13px; color: var(--mute); } .capm .avm__card { max-width: 560px; } .cap__view { position: relative; aspect-ratio: 3 / 4; max-height: 62vh; margin: 12px auto; border-radius: 18px; overflow: hidden; background: #0d0d10; display: grid; place-items: center; } .cap__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .cap__view .sil { position: relative; height: 94%; stroke-width: 1.6; opacity: .95; filter: drop-shadow(0 0 6px rgba(200,255,61,.6)); } .cap__cd { position: absolute; font: 800 96px var(--head); color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); } .cap__off { position: absolute; bottom: 14px; left: 14px; right: 14px; margin: 0; text-align: center; color: var(--t2); font-size: 14px; } .cap__view.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: capFlash .4s forwards; } @keyframes capFlash { to { opacity: 0; } } .cap__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .cap__btns label { cursor: pointer; } .avp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; padding: 26px; align-items: center; } @media (max-width: 820px) { .avp { grid-template-columns: 1fr; } } .avp__imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .avp__img { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #111; } .avp__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.1); } .avp__img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(200,255,61,.08) 0 1px, transparent 1px 6px); } .avp__scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(200,255,61,.45), transparent); animation: avScan 1.6s ease-in-out infinite; } @keyframes avScan { from { top: -30%; } to { top: 100%; } } .avp__bar { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; margin-top: 16px; } .avp__bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .1s; } .avp__pct { display: block; margin-top: 8px; font: 800 26px var(--head); } .avp__steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; } .avp__steps li { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 14.5px; } .avp__steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--s4); flex: none; } .avp__steps li.now { color: var(--text); } .avp__steps li.now::before { border-color: var(--acc); border-top-color: transparent; animation: spin .8s linear infinite; } .avp__steps li.done { color: var(--text); } .avp__steps li.done::before { background: var(--acc); border-color: var(--acc); } .avr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; } @media (max-width: 820px) { .avr { grid-template-columns: 1fr; } } .avr__stage { position: relative; height: 520px; border-radius: 26px; background: radial-gradient(circle at 50% 75%, rgba(200,255,61,.16), transparent 55%), radial-gradient(circle at 50% 30%, #1e1e24, #0d0d10 70%); overflow: hidden; } .avr__r { display: grid; gap: 12px; justify-items: start; } .avr__role { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); } .avr__role .ic { width: 24px; height: 24px; color: var(--acc-t); } .avr__role b { display: block; } .avr__role small { color: var(--mute); } .av3d__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; } .av3d__c:active { cursor: grabbing; } .avh__top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); margin-bottom: 14px; } .avh__me { display: flex; align-items: center; gap: 12px; } .avh__me img, .avh__me > i { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--acc); display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--s3); } .avh__me b { display: block; font: 800 17px var(--head); } .avh__me small { display: inline-flex; align-items: center; gap: 5px; color: var(--mute); font-size: 13px; } .avh__me small .ic { width: 14px; height: 14px; color: var(--acc-t); } .avh__lvl { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; max-width: 420px; } .avh__ring { width: 52px; height: 52px; } .avh__ring::before { inset: 4px; } .avh__ring b { font-size: 19px; } .avh__lvl > span { flex: 1; min-width: 0; } .avh__lvl b { display: block; } .avh__lvl small { color: var(--mute); font-size: 12.5px; } .avh__lvl em { color: var(--acc-t); font-style: normal; font-weight: 800; } .avh__xp { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; margin-top: 6px; } .avh__xp i { display: block; height: 100%; background: linear-gradient(90deg, #8b7bff, var(--acc)); border-radius: 3px; transition: width .4s; } .avh__cur { display: flex; gap: 8px; flex-wrap: wrap; } .avh__cur > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--inp); border: 1px solid var(--line); font-size: 14px; } .avh__cur .ic { width: 16px; height: 16px; color: var(--acc-t); } .avh__cur span:nth-child(2) .ic { color: #a99dff; } .avh__en .ic { color: #ffcf3d !important; } .avh__cur small { color: var(--mute); font-size: 11.5px; } .avh__boost { border-color: #ff8a5c !important; } .avh__boost .ic { color: #ff8a5c !important; } .avh { display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 14px; align-items: stretch; } @media (max-width: 1080px) { .avh { grid-template-columns: 1fr 1fr; } .avh__stage { grid-column: 1 / -1; order: -1; } } @media (max-width: 560px) { .avh { grid-template-columns: 1fr 1fr; gap: 10px; } } .avh__col { display: grid; gap: 12px; align-content: start; } .avw { position: relative; display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--s2), var(--s1)); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; min-height: 104px; } .avw:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); } .avw__h { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: 13px; font-weight: 700; } .avw__h .ic { width: 16px; height: 16px; color: var(--acc-t); } .avw b { font: 800 18px var(--head); letter-spacing: -.01em; } .avw small { color: var(--mute); font-size: 12px; } .avw__bar { height: 5px; border-radius: 3px; background: var(--s3); overflow: hidden; } .avw__bar i { display: block; height: 100%; background: var(--acc); } .avw--g { background: linear-gradient(160deg, color-mix(in srgb, #8b7bff 16%, var(--s2)), var(--s1)); } .avw--g .avw__h .ic { color: #a99dff; } .avw.ping::after { content: ""; position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a36; box-shadow: 0 0 0 4px rgba(255,90,54,.25); animation: hot 1.4s infinite; } .avh__stage { position: relative; min-height: 540px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 82%, rgba(200,255,61,.18), transparent 45%), radial-gradient(circle at 50% 30%, #1f1f26, #0c0c0f 72%); } .avh__3d { position: absolute; inset: 0; } .avh__plate { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; } .avh__plate b { display: block; font: 800 22px var(--head); letter-spacing: .04em; text-transform: uppercase; } .avh__plate span { color: var(--acc-t); font-size: 13px; font-weight: 700; } .avh__acts { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .avh__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(20,20,22,.85); backdrop-filter: blur(8px); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .avh__btn:hover { border-color: var(--acc); } .avh__btn .ic { width: 15px; height: 15px; color: var(--acc-t); } .avh__hint { position: absolute; bottom: 12px; left: 0; right: 0; margin: 0; text-align: center; color: var(--mute); font-size: 12px; pointer-events: none; } .avn { display: flex; gap: 6px; margin: 16px 0 14px; overflow-x: auto; scrollbar-width: none; } .avn button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--s1); color: var(--t2); font: inherit; font-weight: 700; cursor: pointer; } .avn button .ic { width: 17px; height: 17px; } .avn button.on { background: var(--text); color: var(--bg); border-color: var(--text); } .avpn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 860px) { .avpn__grid { grid-template-columns: 1fr; } } .avpn__c { padding: 20px 22px; display: grid; gap: 12px; align-content: start; } .avpn__h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin: 6px 0 10px; } .avpn__h em { font-style: normal; font-size: 13px; color: var(--acc-t); font-weight: 700; } .avpn__c .avpn__h { margin: 0; } .avpn__sub { color: var(--mute); font-size: 13.5px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .avpn__sub .ic { width: 16px; height: 16px; color: var(--acc-t); } .avst { display: grid; grid-template-columns: minmax(120px, 1fr) 1.2fr 48px 32px; gap: 10px; align-items: center; } .avst b { font-size: 14px; } .avst > span small { display: block; color: var(--mute); font-size: 11.5px; } .avst__bar { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; } .avst__bar i { display: block; height: 100%; background: linear-gradient(90deg, #8b7bff, var(--acc)); } .avst__v { text-align: right; } .avst__v small { color: var(--acc-t); font-size: 11px; margin-left: 2px; } .avst button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; cursor: pointer; animation: hot 1.6s infinite; } .avst button .ic { width: 16px; height: 16px; } .avach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .avach__i { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: var(--inp); border: 1px solid var(--line); opacity: .5; } .avach__i.on { opacity: 1; border-color: color-mix(in srgb, #ffcf3d 50%, var(--line)); } .avach__i .ic { width: 22px; height: 22px; color: #ffcf3d; } .avach__i b { display: block; font-size: 13px; } .avach__i small { color: var(--mute); font-size: 11.5px; } .avgm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 860px) { .avgm { grid-template-columns: 1fr; } } .avgm__c { padding: 22px; display: grid; gap: 8px; align-content: start; } .avgm__ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, #8b7bff 18%, transparent); color: #b5aaff; } .avgm__ic .ic { width: 26px; height: 26px; } .avgm__c--rhythm .avgm__ic { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-t); } .avgm__c--battle .avgm__ic { background: color-mix(in srgb, #ff5a36 16%, transparent); color: #ff8a6b; } .avgm__c b { font: 800 20px var(--head); } .avgm__c p { color: var(--t2); margin: 0; font-size: 14px; line-height: 1.5; } .avgm__c small { color: var(--mute); } .avgm__c span { font-weight: 700; font-size: 14px; } .avgm__c .btn { justify-self: start; margin-top: 6px; } .avwd__slots { margin-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .avwd__slots button { flex: none; } .avwd__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; } .avit { position: relative; display: grid; gap: 4px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--s1); cursor: pointer; transition: border-color .15s, transform .15s; } .avit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 60%); pointer-events: none; } .avit:hover { transform: translateY(-2px); border-color: var(--rc); } .avit.on { border-color: var(--acc); } .avit.try { border-color: var(--rc); box-shadow: 0 0 0 2px var(--rc); } .avit__sw { position: relative; aspect-ratio: 1.4; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 -30px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); } .avit__sw .ic { width: 34px; height: 34px; color: rgba(255,255,255,.85); filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .avit b { font-size: 14px; line-height: 1.3; } .avit small { font-size: 12px; font-weight: 700; } .avit__b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .avit__b .ic { width: 14px; height: 14px; } .avit__b--buy { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); } .avit__st { position: relative; margin-top: 4px; text-align: center; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc-t); font-size: 13px; font-weight: 700; } .avgr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 860px) { .avgr { grid-template-columns: 1fr 1fr; } } .avgr__c { padding: 18px; display: grid; gap: 6px; justify-items: center; text-align: center; } .avgr__ic { position: relative; width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 22%, transparent), var(--s2)); } .avgr__ic .ic { width: 32px; height: 32px; color: var(--acc-t); } .avgr__ic em { position: absolute; right: -6px; top: -6px; font-style: normal; font: 800 13px var(--head); padding: 3px 7px; border-radius: 999px; background: var(--text); color: var(--bg); } .avgr__c b { font-size: 16px; } .avgr__c small { color: var(--acc-t); font-weight: 700; } .avgr__info { display: flex; gap: 12px; font-size: 12.5px; color: var(--mute); } .avgr__info span { display: inline-flex; align-items: center; gap: 4px; } .avgr__info .ic { width: 13px; height: 13px; } .avgr__max { color: #ffcf3d; font-weight: 800; } .avbn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } @media (max-width: 760px) { .avbn { grid-template-columns: 1fr; } } .avbn__c { padding: 18px; display: grid; gap: 10px; justify-items: start; background: linear-gradient(140deg, color-mix(in srgb, #8b7bff 14%, var(--s1)), var(--s1)) !important; } .avbn__c b { font: 800 17px var(--head); } .avbn__its { display: flex; flex-wrap: wrap; gap: 6px; } .avbn__its span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--rc); font-size: 12.5px; } .avbn__its i { width: 12px; height: 12px; border-radius: 50%; } .avvp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 760px) { .avvp { grid-template-columns: 1fr 1fr; } } .avvp__c { position: relative; padding: 18px; display: grid; justify-items: center; gap: 6px; } .avvp__c > .ic { width: 34px; height: 34px; color: #a99dff; } .avvp__c b { font: 800 22px var(--head); } .avvp__c em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc-t); } .avps__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; } .avps__me { display: grid; gap: 6px; min-width: 240px; } .avps__prem { display: inline-flex; align-items: center; gap: 6px; color: #ffcf3d; font-weight: 800; } .avps__prem .ic { width: 16px; height: 16px; } .avps__track { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; } .avps__t { display: grid; gap: 8px; opacity: .55; } .avps__t.open { opacity: 1; } .avps__t > em { font-style: normal; text-align: center; font: 800 14px var(--head); color: var(--mute); } .avps__t.open > em { color: var(--acc-t); } .avps__rw { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px; min-height: 120px; align-content: center; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); font-size: 13px; } .avps__rw .ic { width: 22px; height: 22px; color: var(--acc-t); } .avps__rw--p { background: linear-gradient(160deg, color-mix(in srgb, #ffcf3d 14%, var(--s1)), var(--s1)); border-color: color-mix(in srgb, #ffcf3d 30%, var(--line)); } .avps__rw--p > .ic { color: #ffcf3d; } .avps__rw button { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--acc); color: var(--acc-ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .avps__rw small { color: var(--mute); } .avps__rw small .ic { width: 14px; height: 14px; color: var(--mute); } .avpk { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .avpk__c { padding: 18px; display: grid; gap: 6px; justify-items: start; opacity: .6; } .avpk__c.on { opacity: 1; border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); } .avpk__lv { display: flex; align-items: center; gap: 8px; } .avpk__lv .ic { width: 22px; height: 22px; color: var(--acc-t); } .avpk__lv em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--mute); } .avpk__c b { font-size: 15px; } .avpk__c small { color: var(--mute); } .avpk__need { font-size: 12.5px; color: var(--t2); } .avm { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(5,5,6,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: amFade .2s; } .avm.out { opacity: 0; transition: opacity .2s; } .avm__card { position: relative; width: min(680px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; border-radius: 26px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); animation: amUp .25s; } .avm__card h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); } .avm__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--s2); color: var(--text); display: grid; place-items: center; cursor: pointer; } .avm__x .ic { width: 18px; height: 18px; } .avm.game .avm__card { width: min(760px, 100%); } .avm.lvl .avm__card { text-align: center; width: min(420px, 100%); } .avm__lvl { display: grid; justify-items: center; gap: 8px; } .avm__lvln { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font: 800 52px var(--head); color: var(--acc-ink); background: radial-gradient(circle at 30% 30%, #e6ff99, var(--acc)); box-shadow: 0 0 60px rgba(200,255,61,.55); animation: mtPop .6s cubic-bezier(.3,1.7,.5,1) both; } .avm__perk { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--text); } .avm__perk .ic { width: 18px; height: 18px; color: var(--acc-t); } .avm__done { display: flex; align-items: center; gap: 8px; color: var(--acc-t); font-weight: 700; } .avm__done .ic { width: 18px; height: 18px; } .avt { position: fixed; left: 50%; bottom: 96px; z-index: 3100; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(20,20,22,.95); border: 1px solid var(--line); box-shadow: 0 20px 40px -14px rgba(0,0,0,.9); font-size: 14px; white-space: nowrap; animation: avtIn .35s cubic-bezier(.3,1.5,.5,1); transition: opacity .4s, transform .4s; } .avt .ic { width: 17px; height: 17px; color: var(--acc-t); } .avt em { font-style: normal; color: #ff8a5c; font-weight: 800; } .avt.rare { border-color: #ffcf3d; } .avt.rare .ic { color: #ffcf3d; } .avt.out { opacity: 0; transform: translate(-50%, 20px); } .avt + .avt { bottom: 150px; } @keyframes avtIn { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } } .avdl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 18px 0; } @media (max-width: 560px) { .avdl { grid-template-columns: repeat(4, 1fr); } } .avdl__d { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--inp); border: 1px solid var(--line); font-size: 12px; } .avdl__d em { font-style: normal; color: var(--mute); font-size: 11px; } .avdl__d .ic { width: 22px; height: 22px; color: var(--t2); } .avdl__d.got { opacity: .45; } .avdl__d.got .ic { color: var(--acc-t); } .avdl__d.now { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); } .avdl__d.now .ic { color: var(--acc-t); } .avdl__d.big { background: linear-gradient(160deg, color-mix(in srgb, #ffcf3d 18%, var(--inp)), var(--inp)); } .avdl__d.big .ic { color: #ffcf3d; } .avq { display: grid; gap: 10px; margin-top: 14px; } .avq__i { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--inp); border: 1px solid var(--line); } .avq__i b { display: block; } .avq__i small { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); font-size: 12px; margin-right: 6px; } .avq__i small .ic { width: 13px; height: 13px; } .avq__i.ok { border-color: var(--acc); } .avq__i.got { opacity: .55; } .avq__i em .ic { width: 22px; height: 22px; color: var(--acc-t); } .avwh { position: relative; width: min(320px, 80vw); aspect-ratio: 1; margin: 20px auto 10px; } .avwh__w { position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--s2); box-shadow: 0 0 0 2px var(--line), 0 20px 50px -10px rgba(0,0,0,.8); transition: transform 4s cubic-bezier(.15,.9,.2,1); } .avwh__w span { position: absolute; left: 50%; top: 50%; width: 46%; transform-origin: 0 50%; transform: rotate(calc(var(--a) - 90deg)); padding-left: 34px; font-size: 11.5px; font-weight: 800; color: #0b0b0c; white-space: nowrap; } .avwh__hub { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--s1); border: 3px solid var(--acc); display: grid; place-items: center; } .avwh__hub .ic { width: 22px; height: 22px; color: var(--acc-t); } .avwh__ptr { position: absolute; top: -12px; left: 50%; z-index: 2; width: 0; height: 0; margin-left: -12px; border: 12px solid transparent; border-top: 22px solid var(--text); filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); } .avwh__res { text-align: center; min-height: 24px; margin-bottom: 10px; } .avwh__res b { color: var(--acc-t); } .avm .btn { margin-top: 6px; } .avrt { display: grid; gap: 6px; margin-top: 14px; } .avrt__i { display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--inp); } .avrt__i em { font-style: normal; color: var(--mute); font-weight: 800; } .avrt__i i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--acc-ink); } .avrt__i.me { border: 1px solid var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--inp)); } .avrt__i span { font-weight: 800; font-variant-numeric: tabular-nums; } .avrt__i:nth-child(-n+3) em { color: #ffcf3d; } .rg__pick { display: grid; gap: 12px; justify-items: center; text-align: center; } .rg__ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-t); } .rg__ic .ic { width: 30px; height: 30px; } kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--s3); border-bottom: 2px solid var(--s5); font: 800 13px var(--ui, sans-serif); color: var(--text); } .rg__tracks { display: grid; gap: 8px; width: 100%; } .rg__tracks button, .gt__opts button { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; text-align: left; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; cursor: pointer; } .rg__tracks img, .gt__opts img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; } .rg__tracks b, .gt__opts b { display: block; font-size: 14px; } .rg__tracks small, .gt__opts small { color: var(--mute); font-size: 12.5px; } .rg__tracks button.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); } .rg__note { color: var(--mute); font-size: 12.5px; margin: 0; } .rg__load { display: grid; justify-items: center; gap: 14px; padding: 60px 0; color: var(--t2); } .rg__spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--s3); border-top-color: var(--acc); animation: spin .8s linear infinite; } .rg { display: grid; gap: 8px; } .rg__hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 40px; } .rg__tt b { display: block; } .rg__tt small { color: var(--mute); } .rg__sc { text-align: right; } .rg__sc b { display: block; font: 800 26px var(--head); font-variant-numeric: tabular-nums; } .rg__sc small { color: var(--acc-t); font-weight: 800; } .rg__bar { height: 4px; border-radius: 2px; background: var(--s3); overflow: hidden; } .rg__bar i { display: block; height: 100%; background: var(--acc); } #rgC { width: 100%; height: min(62vh, 520px); border-radius: 18px; background: linear-gradient(180deg, #0d0d10, #151519); touch-action: none; display: block; } .rg__keys { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; color: var(--mute); font-weight: 800; font-size: 13px; } .rg__res { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0; } .rg__grade { width: 110px; height: 110px; border-radius: 30px; display: grid; place-items: center; font: 800 46px var(--head); color: #0b0b0c; animation: mtPop .6s cubic-bezier(.3,1.7,.5,1) both; } .rg__grade--S { background: linear-gradient(135deg, #e6ff99, #c8ff3d); box-shadow: 0 0 60px rgba(200,255,61,.5); } .rg__grade--A { background: linear-gradient(135deg, #c9c0ff, #8b7bff); } .rg__grade--B { background: linear-gradient(135deg, #9fd4ff, #3da5ff); } .rg__grade--C, .rg__grade--D { background: linear-gradient(135deg, #ffb39b, #ff5a36); } .rg__res h2 { margin: 0; } .rg__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .rg__stats span { padding: 8px 12px; border-radius: 12px; background: var(--inp); font-size: 12px; color: var(--mute); } .rg__stats b { display: block; color: var(--text); font-size: 16px; } .gt { display: grid; gap: 12px; } .gt__top { display: flex; justify-content: space-between; padding-right: 44px; } .gt__top span { display: inline-flex; align-items: center; gap: 6px; color: var(--acc-t); font-weight: 800; } .gt__top .ic { width: 16px; height: 16px; } .gt__eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 70px; } .gt__eq i { width: 8px; border-radius: 3px; background: linear-gradient(var(--acc), #8b7bff); animation: gtEq .6s ease-in-out var(--d) infinite alternate; height: 20%; } @keyframes gtEq { to { height: 100%; } } .gt__time { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; } .gt__time i { display: block; height: 100%; width: 100%; background: var(--acc); transition: width .1s linear; } .gt__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 560px) { .gt__opts { grid-template-columns: 1fr; } } .gt__opts button.ok { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--inp)); } .gt__opts button.bad { border-color: #ff5a36; background: color-mix(in srgb, #ff5a36 14%, var(--inp)); } .bt { display: grid; gap: 14px; text-align: center; } .bt__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-right: 30px; } .bt__p { display: grid; justify-items: center; gap: 4px; } .bt__p img, .bt__p > i { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font: 800 28px var(--head); font-style: normal; color: var(--acc-ink); background: var(--s3); box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--line); } .bt__p small { color: var(--mute); } .bt__p em { font-style: normal; font: 800 26px var(--head); color: var(--acc-t); } .bt__x { font: 800 30px var(--head); color: #ff5a36; } .bt__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bt__cards button { padding: 18px 10px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--s2), var(--inp)); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; } .bt__cards button:hover { transform: translateY(-4px); border-color: var(--acc); } .bt__cards small { display: block; color: var(--mute); font-weight: 700; } .bt__cards b { display: block; font: 800 34px var(--head); } .bt__duel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bt__duel > div { display: grid; gap: 6px; justify-items: center; padding: 16px; border-radius: 18px; background: var(--inp); } .bt__duel small { color: var(--mute); } .bt__roll { font: 800 40px var(--head); } .bt__duel em { font-style: normal; font: 800 22px var(--head); opacity: 0; transition: opacity .3s; } .bt__duel em.on { opacity: 1; color: var(--acc-t); } .bt__res { font: 800 20px var(--head); margin: 0; } .avwh__w span i { display: inline-block; font-style: normal; } .avwh__w span.flip i { transform: rotate(180deg); } .avtest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: -4px 0 14px; border-radius: 18px; border: 1px dashed color-mix(in srgb, #ffcf3d 55%, var(--line)); background: color-mix(in srgb, #ffcf3d 6%, var(--s1)); } .avtest > b { display: inline-flex; align-items: center; gap: 6px; color: #ffcf3d; font-size: 14px; margin-right: 4px; } .avtest > b .ic { width: 16px; height: 16px; } .avtest button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .avtest button:hover { border-color: #ffcf3d; } .avtest button .ic { width: 14px; height: 14px; color: #ffcf3d; } .avtest .avtest__r { color: #ff8a6b; } .avtest .avtest__r .ic { color: #ff8a6b; } .avtest small { color: var(--mute); font-size: 12px; margin-left: auto; } .avh__me { border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 18px; transition: background .15s; } .avh__me:hover { background: var(--s2); } .avh__pring { --p: 0; position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffcf3d calc(var(--p) * 1%), var(--s3) 0); } .avh__pring img, .avh__pring > i { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font: 800 20px var(--head); font-style: normal; background: var(--s2); box-shadow: 0 0 0 3px var(--s1); } .avh__pring em { position: absolute; right: -6px; bottom: -4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 5px; border-radius: 999px; background: #ffcf3d; color: #0b0b0c; font: 800 12px var(--ui, sans-serif); font-style: normal; box-shadow: 0 0 0 2px var(--s1); } .avh__pring em .ic { width: 12px; height: 12px; fill: currentColor; } .avh__pring--big { width: 96px; height: 96px; } .avh__pring--big img, .avh__pring--big > i { width: 82px; height: 82px; font-size: 32px; } .avh__me small { display: flex; } .avh__pp { color: #ffcf3d !important; font-weight: 700; } .avh__ver { display: inline-flex; vertical-align: -3px; } .avh__ver .ic { width: 18px; height: 18px; color: var(--acc-t); } .avw.lock, .avn button.lock { position: relative; opacity: .55; } .avw.lock:hover { transform: none; } .lockt { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, #ffcf3d 14%, transparent); color: #ffcf3d; font-size: 11.5px; font-weight: 800; justify-self: start; } .lockt .ic { width: 12px; height: 12px; } .avn button .lockt { margin: 0 0 0 4px; padding: 2px 7px; font-size: 0; gap: 0; } .avn button .lockt .ic { width: 13px; height: 13px; } .avm.prof .avm__card { width: min(760px, 100%); } .apf__top { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; padding-right: 30px; } .apf__top h2 { margin: 0 0 4px; } .apf__bar { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; margin-top: 8px; } .apf__bar b { font: 800 18px var(--head); } .apf__bar span { display: inline-flex; align-items: center; gap: 4px; color: #ffcf3d; font-weight: 800; } .apf__bar .ic { width: 15px; height: 15px; fill: currentColor; } .apf__list { display: grid; gap: 10px; } .apf__i { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--inp); border: 1px solid var(--line); transition: border-color .2s; } .apf__i.ok { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); } .apf__i.focus { border-color: #ffcf3d; box-shadow: 0 0 0 2px #ffcf3d; } .apf__h { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; } .apf__ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); } .apf__ic .ic { width: 16px; height: 16px; color: var(--t2); } .apf__i.ok .apf__ic { background: color-mix(in srgb, var(--acc) 18%, transparent); } .apf__i.ok .apf__ic .ic { color: var(--acc-t); } .apf__rw { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: #ffcf3d; } .apf__rw .ic { width: 14px; height: 14px; fill: currentColor; } .apf__op { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); } .apf__op .ic { width: 14px; height: 14px; } .apf__op.on { color: var(--acc-t); } .apf__op b { color: var(--text); } .apf__f input, .apf__f textarea { width: 100%; box-sizing: border-box; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); font: inherit; font-size: 15px; } .apf__f input:focus, .apf__f textarea:focus { outline: none; border-color: var(--acc); } .apf__f label.btn { cursor: pointer; } .apf__f .btn .ic { width: 15px; height: 15px; } .apf__cnt, .apf__note { color: var(--mute); font-size: 12px; } .apf__chips { display: flex; flex-wrap: wrap; gap: 6px; } .apf__chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--t2); font: inherit; font-size: 13px; cursor: pointer; } .apf__chips button.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); font-weight: 700; } .apf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .apf__grid label { display: grid; gap: 4px; font-size: 12px; color: var(--mute); } @media (max-width: 560px) { .apf__grid { grid-template-columns: 1fr; } .apf__top { flex-direction: column; align-items: flex-start; } } .apf__full { background: linear-gradient(140deg, color-mix(in srgb, #ffcf3d 12%, var(--inp)), var(--inp)); } .avm__lvln--full { background: radial-gradient(circle at 30% 30%, #fff1b3, #ffcf3d); box-shadow: 0 0 60px rgba(255,207,61,.5); } .avm__lvln--full .ic { width: 54px; height: 54px; } .av3d--loading::after { content: ""; position: absolute; left: 50%; top: 45%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: var(--acc); animation: spin .8s linear infinite; } #finMode { font-family: var(--head); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; } #finMode small { font-family: var(--ui, sans-serif); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-right: 2px; } .avc__s.warn { border-style: solid; border-color: #ffcf3d; } .avc__s.warn .avc__st { background: color-mix(in srgb, #ffcf3d 16%, transparent); color: #ffcf3d; } .avwh__w { background: #151517; overflow: hidden; } .avwh__w svg { display: block; width: 100%; height: 100%; } .avwh__t { font: 800 8.4px var(--ui, sans-serif); fill: #0b0b0c; letter-spacing: -.01em; } .avwh__i { fill: none; stroke: #0b0b0c; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .am__forgot { justify-self: center; margin-top: 4px; font-size: 14px; color: var(--t2); text-decoration: none; } .am__forgot:hover { color: var(--acc-t); } .am__alt .link { justify-self: center; font-size: 14px; color: var(--t2); text-decoration: none; } .am__alt .am__sub { margin: 0 0 4px; } .am__err.ok { color: var(--acc-t); } .am__agree { align-items: flex-start; font-size: 13px; line-height: 1.4; } .am__agree a { color: var(--acc-t); text-decoration: underline; } .am__cap:not([hidden]) { min-height: 102px; border-radius: 12px; overflow: hidden; } .doc__wrap { max-width: 860px; } .doc h1 { font-size: clamp(28px, 4vw, 44px); margin: 10px 0 8px; } .doc h2 { font-size: 20px; margin: 30px 0 10px; font-family: var(--ui); font-weight: 800; } .doc p { color: var(--t2); line-height: 1.65; } .doc a:not(.btn):not(.back):not(.doc__item) { color: var(--acc-t); } .doc__meta { color: var(--mute) !important; font-size: 14px; } .doc__draft { padding: 12px 16px; border-radius: 14px; border: 1px dashed #ffcf3d; background: color-mix(in srgb, #ffcf3d 8%, transparent); color: #ffdf7a !important; font-size: 14px; } .doc__small { font-size: 13px; color: var(--mute) !important; } .doc__table { overflow-x: auto; margin: 10px 0; } .doc__table table { width: 100%; border-collapse: collapse; font-size: 14px; } .doc__table th, .doc__table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--t2); } .doc__table th { color: var(--text); font-size: 13px; white-space: nowrap; } .doc__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 20px 0; } .doc__item { display: grid; gap: 4px; padding: 18px 20px; color: var(--text); transition: border-color .15s; } .doc__item:hover { border-color: var(--acc); } .doc__item span { color: var(--mute); font-size: 14px; } .doc__req { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; } .doc__req dt { color: var(--mute); } .doc__req dd { margin: 0; } @media (max-width: 560px) { .doc__req { grid-template-columns: 1fr; } .doc__req dd { margin-bottom: 8px; } } .foot__docs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; } .foot__docs a { color: var(--mute); } .foot__docs a:hover { color: var(--acc-t); } .ck { position: fixed; left: 16px; bottom: 16px; z-index: 2500; max-width: 420px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(20,20,22,.96); border: 1px solid var(--line); box-shadow: 0 20px 40px -14px rgba(0,0,0,.8); font-size: 13px; color: var(--t2); } .ck a { color: var(--acc-t); } .ck .btn { flex: none; } @media (max-width: 560px) { .ck { right: 16px; max-width: none; bottom: 84px; } } @media (min-width: 561px) { .ck { left: 84px; } } .hlp__btn { position: fixed; left: 18px; bottom: 18px; z-index: 1600; width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); box-shadow: 0 16px 34px -12px rgba(200,255,61,.45), 0 10px 26px -10px rgba(0,0,0,.7); cursor: pointer; transition: transform .15s; } .hlp__btn:hover { transform: translateY(-2px); } .hlp__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hlp__btn.on { transform: rotate(-8deg) scale(.94); } .hlp { position: fixed; left: 18px; bottom: 84px; z-index: 1600; width: 370px; height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--line); background: var(--s1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); overflow: hidden; opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom left; pointer-events: none; transition: opacity .18s, transform .18s; } .hlp.on { opacity: 1; transform: none; pointer-events: auto; } .hlp__h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); } .hlp__h b { display: block; font-size: 15px; } .hlp__h small { color: var(--mute); font-size: 12px; } .hlp__ava { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); font-weight: 800; font-size: 13px; } .hlp__x { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--s3); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; } .hlp__list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; } .hlp__m { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .hlp__m--a { align-self: flex-start; background: var(--s2); color: var(--text); border-bottom-left-radius: 6px; } .hlp__m--u { align-self: flex-end; background: var(--acc); color: var(--acc-ink); border-bottom-right-radius: 6px; } .hlp__m a { color: var(--acc-t); text-decoration: underline; text-underline-offset: 2px; } .hlp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .hlp__chips button { border: 1px solid var(--line); background: none; color: var(--text); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; } .hlp__chips button:hover { border-color: var(--acc); color: var(--acc-t); } .hlp__typing { display: flex; gap: 4px; padding: 13px 14px; } .hlp__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: hlpDot 1s infinite; } .hlp__typing i:nth-child(2) { animation-delay: .15s; } .hlp__typing i:nth-child(3) { animation-delay: .3s; } @keyframes hlpDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .hlp__f { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); } .hlp__f input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--inp); color: var(--text); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 14px; } .hlp__f input:focus { outline: none; border-color: var(--acc); } .hlp__f .btn { width: 42px; padding: 0; font-size: 18px; } .hlp__note { margin: 0; padding: 0 14px 10px; font-size: 11px; color: var(--mute); } .hlp__note a { color: inherit; text-decoration: underline; } @media (max-width: 600px) { .hlp__btn { left: auto; right: 12px; bottom: 80px; width: 50px; height: 50px; } .hlp { left: 10px; right: 10px; width: auto; bottom: 140px; height: min(520px, calc(100dvh - 170px)); transform-origin: bottom right; } .hlp__f input { font-size: 16px; } } @media print { .hlp, .hlp__btn { display: none; } } html.av-made .pg-hero, html.av-made .av-intro { display: none; } html.av-made .av { padding-top: 28px; } .mk__cap { margin: -2px 0 6px; font-size: 12.5px; color: var(--mute); transition: color .15s; } .mk__cap.on { color: #ffb86b; } .mk__cap .link { color: var(--acc-t); text-decoration: underline; font-size: inherit; padding: 0; } @media (max-width: 600px) { .mk__sz { padding: 8px 3px; } .mk__sz div { gap: 2px; } .mk__sz button { width: 22px; height: 22px; font-size: 14px; } } .top__cart { position: relative; align-self: center; flex: none; width: 44px; height: 44px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--line); background: var(--pill, var(--s2)); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .15s; } .top__cart:hover { border-color: var(--acc); } .top__cart[hidden] { display: none; } .top__cart .ic, .top__cart svg { width: 20px; height: 20px; } .top__cart b { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 11px; line-height: 19px; text-align: center; } .cart { position: fixed; inset: 0; z-index: 3100; } .cart[hidden] { display: none; } .cart__back { position: absolute; inset: 0; background: rgba(5,5,6,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: amFade .2s; } .cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--s1); border-left: 1px solid var(--line); box-shadow: -30px 0 60px -30px rgba(0,0,0,.7); animation: cartIn .25s ease-out; } @keyframes cartIn { from { transform: translateX(40px); opacity: 0; } } .cart__h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .cart__h b { font-size: 20px; } .cart__h .am__x { position: static; } .cart__list { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; } .cart__it { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .cart__it > i { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line); } .cart__it small { display: block; color: var(--acc-t); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .cart__it a, .cart__it b { display: block; color: var(--text); font-weight: 700; line-height: 1.3; } .cart__it a:hover { color: var(--acc-t); } .cart__it span { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.35; margin-top: 2px; } .cart__pr { text-align: right; white-space: nowrap; } .cart__pr b { font-size: 14px; } .cart__pr .link { font-size: 12px; color: var(--mute); margin-top: 4px; } .cart__foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); } .cart__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; } .cart__sum b { font-size: 22px; } .cart__note { margin: 8px 0 14px; color: var(--mute); font-size: 12.5px; line-height: 1.45; } .cart__buy { width: 100%; } .cart__err { margin: 10px 0 0; color: var(--hot, #ff6b5b); font-size: 13px; } .cart__empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 8px; color: var(--mute); } .cart__empty svg, .cart__empty .ic { width: 42px; height: 42px; color: var(--s5); } .cart__empty b { color: var(--text); font-size: 18px; } .cart__done svg, .cart__done .ic { color: var(--acc-t); } .cart__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; } .cart__go a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-size: 13px; } .cart__go a:hover { border-color: var(--acc); color: var(--acc-t); } .cart-toast { position: fixed; left: 50%; bottom: 26px; z-index: 3050; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); font-size: 14px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .cart-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .cart-toast svg, .cart-toast .ic { width: 18px; height: 18px; color: var(--acc-t); } .cart-toast .link { font-weight: 700; } @media (max-width: 600px) { .top__cart { width: 40px; height: 40px; margin-right: 4px; } .cart-toast { bottom: 84px; } } .fd__grid { display: grid; grid-template-columns: 230px minmax(0, 620px) 300px; gap: 24px; justify-content: center; align-items: start; } .fd__side, .fd__right { position: sticky; top: 92px; display: grid; gap: 14px; } .fd__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; } .fd-load, .fd__load { color: var(--mute); padding: 40px 0; text-align: center; } .fd-ava { --h: 80; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0b0b0c; text-transform: uppercase; background: linear-gradient(135deg, hsl(var(--h) 85% 68%), hsl(calc(var(--h) + 60) 80% 58%)); } .fd-ava--lg { width: 64px; height: 64px; font-size: 24px; } .fd-ava--xl { width: 88px; height: 88px; font-size: 34px; } .fd-me { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 20px 14px; } .fd-me b { font-size: 17px; } .fd-me a:not(.fd-ava) { color: var(--acc-t); font-size: 13px; } .fd-nav { display: grid; gap: 4px; } .fd-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--t2); font-weight: 600; } .fd-nav a:hover { background: var(--s1); color: var(--text); } .fd-nav a.on { background: var(--s2); color: var(--text); } .fd-nav svg { width: 20px; height: 20px; } .fd-nav em { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; } .fd-tabs { display: flex; width: 100%; } .fd-tabs a { flex: 1; text-align: center; } .fd-h { color: var(--mute); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 2px; } .fd-empty { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--mute); padding: 36px 12px; } .fd-empty b { color: var(--text); font-size: 17px; } .fd-title { font-size: 28px; margin: 4px 0 6px; } .fd-cmp { display: flex; gap: 12px; padding: 16px; } .fd-cmp__b { flex: 1; min-width: 0; display: grid; gap: 10px; } .fd-cmp textarea { width: 100%; resize: vertical; min-height: 64px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; padding: 8px 0; } .fd-cmp textarea:focus { outline: none; } .fd-cmp__img { position: relative; justify-self: start; } .fd-cmp__img img { display: block; max-height: 260px; max-width: 100%; border-radius: 14px; border: 1px solid var(--line); } .fd-cmp__img button, .fd-cmp__att button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 16px; cursor: pointer; } .fd-cmp__img button { position: absolute; top: 8px; right: 8px; } .fd-cmp__att { justify-self: start; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--s2); font-size: 13px; } .fd-cmp__att svg { width: 16px; height: 16px; color: var(--acc-t); } .fd-cmp__att button { background: var(--s4); } .fd-cmp__bar { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; } .fd-cmp__tool { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--acc-t); cursor: pointer; border: 0; background: none; } .fd-cmp__tool:hover { background: var(--s2); } .fd-cmp__tool svg { width: 20px; height: 20px; } .fd-cmp__n { margin-left: auto; color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; } .fd-cmp__err { margin: 0; color: var(--hot, #ff6b5b); font-size: 13px; } .fd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .pc { border: 1px solid var(--line); background: var(--s1); border-radius: 22px; padding: 16px 16px 10px; } .fd-list > .pc, .fd-replies > .pc { content-visibility: auto; contain-intrinsic-size: auto 220px; } .pc--gone { padding: 14px 16px; color: var(--mute); font-size: 14px; } .pc--gone p { margin: 0; display: flex; align-items: center; gap: 8px; } .pc--gone svg { width: 16px; height: 16px; } .pc__rp { display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: 13px; margin: -4px 0 8px 52px; } .pc__rp svg { width: 14px; height: 14px; } .pc__rp a { color: var(--t2); font-weight: 600; } .pc__row { display: flex; gap: 12px; } .pc__b { flex: 1; min-width: 0; } .pc__h { display: flex; align-items: center; gap: 6px; min-width: 0; } .pc__n { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc__team svg { width: 16px; height: 16px; color: #3da5ff; } .pc__t { color: var(--mute); font-size: 13px; white-space: nowrap; } .pc__more { margin-left: auto; border: 0; background: none; color: var(--mute); font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; } .pc__more:hover { background: var(--s2); color: var(--text); } .pc__txt { margin-top: 4px; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; } .pc__txt a { color: var(--acc-t); } .pc__img { display: block; margin-top: 10px; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; } .pc__img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; border-radius: 16px; border: 1px solid var(--line); background: var(--s2); } .pc__rel { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--s2); color: var(--text); } .pc__rel:hover { border-color: var(--acc); } .pc__rel img, .pc__rel > i { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--s3); } .pc__rel > svg { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--s3); color: var(--acc-t); flex: none; box-sizing: content-box; } .pc__rel span { display: grid; min-width: 0; } .pc__rel small { color: var(--acc-t); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .pc__rel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc__rel em { font-style: normal; color: var(--mute); font-size: 13px; } .pc__rel u { margin-left: auto; text-decoration: none; padding: 7px 14px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 13px; white-space: nowrap; } .pc__q { display: block; margin-top: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); color: var(--text); } .pc__q:hover { border-color: var(--s5); } .pc__q--gone { color: var(--mute); font-size: 14px; } .pc__qh { color: var(--mute); font-size: 13px; font-weight: 600; } .pc__q img { display: block; margin-top: 8px; max-width: 100%; max-height: 260px; border-radius: 12px; } .pc__act { display: flex; gap: 4px; margin: 8px 0 0 -8px; } .pc__act > * { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 0; background: none; color: var(--mute); font: inherit; font-size: 13.5px; cursor: pointer; } .pc__act > *:hover { background: var(--s2); color: var(--text); } .pc__act svg { width: 18px; height: 18px; } .pc__act [data-like].on { color: #ff4d6d; } .pc__act [data-like].on svg { fill: currentColor; } .pc__act [data-like].pop svg { animation: likePop .35s cubic-bezier(.2,.8,.2,1.4); } @keyframes likePop { 40% { transform: scale(1.32); } } .pc--big .pc__txt { font-size: 18px; } .fd-parent .pc { border-style: dashed; opacity: .9; } .fd-replies { display: grid; gap: 10px; } .fd-menu { position: absolute; z-index: 3200; width: 200px; padding: 6px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(0,0,0,.8); display: grid; } .fd-menu button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; } .fd-menu button:hover { background: var(--s3); } .fd-menu button.bad { color: #ff8a7a; } .fd-zoom { position: fixed; inset: 0; z-index: 3300; background: rgba(0,0,0,.9); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; cursor: zoom-out; padding: 20px; } .fd-zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; } .fd-ch { padding: 22px; display: grid; gap: 14px; } .fd-ch__top { display: flex; gap: 18px; align-items: center; } .fd-ch h1 { font-size: 26px; margin: 0; display: flex; align-items: center; gap: 6px; } .fd-ch__bio { margin: 4px 0 0; color: var(--t2); } .fd-ch__since { margin: 4px 0 0; color: var(--mute); font-size: 13px; } .fd-ch__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--mute); font-size: 14px; } .fd-ch__stats b { color: var(--text); } .fd-ch__btns { display: flex; gap: 8px; flex-wrap: wrap; } .mute { color: var(--mute); } .fd-box { padding: 14px; display: grid; gap: 4px; } .fd-pp { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .fd-pp > div:nth-child(2) { flex: 1; min-width: 0; display: grid; } .fd-pp a { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-pp small { color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-pp__b { display: flex; gap: 6px; flex: none; } .fd-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--inp); } .fd-search svg { width: 18px; height: 18px; color: var(--mute); } .fd-search input { flex: 1; border: 0; background: none; color: var(--text); font: inherit; padding: 11px 0; } .fd-search input:focus { outline: none; } .fd-rules { color: var(--mute); font-size: 12px; line-height: 1.45; margin: 0 4px; } .fd-rules a { color: inherit; text-decoration: underline; } .fd-stories { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; } .fd-stories::-webkit-scrollbar { display: none; } .fd-st { flex: none; width: 74px; display: grid; justify-items: center; gap: 6px; border: 0; background: none; color: var(--t2); font: inherit; font-size: 12px; cursor: pointer; position: relative; } .fd-st span:last-child { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-st .fd-ava { width: 62px; height: 62px; font-size: 22px; pointer-events: none; } .fd-st__ring { padding: 3px; border-radius: 50%; background: conic-gradient(var(--acc), #8b7bff, #ff5a36, var(--acc)); } .fd-st__ring .fd-ava { border: 3px solid var(--bg, #0b0b0c); } .fd-st.seen .fd-st__ring { background: var(--s4); } .fd-st--add > i { position: absolute; top: 44px; left: 50%; margin-left: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font-style: normal; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg, #0b0b0c); } .fd-sv { position: fixed; inset: 0; z-index: 3300; background: rgba(0,0,0,.92); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; } .fd-sv__card { --h: 80; position: relative; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: calc(100dvh - 32px); border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, hsl(var(--h) 60% 22%), #0b0b0c 70%); } .fd-sv__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .fd-sv__bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; } .fd-sv__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; } .fd-sv__bars i.done { background: #fff; } .fd-sv__bars i.run::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: svRun 6s linear forwards; } @keyframes svRun { from { transform: scaleX(0); } to { transform: scaleX(1); } } .fd-sv__h { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; color: #fff; } .fd-sv__h .fd-ava { width: 34px; height: 34px; font-size: 14px; } .fd-sv__h span { color: rgba(255,255,255,.7); font-size: 13px; } .fd-sv__h button { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; } .fd-sv__h button + button { margin-left: 0; } .fd-sv__h button svg { width: 16px; height: 16px; } .fd-sv__t { position: absolute; left: 16px; right: 16px; bottom: 90px; z-index: 2; pointer-events: none; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1.4; text-align: center; } .fd-sv__t--big { position: static; background: none; font-size: 26px; font-weight: 800; padding: 40px 24px; } .fd-sv__att { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 4; } .fd-sv__att .pc__rel { margin: 0; background: rgba(20,20,22,.9); } .fd-sv__nav { position: absolute; top: 70px; bottom: 90px; width: 40%; z-index: 1; border: 0; background: none; cursor: pointer; } .fd-sv__nav--l { left: 0; } .fd-sv__nav--r { right: 0; } .fd-pick .am__card { max-width: 460px; } .fd-pick__l { display: grid; gap: 8px; margin-top: 12px; } .fd-pick__l button { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); color: var(--text); text-align: left; cursor: pointer; font: inherit; } .fd-pick__l button:hover { border-color: var(--acc); } .fd-pick__l img, .fd-pick__l i { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--s3); flex: none; } .fd-pick__l span { display: grid; } .fd-pick__l small { color: var(--mute); font-size: 12.5px; } @media (max-width: 1180px) { .fd__grid { grid-template-columns: 200px minmax(0, 1fr); } .fd__right { display: none; } } @media (max-width: 760px) { .fd__grid { grid-template-columns: minmax(0, 1fr); } .fd__side { position: static; } .fd-me { display: none; } .fd-nav { display: flex; overflow-x: auto; } .fd-nav a { flex: none; padding: 9px 12px; } .pc { border-radius: 18px; padding: 14px 12px 8px; } .fd-ch__top { flex-direction: column; text-align: center; } .fd-ch__btns, .fd-ch__stats { justify-content: center; } .fd-cmp { padding: 12px; gap: 10px; } .fd-cmp > .fd-ava { width: 34px; height: 34px; font-size: 14px; } .fd-cmp__bar { flex-wrap: wrap; row-gap: 8px; } .fd-cmp__bar .btn { flex: 1; } .fd-cmp__n { margin-left: auto; } } .rv__share { margin-top: 12px; width: 100%; } .rv__share svg, .mk__cta .btn svg { width: 16px; height: 16px; } .adm__seg { margin-bottom: 14px; } .adm__fimg { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--line); } .adm__why { color: var(--mute); font-size: 13px; margin: 6px 0 0; } .cf__in { width: 100%; margin-top: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--inp); color: var(--text); font: inherit; font-size: 15px; resize: vertical; } .cf__in:focus { outline: none; border-color: var(--acc); } .cf__cnt { display: block; text-align: right; color: var(--mute); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; } .pc__views { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--mute); font-size: 13px; padding: 7px 4px; } .pc__views svg { width: 16px; height: 16px; } .fd-st-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .fd-sub { margin: -6px 0 4px; color: var(--mute); font-size: 13.5px; } .fd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .fd-kpi { padding: 14px; display: grid; gap: 4px; align-content: start; } .fd-kpi span { display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: 13px; font-weight: 600; } .fd-kpi span svg { width: 15px; height: 15px; color: var(--acc-t); } .fd-kpi b { font-size: 28px; line-height: 1.1; } .fd-kpi em { font-style: normal; font-size: 12.5px; font-weight: 800; } .fd-kpi em.up { color: var(--acc-t); } .fd-kpi em.down { color: #ff8a7a; } .fd-kpi small { color: var(--mute); font-size: 12px; line-height: 1.35; } .fd-chart { padding: 16px; display: grid; gap: 14px; } .fd-chart__m { display: flex; flex-wrap: wrap; } .fd-bars { height: 180px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; align-items: end; } .fd-bar { height: 100%; display: flex; align-items: flex-end; border-radius: 6px; background: color-mix(in srgb, var(--s3) 50%, transparent); } .fd-bar i { display: block; width: 100%; min-height: 2px; border-radius: 6px; background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #8b7bff)); } .fd-bar:hover i { filter: brightness(1.15); } .fd-bars__x { display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; margin-top: -6px; } .fd-aud { padding: 16px; display: grid; gap: 10px; } .fd-aud__bar { height: 12px; border-radius: 999px; background: #8b7bff; overflow: hidden; } .fd-aud__bar i { display: block; height: 100%; background: var(--acc); } .fd-aud__l { display: flex; gap: 18px; flex-wrap: wrap; color: var(--t2); font-size: 13px; } .fd-aud__l i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; } .fd-aud__l i.a { background: var(--acc); } .fd-aud__l i.b { background: #8b7bff; } .fd-top { display: grid; gap: 8px; } .fd-top__i { display: grid; grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; color: var(--text); } .fd-top__i:hover { border-color: var(--acc); } .fd-top__i img, .fd-top__i > i { grid-row: span 2; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--s2); display: grid; place-items: center; } .fd-top__i > i svg { width: 22px; height: 22px; color: var(--mute); } .fd-top__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .fd-top__i b { display: flex; align-items: center; gap: 5px; font-size: 14px; } .fd-top__i b svg { width: 15px; height: 15px; color: var(--acc-t); } .fd-top__i small { color: var(--mute); font-size: 12.5px; grid-column: 2 / 4; } .fd-note { color: var(--mute); font-size: 12px; line-height: 1.45; margin: 4px 0 0; } .fd-ch__btns .btn svg { width: 16px; height: 16px; } @media (max-width: 760px) { .fd-kpis { grid-template-columns: 1fr 1fr; } .fd-kpi b { font-size: 24px; } .fd-bars { height: 140px; gap: 2px; } } ::view-transition-old(root) { animation: vtOut .26s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vtIn .42s cubic-bezier(.2,.7,.2,1) both; } @keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.99); } } @keyframes vtIn { from { opacity: 0; transform: translateY(14px); } } ::view-transition-group(*) { animation-duration: .48s; animation-timing-function: cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } .tiles .tile { animation: tileIn .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); } @keyframes tileIn { from { opacity: 0; transform: translateY(22px) scale(.97); } } .tile { --mx: 0px; --my: 0px; --rx: 0deg; --ry: 0deg; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s; } .tile::after { content: ""; position: absolute; left: -320px; top: -320px; width: 640px; height: 640px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 24%, transparent), transparent); transform: translate3d(var(--mx), var(--my), 0); } .tile__t, .tile__d { position: relative; z-index: 1; } .tile .badge, .tile__go { z-index: 2; } @media (hover: hover) { .tile:hover { z-index: 3; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--grow, 1.08)); box-shadow: 0 40px 70px -24px rgba(0,0,0,.95), 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent); border-color: color-mix(in srgb, var(--acc) 55%, transparent); } .tile--big { --grow: 1.04; } .tile:hover::after { opacity: 1; will-change: transform; } .tile:hover .tile__img { transform: scale(1.06); } .tile::before { transition: opacity .35s; } .tile .tile__t, .tile .tile__d, .tile .badge { transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); } .tile:hover .tile__t { transform: translateY(-3px); } .tile.is-playing .tile__t, .tile.is-playing .tile__d, .tile.is-playing .badge { opacity: 0; transform: translateY(10px); } .tile.is-playing::before, .tile.is-playing::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tiles .tile { animation: none; } } .tile__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); } .tile__vid.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .tile__vid { display: none; } } .kin .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px); animation: wordIn .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--k) * 90ms + 60ms); } @keyframes wordIn { to { opacity: 1; transform: none; filter: none; } } .kin .shine { background: linear-gradient(100deg, var(--text) 0 38%, var(--acc) 48%, #fff 52%, var(--text) 62% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 3.6s cubic-bezier(.4,0,.2,1) 1.1s infinite; } .kin .shine .w { color: transparent; background: inherit; background-size: inherit; -webkit-background-clip: text; background-clip: text; } .kin.off .shine { animation-play-state: paused; } @keyframes shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: -60% 0; } } .hero--hub .lead, .hero--hub .search, .hero--hub .browse { animation: tileIn .8s cubic-bezier(.2,.7,.2,1) backwards; } .hero--hub .lead { animation-delay: .35s; } .hero--hub .search { animation-delay: .45s; } .hero--hub .browse { animation-delay: .55s; } .search { transition: box-shadow .3s; } .search:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 30%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--acc) 55%, transparent); } @media (prefers-reduced-motion: reduce) { .kin .w { opacity: 1; transform: none; filter: none; animation: none; } .kin .shine { animation: none; } } .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } .rv-now, .rv-now.rv { transition: none !important; } .beats:empty { min-height: 720px; } .rp__feed:has(> .rd__empty:only-child) { min-height: 1200px; } @media (max-width: 700px) { .beats:empty { min-height: 900px; } .rp__feed:has(> .rd__empty:only-child) { min-height: 900px; } } @keyframes ring { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } } @keyframes beat { 50% { transform: scale(1.25); } } .dot, .rp__live i, .pin--hot { position: relative; animation: none; } .dot::after, .rp__live i::after, .pin--hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ring 1.8s cubic-bezier(.2,.6,.3,1) infinite; } .dot::after { background: var(--acc); } .rp__live i::after, .pin--hot::after { background: var(--hot); } .avw.ping::after { animation: beat 1.4s ease-in-out infinite; } .avst button { animation: beat 1.6s ease-in-out infinite; } .avp__scan { top: 0; animation-name: avScanT; } @keyframes avScanT { from { transform: translateY(-100%); } to { transform: translateY(334%); } } .gt__eq i { height: 100%; transform: scaleY(.2); transform-origin: bottom; animation-name: gtEqT; } @keyframes gtEqT { to { transform: scaleY(1); } } .kin .shine { animation-iteration-count: 3; } @media (prefers-reduced-motion: reduce) { .dot::after, .rp__live i::after, .pin--hot::after { animation: none; opacity: 0; } } .top, .cab__bar { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; } .rd__pill, .rd__panel, .pm__nav button, .avh__btn { -webkit-backdrop-filter: none; backdrop-filter: none; } .fd-ava { overflow: hidden; } .fd-ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .fd-ch__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; font-size: 13px; color: var(--t2); } .fd-ch__tags span { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; } .fd-ch__tags .ic { width: 14px; height: 14px; } .fd-ch__tags em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); } .fd-ch__edit { margin-top: 10px; gap: 6px; } .fd-ch__edit .ic { width: 15px; height: 15px; } .fd-edit__card { width: 520px; max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; text-align: left; gap: 14px; } .fd-edit__pic { display: flex; align-items: center; gap: 16px; } .fd-edit__pic > div:last-child { display: grid; gap: 6px; justify-items: start; } .fd-edit__pic .btn { gap: 6px; cursor: pointer; } .fd-edit__pic .btn .ic { width: 15px; height: 15px; } .fd-edit__pic small { font-size: 12px; } .fd-edit__ava { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; background: var(--s2); } .fd-edit__ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .fd-edit__ava span { width: 100%; height: 100%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #0b0b0c; background: hsl(var(--h) 75% 62%); text-transform: uppercase; } .fd-edit__f { display: grid; gap: 6px; } .fd-edit__f > span { font-size: 13px; font-weight: 700; color: var(--t2); } .fd-edit__f input, .fd-edit__f textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; resize: vertical; } .fd-edit__f input:focus, .fd-edit__f textarea:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); } .fd-edit__chips { display: flex; flex-wrap: wrap; gap: 6px; } .fd-edit__chips .chip { cursor: pointer; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--t2); } .fd-edit__chips .chip.on { background: color-mix(in srgb, var(--acc) 18%, transparent); border-color: color-mix(in srgb, var(--acc) 60%, transparent); color: var(--text); } .rd__cml { display: grid; gap: 8px; } .rd__cm-sort { display: flex; gap: 4px; } .rd__cm-sort button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--mute); cursor: pointer; } .rd__cm-sort button.on { background: var(--s2); color: var(--text); } .rd__cm--re { margin-left: 22px; border-left: 2px solid color-mix(in srgb, var(--acc) 40%, transparent); border-radius: 4px 12px 12px 4px; } .rd__cm-acts { display: flex; gap: 6px; margin-top: 6px; } .rd__cm-acts button { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; border: 0; background: transparent; color: var(--mute); cursor: pointer; } .rd__cm-acts button:hover { background: var(--s3, rgba(255,255,255,.06)); color: var(--text); } .rd__cm-acts .ic { width: 14px; height: 14px; } .rd__cm-acts [data-cmv="1"].on { color: var(--acc-t); } .rd__cm-acts [data-cmv="-1"].on { color: #ff6b6b; } .rd__rf { display: flex; gap: 6px; margin-left: 22px; } .rd__rf input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; font-size: 14px; } .rd__rf button { flex: none; width: 38px; border-radius: 10px; border: 0; background: var(--acc); color: var(--acc-ink); cursor: pointer; } .fav-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(11,11,12,.55); color: #fff; transition: transform .15s, background .15s, color .15s; } .fav-btn .ic, .fav-btn svg { width: 18px; height: 18px; } .fav-btn:hover { transform: scale(1.08); background: rgba(11,11,12,.75); } .fav-btn.on { color: #ff4d6d; } .fav-btn.on svg { fill: currentColor; } .fav-btn--card { top: 14px; right: 56px; background: var(--s2); color: var(--t2); } .dsg .fav-btn--card { top: 22px; right: 22px; background: rgba(11,11,12,.6); color: #fff; } .beat__cover { position: relative; } .top__fav.on { color: #ff4d6d; } .top__fav.on svg { fill: currentColor; } .fav__h { margin: 14px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .eng, .dsg { position: relative; } .fav-btn--hero { position: static; width: 48px; height: 48px; background: var(--s2); border: 1px solid var(--line); color: var(--text); } .fav-btn--hero.on { color: #ff4d6d; } .fd__grid--dm .fd__main { grid-column: 2 / 4; } .fd__grid--dm .fd__right { display: none; } @media (max-width: 1180px) { .fd__grid--dm .fd__main { grid-column: 2; } } @media (max-width: 760px) { .fd__grid--dm .fd__main { grid-column: 1; } } .fd-nav em[hidden] { display: none; } .dm { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 200px); height: calc(100dvh - 200px); min-height: 440px; overflow: hidden; padding: 0; } .dm__m--del .dm__b { background: transparent; border: 1px dashed var(--line); color: var(--mute); } .dm__side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); } .dm__h { padding: 18px 18px 10px; font-size: 18px; } .dm__find { margin: 0 12px 10px; } .dm__list { flex: 1; overflow-y: auto; padding: 0 8px 10px; overscroll-behavior: contain; } .dm__it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; color: var(--text); text-decoration: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .dm__it:hover { background: var(--s2); } .dm__it.on { background: color-mix(in srgb, var(--acc) 12%, var(--s2)); } .dm__it .fd-ava { width: 44px; height: 44px; } .dm__it-b { display: grid; min-width: 0; } .dm__it-b b { font-size: 15px; } .dm__it-b small { color: var(--mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__it--new .dm__it-b small { color: var(--text); font-weight: 600; } .dm__it-m { display: grid; justify-items: end; gap: 4px; } .dm__it-m small { color: var(--mute); font-size: 11.5px; white-space: nowrap; } .dm__it-m em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; } .dm__chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .dm__empty, .dm__hello { margin: auto; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--mute); padding: 24px; } .dm__empty .ic { width: 40px; height: 40px; color: var(--acc-t); } .dm__empty b { color: var(--text); font-size: 17px; } .dm__top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .dm__top .fd-ava { width: 38px; height: 38px; } .dm__who { font-weight: 800; color: var(--text); text-decoration: none; } .dm__back { display: none; font-size: 20px; color: var(--text); text-decoration: none; padding: 0 6px 0 0; } .dm__msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; } .dm__older { align-self: center; margin-bottom: 8px; } .dm__day { align-self: center; margin: 10px 0 6px; padding: 3px 12px; border-radius: 999px; background: var(--s2); color: var(--mute); font-size: 12px; font-weight: 700; } .dm__m { display: flex; align-items: center; gap: 6px; max-width: 78%; } .dm__m--me { align-self: flex-end; flex-direction: row-reverse; } .dm__b { padding: 8px 12px 6px; border-radius: 18px 18px 18px 6px; background: var(--s2); display: grid; gap: 4px; min-width: 0; } .dm__m--me .dm__b { border-radius: 18px 18px 6px 18px; background: color-mix(in srgb, var(--acc) 85%, #000); color: #0b0b0c; } .dm__m--sending { opacity: .6; } .dm__t { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; } .dm__m--me .dm__t a { color: #0b0b0c; text-decoration: underline; } .dm__img { display: block; max-width: min(320px, 70vw); height: auto; max-height: 360px; border-radius: 12px; cursor: zoom-in; object-fit: cover; } .dm__time { justify-self: end; font-size: 11px; display: inline-flex; gap: 3px; align-items: center; } .dm__time > span { opacity: .65; } .dm__tick { display: inline-flex; font-style: normal; font-size: 9px; line-height: 1; opacity: .65; } .dm__tick svg { display: block; height: 8px; width: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dm__tick.on { opacity: 1; color: var(--tick-on, #0b5bd9); } [data-pal="pink"], [data-pal="violet"] { --tick-on: #c4f4ff; } .dm__del { color: var(--mute); } .dm__x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--mute); cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 16px; } .dm__m:hover .dm__x { opacity: 1; } .dm__x:hover { background: var(--s2); color: var(--text); } @media (hover: none) { .dm__x { opacity: .6; } } .dm__form { display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); } .dm__row { display: flex; align-items: flex-end; gap: 8px; } .dm__row[hidden] { display: none; } .dm__pic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--acc-t); cursor: pointer; } .dm__pic:hover { background: var(--s2); } .dm__pic .ic { width: 20px; height: 20px; } .dm__form textarea { flex: 1; min-width: 0; resize: none; max-height: 160px; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; line-height: 1.4; } .dm__form textarea:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); } .dm__send { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; cursor: pointer; } .dm__send .ic { width: 18px; height: 18px; } @media (max-width: 760px) { .dm { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 240px); height: calc(100dvh - 240px); min-height: 360px; } .fd__grid--dm ~ * .hlp__btn, body:has(.fd__grid--dm) .hlp__btn { display: none; } .dm--open .dm__side, .dm:not(.dm--open) .dm__chat { display: none; } .dm__side { border-right: 0; } .dm__back { display: block; } .dm__m { max-width: 88%; } } .dm { position: relative; } .dm__av { position: relative; flex: none; display: inline-block; } .dm__dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--card); } .dm__typing { color: var(--acc-t); font-style: normal; } .dm__whoa { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--text); text-decoration: none; } .dm__whoa .fd-ava { width: 40px; height: 40px; } .dm__whoa span { display: grid; min-width: 0; } .dm__whoa b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__whoa small { color: var(--mute); font-size: 12.5px; } .dm__whoa small.on { color: var(--acc-t); } .dm__tools { display: flex; gap: 2px; } .dm__tools button, .dm__pic { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--t2); display: grid; place-items: center; cursor: pointer; } .dm__tools button:hover, .dm__pic:hover { background: var(--s2); color: var(--text); } .dm__tools .ic, .dm__pic .ic { width: 19px; height: 19px; } .dm__mic { color: var(--acc-t); } .dm__mic[hidden], .dm__send[hidden] { display: none; } .dm__search { padding: 8px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; } .dm__search input { width: 100%; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; } .dm__sres { max-height: 240px; overflow-y: auto; display: grid; gap: 2px; } .dm__sres button { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .dm__sres button:hover { background: var(--s2); } .dm__sres small { color: var(--mute); font-size: 12px; } .dm__sres span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__pin { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 6%, var(--card)); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .dm__pin[hidden] { display: none; } .dm__pin .ic { width: 16px; height: 16px; color: var(--acc-t); flex: none; } .dm__pin span { display: grid; min-width: 0; flex: 1; } .dm__pin b { font-size: 12.5px; color: var(--acc-t); } .dm__pin small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t2); } .dm__pin i { font-style: normal; font-size: 18px; color: var(--mute); padding: 0 4px; } .dm__chat { position: relative; } .dm__chat--drop::after { content: "Отпусти, чтобы отправить"; position: absolute; inset: 8px; border: 2px dashed var(--acc); border-radius: 18px; display: grid; place-items: center; background: rgba(11,11,12,.75); color: var(--acc); font-weight: 800; z-index: 6; } .dm__down { position: absolute; right: 18px; bottom: 86px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); } .dm__down[hidden] { display: none; } .dm__down .ic { width: 18px; height: 18px; } .dm__down em { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: 800 11.5px/20px var(--body, inherit); font-style: normal; } .dm__unread { align-self: stretch; text-align: center; margin: 8px 0; padding: 4px; font-size: 12.5px; font-weight: 700; color: var(--acc-t); background: color-mix(in srgb, var(--acc) 8%, transparent); border-radius: 8px; } .dm__m { position: relative; } .dm__m--hl .dm__b { animation: dmHl 1.6s ease; } @keyframes dmHl { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 70%, transparent); } } .dm__b--media, .dm__m--me .dm__b--media { position: relative; padding: 0; background: transparent; color: var(--text); } .dm__b--media .dm__img, .dm__b--media .dm__vid { border-radius: 16px; } .dm__b--over .dm__time { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; opacity: 1; backdrop-filter: none; } .dm__b--over .dm__time > span, .dm__b--over .dm__tick { opacity: 1; } .dm__b--over .dm__tick.on { color: #6cc4ff; } .dm__b--over .dm__rs { margin-top: 4px; } .dm__vid { display: block; max-width: min(360px, 72vw); width: 100%; height: auto; max-height: 420px; border-radius: 12px; background: #000; } .dm__fwd { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; opacity: .75; } .dm__fwd .ic { width: 13px; height: 13px; } .dm__q { display: grid; gap: 1px; text-align: left; padding: 4px 10px; border: 0; border-left: 3px solid currentColor; border-radius: 6px; background: rgba(255,255,255,.07); color: inherit; font: inherit; cursor: pointer; max-width: 100%; } .dm__m--me .dm__q { background: rgba(0,0,0,.1); } .dm__q b { font-size: 12.5px; } .dm__q span { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__q--gone { font-size: 12.5px; opacity: .6; font-style: italic; border-left: 3px solid currentColor; padding: 4px 10px; } .dm__au { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 2px 0; } .dm__play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; cursor: pointer; } .dm__m--me .dm__play { background: #0b0b0c; color: var(--acc); } .dm__play .ic { width: 18px; height: 18px; fill: currentColor; } .dm__au-b { display: grid; gap: 4px; min-width: 0; flex: 1; } .dm__au-b b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__au-b small { font-size: 11.5px; opacity: .7; } .dm__au-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; cursor: pointer; } .dm__m--me .dm__au-bar { background: rgba(0,0,0,.18); } .dm__au-bar i { display: block; height: 100%; width: 0; background: currentColor; border-radius: 4px; } .dm__au--voice .dm__au-bar { display: none; } .dm__wave { display: flex; align-items: center; gap: 2px; height: 24px; } .dm__wave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .5; } .dm__au--voice.on .dm__wave i { opacity: .9; } .dm__file { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: inherit; text-decoration: none; min-width: 220px; } .dm__file > .ic:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--acc); color: var(--acc-ink); flex: none; } .dm__m--me .dm__file > .ic:first-child { background: #0b0b0c; color: var(--acc); } .dm__file span { display: grid; min-width: 0; flex: 1; } .dm__file b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm__file small { font-size: 11.5px; opacity: .7; } .dm__file > .ic:last-child { width: 18px; height: 18px; opacity: .7; } .dm__rs { display: flex; flex-wrap: wrap; gap: 4px; } .dm__r { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,.1); color: inherit; font: inherit; font-size: 14px; cursor: pointer; } .dm__m--me .dm__r { background: rgba(0,0,0,.12); } .dm__r.on { border-color: currentColor; } .dm__r b { font-size: 12px; } .dm__prog { display: block; height: 3px; border-radius: 3px; background: rgba(0,0,0,.2); overflow: hidden; } .dm__prog i { display: block; height: 100%; background: currentColor; transition: width .2s; } .dm__more { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--mute); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; flex: none; } .dm__more .ic { width: 16px; height: 16px; } .dm__m:hover .dm__more { opacity: 1; } .dm__more:hover { background: var(--s2); color: var(--text); } @media (hover: none) { .dm__more { display: none; } } .dm__menu { position: fixed; z-index: 3200; min-width: 220px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--s1, #141416); box-shadow: 0 24px 60px -16px rgba(0,0,0,.85); display: grid; gap: 2px; animation: amFade .12s; } .dm__menu > button, .dm__menu > a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; } .dm__menu > button:hover, .dm__menu > a:hover { background: var(--s2); } .dm__menu .ic { width: 17px; height: 17px; color: var(--t2); } .dm__menu .bad, .dm__menu .bad .ic { color: #ff6b6b; } .dm__menu-r { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .dm__menu-r button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 20px; cursor: pointer; transition: transform .12s; } .dm__menu-r button:hover { transform: scale(1.25); background: var(--s2); } .dm__clip { position: relative; } .dm__clipm { position: absolute; bottom: 46px; left: 0; z-index: 5; min-width: 200px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--s1, #141416); box-shadow: 0 20px 50px -16px rgba(0,0,0,.85); display: grid; gap: 2px; } .dm__clipm[hidden] { display: none; } .dm__clipm button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; text-align: left; } .dm__clipm button:hover { background: var(--s2); } .dm__clipm .ic { width: 17px; height: 17px; color: var(--acc-t); } .dm__bar, .dm__att { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: var(--s2); } .dm__bar[hidden], .dm__att[hidden] { display: none; } .dm__bar > .ic { width: 18px; height: 18px; color: var(--acc-t); flex: none; } .dm__bar span, .dm__att span { display: grid; min-width: 0; flex: 1; } .dm__bar b { font-size: 13px; color: var(--acc-t); } .dm__att b { font-size: 13.5px; } .dm__bar small, .dm__att small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t2); font-size: 12.5px; } .dm__bar button, .dm__att button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--t2); font-size: 18px; cursor: pointer; flex: none; } .dm__att img, .dm__att video { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; } .dm__att-ic { width: 54px; height: 54px; border-radius: 8px; background: var(--acc); color: var(--acc-ink); display: grid !important; place-items: center; flex: none !important; } .dm__att-ic .ic { width: 22px; height: 22px; } .dm__form { position: relative; } .dm__rec { display: none; flex: 1; min-width: 0; height: 40px; align-items: center; gap: 10px; padding: 0 4px; overflow: hidden; } .dm__form--rec .dm__rec { display: flex; } .dm__form--rec .dm__clip, .dm__form--rec textarea, .dm__form--rec .dm__send:not([data-rec]) { display: none; } .dm__rec-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff4d4d; animation: recBlink 1s ease-in-out infinite; } @keyframes recBlink { 50% { opacity: .2; } } .dm__rec-t { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 38px; } .dm__rec-hint { flex: 1; text-align: center; color: var(--mute); font-size: 13.5px; white-space: nowrap; will-change: transform; } .dm__rec-x { display: none; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--hot); cursor: pointer; place-items: center; } .dm__rec-x .ic { width: 19px; height: 19px; } .dm__form--locked .dm__rec-x { display: grid; } .dm__rec-send { display: none; } .dm__form--locked .dm__rec-send { display: grid; animation: dmPop .2s ease-out; } .dm__mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s ease, background .15s; } .dm__form--rec .dm__mic { transform: scale(1.35); background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 22%, transparent); } .dm__form--rec .dm__mic:hover { background: var(--acc); color: var(--acc-ink); } .dm__form--locked .dm__mic { display: none; } .dm__mic--flip .ic { animation: dmFlip .28s ease-out; } @keyframes dmFlip { from { transform: scale(.4) rotate(-90deg); opacity: 0; } } @keyframes dmPop { from { transform: scale(.6); opacity: 0; } } .dm__lock { --k: 0; position: absolute; right: 14px; bottom: 70px; display: none; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--t2); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); transform: translateY(calc(var(--k) * -18px)); } .dm__lock .ic { width: 17px; height: 17px; } .dm__lock .ic + .ic { opacity: calc(1 - var(--k)); animation: dmUp 1.2s ease-in-out infinite; } .dm__form--rec:not(.dm__form--locked) .dm__lock { display: flex; } @keyframes dmUp { 50% { transform: translateY(-3px); } } .dm__form--shake .dm__rec, .dm__form--shake { animation: dmShake .3s ease; } @keyframes dmShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .dm__tip { position: absolute; right: 10px; bottom: calc(100% + 6px); max-width: 260px; padding: 8px 12px; border-radius: 12px; background: var(--s3); color: var(--text); font-size: 13px; line-height: 1.35; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; pointer-events: none; z-index: 4; } .dm__tip.on { opacity: 1; transform: none; } .dm__cam { position: absolute; inset: 0 0 64px; z-index: 6; display: grid; place-items: center; background: rgba(8,8,9,.86); opacity: 0; transition: opacity .2s; pointer-events: none; } .dm__cam.on { opacity: 1; } .dm__cam-c { position: relative; width: min(300px, 72vw); aspect-ratio: 1; transform: scale(.85); transition: transform .25s cubic-bezier(.2,.9,.3,1.2); } .dm__cam.on .dm__cam-c { transform: none; } .dm__cam video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; display: block; } .dm__cam svg { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); overflow: visible; } .dm__cam circle { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dmRing linear forwards; } @keyframes dmRing { to { stroke-dashoffset: 0; } } .dm__circle { --p: 0; position: relative; width: 220px; aspect-ratio: 1; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 30% 30%, var(--s3), var(--s1)); transform-origin: 0 50%; transition: transform .25s cubic-bezier(.2,.8,.3,1); } .dm__m--me .dm__circle { transform-origin: 100% 50%; } .dm__circle video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: transparent; } .dm__circle.on { transform: scale(1.36); z-index: 2; } .dm__m:has(.dm__circle.on) { margin: 42px 0; } .dm__cring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; overflow: visible; } .dm__cring circle { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); opacity: 0; transition: opacity .2s; } .dm__circle.on .dm__cring circle { opacity: 1; } .dm__cdur { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; } .dm__cmute { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; pointer-events: none; transition: opacity .2s; } .dm__cmute .ic { width: 14px; height: 14px; } .dm__circle.on .dm__cmute { opacity: 0; } .dm__circle.paused::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 54px no-repeat; } .dm__grid .dm__gc video { border-radius: 50%; } @media (max-width: 760px) { .dm__circle { width: 200px; } .dm__circle.on { transform: scale(1.3); } .dm__cam { inset: 0 0 60px; } } .dm__modal { width: 420px; max-width: 100%; text-align: center; } .dm__mbtns { display: grid; gap: 8px; margin-top: 6px; } .dm__fl { max-height: 50vh; overflow-y: auto; display: grid; gap: 2px; text-align: left; } .dm__fl .dm__it { grid-template-columns: 44px minmax(0, 1fr) auto; cursor: pointer; } .dm__fl input { width: 20px; height: 20px; accent-color: var(--acc); } .dm__info { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 7; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -24px 0 50px -24px rgba(0,0,0,.7); animation: cartIn .2s ease-out; } .dm__info[hidden] { display: none; } .dm__ih { display: flex; justify-content: space-between; align-items: center; padding: 16px; } .dm__ih button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--s2); color: var(--text); font-size: 18px; cursor: pointer; } .dm__itabs { margin: 0 12px 10px; display: flex; } .dm__itabs button { flex: 1; font-size: 13px; padding: 7px 4px; } .dm__itabs em { font-style: normal; opacity: .6; } .dm__ilist { flex: 1; overflow-y: auto; padding: 0 12px 12px; display: grid; gap: 6px; align-content: start; } .dm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .dm__grid button { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--s2); cursor: pointer; } .dm__grid img, .dm__grid video { width: 100%; height: 100%; object-fit: cover; display: block; } .dm__grid i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; } .dm__grid i .ic { width: 26px; height: 26px; fill: rgba(255,255,255,.9); } .dm__ilist .dm__file, .dm__ilist .dm__au { padding: 8px; border-radius: 12px; background: var(--s2); } .dm__link { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--s2); } .dm__link a { color: var(--acc-t); word-break: break-all; font-size: 14px; } .dm__link .link { justify-self: start; font-size: 12px; color: var(--mute); } @media (max-width: 760px) { .dm__tools button[data-tool="search"] { display: none; } .dm__down { bottom: 82px; } .dm__info { width: 100%; } .dm__au, .dm__file { min-width: 180px; } } .sh { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; font-family: var(--ig); } .sh__back { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .2s; } .sh.on .sh__back { opacity: 1; } .sh__card { position: relative; min-width: 0; width: min(520px, calc(100% - 24px)); max-height: min(640px, 86dvh); display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); transform: translateY(16px) scale(.98); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s; } .sh.on .sh__card { transform: none; opacity: 1; } .sh__grab { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--s4); align-self: center; margin-bottom: -4px; } .sh__h { display: flex; align-items: center; justify-content: center; position: relative; min-height: 32px; touch-action: none; } .sh__h b { font-size: 16px; font-weight: 700; } .sh__x { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--t2); display: grid; place-items: center; cursor: pointer; } .sh__x:hover { background: var(--s2); color: var(--text); } .sh__x .ic { width: 20px; height: 20px; } .sh__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: var(--s2); color: var(--mute); } .sh__search .ic { width: 17px; height: 17px; flex: none; } .sh__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; } .sh__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; overflow-y: auto; max-height: 300px; padding: 4px 2px; overscroll-behavior: contain; } .sh__p { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; min-width: 0; } .sh__p > span:last-child { font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2); } .sh__ava { --h: 80; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: 24px; color: #0b0b0c; text-transform: uppercase; background: linear-gradient(135deg, hsl(var(--h) 85% 68%), hsl(calc(var(--h) + 60) 80% 58%)); transition: transform .15s; } .sh__ava img { width: 100%; height: 100%; object-fit: cover; display: block; } .sh__p:hover .sh__ava { transform: scale(1.04); } .sh__ok { position: absolute; top: 44px; left: calc(50% + 14px); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #0095f6; color: #fff; border: 3px solid var(--card); transform: scale(0); transition: transform .15s cubic-bezier(.3,1.6,.5,1); } .sh__ok .ic { width: 12px; height: 12px; stroke-width: 3.5; } .sh__p.on .sh__ok { transform: scale(1); } .sh__p.on .sh__ava { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #0095f6; } .sh__p--sk { pointer-events: none; } .sh__p--sk .sh__ava { background: var(--s2); animation: skP 1.2s ease-in-out infinite; } .sh__p--sk i { width: 46px; height: 10px; border-radius: 6px; background: var(--s2); } .sh__none { grid-column: 1 / -1; text-align: center; color: var(--mute); font-size: 14px; padding: 18px 0; margin: 0; } .sh__send { display: flex; gap: 8px; align-items: flex-end; animation: dmPop .18s ease-out; } .sh__send[hidden] { display: none; } .sh__send textarea { flex: 1; min-width: 0; resize: none; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; max-height: 110px; } .sh__send textarea:focus { outline: none; border-color: #0095f6; } .sh__go { background: #0095f6; color: #fff; border-color: #0095f6; white-space: nowrap; } .sh__go:hover { background: #1877f2; border-color: #1877f2; color: #fff; } .sh__guest { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--s2); color: var(--t2); font-size: 14px; } .sh__guest > .ic { width: 20px; height: 20px; color: var(--acc-t); flex: none; } .sh__guest span { flex: 1; } .sh__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; padding: 14px 2px 2px; border-top: 1px solid var(--line); } .sh__apps::-webkit-scrollbar { display: none; } .sh__app { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--t2); font: inherit; cursor: pointer; text-decoration: none; } .sh__app > span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--text); font-weight: 800; font-size: 15px; transition: transform .15s; } .sh__app:hover > span { transform: translateY(-2px); } .sh__app .ic { width: 22px; height: 22px; } .sh__app svg:not(.ic) { width: 26px; height: 26px; display: block; } .sh__app--x svg:not(.ic) { width: 21px; height: 21px; } .sh__app small { max-width: 100%; font-size: 12px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh__app--story > span { background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); color: #fff; } .sh__app--tg > span { background: #2aabee; color: #fff; } .sh__app--tg .ic { transform: translateX(-1px); } .sh__app--wa > span { background: #25d366; color: #fff; } .sh__app--vk > span { background: #0077ff; color: #fff; letter-spacing: -.02em; } .sh__app--x > span { background: #000; color: #fff; border: 1px solid var(--s4); } .sh__app--mail > span { background: #8e8e93; color: #fff; } .sh__app--more > span { background: var(--s3); } .sh__app--copy > span { background: var(--acc); color: var(--acc-ink); } .sh__list { overflow-y: auto; display: grid; gap: 2px; align-content: start; min-height: 120px; overscroll-behavior: contain; } .sh__list .fd-pp { padding: 6px 2px; } @keyframes skP { 50% { opacity: .45; } } @media (max-width: 600px) { .sh { place-items: end stretch; } .sh__card { width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1; } .sh.on .sh__card { transform: none; } .sh__grab { display: block; } .sh__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 42vh; } } :root { --ig: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; } .fd, .fd input, .fd textarea, .fd button, .fd-sv, .fd-menu, .fd-edit, .fd-zoom { font-family: var(--ig); } .fd { letter-spacing: -.005em; } .fd .pc__n, .fd .fd-me b, .fd .dm__whoa b, .fd .dm__it b { font-weight: 600; } .fd .pc__txt { font-size: 15px; line-height: 1.45; } .fd .fd-title { font-family: var(--ig); font-weight: 700; letter-spacing: -.02em; } .sk { display: block; background: var(--s2); border-radius: 8px; animation: skP 1.2s ease-in-out infinite; } .pc--sk { pointer-events: none; } .pc--sk .pc__b { display: grid; gap: 9px; padding-top: 4px; } .pc--sk i.sk { height: 12px; } .pc--sk .sk--n { width: 34%; } .pc--sk .sk--s { width: 58%; } .pc--sk .fd-ava.sk { border-radius: 50%; } .fd-new { position: sticky; top: 84px; z-index: 5; justify-self: center; margin: 0 auto -8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 0; background: #0095f6; color: #fff; font: 600 14px var(--ig); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0,149,246,.6); animation: dmPop .2s ease-out; } .fd-new .ic { width: 16px; height: 16px; } .ig { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ava name" "ava stats" "ava bio" "btns btns"; column-gap: 34px; row-gap: 12px; align-items: center; padding: 8px 4px 4px; } .ig__ava { grid-area: ava; align-self: start; position: relative; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .ig__ava:disabled { cursor: default; } .ig__ava .fd-ava { width: 100%; height: 100%; font-size: 48px; } .ig__ava--story { padding: 5px; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); } .ig__ava--story.seen { background: var(--s4); } .ig__ava--story .fd-ava { border: 4px solid var(--bg); } .ig__name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; } .ig__name h1 { font: 600 22px/1.2 var(--ig); letter-spacing: -.01em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ig__name .pc__team .ic { width: 18px; height: 18px; } .ig__stats { grid-area: stats; display: flex; gap: 28px; font-size: 15px; color: var(--t2); } .ig__stats > * { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; white-space: nowrap; } .ig__stats > span { cursor: default; } .ig__stats b { color: var(--text); font-weight: 600; margin-right: 2px; } .ig__stats button:hover b { text-decoration: underline; } .ig__bio { grid-area: bio; display: grid; gap: 3px; font-size: 14.5px; line-height: 1.45; min-width: 0; } .ig__bio p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .ig__cat { color: var(--mute); font-size: 14px; } .ig__link { display: inline-flex; align-items: center; gap: 5px; justify-self: start; max-width: 100%; color: #e0f1ff; font-weight: 600; text-decoration: none; } .ig__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ig__link .ic { width: 14px; height: 14px; flex: none; color: var(--mute); } .ig__link:hover span { text-decoration: underline; } .ig__city { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); font-size: 13.5px; } .ig__city .ic { width: 14px; height: 14px; } .ig__mut { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13px; color: var(--mute); } .ig__mut b { color: var(--t2); font-weight: 600; } .ig__mava { display: flex; flex: none; } .ig__mava .fd-ava { width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--bg); } .ig__mava .fd-ava + .fd-ava { margin-left: -8px; } .ig__fm { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--s2); color: var(--t2); font-size: 12px; } .ig__btns { grid-area: btns; display: flex; gap: 8px; } .ig__btns .btn { flex: 1; justify-content: center; border-radius: 10px; font-family: var(--ig); font-weight: 600; font-size: 14px; padding: 9px 14px; } .ig__btns .ig__ic { flex: 0 0 auto; width: 42px; padding: 0; } .ig__btns .ig__ic .ic { width: 18px; height: 18px; } .ig__btns .ig__ic.on { color: var(--acc-t); } .ig__blue { background: #0095f6 !important; border-color: #0095f6 !important; color: #fff !important; } .ig__blue:hover { background: #1877f2 !important; border-color: #1877f2 !important; } .ig__tabs { display: flex; border-top: 1px solid var(--line); margin-top: 4px; } .ig__tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 4px 12px; margin-top: -1px; border-top: 1px solid transparent; color: var(--mute); font: 600 12.5px var(--ig); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } .ig__tabs a.on { color: var(--text); border-top-color: var(--text); } .ig__tabs .ic { width: 15px; height: 15px; } .ig__mode { flex: 0 0 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--mute); cursor: pointer; } .ig__mode:hover { color: var(--text); } .ig__mode .ic { width: 18px; height: 18px; } .fd-list.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .fd-g { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; background: var(--s1); color: #fff; text-decoration: none; border-radius: 4px; } .fd-g img { width: 100%; height: 100%; object-fit: cover; display: block; } .fd-g--txt { --h: 80; display: grid; place-items: center; padding: 14px; background: linear-gradient(150deg, hsl(var(--h) 45% 22%), hsl(calc(var(--h) + 50) 45% 12%)); } .fd-g--txt span { font: 600 14px/1.35 var(--ig); text-align: center; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .fd-g__b { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); } .fd-g__b .ic { width: 18px; height: 18px; } .fd-g__ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.42); font: 700 15px var(--ig); font-style: normal; opacity: 0; transition: opacity .15s; } .fd-g__ov span { display: inline-flex; align-items: center; gap: 5px; } .fd-g__ov .ic { width: 18px; height: 18px; fill: #fff; } .fd-g:hover .fd-g__ov, .fd-g:focus-visible .fd-g__ov { opacity: 1; } .fd-g--sk { pointer-events: none; animation: skP 1.2s ease-in-out infinite; } .pc__q--post { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.45); color: #fff; text-decoration: none; text-align: left; } .pc__q--post .pc__qh { display: flex; align-items: center; gap: 8px; font-weight: 600; } .pc__q--post .fd-ava { width: 26px; height: 26px; font-size: 12px; } .pc__q--post img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; } @media (max-width: 640px) { .ig { grid-template-areas: "ava stats" "name name" "bio bio" "btns btns"; column-gap: 18px; row-gap: 10px; padding: 0; } .ig__ava { width: 86px; height: 86px; } .ig__ava .fd-ava { font-size: 32px; } .ig__ava--story { padding: 3px; } .ig__ava--story .fd-ava { border-width: 3px; } .ig__name h1 { font-size: 17px; } .ig__stats { justify-content: space-around; gap: 4px; align-self: center; } .ig__stats > * { display: grid; justify-items: center; text-align: center; font-size: 13px; line-height: 1.25; } .ig__stats b { margin: 0; font-size: 17px; } .ig__btns .btn { padding: 8px 6px; font-size: 13.5px; } .ig__tabs a span { display: none; } .ig__tabs a .ic { width: 22px; height: 22px; } .fd-list.fd-grid { gap: 2px; margin: 0 -12px; } .fd-g { border-radius: 0; } .fd-g__ov { display: none; } } .dm__lp { display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--acc); background: rgba(0,0,0,.22); color: inherit; text-decoration: none; max-width: 300px; } .dm__lp:hover { background: rgba(0,0,0,.3); } .dm__lp-h { display: flex; align-items: center; gap: 8px; min-width: 0; } .dm__lp-h .fd-ava { width: 24px; height: 24px; font-size: 11px; } .dm__lp-h b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm__lp-h small { margin-left: auto; opacity: .6; font-size: 11.5px; } .dm__lp-t { font-size: 13.5px; line-height: 1.35; opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dm__lp img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; } .dm__lp-sk { display: block; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); animation: skP 1.2s ease-in-out infinite; } .pro__share { padding-inline: 14px; } .pro__share .ic { width: 18px; height: 18px; } .lk__share { margin: 14px auto 0; display: inline-flex; gap: 8px; } .lk__share .ic { width: 16px; height: 16px; } .dm__form--wait .dm__rec-dot { background: var(--mute); animation: none; } .dm__form--wait .dm__rec-t { opacity: .4; } .dm__form--wait .dm__lock { display: none; } .top__bell.on .ic { animation: ntRing .9s ease 1; transform-origin: 50% 10%; } @keyframes ntRing { 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } } .top__bell b { background: #ff3b5c; color: #fff; } .nt-panel .cart__panel { font-family: var(--ig); } .nt__dm { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--s2); color: var(--text); text-decoration: none; } .nt__dm:hover { background: var(--s3); } .nt__dm > .ic { width: 22px; height: 22px; color: var(--acc-t); flex: none; } .nt__dm span { display: grid; flex: 1; } .nt__dm small { color: var(--mute); font-size: 12.5px; } .nt__dm em { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #ff3b5c; color: #fff; font: 700 12px/22px var(--ig); text-align: center; } .nt__push { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--line); background: transparent; color: var(--t2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .nt__push[hidden] { display: none; } .nt__push:hover { border-color: var(--acc); color: var(--text); } .nt__push .ic { width: 18px; height: 18px; color: var(--acc-t); flex: none; } .nt__list { display: grid; gap: 2px; } .nt__row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--t2); text-decoration: none; font-size: 14px; line-height: 1.38; } .nt__row:hover { background: var(--s2); } .nt__row.new { background: color-mix(in srgb, #0095f6 10%, transparent); } .nt__row b { color: var(--text); font-weight: 600; } .nt__row small { color: var(--mute); white-space: nowrap; } .nt__row > span:last-child { min-width: 0; overflow-wrap: anywhere; } .nt__ava { width: 44px; height: 44px; font-size: 17px; flex: none; overflow: hidden; } .nt__ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .nt__more { justify-self: center; margin: 8px 0; } .nt { position: fixed; top: 86px; right: 18px; z-index: 3100; display: grid; gap: 10px; width: min(380px, calc(100vw - 24px)); pointer-events: none; font-family: var(--ig); } .nt__t { position: relative; pointer-events: auto; border-radius: 18px; background: color-mix(in srgb, var(--s2) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 20px 44px -16px rgba(0,0,0,.85); opacity: 0; transform: translateX(24px) scale(.98); transition: opacity .22s, transform .25s cubic-bezier(.2,.9,.3,1.15); } .nt__t.on { opacity: 1; transform: none; } .nt__t > a { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; color: var(--t2); text-decoration: none; font-size: 14px; line-height: 1.35; } .nt__t > a > span { display: grid; gap: 2px; min-width: 0; } .nt__t > a > span > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .nt__t small { color: var(--acc-t); font-weight: 700; font-size: 12px; letter-spacing: .02em; } .nt__t b { color: var(--text); font-weight: 600; } .nt__x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--mute); font-size: 18px; cursor: pointer; } .nt__x:hover { background: var(--s3); color: var(--text); } @media (max-width: 600px) { .nt { top: calc(var(--hdr, 64px) + 8px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; } .nt__t { transform: translateY(-16px); } .nt__t.on { transform: none; } } .ptabs { margin: 18px 0 18px; } .ptab[hidden] { display: none; } .ptab { display: grid; gap: 14px; animation: dmPop .22s ease-out; } .ptab__hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; } .ptab__hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; } .ptab__hero b { display: block; font: 800 24px/1.15 var(--body); margin-bottom: 6px; } .ptab__hero span { color: var(--t2); font-size: 16px; line-height: 1.5; } .ptab__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ptab__box { padding: 20px; } .ptab__box h3 { margin: 0 0 12px; font: 800 17px var(--body); color: var(--acc-t); } .ptab__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ptab__list li { display: grid; gap: 2px; padding-left: 26px; position: relative; } .ptab__list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font: 800 11px/18px var(--body); text-align: center; } .ptab__list b { font-size: 15px; } .ptab__list span { color: var(--mute); font-size: 14px; line-height: 1.45; } .ptab__go { justify-self: start; } @media (max-width: 700px) { .ptab__hero { grid-template-columns: minmax(0, 1fr); } .ptab__cols { grid-template-columns: minmax(0, 1fr); } .ptab__go { justify-self: stretch; text-align: center; justify-content: center; } } .cmx { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: end stretch; font-family: var(--ig); } .cmx__back { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .2s; } .cmx.on .cmx__back { opacity: 1; } .cmx__card { --kb: 0px; position: relative; min-width: 0; display: flex; flex-direction: column; height: min(86dvh, calc(100dvh - var(--kb) - 30px)); margin-bottom: var(--kb); background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.3,1); } .cmx.on .cmx__card { transform: none; } .cmx__h { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 16px 10px; border-bottom: 1px solid var(--line); touch-action: none; } .cmx__h .sh__grab { display: block; margin: 0; } .cmx__h b { font-size: 17px; font-weight: 700; } .cmx__h .sh__x { top: 50%; right: 10px; } .cmx__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 10px; } .cmx__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 4px; } .cmx__sort { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: var(--text); font: 600 14.5px var(--ig); cursor: pointer; } .cmx__sort .ic { width: 16px; height: 16px; color: var(--mute); } .cmx__n { color: var(--mute); font-size: 13px; } .cmx__c { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; align-items: start; } .cmx__c .fd-ava { width: 40px; height: 40px; font-size: 15px; } .cmx__c--kid { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px 0; } .cmx__c--kid .fd-ava { width: 30px; height: 30px; font-size: 12px; } .cmx__kids { padding-left: 50px; } .cmx__cb { min-width: 0; display: grid; gap: 3px; } .cmx__nm { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14.5px; } .cmx__nm a { color: var(--text); font-weight: 600; text-decoration: none; } .cmx__nm .pc__team .ic { width: 14px; height: 14px; } .cmx__to-n { color: var(--mute); font-size: 13px; } .cmx__t { font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; } .cmx__t a { color: #6cb4ff; } .cmx__img { padding: 0; border: 0; background: none; justify-self: start; cursor: zoom-in; } .cmx__img img { max-width: min(260px, 100%); max-height: 260px; border-radius: 12px; display: block; } .cmx__m { display: flex; gap: 14px; align-items: center; color: var(--mute); font-size: 13px; } .cmx__m button { padding: 0; border: 0; background: none; color: var(--mute); font: 600 13px var(--ig); cursor: pointer; } .cmx__m button:hover { color: var(--text); } .cmx__like { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0 4px 6px; border: 0; background: none; color: var(--mute); font: 500 13.5px var(--ig); cursor: pointer; } .cmx__like .ic { width: 18px; height: 18px; } .cmx__like.on { color: #ff3b5c; } .cmx__like.on .ic { fill: currentColor; } .cmx__like.pop .ic { animation: likePop .35s ease; } .cmx__more { display: block; margin: 2px 0 8px 40px; padding: 4px 0; border: 0; background: none; color: var(--mute); font: 600 13.5px var(--ig); cursor: pointer; } .cmx__more:hover { color: var(--text); } .cmx__c--hl { animation: cmHl 1.8s ease; border-radius: 12px; } @keyframes cmHl { 0%, 40% { background: color-mix(in srgb, var(--acc) 12%, transparent); } } .cmx__empty { display: grid; justify-items: center; gap: 6px; padding: 40px 0; color: var(--mute); text-align: center; } .cmx__empty .ic { width: 40px; height: 40px; color: var(--s5); } .cmx__empty b { color: var(--text); font-size: 16px; } .cmx__f { display: grid; gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); } .cmx__to { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--s2); color: var(--t2); font-size: 13px; } .cmx__to[hidden] { display: none; } .cmx__to .ic { width: 15px; height: 15px; color: var(--acc-t); } .cmx__to span { flex: 1; } .cmx__to button { border: 0; background: none; color: var(--mute); font-size: 18px; cursor: pointer; } .cmx__row { display: flex; align-items: flex-end; gap: 10px; } .cmx__row > .fd-ava { width: 34px; height: 34px; font-size: 13px; margin-bottom: 3px; } .cmx__row textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: 16px/1.35 var(--ig); } .cmx__row textarea:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 60%, transparent); } .cmx__send { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); cursor: pointer; transition: opacity .15s; } .cmx__send:disabled { opacity: .35; cursor: default; } .cmx__send .ic { width: 18px; height: 18px; } .cmx--wide { place-items: center; } .cmx--wide .cmx__card { width: min(640px, calc(100vw - 40px)); height: min(860px, calc(100dvh - 60px)); margin: 0; border-radius: 20px; border-bottom: 1px solid var(--line); transform: translateY(18px) scale(.98); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s; } .cmx--wide.on .cmx__card { transform: none; opacity: 1; } .cmx--wide .sh__grab { display: none; } .cmx--wide .cmx__h { padding: 14px 16px; touch-action: auto; } .cmx__post .pc { border: 0; background: transparent; padding: 12px 0; box-shadow: none; } .cmx__post { border-bottom: 1px solid var(--line); margin-bottom: 4px; } .cmx--wide .cmx__f { border-radius: 0 0 20px 20px; } .fd-st__ring { display: grid; place-items: center; border: 0; cursor: pointer; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); } .fd-st.seen .fd-st__ring { background: var(--s4); } .fd-st--me.none .fd-st__ring { background: transparent; } .fd-st--me { cursor: default; } .fd-st__plus { position: absolute; top: 46px; left: 50%; margin-left: 13px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 3px solid var(--bg, #0b0b0c); background: #fff; color: #0b0b0c; display: grid; place-items: center; cursor: pointer; } .fd-st__plus .ic { width: 14px; height: 14px; stroke-width: 3; } .fd-st { width: 84px; } .fd-st span:last-child { font-size: 12px; max-width: 84px; } .ig__avaw { grid-area: ava; position: relative; align-self: start; width: max-content; } .ig__plus { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 4px solid var(--bg, #0b0b0c); background: #fff; color: #0b0b0c; display: grid; place-items: center; cursor: pointer; } .ig__plus .ic { width: 18px; height: 18px; stroke-width: 3; } .ig__ava--story { background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); } @media (max-width: 640px) { .ig__plus { width: 26px; height: 26px; border-width: 3px; right: 0; bottom: 0; } .ig__plus .ic { width: 14px; height: 14px; } } .stc .stc__pv { --h: 80; position: relative; align-self: center; width: min(220px, 56vw); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; display: grid; place-items: center; cursor: pointer; background: linear-gradient(160deg, hsl(var(--h) 60% 22%), #0b0b0c 70%) center / cover no-repeat; border: 1px solid var(--line); } .stc__ph { display: grid; justify-items: center; gap: 4px; color: var(--t2); text-align: center; padding: 10px; } .stc__ph .ic { width: 30px; height: 30px; color: var(--acc-t); } .stc__ph small { color: var(--mute); } .stc__pv.has .stc__ph { display: none; } .stc__txt { position: absolute; left: 10px; right: 10px; bottom: 12px; margin: 0; font-weight: 700; font-size: 14px; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.8); overflow-wrap: anywhere; } .stc__pv:not(.has) .stc__txt { position: static; font-size: 17px; } .stc__pv:not(.has):has(.stc__txt:not(:empty)) .stc__ph { display: none; } .stc textarea { width: 100%; resize: none; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); color: var(--text); font: 16px/1.35 var(--ig); } .stc__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; } .stc__btns .btn { justify-content: center; } .stc__btns .ic { width: 16px; height: 16px; } .fd-nav__ava { display: none; } @media (max-width: 760px) { .fd { padding-bottom: 96px; } .fd-nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1550; display: flex; justify-content: space-between; overflow: visible; padding: 6px; border-radius: 30px; background: rgba(22,22,25,.94); border: 1px solid var(--line); box-shadow: 0 18px 40px -14px rgba(0,0,0,.85); } .fd-nav a { position: relative; flex: 1; justify-content: center; height: 52px; padding: 0; border-radius: 24px; color: var(--t2); } .fd-nav a > span:not(.fd-ava) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fd-nav a.on { background: var(--s3); color: var(--text); } .fd-nav svg { width: 26px; height: 26px; } .fd-nav a.on svg { stroke-width: 2.4; } .fd-nav em { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; min-width: 19px; height: 19px; padding: 0 5px; font-size: 11px; background: #ff3b5c; color: #fff; border: 2px solid rgba(22,22,25,1); } .fd-nav__me > .ic, .fd-nav__me > svg { display: none; } .fd-nav__me .fd-nav__ava { display: grid; width: 30px; height: 30px; font-size: 13px; } .fd-nav__me.on .fd-nav__ava { box-shadow: 0 0 0 2px var(--s3), 0 0 0 4px var(--text); } .fd__side .fd-nav { margin: 0; } body:has(.dm--open) .fd-nav { display: none; } body:has(.fd) .rd--min { bottom: calc(80px + env(safe-area-inset-bottom)); } body:has(.fd) .hlp__btn { bottom: calc(146px + env(safe-area-inset-bottom)); } body:has(.dm--open) .rd--min { display: none; } } .rd--gone { display: none !important; } .nav__radio, .nav__help { display: none; } @media (max-width: 600px), (max-height: 500px) and (pointer: coarse) { .rd.rd--min { left: auto; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); } .rd--min .rd__pill { width: auto; max-width: none; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; position: relative; touch-action: none; transition: transform .2s, opacity .2s; } .rd--min .rd__pill-t { display: none; } .rd--min .rd__pcov { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--acc); box-shadow: 0 14px 30px -10px rgba(0,0,0,.8); } .rd--min .rd__pcov img { border-radius: 50%; } .rd--on.rd--min .rd__pcov img { animation: rdSpin 8s linear infinite; } .rd--min .rd__pcov .rd__eq { border-radius: 50%; } .rd--min .rd__pplay { border-radius: 50%; } .rd--min .rd__pexp { position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border: 2px solid var(--bg) !important; background: var(--s3) !important; } .rd--min .rd__pexp .ic { width: 13px; height: 13px; } .hlp__btn { bottom: calc(80px + env(safe-area-inset-bottom)); } .nav__radio, .nav__help { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--acc-t); font: 700 16px var(--body); cursor: pointer; } .nav__radio[hidden] { display: none; } .nav__radio .ic, .nav__help .ic { width: 20px; height: 20px; } .hlp__btn { display: none !important; } .hlp { bottom: calc(16px + env(safe-area-inset-bottom)) !important; height: min(560px, calc(100dvh - 120px)) !important; } } @keyframes rdSpin { to { transform: rotate(1turn); } } #leaflet { isolation: isolate; } input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; text-align: left; } input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; } .ig__btns .btn { white-space: nowrap; } @media (max-width: 640px) { .ig__long { display: none; } } .rd__play, .rd__skip { display: inline-grid; place-items: center; cursor: pointer; } .rd__play .ic { width: 22px; height: 22px; fill: currentColor; stroke-width: 0; } .rd__play .ic[viewBox] path { stroke: none; } .rd__skip { width: 40px; height: 40px; background: var(--s2); border: 1px solid var(--line); transition: background .15s, color .15s; } .rd__skip:hover { background: var(--s3); color: var(--acc-t); } .rd__skip .ic { width: 17px; height: 17px; fill: currentColor; } .rp__head[hidden] { display: none; } .jump { animation: jumpHl 1.4s ease; border-radius: 14px; } @keyframes jumpHl { 0%, 12% { box-shadow: 0 0 0 3px var(--hot); transform: translateX(0); } 4% { transform: translateX(-6px); } 8% { transform: translateX(6px); } 100% { box-shadow: 0 0 0 3px transparent; } } .dm__play { position: relative; } .dm__ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; overflow: visible; } .dm__ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--dl, 0)); opacity: 0; transition: stroke-dashoffset .2s linear, opacity .2s; } .dm__au--dl .dm__ring circle, .dm__m--sending .dm__ring circle { opacity: 1; } .dm__au--dl:not([style*="--dl"]) .dm__ring { animation: dmSpin 1s linear infinite; } .dm__au--dl:not([style*="--dl"]) .dm__ring circle { stroke-dashoffset: 70; } .dm__au--wait .dm__ring { animation: dmSpin 1s linear infinite; } .dm__au--wait .dm__ring circle { opacity: 1; stroke-dashoffset: 70; } @keyframes dmSpin { to { transform: rotate(270deg); } } .dm__au--get .dm__wave i, .dm__m--sending .dm__wave i { opacity: .45; } .dm__m--sending .dm__play { pointer-events: none; } .dm__m--sending .dm__prog { display: none; } .dm__b--over:has(.dm__circle) { display: grid; justify-items: end; } .dm__m:not(.dm__m--me) .dm__b--over:has(.dm__circle) { justify-items: start; } .dm__b--over:has(.dm__circle) .dm__time { position: static; margin-top: 6px; } .dm__m--sending:has(.dm__circle, .dm__au) { opacity: 1; } .dm__up { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.42); color: #fff; cursor: pointer; z-index: 1; } .dm__up .ic { width: 30px; height: 30px; stroke-width: 1.8; } .dm__upring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); animation: dmSpin 1.4s linear infinite; overflow: visible; } .dm__upring circle { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - max(var(--up, 0), 8)); transition: stroke-dashoffset .25s linear; } .dm__m--sending .dm__play[data-upcancel] { pointer-events: auto; cursor: pointer; } .dm__m--sending .dm__ring { animation: dmSpin 1.4s linear infinite; } .dm__m--sending .dm__ring circle { stroke-dashoffset: calc(100 - max(var(--dl, 0), 8)); } @media (max-width: 760px) { html.dm-full, html.dm-full body { overflow: hidden; overscroll-behavior: none; } html.dm-full .dm.dm--open { position: fixed; z-index: 1450; top: var(--hdr, 64px); left: 0; right: 0; bottom: var(--kb, 0px); height: auto; min-height: 0; margin: 0; border-radius: 0; border: 0; background: var(--card); } html.dm-full .gate-bar { display: none; } html.dm-full .dm__chat { height: 100%; } html.dm-full .dm__form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } html.dm-full .rd, html.dm-full .hlp__btn { display: none; } .dm:not(.dm--open) { height: calc(100dvh - var(--hdr, 64px) - 120px); } } html[data-off~="release"] [data-sec="release"] { display: none !important; } html[data-off~="royalty"] [data-sec="royalty"] { display: none !important; } html[data-off~="legal"] [data-sec="legal"] { display: none !important; } html[data-off~="analytics"] [data-sec="analytics"] { display: none !important; } html[data-off~="producers"] [data-sec="producers"] { display: none !important; } html[data-off~="engineers"] [data-sec="engineers"] { display: none !important; } html[data-off~="studios"] [data-sec="studios"] { display: none !important; } html[data-off~="designers"] [data-sec="designers"] { display: none !important; } html[data-off~="concerts"] [data-sec="concerts"] { display: none !important; } html[data-off~="events"] [data-sec="events"] { display: none !important; } html[data-off~="collabs"] [data-sec="collabs"] { display: none !important; } html[data-off~="merch"] [data-sec="merch"] { display: none !important; } html[data-off~="ai"] [data-sec="ai"] { display: none !important; } html[data-off~="avatar"] [data-sec="avatar"] { display: none !important; } html[data-off~="feed"] [data-sec="feed"] { display: none !important; } html[data-off~="radio"] [data-sec="radio"] { display: none !important; } html[data-off~="promo"] [data-sec="promo"] { display: none !important; } html[data-off~="partners"] [data-sec="partners"] { display: none !important; } html.sec-closed main > :not(.gate-note):not(.closed) { display: none !important; } html.sec-closed main > .gate-note ~ .closed { display: none !important; } .gate-note { display: none; } html.sec-closed .gate-note { display: block; } .gate-note .closed__in { min-height: 56vh; } .gate-bar { position: sticky; top: var(--hdr, 72px); z-index: 900; display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px; background: color-mix(in srgb, var(--vio) 22%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--vio) 45%, transparent); font-size: 13.5px; color: var(--t2); } html.sec-preview .gate-bar { display: flex; } .gate-bar .ic { width: 15px; height: 15px; color: var(--vio); } .gate-bar button, .gate-user button { border: 0; background: none; color: var(--acc-t); font: 700 13.5px var(--body); cursor: pointer; text-decoration: underline; } .gate-user { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3200; display: none; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--s2); border: 1px solid var(--vio); box-shadow: 0 14px 34px -12px rgba(0,0,0,.8); font-size: 13.5px; } html.as-user .gate-user { display: flex; } .adm__launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 6px 0 12px; } .adm__roles { flex-wrap: wrap; } .nt__ios { display: flex; gap: 10px; margin: 0 0 6px; padding: 10px 14px; border-radius: 14px; background: var(--s2); color: var(--t2); font-size: 13px; line-height: 1.45; } .nt__ios[hidden] { display: none; } .nt__ios .ic { width: 18px; height: 18px; color: var(--acc-t); flex: none; margin-top: 2px; } @media (max-width: 600px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea { font-size: 16px !important; } } .sp__ans p { white-space: pre-line; } .adm__auth { display: block; color: var(--mute); font-size: 12.5px; } .tiles--wide .tile:not(.tile--big) { grid-column: span 2; } .nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } .pro__demo { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--mute); font-size: 14px; } .pro__demo .ic { width: 16px; height: 16px; flex: none; } @media (min-width: 1200px) { .dm:has(> .dm__info:not([hidden])) { grid-template-columns: 300px minmax(0, 1fr) 340px; } .dm:has(> .dm__info:not([hidden])) > .dm__info { position: static; width: auto; box-shadow: none; } } .dm__m { -webkit-touch-callout: none; } @media (hover: none) { .dm__m { -webkit-user-select: none; user-select: none; } } .foot { padding-bottom: 72px; } @media (max-width: 900px) { .adm__nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: 10px 12px !important; gap: 6px !important; position: sticky !important; top: var(--hdr, 64px); z-index: 20; background: var(--bg); } .adm__nav::-webkit-scrollbar { display: none; } .adm__nav a { flex: none; white-space: nowrap; padding: 9px 12px; font-size: 14px; } .adm__nav { align-items: center; } .adm__nav .adm__switch, .adm__nav .adm__me, .adm__nav .adm__grp { display: none !important; } .adm__main { scroll-margin-top: 130px; } .adm__main .adm__t { display: block; overflow-x: auto; } .adm__inline { flex-wrap: wrap; } .adm__inline input { min-width: 0; flex: 1 1 140px; } } .top { padding-top: env(safe-area-inset-top, 0px); } body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body[data-page="cabinet"] main, body[data-page="feed"] main, body[data-page="radio"] main, body[data-page="admin"] main, body[data-page="pro"] main, body[data-page="artist"] main { min-height: 100dvh; } .cart-toast { width: max-content; max-width: calc(100% - 32px); } @media (max-width: 600px) { .ck { flex-wrap: wrap; } .ck > :first-child { flex: 1 1 100%; } .am__h { padding: 0 34px; font-size: 21px; } .wnav { flex-wrap: wrap; } .wnav__err:not(:empty) { order: -1; flex: 1 1 100%; } .seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg > * { flex: none; } .am__x, .cf__card .am__x { width: 44px; height: 44px; } } @media (pointer: coarse) { .pc__more { width: 40px; height: 40px; } .rel__del { width: 40px; height: 40px; top: 2px; right: 2px; } .stepper button { width: 38px; height: 38px; } .rd--min .rd__pexp { width: 30px !important; height: 30px !important; top: -10px !important; left: -10px !important; } .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; } } @media (max-width: 600px) { .mk__sz button { width: 30px; height: 30px; } } @media (max-width: 600px) { .mapbox__list { max-height: none; overflow: visible; } } @media (max-width: 600px) and (max-height: 700px) { .pg-img { max-height: 170px; } }