:root {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: #101318;
  --panel2: #15191f;
  --text: #f3f4f6;
  --muted: #949ba6;
  --line: #242a32;
  --accent: #dfe4ea;
  --good: #82d7a0;
  --warn: #f0c36a;
  --bad: #ef8a8a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,.06), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.eyebrow { color:#7f8792; letter-spacing:.16em; font-size:11px; font-weight:800; }
h1 { margin: 6px 0 6px; font-size: clamp(36px, 5vw, 58px); line-height:1; letter-spacing:-.05em; }
.sub { color:var(--muted); margin:0; max-width:650px; }
.privacy-pill { border:1px solid var(--line); background:#0c1014; color:#bdc3cb; padding:10px 13px; border-radius:999px; font-size:13px; white-space:nowrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--good); margin-right:8px; box-shadow:0 0 14px rgba(130,215,160,.7); }
.hero-grid, .lower-grid { display:grid; gap:16px; margin-bottom:16px; }
.hero-grid { grid-template-columns:1.3fr .7fr; }
.lower-grid { grid-template-columns:1fr 1fr; }
.card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)), var(--panel); border-radius:20px; padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#d7dbe1; font-weight:700; font-size:14px; }
.status { color:var(--muted); font-size:12px; font-weight:600; }
.status.good { color:var(--good); }
.status.warn { color:var(--warn); }
.status.bad { color:var(--bad); }
.timer { font-size: clamp(68px, 10vw, 110px); line-height:1; letter-spacing:-.07em; font-variant-numeric: tabular-nums; margin:30px 0 20px; }
.meter, .break-progress { background:#20252c; height:8px; border-radius:999px; overflow:hidden; }
.meter-fill, #breakProgressFill { height:100%; width:0%; background:linear-gradient(90deg,#777f89,#eef2f6); border-radius:999px; transition:width .25s linear; }
.hint { color:var(--muted); line-height:1.55; min-height:44px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
button { border-radius:12px; border:1px solid transparent; padding:11px 15px; color:var(--text); background:transparent; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { color:#0a0c0f; background:#f1f3f5; font-weight:800; }
.secondary { border-color:#343a43; background:#171b21; }
.ghost { border-color:#2c323a; color:#b9c0c8; }
.link-btn { padding:0; color:#9da4ad; font-size:12px; }
.metric-row { display:flex; gap:36px; align-items:flex-end; margin:42px 0 24px; }
.metric { font-size:64px; line-height:1; font-weight:750; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.metric.small { font-size:38px; }
.metric-label { margin-top:8px; color:var(--muted); font-size:12px; }
.camera-wrap { position:relative; overflow:hidden; border-radius:15px; background:#050607; aspect-ratio:16/10; margin-top:18px; border:1px solid #232831; }
.camera-wrap.hidden-preview video, .camera-wrap.hidden-preview .landmark-canvas { opacity:0; }
video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); opacity:.86; transition:opacity .2s; }
.landmark-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); pointer-events:none; transition:opacity .2s; }
.eye-state-pill { position:absolute; top:10px; left:10px; z-index:3; border:1px solid #343b46; background:rgba(8,11,15,.76); backdrop-filter:blur(8px); border-radius:999px; padding:6px 9px; font-size:10px; font-weight:800; letter-spacing:.08em; color:#9ca4af; }
.eye-state-pill.open { color:#9cf0bb; border-color:rgba(130,215,160,.38); }
.eye-state-pill.closed { color:#ffd98b; border-color:rgba(240,195,106,.45); }
.blink-flash { position:absolute; top:50%; left:50%; z-index:4; transform:translate(-50%,-50%) scale(.82); opacity:0; pointer-events:none; padding:10px 15px; border:1px solid rgba(205,255,225,.55); border-radius:999px; background:rgba(7,14,10,.82); color:#cffff0; font-weight:900; letter-spacing:.08em; box-shadow:0 0 35px rgba(117,234,170,.18); }
.blink-flash.active { animation:blinkPop .52s ease-out; }
@keyframes blinkPop {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.72); }
  18% { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  70% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.96); }
}
.camera-overlay { position:absolute; left:10px; right:10px; bottom:10px; display:flex; justify-content:space-between; gap:10px; font-size:11px; color:#c5cad0; text-shadow:0 1px 3px #000; }
.microcopy { margin:12px 2px 0; color:#727a85; font-size:11px; }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.settings label { color:#a8afb7; font-size:12px; }
.input-line { margin-top:7px; display:flex; align-items:center; border:1px solid #2b3139; border-radius:12px; background:#0d1014; padding:0 10px; }
.input-line input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#f3f4f6; padding:10px 4px; }
.input-line span { color:#69717c; font-size:11px; white-space:nowrap; }
.toggle-row { display:grid; gap:10px; margin-top:18px; }
.switch-line { display:flex; align-items:center; gap:10px; color:#b5bbc3; font-size:13px; }
.switch-line input { accent-color:#e5e7eb; }
.demo-row { margin-top:20px; }
.log-card { margin-top:16px; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.stats-row > div { background:#0c0f13; border:1px solid #232932; border-radius:14px; padding:16px; }
.stats-row strong { display:block; font-size:28px; letter-spacing:-.04em; }
.stats-row span { color:var(--muted); font-size:11px; }
.event-log { margin-top:14px; display:grid; gap:8px; max-height:220px; overflow:auto; }
.event { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #20262e; padding:10px 2px 2px; color:#b8bec6; font-size:12px; }
.event time { color:#6f7782; font-variant-numeric:tabular-nums; }
.empty { color:#6f7782; font-size:12px; padding:8px 0; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(14px); }
.hidden { display:none !important; }
.modal-card { width:min(520px,100%); text-align:center; border:1px solid #303741; background:#0e1116; border-radius:26px; padding:34px; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.modal-card h2 { margin:12px 0 8px; font-size:34px; letter-spacing:-.04em; }
.modal-card p { color:#9aa2ac; line-height:1.5; }
.orb { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; border:1px solid #353c46; background:#171b21; font-size:30px; }
.break-countdown { font-size:90px; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; margin:24px 0 20px; }
.wide { width:100%; margin-top:20px; }
.toast { position:fixed; right:22px; bottom:22px; z-index:120; max-width:360px; border:1px solid #353c46; background:#11151a; color:#e8eaed; border-radius:14px; padding:14px 16px; box-shadow:0 18px 60px rgba(0,0,0,.4); font-size:13px; }
@media (max-width: 820px) {
  .hero-grid, .lower-grid { grid-template-columns:1fr; }
  .topbar { flex-direction:column; }
  .timer { font-size:78px; }
}
@media (max-width: 520px) {
  .shell { width:min(100% - 20px,1120px); padding-top:24px; }
  .settings { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr; }
  .modal-card { padding:26px 20px; }
}

.diagnostics {
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
  font-size:12px; color:#aeb9cc;
}
.diagnostics span {
  padding:5px 8px; border:1px solid #2a313d; border-radius:999px; background:#0d1117;
}

.background-note{margin-top:14px;padding:12px 14px;border:1px solid #343b46;border-radius:12px;background:#0d1116;color:#aeb9cb;font-size:12px;line-height:1.55}
.background-note.hidden{display:none}
.demo-row{display:flex;gap:10px;flex-wrap:wrap}
.monitor-mode .topbar .sub{max-width:520px}

/* v7 floating monitor --------------------------------------------------- */
.mini-monitor { display:none; }
.mini-monitor.pip-mounted,
body.monitor-mode .mini-monitor {
  display:block;
  width:100vw;
  height:100vh;
}

html.pip-root, body.pip-body {
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:transparent;
}
body.monitor-mode {
  margin:0;
  min-height:100vh;
  overflow:hidden;
  background:#090c10;
}
body.monitor-mode .shell {
  position:fixed;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:.001;
  pointer-events:none;
  left:-100px;
  top:-100px;
  padding:0;
  margin:0;
}
body.monitor-mode .modal-backdrop { display:none !important; }
body.monitor-mode .toast { right:8px; bottom:8px; max-width:calc(100vw - 16px); }

.monitor-surface {
  --glass:rgba(13,17,22,.78);
  position:relative;
  width:100%;
  height:100%;
  min-height:120px;
  overflow:hidden;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 18px 14px;
  color:#eef2f6;
  background:
    radial-gradient(circle at 15% 10%, rgba(139,235,184,.18), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(139,171,255,.12), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
    var(--glass);
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  box-shadow:0 16px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
  isolation:isolate;
}
.monitor-surface::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 24%, transparent 78%, rgba(0,0,0,.08));
  z-index:-1;
}

.monitor-chrome {
  position:absolute;
  z-index:8;
  top:8px;
  left:10px;
  right:10px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;
}
.monitor-surface:hover .monitor-chrome,
.monitor-surface:focus-within .monitor-chrome {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.monitor-origin {
  min-width:0;
  max-width:68%;
  height:26px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(3,6,9,.34);
  color:#abb4be;
  font-size:9px;
  letter-spacing:.015em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.monitor-window-actions { display:flex; align-items:center; gap:4px; }
.chrome-btn {
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(3,6,9,.30);
  color:#b9c1c9;
  font-size:13px;
  line-height:1;
}
.chrome-btn:hover { background:rgba(255,255,255,.10); color:#fff; }
.chrome-btn.close:hover { background:rgba(245,105,105,.18); color:#ffd1d1; border-color:rgba(245,105,105,.25); }

.monitor-stage {
  flex:1;
  min-height:94px;
  display:flex;
  align-items:center;
  gap:17px;
  padding-top:22px;
}
.monitor-time-block { min-width:0; flex:1; }
.monitor-label {
  color:#6f7b88;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
}
.mini-timer {
  margin-top:5px;
  font-size:49px;
  line-height:.88;
  letter-spacing:-.075em;
  font-variant-numeric:tabular-nums;
  font-weight:760;
  text-shadow:0 4px 22px rgba(0,0,0,.22);
}
.mini-state {
  max-width:210px;
  margin-top:8px;
  color:#abb5bf;
  font-size:10px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.blink-strip {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.blink-strip > div:first-child { display:flex; align-items:baseline; gap:7px; }
.blink-strip strong {
  color:#dce7e0;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.blink-window {
  display:flex;
  gap:7px;
  align-items:center;
  color:#6f7a86;
  font-size:8.5px;
  white-space:nowrap;
}
.mini-pose {
  margin-top:5px;
  color:#64707c;
  font-size:8px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-progress {
  width:100%;
  height:3px;
  overflow:hidden;
  margin-top:8px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
#miniProgressFill {
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(126,228,166,.62), rgba(235,242,238,.96));
  transition:width .25s linear;
}
.mini-dot {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#69737e;
  box-shadow:0 0 0 3px rgba(255,255,255,.025);
}
.mini-dot.good { background:#7fe0a2; box-shadow:0 0 10px rgba(127,224,162,.55); }
.mini-dot.warn { background:#efbe68; box-shadow:0 0 10px rgba(239,190,104,.42); }

.monitor-hover-tools {
  position:absolute;
  z-index:7;
  right:12px;
  bottom:12px;
  display:flex;
  gap:5px;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.monitor-surface:hover .monitor-hover-tools,
.monitor-surface:focus-within .monitor-hover-tools {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mini-tool {
  min-height:25px;
  border-radius:8px;
  padding:4px 8px;
  font-size:8.5px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(4,7,10,.38);
  color:#9ba6b1;
}
.mini-tool:hover { color:#eef2f4; background:rgba(255,255,255,.08); }
.primary-mini { color:#07120b; background:#c9f1d4; border-color:transparent; font-weight:900; }
.mini-error {
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:10;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(239,138,138,.10);
  border:1px solid rgba(239,138,138,.20);
  color:#f0aaaa;
  font-size:8.5px;
  line-height:1.3;
}

/* Cute pixel-human mask. Whole head follows yaw a little; facial states still
   reflect blink / away / low-blink status. */
.pixel-pet {
  --pet-turn:0deg;
  --pet-shift:0px;
  position:relative;
  width:78px;
  height:78px;
  flex:0 0 78px;
  transform:translateX(var(--pet-shift)) perspective(180px) rotateY(var(--pet-turn));
  transform-origin:50% 62%;
  transition:transform .16s ease-out, opacity .2s ease, filter .2s ease;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.27));
}
.pixel-pet svg {
  width:78px;
  height:78px;
  image-rendering:pixelated;
  overflow:visible;
}
.pet-hair-shadow { fill:#56616d; }
.pet-hair { fill:#d8e0e8; }
.pet-fringe { fill:#c7d0d9; }
.pet-face, .pet-ear { fill:#e6c7ac; }
.pet-highlight { fill:#f3ddc8; opacity:.78; }
.pet-brow { fill:#6d5a50; }
.pet-eye { fill:#20262c; transition:transform .06s ease; transform-box:fill-box; transform-origin:center; }
.pet-nose { fill:#b78373; }
.pet-mouth { fill:#8b5b63; }
.pet-cheek { fill:#e89b9d; opacity:.88; }
.pet-zzz {
  position:absolute;
  right:2px;
  top:-1px;
  color:#9aa5b0;
  font-size:12px;
  font-weight:900;
  opacity:0;
}
.pet-blink-pop {
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%) translateY(3px);
  color:#aaf0c1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  white-space:nowrap;
}
.pixel-pet.blinking .pet-eye { transform:scaleY(.12); }
.pixel-pet.blinked svg { animation:petHop .34s ease-out; }
.pixel-pet.blinked .pet-blink-pop { animation:petBlinkPop .48s ease-out; }
.pixel-pet.away { opacity:.62; filter:grayscale(.34) drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.pixel-pet.away .pet-eye { transform:scaleY(.12); }
.pixel-pet.away .pet-mouth { transform:translateY(1px); }
.pixel-pet.away .pet-zzz { opacity:1; animation:zzz 1.8s ease-in-out infinite; }
.pixel-pet.low .pet-eye { transform:scaleY(.55); }
.pixel-pet.low .pet-brow-left { transform:translateY(1px); }
.pixel-pet.low .pet-brow-right { transform:translateY(1px); }
.pixel-pet.breaking .pet-eye { transform:scaleY(.12); }
.pixel-pet.breaking .pet-mouth { fill:#78c998; }
.pixel-pet.paused { opacity:.5; }
@keyframes petHop { 0%{transform:translateY(0)} 38%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@keyframes petBlinkPop { 0%{opacity:0;transform:translateX(-50%) translateY(4px)} 25%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(-5px)} }
@keyframes zzz { 0%,100%{transform:translateY(1px);opacity:.3} 50%{transform:translateY(-4px);opacity:1} }

.monitor-surface.compact { padding:11px 12px; }
.monitor-surface.compact .monitor-stage { min-height:0; padding-top:9px; gap:9px; }
.monitor-surface.compact .pixel-pet { width:48px; height:48px; flex-basis:48px; }
.monitor-surface.compact .pixel-pet svg { width:48px; height:48px; }
.monitor-surface.compact .mini-timer { font-size:34px; }
.monitor-surface.compact .mini-state,
.monitor-surface.compact .blink-strip,
.monitor-surface.compact .mini-pose,
.monitor-surface.compact .mini-progress { display:none; }
.monitor-surface.compact .monitor-chrome { top:4px; left:5px; right:5px; }
.monitor-surface.compact .monitor-hover-tools { display:none; }

@media (max-width:300px), (max-height:150px) {
  .monitor-surface { padding:11px 12px; }
  .monitor-stage { min-height:0; padding-top:8px; gap:10px; }
  .pixel-pet { width:50px; height:50px; flex-basis:50px; }
  .pixel-pet svg { width:50px; height:50px; }
  .mini-timer { font-size:35px; }
  .mini-state { margin-top:4px; font-size:8px; }
  .blink-strip { margin-top:2px; }
  .mini-pose { display:none; }
}