:root .sig--reg-time.sig { min-height: 470px; }
:root .sig--reg-time { container-type: inline-size; background: radial-gradient(70% 60% at 50% 45%, rgba(161, 0, 255, .22), transparent 70%), #1b1820; }
:root .sig--reg-time .rt { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 4cqi, 40px); gap: 10px; }
:root .sig--reg-time .rt__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:root .sig--reg-time .rt__year { display: flex; font: 700 clamp(3.2rem, 13cqi, 7.5rem)/1 var(--f-display); letter-spacing: 0; color: #fff; }
:root .sig--reg-time .rt__col { display: block; height: 1em; overflow-x: visible; overflow-y: clip; width: .7em; text-align: center; }
:root .sig--reg-time .rt__strip { display: flex; flex-direction: column; transition: transform .45s var(--ease-out); }
:root .sig--reg-time .rt__strip i { font-style: normal; height: 1em; line-height: 1; }
:root .sig--reg-time .rt.end .rt__year { color: var(--lilac); transition: color .6s; }
:root .sig--reg-time .rt__cap { max-width: 22ch; padding-bottom: .6em; color: var(--ink-2); font: 500 clamp(.875rem, .8rem + .5cqi, 1.0625rem)/1.4 var(--f-display); text-align: right; }
:root .sig--reg-time .rt.end .rt__cap { color: #fff; }
:root .sig--reg-time .rt__stage { position: relative; min-height: 190px; }
:root .sig--reg-time .rt__era { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateX(40px) scale(.92) rotate(2deg); filter: blur(6px); transition: opacity .7s var(--ease-out), transform 1s var(--ease-out), filter .7s; }
:root .sig--reg-time .rt__era.past { transform: translateX(-50px) scale(.9) rotate(-3deg); }
:root .sig--reg-time .rt__era.on { opacity: 1; transform: none; filter: none; }
:root .sig--reg-time .rt-print { perspective: 900px; }
:root .sig--reg-time .rt-print__s { position: relative; width: clamp(120px, 26cqi, 170px); aspect-ratio: 1 / 1.414; padding: 12% 11%; border-radius: 3px; background: #f6f3ee; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9); transform: rotate(-5deg); display: flex; flex-direction: column; gap: 7%; }
:root .sig--reg-time .rt-print__s--b { position: absolute; transform: rotate(7deg) translate(34%, 6%); background: #e3dcd2; }
:root .sig--reg-time .rt-print__logo { width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--v); }
:root .sig--reg-time .rt-print__s b { height: 9%; width: 85%; border-radius: 2px; background: #2a2530; }
:root .sig--reg-time .rt-print__s i { height: 3.2%; width: 100%; border-radius: 2px; background: #c9c1d1; }
:root .sig--reg-time .rt-print__s i.s { width: 60%; }
:root .sig--reg-time .rt-print__s em { margin-top: auto; height: 22%; border-radius: 2px; background: linear-gradient(135deg, #e3b8ff, #a100ff); }
:root .sig--reg-time .rt-web > * { width: min(78cqi, 340px); }
:root .sig--reg-time .rt-web__bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 8px 8px 0 0; background: #bdbdbd; }
:root .sig--reg-time .rt-web__bar i { width: 9px; height: 9px; background: #8f8f8f; }
:root .sig--reg-time .rt-web__bar span { flex: 1; height: 12px; margin-left: 8px; background: #e8e8e8; }
:root .sig--reg-time .rt-web__body { padding: 10px; border-radius: 0 0 8px 8px; background: #ececec; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9); }
:root .sig--reg-time .rt-web__ban { height: 46px; display: grid; place-items: center; background: #5a2a86; }
:root .sig--reg-time .rt-web__ban b { width: 50%; height: 12px; background: #e9d6ff; }
:root .sig--reg-time .rt-web__cols { display: grid; grid-template-columns: 30% 1fr; gap: 10px; margin-top: 10px; }
:root .sig--reg-time .rt-web__nav { display: grid; gap: 6px; align-content: start; }
:root .sig--reg-time .rt-web__nav i { height: 12px; background: #4a5ec9; }
:root .sig--reg-time .rt-web__txt { display: grid; gap: 6px; }
:root .sig--reg-time .rt-web__txt b { height: 14px; width: 70%; background: #333; }
:root .sig--reg-time .rt-web__txt i { height: 7px; background: #b9b9b9; }
:root .sig--reg-time .rt-web__txt i.s { width: 55%; }
:root .sig--reg-time .rt-mob__ph { position: relative; width: clamp(88px, 17cqi, 110px); aspect-ratio: 9 / 18.5; padding: 8px; border-radius: 22px; background: #0f0d12; border: 2px solid #3a3442; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9); }
:root .sig--reg-time .rt-mob__notch { position: absolute; left: 50%; top: 9px; z-index: 2; width: 34%; height: 9px; border-radius: 9px; transform: translateX(-50%); background: #0f0d12; }
:root .sig--reg-time .rt-mob__scr { height: 100%; overflow: hidden; border-radius: 15px; background: #f4f1f7; padding: 18px 7px 7px; display: grid; gap: 6px; align-content: start; }
:root .sig--reg-time .on .rt-mob__scr > * { animation: rtScroll 3.6s var(--ease-out) infinite alternate; }
@keyframes rtScroll{ to { transform: translateY(-34px); } }
:root .sig--reg-time .rt-mob__card { padding: 7px; border-radius: 8px; background: #fff; display: grid; gap: 4px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .3); }
:root .sig--reg-time .rt-mob__card i { height: 5px; border-radius: 3px; background: #d7cfe0; }
:root .sig--reg-time .rt-mob__card i.s { width: 55%; }
:root .sig--reg-time .rt-mob__card--hero { height: 68px; background: linear-gradient(135deg, var(--v), #5b00a8); }
:root .sig--reg-time .rt-vid__fr { position: relative; width: clamp(96px, 19cqi, 124px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9); }
:root .sig--reg-time .rt-vid__pic { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 35%, #e3b8ff, transparent 70%), radial-gradient(80% 50% at 30% 90%, #6b1fb0, transparent 70%), linear-gradient(180deg, #3b2347, #120b18); }
:root .sig--reg-time .on .rt-vid__pic { animation: rtKen 6s ease-in-out infinite alternate; }
@keyframes rtKen{ to { transform: scale(1.18) translate(4%, -3%); } }
:root .sig--reg-time .rt-vid__play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); backdrop-filter: blur(4px); }
:root .sig--reg-time .rt-vid__play svg { width: 18px; height: 18px; fill: #fff; }
:root .sig--reg-time .rt-vid__side { position: absolute; right: 7px; bottom: 26px; display: grid; gap: 9px; }
:root .sig--reg-time .rt-vid__side svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
:root .sig--reg-time .on .rt-vid__side span:first-child svg { animation: rtLike 1.6s 1s var(--ease-out) infinite; }
@keyframes rtLike{ 0%, 60%, 100% { transform: none; fill: none; } 20% { transform: scale(1.35); fill: #c98cff; stroke: #c98cff; } 40% { fill: #c98cff; stroke: #c98cff; } }
:root .sig--reg-time .rt-vid__prog { position: absolute; left: 8px; right: 8px; bottom: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
:root .sig--reg-time .rt-vid__prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(0); }
:root .sig--reg-time .on .rt-vid__prog i { animation: rtProg 4s linear infinite; }
@keyframes rtProg{ to { transform: scaleX(1); } }
:root .sig--reg-time .rt-ki { align-content: center; justify-items: stretch; gap: 10px; width: min(84cqi, 380px); margin: 0 auto; }
:root .sig--reg-time .rt-ki__q { justify-self: end; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; color: #1f1b24; font: 500 .875rem/1.4 var(--f-body); }
:root .sig--reg-time .rt-ki__a { display: flex; gap: 10px; align-items: flex-start; }
:root .sig--reg-time .rt-ki__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(161, 0, 255, .3); }
:root .sig--reg-time .rt-ki__ic svg { width: 17px; height: 17px; fill: none; stroke: var(--lilac); stroke-width: 1.6; stroke-linejoin: round; }
:root .sig--reg-time .rt-ki__lines { flex: 1; display: grid; gap: 7px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #2b2633; }
:root .sig--reg-time .rt-ki__lines i { height: 7px; border-radius: 4px; background: #5a5266; transform-origin: left; transform: scaleX(0); }
:root .sig--reg-time .rt-ki__lines i.s { width: 60%; }
:root .sig--reg-time .on .rt-ki__lines i { animation: rtLine .8s var(--ease-out) forwards; }
:root .sig--reg-time .on .rt-ki__lines i:nth-child(2) { animation-delay: .25s; }
:root .sig--reg-time .on .rt-ki__lines i:nth-child(3) { animation-delay: .5s; }
@keyframes rtLine{ to { transform: none; } }
:root .sig--reg-time .rt-ki__dots { display: flex; gap: 4px; }
:root .sig--reg-time .rt-ki__dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); animation: rtDot 1s ease-in-out infinite; }
:root .sig--reg-time .rt-ki__dots b:nth-child(2) { animation-delay: .15s; }
:root .sig--reg-time .rt-ki__dots b:nth-child(3) { animation-delay: .3s; }
@keyframes rtDot{ 50% { transform: translateY(-4px); opacity: .4; } }
:root .sig--reg-time .rt__track { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
:root .sig--reg-time .rt__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--v), var(--lilac)); transform-origin: left; transform: scaleX(0); }
:root .sig--reg-time .rt__bar ol { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
:root .sig--reg-time .rt__bar li { position: relative; padding-top: 6px; color: rgba(238, 238, 238, .5); font: 500 clamp(.6875rem, .6rem + .5cqi, .8125rem)/1.2 var(--f-display); transition: color .5s; }
:root .sig--reg-time .rt__bar li::before { content: ""; position: absolute; left: 0; top: -12px; width: 7px; height: 7px; border-radius: 50%; background: #4a4452; transition: background .5s, box-shadow .5s; }
:root .sig--reg-time .rt__bar li.on { color: #fff; }
:root .sig--reg-time .rt__bar li.on::before { background: var(--lilac); box-shadow: none; }
@container (max-width: 460px){:root .sig--reg-time .rt__cap { text-align: left; }
 }