:root {
  --ink: #171717;
  --paper: #f6f1e7;
  --acid: #d9ff43;
  --pink: #ff5d8f;
  --blue: #75b8ff;
  --orange: #ff9e45;
  --muted: #6e6a63;
  --line: 3px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; background-color: var(--paper); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-app-region: no-drag; }
.popup-shell { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; background: var(--paper); display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .popup-shell {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "hero stats"
      "work focus"
      "world world"
      "footer footer";
  }
  .topbar { grid-area: header; margin-bottom: 0; padding-bottom: 20px; }
  .hero-clock { grid-area: hero; margin: 0; }
  .time-stats { grid-area: stats; margin: 0; display: flex; flex-direction: column; }
  .time-stats .stat { flex: 1; }
  .work-card { grid-area: work; margin: 0; }
  .focus-card { grid-area: focus; margin: 0; }
  .world-card { grid-area: world; margin: 0; }
  footer { grid-area: footer; }
}
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 15px; border-bottom: var(--line); -webkit-app-region: drag; }
.brand { display: flex; align-items: center; gap: 9px; font-family: Arial Black, Impact, sans-serif; font-size: 17px; line-height: .82; letter-spacing: -1px; }
.brand i { color: var(--pink); font-size: 10px; font-style: normal; letter-spacing: .6px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: var(--line); background: var(--acid); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-4deg); font-size: 16px; }
.local-badge, footer, .eyebrow, .section-label, .stat span, .focus-label, .world-card > .card-heading > span { font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.local-badge { display: flex; align-items: center; gap: 6px; }.status-dot, .punch-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: #5fc777; }.punch-dot { background: var(--muted); }
.brutal-card { border: var(--line); background: var(--paper); box-shadow: var(--shadow); }
.hero-clock { position: relative; overflow: hidden; min-height: 184px; margin: 20px 0 14px; padding: 16px 17px; background: var(--blue); }
.section-label { display: flex; justify-content: space-between; position: relative; z-index: 1; }.live-time { position: relative; z-index: 1; margin-top: 26px; font-family: Arial Black, Impact, sans-serif; font-size: clamp(61px, 18vw, 80px); line-height: .83; letter-spacing: -5px; }.live-date { position: relative; z-index: 1; margin-top: 10px; font-family: "Courier New", monospace; font-size: 10px; font-weight: 700; }.clock-graphic { position: absolute; right: -34px; bottom: -44px; width: 157px; height: 157px; border: var(--line); border-radius: 50%; background: var(--acid); transform: rotate(-9deg); }.clock-graphic::before, .clock-graphic::after { content: ""; position: absolute; top: 50%; left: 50%; height: 3px; background: var(--ink); transform-origin: left center; }.clock-graphic::before { width: 57px; transform: rotate(-105deg); }.clock-graphic::after { width: 40px; height: 4px; transform: rotate(11deg); }.clock-graphic i { position: absolute; top: 8px; left: calc(50% - 2px); width: 4px; height: 13px; background: var(--ink); }.clock-graphic i:nth-child(2) { top: auto; bottom: 8px; }.clock-graphic i:nth-child(3) { top: calc(50% - 6px); left: 8px; transform: rotate(90deg); }
.time-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 17px; }.stat { min-width: 0; min-height: 63px; padding: 10px 9px; box-shadow: 3px 3px 0 var(--ink); }.stat:nth-child(2) { background: var(--acid); }.stat-status { background: var(--pink); }.stat span { display: block; font-size: 8px; }.stat strong { display: block; margin-top: 8px; font-family: Arial Black, Impact, sans-serif; font-size: 16px; letter-spacing: -1px; white-space: nowrap; }
.work-card { padding: 16px; margin-bottom: 18px; background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--pink); }.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.eyebrow { margin: 0 0 5px; font-size: 9px; }.work-card .eyebrow { color: var(--acid); }.card-heading h1, .card-heading h2 { margin: 0; font-family: Arial Black, Impact, sans-serif; line-height: .9; letter-spacing: -1.4px; }.card-heading h1 { font-size: 28px; }.card-heading h2 { font-size: 20px; }.work-elapsed { margin: 23px 0 7px; font-family: Arial Black, Impact, sans-serif; font-size: 47px; line-height: .9; letter-spacing: -3px; }.work-note { min-height: 16px; margin: 0; color: #d3d0ca; font-size: 11px; font-weight: 600; }.button-row { display: grid; grid-template-columns: 1fr 74px; gap: 8px; margin-top: 17px; }.button-row button, .focus-controls button { border: 2px solid var(--paper); min-height: 39px; font-family: "Courier New", monospace; font-size: 10px; font-weight: 700; }.primary-button { background: var(--acid); color: var(--ink); }.primary-button:hover { background: var(--pink); }.primary-button span { font-size: 17px; vertical-align: -2px; }.secondary-button { background: transparent; color: var(--paper); }.secondary-button:hover { background: var(--paper); color: var(--ink); }
.focus-card { padding: 16px; margin-bottom: 18px; background: var(--orange); }.focus-label { padding: 4px 5px; border: 1.5px solid var(--ink); background: var(--paper); }.focus-body { display: flex; align-items: center; justify-content: space-between; padding: 19px 0 15px; }.focus-time { font-family: Arial Black, Impact, sans-serif; font-size: 50px; letter-spacing: -3px; line-height: .8; }.focus-controls { display: grid; grid-template-columns: 68px 40px; gap: 7px; }.focus-controls button { border-color: var(--ink); background: var(--ink); color: var(--paper); }.focus-controls button:last-child { background: var(--paper); color: var(--ink); font-size: 20px; }.focus-controls button:hover { background: var(--pink); color: var(--ink); }.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }.preset { height: 31px; border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); font-family: "Courier New", monospace; font-size: 8px; font-weight: 700; }.preset.active, .preset:hover { background: var(--acid); }
.world-card { padding: 16px; margin-bottom: 16px; box-shadow: 4px 4px 0 var(--ink); }.world-card .card-heading > span { padding-top: 7px; }.world-times { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }.world-times div { min-width: 0; padding: 9px 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }.world-times span { display: block; font-family: "Courier New", monospace; font-size: 8px; font-weight: 700; }.world-times strong { display: block; margin-top: 7px; font-family: Arial Black, Impact, sans-serif; font-size: 15px; letter-spacing: -1px; }
footer { text-align: center; color: var(--muted); font-size: 8px; padding: 4px 0 0; }.toast { position: fixed; z-index: 10; right: 14px; bottom: 14px; max-width: min(350px, calc(100vw - 28px)); padding: 12px 14px; border: var(--line); box-shadow: var(--shadow); background: var(--acid); font-size: 12px; font-weight: 700; transform: translateY(150%); transition: transform .2s ease; }.toast.show { transform: translateY(0); }
@media (min-width: 560px) { body { padding: 28px 0; }.popup-shell { border: var(--line); box-shadow: 8px 8px 0 var(--ink); } }