.hud{--green: #60f184;--dim: #408e59;background:#000;color:var(--green);display:grid;min-height:100dvh;place-items:center;overflow:hidden;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}.hud-stage{width:min(100%,1200px);padding:0 40px;transform:translateY(12px);position:relative}.hud-top{display:grid;grid-template-columns:minmax(0,1.12fr) 1px minmax(0,.88fr);gap:clamp(28px,4.2vw,64px);align-items:stretch;min-height:246px}.clock-side{display:flex;flex-direction:column;justify-content:center}.clock{font-size:clamp(90px,11.8vw,180px);font-weight:300;line-height:.94;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}.date{margin-top:20px;font-size:clamp(24px,3.1vw,46px);font-weight:300;letter-spacing:.02em;white-space:nowrap}.hud-rule{background:var(--green);opacity:.9}.status-side{display:flex;flex-direction:column;justify-content:space-around;min-width:0}.status-line{display:flex;align-items:center;gap:20px;min-height:58px;white-space:nowrap;font-size:clamp(22px,2.8vw,40px);line-height:1.15;font-weight:300}.status-line svg{width:42px;height:42px;flex:none}.battery-line{justify-content:space-between}.battery-line svg{width:78px;height:55px}.weather-line{background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}.weather-line:hover,.weather-line:focus-visible{color:#a5ffb8}.weather-line:focus-visible{outline:1px solid currentColor;outline-offset:7px}.connection-line{color:var(--dim);font-size:clamp(19px,2.2vw,31px)}.music-line{display:flex;align-items:center;justify-content:center;gap:18px;margin:60px auto 0;font-size:clamp(22px,2.5vw,36px);line-height:1.2;font-weight:300;white-space:nowrap;max-width:100%}.music-line svg{width:51px;height:51px;flex:none}.music-line span{overflow:hidden;text-overflow:ellipsis}.footnote,.demo-mark{color:#357b4b;font-size:14px;text-align:center;margin-top:32px}.footnote{display:flex;align-items:center;justify-content:center;gap:8px}.footnote svg{width:16px;height:16px}.demo-mark{position:absolute;right:38px;bottom:-70px}@media(max-width:760px){.hud-stage{padding:36px 24px;transform:none}.hud-top{grid-template-columns:1fr;gap:28px}.hud-rule{height:1px;opacity:.45}.clock{font-size:clamp(84px,19vw,144px)}.date{font-size:clamp(22px,5vw,32px);margin-top:14px}.status-side{gap:16px}.status-line{font-size:clamp(20px,4.3vw,28px);min-height:40px}.battery-line{justify-content:flex-start}.battery-line svg{width:58px;height:38px}.music-line{justify-content:flex-start;font-size:clamp(19px,4.2vw,27px);margin-top:38px}.music-line svg{width:36px;height:36px}.footnote{font-size:12px}.demo-mark{position:static;text-align:right}}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased}.mobile-prototype{width:min(100vw,390px);height:min(100dvh,844px);margin-inline:auto;overflow:hidden;position:relative}