/* Hallmark · shape: app screen · theme: project DESIGN.md · signature: living Taiwan clock · v2.0.0 */
/* waive 24b: 2px optical adjustments tune Chinese controls and clock baseline;
   sizes verified at 320/390/desktop. */
/* Critique: task-first clock, persistent source status;
   no marketing hero, decorative imagery or invented precision. */
:root {
  --paper:#f7f7f2;
  --surface:#fffffc;
  --ink:#182c2a;
  --muted:#566963;
  --line:#d9e2dc;
  --accent:#146b53;
  --accent-hover:#0c503e;
  --soft:#e7efe9;
  --warning:#875022;
  --warning-bg:#fff4df;
  --focus:#096bca;
  --font:ui-sans-serif,system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --digits:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --radius:8px;
  --transparent:transparent;
  --selection:#d0e8dc;
  color-scheme:light}

* {
  box-sizing:border-box}

html,body {
  margin:0;
  overflow-x:clip}

body {
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:16px}
::selection {
  background:var(--selection);
  color:var(--ink)}
a {
  color:var(--accent);
  text-underline-offset:4px}
a:hover {
  text-decoration-thickness:2px}
button,input,summary,a {
  touch-action:manipulation}
button,input {
  font:inherit}
button,a,summary,input {
  outline-offset:4px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid var(--focus)}
button {
  cursor:pointer}
button:disabled {
  background:var(--soft);
  color:var(--muted);
  border-color:var(--line);
  cursor:wait}
button:active:not(:disabled) {
  transform:translateY(1px)}
[hidden] {
  display:none!important}
.shell {
  max-width:1120px;
  padding:0 40px;
  margin:auto}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:88px;
  border-bottom:1px solid var(--line)}
.brand {
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  color:var(--ink);
  text-decoration:none}
.brand svg {
  width:26px;
  height:26px;
  color:var(--accent)}
.topbar nav {
  display:flex;
  gap:26px}
.topbar nav a {
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding:12px 0}
.skip {
  position:fixed;
  top:-80px;
  left:12px;
  padding:10px;
  background:var(--surface);
  z-index:20}
.skip:focus {
  top:10px}
h1,h2,h3 {
  line-height:1.4;
  min-width:0;
  overflow-wrap:break-word;
  text-wrap:balance}
h1 {
  font-size:28px;
  letter-spacing:-.02em;
  margin:0}
h2 {
  font-size:22px;
  margin:0 0 18px}
h3 {
  font-size:18px}
p {
  margin:0 0 16px}
.intro {
  padding:44px 0 24px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px}
.intro p {
  color:var(--muted);
  margin:8px 0 0;
  font-size:15px}
.zone {
  font-size:14px;
  color:var(--muted);
  white-space:nowrap}
.clock-stage {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:visible;
  padding:38px 32px 0;
  text-align:center}
.date {
  font-size:18px;
  color:var(--muted);
  margin-bottom:18px;
  min-height:30px}
.clock-row {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px}
.clock {
  font-family:var(--digits);
  font-size:96px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  line-height:1.15;
  white-space:nowrap}
.period {
  font-size:16px}
.milliseconds {
  font-family:var(--digits);
  font-variant-numeric:tabular-nums;
  font-size:24px;
  color:var(--muted);
  min-width:4ch}
.clock-row:not(.show-ms) .milliseconds {
  display:none}
.clock-caption {
  font-size:13px;
  color:var(--muted);
  margin:12px 0 26px}
.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  font-weight:550;
  text-decoration:none}
.button svg {
  width:18px;
  height:18px}
.button:hover {
  background:var(--soft)}
.button.primary {
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent)}
.button.primary:hover {
  background:var(--accent-hover)}
.button[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--soft);
  color:var(--accent)}
.notice {
  color:var(--muted);
  font-size:14px;
  min-height:24px;
  margin:14px 0 20px}
.source-line {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  gap:20px}
.status-title {
  font-size:14px;
  font-weight:650}
.status-detail {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:3px;
  overflow-wrap:anywhere}
.status-title[data-state=device],.status-title[data-state=stale] {
  color:var(--warning)}
.text-button {
  border:0;
  background:var(--transparent);
  color:var(--accent);
  padding:10px;
  font-size:14px;
  white-space:nowrap}
.text-button:hover {
  text-decoration:underline}
.settings {
  margin:20px 0 0;
  border-bottom:1px solid var(--line);
  padding-bottom:20px}
.settings>summary {
  cursor:pointer;
  font-weight:550;
  padding:10px 0;
  width:fit-content}
.settings-grid {
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  padding:16px 0 4px}
.settings label {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  cursor:pointer}
.settings input {
  accent-color:var(--accent);
  width:18px;
  height:18px}
.settings .explain {
  font-size:13px;
  color:var(--muted);
  margin-top:10px}
.settings-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px}
.preferences-note {
  font-size:13px;
  color:var(--muted);
  margin:10px 0 0}
.info {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  padding:48px 0 56px}
.info p {
  color:var(--muted);
  font-size:15px;
  max-width:65ch}
.faq details {
  border-top:1px solid var(--line);
  padding:14px 0}
.faq summary {
  cursor:pointer;
  font-size:15px;
  font-weight:550;
  padding:4px 0}
.faq details p {
  margin:12px 0 0;
  font-size:14px}
.foot {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid var(--line);
  padding:24px 0 32px;
  font-size:13px;
  color:var(--muted)}
.foot nav {
  display:flex;
  gap:22px}
.foot a {
  color:var(--muted)}
.ad-slot {
  max-width:728px;
  margin:28px auto;
  min-height:120px;
  padding:16px;
  border:1px solid var(--line);
  text-align:center;
  overflow-wrap:anywhere}
.ad-slot small {
  color:var(--muted)}
.ad-slot p {
  margin:4px 0}
.article {
  max-width:720px;
  margin:48px auto 64px}
.article h1 {
  margin-bottom:18px}
.article h2 {
  margin-top:36px}
.article p,.article li {
  color:var(--muted)}
.article li {
  margin-bottom:8px}
.article .lead {
  font-size:18px}
.noscript {
  display:block;
  background:var(--warning-bg);
  color:var(--warning);
  padding:16px;
  border-radius:var(--radius)}
.focus-mode {
  background:var(--surface)}
.focus-mode .topbar,.focus-mode .intro,.focus-mode .settings,.focus-mode .info,.focus-mode .foot,.focus-mode .ad-slot {
  display:none!important}
.focus-mode .shell {
  max-width:none}
.focus-mode .clock-stage {
  border:0;
  border-radius:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px}
.focus-mode .clock {
  font-size:160px}
.focus-mode .source-line {
  width:min(760px,100%);
  margin:40px auto 0}
.focus-mode .clock-caption {
  margin-bottom:28px}

@media(min-width:1600px) {
  .focus-mode .clock {
  font-size:192px}
}

@media(max-width:900px) {
  .focus-mode .clock {
  font-size:96px}
.clock {
  font-size:80px}
.info {
  gap:32px}
.shell {
  padding:0 28px}
}

@media(max-width:600px) {
  .shell {
  padding:0 20px}
.topbar {
  min-height:72px}
.topbar nav {
  gap:12px}
.topbar nav a {
  font-size:13px}
.topbar nav a.secondary {
  display:none}
.intro {
  padding:30px 0 20px;
  display:block}
h1 {
  font-size:24px}
.intro p {
  font-size:14px}
.zone {
  margin-top:12px;
  font-size:13px}
.clock-stage {
  padding:28px 16px 0}
.date {
  font-size:15px;
  margin-bottom:20px}
.clock,.focus-mode .clock {
  font-size:52px}
.clock-row {
  gap:4px;
  flex-wrap:wrap}
.clock-row .period {
  font-size:13px}
.clock-row.show-ms .milliseconds {
  font-size:18px}
.milliseconds {
  min-width:3.5ch}
.clock-caption {
  margin-top:14px;
  font-size:12px}
.actions {
  gap:10px}
.actions .button {
  width:100%}
.source-line {
  gap:8px;
  align-items:flex-start}
.status-detail {
  font-size:12px}
.text-button {
  padding:7px 0 7px 10px;
  font-size:13px}
.settings-grid {
  display:grid;
  gap:4px}
.info {
  display:block;
  padding:36px 0}
.info .faq {
  margin-top:32px}
.foot {
  display:block}
.foot nav {
  margin-top:12px}
.focus-mode .shell {
  padding:0}
.focus-mode .clock-stage {
  padding:24px 20px}
.focus-mode .actions {
  max-width:330px;
  margin:auto auto 0}
.focus-mode .clock-stage {
  justify-content:center}
.focus-mode .actions {
  margin:0 auto}
.focus-mode .source-line {
  margin-top:24px}
.article {
  margin:32px auto}
.settings-actions .button {
  flex:1 1 100%}
.clock-stage .notice {
  font-size:13px}
}

@media(max-width:360px) {
  .clock,.focus-mode .clock {
  font-size:44px}
.clock-row.show-ms .milliseconds {
  font-size:15px}
.shell {
  padding:0 16px}
.topbar nav a {
  font-size:12px}
.brand {
  font-size:15px}
.clock-stage {
  padding-left:12px;
  padding-right:12px}
}

@media(max-height:500px) and (orientation:landscape) {
  .focus-mode .clock-stage {
  padding:16px}
.focus-mode .date {
  margin:0}
.focus-mode .clock {
  font-size:72px}
.focus-mode .clock-caption,.focus-mode .notice {
  display:none}
.focus-mode .actions {
  margin-top:10px}
.focus-mode .actions .button {
  width:auto}
.focus-mode .source-line {
  margin-top:12px;
  padding:10px 0}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important}
}


#copy-text {
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  margin-top:8px;
  caret-color:var(--accent)}