* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #101114;
    color: #f2f2f2;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.55;
}
.page { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 12px; }
h1 { margin: 0 0 8px; font-size: 32px; font-weight: 650; }
.intro { margin: 0 0 18px; color: #b7b7b7; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 14px; align-items: stretch; }
.name { color: #9a9a9a; }
.clock {
    margin: 8px 0 10px;
    font-size: 28px;
    font-variant-numeric: tabular-nums;
    color: #ffd56a;
    min-height: 36px;
}
.track { position: relative; height: 54px; margin: 8px 0 16px; }
.keep {
    position: absolute;
    top: 24px;
    height: 6px;
    background: #ffd56a;
}
.track input[type="range"] {
    position: absolute;
    left: 0;
    top: 12px;
    width: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    accent-color: #ffd56a;
}
.track input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.track input[type="range"]::-moz-range-thumb { pointer-events: auto; }
#fallback { margin-bottom: 12px; color: #ddd; }
#fallback input { width: 120px; margin-left: 8px; background: #1c1e24; color: #ffd56a; border: 1px solid #444; padding: 6px; }
.pick { color: #ffd56a; cursor: pointer; border-bottom: 1px solid #ffd56a; }
.pick input { display: none; }
#start-btn { border: 0; background: #ffd56a; color: #1a1404; padding: 10px 16px; cursor: pointer; }
#start-btn:disabled { opacity: 0.4; cursor: default; }
.progress { height: 3px; background: #333; margin-top: 12px; }
#progress-bar { height: 100%; width: 0; background: #ffd56a; }
.status { color: #aaa; min-height: 1.4em; }
.status.is-error { color: #ff8d8d; }
.result a { color: #ffd56a; }
.probe { position: fixed; left: -2000px; width: 320px; height: 180px; }
.promo {
    border: 1px solid #ffd56a;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.promo p { margin: 0; color: #ffd56a; }
.promo span { color: #ddd; font-size: 13px; }
.promo a { color: #101114; background: #ffd56a; text-align: center; text-decoration: none; padding: 8px 4px; }
.foot { margin-top: 28px; color: #9a9a9a; }
.foot h2 { font-size: 15px; color: #ddd; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; }
.foot a { color: #ffd56a; }
@media (max-width: 720px) {
    .row { grid-template-columns: 1fr; }
}