@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");
:root { color: #eaf0ff; background: #101a38; font-family: "Noto Sans SC", system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #27386f 0, #101a38 48rem); } .app-shell { width: min(720px, 100%); margin: auto; padding: 22px 16px 60px; } header, .brand, .controls, .command-row, .section-title { display: flex; align-items: center; } header, .section-title { justify-content: space-between; gap: 12px; } header { margin-bottom: 22px; } .brand { gap: 10px; } .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #67e8f9; color: #101a38; font: 700 14px "DM Mono"; } h1, h2, p { margin: 0; } h1 { font-size: 21px; } header p, .hint, .section-title span { color: #a9b7df; font-size: 12px; } .status { border: 1px solid #6174ad; border-radius: 999px; padding: 6px 9px; color: #c7d6ff; font-size: 12px; } .timer-card, .command-card, .settings-card, .history-card { border: 1px solid #51649d; border-radius: 20px; background: #17254cdd; padding: 20px; box-shadow: 0 14px 35px #070c1e55; } .command-card, .settings-card, .history-card { margin-top: 14px; border-radius: 14px; } .eyebrow { color: #67e8f9; font: 500 12px "DM Mono"; letter-spacing: .08em; text-transform: uppercase; } .time-display { margin: 8px 0; font: 500 clamp(64px, 20vw, 118px)/1 "DM Mono"; letter-spacing: -.08em; color: #fff; } .timer-card p { color: #c7d6ff; } .controls { flex-wrap: wrap; gap: 9px; margin-top: 20px; } button, input, select { font: inherit; } button { cursor: pointer; border: 0; border-radius: 10px; padding: 11px 14px; font-weight: 700; } button:disabled { cursor: not-allowed; opacity: .45; } .primary { background: #67e8f9; color: #102045; } .quiet { background: #2c3d70; color: #eaf0ff; } .text-button { background: transparent; color: #a9b7df; padding: 4px; font-size: 12px; } label { display: block; color: #c7d6ff; font-size: 13px; } .command-row { gap: 8px; margin-top: 8px; } input, select { width: 100%; margin-top: 5px; border: 1px solid #6074ad; border-radius: 8px; padding: 10px; color: #fff; background: #0e1936; } .command-row input { margin: 0; } .command-row button { background: #d4b4ff; color: #25183c; white-space: nowrap; } .hint { margin-top: 9px; } .setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } .history-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; } .history-list li { display: flex; justify-content: space-between; gap: 8px; padding: 11px; border-radius: 8px; background: #0e1936; font-size: 13px; } .history-list span, .empty { color: #a9b7df; } @media (max-width: 480px) { .setting-grid { grid-template-columns: 1fr; } .history-list li { display: block; } .history-list span { display: block; margin-top: 4px; } }