:root {
  color-scheme: light;
  --ink: #211f26;
  --muted: #6c6671;
  --bg: #f7f2fa;
  --surface: #fffaff;
  --outline: #e7dfe9;
  --purple: #6750a4;
  --purple-deep: #4f378b;
  --purple-soft: #eaddff;
  --orange: #8c4f00;
  --orange-soft: #ffdcc1;
  --green: #176b36;
  --green-soft: #b8f2c9;
  --blue: #135f7b;
  --blue-soft: #c2e8fb;
  --metric-surface: #ffffff79;
  --badge-surface: #ffffffa0;
  --support-symbol-surface: #ffffff8f;
  --progress-track: #ffffff99;
  --performance-bg: #211f26;
  --clock-surface: #d9ffdf;
  --clock-ink: #0d4824;
  --clock-muted: #38704b;
  --memory-soft: #dce9ff;
  --vram-soft: #ffe7ef;
  --theme-switch-surface: #ffffff99;
  --theme-switch-active: #6750a4;
  --theme-switch-active-ink: #ffffff;
  --ease: cubic-bezier(.2,.85,.25,1.15);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}

.shell { position: relative; z-index: 1; width: calc(100% - max(32px, 6vw)); margin: auto; padding: 38px 0 max(52px, env(safe-area-inset-bottom)); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 56px; height: 56px; flex: 0 0 auto; overflow: hidden; border-radius: 20px; background: white; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-lockup h1 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.8px; }
.brand-lockup p { margin: 7px 0 0; color: var(--muted); font-size: 14px; font-weight: 750; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.theme-switcher { display: flex; align-items: center; padding: 3px; border: 1px solid var(--outline); border-radius: 999px; background: var(--theme-switch-surface); }
.theme-switcher button { appearance: none; border: 0; border-radius: 999px; padding: 7px 9px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 850; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.theme-switcher button[aria-pressed="true"] { background: var(--theme-switch-active); color: var(--theme-switch-active-ink); }
.theme-switcher button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.timestamp { color: var(--muted); font-size: 13px; font-weight: 750; }
.live-pill { display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px; background: var(--green-soft); color: #0a5529; font-size: 14px; font-weight: 850; transition: .35s var(--ease); }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #22a451; }
.live-pill.is-waiting { background: #eee8f1; color: #706a74; }
.live-pill.is-waiting i { background: #918a95; box-shadow: none; animation: none; }
.live-pill.is-error { background: #ffdad6; color: #8c1d18; }
.live-pill.is-error i { background: #ba1a1a; box-shadow: none; animation: none; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.device-card { min-width: 0; min-height: 280px; padding: 29px 30px 26px; border-radius: 32px; overflow: hidden; position: relative; }
.cpu-card { background: var(--purple-soft); --accent: var(--purple); --accent-deep: var(--purple-deep); --track: #4f378b; --ring-center: #f5efff; }
.gpu-card { background: var(--orange-soft); --accent: var(--orange); --accent-deep: #753f00; --track: #753f00; --ring-center: #fff4ea; }
.card-topline { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.card-topline > div:first-child { min-width: 0; flex: 1 1 auto; }
.eyebrow { display: block; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 1.5px; margin-bottom: 8px; }
.card-topline h2 { margin: 0; min-height: 0; font-size: clamp(22px, 2.25vw, 31px); line-height: 1.02; letter-spacing: -1.25px; }
.shape-badge { flex: 0 0 auto; width: 70px; height: 70px; display: grid; place-items: center; background: var(--badge-surface); color: var(--accent-deep); font-size: 12px; font-weight: 950; letter-spacing: 1.1px; }
.cpu-badge { border-radius: 29px 22px 34px 24px; transform: rotate(7deg); }
.gpu-badge { border-radius: 21px 36px 25px 32px; transform: rotate(-6deg); }
.primary-reading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; margin-top: 25px; }
.primary-reading > div:first-child { align-self: center; min-width: 0; padding-right: 16px; }
.reading-label { color: var(--muted); font-size: 14px; font-weight: 800; }
.primary-reading > div:first-child > strong { display: block; margin-top: 1px; font-size: clamp(46px, 5vw, 66px); letter-spacing: -3.4px; line-height: 1; font-variant-numeric: tabular-nums; }
.primary-reading strong small { margin-left: 7px; color: var(--accent-deep); font-size: 14px; letter-spacing: 0; }
.usage-ring { --value: 0; width: 104px; height: 104px; justify-self: center; align-self: center; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--track) 0); position: relative; transform: translateX(10px); }
.usage-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--ring-center); }
.usage-ring span { position: relative; display: flex; align-items: baseline; gap: 1px; font-weight: 900; }
.usage-ring b { font-size: 22px; font-variant-numeric: tabular-nums; }
.usage-ring small { font-size: 11px; }
.metric-pills { width: calc(100% - 10px); min-width: 0; justify-self: start; display: grid; grid-template-columns: 1fr; gap: 8px; }
.metric-pills > div { min-width: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; border-radius: 18px; background: var(--metric-surface); }
.metric-pills span { display: block; color: var(--muted); font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.metric-pills strong { overflow: hidden; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }

.performance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.performance-card { min-width: 0; min-height: 226px; height: 226px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 24px 24px 70px; border-radius: 28px; background: var(--performance-bg); color: white; }
.performance-heading { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.performance-heading > div:last-child > span { color: #d5ccd9; font-size: 13px; font-weight: 900; letter-spacing: .8px; }
.performance-heading p { margin: 6px 0 0; font-size: 16px; font-weight: 800; }
.performance-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 22px 16px 26px 17px; background: #d9ffdf; color: #0d652f; font-size: 24px; font-weight: 900; transform: rotate(-5deg); }
.performance-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: auto 0 0; position: relative; z-index: 1; }
.performance-metrics > div { min-width: 0; padding: 11px 10px; border-radius: 16px; background: #ffffff0d; }
.performance-metrics span { display: block; color: #c9c1cc; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.performance-metrics strong { display: flex; align-items: baseline; gap: 5px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.performance-metrics small { color: #c9c1cc; font-size: 11px; font-weight: 750; letter-spacing: .2px; }
.fps-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; opacity: .82; }
.clock-card { min-width: 0; min-height: 226px; height: 226px; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 24px; border-radius: 28px; background: var(--clock-surface); color: var(--clock-ink); container-type: inline-size; }
.clock-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; position: relative; z-index: 1; }
.clock-card-heading > div:first-child { min-width: 0; }
.clock-card-heading h2 { margin: 0; font-size: 24px; line-height: 1.02; letter-spacing: -1px; }
.clock-badge { width: 56px; height: 56px; justify-self: end; color: var(--clock-ink); border-radius: 23px 18px 27px 20px; transform: rotate(7deg); }
.clock-card-body { display: grid; grid-template-columns: clamp(80px, 19cqw, 112px) minmax(0, 1fr); align-items: center; gap: clamp(10px, 3cqw, 18px); margin-top: 10px; position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; }
.clock-date-card { width: fit-content; min-width: 0; justify-self: center; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 9px; border-radius: 14px; background: var(--metric-surface); color: var(--clock-ink); transform: translateX(5cqw); }
.clock-date-card > span { color: var(--clock-muted); font-size: 11px; font-weight: 900; letter-spacing: .8px; }
.clock-date-card > strong { font-size: clamp(17px, 1.9vw, 23px); line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-time-panel { min-width: 0; display: flex; align-items: center; container-type: inline-size; }
.flip-clock { width: 100%; display: flex; align-items: center; gap: clamp(4px, 2.5cqw, 10px); color: var(--clock-ink); font-variant-numeric: tabular-nums; }
.flip-pair { flex: 1 1 0; min-width: 0; display: flex; gap: clamp(1px, .5cqw, 2px); }
.flip-digit { position: relative; flex: 1 1 0; min-width: 0; height: clamp(64px, 25cqw, 104px); overflow: hidden; isolation: isolate; perspective: 340px; transform-style: preserve-3d; border-radius: clamp(10px, 4cqw, 17px); background: #0b5229; color: #effff1; font-size: clamp(26px, 15cqw, 64px); line-height: 1; letter-spacing: -.05em; box-shadow: inset 0 1px #ffffff36, inset 0 -2px #062e17aa; }
.flip-half { position: absolute; inset-inline: 0; height: 50%; overflow: hidden; color: inherit; font: inherit; line-height: inherit; }
.flip-half .flip-glyph { position: absolute; inset-inline: 0; height: 200%; display: grid; place-items: center; color: inherit; font: inherit; line-height: inherit; }
.flip-half-top, .flip-static-top, .flip-leaf-top { top: 0; }
.flip-half-bottom, .flip-static-bottom, .flip-leaf-bottom { bottom: 0; }
.flip-static-top, .flip-leaf-top { border-top-left-radius: inherit; border-top-right-radius: inherit; background-color: #0b5229; }
.flip-static-bottom, .flip-leaf-bottom { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; background-color: #084522; }
.flip-static-top .flip-glyph, .flip-leaf-top .flip-glyph { top: 0; }
.flip-static-bottom .flip-glyph, .flip-leaf-bottom .flip-glyph { bottom: 0; }
.flip-leaf { z-index: 2; visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; will-change: transform; }
.flip-leaf-top { transform-origin: center bottom; transform: rotateX(0); }
.flip-leaf-bottom { transform-origin: center top; transform: rotateX(90deg); }
.flip-digit.is-flipping .flip-leaf { visibility: visible; }
.flip-digit.is-flipping .flip-leaf-top { animation: flip-top-leaf .22s cubic-bezier(.45,.05,.7,.2) both; }
.flip-digit.is-flipping .flip-leaf-bottom { animation: flip-bottom-leaf .24s .22s cubic-bezier(.2,.75,.25,1) both; }
.flip-digit::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 1px; background: #062e17d9; box-shadow: 0 1px #ffffff18; pointer-events: none; }
.flip-separator { flex: 0 0 auto; display: grid; place-items: center; color: var(--clock-ink); font-size: clamp(22px, 7.9cqw, 32px); font-style: normal; font-weight: 900; line-height: 1; }
@keyframes flip-top-leaf { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.55); } }
@keyframes flip-bottom-leaf { from { transform: rotateX(90deg); filter: brightness(.55); } to { transform: rotateX(0); filter: brightness(1); } }
.clock-dial { width: clamp(80px, 19cqw, 112px); aspect-ratio: 1; height: auto; flex: 0 0 auto; display: grid; place-items: center; position: relative; border-radius: 50%; background: #185c32; color: #d9ffdf; }
.clock-dial::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: repeating-conic-gradient(#b8f2c9 0 2.5deg, transparent 2.5deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 74% 100%); mask: radial-gradient(circle, transparent 0 72%, #000 74% 100%); opacity: .82; }
.clock-dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #ff8b62; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #185c32; }
.clock-hand { position: absolute; z-index: 1; left: 50%; bottom: 50%; display: block; transform-origin: 50% 100%; border-radius: 999px; background: #ffffff; }
.clock-hour { width: 4px; height: 27px; }
.clock-minute { width: 3px; height: 38px; background: #d9ffdf; }
.clock-second { width: 2px; height: 41px; background: #ff8b62; }
.support-grid { display: grid; grid-template-columns: .9fr .9fr 1.4fr; gap: 18px; margin-top: 18px; }
.support-card { min-width: 0; min-height: 204px; padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--outline); }
.memory-card { background: var(--memory-soft); --resource-accent: #375f99; }
.vram-card { background: var(--vram-soft); --resource-accent: #934862; }
.network-card { background: var(--blue-soft); }
.support-heading { display: flex; align-items: center; gap: 12px; }
.support-heading > div > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.support-heading h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.4px; }
.network-card .support-heading h3 { margin: 0; }
.support-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px 21px 16px 20px; background: var(--support-symbol-surface); font-size: 12px; font-weight: 950; transform: rotate(-4deg); }
.resource-value { display: flex; align-items: baseline; justify-content: space-between; margin: 25px 0 13px; }
.resource-value strong { font-size: 34px; letter-spacing: -1.7px; }
.resource-value strong small { margin-left: 5px; font-size: 11px; letter-spacing: 0; }
.resource-value > span { color: var(--muted); font-size: 13px; font-weight: 750; }
.tonal-progress { height: 12px; overflow: hidden; border-radius: 999px; background: var(--progress-track); }
.tonal-progress i { display: block; height: 100%; border-radius: inherit; background: var(--resource-accent); }
.support-card > p { margin: 9px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.network-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.network-readings > div { padding-right: 12px; border-right: 1px solid #39718a29; }
.network-readings > div:last-child { border: 0; }
.network-readings span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.network-readings i { font-style: normal; font-size: 14px; font-weight: 950; }
.network-readings strong { display: block; margin-top: 6px; font-size: clamp(18px, 2vw, 25px); letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.down-arrow { color: #176b36; }.up-arrow { color: #8a4d00; }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 20px 8px 0; color: var(--muted); font-size: 12px; font-weight: 750; }

@property --value { syntax: "<number>"; inherits: true; initial-value: 0; }

:root[data-theme="dark"] {
  color-scheme: dark;
    --ink: #f0eaf3;
    --muted: #cac1cd;
    --bg: #18141c;
    --surface: #221e26;
    --outline: #3a333f;
    --purple: #cbb5ff;
    --purple-deep: #ecddff;
    --purple-soft: #2f2540;
    --orange: #ffb77b;
    --orange-soft: #432a1d;
    --green: #7ee3a0;
    --green-soft: #1d3b28;
    --blue: #8cd8f3;
    --blue-soft: #1c3542;
    --metric-surface: #ffffff14;
    --badge-surface: #ffffff16;
    --support-symbol-surface: #ffffff16;
    --progress-track: #ffffff1d;
    --performance-bg: #242028;
    --clock-surface: #1b3a28;
    --clock-ink: #dcf9e4;
    --clock-muted: #addfbc;
    --memory-soft: #21324f;
    --vram-soft: #442936;
    --theme-switch-surface: #ffffff12;
    --theme-switch-active: #cbb5ff;
    --theme-switch-active-ink: #281f31;
}

:root[data-theme="dark"] .live-pill { color: #b8f2c9; }
:root[data-theme="dark"] .live-pill.is-waiting { color: #d2cbd5; }
:root[data-theme="dark"] .live-pill.is-error { color: #ffd9d5; }
:root[data-theme="dark"] .cpu-card { --accent-deep: #ecddff; --track: #60457c; --ring-center: #241c31; }
:root[data-theme="dark"] .gpu-card { --accent-deep: #ffe0c5; --track: #75452d; --ring-center: #382216; }
:root[data-theme="dark"] .memory-card { --resource-accent: #a7c8ff; }
:root[data-theme="dark"] .vram-card { --resource-accent: #f0a8c0; }

@media (max-width: 1050px) {
  .usage-ring { width: 92px; height: 92px; }
  .usage-ring b { font-size: 20px; }
  .performance-metrics { gap: 6px; }
  .performance-metrics > div { padding: 10px 8px; }
  .performance-metrics strong { font-size: 24px; }
}

@media (max-width: 850px) {
  .shell { width: min(100% - 24px, 650px); padding-top: 20px; }
  .topbar { align-items: flex-start; }
  .timestamp { display: none; }
  .hero-grid, .support-grid, .performance-row { grid-template-columns: 1fr; }
  .device-card { min-height: 280px; border-radius: 34px; }
  .performance-card, .clock-card { min-height: 226px; height: 226px; padding: 24px; border-radius: 34px; }
  .performance-metrics { grid-template-columns: repeat(3, 1fr); }
  .performance-metrics > div { display: block; padding: 14px 12px; }
  .performance-metrics span { margin-bottom: 6px; }
  .support-card { min-height: 205px; }
}

@media (max-width: 520px) {
  .brand-mark { width: 48px; height: 48px; }
  .brand-lockup h1 { font-size: 21px; }
  .brand-lockup p { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .live-pill { padding: 10px 13px; }
  .top-actions { gap: 8px; }
  .theme-switcher button { padding: 6px 7px; font-size: 10px; }
  .device-card { padding: 23px; }
  .card-topline h2 { min-height: 54px; font-size: 22px; }
  .shape-badge { width: 58px; height: 58px; }
  .primary-reading { margin-top: 18px; }
  .primary-reading > div:first-child { padding-right: 6px; }
  .primary-reading > div:first-child > strong { font-size: 39px; letter-spacing: -2.2px; }
  .primary-reading strong small { margin-left: 4px; font-size: 12px; }
  .metric-pills { width: 100%; gap: 6px; }
  .metric-pills > div { min-height: 44px; padding: 7px 8px; border-radius: 13px; }
  .metric-pills span { font-size: 10px; margin-bottom: 1px; }
  .metric-pills strong { font-size: 14px; }
  .usage-ring { width: 68px; height: 68px; transform: translateX(6.5px); }
  .usage-ring::before { inset: 7px; }
  .usage-ring b { font-size: 16px; }
  .usage-ring small { font-size: 8px; }
  .performance-metrics strong { font-size: 27px; gap: 4px; }
  .performance-metrics > div { padding: 0 10px; }
  .performance-metrics span { font-size: 11px; }
  .clock-hour { height: 25px; }
  .clock-minute { height: 35px; }
  .clock-second { height: 38px; }
  .clock-date-card { gap: 4px; padding: 7px 8px; border-radius: 13px; }
  .clock-date-card > span { font-size: 9px; }
  .clock-date-card > strong { font-size: 13px; letter-spacing: -.7px; }
  footer { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}