:root{
    --ink:        #0e1420;
    --panel:      #161d2a;
    --ivory:      #ece6d8;
    --dim:        #737d8c;
    --dimmer:     #4a525f;
    --brass:      #c8a15a;
    --brass-lit:  #e6c079;
    --hairline:   #232c3a;
    --soft:       #9aa2ae;
  }
 
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
 
  body{
    background:var(--ink);
    color:var(--ivory);
    font-family:"Cormorant Garamond", Georgia, serif;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-direction:column;
    min-height:100vh;
    padding:clamp(1.5rem, 5vw, 5rem);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
 
  main{ width:100%; max-width:62ch; margin:auto 0; }
 
  /* the "now" line */
  .now{
    font-size:clamp(1.15rem, 3.4vw, 1.85rem);
    font-weight:400;
    line-height:1.5;
    color:var(--dim);
    letter-spacing:0.01em;
    margin-bottom:clamp(2.4rem, 7vw, 4.2rem);
    padding-bottom:clamp(2.4rem, 7vw, 4.2rem);
    border-bottom:1px solid var(--hairline);
    white-space:nowrap;
  }
  .clock{
    font-family:"JetBrains Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-weight:500;
    font-size:0.92em;
    color:var(--ivory);
    letter-spacing:-0.01em;
  }
  .date{ color:var(--ivory); font-weight:600; }
 
  /* the remaining statement */
  .lead{
    font-size:clamp(1.25rem, 3.8vw, 2.1rem);
    font-weight:400;
    color:var(--dim);
    line-height:1;
    margin-bottom:0.35em;
  }
 
  .count-line{ display:flex; align-items:flex-end; }
 
  .count{
    font-family:"JetBrains Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-weight:700;
    font-size:clamp(4.6rem, 20vw, 11rem);
    line-height:0.9;
    color:var(--ivory);
    letter-spacing:-0.03em;
    margin-bottom:0.12em;
    white-space:nowrap;
    flex:0 1 auto;
    min-width:0;
  }
  .count.grouped{ margin-bottom:0.4em; }
  .count.prompt{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size:clamp(1.6rem, 6vw, 2.7rem);
    letter-spacing:0;
    color:var(--brass);
    cursor:pointer;
    margin-bottom:0.15em;
  }
  .count.prompt:hover,
  .count.prompt:focus-visible{ color:var(--brass-lit); outline:none; }
 
  .info{
    flex:0 0 auto;
    margin-left:0.55rem;
    margin-bottom:0.55em;
    width:1.55rem;
    height:1.55rem;
    border:1px solid var(--brass);
    border-radius:50%;
    color:var(--brass);
    background:none;
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-weight:500;
    font-size:1.05rem;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease;
  }
  .info:hover,
  .info:focus-visible{ color:var(--brass-lit); border-color:var(--brass-lit); outline:none; }
  .info:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:3px; }
 
  .tail{
    font-size:clamp(1.4rem, 4.6vw, 2.6rem);
    font-weight:400;
    line-height:1.25;
    color:var(--ivory);
    margin-top:0.15em;
  }
 
  .dial{
    font-family:inherit; font-size:inherit; line-height:inherit;
    color:var(--brass);
    background:none; border:none;
    padding:0 0.04em;
    cursor:pointer;
    border-bottom:2px dotted var(--brass);
    transition:color .18s ease, border-color .18s ease;
    font-weight:500;
  }
  .dial:hover,
  .dial:focus-visible{ color:var(--brass-lit); border-bottom-color:var(--brass-lit); outline:none; }
  .dial:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:4px; border-radius:1px; }
  .dial:active{ transform:translateY(1px); }
 
  .hint{
    margin-top:clamp(0.8rem, 2.5vw, 1.1rem);
    font-family:"JetBrains Mono", monospace;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--dimmer);
  }
 
  /* quote */
  .quote{
    margin-top:clamp(2.2rem, 6vw, 3.6rem);
    padding-top:clamp(2.2rem, 6vw, 3.6rem);
    border-top:1px solid var(--hairline);
    max-width:54ch;
    cursor:pointer;
  }
  .quote-text{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:clamp(1.15rem, 3.4vw, 1.7rem);
    line-height:1.4;
    color:var(--soft);
    transition:color .18s ease;
    margin:0;
  }
  .quote:hover .quote-text,
  .quote:focus-visible .quote-text{ color:var(--ivory); }
  .quote:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:6px; border-radius:2px; }
  .quote-by{
    font-family:"JetBrains Mono", monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0.7rem 0 0;
  }
 
  /* progress / remaining percentage */
  .progress-row{
    display:flex;
    align-items:flex-start;
    margin-top:clamp(1.6rem, 4.5vw, 2.6rem);
    padding-top:clamp(1.6rem, 4.5vw, 2.6rem);
    border-top:1px solid var(--hairline);
  }
  .progress-main{ flex:1 1 auto; min-width:0; }
  .meter{
    margin-top:0.75rem;
    height:6px;
    background:var(--hairline);
    border-radius:2px;
    overflow:hidden;
  }
  .meter-fill{
    height:100%;
    width:0%;
    background:var(--brass);
    border-radius:2px;
    transition:width .6s cubic-bezier(.4,.8,.3,1);
  }
  @media (prefers-reduced-motion: reduce){
    .meter-fill{ transition:none; }
  }
  .progress{
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(1.1rem, 3.2vw, 1.6rem);
    line-height:1.3;
    color:var(--dim);
    margin:0;
  }
  .pct{
    font-family:"JetBrains Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-weight:500;
    color:var(--ivory);
  }
  .pct-sign{
    font-family:"JetBrains Mono", monospace;
    font-weight:700;
    color:var(--ivory);
  }
  .switch{
    position:relative;
    margin-top:7%;
    flex:0 0 auto;
    margin-left:0.85rem;
    width:2rem; height:2rem;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--hairline);
    border-radius:2px;
    color:var(--brass);
    background:none;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease;
  }
  .switch svg{ width:1.05rem; height:1.05rem; display:block; }
  .switch:hover,
  .switch:focus-visible{ color:var(--brass-lit); border-color:var(--brass); outline:none; }
  .switch:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:2px; }
 
  /* dialog */
  .backdrop{
    position:fixed; inset:0;
    background:rgba(6,10,16,0.72);
    display:none;
    align-items:center;
    justify-content:center;
    padding:1.25rem;
    z-index:10;
  }
  .backdrop.open{ display:flex; }
 
  .dialog{
    width:100%;
    max-width:26rem;
    max-height:90vh;
    overflow-y:auto;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:3px;
    padding:clamp(1.5rem, 5vw, 2.25rem);
    color:var(--ivory);
  }
  .dialog h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size:1.9rem;
    line-height:1.1;
    margin-bottom:0.35rem;
  }
  .dialog .sub{
    font-family:"Cormorant Garamond", serif;
    font-size:1.05rem;
    color:var(--dim);
    line-height:1.4;
    margin-bottom:1.5rem;
  }
  .field{ margin-bottom:1.2rem; }
  .field > label{
    display:block;
    font-family:"JetBrains Mono", monospace;
    font-size:0.66rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--dim);
    margin-bottom:0.5rem;
  }
  .dialog input[type="date"],
  .dialog input[type="number"],
  .dialog select{
    width:100%;
    background:var(--ink);
    border:1px solid var(--hairline);
    border-radius:2px;
    color:var(--ivory);
    font-family:"JetBrains Mono", monospace;
    font-size:0.95rem;
    padding:0.6rem 0.7rem;
    appearance:none;
  }
  .dialog input:focus,
  .dialog select:focus{ outline:none; border-color:var(--brass); }
  .dialog input[type="date"]{ color-scheme:dark; }
 
  .segmented{ display:flex; gap:0.4rem; }
  .segmented button{
    flex:1;
    background:var(--ink);
    border:1px solid var(--hairline);
    border-radius:2px;
    color:var(--dim);
    font-family:"JetBrains Mono", monospace;
    font-size:0.8rem;
    padding:0.55rem 0.3rem;
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .segmented button:hover{ color:var(--ivory); }
  .segmented button[aria-pressed="true"]{
    color:var(--ink);
    background:var(--brass);
    border-color:var(--brass);
  }
  .helper{
    font-family:"Cormorant Garamond", serif;
    font-size:0.95rem;
    color:var(--dim);
    margin-top:0.45rem;
    line-height:1.35;
  }
  .subhead{
    font-family:"Cormorant Garamond", serif;
    font-weight:500;
    font-size:1.25rem;
    color:var(--ivory);
    margin:0.2rem 0 1rem;
    padding-top:1.1rem;
    border-top:1px solid var(--hairline);
  }
  .footnotes{
    border-top:1px solid var(--hairline);
    margin:1.5rem 0 1.2rem;
    padding-top:0.95rem;
  }
  .footnotes ol{ list-style:none; margin:0; padding:0; }
  .footnotes li{
    position:relative;
    padding-left:1.4rem;
    font-family:"JetBrains Mono", monospace;
    font-size:0.62rem;
    line-height:1.65;
    letter-spacing:0.01em;
    color:var(--dimmer);
    margin-bottom:0.6rem;
  }
  .footnotes li:last-child{ margin-bottom:0; }
  .footnotes li::before{
    content:attr(data-fn);
    position:absolute; left:0; top:0;
    color:var(--brass);
  }
  .footnotes a{ color:var(--dim); text-decoration:underline; text-underline-offset:2px; }
  .footnotes a:hover{ color:var(--brass-lit); }
  sup.fn{
    font-family:"JetBrains Mono", monospace;
    font-size:0.6em;
    font-weight:500;
    color:var(--brass);
    margin-left:0.12em;
    vertical-align:super;
  }
  .error{
    font-family:"JetBrains Mono", monospace;
    font-size:0.72rem;
    color:#d98a6a;
    min-height:1rem;
    margin-bottom:0.8rem;
  }
  .actions{ display:flex; gap:0.6rem; justify-content:flex-end; }
  .actions button{
    font-family:"JetBrains Mono", monospace;
    font-size:0.8rem;
    letter-spacing:0.04em;
    padding:0.6rem 1.1rem;
    border-radius:2px;
    cursor:pointer;
    border:1px solid var(--hairline);
    background:none;
    color:var(--dim);
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .actions button:hover{ color:var(--ivory); border-color:var(--dim); }
  .actions .save{ background:var(--brass); border-color:var(--brass); color:var(--ink); font-weight:700; }
  .actions .save:hover{ background:var(--brass-lit); border-color:var(--brass-lit); color:var(--ink); }
  .actions button:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:2px; }
 
  @media (prefers-reduced-motion: no-preference){
    main{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
    @keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
  }