html,body{height:100%}body{background:var(--night-bg);overflow:hidden}.split{height:100dvh;transition:grid-template-columns .8s var(--ease), grid-template-rows .8s var(--ease);grid-template-columns:1fr 1fr;display:grid;position:relative}.split[data-hover=day]{grid-template-columns:3fr 1fr}.split[data-hover=night]{grid-template-columns:1fr 3fr}.split[data-go=day]{grid-template-columns:1fr 0fr}.split[data-go=night]{grid-template-columns:0fr 1fr}.half{cursor:none;min-width:0;text-decoration:none;display:block;position:relative;overflow:hidden}.split[data-zone=center] .half{cursor:default}.half.day{background:var(--day-bg);color:var(--day-fg)}.half.night{background:var(--night-bg);color:var(--night-fg)}.glow{pointer-events:none;position:absolute;inset:0}.half.night .glow{background:radial-gradient(60% 50% at 80% 100%,#3fd36b3d,#0000 70%)}.half.day .glow{background:radial-gradient(60% 50% at 20% 0,#1e40ff26,#0000 70%)}.title{font-size:var(--size,clamp(28px, 4.2vw, 68px));white-space:nowrap;transition:right .8s var(--ease), left .8s var(--ease), transform .8s var(--ease), opacity .3s;margin:0;line-height:1;position:absolute;top:50%}.title span{display:block}.night .title{font-size:calc(var(--size,clamp(28px, 4.2vw, 68px)) * .82)}.night .title span{transform:translateY(.11em)}.title .dot{font-style:normal}.title .tap{display:none}.seam-hint{left:50%;top:calc(50% + var(--lineH,44px) / 2 + 16px);font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap;background:#6b7079;border-radius:999px;padding:8px 14px;font-size:11px;transition:opacity .3s;position:absolute;transform:translate(-50%)}.split[data-hover] .seam-hint,.split[data-go] .seam-hint{opacity:0}.hint .h-rest{visibility:hidden}.edge-top{display:none}.day .title{right:var(--seamGap,28px);font-family:var(--font-day);letter-spacing:-.035em;font-weight:500;transform:translateY(-50%)}.day .title .dot{color:var(--day-accent)}.night .title{left:var(--seamGap,28px);font-family:var(--font-night);text-transform:uppercase;letter-spacing:.01em;font-weight:400;transform:translateY(-50%)}.night .title .dot{color:var(--night-accent)}.split[data-hover=day] .day .title{right:50%;transform:translate(50%,-50%)}.split[data-hover=night] .night .title{left:50%;transform:translate(-50%,-50%)}.split[data-hover=day] .night .title,.split[data-hover=night] .day .title{opacity:0}.tag{white-space:nowrap;opacity:.75;align-items:center;gap:12px;transition:opacity .3s;display:flex;position:absolute;bottom:28px}.half:hover .tag{opacity:1}.tag i{background:currentColor;width:28px;height:1px;display:inline-block}.day .tag{font-family:var(--font-day);letter-spacing:.01em;font-size:14px;font-weight:500;left:28px}.day .tag b{color:var(--day-accent);font-weight:600}.night .tag{font-family:var(--font-night);text-transform:uppercase;letter-spacing:.06em;font-size:16px;right:28px}.night .tag b{color:var(--night-accent);font-weight:400}.center{pointer-events:none;mix-blend-mode:difference;color:#fff;place-items:center;transition:opacity .35s;display:grid;position:absolute;inset:0}.center.tint{mix-blend-mode:normal}.split[data-go] .center{opacity:0}.ringbox{aspect-ratio:1;width:min(66vmin,620px);transition:transform .8s var(--ease), opacity .5s;--band:calc(var(--lineH,44px) / 2 + 16px);--fade:56px;-webkit-mask-image:linear-gradient(to bottom, #000 calc(50% - var(--band) - var(--fade)), transparent calc(50% - var(--band)), transparent calc(50% + var(--band)), #000 calc(50% + var(--band) + var(--fade)));mask-image:linear-gradient(to bottom, #000 calc(50% - var(--band) - var(--fade)), transparent calc(50% - var(--band)), transparent calc(50% + var(--band)), #000 calc(50% + var(--band) + var(--fade)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ring{border:1px solid;border-color:var(--night-accent) var(--night-accent) var(--day-dot) var(--day-dot);--spin:45deg;transform:rotate(var(--spin));border-radius:50%;position:absolute;inset:0}.ring.inner{aspect-ratio:1;width:min(66vmin,620px);transition:transform .8s var(--ease), opacity .5s;border:0;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.ring.inner:before,.ring.inner:after{content:"";background:#fff;border-radius:50%;width:6px;height:6px;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.ring.inner:after{top:100%}.split[data-hover] .ringbox,.split[data-hover] .ring.inner{opacity:0;transform:translate(-50%,-50%)scale(.55)}.stack{text-align:center;transition:transform .8s var(--ease);gap:22px;padding:24px;display:grid}.split[data-hover=day] .stack{transform:translate(-12.5vw)}.split[data-hover=night] .stack{transform:translate(12.5vw)}.spacer{height:var(--lineH,1.2em)}.name{font-family:var(--font-day);letter-spacing:.01em;opacity:0;transition:opacity .6s ease, transform .6s var(--ease);font-size:14px;font-weight:500;transform:translateY(6px)}.split[data-hover] .name{opacity:1;transition-delay:.15s;transform:none}.hint{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.75;font-size:12px;transition:letter-spacing .4s}.hint .h-day,.hint .h-night,.split[data-hover=day] .hint .h-rest,.split[data-hover=night] .hint .h-rest{display:none}.split[data-hover=day] .hint .h-day,.split[data-hover=night] .hint .h-night{display:inline}.split[data-hover] .hint{opacity:1}.split[data-hover=day] .hint{font-family:var(--font-day);letter-spacing:.01em;text-transform:none;font-size:14px;font-weight:500}.split[data-hover=night] .name{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:400}.cursor{z-index:5;pointer-events:none;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;white-space:nowrap;border-radius:999px;padding:9px 14px;font-size:12px;transition:opacity .2s,transform .2s;position:fixed;top:0;left:0;transform:translate(-50%,calc(-100% - 18px))scale(.8)}.cursor.on{opacity:1;transform:translate(-50%,calc(-100% - 18px))scale(1)}.cursor.day{background:var(--day-accent);color:#fff;font-family:var(--font-day);letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:500}.cursor.night{background:var(--night-accent);color:var(--night-accent-ink)}@media (width<=760px){.split{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.split[data-hover]{grid-template-columns:1fr}.split[data-hover=day]{grid-template-rows:3fr 1fr}.split[data-hover=night]{grid-template-rows:1fr 3fr}.split[data-go=day]{grid-template-rows:1fr 0fr;grid-template-columns:1fr}.split[data-go=night]{grid-template-rows:0fr 1fr;grid-template-columns:1fr}.half{cursor:pointer}.title{text-align:center;white-space:normal;top:50%;font-size:clamp(30px,8.6vw,44px)!important;left:20px!important;right:20px!important;transform:translateY(-50%)!important}.day .title{top:36%}.night .title{top:64%}.ringbox,.ring.inner{width:min(84vmin,360px)}.ringbox{-webkit-mask-image:none;mask-image:none}.title .tap{white-space:nowrap;border-radius:999px;align-items:center;gap:8px;margin-top:18px;padding:10px 16px;font-size:13px;line-height:1;display:inline-flex}.day .title .tap{background:var(--day-accent);color:#fff;font-family:var(--font-day);letter-spacing:.01em;text-transform:none;font-weight:500}.night .title .tap{background:var(--night-accent);color:var(--night-accent-ink);font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;font-size:11px}.title .tap i{font-style:normal;animation:1.6s ease-in-out infinite nudge-up}.night .title .tap i{animation-name:nudge-down}.half:active .title .tap{transform:scale(.96)}@keyframes nudge-up{0%,to{transform:none}50%{transform:translateY(-3px)}}@keyframes nudge-down{0%,to{transform:none}50%{transform:translateY(3px)}}.title span:first-child{display:block}.split{transition:grid-template-rows .5s var(--ease)}.title{transition:top .5s var(--ease), opacity .3s, translate .5s var(--ease)}.split[data-leave] .title,.split[data-leave] .tag{opacity:0;transition:translate .34s cubic-bezier(.5,0,.75,0),opacity .28s;translate:0 -30vh}.split[data-enter] .title{opacity:0;translate:0 -30vh}.split.instant,.split.instant *{transition:none!important}.split[data-go] .title{top:50%}.split[data-go] .title .tap{opacity:0;transition:opacity .2s}.tag{transition:opacity .25s}.split[data-go=night] .day .title,.split[data-go=night] .day .tag,.split[data-go=day] .night .title,.split[data-go=day] .night .tag{opacity:0}.center:not(.tint) .hint{display:none}.seam-hint{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;white-space:nowrap;background:#6b7079;border-radius:999px;padding:8px 14px;font-size:11px;transition:opacity .3s;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.split[data-go] .seam-hint{opacity:0}html{background:var(--night-bg) linear-gradient(to bottom, var(--day-bg) 50%, var(--night-bg) 50%) no-repeat}.split{height:100dvh}.edge-top{z-index:6;pointer-events:none;background-color:var(--day-bg);height:28px;transition:background-color .5s;display:block;position:fixed;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#000 25%,#0000);mask-image:linear-gradient(#000 25%,#0000)}.split[data-go=night]~.edge-top{background-color:var(--night-bg)}.half.day .glow{background:radial-gradient(70% 40% at 15% 40%,#1e40ff26,#0000 100%)}.half.night .glow{background:radial-gradient(60% 34% at 80% 60%,#3fd36b3d,#0000 100%)}.night .title{flex-direction:column-reverse;align-items:center;display:flex}.night .title .tap{margin-top:0;margin-bottom:18px}body{background:0 0}.ring{--spin:-45deg;border-color:var(--day-dot) var(--day-dot) var(--night-accent) var(--night-accent)}.stack{gap:0}.spacer{height:0}.name{position:absolute;top:calc(50% - 44px);left:0;right:0}.hint{position:absolute;top:calc(50% + 28px);left:0;right:0}.split[data-hover] .stack{transform:none}.day .tag{top:44px;bottom:auto;left:20px}.night .tag{bottom:44px;right:20px}.cursor{display:none}}@media (hover:none){.half{cursor:pointer}.cursor{display:none}}@media (prefers-reduced-motion:reduce){.split,.title,.ringbox,.ring.inner,.stack,.tag,.cursor{transition:none}}