.gpp-sp {
	--gpp-pic-red: #e5484d;
	--gpp-pic-green: #3fae5a;
	--gpp-pic-dim: rgba(255, 255, 255, 0.28);
}
.gpp-sp .gpp-pic {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	font-family: var(--gpp-font);
	font-weight: 500;
	fill: var(--gpp-white);
}
.gpp-sp .gpp-pic__bg { fill: var(--gpp-navy-deepest); }
.gpp-sp .gpp-pic__wall-l { font-size: 12px; font-weight: 400; fill: var(--gpp-pic-dim); letter-spacing: 0.04em; }
.gpp-sp .gpp-pic__wall-n { font-size: 19px; font-weight: 400; fill: var(--gpp-pic-dim); }
.gpp-sp .gpp-pic__qmark { font-size: 230px; fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__arrow { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__arrow-t { font-size: 22px; fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__post { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__btn { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; }
.gpp-sp .gpp-pic__btn--pressed { fill: var(--gpp-pic-red); stroke: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__btn-t { font-size: 34px; fill: rgba(255, 255, 255, 0.75); letter-spacing: 0.06em; }
.gpp-sp .gpp-pic__btn-t--pressed { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__tag { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__tag-t { font-size: 26px; fill: var(--gpp-navy); letter-spacing: 0.06em; }
.gpp-sp .gpp-pic__tick { fill: none; stroke: var(--gpp-navy); stroke-width: 7; stroke-linecap: butt; stroke-linejoin: miter; }
.gpp-sp .gpp-pic__cursor { fill: var(--gpp-white); stroke: var(--gpp-navy); stroke-width: 3; stroke-linejoin: miter; }
.gpp-sp .gpp-pic__chip { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__card { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__rank { font-size: 56px; fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__suit { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__suit--red { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__stamp { fill: none; stroke: var(--gpp-pic-red); stroke-width: 8; }
.gpp-sp .gpp-pic__stamp-t { font-size: 84px; fill: var(--gpp-pic-red); letter-spacing: 0.12em; }
.gpp-sp .gpp-pic__axis { stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; }
.gpp-sp .gpp-pic__graph { fill: none; stroke: var(--gpp-white); stroke-width: 7; stroke-linejoin: miter; stroke-linecap: butt; }
.gpp-sp .gpp-pic__graph--down { stroke: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__mark { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__divider { stroke: rgba(255, 255, 255, 0.25); stroke-width: 2; }
.gpp-sp .gpp-pic__cross { stroke: var(--gpp-pic-red); stroke-width: 18; stroke-linecap: butt; }
.gpp-sp .gpp-pic__word { font-size: 40px; fill: var(--gpp-white); letter-spacing: 0.04em; }
.gpp-sp .gpp-pic__die { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__pip { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__dialog { fill: var(--gpp-navy-deepest); stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.gpp-sp .gpp-pic__field { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__field-t { font-size: 30px; font-weight: 400; fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__caret { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__noresult { font-size: 38px; fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__tab { fill: rgba(255, 255, 255, 0.16); }
.gpp-sp .gpp-pic__favicon { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__tab-t { font-size: 24px; font-weight: 400; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__urlbar { fill: rgba(255, 255, 255, 0.08); }
.gpp-sp .gpp-pic__url { fill: rgba(255, 255, 255, 0.08); }
.gpp-sp .gpp-pic__row { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.gpp-sp .gpp-pic__row-t { font-size: 22px; font-weight: 400; fill: rgba(255, 255, 255, 0.85); }
.gpp-sp .gpp-pic__row-n { font-size: 22px; font-weight: 400; fill: rgba(255, 255, 255, 0.4); }
.gpp-sp .gpp-pic__flag { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__btn--solver { stroke: var(--gpp-gold); stroke-width: 5; }
.gpp-sp .gpp-pic__btn-t--solver { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__btn-t--big { font-size: 42px; }
.gpp-sp .gpp-pic__tag-t--small { font-size: 22px; }
.gpp-sp .gpp-pic__tick--small { stroke-width: 6; }
.gpp-sp .gpp-pic__strip-dim { fill: rgba(255, 255, 255, 0.18); }
.gpp-sp .gpp-pic__strip-gold { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__strip-t { font-size: 26px; fill: var(--gpp-navy); letter-spacing: 0.04em; }
.gpp-sp .gpp-pic__strip-t--dim { fill: rgba(255, 255, 255, 0.6); }
.gpp-sp .gpp-pic__graph--dash { stroke-dasharray: 14 12; stroke-width: 7; }
.gpp-sp .gpp-pic__graph--gold { stroke: var(--gpp-gold); }
.gpp-sp .gpp-pic__now { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__card--dim { fill: #8c95a1; }
.gpp-sp .gpp-pic__rank--small { font-size: 40px; }
.gpp-sp .gpp-pic__equity { font-size: 54px; fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__equity--dim { fill: rgba(255, 255, 255, 0.45); }
.gpp-sp .gpp-pic__lost { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__lost-t { font-size: 26px; fill: var(--gpp-white); letter-spacing: 0.08em; }
.gpp-sp .gpp-pic__legend-line { stroke-width: 6; }
.gpp-sp .gpp-pic__legend { font-size: 22px; font-weight: 400; fill: rgba(255, 255, 255, 0.8); }
.gpp-sp .gpp-pic__btn--fold { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__btn--call { fill: var(--gpp-pic-green); stroke: var(--gpp-pic-green); }
.gpp-sp .gpp-pic__pause { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__card--board { fill: rgba(255, 255, 255, 0.82); }
.gpp-sp .gpp-pic__act { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.gpp-sp .gpp-pic__act--on { fill: var(--gpp-white); stroke: var(--gpp-white); }
.gpp-sp .gpp-pic__act-t { font-size: 40px; fill: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }
.gpp-sp .gpp-pic__act-t--on { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__win { fill: var(--gpp-navy-deepest); stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; }
.gpp-sp .gpp-pic__loop { fill: none; stroke: var(--gpp-navy); stroke-width: 7; stroke-linejoin: miter; }
.gpp-sp .gpp-pic__loop-head { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__count { font-size: 36px; fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__avatar { fill: rgba(255, 255, 255, 0.3); }
.gpp-sp .gpp-pic__bubble { fill: rgba(255, 255, 255, 0.1); }
.gpp-sp .gpp-pic__msg { font-size: 34px; font-weight: 400; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__replies { font-size: 24px; font-weight: 400; fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__input { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 2; }
.gpp-sp .gpp-pic__crumb { font-size: 18px; font-weight: 400; fill: rgba(255, 255, 255, 0.45); letter-spacing: 0.04em; }
.gpp-sp .gpp-pic__bar { fill: rgba(255, 255, 255, 0.12); }
.gpp-sp .gpp-pic__thread { font-size: 24px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__thread--row { font-size: 22px; }
.gpp-sp .gpp-pic__post { fill: rgba(255, 255, 255, 0.07); }
.gpp-sp .gpp-pic__user { font-size: 20px; fill: rgba(255, 255, 255, 0.85); }
.gpp-sp .gpp-pic__meta { font-size: 17px; font-weight: 400; fill: rgba(255, 255, 255, 0.45); }
.gpp-sp .gpp-pic__meta--views { font-size: 26px; }
.gpp-sp .gpp-pic__replies--big { font-size: 40px; }
.gpp-sp .gpp-pic__col { font-size: 16px; font-weight: 400; fill: rgba(255, 255, 255, 0.4); letter-spacing: 0.06em; text-transform: uppercase; }
.gpp-sp .gpp-pic__dimrow { font-size: 20px; font-weight: 400; fill: rgba(255, 255, 255, 0.4); }
.gpp-sp .gpp-pic__crumb--big { font-size: 24px; }
.gpp-sp .gpp-pic__user--big { font-size: 24px; }
.gpp-sp .gpp-pic__meta--big { font-size: 24px; }
.gpp-sp .gpp-pic__k { font-size: 18px; fill: var(--gpp-gold); letter-spacing: 0.14em; }
.gpp-sp .gpp-pic__ttl { font-size: 36px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__score { font-size: 64px; fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__rule { stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; }
.gpp-sp .gpp-pic__lbl { font-size: 18px; fill: var(--gpp-gold); letter-spacing: 0.12em; }
.gpp-sp .gpp-pic__val { font-size: 38px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__val--leak { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic--f3 .gpp-pic__val, .gpp-sp .gpp-pic--r2 .gpp-pic__val { font-size: 30px; }
.gpp-sp .gpp-pic__badge { fill: rgba(239, 68, 68, 0.12); stroke: rgba(239, 68, 68, 0.55); stroke-width: 2; }
.gpp-sp .gpp-pic__badge-t { font-size: 15px; fill: #ff9a9a; letter-spacing: 0.12em; }
.gpp-sp .gpp-pic__track { fill: rgba(255, 255, 255, 0.18); }
.gpp-sp .gpp-pic__zone { fill: rgba(246, 166, 100, 0.35); stroke: var(--gpp-gold); stroke-width: 2; }
.gpp-sp .gpp-pic__you { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__gto-t { font-size: 22px; fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__you-t { font-size: 32px; fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__rec-t { font-size: 20px; font-weight: 400; fill: rgba(255, 255, 255, 0.85); }
.gpp-sp .gpp-pic__ttl--f3 { font-size: 28px; }
.gpp-sp .gpp-pic__k--f3 { font-size: 14px; font-weight: 500; letter-spacing: 0.16em; }
@media (max-width: 767px) { .gpp-sp .gpp-pic__k--f3 { font-size: 18px; } }
.gpp-sp .gpp-pic__measured { font-size: 17px; font-weight: 400; fill: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }
.gpp-sp .gpp-pic__off { font-size: 18px; font-weight: 400; fill: rgba(255, 255, 255, 0.75); }
.gpp-sp .gpp-pic__gto { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__end { font-size: 18px; font-weight: 400; fill: rgba(255, 255, 255, 0.45); }
.gpp-sp .gpp-pic__x-vtitle { font-size: 22px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__x-screen { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__x-dim { font-size: 17px; font-weight: 400; fill: rgba(255, 255, 255, 0.5); letter-spacing: 0.1em; }
.gpp-sp .gpp-pic__x-action { font-size: 30px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__x-cam { fill: none; stroke: var(--gpp-gold); stroke-width: 3; }
.gpp-sp .gpp-pic__x-namestrip { fill: rgba(10, 15, 26, 0.8); }
.gpp-sp .gpp-pic__x-name { font-size: 18px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__x-play { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__x-play-tri { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__x-track { fill: rgba(255, 255, 255, 0.18); }
.gpp-sp .gpp-pic__x-fill { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__x-live { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__x-live-t { font-size: 18px; fill: var(--gpp-navy); letter-spacing: 0.1em; }
.gpp-sp .gpp-pic__x-tile { fill: rgba(255, 255, 255, 0.14); }
.gpp-sp .gpp-pic__x-init { font-size: 18px; fill: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em; }
.gpp-sp .gpp-pic__x-course { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.gpp-sp .gpp-pic__x-course--lit { fill: var(--gpp-gold); stroke: var(--gpp-gold); }
.gpp-sp .gpp-pic__x-cname { font-size: 18px; fill: var(--gpp-white); }
.gpp-sp .gpp-pic__x-cname--lit { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__x-count { font-size: 17px; font-weight: 400; fill: rgba(255, 255, 255, 0.5); }
.gpp-sp .gpp-pic__x-count--lit { fill: rgba(13, 27, 42, 0.8); }
.gpp-sp .gpp-pic__x-leaktag { fill: var(--gpp-navy); }
.gpp-sp .gpp-pic__x-leaktag-t { font-size: 17px; fill: var(--gpp-gold); letter-spacing: 0.03em; }
.gpp-sp .gpp-pic__x-foot { font-size: 18px; font-weight: 400; fill: rgba(255, 255, 255, 0.75); }
.gpp-pics { padding: var(--gpp-section-y) 0 96px; background: var(--gpp-navy); }
.gpp-pics__lede { max-width: 820px; }
.gpp-pics__beat { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--gpp-line); }
.gpp-pics__title { font-size: 26px !important; font-weight: 500 !important; line-height: 1.25 !important; margin-bottom: 24px !important; }
.gpp-pics__round { margin: 0 0 12px !important; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gpp-gold); }
.gpp-pics__pair { display: flex; flex-wrap: wrap; gap: 40px; }
.gpp-pics__pair + .gpp-pics__round { margin-top: 40px !important; }
.gpp-pics__fig { flex: 0 1 400px; max-width: 400px; margin: 0 !important; }
.gpp-pics__note { margin: 12px 0 0 !important; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.gpp-sp .gpp-pics__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--gpp-navy-deepest); border-radius: 0; }
@media (max-width: 980px) {
	.gpp-pics__beat { margin-top: 48px; }
	.gpp-pics__title { font-size: 22px !important; }
	.gpp-pics__pair { gap: 28px; }
}
.gpp-sp .gpp-pic__badge--good { fill: rgba(246, 166, 100, 0.12); stroke: var(--gpp-gold); }
.gpp-sp .gpp-pic__badge-t--good { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__r1-tick { fill: none; stroke: var(--gpp-gold); stroke-width: 8; stroke-linecap: square; }
.gpp-sp .gpp-pic__r1-last { fill: rgba(255, 255, 255, 0.4); }
.gpp-sp .gpp-pic__r1-last-t { font-size: 14px; font-weight: 400; fill: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; }
@media (max-width: 767px) { .gpp-sp .gpp-pic__r1-last-t { font-size: 18px; } }
.gpp-sp .gpp-pic__r1-a { opacity: 0; }
.gpp-sp .gpp-pic__r1-mark { transform: translateX(-118.5px); fill: var(--gpp-white); }
.gpp-sp .gpp-pic--r1.is-play .gpp-pic__r1-a { animation: gpp-r1-a 7s infinite; }
.gpp-sp .gpp-pic--r1.is-play .gpp-pic__r1-b { animation: gpp-r1-b 7s infinite; }
.gpp-sp .gpp-pic--r1.is-play .gpp-pic__r1-ghost { animation: gpp-r1-ghost 7s infinite; }
.gpp-sp .gpp-pic--r1.is-play .gpp-pic__r1-mark { animation: gpp-r1-mark 7s infinite; }
@keyframes gpp-r1-a { 0%, 37% { opacity: 1; } 42%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes gpp-r1-b { 0%, 37% { opacity: 0; } 42%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes gpp-r1-ghost { 0%, 20% { opacity: 0; } 26%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes gpp-r1-mark {
	0%, 20% { transform: translateX(0); fill: var(--gpp-pic-red); opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	40% { transform: translateX(-118.5px); fill: var(--gpp-pic-red); }
	44%, 90% { transform: translateX(-118.5px); fill: var(--gpp-white); opacity: 1; }
	93% { transform: translateX(-118.5px); fill: var(--gpp-white); opacity: 0; }
	94% { transform: translateX(0); fill: var(--gpp-pic-red); opacity: 0; }
	100% { transform: translateX(0); fill: var(--gpp-pic-red); opacity: 1; }
}
.gpp-sp .gpp-pic__r2-mark--leak { fill: var(--gpp-pic-red); }
.gpp-sp .gpp-pic__r2-mark--improving { fill: rgba(255, 255, 255, 0.75); }
.gpp-sp .gpp-pic__r2-mark--good { fill: var(--gpp-white); }
.gpp-sp .gpp-pic__badge--improving { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.45); }
.gpp-sp .gpp-pic__badge-t--improving { fill: rgba(255, 255, 255, 0.85); }
.gpp-sp .gpp-pic__badge-t--leak { fill: #ff9a9a; }
.gpp-sp .gpp-pic--r2.is-ready .gpp-pic__r2-row { opacity: 0; }
.gpp-sp .gpp-pic--r2.is-play .gpp-pic__r2-row { animation: gpp-r2-row 0.5s ease-out both; animation-delay: calc(0.2s + var(--gpp-r2-i) * 0.8s); }
.gpp-sp .gpp-pic--r2.is-play .gpp-pic__r2-mark { animation: gpp-r2-mark 0.8s cubic-bezier(0.65, 0, 0.35, 1) both; animation-delay: calc(0.35s + var(--gpp-r2-i) * 0.8s); }
.gpp-sp .gpp-pic--r2.is-play.is-out .gpp-pic__r2-row { animation: gpp-r2-out 0.5s ease-in both; }
@keyframes gpp-r2-row { from { opacity: 0; } to { opacity: 1; } }
@keyframes gpp-r2-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes gpp-r2-mark { from { transform: translateX(var(--gpp-r2-from)); } to { transform: translateX(0); } }
