#frame-rate-check{min-width:0;padding:18px clamp(16px,4vw,36px)}
#frame-rate-check .tool-intro{margin-bottom:14px}
#frame-rate-check .tool-intro-title{margin-bottom:5px}
#fps-tool{width:100%;max-width:1100px;min-width:0;margin:0 auto}
.fps-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fps-card{padding:12px 16px;background:#f4f7fb;border:1px solid #dce3ed;border-radius:10px}
.fps-card>span{font-weight:600;font-size:14px}
.fps-card output{font-size:clamp(28px,3.5vw,38px);font-weight:700;font-variant-numeric:tabular-nums}
.fps-card small{font-size:15px;color:#536174}
.fps-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:10px 0 16px}
#fps-status{min-height:1.5em;margin:0;color:#536174;font-size:14px}
.fps-controls{display:flex;gap:8px;flex-wrap:wrap}
.fps-controls button{min-height:40px;padding:8px 14px;border:1px solid #bac7d8;border-radius:8px;background:#fff;color:#17365c;cursor:pointer}
.fps-controls button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
#fps-test-heading{font-size:19px;margin:0 0 10px}
.fps-lane{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center;margin:10px 0;min-width:0}
.fps-lane h3{font-size:14px;margin:0}
.fps-viewport{overflow:hidden;background:#f4f7fb;border:1px solid #bac7d8;border-radius:8px;height:64px;direction:ltr;min-width:0;max-width:100%}
.fps-track{display:flex;width:max-content;height:100%;will-change:transform}
.fps-pattern{flex:0 0 480px;width:480px;display:flex;align-items:center;justify-content:space-around;height:100%;color:#152b46;box-sizing:border-box}
.fps-pattern b{font:700 25px system-ui,sans-serif;white-space:nowrap}
.fps-line{height:44px;width:2px;background:currentColor}
.fps-line.thick{width:8px}
.fps-circle,.fps-square{width:25px;height:25px;background:currentColor}
.fps-circle{border-radius:50%}
.fps-test>p{font-size:13px;line-height:1.6;margin:10px 0 0;color:#536174}
.fps-notes{margin-top:14px;padding:12px 16px;background:#f4f7fb;border-radius:10px;overflow-wrap:anywhere;font-size:14px}
.fps-notes h2{font-size:17px;margin:0;font-weight:600}
.fps-notes ul{margin:10px 0 0;padding-inline-start:20px}
.fps-notes li{margin:6px 0}
@media(max-width:600px){
 .fps-metrics{grid-template-columns:1fr;gap:6px}
 .fps-card{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
 .fps-card output{font-size:28px}
 .fps-lane{grid-template-columns:minmax(0,1fr);gap:6px;margin:14px 0}
 .fps-lane h3{font-size:14px}
 .fps-toolbar{margin-bottom:14px}
}

.fps-speed-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0;font-size:14px}
.fps-speed-control label{font-weight:600}
.fps-speed-control input{flex:1 1 160px;max-width:360px;min-width:0;min-height:32px;accent-color:#2563eb;cursor:pointer}
.fps-speed-control span{white-space:nowrap;font-variant-numeric:tabular-nums}
.fps-speed-control input:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
#fps-tool #fps-speed-note{margin:0 0 12px;font-size:12px}
.fps-explanation,.fps-faq{overflow-wrap:anywhere}

.fps-card>div,.fps-speed-control span{direction:ltr;unicode-bidi:isolate}