@font-face { font-family: "YT Roboto"; src: url("/vendor/roboto/roboto-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "YT Roboto"; src: url("/vendor/roboto/roboto-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "YT Roboto"; src: url("/vendor/roboto/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "YT Roboto"; src: url("/vendor/roboto/roboto-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }

/* editor shell */
#ytStage { position: relative; width: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgb(255 255 255 / .10), 0 12px 40px rgb(0 0 0 / .45); }
#ytStage > .yt { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.yt-seg { display: flex; height: 28px; align-items: center; border-radius: 999px; background: rgb(107 114 128 / .15); padding: 3px; }
.yt-seg button { display: flex; height: 100%; flex: 1; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500; color: rgb(200 201 209); transition: all .125s; }
.yt-seg button.on { background: rgb(252 252 252); color: #06070b; }
.yt-cmp { display: grid; grid-template-columns: 1fr 64px; gap: 6px; }
.yt-cmp .field { width: 100%; }
.yt-sub { font-size: 11px; line-height: 14px; color: rgb(119 122 140); }
.yt-file { display: flex; height: 32px; align-items: center; gap: 8px; }
.yt-file img { height: 32px; width: 32px; border-radius: 999px; object-fit: cover; background: rgb(50 53 66); }
.yt-file img.wide { width: 56px; border-radius: 4px; }
.yt-metric-head { display: flex; align-items: center; justify-content: space-between; }
.yt-metric-head h3 { font-size: 13px; font-weight: 500; color: rgb(252 252 252); }
.yt-chartpick { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(119 122 140); cursor: pointer; }

/* the recreated analytics page: 1440x900, every position measured from a real screenshot */
.yt { position: relative; width: 1440px; height: 900px; overflow: hidden; background: #fff; color: #0f0f0f; font-family: "YT Roboto", Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; text-align: left; }
.yt *, .yt *::before, .yt *::after { box-sizing: border-box; }
.yt .abs { position: absolute; }
.yt i { font-style: normal; }
.yt .ic { position: absolute; display: block; width: 24px; height: 24px; font-size: 24px; line-height: 24px; text-align: center; color: #0f0f0f; }
.yt .ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yt .muted { color: #606060; }
.yt .pill { position: absolute; height: 36px; border-radius: 18px; background: rgba(0, 0, 0, .05); padding: 0 16px; font-size: 14px; font-weight: 500; line-height: 36px; color: #030303; white-space: nowrap; }

.yt .brand { position: absolute; left: 76px; top: 16px; display: flex; height: 32px; align-items: center; gap: 7px; }
.yt .brand svg { display: block; flex: none; }
.yt .search { position: absolute; left: 432px; top: 12px; width: 576px; height: 40px; border-radius: 20px; background: rgba(0, 0, 0, .05); }
.yt .search span { position: absolute; left: 57px; top: 9px; font-size: 16px; line-height: 22px; color: #606060; }
.yt .create { position: absolute; left: 1269px; top: 14px; width: 97px; height: 36px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 18px; font-size: 14px; font-weight: 500; line-height: 34px; color: #030303; }
.yt .create span { position: absolute; left: 39px; top: 0; }
.yt .me { position: absolute; left: 1383px; top: 16px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.yt .sbar { position: absolute; left: 1432px; top: 64px; width: 6px; height: 836px; }
.yt .sbar b { position: absolute; left: 0; width: 6px; border-radius: 3px; background: #909090; }
.yt .sbar u { position: absolute; left: 1px; width: 0; height: 0; border-left: 2px solid transparent; border-right: 2px solid transparent; }

.yt .side-av { position: absolute; left: 64px; top: 88px; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.yt .side-you { position: absolute; left: 0; top: 214px; width: 240px; text-align: center; font-size: 12px; font-weight: 500; line-height: 18px; }
.yt .side-name { position: absolute; left: 20px; top: 234px; width: 200px; text-align: center; font-size: 12px; line-height: 18px; color: #606060; }
.yt .nav { position: absolute; left: 12px; width: 215px; height: 40px; border-radius: 8px; }
.yt .nav.on { background: rgba(0, 0, 0, .05); font-weight: 500; }
.yt .nav .ic { left: 12px; top: 8px; }
.yt .nav span { position: absolute; left: 60px; top: 10px; font-size: 14px; line-height: 20px; }

.yt h1 { position: absolute; left: 280px; top: 89px; margin: 0; font-size: 33px; font-weight: 700; line-height: 40px; letter-spacing: -.6px; }
.yt .tab { position: absolute; top: 167px; font-size: 16px; font-weight: 500; line-height: 22px; color: #606060; }
.yt .tab.on { color: #0f0f0f; }
.yt .tab.on::after { content: ""; position: absolute; left: 0; right: 1px; top: 33px; height: 2px; background: #0f0f0f; }
.yt .rule { position: absolute; left: 248px; top: 202px; width: 1184px; height: 1px; background: rgba(0, 0, 0, .1); }
.yt .range-sub { position: absolute; left: 1176px; top: 146px; font-size: 12px; line-height: 18px; color: #606060; white-space: nowrap; }
.yt .range-main { position: absolute; left: 1176px; top: 163px; font-size: 16px; line-height: 22px; white-space: nowrap; }

.yt .headline { position: absolute; left: 288px; top: 232px; width: 760px; text-align: center; font-size: 24px; font-weight: 700; line-height: 32px; }

.yt .card { position: absolute; left: 272px; top: 305px; width: 792px; height: 390px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; background: #fff; }
.yt .mtabs { position: absolute; left: 0; top: 0; display: flex; width: 790px; height: 110px; }
.yt .mtab { position: relative; flex: none; width: 198px; min-width: 0; height: 110px; padding-top: 16px; background: rgba(0, 0, 0, .05); text-align: center; }
.yt .mtab:nth-child(even) { width: 197px; }
.yt .mtab:not(:last-child) { border-right: 1px solid rgba(0, 0, 0, .1); }
.yt .mtab.on { background: #fff; }
.yt .mtab .lab { font-size: 12px; font-weight: 500; line-height: 18px; color: #606060; }
.yt .mtab .val { display: flex; height: 32px; align-items: center; justify-content: center; gap: 7px; margin-top: 2px; font-size: 24px; font-weight: 700; line-height: 32px; white-space: nowrap; }
.yt .mtab .arr { display: block; width: 18px; height: 18px; flex: none; }
.yt .mtab .cmp { padding: 6px 4px 2px; font-size: 12px; font-style: italic; line-height: 18px; color: #606060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt .chart { position: absolute; left: 4px; top: 150px; width: 762px; height: 154px; overflow: visible; }
.yt .chart text { font-family: "YT Roboto", Roboto, Arial, sans-serif; font-size: 12px; fill: #0f0f0f; }
.yt .xl { position: absolute; top: 288px; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.yt .rt { position: absolute; left: 1104px; top: 219px; width: 310px; height: 500px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; }
.yt .rt .t18 { position: absolute; left: 16px; font-size: 18px; font-weight: 700; line-height: 26px; white-space: nowrap; }
.yt .rt .t14 { position: absolute; left: 16px; font-size: 14px; line-height: 20px; color: #606060; white-space: nowrap; }
.yt .rt .t12 { position: absolute; font-size: 12px; line-height: 18px; color: #606060; white-space: nowrap; }
.yt .rt .hr { position: absolute; left: 16px; width: 276px; height: 1px; background: rgba(0, 0, 0, .1); }
.yt .rt .dot { position: absolute; left: 16px; top: 45px; width: 8px; height: 8px; border-radius: 50%; background: #2fa5cb; }
.yt .rt .bars { position: absolute; left: 16px; top: 263px; width: 276px; height: 45px; }
.yt .rt .thumb { position: absolute; left: 16px; top: 395px; width: 56px; height: 32px; border-radius: 4px; object-fit: cover; }
.yt .latest { position: absolute; left: 1104px; top: 735px; width: 310px; height: 300px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; }
.yt .latest .t18 { position: absolute; left: 16px; top: 14px; font-size: 18px; font-weight: 700; line-height: 26px; }
.yt .latest .img { position: absolute; left: 16px; top: 50px; width: 276px; height: 200px; overflow: hidden; border-radius: 8px; background: #2a2418; }
.yt .latest .img .bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(14px) brightness(.75); }
.yt .latest .img .fg { position: absolute; left: 50%; top: 0; height: 155px; width: auto; max-width: 100%; transform: translateX(-50%); object-fit: contain; }
.yt .latest .img span { position: absolute; left: 16px; right: 16px; top: 106px; color: #fff; font-size: 16px; font-weight: 700; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

.yt .mini { position: absolute; left: 627px; top: 719px; width: 82px; height: 1px; background: rgba(0, 0, 0, .1); }
.yt .sec { position: absolute; left: 288px; top: 766px; width: 760px; text-align: center; font-size: 18px; font-weight: 700; line-height: 26px; }
.yt .th { position: absolute; font-size: 12px; line-height: 18px; color: #606060; }
.yt .trule { position: absolute; left: 272px; top: 870px; width: 792px; height: 1px; background: rgba(0, 0, 0, .1); }
.yt .trow-img { position: absolute; left: 312px; top: 879px; width: 120px; height: 68px; border-radius: 8px; object-fit: cover; }
.yt .trow-t { position: absolute; left: 448px; top: 893px; width: 380px; font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }