chore: initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kamat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+# TauClock
+
+TauClockは、ローカル/UTC時計、アラーム、カウントダウンタイマー、ストップウォッチを1つのネイティブウィンドウにまとめたTauriアプリケーションです。キーボード操作を前提に設計しており、記録したアラームやラップはローカルストレージに保存されます。
+
+## 主な特徴
+- リアルタイムなローカル・UTC時計の並列表示
+- 任意ラベル付きの繰り返しアラーム（オフラインでも保持）
+- 柔軟な入力形式に対応したカウントダウンタイマー（`5m30s`, `1:15`, `90` など）
+- ラップ記録つきストップウォッチと履歴リスト
+- キーボードショートカットと画面内に表示できるチートシート
+- Tauri + Rust製の軽量クロスプラットフォームバイナリ
+
+## キーボードショートカット
+| キー | 動作 |
+| --- | --- |
+| `H` | ショートカット一覧を開閉 |
+| `A` | アラームの時刻入力欄にフォーカス |
+| `N` | アラームを追加 |
+| `T` | タイマーの時間入力欄にフォーカス |
+| `G` | タイマー開始/一時停止 |
+| `R` | タイマーをリセット |
+| `W` | ストップウォッチ開始/停止 |
+| `L` | ラップを追加 |
+| `P` | ストップウォッチをリセット |
+| `Esc` | 入力フォーカス解除 or オーバーレイを閉じる |
+
+## ディレクトリ構成
+- `src/` – フロントエンド（HTML/CSS/JavaScript）。`main.js` には各ウィジェットのロジックと詳しいコメントがあります。
+- `src-tauri/` – Rust製バックエンドおよびTauri設定。`lib.rs` にプラグインやコマンドの初期化がまとまっています。
+- `src-tauri/tauri.conf.json` – アプリの識別子やアイコン設定。
+
+## 開発環境
+### 事前準備
+- [Node.js](https://nodejs.org/) 18 以上
+- npm または好きなパッケージマネージャ
+- [Rust](https://www.rust-lang.org/tools/install) と `cargo`
+- Tauriの推奨コンパイラ/プラットフォーム依存ツール（[公式ドキュメント](https://tauri.app/start/prerequisites/)を参照）
+
+### セットアップ
+```bash
+npm install
+```
+
+### ローカルで起動
+```bash
+npm run tauri dev
+```
+ホットリロード付きでウィンドウが立ち上がり、UIから各機能を試せます。
+
+### ビルド
+```bash
+npm run tauri build
+```
+`src-tauri/target/release/` 以下に配布用バイナリが生成されます。
+
+## コントリビュート
+Issue/PRは歓迎です。バグ報告の際は実行環境・手順を明記してください。新機能追加時は `src/main.js` にあるコメントスタイルに合わせてドキュメントも更新してください。
+
+## ライセンス
+MIT License. 詳細は `LICENSE` を参照してください。

src-tauri/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas

src-tauri/Cargo.toml

@@ -0,0 +1,27 @@
+[package]
+name = "tauclock"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "tauclock_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+chrono = "0.4.42"
+tauri-plugin-log = "2"
+

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "log:default"
+  ]
+}

src-tauri/src/lib.rs

@@ -0,0 +1,21 @@
+//! Core TauClock backend that wires plugins and exposes Rust commands.
+//!
+//! The UI currently uses only frontend logic, but the scaffold is documented
+//! so contributors know where to extend native capabilities (timers, IPC, etc).
+
+/// Example command exposed to the frontend. Extend or replace as needed.
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+/// Build the Tauri application, attach plugins, and start the runtime loop.
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_log::Builder::new().build())
+        .plugin(tauri_plugin_opener::init())
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/src/main.rs

@@ -0,0 +1,7 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+/// Thin entry point that simply delegates to the shared library run routine.
+fn main() {
+    tauclock_lib::run()
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "tauclock",
+  "version": "0.1.0",
+  "identifier": "org.rumginger.tauclock",
+  "build": {
+    "frontendDist": "../src"
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "title": "tauclock",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

src/assets/javascript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

src/assets/tauri.svg

@@ -0,0 +1,6 @@
+<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
+<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
+</svg>

src/index.html

@@ -0,0 +1,143 @@
+<!doctype html>
+<!--
+  TauClock main document.
+  The layout keeps all interactive pieces (clocks, alarms, timer, stopwatch)
+  above the fold and mirrors the keyboard shortcuts referenced in main.js.
+-->
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TauClock</title>
+    <script type="module" src="/main.js" defer></script>
+  </head>
+  <body>
+    <!--
+      Primary app shell. Each section contains a self-contained widget that
+      maps to logic documented in src/main.js (alarms, timer, stopwatch).
+    -->
+    <main class="app-shell">
+      <header class="app-header">
+        <div>
+          <p class="eyebrow">Rust + Tauri - Keyboard native</p>
+        </div>
+        <div class="header-meta">
+          <button type="button" id="shortcut-trigger" class="hint-button">ショートカット一覧 (H)</button>
+        </div>
+      </header>
+
+      <!-- Dual timezone clock display -->
+      <section class="clock-grid" aria-label="clock preview">
+        <article class="clock-card clock-card-main" aria-live="polite">
+          <h2>Local</h2>
+          <p id="local-time" class="clock-time">00:00:00</p>
+          <p id="local-date" class="clock-date"></p>
+        </article>
+        <article class="clock-card clock-card-aux" aria-live="polite">
+          <h2>UTC</h2>
+          <p id="utc-time" class="clock-time">00:00:00</p>
+          <p id="utc-date" class="clock-date"></p>
+        </article>
+      </section>
+
+      <!-- Alarm planner and listing -->
+      <section id="alarm-panel" class="panel" aria-labelledby="alarm-heading">
+        <header>
+          <h2 id="alarm-heading">アラーム</h2>
+          <p class="panel-hint">A で時刻入力、N で追加</p>
+        </header>
+        <form id="alarm-form" class="inline-form" autocomplete="off">
+          <label>
+            <span>時刻</span>
+            <input type="time" id="alarm-time" step="60" required />
+          </label>
+          <label>
+            <span>メモ (任意)</span>
+            <input type="text" id="alarm-label" maxlength="80" placeholder="会議 / 休憩 など" />
+          </label>
+          <button type="submit" id="alarm-submit">追加</button>
+        </form>
+        <p id="next-alarm" class="next-indicator" aria-live="polite"></p>
+        <ul id="alarm-list" class="item-list" aria-live="polite"></ul>
+      </section>
+
+      <!-- Countdown timer -->
+      <section id="timer-panel" class="panel" aria-labelledby="timer-heading">
+        <header>
+          <h2 id="timer-heading">タイマー</h2>
+          <p class="panel-hint">T 入力、G スタート/一時停止、R リセット</p>
+        </header>
+        <div class="panel-body">
+          <label class="duration-field">
+            <span>時間指定 (例: 5m30s または 1:15)</span>
+            <input type="text" id="timer-input" placeholder="mm:ss" autocomplete="off" />
+          </label>
+          <div class="big-time" id="timer-display">00:00</div>
+          <div class="button-row">
+            <button id="timer-toggle" type="button">スタート</button>
+            <button id="timer-reset" type="button">リセット</button>
+          </div>
+          <p id="timer-status" class="status-text"></p>
+        </div>
+      </section>
+
+      <!-- Stopwatch with lap list -->
+      <section id="stopwatch-panel" class="panel" aria-labelledby="stopwatch-heading">
+        <header>
+          <h2 id="stopwatch-heading">ストップウォッチ</h2>
+          <p class="panel-hint">W スタート/停止、L ラップ、P リセット</p>
+        </header>
+        <div class="panel-body">
+          <div class="big-time" id="stopwatch-display">00:00.000</div>
+          <div class="button-row">
+            <button id="stopwatch-toggle" type="button">スタート</button>
+            <button id="stopwatch-lap" type="button">ラップ</button>
+            <button id="stopwatch-reset" type="button">リセット</button>
+          </div>
+          <ul id="stopwatch-laps" class="item-list compact" aria-live="polite"></ul>
+        </div>
+      </section>
+    </main>
+
+    <div id="status-message" role="status" aria-live="polite"></div>
+
+    <!-- Overlay describing keyboard accelerators -->
+    <section id="shortcut-overlay" class="shortcut-overlay" hidden>
+      <div
+        class="shortcut-card"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="shortcut-heading"
+        tabindex="-1"
+      >
+        <header>
+          <h2 id="shortcut-heading">Keyboard Shortcuts</h2>
+          <button type="button" id="shortcut-close" class="ghost">閉じる (Esc)</button>
+        </header>
+        <dl>
+          <dt>H</dt>
+          <dd>ショートカット一覧を表示/非表示</dd>
+          <dt>A</dt>
+          <dd>アラーム時刻入力へフォーカス</dd>
+          <dt>N</dt>
+          <dd>アラームを追加</dd>
+          <dt>T</dt>
+          <dd>タイマー入力へフォーカス</dd>
+          <dt>G</dt>
+          <dd>タイマー開始/一時停止</dd>
+          <dt>R</dt>
+          <dd>タイマーをリセット</dd>
+          <dt>W</dt>
+          <dd>ストップウォッチ開始/停止</dd>
+          <dt>L</dt>
+          <dd>ラップを記録</dd>
+          <dt>P</dt>
+          <dd>ストップウォッチをリセット</dd>
+          <dt>Esc</dt>
+          <dd>入力フォーカス解除/オーバーレイを閉じる</dd>
+        </dl>
+      </div>
+    </section>
+  </body>
+</html>

src/main.js

@@ -0,0 +1,680 @@
+/**
+ * TauClock frontend controller
+ * ----------------------------
+ * Coordinates three features:
+ * 1. Live clocks in local/UTC time
+ * 2. Persistent alarms with keyboard shortcuts and audible chimes
+ * 3. Timer + stopwatch utilities with a shared status message system
+ *
+ * The logic is split by feature area, and each function carries a short
+ * description so new contributors can navigate quickly.
+ */
+
+/**
+ * Namespaced keys used for browser localStorage.
+ * Keeping the strings centralized makes future migrations trivial.
+ */
+const STORAGE_KEYS = {
+  alarms: "tauclock-alarms",
+};
+
+/** Cache of DOM nodes we touch frequently to avoid repeated lookups. */
+const elements = {};
+
+/** In-memory representation of scheduled alarms. */
+const alarmState = {
+  items: [],
+};
+
+/** Mutable state that drives the countdown timer UI. */
+const timerState = {
+  initialMs: 0,
+  remainingMs: 0,
+  running: false,
+  targetTime: null,
+  lastInput: "",
+};
+
+/** Bookkeeping for the stopwatch including lap history. */
+const stopwatchState = {
+  running: false,
+  startTime: null,
+  elapsedBefore: 0,
+  laps: [],
+};
+
+/** Handle used to clear the transient status message timeout. */
+let statusTimer;
+
+/** Keyboard shortcut handlers keyed by the raw KeyboardEvent#code. */
+const SHORTCUTS = {
+  KeyA: () => focusAndSelect(elements.alarmTime),
+  KeyN: () => elements.alarmForm.requestSubmit(),
+  KeyT: () => focusAndSelect(elements.timerInput),
+  KeyG: () => toggleTimer(),
+  KeyR: () => resetTimer(),
+  KeyW: () => toggleStopwatch(),
+  KeyL: () => addLap(),
+  KeyP: () => resetStopwatch(),
+  KeyH: () => toggleShortcutOverlay(),
+};
+
+/** Sequences of oscillator frequencies for the lightweight chime player. */
+const AUDIO_PATTERNS = {
+  short: [660, 880, 660],
+  alarm: [523, 659, 784, 659, 523],
+};
+
+/**
+ * Main entry point once the DOM is ready. We populate caches, hook up
+ * listeners, restore persisted data, and start ticking UI updates.
+ */
+window.addEventListener("DOMContentLoaded", () => {
+  cacheElements();
+  bindEvents();
+  loadAlarms();
+  updateClock();
+  renderAlarms();
+  renderTimer();
+  renderStopwatch();
+  setInterval(updateClock, 500);
+  setInterval(() => {
+    updateTimerDisplay();
+    updateStopwatchDisplay();
+  }, 75);
+  setInterval(checkAlarms, 1000);
+});
+
+/**
+ * Collect and memoize every DOM element referenced throughout the app.
+ * Running this once avoids repeated querySelector calls inside hot paths.
+ */
+function cacheElements() {
+  elements.localTime = document.getElementById("local-time");
+  elements.localDate = document.getElementById("local-date");
+  elements.utcTime = document.getElementById("utc-time");
+  elements.utcDate = document.getElementById("utc-date");
+  elements.alarmForm = document.getElementById("alarm-form");
+  elements.alarmTime = document.getElementById("alarm-time");
+  elements.alarmLabel = document.getElementById("alarm-label");
+  elements.alarmList = document.getElementById("alarm-list");
+  elements.nextAlarm = document.getElementById("next-alarm");
+  elements.timerInput = document.getElementById("timer-input");
+  elements.timerDisplay = document.getElementById("timer-display");
+  elements.timerToggle = document.getElementById("timer-toggle");
+  elements.timerReset = document.getElementById("timer-reset");
+  elements.timerStatus = document.getElementById("timer-status");
+  elements.stopwatchDisplay = document.getElementById("stopwatch-display");
+  elements.stopwatchToggle = document.getElementById("stopwatch-toggle");
+  elements.stopwatchLap = document.getElementById("stopwatch-lap");
+  elements.stopwatchReset = document.getElementById("stopwatch-reset");
+  elements.stopwatchLaps = document.getElementById("stopwatch-laps");
+  elements.statusMessage = document.getElementById("status-message");
+  elements.shortcutOverlay = document.getElementById("shortcut-overlay");
+  elements.shortcutClose = document.getElementById("shortcut-close");
+  elements.shortcutTrigger = document.getElementById("shortcut-trigger");
+}
+
+/** Wire up submit/click/keyboard handlers for alarms, timer, and stopwatch. */
+function bindEvents() {
+  elements.alarmForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    createAlarm();
+  });
+
+  elements.alarmList.addEventListener("click", (event) => {
+    const button = event.target.closest("button[data-action]");
+    if (!button) return;
+    const id = button.dataset.id;
+    const action = button.dataset.action;
+    if (action === "toggle") toggleAlarm(id);
+    if (action === "delete") deleteAlarm(id);
+  });
+
+  elements.timerToggle.addEventListener("click", () => toggleTimer());
+  elements.timerReset.addEventListener("click", () => resetTimer());
+  elements.timerInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      toggleTimer(true);
+    }
+  });
+
+  elements.stopwatchToggle.addEventListener("click", () => toggleStopwatch());
+  elements.stopwatchLap.addEventListener("click", () => addLap());
+  elements.stopwatchReset.addEventListener("click", () => resetStopwatch());
+
+  elements.shortcutClose.addEventListener("click", () => toggleShortcutOverlay(false));
+  elements.shortcutOverlay.addEventListener("click", (event) => {
+    if (event.target === elements.shortcutOverlay) toggleShortcutOverlay(false);
+  });
+  if (elements.shortcutTrigger) {
+    elements.shortcutTrigger.addEventListener("click", () => toggleShortcutOverlay(true));
+  }
+
+  document.addEventListener("keydown", handleShortcuts, true);
+}
+
+/**
+ * Re-render the local and UTC clocks. Called on an interval for a live view.
+ */
+function updateClock() {
+  const now = new Date();
+  elements.localTime.textContent = formatTime(now);
+  elements.localDate.textContent = formatDate(now);
+  const utc = new Date(now.getTime());
+  elements.utcTime.textContent = formatTime(utc, { timeZone: "UTC" });
+  elements.utcDate.textContent = formatDate(utc, { timeZone: "UTC" });
+}
+
+/** Format a Date instance into HH:MM:SS in the provided locale/timezone. */
+function formatTime(date, options = {}) {
+  return new Intl.DateTimeFormat("ja-JP", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    ...options,
+  }).format(date);
+}
+
+/** Format a Date instance into a friendly weekday/month/day triplet. */
+function formatDate(date, options = {}) {
+  return new Intl.DateTimeFormat("ja-JP", {
+    weekday: "short",
+    month: "short",
+    day: "2-digit",
+    ...options,
+  }).format(date);
+}
+
+/**
+ * Validate form input, build an alarm record, persist, and update the list.
+ */
+function createAlarm() {
+  const timeValue = elements.alarmTime.value;
+  if (!timeValue) {
+    pushStatus("アラーム時刻を入力してください");
+    return;
+  }
+  const [hour, minute] = timeValue.split(":").map((v) => Number(v));
+  if (Number.isNaN(hour) || Number.isNaN(minute)) {
+    pushStatus("時刻の形式が正しくありません");
+    return;
+  }
+  const label = elements.alarmLabel.value.trim() || "アラーム";
+  const nextTrigger = resolveNextTrigger(hour, minute);
+  const alarm = {
+    id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+    hour,
+    minute,
+    label,
+    active: true,
+    nextTrigger,
+    ringing: false,
+  };
+  alarmState.items.push(alarm);
+  persistAlarms();
+  renderAlarms();
+  elements.alarmForm.reset();
+  pushStatus(`アラーム追加: ${label}`);
+}
+
+/** Return the next timestamp (ms) when an alarm should fire for hour/minute. */
+function resolveNextTrigger(hour, minute) {
+  const now = new Date();
+  const candidate = new Date(now);
+  candidate.setHours(hour, minute, 0, 0);
+  if (candidate.getTime() <= now.getTime()) {
+    candidate.setDate(candidate.getDate() + 1);
+  }
+  return candidate.getTime();
+}
+
+/**
+ * Render the alarm list with action buttons and show the next scheduled alarm.
+ */
+function renderAlarms() {
+  const list = elements.alarmList;
+  list.innerHTML = "";
+  if (!alarmState.items.length) {
+    const empty = document.createElement("li");
+    empty.textContent = "アラームはまだありません";
+    list.appendChild(empty);
+  } else {
+    const sorted = [...alarmState.items].sort((a, b) => a.nextTrigger - b.nextTrigger);
+    sorted.forEach((alarm) => {
+      const li = document.createElement("li");
+      if (!alarm.active) li.classList.add("muted");
+      if (alarm.ringing) li.classList.add("ringing");
+      const info = document.createElement("div");
+      const title = document.createElement("strong");
+      title.textContent = `${twoDigits(alarm.hour)}:${twoDigits(alarm.minute)} - ${alarm.label}`;
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.textContent = alarm.active ? "ON" : "OFF";
+      const next = document.createElement("small");
+      next.textContent = `次回: ${formatRelative(alarm.nextTrigger)}`;
+      info.append(title, badge, next);
+      const actions = document.createElement("div");
+      actions.className = "alarm-actions";
+      const toggleBtn = document.createElement("button");
+      toggleBtn.type = "button";
+      toggleBtn.dataset.action = "toggle";
+      toggleBtn.dataset.id = alarm.id;
+      toggleBtn.textContent = alarm.active ? "停止" : "起動";
+      const deleteBtn = document.createElement("button");
+      deleteBtn.type = "button";
+      deleteBtn.dataset.action = "delete";
+      deleteBtn.dataset.id = alarm.id;
+      deleteBtn.textContent = "削除";
+      actions.append(toggleBtn, deleteBtn);
+      li.append(info, actions);
+      list.appendChild(li);
+    });
+  }
+  updateNextAlarm();
+}
+
+/** Update the "next alarm" label to highlight the soonest active alarm. */
+function updateNextAlarm() {
+  const nextLabel = elements.nextAlarm;
+  const active = alarmState.items.filter((alarm) => alarm.active);
+  if (!active.length) {
+    nextLabel.textContent = "アクティブなアラームはありません";
+    return;
+  }
+  const soonest = active.reduce((acc, alarm) => (alarm.nextTrigger < acc.nextTrigger ? alarm : acc));
+  nextLabel.textContent = `次のアラーム: ${twoDigits(soonest.hour)}:${twoDigits(soonest.minute)} (${soonest.label}) - ${formatRelative(soonest.nextTrigger)}`;
+}
+
+/**
+ * Convert a future timestamp into a concise relative label (e.g. "5分後").
+ */
+function formatRelative(timestamp) {
+  const now = Date.now();
+  const diff = timestamp - now;
+  if (diff <= 60 * 1000) return "まもなく";
+  const minutes = Math.round(diff / 60000);
+  if (minutes < 60) return `${minutes}分後`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return `${hours}時間${mins}分後`;
+}
+
+/** Enable/disable alarms as the user toggles their switches. */
+function toggleAlarm(id) {
+  const alarm = alarmState.items.find((item) => item.id === id);
+  if (!alarm) return;
+  alarm.active = !alarm.active;
+  alarm.nextTrigger = resolveNextTrigger(alarm.hour, alarm.minute);
+  alarm.ringing = false;
+  persistAlarms();
+  renderAlarms();
+}
+
+/** Remove an alarm entirely and surface a toast-like status message. */
+function deleteAlarm(id) {
+  const index = alarmState.items.findIndex((item) => item.id === id);
+  if (index === -1) return;
+  const [removed] = alarmState.items.splice(index, 1);
+  persistAlarms();
+  renderAlarms();
+  pushStatus(`アラーム削除: ${removed.label}`);
+}
+
+/**
+ * Polling loop that checks which alarms should fire and plays feedback.
+ */
+function checkAlarms() {
+  const now = Date.now();
+  let triggered = false;
+  alarmState.items.forEach((alarm) => {
+    if (!alarm.active) return;
+    if (now >= alarm.nextTrigger) {
+      alarm.ringing = true;
+      alarm.nextTrigger = resolveNextTrigger(alarm.hour, alarm.minute);
+      triggered = true;
+      notifyUser(`アラーム: ${alarm.label}`);
+      setTimeout(() => {
+        alarm.ringing = false;
+        renderAlarms();
+      }, 6000);
+    }
+  });
+  if (triggered) {
+    persistAlarms();
+    renderAlarms();
+  }
+}
+
+/** Serialize alarms into localStorage for durability across restarts. */
+function persistAlarms() {
+  try {
+    localStorage.setItem(STORAGE_KEYS.alarms, JSON.stringify(alarmState.items));
+  } catch (error) {
+    console.warn("Failed to save alarms", error);
+  }
+}
+
+/** Hydrate the in-memory alarm list from the persisted browser storage. */
+function loadAlarms() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEYS.alarms);
+    if (raw) {
+      alarmState.items = JSON.parse(raw).map((alarm) => ({
+        ...alarm,
+        nextTrigger: resolveNextTrigger(alarm.hour, alarm.minute),
+        ringing: false,
+      }));
+    }
+  } catch (error) {
+    console.warn("Failed to load alarms", error);
+  }
+}
+
+/** Helper for zero-padding numbers to two digits. */
+function twoDigits(number) {
+  return number.toString().padStart(2, "0");
+}
+
+/**
+ * Accept flexible timer strings such as "5:30", "1h 2m", or raw seconds.
+ * Returns milliseconds or null when the input cannot be parsed.
+ */
+function parseDuration(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (trimmed.includes(":")) {
+    const [minutes, seconds] = trimmed.split(":").map((part) => Number(part));
+    if (Number.isNaN(minutes) || Number.isNaN(seconds)) return null;
+    return (minutes * 60 + seconds) * 1000;
+  }
+  const pattern = /^((\d+)h)?\s*((\d+)m)?\s*((\d+)s)?$/i;
+  const match = trimmed.match(pattern);
+  if (match) {
+    const hours = Number(match[2] || 0);
+    const minutes = Number(match[4] || 0);
+    const seconds = Number(match[6] || 0);
+    const totalSeconds = hours * 3600 + minutes * 60 + seconds;
+    return totalSeconds * 1000;
+  }
+  const seconds = Number(trimmed);
+  if (!Number.isNaN(seconds)) return seconds * 1000;
+  return null;
+}
+
+/**
+ * Start or pause the countdown timer, optionally re-parsing the duration.
+ */
+function toggleTimer(forceParse = false) {
+  if (timerState.running) {
+    pauseTimer();
+    return;
+  }
+  const rawInput = elements.timerInput.value.trim();
+  const needsParse = forceParse || timerState.initialMs === 0 || (rawInput && rawInput !== timerState.lastInput);
+  if (needsParse) {
+    const duration = parseDuration(rawInput);
+    if (!duration || duration < 1000) {
+      pushStatus("1秒以上の時間を入力してください");
+      return;
+    }
+    timerState.initialMs = duration;
+    timerState.remainingMs = duration;
+    timerState.lastInput = rawInput;
+  }
+  if (timerState.remainingMs <= 0) {
+    timerState.remainingMs = timerState.initialMs;
+  }
+  timerState.running = true;
+  timerState.targetTime = Date.now() + timerState.remainingMs;
+  elements.timerToggle.textContent = "一時停止";
+  elements.timerStatus.textContent = "カウント中";
+}
+
+/** Snapshot remaining time while keeping the parsed duration intact. */
+function pauseTimer() {
+  if (!timerState.running) return;
+  timerState.remainingMs = Math.max(0, timerState.targetTime - Date.now());
+  timerState.running = false;
+  timerState.targetTime = null;
+  elements.timerToggle.textContent = "再開";
+  elements.timerStatus.textContent = "一時停止";
+}
+
+/** Restore the timer to its initial duration and stop playback. */
+function resetTimer() {
+  timerState.running = false;
+  timerState.targetTime = null;
+  timerState.remainingMs = timerState.initialMs;
+  elements.timerToggle.textContent = "スタート";
+  elements.timerStatus.textContent = "";
+  updateTimerDisplay();
+}
+
+/** Refresh timer state and fire completion notification when needed. */
+function updateTimerDisplay() {
+  if (timerState.running) {
+    timerState.remainingMs = Math.max(0, timerState.targetTime - Date.now());
+    if (timerState.remainingMs === 0) {
+      timerState.running = false;
+      timerState.targetTime = null;
+      elements.timerToggle.textContent = "スタート";
+      elements.timerStatus.textContent = "完了";
+      notifyUser("タイマー終了");
+    }
+  }
+  renderTimer();
+}
+
+/** Format the remaining timer milliseconds for the UI label. */
+function renderTimer() {
+  const ms = typeof timerState.remainingMs === "number" ? timerState.remainingMs : timerState.initialMs || 0;
+  elements.timerDisplay.textContent = formatDuration(ms);
+}
+
+/** Represent milliseconds as MM:SS.hh or HH:MM:SS for long intervals. */
+function formatDuration(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const hundred = Math.floor((ms % 1000) / 10);
+  if (minutes >= 60) {
+    const hours = Math.floor(minutes / 60);
+    const remMinutes = minutes % 60;
+    return `${twoDigits(hours)}:${twoDigits(remMinutes)}:${twoDigits(seconds)}`;
+  }
+  return `${twoDigits(minutes)}:${twoDigits(seconds)}.${twoDigits(hundred)}`;
+}
+
+/** Toggle stopwatch run/pause state and align button labels accordingly. */
+function toggleStopwatch() {
+  if (stopwatchState.running) {
+    stopwatchState.elapsedBefore += Date.now() - stopwatchState.startTime;
+    stopwatchState.running = false;
+    stopwatchState.startTime = null;
+    elements.stopwatchToggle.textContent = "スタート";
+  } else {
+    stopwatchState.running = true;
+    stopwatchState.startTime = Date.now();
+    elements.stopwatchToggle.textContent = "停止";
+  }
+}
+
+/** Compute elapsed milliseconds including paused time plus current run. */
+function getStopwatchElapsed() {
+  return stopwatchState.elapsedBefore + (stopwatchState.running ? Date.now() - stopwatchState.startTime : 0);
+}
+
+/** Update the on-screen stopwatch label from the current elapsed time. */
+function updateStopwatchDisplay() {
+  elements.stopwatchDisplay.textContent = formatStopwatch(getStopwatchElapsed());
+}
+
+/** Render both the stopwatch display and lap summary list. */
+function renderStopwatch() {
+  updateStopwatchDisplay();
+  renderLaps();
+}
+
+/** Format stopwatch precision output (MM:SS.mmm). */
+function formatStopwatch(ms) {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const millis = ms % 1000;
+  return `${twoDigits(minutes)}:${twoDigits(seconds)}.${millis.toString().padStart(3, "0")}`;
+}
+
+/** Capture the current elapsed time as a lap with delta vs. previous lap. */
+function addLap() {
+  const elapsed = getStopwatchElapsed();
+  if (elapsed === 0) return;
+  const previous = stopwatchState.laps.at(-1)?.totalMs ?? 0;
+  stopwatchState.laps.push({
+    id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`,
+    totalMs: elapsed,
+    deltaMs: elapsed - previous,
+  });
+  renderLaps();
+}
+
+/**
+ * Render lap entries newest-first with cumulative and delta timings.
+ */
+function renderLaps() {
+  const list = elements.stopwatchLaps;
+  list.innerHTML = "";
+  if (!stopwatchState.laps.length) {
+    const empty = document.createElement("li");
+    empty.textContent = "ラップなし";
+    list.appendChild(empty);
+    return;
+  }
+  stopwatchState.laps
+    .slice()
+    .reverse()
+    .forEach((lap, index) => {
+      const li = document.createElement("li");
+      const label = document.createElement("strong");
+      const lapNumber = stopwatchState.laps.length - index;
+      label.textContent = `Lap ${lapNumber}`;
+      const total = document.createElement("small");
+      total.textContent = `合計 ${formatStopwatch(lap.totalMs)}`;
+      const delta = document.createElement("small");
+      delta.textContent = `+${formatStopwatch(lap.deltaMs)}`;
+      li.append(label, total, delta);
+      list.appendChild(li);
+    });
+}
+
+/** Clear stopwatch progress and lap history. */
+function resetStopwatch() {
+  stopwatchState.running = false;
+  stopwatchState.startTime = null;
+  stopwatchState.elapsedBefore = 0;
+  stopwatchState.laps = [];
+  elements.stopwatchToggle.textContent = "スタート";
+  renderStopwatch();
+}
+
+/** Focus an input element and select its contents if supported. */
+function focusAndSelect(element) {
+  if (!element) return;
+  element.focus();
+  if (typeof element.select === "function") element.select();
+}
+
+/**
+ * Briefly show a non-blocking status label near the footer of the UI.
+ */
+function pushStatus(message) {
+  if (!elements.statusMessage) return;
+  elements.statusMessage.textContent = message;
+  clearTimeout(statusTimer);
+  statusTimer = setTimeout(() => {
+    elements.statusMessage.textContent = "";
+  }, 4000);
+}
+
+/** Combine a status toast with an audible chime. */
+function notifyUser(message) {
+  pushStatus(message);
+  playChime();
+}
+
+/** Lightweight synthesizer used for alarm/timer notification chimes. */
+function playChime(patternName = "alarm") {
+  const AudioCtx = window.AudioContext || window.webkitAudioContext;
+  if (!AudioCtx) return;
+  playChime.ctx = playChime.ctx || new AudioCtx();
+  if (playChime.ctx.state === "suspended") {
+    playChime.ctx.resume();
+  }
+  const ctx = playChime.ctx;
+  const pattern = AUDIO_PATTERNS[patternName] || AUDIO_PATTERNS.short;
+  let startTime = ctx.currentTime;
+  pattern.forEach((frequency) => {
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = "sine";
+    osc.frequency.value = frequency;
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    gain.gain.setValueAtTime(0.0001, startTime);
+    gain.gain.exponentialRampToValueAtTime(0.25, startTime + 0.02);
+    gain.gain.exponentialRampToValueAtTime(0.0001, startTime + 0.3);
+    osc.start(startTime);
+    osc.stop(startTime + 0.32);
+    startTime += 0.35;
+  });
+}
+
+/** Global keyboard shortcut dispatcher honoring focus/overlay state. */
+function handleShortcuts(event) {
+  if (event.defaultPrevented) return;
+  const overlayVisible = elements.shortcutOverlay && !elements.shortcutOverlay.hidden;
+  if (event.key === "Escape") {
+    if (overlayVisible) {
+      toggleShortcutOverlay(false);
+      event.preventDefault();
+      return;
+    }
+    if (document.activeElement && document.activeElement !== document.body) {
+      document.activeElement.blur();
+      event.preventDefault();
+    }
+    return;
+  }
+  if (event.altKey || event.metaKey || event.ctrlKey) return;
+  if (overlayVisible && event.code !== "KeyH") return;
+  if (isTypingTarget(event.target)) return;
+  const handler = SHORTCUTS[event.code];
+  if (handler) {
+    event.preventDefault();
+    handler();
+  }
+}
+
+/**
+ * Show/hide the legend that explains available keyboard shortcuts.
+ */
+function toggleShortcutOverlay(force) {
+  const overlay = elements.shortcutOverlay;
+  const next = typeof force === "boolean" ? force : overlay.hidden;
+  overlay.hidden = !next;
+  if (next) {
+    overlay.querySelector(".shortcut-card").focus?.();
+  }
+}
+
+/** Determine whether a keyboard event originated from a text input area. */
+function isTypingTarget(target) {
+  if (!target) return false;
+  const element = target instanceof Element ? target : target.parentElement;
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  return Boolean(element.closest("input, textarea, select, [contenteditable='true']"));
+}

src/styles.css

@@ -0,0 +1,485 @@
+/*
+  TauClock stylesheet
+  --------------------
+  Emphasizes a dark dashboard aesthetic with clear separation between
+  the three core utilities (alarms, timer, stopwatch) rendered as cards.
+  The sections below are ordered from global resets down to components.
+*/
+
+:root {
+  font-family: "Inter", "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #0c1021;
+  background-color: #06080f;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: radial-gradient(circle at top, #101a3a 0%, #05070f 55%, #020205 100%);
+  color: #f5f7ff;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* ---------- Layout scaffolding ---------- */
+.app-shell {
+  width: min(1280px, 100%);
+  margin: 0 auto;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(260px, 1fr));
+  grid-template-areas:
+    "header header header"
+    "clock clock clock"
+    "alarm timer stopwatch";
+  gap: clamp(1rem, 1.8vw, 2.2rem);
+  align-items: start;
+}
+
+.app-shell > * {
+  min-width: 0;
+}
+
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 1rem;
+  grid-area: header;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.4rem);
+  letter-spacing: 0.06em;
+}
+
+.eyebrow {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 0.75rem;
+  color: #7ca6ff;
+}
+
+.header-meta {
+  font-size: 0.85rem;
+  color: #b6c5ff;
+}
+
+.hint {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
+}
+
+.hint-button {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #b6c5ff;
+  cursor: pointer;
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+}
+
+.hint-button:hover {
+  background: rgba(17, 30, 72, 0.35);
+}
+
+.clock-grid {
+  grid-area: clock;
+  display: grid;
+  grid-template-columns: minmax(340px, 1.5fr) minmax(220px, 1fr);
+  gap: 1.5rem;
+  align-items: stretch;
+}
+
+/* Clock cards for local/UTC displays */
+.clock-card {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  padding: 1.75rem;
+  border-radius: 1.5rem;
+  background: linear-gradient(135deg, rgba(13, 19, 45, 0.85), rgba(4, 8, 20, 0.9));
+  box-shadow: 0 25px 60px rgba(2, 3, 8, 0.55);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+.clock-card-main {
+  background: linear-gradient(135deg, rgba(69, 119, 255, 0.2), rgba(10, 15, 30, 0.95));
+  border-color: rgba(124, 166, 255, 0.4);
+}
+
+.clock-card-aux {
+  padding: 1.5rem;
+  background: linear-gradient(135deg, rgba(7, 12, 30, 0.85), rgba(3, 5, 13, 0.9));
+  border-color: rgba(255, 255, 255, 0.1);
+  opacity: 0.95;
+}
+
+#alarm-panel {
+  grid-area: alarm;
+}
+
+/* Map panel IDs to grid regions */
+#timer-panel {
+  grid-area: timer;
+}
+
+#stopwatch-panel {
+  grid-area: stopwatch;
+}
+
+.clock-card h2 {
+  margin: 0 0 0.7rem 0;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: #9ab3ff;
+}
+
+.clock-time {
+  font-size: clamp(2.4rem, 6vw, 3.8rem);
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.clock-card-aux .clock-time {
+  font-size: clamp(1.6rem, 4vw, 2.6rem);
+  color: #d3dcff;
+}
+
+.clock-card-aux .clock-date {
+  font-size: 0.85rem;
+  opacity: 0.85;
+}
+
+.clock-date {
+  margin: 0.25rem 0 0;
+  color: #d0ddff;
+  letter-spacing: 0.05em;
+}
+
+/* Shared card styling for alarm/timer/stopwatch widgets */
+.panel {
+  background: rgba(6, 9, 23, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+}
+
+.panel header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.panel h2 {
+  margin: 0;
+  font-size: 1.4rem;
+}
+
+.panel-hint {
+  margin: 0;
+  color: #8ca4ff;
+  font-size: 0.85rem;
+}
+
+/* Form controls */
+.inline-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.75rem;
+  align-items: end;
+}
+
+label span {
+  display: block;
+  font-size: 0.85rem;
+  margin-bottom: 0.2rem;
+  color: #9fb7ff;
+}
+
+input,
+select {
+  font: inherit;
+  padding: 0.65rem 0.85rem;
+  border-radius: 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(6, 12, 33, 0.8);
+  color: #f4f7ff;
+  width: 100%;
+}
+
+button,
+select,
+input {
+  font: inherit;
+}
+
+input:focus,
+button:focus,
+select:focus {
+  outline: 2px solid #7aa8ff;
+  outline-offset: 2px;
+}
+
+button {
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease;
+  text-align: center;
+  background: rgba(6, 12, 33, 0.8);
+  border-radius: 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #f4f7ff;
+  padding: 0.65rem 0.85rem;
+  width: auto;
+}
+
+button:hover {
+  background: rgba(17, 30, 72, 0.9);
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+button.ghost {
+  width: auto;
+  border-radius: 999px;
+}
+
+.next-indicator {
+  font-size: 0.9rem;
+  color: #d9e1ff;
+  margin: 0;
+}
+
+/* Alarm/timer list styling */
+.item-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.item-list li {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 1rem;
+  padding: 0.8rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(9, 12, 34, 0.8);
+}
+
+.item-list li.muted {
+  opacity: 0.55;
+}
+
+.item-list li.ringing {
+  border-color: #ff8f6c;
+  box-shadow: 0 0 12px rgba(255, 143, 108, 0.5);
+  animation: pulse 1s infinite;
+}
+
+.item-list li small {
+  display: block;
+  font-size: 0.75rem;
+  color: #8ea1d7;
+}
+
+.item-list.compact li {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.alarm-actions {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  background: rgba(123, 200, 255, 0.15);
+  border: 1px solid rgba(123, 200, 255, 0.35);
+}
+
+/* Large numeric readouts for timer/stopwatch */
+.big-time {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  padding: 1rem;
+  border-radius: 1.2rem;
+  background: rgba(7, 12, 29, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.button-row button {
+  flex: 1;
+}
+
+.inline-form button {
+  width: 100%;
+}
+
+.status-text {
+  min-height: 1rem;
+  margin: 0;
+  font-size: 0.85rem;
+  color: #9fb7ff;
+}
+
+.duration-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Toast-like status label pinned near the bottom of the viewport */
+#status-message {
+  position: fixed;
+  bottom: 1.2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #f7fbff;
+  padding: 0.5rem 1.2rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  pointer-events: none;
+  min-width: 200px;
+  text-align: center;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Keyboard shortcut modal overlay */
+.shortcut-overlay {
+  position: fixed;
+  inset: 0;
+  backdrop-filter: blur(8px);
+  background: rgba(2, 4, 12, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shortcut-card {
+  width: min(520px, 80vw);
+  background: rgba(4, 8, 24, 0.92);
+  border-radius: 1.5rem;
+  padding: 1.25rem 1.5rem 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
+}
+
+.shortcut-card header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.shortcut-card dl {
+  margin: 1rem 0 0;
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) 3fr;
+  gap: 0.35rem 0.75rem;
+  font-size: 0.95rem;
+}
+
+.shortcut-card dt {
+  font-weight: 600;
+  color: #9dc0ff;
+}
+
+.shortcut-card dd {
+  margin: 0;
+  color: #e5ebff;
+}
+
+/* Responsive adjustments for tablet/phone layouts */
+@media (max-width: 1180px) {
+  .app-shell {
+    grid-template-columns: repeat(2, minmax(260px, 1fr));
+    grid-template-areas:
+      "header header"
+      "clock clock"
+      "alarm timer"
+      "stopwatch stopwatch";
+  }
+}
+
+@media (max-width: 860px) {
+  .clock-grid {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "clock"
+      "alarm"
+      "timer"
+      "stopwatch";
+  }
+}
+
+@media (max-width: 640px) {
+  .inline-form {
+    grid-template-columns: 1fr;
+  }
+
+  .app-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .shortcut-card dl {
+    grid-template-columns: 1fr;
+  }
+}