/* 12/24-hour workspace. The landing and article use shared partial styles. */
.tn-tf-page {
  --tf-ink:#1a1208; --tf-muted:#5a4a30; --tf-line:#b8a888; --tf-soft:#ddd4be;
  --tf-paper:#faf6ee; --tf-surface:#fffdf7; --tf-wash:#f5efdf;
  --tf-accent:#c44a00; --tf-button:#ede6d4; --tf-hover:#dfd4bb;
  --tf-primary:#1a1208; --tf-primary-hover:#683719; --tf-primary-text:#faf6ee; --tf-error:#9c3020;
  --tf-scheme:light;
  --tf-num:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",system-ui,sans-serif;
  --tf-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.tn-tf-page .tn-tf-tool, .tn-tf-page .tn-tf-tool * { box-sizing:border-box; min-width:0; }
.tn-tf-page .tn-tf-tool {
  width:100%; margin:0 auto; padding:24px; border:1px solid var(--tf-line); border-radius:0;
  background:var(--tf-paper); color:var(--tf-ink); -webkit-text-fill-color:var(--tf-ink);
  box-shadow:none; font:400 14px/1.6 var(--tf-num); color-scheme:var(--tf-scheme);
  -webkit-font-smoothing:antialiased;
}
.tn-tf-page .tn-tf-tool :is(p,h2,h3) { margin:0; }
.tn-tf-page .tn-tf-grid { display:grid; grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr); align-items:stretch; }
.tn-tf-page .tn-tf-pane { display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid var(--tf-line); background:var(--tf-surface); }
.tn-tf-page .tn-tf-pane[data-active="true"] { border-color:var(--tf-accent); }
.tn-tf-page .tn-tf-pane:has(input:focus-visible) { border-color:var(--tf-accent); }
.tn-tf-page .tn-tf-pane-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--tf-soft); }
.tn-tf-page .tn-tf-pane-head :is(label,h2,h3,span) { color:var(--tf-ink); font:700 15px/1.4 var(--tf-num); }
.tn-tf-page .tn-tf-field { display:grid; gap:5px; }
.tn-tf-page .tn-tf-pane-head small { color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font:500 11px/1.4 var(--tf-num); }
.tn-tf-page .tn-tf-arrow { display:grid; place-items:center; border:0; background:transparent; box-shadow:none; color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font:400 28px/1 var(--tf-num); }
.tn-tf-page .tn-tf-tool :is(#tf12,#tf24) {
  display:block; width:100%; height:76px; min-height:76px; margin:0; padding:12px 10px;
  border:1px solid var(--tf-line); border-radius:0; background:var(--tf-paper);
  color:var(--tf-ink); -webkit-text-fill-color:var(--tf-ink); box-shadow:none;
  font:600 clamp(26px,3.6vw,42px)/1.2 var(--tf-num); font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:normal; text-align:center;
}
.tn-tf-page .tn-tf-tool input::placeholder { color:var(--tf-ink); -webkit-text-fill-color:var(--tf-ink); font-weight:400; opacity:.35; }
.tn-tf-page .tn-tf-tool input[aria-invalid="true"] { border-color:var(--tf-error); }
.tn-tf-page .tn-tf-hint { color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font-size:12px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
.tn-tf-page .tn-tf-pane-actions { display:flex; gap:8px; margin-top:auto; }
.tn-tf-page .tn-tf-pane-actions button { flex:1; }
.tn-tf-page .tn-tf-tool button {
  display:inline-flex; justify-content:center; align-items:center; min-height:40px; height:40px;
  margin:0; padding:0 13px; border:1px solid var(--tf-line); border-radius:0;
  background:var(--tf-button); color:var(--tf-ink); -webkit-text-fill-color:var(--tf-ink);
  box-shadow:none; outline:none; font:700 12px/1 var(--tf-mono); letter-spacing:0;
  white-space:nowrap; text-transform:none; cursor:pointer; transition:background-color 120ms,border-color 120ms;
}
.tn-tf-page .tn-tf-tool button:hover:not(:disabled) { background:var(--tf-hover); }
.tn-tf-page .tn-tf-tool :is(button,input):focus-visible { outline:2px solid var(--tf-accent); outline-offset:2px; }
.tn-tf-page .tn-tf-tool button:disabled { opacity:.45; cursor:not-allowed; }
.tn-tf-page .tn-tf-presets { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:16px 0; }
.tn-tf-page .tn-tf-presets > :is(span,p) { margin-right:5px; color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font-size:12px; }
.tn-tf-page .tn-tf-tool [data-tf-preset] { gap:4px; background:var(--tf-paper); }
.tn-tf-page .tn-tf-tool [data-tf-preset][aria-pressed="true"] { border-color:var(--tf-accent); background:var(--tf-wash); }
.tn-tf-page .tn-tf-output { padding:16px 0; border-top:3px double var(--tf-line); }
.tn-tf-page .tn-tf-summary { font:800 clamp(19px,2.6vw,26px)/1.4 var(--tf-num); font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere; }
.tn-tf-page .tn-tf-boundary { margin-top:6px !important; color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.tn-tf-page .tn-tf-boundary:empty { display:none; }
.tn-tf-page .tn-tf-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tn-tf-page .tn-tf-tool #tf-both-copy { background:var(--tf-primary); color:var(--tf-primary-text); -webkit-text-fill-color:var(--tf-primary-text); }
.tn-tf-page .tn-tf-tool #tf-both-copy:hover:not(:disabled) { background:var(--tf-primary-hover); }
.tn-tf-page .tn-tf-status { margin-top:10px !important; color:var(--tf-muted); -webkit-text-fill-color:var(--tf-muted); font-size:12px; overflow-wrap:anywhere; }
.tn-tf-page .tn-tf-status:empty { display:none; }
.tn-tf-page .tn-tf-tool[data-state="invalid"] .tn-tf-status { color:var(--tf-error); -webkit-text-fill-color:var(--tf-error); }
.tn-tf-page .tn-tf-ad--top { margin-top:54px !important; margin-bottom:20px !important; }
.tn-tf-page .tn-tf-ad--bottom { margin-bottom:28px !important; }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-tf-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-tf-page {
  --tf-ink:#f7ead1; --tf-muted:#c9b99b; --tf-line:#826744; --tf-soft:#58432e;
  --tf-paper:#211a12; --tf-surface:#261e15; --tf-wash:#342619;
  --tf-accent:#f29a64; --tf-button:#2f2115; --tf-hover:#3a2a1b;
  --tf-primary:#6a3b1f; --tf-primary-hover:#824826; --tf-primary-text:#f7ead1; --tf-error:#ffb49e; --tf-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] .tn-tf-page {
    --tf-ink:#f7ead1; --tf-muted:#c9b99b; --tf-line:#826744; --tf-soft:#58432e;
    --tf-paper:#211a12; --tf-surface:#261e15; --tf-wash:#342619;
    --tf-accent:#f29a64; --tf-button:#2f2115; --tf-hover:#3a2a1b;
    --tf-primary:#6a3b1f; --tf-primary-hover:#824826; --tf-primary-text:#f7ead1; --tf-error:#ffb49e; --tf-scheme:dark;
  }
}
@media(max-width:640px) {
  .tn-tf-page .tn-tf-tool { padding:14px; }
  .tn-tf-page .tn-tf-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .tn-tf-page .tn-tf-pane { padding:14px; gap:10px; }
  .tn-tf-page .tn-tf-arrow { height:32px; transform:rotate(90deg); }
  .tn-tf-page .tn-tf-tool :is(#tf12,#tf24) { height:66px; min-height:66px; font-size:32px; }
  .tn-tf-page .tn-tf-presets { gap:6px; padding:14px 0; }
  .tn-tf-page .tn-tf-presets > :is(span,p) { flex-basis:100%; }
  .tn-tf-page .tn-tf-actions button { flex:1; }
  .tn-tf-page .tn-tf-ad--top { margin-top:48px !important; }
}
@media(prefers-reduced-motion:reduce) { .tn-tf-page .tn-tf-tool button { transition:none; } }