/* Hallmark · shape: app screen (tool pages; family, guide and legal pages are reference documents in the same shell) · theme: custom · idea: "the amber digits people already know, kept as the one loud thing in a calm navy app" · vibe: "night shift, clear, exact, familiar" · genre: modern-minimal · redesign: full · copy: verbatim
 * paper: oklch(15.5% 0.034 258), today's navy re-derived · accent: oklch(83% 0.165 79), today's amber · display: Manrope · body: Manrope · modes: dark only (by request)
 * nav: a sticky top navbar (wordmark, three tool dropdowns that open on hover or keyboard focus, Guides, the language switcher, settings), a full menu panel under 64rem, the site search under the bar · footer: a brand block and four vertical link columns (Timers, Time, Calculators, Company; owner request), the legal lines beneath · signature: the giant amber clock on a raised navy card, as big as before; every alarm you set in amber; one amber action · states: empty lists, alarms set, ringing, sound locked, history, menu open, search open, search empty
 * axes: dark/grotesk-sans/chromatic-amber · posture: committed (amber is the brand's digits: the clock carries it as a field of figures; the action, the current tool and the next change are its only other uses) · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V3 · weakest: V, it sits on Console's axes (dark, grotesk, amber), so the paper moves to today's navy and amber stays on the digits the owner's users like */
/* Hallmark · waive 49b · guide titles, source names and place names in the footer, related lists and table cells wrap at 320px · they are real titles kept verbatim (copy: verbatim) and cannot shorten */
/* Hallmark · answered F4 · .btn.danger fills only Stop inside the ringer, which is its own dialog with one filled control */
/* Hallmark · answered F24 · menus float over cards of the same lightness: the 1px edge parts them, the shadow lifts them over the page */
/* Hallmark · answered F7 · cards, tables, FAQ and notes share one card recipe on purpose: the product UI asks for one familiar surface */
/* Hallmark · dismissed 23 · .city-grid .c-time sets the world clock times in amber at display size · posture committed: amber is the clock digits' colour across the site */
/* Hallmark · answered F15 · tool pages centre the h1 and its lead over the tool: owner request: centred tool heading */
/* Hallmark · dismissed 70 · "All rights reserved." sits in the site's i18n JSON (ui.rights) for the old footer; nothing on the page prints it */

@font-face{font-family:"Manrope";font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303,U+0309,U+0323,U+1D00-1DBF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-cyr.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400 500;font-display:swap;src:url(/assets/fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600 800;font-display:swap;src:url(/assets/fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  color-scheme:dark;
  --space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:144px;
  --text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.625rem;--text-3xl:2rem;
  --text-display:2.5rem;--text-section:1.75rem;--text-title:1.25rem;--text-lead:1.125rem;
  --text-figure:10.5rem;--text-figure-s:3.5rem;
  --ease-out:cubic-bezier(.16,1,.3,1);--dur-micro:120ms;--dur-short:220ms;
  --container:1280px;--gutter:32px;--gap-columns:32px;
  --z-base:1;--z-raised:10;--z-dropdown:100;--z-sticky:200;--z-sticky-nav:300;--z-modal:400;--z-toast:500;
  --bar-h:64px;--search-h:72px;--control:44px;--control-s:36px;--control-l:52px;--rule-hair:1px;
  --w-medium:600;--w-strong:700;

  --color-paper:oklch(15.5% .034 258);--color-paper-2:oklch(21.5% .04 258);--color-paper-3:oklch(26% .045 258);
  --color-field:oklch(13% .032 258);--color-field-edge:oklch(56% .045 258);
  --color-ink:oklch(96% .01 250);--color-ink-2:oklch(86% .02 250);--color-muted:oklch(73% .03 255);
  --color-rule:oklch(30% .04 258);--color-rule-2:oklch(40% .045 258);
  --color-accent:oklch(83% .165 79);--color-accent-hover:oklch(87% .15 83);--color-accent-press:oklch(77% .165 74);--color-accent-ink:oklch(19% .04 258);--color-accent-soft:oklch(30% .06 75);--color-focus:oklch(83% .165 79);
  --color-ok:oklch(78% .15 150);--color-ok-soft:oklch(28% .05 150);--color-cool:oklch(78% .11 245);--color-cool-soft:oklch(29% .06 245);
  --color-bad:oklch(70% .17 25);--color-bad-ink:oklch(19% .04 258);
  --color-link:oklch(86% .02 250);--color-mark:oklch(83% .165 79);
  --color-nav:oklch(14% .033 258);--color-foot:oklch(13% .032 258);--color-clock-bg:oklch(19% .042 258);--color-clock:oklch(83% .165 79);
  --color-figure-bg:oklch(95% .01 250);--color-scrim:oklch(8% .03 258 / .78);
  --shadow-card:0 1px 2px oklch(8% .03 258 / .5);--shadow-pop:0 16px 40px -12px oklch(6% .03 258 / .75);
  --font-body:"Manrope","IBM Plex Sans Arabic","Noto Sans Arabic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Noto Sans Thai","Leelawadee UI",ui-sans-serif,system-ui,sans-serif;
  --radius-card:14px;--radius-control:10px;--radius-pill:999px;
  --tracking-display:-.025em;
}
@media (max-width:60rem){:root{--gutter:24px;--text-display:2.125rem}}
@media (max-width:40rem){:root{--gutter:16px;--gap-columns:16px;--text-display:1.75rem;--text-section:1.5rem;--text-figure-s:2.6rem;--bar-h:60px}}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + var(--space-lg));scrollbar-color:var(--color-rule-2) var(--color-paper)}
body{margin:0;background:var(--color-paper);color:var(--color-ink-2);font:400 var(--text-md)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;caret-color:var(--color-accent);font-synthesis:none}
::selection{background:var(--color-accent-soft);color:var(--color-ink)}
:lang(ar){--tracking-display:0}
:lang(ar) body,body:lang(ar),:lang(th) body,body:lang(th){line-height:1.8}
:lang(ja) body,body:lang(ja){line-height:1.75}
:lang(ja){line-break:strict;word-break:auto-phrase}
img,svg{max-width:100%}
img{height:auto}
p{margin:0}
h1,h2,h3{margin:0;color:var(--color-ink);font-weight:var(--w-strong);letter-spacing:var(--tracking-display);overflow-wrap:break-word;min-width:0;text-wrap:balance}
p,li{text-wrap:pretty}
b,strong{font-weight:var(--w-strong);color:var(--color-ink)}
a{color:var(--color-link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:var(--space-xs);top:calc(-1 * var(--space-3xl));z-index:var(--z-toast);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-control);background:var(--color-accent);color:var(--color-accent-ink)}
.skip:focus-visible{top:var(--space-xs)}
.dst-mark{display:inline-flex;vertical-align:-3px;color:var(--color-accent)}
.dst-mark .ico{width:16px;height:16px}
[dir="rtl"] .ico .flip{transform:scaleX(-1);transform-origin:center;transform-box:fill-box}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hint{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-xs);max-width:68ch}
.center{text-align:center}
.hint.center{margin-inline:auto}
.mono{font-variant-numeric:tabular-nums;font-weight:var(--w-strong)}

/* navbar ---------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--color-nav);border-bottom:var(--rule-hair) solid var(--color-rule)}
.head-row{display:flex;align-items:center;gap:var(--space-lg);min-height:var(--bar-h)}
.brand{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--color-ink);text-decoration:none;font-size:var(--text-lg);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:inherit;color:inherit}
.brand:hover{color:var(--color-ink)}
.brand-mark{width:26px;height:26px;color:var(--color-mark)}
.main-nav{display:flex;align-items:center;gap:var(--space-2xs)}
.nav-group{position:relative}
.main-nav .nav-title,.main-nav .nav-link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:var(--control);margin:0;padding:0 var(--space-sm);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-ink-2);font-size:var(--text-sm);font-weight:var(--w-medium);line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.main-nav .nav-title .ico{width:16px;height:16px}
.main-nav .nav-title:hover,.main-nav .nav-link:hover,.nav-group:focus-within .nav-title{background:var(--color-paper-3);color:var(--color-ink)}
.main-nav .nav-title:active{background:var(--color-rule)}
.main-nav .nav-link[aria-current]{color:var(--color-accent)}
.nav-group ul{display:none;position:absolute;top:100%;inset-inline-start:0;z-index:var(--z-dropdown);min-width:15rem;margin:0;padding:var(--space-xs);list-style:none;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-card);box-shadow:var(--shadow-pop)}
.nav-group:hover ul,.nav-group:focus-within ul{display:block}
.nav-group ul a{display:block;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-control);color:var(--color-ink-2);text-decoration:none;font-size:var(--text-sm)}
.nav-group ul a:hover{background:var(--color-paper-3);color:var(--color-ink)}
.nav-group ul a[aria-current]{background:var(--color-accent-soft);color:var(--color-ink);font-weight:var(--w-strong)}
.head-actions{display:flex;align-items:center;gap:var(--space-2xs);margin-inline-start:auto}
.icon-btn{display:inline-grid;place-items:center;width:var(--control);height:var(--control);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-ink-2);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out)}
.icon-btn:hover{background:var(--color-paper-3);color:var(--color-ink)}
.icon-btn:active{background:var(--color-rule)}
.icon-btn:disabled{opacity:.55;cursor:not-allowed}
.menu-btn{display:none}
.lang-switch{position:relative}
.flag{width:21px;height:14px;flex:none;border-radius:2px;outline:var(--rule-hair) solid var(--color-rule-2);outline-offset:0}
.lang-switch summary{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:var(--control);padding:0 var(--space-sm);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-control);color:var(--color-ink-2);font-size:var(--text-sm);font-weight:var(--w-medium);cursor:pointer;list-style:none;white-space:nowrap}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch:not([open]) .lang-list{display:none}
.lang-switch summary:hover{background:var(--color-paper-3);color:var(--color-ink)}
.lang-switch summary .ico{width:16px;height:16px}
.lang-code{font-size:var(--text-sm);font-weight:var(--w-strong);color:var(--color-ink)}
.lang-list{position:absolute;top:calc(100% + var(--space-xs));inset-inline-end:0;z-index:var(--z-dropdown);display:grid;grid-template-columns:repeat(2,minmax(10rem,1fr));gap:var(--space-3xs);list-style:none;margin:0;padding:var(--space-xs);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-card);box-shadow:var(--shadow-pop)}
.lang-list a,.lang-chip{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-control);color:var(--color-ink-2);text-decoration:none;font-size:var(--text-sm)}
.lang-list .lang-code,.lang-chip .lang-code{min-width:2.2em}
.lang-name{color:var(--color-muted);font-size:var(--text-xs)}
[aria-current] .lang-name{color:var(--color-ink-2)}
.lang-list small,.lang-chip small{margin-inline-start:auto;padding-inline-start:var(--space-xs);color:var(--color-muted);font-size:var(--text-xs)}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--color-paper-3);color:var(--color-ink)}
.lang-list a[aria-current],.lang-chip[aria-current]{background:var(--color-accent-soft);color:var(--color-accent);font-weight:var(--w-strong)}
.nav-langs{display:none}
@media (max-width:64rem){
  .menu-btn{display:inline-grid}
  .main-nav{display:none;position:fixed;inset:var(--bar-h) 0 auto 0;z-index:var(--z-dropdown);max-height:calc(100dvh - var(--bar-h));overflow-y:auto;padding:var(--space-md) var(--gutter) var(--space-lg);background:var(--color-paper-2);border-bottom:var(--rule-hair) solid var(--color-rule-2);box-shadow:var(--shadow-pop);flex-direction:column;align-items:stretch;gap:var(--space-md)}
  .main-nav.open{display:flex}
  .main-nav .nav-title{min-height:0;padding:0;color:var(--color-muted);cursor:default}
  .main-nav .nav-title:hover,.nav-group:focus-within .nav-title{background:transparent;color:var(--color-muted)}
  .main-nav .nav-title .ico{display:none}
  .nav-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs);position:static;min-width:0;padding:var(--space-xs) 0 0;background:none;border:0;box-shadow:none}
  .nav-group ul a{padding:var(--space-sm);background:var(--color-paper-3)}
  .main-nav .nav-link{justify-content:center;border:var(--rule-hair) solid var(--color-rule-2)}
  .head-actions .lang-switch{display:none}
  .nav-langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs);padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule)}
  .lang-chip{min-height:var(--control);background:var(--color-paper-3)}
  .lang-chip:hover{color:var(--color-ink)}
}
@media (max-width:40rem){
  .head-row{gap:var(--space-xs)}
  .brand{font-size:var(--text-md)}
  .brand-mark{width:22px;height:22px}
  .head-actions{gap:0}
}

/* site search ------------------------------------------------------------- */
.site-search{background:var(--color-nav);border-bottom:var(--rule-hair) solid var(--color-rule)}
.search-row{display:flex;align-items:center;min-height:var(--search-h);padding-block:var(--space-sm)}
.search-box{position:relative;width:100%;max-width:40rem}
.search-box .ico{position:absolute;inset-inline-start:var(--space-sm);top:50%;transform:translateY(-50%);color:var(--color-muted);pointer-events:none}
.search-box input{width:100%;min-height:var(--control);padding:0 var(--space-xl) 0 calc(var(--space-sm) + 28px);border:var(--rule-hair) solid var(--color-field-edge);border-radius:var(--radius-control);background:var(--color-field);color:var(--color-ink);font-size:var(--text-md)}
[dir="rtl"] .search-box input{padding:0 calc(var(--space-sm) + 28px) 0 var(--space-xl)}
.search-box input::placeholder{color:var(--color-muted)}
.search-box input:hover{border-color:var(--color-muted)}
.search-box input:focus-visible{outline:2px solid var(--color-focus);outline-offset:0;border-color:var(--color-focus)}
.search-box kbd{position:absolute;inset-inline-end:var(--space-sm);top:50%;transform:translateY(-50%);min-width:24px;padding:0 var(--space-2xs);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--space-2xs);color:var(--color-muted);font:var(--w-medium) var(--text-xs)/22px var(--font-body);text-align:center}
.search-box input:focus + kbd,.search-box input:not(:placeholder-shown) + kbd{display:none}
.search-list{position:absolute;top:calc(100% + var(--space-xs));inset-inline:0;z-index:var(--z-dropdown);max-height:min(70dvh,32rem);overflow-y:auto;margin:0;padding:var(--space-xs);list-style:none;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-card);box-shadow:var(--shadow-pop)}
.search-list .s-group{padding:var(--space-xs) var(--space-sm) var(--space-2xs);color:var(--color-muted);font-size:var(--text-xs);font-weight:var(--w-medium)}
.search-list [role="option"]{display:grid;gap:var(--space-3xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-control);color:var(--color-ink-2);cursor:pointer}
.search-list [role="option"] b{color:var(--color-ink);font-weight:var(--w-strong)}
.search-list [role="option"] mark{background:none;color:var(--color-accent)}
.search-list [role="option"] small{color:var(--color-muted);font-size:var(--text-sm)}
.search-list [role="option"]:hover,.search-list [aria-selected="true"]{background:var(--color-paper-3);color:var(--color-ink)}
.search-list .s-empty{padding:var(--space-sm);color:var(--color-muted)}
.search-big .search-row{min-height:var(--search-h)}
.search-big .search-box{max-width:none}
.search-big .search-box input{min-height:var(--control-l);font-size:var(--text-lg)}
@media (max-width:40rem){.search-row,.search-big .search-row{min-height:0;padding-block:var(--space-xs)}.search-box{max-width:none}.search-box kbd{display:none}.search-big .search-box input{min-height:var(--control);font-size:var(--text-md)}}

/* page head --------------------------------------------------------------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:var(--space-lg) 0 0;font-size:var(--text-sm);color:var(--color-muted)}
.crumbs li+li::before{content:"/";margin-inline-end:var(--space-xs);color:var(--color-rule-2)}
.crumbs a{color:var(--color-ink-2);text-decoration:none}
.crumbs a:hover{color:var(--color-ink);text-decoration:underline}
.page-head{display:grid;gap:var(--space-xs);padding:var(--space-lg) 0 var(--space-md)}
.page-head h1{font-size:var(--text-display);line-height:1.1;max-width:30ch}
.lead{font-size:var(--text-lead);color:var(--color-muted);max-width:60ch}
/* tool pages: the heading and its lead centred over the tool (owner request) */
.tool-head{justify-items:center;text-align:center;padding:var(--space-md) 0 var(--space-lg)}
.tool-head h1{max-width:none}
.tool-head .lead{max-width:60ch}
.post .lead{max-width:none}

/* the board: the giant clock card ----------------------------------------- */
.tool{padding-bottom:var(--space-md)}
.board{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-md);padding:var(--space-lg) var(--space-xl);background:var(--color-clock-bg);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);text-align:center;color:var(--color-ink-2);container-type:inline-size}
.board-label{font-size:var(--text-lg);font-weight:var(--w-medium);color:var(--color-ink-2);min-height:1.5em}
.board-sub{color:var(--color-accent);margin-inline-start:var(--space-xs)}
.board-foot{font-size:var(--text-md);font-weight:var(--w-medium);color:var(--color-ink-2);min-height:1.5em;white-space:pre-line}
.digits{display:block;margin:0;font-size:min(var(--text-figure),15.5cqi);font-weight:var(--w-strong);line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--color-clock);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.digits small{font-size:.42em;color:var(--color-ink-2);margin-inline-start:.06em;letter-spacing:0}
.board-fs{position:absolute;top:var(--space-xs);inset-inline-end:var(--space-xs)}
.progress{width:100%;max-width:40rem;height:6px;margin-top:var(--space-xs);background:var(--color-rule);border-radius:var(--radius-pill);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--color-accent)}
.board.done .digits,.board.ringing .digits{color:var(--color-bad);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.board.phase-work .digits{color:var(--color-ok)}
.board.phase-work .progress span{background:var(--color-ok)}
.board.phase-rest .digits{color:var(--color-cool)}
.board.phase-rest .progress span{background:var(--color-cool)}
.board.phase-prep .progress span{background:var(--color-accent)}
.pm-board.phase-work .digits{color:var(--color-clock)}
.pm-board.phase-work .progress span{background:var(--color-accent)}
.dhms{display:flex;justify-content:center;gap:var(--space-lg);flex-wrap:wrap}
.dhms>div{display:flex;flex-direction:column;align-items:center;min-width:2.2ch}
.dhms .digits{font-size:min(7.5rem,12cqi)}
.dhms small{color:var(--color-muted);font-size:var(--text-md);font-weight:var(--w-medium)}
.board:fullscreen{justify-content:center;border-radius:0}
.board:fullscreen .digits{font-size:min(26vw,48vh)}
.board:fullscreen .dhms .digits{font-size:min(16vw,30vh)}
.fam-clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--space-md)}
.fam-clocks .board{margin-bottom:0}
.fam-clocks .digits{font-size:min(6rem,15.5cqi)}
.notice{color:var(--color-muted);font-size:var(--text-sm);max-width:72ch}
.tool .notice{margin-bottom:var(--space-md)}

/* clock */
.clock-board{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:var(--space-xl)}
.analog{width:clamp(160px,30vw,260px);height:auto}
.analog .face{fill:var(--color-paper-2);stroke:var(--color-rule-2);stroke-width:2}
.analog .ticks line{stroke:var(--color-ink-2);stroke-linecap:round}
.analog .hand{stroke-linecap:round}
.analog .hand.h{stroke:var(--color-ink);stroke-width:6}
.analog .hand.m{stroke:var(--color-ink);stroke-width:4}
.analog .hand.s{stroke:var(--color-accent);stroke-width:2}
.analog .pin{fill:var(--color-accent)}
.clock-digital{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);container-type:inline-size;flex:1 1 20rem;min-width:0}
.clock-digital .digits{font-size:min(8.5rem,15.5cqi)}
.no-seconds .hand.s{display:none}

/* controls and panels ----------------------------------------------------- */
.controls{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin:0 0 var(--space-md)}
.wrap-row{gap:var(--space-lg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:var(--control);padding:0 var(--space-lg);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-control);background:var(--color-paper-3);color:var(--color-ink);font-size:var(--text-sm);font-weight:var(--w-strong);line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;touch-action:manipulation;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.btn:hover{border-color:var(--color-muted);background:var(--color-rule);color:var(--color-ink)}
.btn:active{background:var(--color-paper-2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.btn.primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-accent-ink)}
.btn.primary:active{background:var(--color-accent-press);border-color:var(--color-accent-press)}
.btn.danger{background:var(--color-bad);border-color:var(--color-bad);color:var(--color-bad-ink)}
.btn.ghost{background:transparent}
.btn.big{min-height:var(--control-l);min-width:9.5rem;font-size:var(--text-md);padding:0 var(--space-xl)}
.btn.small{min-height:var(--control-s);padding:0 var(--space-md)}
.btn-row{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-items:center}
.panel-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-lg);align-items:stretch;margin-bottom:var(--space-md)}
.panel{margin-bottom:var(--space-md);padding:var(--space-lg);color:var(--color-ink-2);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.panel-grid .panel{margin-bottom:0}
.panel-title{margin:0 0 var(--space-md);color:var(--color-ink);font-size:var(--text-title);font-weight:var(--w-strong);line-height:1.25;letter-spacing:-.01em}
.panel-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-sm)}
.panel-row .panel-title{margin:0}
.field{display:flex;flex-direction:column;gap:var(--space-xs);flex:1 1 11rem;min-width:0;margin-bottom:var(--space-md)}
.field>span,.hms span,.time-pick span,.row-set>span{font-size:var(--text-sm);font-weight:var(--w-medium);color:var(--color-muted)}
.field-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:flex-end}
.field-row>.btn{margin-bottom:var(--space-md)}
input,select,textarea{min-height:var(--control);width:100%;min-width:0;padding:0 var(--space-sm);border:var(--rule-hair) solid var(--color-field-edge);border-radius:var(--radius-control);background:var(--color-field);color:var(--color-ink);font-size:var(--text-md);color-scheme:dark}
input:hover,select:hover{border-color:var(--color-muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:0;border-color:var(--color-focus)}
input:disabled,select:disabled{opacity:.55;cursor:not-allowed}
input::placeholder{color:var(--color-muted)}
input[type=checkbox]{width:20px;height:20px;min-height:0;margin:var(--space-3xs) 0 0;padding:0;flex:none;accent-color:var(--color-accent)}
input[type=range]{min-height:32px;padding:0;border:0;background:none;accent-color:var(--color-accent)}
.row-check{display:flex;gap:var(--space-sm);align-items:flex-start;margin:var(--space-xs) 0;cursor:pointer}
.row-check small{display:block;color:var(--color-muted);font-size:var(--text-sm)}
.time-pick{display:flex;align-items:flex-end;gap:var(--space-xs);margin-bottom:var(--space-md)}
.time-pick label{display:flex;flex-direction:column;gap:var(--space-xs);flex:1}
.time-pick select{min-height:var(--control-l);font-size:var(--text-xl);font-weight:var(--w-strong);font-variant-numeric:tabular-nums}
.time-pick .colon{padding-bottom:var(--space-sm);color:var(--color-muted);font-size:var(--text-xl);font-weight:var(--w-strong);line-height:1}
.hms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs);margin-bottom:var(--space-md)}
.hms.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:30rem){.hms.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hms label{display:flex;flex-direction:column;gap:var(--space-xs)}
.hms input{min-height:var(--control-l);font-size:var(--text-xl);font-weight:var(--w-strong);text-align:center;font-variant-numeric:tabular-nums}
.iv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--space-sm)}
@media (max-width:40rem){.iv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-md)}
.chips-label{margin:var(--space-sm) 0 var(--space-xs);color:var(--color-muted);font-size:var(--text-sm);font-weight:var(--w-medium)}
.chip{min-height:var(--control-s);padding:0 var(--space-sm);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-2);font-size:var(--text-sm);font-weight:var(--w-medium);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.chip:hover{background:var(--color-paper-3);border-color:var(--color-muted);color:var(--color-ink)}
.chip:active,.chip[aria-pressed="true"]{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-ink)}
.item-list{list-style:none;margin:0;padding:0}
.item-list:empty::before{content:attr(data-empty);display:block;padding:var(--space-md);border:var(--rule-hair) dashed var(--color-rule-2);border-radius:var(--radius-control);color:var(--color-muted);text-align:center}
.item-list li{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.item-list li:first-child{padding-top:0}
.item-list li:last-child{border-bottom:0}
.item-list .it-main{flex:1;min-width:0}
.item-list .it-time{display:block;color:var(--color-accent);font-size:var(--text-2xl);font-weight:var(--w-strong);line-height:1.1;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] .item-list .it-time{text-align:right}
.item-list .it-sub{display:block;color:var(--color-muted);font-size:var(--text-sm);white-space:pre-line}
.item-list button.link{width:100%;padding:0;border:0;background:none;color:inherit;text-align:start;cursor:pointer}
.table-wrap{overflow-x:auto;max-width:100%;margin:var(--space-lg) 0;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.table-wrap table,.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.table-wrap table{min-width:26rem}
.table-wrap caption{font-variant-numeric:tabular-nums;caption-side:bottom;text-align:start;padding:var(--space-sm) var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}
.table-wrap th,.table-wrap td,.data-table th,.data-table td{padding:var(--space-sm) var(--space-md);text-align:start;vertical-align:baseline;border-top:var(--rule-hair) solid var(--color-rule)}
.table-wrap thead th,.data-table thead th{border-top:0;background:var(--color-paper-3);color:var(--color-muted);font-weight:var(--w-medium);white-space:nowrap}
.table-wrap tbody tr:first-child>*{border-top:0}
.table-wrap thead+tbody tr:first-child>*{border-top:var(--rule-hair) solid var(--color-rule)}
.table-wrap tbody th{color:var(--color-ink);font-weight:var(--w-medium);background:var(--color-paper-2)}
.table-wrap td{color:var(--color-ink-2);font-variant-numeric:tabular-nums}
.table-wrap tbody tr:hover>*{background:var(--color-paper-3)}
.data-table.num td{font-variant-numeric:tabular-nums}
.data-table tr.best td{color:var(--color-ok);font-weight:var(--w-strong)}
.data-table tr.worst td{color:var(--color-bad);font-weight:var(--w-strong)}
.data-table tr.current td{background:var(--color-accent-soft)}
.panel .table-wrap{margin:0;border:0;border-radius:0;background:none}
@media (max-width:40rem){.table-wrap tbody th{position:sticky;inset-inline-start:0;z-index:var(--z-base);min-width:9rem}}
.tabs{display:flex;gap:var(--space-2xs);margin-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule);overflow-x:auto}
.tabs button{margin-bottom:-1px;padding:var(--space-sm) var(--space-md);border:0;border-bottom:2px solid transparent;background:none;color:var(--color-muted);font-size:var(--text-md);font-weight:var(--w-medium);white-space:nowrap;cursor:pointer}
.tabs button:hover{color:var(--color-ink)}
.tabs button[aria-selected="true"]{color:var(--color-ink);border-color:var(--color-accent)}
.result{margin-top:var(--space-2xs);min-height:1.4em;color:var(--color-ink);font-size:var(--text-lg);font-weight:var(--w-medium);line-height:1.4;white-space:pre-line}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--space-xs);margin-top:var(--space-xs)}
.result-grid:empty{display:none}
.stat{padding:var(--space-sm) var(--space-md);background:var(--color-paper-3);border-radius:var(--radius-control)}
.stat b{display:block;color:var(--color-ink);font-size:var(--text-2xl);line-height:1.15;font-variant-numeric:tabular-nums}
.stat span,.table-wrap caption{font-variant-numeric:tabular-nums}
.stat span{color:var(--color-muted);font-size:var(--text-sm);white-space:pre-line;font-variant-numeric:tabular-nums}
.stat.hero{grid-column:1/-1;color:var(--color-ink-2);background:var(--color-clock-bg);border:var(--rule-hair) solid var(--color-rule)}
.stat.hero b{color:var(--color-accent);font-size:var(--text-figure-s);font-variant-numeric:tabular-nums}
.stat.hero span{color:var(--color-ink-2)}
.sum-rows{list-style:none;margin:0 0 var(--space-sm);padding:0}
.sum-rows li{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 40px;gap:var(--space-xs);margin-bottom:var(--space-xs)}
.sum-rows input{text-align:center}
.add-row{display:flex;gap:var(--space-xs);flex:1 1 18rem;max-width:26rem}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--space-sm);margin:0 0 var(--space-sm);padding:0;list-style:none}
.city-grid li{position:relative;padding:var(--space-md);background:var(--color-paper-3);border-radius:var(--radius-control)}
.city-grid .c-name{display:block;padding-inline-end:var(--space-xl);color:var(--color-ink);font-weight:var(--w-medium)}
.city-grid .c-time{display:block;color:var(--color-accent);font-size:clamp(2.25rem,1.25rem + 2vw,3rem);font-weight:var(--w-strong);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.city-grid .c-sub{display:block;color:var(--color-muted);font-size:var(--text-sm);white-space:pre-line}
.city-grid li.night{background:var(--color-clock-bg)}
.city-grid li.night .c-time{color:var(--color-ink-2)}
.city-grid .rm{position:absolute;top:var(--space-2xs);inset-inline-end:var(--space-2xs);width:var(--control-s);height:var(--control-s)}
.tz-rows{list-style:none;margin:0 0 var(--space-sm);padding:0}
.tz-rows li{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.tz-rows .z-name{flex:1;min-width:0;color:var(--color-ink)}
.tz-rows .z-name small{display:block;color:var(--color-muted)}
.tz-rows .z-time{color:var(--color-accent);font-size:var(--text-2xl);font-weight:var(--w-strong);line-height:1;font-variant-numeric:tabular-nums;text-align:end}
.tz-rows .z-time small{display:block;color:var(--color-muted);font-size:var(--text-sm);font-weight:400;line-height:1.4}

/* the alarm home: the clock as big as before, the whole form above the fold at 1280 x 800 */
@media (min-width:64rem){
  .page-alarm .tool-head{gap:var(--space-2xs);padding:var(--space-sm) 0 var(--space-md)}
  .page-alarm .board{gap:var(--space-2xs);padding:var(--space-sm) var(--space-xl)}
  .page-alarm .panel{padding:var(--space-md) var(--space-lg)}
  .page-alarm .panel-title{margin-bottom:var(--space-sm)}
  .page-alarm .board .digits{font-size:min(9rem,15.5cqi)}
  .page-alarm .panel-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  #alarm-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title" "time sound" "chips chips" "label set";column-gap:var(--space-lg);align-items:end}
  #alarm-form .panel-title{grid-area:title}
  #alarm-form .time-pick{grid-area:time}
  #alarm-form .chips{grid-area:chips;flex-wrap:nowrap}
  #alarm-form .field-row{grid-area:sound;flex-wrap:nowrap}
  #alarm-form .field-row .field{flex:1 1 0}
  #alarm-form .field-row>.btn{padding:0 var(--space-md)}
  #alarm-form>.field{grid-area:label}
  #alarm-form .btn.primary{grid-area:set;margin-bottom:var(--space-md)}
  #alarm-form .chip{flex:1 1 0;padding:0 var(--space-2xs);font-size:.8125rem;letter-spacing:-.01em}
}
#alarm-form .btn.primary{width:100%}

/* ringing overlay, settings dialog ------------------------------------- */
.ringer{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--gutter);background:var(--color-scrim)}
.ringer-box{display:grid;gap:var(--space-md);justify-items:center;width:100%;max-width:34rem;padding:var(--space-xl) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-bad);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);color:var(--color-ink);text-align:center}
.ringer-box .digits{color:var(--color-bad);font-size:clamp(3.5rem,18vw,7rem);animation:blink 1s steps(2) infinite}
.ringer-box p{font-size:var(--text-xl);font-weight:var(--w-strong);line-height:1.3}
.ringer-box .sound-hint{color:var(--color-accent);font-size:var(--text-md);font-weight:var(--w-medium)}
.ringer-box .controls{margin:0}
.modal{width:min(28rem,calc(100% - 2 * var(--space-md)));padding:0;border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-card);background:var(--color-paper-2);color:var(--color-ink-2);box-shadow:var(--shadow-pop)}
.modal::backdrop{background:var(--color-scrim)}
.modal-box{padding:var(--space-lg)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xs)}
.modal-title{color:var(--color-ink);font-size:var(--text-xl);font-weight:var(--w-strong)}
.row-set{display:flex;flex-direction:column;gap:var(--space-xs);margin:var(--space-sm) 0}
.row-set>span{display:flex;justify-content:space-between}
.modal-foot{display:flex;justify-content:flex-end;margin-top:var(--space-md)}

/* content ------------------------------------------------------------------ */
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-xl) var(--gap-columns);padding-top:var(--space-xl);padding-bottom:var(--space-2xl);align-items:start}
.prose{min-width:0}
.content-grid:not(:has(>.related)){grid-template-columns:minmax(0,1fr)}

.prose>*+*{margin-top:var(--space-md)}
.prose h2{margin-top:var(--space-2xl);font-size:var(--text-section);line-height:1.2}
.prose>h2:first-child{margin-top:0}
.prose h3{margin-top:var(--space-xl);font-size:var(--text-title);line-height:1.3;letter-spacing:-.01em}
.prose h2+*,.prose h3+*{margin-top:var(--space-sm)}
.prose p,.prose li{font-size:1.0625rem;line-height:1.75}
:lang(ar) .prose p,:lang(ar) .prose li,:lang(ar) .lead{max-width:50ch}
.prose ol,.prose ul{padding-inline-start:var(--space-lg)}
.prose li+li{margin-top:var(--space-2xs)}
.prose li::marker{color:var(--color-muted)}
.prose .lead{color:var(--color-ink);font-size:var(--text-lead)}
.prose-fig{margin:var(--space-lg) 0 0;max-width:100%}
.prose-fig img{display:block;width:100%;height:auto;background:var(--color-figure-bg);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.prose-fig figcaption{margin-top:var(--space-xs);color:var(--color-muted);font-size:var(--text-sm);line-height:1.5}
.note{padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);color:var(--color-ink-2)}
p.note{background:none;border:0;padding:0;color:var(--color-muted);font-size:var(--text-sm)}
.faq{border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2)}
.faq details+details{border-top:var(--rule-hair) solid var(--color-rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-lg);cursor:pointer;list-style:none;transition:background-color var(--dur-micro) var(--ease-out)}
.faq summary:hover{background:var(--color-paper-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-inline-end:2px solid var(--color-muted);border-bottom:2px solid var(--color-muted);transform:rotate(45deg);transition:transform var(--dur-short) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary h3{margin:0;font-size:var(--text-md);line-height:1.4;letter-spacing:0}
.faq details>p{padding:0 var(--space-lg) var(--space-lg)}
.faq details:not([open])>p{display:none}
.updated{margin-top:var(--space-xl);color:var(--color-muted);font-size:var(--text-sm)}
.prose pre{max-width:100%;overflow-x:auto;padding:var(--space-md);background:var(--color-field);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-control);font-size:var(--text-sm);line-height:1.5}
.prose pre code{white-space:pre;background:none;padding:0}
.quick-answer{padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.quick-answer h2{margin:0 0 var(--space-xs);font-size:var(--text-title)}
.quick-answer .qa-asof{color:var(--color-muted);font-size:var(--text-xs);font-weight:var(--w-medium)}
.quick-answer ul{margin:0;padding-inline-start:var(--space-lg)}
.editorial{margin-top:var(--space-2xl);padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);color:var(--color-muted);font-size:var(--text-sm)}
.editorial .ed-meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg)}
.editorial .ed-meta a{color:inherit;font-weight:var(--w-medium)}
.editorial .ed-note{margin-top:var(--space-xs)}
.editorial .nav-title{margin:var(--space-sm) 0 var(--space-2xs);color:var(--color-ink-2);font-weight:var(--w-medium)}
.editorial .ed-src{margin:0;padding-inline-start:var(--space-lg)}
.editorial .ed-src li+li{margin-top:var(--space-2xs)}
.editorial a{color:var(--color-ink-2)}
.related{display:grid;gap:var(--space-sm);align-self:start}
.related.is-pinned{position:sticky;top:calc(var(--bar-h) + var(--space-lg))}
.related .toc a{display:block;padding:var(--space-xs) var(--space-md);color:var(--color-ink-2);font-size:var(--text-sm)}
.related .toc a:hover{color:var(--color-ink)}
.post .post-head{padding-top:0}
.post .post-head h1{max-width:none}
.content-grid:has(>.post){padding-top:var(--space-md)}
.content-grid:not(:has(>.related)) .post-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr))}
.related .nav-title{margin:0;color:var(--color-muted);font-size:var(--text-sm);font-weight:var(--w-medium)}
.related ul{margin:0 0 var(--space-md);padding:0;list-style:none;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.related li+li{border-top:var(--rule-hair) solid var(--color-rule)}
.related a{display:grid;gap:var(--space-3xs);padding:var(--space-sm) var(--space-md);color:var(--color-ink);text-decoration:none;transition:background-color var(--dur-micro) var(--ease-out)}
.related a:hover{background:var(--color-paper-3)}
.related a strong{font-size:var(--text-sm)}
.related a span{color:var(--color-muted);font-size:var(--text-sm)}
.pill-list{display:flex;flex-wrap:wrap;gap:var(--space-xs);padding:0;list-style:none}
.prose .pill-list li+li{margin-top:0}
.pill-list a,.pill{display:inline-flex;align-items:center;min-height:var(--control-s);padding:0 var(--space-md);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-pill);color:var(--color-ink-2);font-size:var(--text-sm);text-decoration:none}
.pill-list a:hover,.pill:hover{background:var(--color-paper-3);color:var(--color-ink)}
.fam-you{display:grid;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.fam-you h2{margin-top:0;font-size:var(--text-title)}
.fam-you p{color:var(--color-ink)}

/* guides ------------------------------------------------------------------- */
.prose .post-list{display:grid;gap:var(--space-sm);margin:0 0 var(--space-xl);padding:0;list-style:none}
.prose .post-list li+li{margin-top:0}
.post-card{display:block;padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card);color:var(--color-ink-2);text-decoration:none;transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
.post-card:hover{border-color:var(--color-rule-2);background:var(--color-paper-3);color:var(--color-ink-2)}
.post-card strong{display:block;margin:var(--space-2xs) 0 var(--space-xs);color:var(--color-ink);font-size:var(--text-title);line-height:1.3}
.post-meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);color:var(--color-muted);font-size:var(--text-sm)}
.post-excerpt{display:block;color:var(--color-muted);font-size:var(--text-sm);line-height:1.55}
.post-head .post-meta{margin-bottom:var(--space-xs)}
.post-hero{color:var(--color-ink-2);display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;margin:var(--space-xs) 0 var(--space-md);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}
.post-card.has-img{display:grid;grid-template-columns:minmax(6rem,10rem) minmax(0,1fr);gap:var(--space-md);align-items:start}
.post-thumb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--color-paper-3);border-radius:var(--radius-control)}
.post-card-body{display:block;min-width:0}
@media (max-width:30rem){.post-card.has-img{grid-template-columns:6rem minmax(0,1fr);gap:var(--space-sm)}}
.related ul+.nav-title{margin-top:var(--space-md)}
.pager{margin:var(--space-xs) 0 var(--space-xl)}
.pager ul{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center;justify-content:center;margin:0;padding:0;list-style:none}
.prose .pager li+li{margin-top:0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--control);min-height:var(--control);padding:0 var(--space-sm);border-radius:var(--radius-control);font-weight:var(--w-medium);text-decoration:none}
.pager a{background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);color:var(--color-ink)}
.pager a:hover{border-color:var(--color-muted)}
.pager a[aria-current="page"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.pager span[aria-disabled]{color:var(--color-muted);opacity:.6}
.pager .pager-gap{min-width:24px;padding:0;color:var(--color-muted)}

/* pomodoro --------------------------------------------------------------- */
.pm-foot{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-keys{margin:0 0 var(--space-md)}
.pm-today .stat.hero{margin-bottom:var(--space-md)}
.pm-task{margin-bottom:var(--space-sm)}
.pm-log{height:12.5rem;margin:0 0 var(--space-sm);padding:0;overflow-y:auto;list-style:none;border-top:var(--rule-hair) solid var(--color-rule)}
.pm-log:empty::before{content:attr(data-empty);display:block;padding:var(--space-sm) 0;color:var(--color-muted)}
.pm-log li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-sm);align-items:baseline;padding:var(--space-xs) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.pm-log-time,.pm-log-min{color:var(--color-muted);font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.pm-log-task{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* lunar calendar (tool and the Vietnamese month pages) --------------------- */
.lc-board .lc-digits small{font-size:.5em;color:var(--color-ink-2)}
.lc-bar{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg);align-items:flex-end}
.lc-bar .field{flex:0 1 16rem;margin-bottom:0}
.lc-bar .hint{flex:1 1 18rem;margin:0 0 var(--space-xs)}
.lc-head{display:grid;grid-template-columns:var(--control) 1fr var(--control);align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm)}
.lc-head .panel-title{margin:0;text-align:center;text-transform:capitalize}
.lc-head .btn{min-width:var(--control);padding:0;font-size:var(--text-xl)}
.lc-pick{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:var(--space-sm);align-items:end;margin-bottom:var(--space-sm)}
.lc-pick .field{margin:0}
.lc-pick select{text-transform:capitalize}
.lc-grid-wrap{overflow:hidden}
.lc-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px}
.lc-grid th{padding:var(--space-3xs) 0 var(--space-xs);color:var(--color-muted);font-size:var(--text-xs);font-weight:var(--w-medium);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-grid td{height:52px;padding:0}
.lc-grid button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3xs);width:100%;height:100%;padding:0;border:var(--rule-hair) solid transparent;border-radius:var(--radius-control);background:var(--color-paper-3);color:var(--color-ink);cursor:pointer;font:inherit}
.lc-grid button:hover{border-color:var(--color-rule-2)}
.lc-grid b{font-size:var(--text-xl);line-height:1;font-variant-numeric:tabular-nums}
.lc-grid i{font-style:normal;font-size:var(--text-xs);line-height:1;color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lc-grid .we b{color:var(--color-bad)}
.lc-grid .l1 i,.lc-grid .l15 i{color:var(--color-ink);font-weight:var(--w-strong)}
.lc-grid .l1 button{background:var(--color-accent-soft)}
.lc-grid .l15 button{background:var(--color-cool-soft)}
.lc-grid .fest button::after,.lc-grid .term button::before{content:"";position:absolute;top:5px;width:6px;height:6px;border-radius:50%}
.lc-grid .fest button::after{inset-inline-end:5px;background:var(--color-bad)}
.lc-grid .term button::before{inset-inline-start:5px;background:var(--color-ok)}
.lc-grid .today button{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}
.lc-grid button[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.lc-grid button[aria-pressed="true"] i,.lc-grid button[aria-pressed="true"] b{color:var(--color-accent-ink)}
@media (min-width:56rem){.lc-grid b{font-size:var(--text-2xl)}.lc-grid i{font-size:var(--text-sm)}}
.lc-legend{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);margin:var(--space-sm) 0 0;padding:0;list-style:none;color:var(--color-muted);font-size:var(--text-sm)}
.lc-legend li{display:inline-flex;align-items:center;gap:var(--space-xs)}
.lc-legend li::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--color-paper-3)}
.lc-legend .l1::before{background:var(--color-accent-soft)}
.lc-legend .l15::before{background:var(--color-cool-soft)}
.lc-legend .fest::before{width:8px;height:8px;border-radius:50%;background:var(--color-bad)}
.lc-legend .term::before{width:8px;height:8px;border-radius:50%;background:var(--color-ok)}
.lc-legend .today::before{background:none;box-shadow:inset 0 0 0 2px var(--color-accent)}
.lc-detail .panel-title{min-height:2.4em;margin-bottom:var(--space-xs)}
.lc-dl{margin:0}
.lc-dl div{display:grid;grid-template-columns:minmax(90px,38%) 1fr;gap:var(--space-sm);padding:var(--space-xs) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.lc-dl div:last-child{border-bottom:0}
.lc-dl dt{color:var(--color-muted);font-size:var(--text-sm)}
.lc-dl dd{margin:0;min-height:1.5em;color:var(--color-ink);font-weight:var(--w-medium)}
.lc-list{margin:0;padding:0;list-style:none}
.lc-list li{display:grid;grid-template-columns:5.5em 1fr;gap:var(--space-sm);padding:var(--space-xs) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.lc-list li:last-child{border-bottom:0}
.lc-list time{color:var(--color-muted);font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.lc-list .fest span{color:var(--color-bad);font-weight:var(--w-medium)}
.lc-list .term span::before,.lc-list .moon span::before{display:inline-block;width:8px;height:8px;margin-inline-end:6px;border-radius:50%;content:"";vertical-align:middle}
.lc-list .term span::before{background:var(--color-ok)}
.lc-list .moon span::before{background:var(--color-accent)}
.lc-result{min-height:2.8em;white-space:pre-line}
.lc-l2s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-sm)}
.lc-terms tr.major th,.lc-terms tr.major td{font-weight:var(--w-strong)}
.lm-months,.lm-years{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:var(--space-xs) var(--space-sm);padding:0!important;list-style:none}
.prose .lm-months li+li,.prose .lm-years li+li{margin-top:0}
.lm-months span[aria-current]{color:var(--color-accent);font-weight:var(--w-strong)}
.lm-months li,.lm-years li{margin:0;text-transform:capitalize}
@media (max-width:30rem){.lc-pick{grid-template-columns:1fr 1fr}.lc-pick .btn{grid-column:1/-1}.lc-grid{border-spacing:2px}.lc-grid td{height:52px}.lc-grid b{font-size:var(--text-lg)}.lc-grid i{font-size:.6875rem}}

/* footer ------------------------------------------------------------------- */
.site-foot{margin-top:var(--space-xl);padding:var(--space-2xl) 0 var(--space-xl);background:var(--color-foot);border-top:var(--rule-hair) solid var(--color-rule)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:var(--space-xl) var(--space-lg)}
.foot-brand .brand{font-size:var(--text-xl)}
.foot-brand p{max-width:34ch;margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-sm)}
.foot-grid>nav{display:grid;align-content:start;gap:var(--space-sm)}
.site-foot .nav-title{margin:0;color:var(--color-ink);font-size:var(--text-sm);font-weight:var(--w-strong)}
.site-foot ul{display:grid;gap:var(--space-xs);margin:0;padding:0;list-style:none;font-size:var(--text-sm)}
.site-foot a{color:var(--color-ink-2);text-decoration:none}
.site-foot a:hover{color:var(--color-ink);text-decoration:underline}
.foot-social{margin-top:var(--space-md)!important}
.site-foot .foot-social a{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:var(--control-s);padding:0 var(--space-md);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-pill)}
.foot-langs{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-lg);margin-top:var(--space-xl);padding-top:var(--space-lg)}
.foot-langs::before{content:"";position:absolute;top:0;inset-inline:var(--gutter);border-top:var(--rule-hair) solid var(--color-rule)}
.copy{color:var(--color-muted);font-size:var(--text-sm)}
@media (max-width:60rem){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:40rem){
  .foot-grid{gap:var(--space-lg) var(--space-md)}
  .site-foot ul{gap:0}
  .site-foot ul a{display:inline-flex;align-items:center;min-height:var(--control)}
}

/* sound bar, language hint, 404 ------------------------------------------- */
.sound-unlock{position:fixed;inset:auto 0 0 0;z-index:var(--z-toast);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--gutter);background:var(--color-paper-3);border-top:var(--rule-hair) solid var(--color-accent);color:var(--color-ink);font-size:var(--text-sm)}
.sound-unlock .btn{flex:none}
.lang-hint{position:fixed;inset-inline-end:var(--space-md);bottom:var(--space-md);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);color:var(--color-ink-2)}
.lang-hint a{color:var(--color-accent);font-weight:var(--w-strong);text-decoration:none}
.lang-hint.inline{position:static;margin:var(--space-md);justify-content:space-between;box-shadow:none}
.notfound{display:grid;justify-items:center;gap:var(--space-md);padding:var(--space-3xl) var(--gutter);text-align:center}
.big-digits{color:var(--color-clock);font-size:min(9rem,30vw);font-weight:var(--w-strong);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.notfound .pill-list{justify-content:center}

@media (max-width:64rem){
  .content-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .related{position:static}
  .panel-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:40rem){
  .page-head{padding-top:var(--space-md)}
  .page-alarm .page-head{gap:var(--space-2xs);padding:var(--space-sm) 0 var(--space-sm)}
  .page-alarm .lead{font-size:var(--text-sm);line-height:1.5}
  .page-alarm .board{gap:0;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm)}
  .page-alarm .board-label{font-size:var(--text-sm)}
  .page-alarm .panel{padding:var(--space-md)}
  .page-alarm .panel-title{margin-bottom:var(--space-sm);font-size:var(--text-md)}
  .page-alarm .field,.page-alarm .time-pick,.page-alarm .chips{margin-bottom:var(--space-sm)}
  .page-alarm .field-row>.btn{margin-bottom:var(--space-sm)}
  .page-alarm .time-pick select{min-height:var(--control)}
  .board{padding:var(--space-md)}
  .panel{padding:var(--space-md)}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.site-head,.site-search,.site-foot,.tool,.related{display:none}}

/* cookie notice (notice only, no consent gating): bottom banner on phones, small floating card on wider screens */
.cookie-bar{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border-top:var(--rule-hair) solid var(--color-rule);box-shadow:var(--shadow-card);color:var(--color-ink-2);font-size:var(--text-sm)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0}
.cookie-actions{display:flex;align-items:center;gap:var(--space-md)}
.cookie-actions a{color:var(--color-accent);font-weight:var(--w-medium)}
@media (min-width:48rem){.cookie-bar{inset-inline:auto;inset-inline-start:var(--space-md);bottom:var(--space-md);max-width:22rem;border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-card)}}