.page>.show{
max-width:var(--pw2);
margin-top:calc(var(--gp4) + 40px);
}
.show-top{
max-width:780px;
margin:0 auto;
text-align:center;
}
.show-lede{
margin:20px auto 0;
max-width:640px;
color:var(--tx2);
font-size:var(--fz3);
line-height:30px;
}
.motion{
display:inline-flex;
align-items:center;
gap:10px;
min-height:48px;
margin-top:24px;
padding:10px 22px 10px 18px;
border:0;
border-radius:var(--br9);
background:var(--bg2);
color:var(--tx1);
font:inherit;
font-size:var(--fz2);
font-weight:700;
cursor:pointer;
}
.motion:hover{
background:var(--dk2);
}
.motion:focus-visible{
outline:3px solid var(--cl1);
outline-offset:3px;
}
.motion svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
}
.motion-play{
display:none;
}
.is-still .motion-play{
display:block;
}
.is-still .motion-pause{
display:none;
}
.lib{
position:relative;
display:flex;
flex-direction:column;
gap:12px;
padding:20px;
color:#1a1a1f;
font-family:system-ui,sans-serif;
font-size:18px;
line-height:26px;
text-align:left;
}
.lib p{
margin:0;
}
.lib svg{
display:block;
}
.spot{
position:relative;
}
.lib-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 8px 8px 14px;
background:#1f36c4;
color:#ffffff;
}
.lib-name{
font-size:20px;
font-weight:800;
}
.lib-find{
display:flex;
align-items:center;
justify-content:center;
flex:none;
width:44px;
height:44px;
background:#3a50d4;
}
.lib-find svg{
width:24px;
height:24px;
fill:none;
stroke:#ffffff;
stroke-width:2.6;
stroke-linecap:round;
}
.lib-pic svg{
width:100%;
height:auto;
}
.lib-head{
font-size:22px;
font-weight:700;
}
.lib-faint::before{
content:attr(data-sample);
color:#b3b3b3;
}
.lib-days{
display:flex;
gap:6px;
}
.lib-days span{
flex:1;
min-width:0;
font-weight:700;
text-align:center;
color:#0b0b0f;
}
.lib-days .is-open{
background:#7fd18b;
}
.lib-days .is-shut{
background:#f39b92;
}
.lib-label{
font-weight:700;
}
.lib-form{
display:flex;
gap:8px;
}
.lib-box{
flex:1;
min-width:0;
height:44px;
background:#e6e9f2;
}
.lib-go{
display:flex;
align-items:center;
height:44px;
padding:0 20px;
background:#1f36c4;
color:#ffffff;
font-weight:700;
}
.watch-stage{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
align-items:start;
gap:40px;
margin-top:48px;
}
.watch-shot{
background:#ffffff;
}
.watch-bar{
display:flex;
padding:10px 12px;
background:#e6e9f2;
}
.watch-bar span{
padding:2px 16px;
border-radius:var(--br9);
background:#ffffff;
color:#1a1a1f;
font-family:var(--ff4);
font-size:18px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.watch-page{
position:relative;
isolation:isolate;
overflow:hidden;
}
.watch-line{
position:absolute;
z-index:-1;
left:0;
right:0;
top:calc(var(--p,0)*100% - 48px);
height:48px;
background:#ffcf3340;
box-shadow:0 4px 0 #ffcf33;
opacity:0;
transition:top .35s linear,opacity .3s;
}
.is-scan .watch-line{
opacity:1;
}
.is-reset .watch-line{
transition:none;
}
.watch .spot::after{
content:"";
position:absolute;
inset:-6px;
outline:4px solid #a01c1c;
pointer-events:none;
}
.watch .lib{
padding-left:52px;
}
.watch .spot::before{
content:attr(data-n);
position:absolute;
z-index:2;
top:calc(50% - 18px);
left:-50px;
width:36px;
height:36px;
border-radius:50%;
background:#a01c1c;
color:#ffffff;
font:700 18px/36px var(--ff1);
text-align:center;
}
.watch .lib-name{
margin-right:48px;
}
.watch .lib-find::before{
left:auto;
right:calc(100% + 12px);
}
.watch .lib-pic::after{
inset:-4px;
}
.has-js .watch .spot:not(.is-hit)::before,
.has-js .watch .spot:not(.is-hit)::after,
.has-js .watch-list li:not(.is-hit){
visibility:hidden;
}
.watch-report{
padding:28px;
background:var(--bg2);
}
.watch-count{
display:flex;
align-items:center;
gap:12px;
font-size:var(--fh4);
font-weight:800;
letter-spacing:-0.02em;
}
.watch-count b{
display:inline-flex;
justify-content:center;
min-width:1.3em;
padding:2px .15em;
letter-spacing:0;
line-height:1.2;
background:var(--ac1);
color:#0b0b0f;
font-size:var(--fh2);
text-align:center;
}
.watch-list{
display:grid;
gap:12px;
margin:24px 0 0;
padding:0;
list-style:none;
}
.watch-list li{
display:flex;
align-items:flex-start;
gap:14px;
padding:14px 16px;
background:var(--bg3);
font-weight:700;
line-height:1.35;
}
.watch-list b{
flex:none;
width:36px;
height:36px;
border-radius:50%;
background:#a01c1c;
color:#ffffff;
font-size:18px;
line-height:36px;
text-align:center;
}
.watch-list small{
display:block;
margin-top:4px;
color:var(--tx2);
font-size:18px;
font-weight:400;
}
.sim-modes{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
max-width:900px;
margin:36px auto 0;
}
.sim-mode{
min-height:48px;
padding:10px 22px;
border:0;
border-radius:var(--br9);
background:var(--bg2);
color:var(--tx1);
font:inherit;
font-size:var(--fz1);
font-weight:700;
cursor:pointer;
}
.sim-mode:hover{
background:var(--dk2);
}
.sim-mode[aria-pressed="true"]{
background:var(--ac1);
color:#0b0b0f;
}
.sim-mode:focus-visible{
outline:3px solid var(--cl1);
outline-offset:3px;
}
.sim-stage{
display:grid;
grid-template-columns:minmax(0,560px) minmax(0,1fr);
align-items:center;
gap:40px;
max-width:1000px;
margin:36px auto 0;
}
.sim-view{
position:relative;
}
.sim-frame{
background:#ffffff;
overflow:hidden;
}
.sim-frame .lib{
transition:filter .4s,transform .5s cubic-bezier(.3,.8,.3,1);
transform-origin:0 0;
}
.is-blur .lib{
filter:blur(2.6px);
}
.is-color .lib{
filter:url(#deutan);
}
.is-zoom .lib{
transform:scale(2);
}
.is-zoom .sim-frame{
aspect-ratio:560/520;
}
.sim-frame .is-read{
background:#fff3c4;
outline:4px solid #0b0b0f;
outline-offset:2px;
}
.sim-frame .is-focus{
outline:4px solid #1f36c4;
outline-offset:4px;
}
.sim-frame .lib-bar .is-focus{
outline-color:#ffcf33;
}
.sim-voice{
display:none;
align-items:center;
gap:12px;
min-height:72px;
margin:0;
padding:12px 16px;
background:#0b0b0f;
color:#ffffff;
font-size:var(--fz3);
font-weight:700;
}
.is-reader .sim-voice,
.is-keys .sim-voice{
display:flex;
}
.sim-voice svg{
flex:none;
width:28px;
height:28px;
fill:none;
stroke:var(--ac1);
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
}
.is-reader .sim-key,
.is-keys .sim-ear{
display:none;
}
.sim-say{
flex:1;
}
.sim-flag{
display:none;
padding:2px 12px;
border-radius:var(--br9);
background:#ffd6d6;
color:#0b0b0f;
font-size:18px;
}
.is-bad .sim-flag{
display:block;
}
.sim-note{
font-size:var(--fz4);
line-height:1.45;
}
.sim-defs{
position:absolute;
width:0;
height:0;
}
.facts-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
margin:48px 0 0;
padding:0;
list-style:none;
}
.facts-list li{
display:flex;
flex-direction:column;
gap:12px;
padding:32px 28px;
background:var(--bg2);
}
.facts-list strong{
color:var(--cl1);
font-size:clamp(56px,7vw,96px);
font-weight:800;
letter-spacing:-0.05em;
line-height:1;
font-variant-numeric:tabular-nums;
}
.facts-list span{
font-size:var(--fz3);
line-height:1.4;
}
.facts-source{
margin-top:20px;
color:var(--tx2);
text-align:center;
}
.clock-kicker{
color:var(--cl1);
font-weight:700;
}
.clock .big-head{
margin-top:12px;
}
.clock-tiles{
display:flex;
justify-content:center;
gap:16px;
margin-top:40px;
}
.clock-tiles[hidden]{
display:none;
}
.tile{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin:0;
}
.tile b{
display:block;
min-width:2.3ch;
padding:4px 14px;
background:var(--ac1);
color:#0b0b0f;
font-size:clamp(48px,8vw,104px);
font-weight:800;
letter-spacing:-0.04em;
line-height:1.2;
text-align:center;
font-variant-numeric:tabular-nums;
}
.tile span{
font-size:var(--fz2);
font-weight:700;
}
.clock-text{
max-width:640px;
margin:32px auto 0;
color:var(--tx2);
text-align:center;
}
.clock-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:12px 16px;
margin-top:28px;
}
.clock-actions .motion{
margin:0;
}
.look .clock .band-button{
display:inline-flex;
align-items:center;
min-height:48px;
padding:10px 32px;
border-radius:var(--br9);
background:var(--bt1);
color:var(--bt2);
font-weight:700;
}
.look .clock .band-button:hover{
background:var(--bt3);
color:var(--bt2);
text-decoration:none;
}
.band-people{
display:flex;
justify-content:center;
gap:14px;
margin:0 0 28px;
}
.band-people svg{
width:56px;
height:56px;
fill:var(--tx1);
}
.band-people .is-one{
fill:var(--ac1);
}
@media (prefers-reduced-motion:no-preference){
.looks-button{
transition:background .15s,transform .15s;
}
.looks-button:hover{
transform:translateY(-3px);
}
.has-js .watch .spot.is-hit::before,
.has-js .watch .spot.is-hit::after{
animation:pop-in .4s cubic-bezier(.3,1.6,.5,1) both;
}
.has-js .watch-list li.is-hit{
animation:lift-in .4s cubic-bezier(.2,.8,.2,1) both;
}
.tile b.is-tick{
animation:tick .35s ease-out;
}
}
@keyframes lift-in{
from{
opacity:0;
transform:translateY(16px);
}
}
@keyframes pop-in{
from{
opacity:0;
transform:scale(1.5);
}
}
@keyframes tick{
from{
transform:translateY(-8px);
}
}
@media (max-width:899px){
.watch-stage,
.sim-stage{
grid-template-columns:minmax(0,1fr);
gap:24px;
}
.sim-stage{
max-width:560px;
}
.facts-list{
grid-template-columns:minmax(0,1fr);
max-width:560px;
margin-left:auto;
margin-right:auto;
}
}
@media (max-width:599px){
.lib-name{
font-size:18px;
}
.clock-tiles{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.look .clock .band-button{
justify-content:center;
text-align:center;
}
.watch-report{
padding:20px 16px;
}
.clock-tiles{
gap:8px;
}
.tile b{
align-self:stretch;
min-width:0;
padding:10px 6px;
font-size:clamp(32px,10vw,48px);
}
.lib{
padding:16px;
}
.facts-list li{
padding:24px 20px;
}
}
@media (forced-colors:active){
.motion,
.sim-mode{
border:2px solid CanvasText;
}
.sim-mode[aria-pressed="true"]{
forced-color-adjust:none;
border-color:Highlight;
background:Highlight;
color:HighlightText;
}
.watch-stage,
.sim-view,
.tile b{
forced-color-adjust:none;
}
}