:root {
	color-scheme: light;
	--ink: #201e1b;
	--muted: #6d6760;
	--quiet: #8d867d;
	--paper: #f7f5f0;
	--surface: #fffefa;
	--soft: #eeebe4;
	--line: #dcd7ce;
	--accent: #b84e2f;
	--accent-dark: #8f3820;
	--green: #386a52;
	--green-soft: #e4eee8;
	--amber: #8a6421;
	--amber-soft: #f8efd8;
	--red: #96392e;
	--red-soft: #f8e7e3;
	--serif: Georgia, "Times New Roman", serif;
	--sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-family: var(--sans);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 80% 8%, rgb(184 78 47 / 6%), transparent 34rem), var(--paper); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .46; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; text-underline-offset: 3px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-header, main { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 68px; border-bottom: 1px solid #e7e3dc; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand > span:last-child { display: flex; align-items: baseline; gap: 9px; }
.brand strong { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: -.025em; }
.brand small { color: var(--quiet); font: .58rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; padding: 6px; border-radius: 7px; background: var(--accent); }
.brand-mark i { width: 7px; height: 7px; border-radius: 1px; background: #fff; }
.brand-mark i:nth-child(2) { background: #e8d96d; }
.brand-mark i:nth-child(3) { background: #aebdcc; }
.site-header nav { display: flex; align-items: center; gap: 20px; }
.site-header nav a, .site-header nav button { border: 0; background: none; color: #57514b; font-size: .78rem; text-decoration: none; }
.site-header nav a:hover, .site-header nav button:hover { color: var(--accent); }

main { padding: 24px 0 84px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font: 750 .61rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.auth-view { display: grid; min-height: calc(100vh - 145px); place-items: center; }
.auth-card { width: min(560px, 100%); padding: clamp(32px, 6vw, 58px); border: 1px solid var(--line); border-radius: 14px; background: rgb(255 254 250 / 94%); box-shadow: 0 24px 70px rgb(49 39 31 / 9%); }
.auth-card h1, .empty-state h1, .status-card h1 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; }
.auth-card h1 { font-size: clamp(2.8rem, 7vw, 4.4rem); line-height: .98; }
.auth-card > p:not(.eyebrow) { margin: 22px 0 30px; color: var(--muted); }
label { display: grid; gap: 8px; color: #514b45; font-size: .72rem; font-weight: 700; }
input, select, textarea { min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font: inherit; }
textarea { padding: 12px; line-height: 1.55; resize: vertical; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
button, .button-link, .file-button { min-height: 43px; padding: 0 17px; border: 1px solid var(--accent-dark); border-radius: 7px; background: var(--accent); color: white; font-size: .73rem; font-weight: 760; }
button:hover, .button-link:hover, .file-button:hover { background: var(--accent-dark); }
button.secondary { border-color: var(--line); background: white; color: var(--ink); }
button.secondary:hover { border-color: var(--accent); background: #fffaf7; color: var(--accent); }
button.quiet { min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.remember { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-weight: 500; }
.remember input { min-height: 0; }

.device-bar { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(260px, 460px) auto; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e7e3dc; }
.device-switcher { position: relative; }
.device-switcher summary { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 10px; align-items: center; gap: 11px; min-height: 55px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 7px 22px rgb(49 39 31 / 5%); cursor: pointer; list-style: none; }
.device-switcher summary::-webkit-details-marker { display: none; }
.device-switcher[open] summary { border-color: #c8b3a8; box-shadow: 0 0 0 3px rgb(184 78 47 / 8%); }
.device-summary-copy { display: grid; min-width: 0; gap: 2px; }
.device-summary-copy small { color: var(--quiet); font: .53rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.device-summary-copy strong { overflow: hidden; font: 700 .73rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.device-summary-state, .device-option-state { color: var(--muted); font-size: .62rem; font-weight: 720; white-space: nowrap; }
.device-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--quiet); border-bottom: 1.5px solid var(--quiet); transform: translateY(-2px) rotate(45deg); transition: transform 140ms ease; }
.device-switcher[open] .device-chevron { transform: translateY(2px) rotate(225deg); }
.device-dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa39a; box-shadow: 0 0 0 3px rgb(170 163 154 / 13%); }
.device-dot.online { background: #3f8a66; box-shadow: 0 0 0 3px rgb(63 138 102 / 14%); }
.device-dot.sleeping { background: #b88629; box-shadow: 0 0 0 3px rgb(184 134 41 / 14%); }
.device-dot.stale { background: #b84e3f; box-shadow: 0 0 0 3px rgb(184 78 63 / 14%); }
.device-menu { position: absolute; top: calc(100% + 8px); left: 0; display: grid; width: min(550px, calc(100vw - 30px)); max-height: min(70vh, 620px); overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 24px 55px rgb(49 39 31 / 18%); }
.device-option { display: grid; grid-template-columns: 112px 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 83px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.device-option:hover { background: #f3efe8; }
.device-option[aria-selected="true"] { background: #f7ede8; }
.device-option-preview { position: relative; display: grid; overflow: hidden; aspect-ratio: 5 / 3; border: 1px solid #cbc6bd; border-radius: 4px; background: #e9e5dd; place-items: center; }
.device-option-preview canvas { display: block; width: 100%; height: 100%; }
.device-option-preview > span { position: absolute; color: var(--quiet); font-size: .55rem; }
.device-option-copy { display: grid; min-width: 0; gap: 4px; }
.device-option-copy strong { overflow: hidden; font: 700 .7rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.device-option-copy small { overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.device-option-copy .device-option-timing { color: var(--quiet); font: .55rem var(--mono); }
#notice { min-height: 22px; margin: 9px 0; color: var(--green); font-size: .73rem; font-weight: 650; }
#notice.error { color: var(--red); }
.empty-state { padding: 13vh 0; text-align: center; }
.empty-state h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
.button-link { display: inline-flex; align-items: center; text-decoration: none; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr); gap: 22px; align-items: stretch; padding: 28px 0 22px; }
.screen-card, .status-card, .card { border: 1px solid var(--line); border-radius: 11px; background: rgb(255 254 250 / 92%); box-shadow: 0 14px 38px rgb(49 39 31 / 6%); }
.screen-card { margin: 0; padding: 12px; }
.screen { position: relative; overflow: hidden; aspect-ratio: 5 / 3; border: 1px solid #cbc6bd; border-radius: 6px; background: #ece9e2; }
.screen canvas { display: block; width: 100%; height: 100%; background: white; object-fit: contain; }
.screen p { position: absolute; inset: 0; display: grid; margin: 0; place-items: center; color: var(--quiet); font-size: .75rem; }
.screen-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px 0; color: var(--muted); font-size: .68rem; }
.screen-card code { overflow: hidden; max-width: 58%; font: .57rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.status-card { container-type: inline-size; padding: clamp(22px, 3vw, 34px); }
.status-heading { display: grid; gap: 10px; }
.status-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-kicker .eyebrow { margin: 0; }
.status-card h1 { overflow: hidden; font-size: clamp(2rem, 11cqi, 3.1rem); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.status-pill, .mini-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .62rem; font-weight: 750; white-space: nowrap; }
.status-pill.online, .mini-status.good { background: var(--green-soft); color: var(--green); }
.mini-status.warn { background: var(--amber-soft); color: var(--amber); }
.status-pill.sleeping { background: var(--amber-soft); color: var(--amber); }
.status-pill.stale, .mini-status.bad { background: var(--red-soft); color: var(--red); }
.ble-wake { width: 100%; min-height: 40px; margin-top: 18px; padding: 0 12px; border-color: #c8b16d; background: #fffaf0; color: var(--amber); font-size: .66rem; white-space: nowrap; }
.ble-wake:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-soft); color: #674811; }
.facts { display: grid; gap: 0; margin: 29px 0 0; }
.facts div { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 10px 0; border-top: 1px solid #ebe7df; }
.facts dt { color: var(--muted); font-size: .68rem; }
.facts dd { margin: 0; max-width: 170px; font: .66rem var(--mono); text-align: right; }

.action-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 22px; }
.card { padding: clamp(22px, 3vw, 30px); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.card h2 { margin: 0; font: 400 clamp(1.6rem, 3vw, 2.15rem) var(--serif); letter-spacing: -.035em; }
.card-copy, .muted, .meta { color: var(--muted); line-height: 1.55; }
.card-copy { margin: 12px 0 22px; font-size: .78rem; }
.card form { display: grid; gap: 12px; }
.card form button { justify-self: start; }
.timezone-input { display: grid; gap: 8px; min-width: 0; }
.timezone-input input { width: 100%; min-width: 0; }
.timezone-input button { font-size: .68rem; }
.schedule-toggle { display: flex; align-items: center; gap: 9px; }
.schedule-toggle input { min-height: 0; accent-color: var(--accent); }
#schedule-hours { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
#schedule-hours legend { padding: 0 5px; color: var(--muted); font-size: .72rem; }
.schedule-hour-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.schedule-hour-inputs label { display: grid; gap: 7px; }
.schedule-hour-inputs input { width: 100%; min-width: 0; }
.muted { min-height: 2.4em; margin: 0; font-size: .69rem; }
.meta { margin: 15px 0 0; font: .61rem/1.55 var(--mono); }

.vibecode-card { position: relative; overflow: hidden; margin-bottom: 22px; padding: clamp(25px, 4vw, 42px); background: linear-gradient(135deg, rgb(255 254 250 / 96%), rgb(249 240 232 / 90%)); }
.vibecode-card::after { position: absolute; top: -86px; right: -70px; width: 260px; height: 260px; border: 1px solid rgb(184 78 47 / 12%); border-radius: 50%; box-shadow: 0 0 0 34px rgb(184 78 47 / 3%), 0 0 0 76px rgb(184 78 47 / 2%); content: ""; pointer-events: none; }
.vibecode-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vibecode-heading h2 { font-size: clamp(2rem, 4vw, 3rem); }
.vibecode-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(380px, 1.22fr); gap: clamp(24px, 4vw, 46px); align-items: start; }
.vibecode-layout:has(.vibecode-result[hidden]) { grid-template-columns: minmax(280px, 720px); }
.vibecode-existing { margin-bottom: 12px; }
.vibecode-existing select { background: rgb(255 255 255 / 72%); }
.vibecode-compose form { display: grid; gap: 12px; }
.vibecode-compose textarea { min-height: 142px; border-color: #d6c9bf; background: rgb(255 255 255 / 82%); font-size: .79rem; }
.vibecode-compose textarea:focus { border-color: var(--accent); outline: 3px solid rgb(184 78 47 / 9%); }
.vibecode-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vibecode-actions button { min-width: 126px; }
.vibecode-examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.vibecode-examples button { min-height: 30px; padding: 0 10px; border-color: #dfd2c7; border-radius: 999px; background: rgb(255 255 255 / 60%); color: var(--muted); font-size: .6rem; font-weight: 650; }
.vibecode-examples button:hover { border-color: var(--accent); background: white; color: var(--accent); }
.vibecode-worklog { display: grid; max-height: 286px; gap: 0; overflow: auto; margin: 18px 0 0; padding: 2px 4px 2px 0; list-style: none; scrollbar-width: thin; }
.vibecode-work-item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; min-height: 29px; padding: 4px 0; color: var(--muted); font: .61rem/1.55 var(--mono); }
.vibecode-work-item::before { position: relative; z-index: 1; width: 8px; height: 8px; margin: 5px 0 0 3px; border: 1px solid #aaa097; border-radius: 50%; background: #fffefa; content: ""; }
.vibecode-work-item:not(:last-child)::after { position: absolute; top: 17px; bottom: -5px; left: 6.5px; width: 1px; background: #d9d1c9; content: ""; }
.vibecode-work-item.running { color: var(--accent-dark); }
.vibecode-work-item.running::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgb(184 78 47 / 11%); animation: vibecode-pulse 1.15s ease-in-out infinite; }
.vibecode-work-item.done::before { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px #fffefa; }
.vibecode-work-item.warning { color: var(--amber); }
.vibecode-work-item.warning::before { border-color: #b07a1b; background: #e0a43d; }
.vibecode-work-item.error { color: var(--red); }
.vibecode-work-item.error::before { border-color: var(--red); background: var(--red); }
.vibecode-progress { min-height: 1.5em; margin: 13px 0 0; color: var(--muted); font: .61rem/1.5 var(--mono); }
.vibecode-progress.busy { color: var(--accent); }
.vibecode-result { display: grid; gap: 14px; }
.vibecode-preview { overflow: hidden; aspect-ratio: 5 / 3; border: 1px solid #bfb5ab; border-radius: 7px; background: #e7e2d9; box-shadow: 0 15px 35px rgb(49 39 31 / 10%); }
.vibecode-preview canvas { display: block; width: 100%; height: 100%; }
.vibecode-result-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 18px; align-items: center; }
.vibecode-result-copy > div { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.vibecode-result-copy strong { overflow: hidden; font: 400 1.35rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.vibecode-result-copy span { color: var(--quiet); font: .55rem var(--mono); text-transform: uppercase; }
.vibecode-result-copy p { grid-column: 1; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.vibecode-result-copy button { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

@keyframes vibecode-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgb(184 78 47 / 10%); }
	50% { box-shadow: 0 0 0 6px rgb(184 78 47 / 16%); }
}

@media (prefers-reduced-motion: reduce) {
	.vibecode-work-item.running::before { animation: none; }
}

.energy-card { margin-top: 22px; padding: clamp(25px, 4vw, 42px); }
.energy-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.energy-heading h2 { font-size: clamp(2rem, 4vw, 3rem); }
.energy-layout { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(330px, 1.45fr) minmax(190px, .8fr); gap: clamp(22px, 3vw, 36px); }
.energy-summary { padding-right: clamp(20px, 3vw, 34px); border-right: 1px solid #e7e2da; }
.energy-label { margin: 0 0 7px; color: var(--muted); font-size: .67rem; font-weight: 700; }
.energy-summary > strong { display: block; font: 400 clamp(2rem, 4vw, 3.1rem)/1 var(--serif); letter-spacing: -.045em; }
.energy-summary > .muted { margin-top: 11px; }
.soc-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; color: var(--muted); font-size: .66rem; }
.soc-row b { color: var(--ink); font: .68rem var(--mono); }
.soc-track { overflow: hidden; height: 7px; margin-top: 8px; border-radius: 999px; background: var(--soft); }
.soc-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c37647, #4c895f); transition: width 240ms ease; }
.energy-facts { display: grid; gap: 0; margin: 22px 0 0; }
.energy-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eeeae3; }
.energy-facts dt { color: var(--muted); font-size: .63rem; }
.energy-facts dd { margin: 0; font: .61rem var(--mono); text-align: right; }
.energy-analysis { min-width: 0; }
.energy-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.energy-subheading h3, .energy-settings h3 { margin: 0; font-size: .73rem; }
.energy-subheading span { color: var(--quiet); font: .55rem var(--mono); }
.voltage-chart { position: relative; min-height: 118px; margin-top: 10px; border: 1px solid #ebe6de; border-radius: 7px; background: #fbfaf7; }
.voltage-chart canvas { display: block; width: 100%; height: 118px; }
.voltage-chart p { position: absolute; inset: 0; display: grid; margin: 0; color: var(--quiet); font-size: .66rem; place-items: center; }
.consumption-heading { margin-top: 20px; }
.energy-breakdown { display: grid; gap: 10px; margin-top: 12px; }
.energy-breakdown > div { display: grid; grid-template-columns: minmax(115px, .75fr) minmax(90px, 1fr); align-items: center; gap: 12px; }
.energy-breakdown span { display: grid; gap: 2px; min-width: 0; }
.energy-breakdown strong { font-size: .63rem; }
.energy-breakdown small { color: var(--quiet); font: .52rem var(--mono); }
.energy-breakdown i { overflow: hidden; height: 6px; border-radius: 999px; background: var(--soft); }
.energy-breakdown b { display: block; width: 0; height: 100%; border-radius: inherit; background: #bb6c46; }
.energy-settings { padding-left: clamp(20px, 3vw, 34px); border-left: 1px solid #e7e2da; }
.energy-settings > p { margin: 10px 0 18px; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.capacity-input { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.capacity-input input { width: 100%; padding-right: 50px; }
.capacity-input span { margin-left: -43px; color: var(--quiet); font: .58rem var(--mono); pointer-events: none; }
.energy-settings button { width: 100%; }
.energy-quality { margin-top: 23px; padding-top: 17px; border-top: 1px solid #ebe7df; }
.energy-quality strong { font-size: .65rem; }
.energy-quality p { margin: 7px 0; color: var(--muted); font-size: .62rem; line-height: 1.55; }
.energy-quality code { color: var(--quiet); font: .52rem var(--mono); }

.photo-card { display: grid; grid-template-columns: minmax(230px, .6fr) minmax(0, 1.4fr); gap: 28px; margin-top: 22px; }
.photo-copy h2 { margin-bottom: 14px; }
.photo-copy > p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.55; }
#photo-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-button { display: inline-flex; align-items: center; margin: 13px 7px 0 0; cursor: pointer; }
#send-photo { margin-top: 13px; border-color: var(--line); background: white; color: var(--ink); }
#send-photo:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.photo-stage { align-self: center; }
.photo-stage canvas { display: block; width: 100%; border: 1px solid #cbc6bd; border-radius: 6px; background: white; }
.photo-stage p { margin: 8px 0 0; color: var(--muted); font: .6rem var(--mono); }

.events-card { margin-top: 22px; padding: clamp(25px, 4vw, 42px); }
.activity-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.activity-heading h2 { font-size: clamp(2rem, 4vw, 3rem); }
.activity-controls { display: flex; align-items: center; gap: 10px; }
.activity-health { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid #d3dfd5; border-radius: 7px; background: #f4f8f3; color: var(--green); font-size: .69rem; font-weight: 720; white-space: nowrap; }
.activity-health i { width: 7px; height: 7px; border-radius: 50%; background: #4c895f; box-shadow: 0 0 0 4px rgb(76 137 95 / 10%); }
.activity-health.bad { border-color: #ecd1cb; background: #fff7f5; color: var(--red); }
.activity-health.bad i { background: var(--red); box-shadow: 0 0 0 4px rgb(150 57 46 / 10%); }
.activity-filter { display: block; }
.activity-filter select { min-height: 38px; padding: 0 34px 0 12px; border-color: var(--line); background-color: var(--surface); font-size: .68rem; font-weight: 680; }
.activity-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 12px; border: 1px solid #e6e1d8; border-radius: 10px; background: rgb(251 249 245 / 72%); }
.activity-summary > div { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 13px; min-width: 0; padding: 17px 20px; }
.activity-summary > div + div { border-left: 1px solid #e2ddd4; }
.activity-summary span { display: grid; min-width: 0; gap: 3px; }
.activity-summary dt { color: var(--muted); font-size: .63rem; }
.activity-summary dd { overflow: hidden; margin: 0; font: 400 clamp(1rem, 2vw, 1.25rem) var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.summary-icon { display: grid; width: 38px; height: 38px; border: 1px solid #eaded3; border-radius: 50%; background: #fbf6f1; color: #a75b3c; font: 1.1rem var(--sans); place-items: center; }
.summary-icon::before { line-height: 1; }
.summary-icon.recent::before { content: "◷"; }
.summary-icon.next::before { content: "▣"; font-size: .85rem; }
.summary-icon.count::before { content: "↻"; }
.events { position: relative; display: grid; margin: 0; padding: 7px 0 0; list-style: none; }
.events::before { position: absolute; top: 7px; bottom: 20px; left: 20px; width: 1px; background: #e3ded6; content: ""; }
.events > li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 17px; align-items: center; min-height: 76px; padding: 13px 0; }
.events > li + li::after { position: absolute; top: 0; right: 0; left: 59px; height: 1px; background: #ebe7df; content: ""; }
.event-marker { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; border: 5px solid var(--surface); border-radius: 50%; background: #ece8e1; color: #766f67; font-size: .7rem; font-style: normal; font-weight: 850; place-items: center; box-shadow: 0 0 0 1px #e3ded6; }
.event-marker::before { content: "•"; }
.activity-event.success .event-marker { background: #dfeedd; color: #4d7e4f; box-shadow: 0 0 0 1px #cfe0cd; }
.activity-event.success .event-marker::before { content: "✓"; }
.activity-event.pending .event-marker { background: #f8ead0; color: #9a6823; box-shadow: 0 0 0 1px #ead7b2; }
.activity-event.pending .event-marker::before { content: "↗"; }
.activity-event.system .event-marker { background: #e4edf3; color: #4b7692; box-shadow: 0 0 0 1px #d2e0e9; }
.activity-event.system .event-marker::before { content: "↻"; }
.activity-event.firmware .event-marker::before { content: "↑"; }
.activity-event.error .event-marker { background: #f5dfda; color: var(--red); box-shadow: 0 0 0 1px #e8ccc5; }
.activity-event.error .event-marker::before { content: "!"; }
.event-copy { display: grid; min-width: 0; gap: 5px; }
.event-copy strong { font-size: .76rem; }
.event-description { overflow: hidden; color: var(--muted); font-size: .66rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.event-meta { color: var(--quiet); font: .58rem var(--mono); }
.event-time { display: grid; min-width: 74px; justify-items: end; gap: 4px; color: var(--muted); }
.event-time time { font: .68rem var(--mono); }
.event-time small { color: var(--quiet); font-size: .6rem; }
.event-details summary { margin-top: 2px; color: var(--amber); font-size: .61rem; cursor: pointer; list-style: none; }
.event-details summary::-webkit-details-marker { display: none; }
.event-details summary::after { margin-left: 6px; content: "⌄"; }
.event-details[open] summary::after { content: "⌃"; }
.event-details ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 9px 12px; border-left: 2px solid #ead8b6; background: #fcf8ef; color: var(--muted); font: .57rem/1.45 var(--mono); list-style: none; }
.events > .empty-event { display: block; min-height: 0; padding: 30px 0 10px 59px; color: var(--muted); font-size: .75rem; }
.events > .empty-event::after { display: none; }
.events-more { min-height: 34px; margin-top: 6px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: .68rem; }
.events-more:hover { background: transparent; color: var(--accent-dark); }
.events-more span { margin-left: 5px; }

@media (max-width: 820px) {
	.site-header, main { width: min(100% - 28px, 680px); }
	.brand small { display: none; }
	.site-header nav { gap: 12px; }
	.hero-grid, .action-grid, .photo-card, .vibecode-layout { grid-template-columns: 1fr; }
	.energy-layout { grid-template-columns: minmax(190px, .75fr) minmax(300px, 1.25fr); }
	.energy-settings { grid-column: 1 / -1; padding: 23px 0 0; border-top: 1px solid #e7e2da; border-left: 0; }
	.energy-settings form { grid-template-columns: minmax(160px, 1fr) auto; align-items: end; }
	.energy-settings form > label { grid-column: 1; }
	.energy-settings form > button { grid-column: 2; grid-row: 1; width: auto; }
	.status-card { order: -1; }
	.activity-heading { align-items: flex-end; }
	.activity-summary > div { padding-inline: 14px; }
}

@media (max-width: 520px) {
	.site-header nav a:first-child { display: none; }
	.device-bar { grid-template-columns: minmax(0, 1fr) auto; }
	.screen-card figcaption { display: grid; }
	.screen-card code { max-width: 100%; }
	.input-action { grid-template-columns: 1fr; }
	.energy-layout { grid-template-columns: 1fr; }
	.energy-summary { padding: 0 0 23px; border-right: 0; border-bottom: 1px solid #e7e2da; }
	.energy-settings { grid-column: auto; }
	.energy-settings form { grid-template-columns: 1fr; }
	.energy-settings form > button { grid-column: 1; grid-row: auto; width: 100%; }
	.activity-heading { display: grid; }
	.activity-controls { justify-content: space-between; }
	.activity-summary { grid-template-columns: 1fr; }
	.activity-summary > div + div { border-top: 1px solid #e2ddd4; border-left: 0; }
	.events > li { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
	.event-time { grid-column: 2; grid-row: 2; min-width: 0; justify-items: start; }
	.event-time small { display: none; }
	.device-option { grid-template-columns: 86px 8px minmax(0, 1fr); }
	.device-option-state { grid-column: 3; }
	.vibecode-result-copy { grid-template-columns: 1fr; }
	.vibecode-result-copy button { grid-column: 1; grid-row: auto; width: 100%; }
}

.wake-progress { margin: 8px 0 28px; }
#wake-progress-label { margin: 0 0 10px; font: 500 15px/1.5 sans-serif; color: #436b58; }
#wake-progress-bar { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: #e5e3dc; color: #568367; accent-color: #568367; }
#wake-progress-bar::-webkit-progress-bar { background: #e5e3dc; }
#wake-progress-bar::-webkit-progress-value { background: #568367; transition: width .2s; }
#wake-progress-bar::-moz-progress-bar { background: #568367; }
.wake-progress[data-state="error"] #wake-progress-label { color: #ac4d32; }
.wake-progress[data-state="error"] #wake-progress-bar { accent-color: #ac4d32; color: #ac4d32; }
.wake-progress[data-state="error"] #wake-progress-bar::-webkit-progress-value { background: #ac4d32; }
.wake-progress[data-state="error"] #wake-progress-bar::-moz-progress-bar { background: #ac4d32; }

#device-name { overflow-wrap: anywhere; }
#device-name-form { margin-top: 14px; }
#device-name-form small { display: block; margin-top: 8px; }
#rename-device { padding: 4px 0; }

.photo-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.photo-controls label { display: grid; gap: 6px; color: var(--muted); font-size: .75rem; }
.photo-controls input, .photo-controls select { width: 100%; min-width: 0; }
.photo-controls output { font-family: var(--mono); }
#photo-editor { cursor: grab; touch-action: none; margin-top: 8px; }
#photo-editor:active { cursor: grabbing; }
#paste-photo { margin-left: 8px; }
.photo-copy:has(#photo-file:focus-visible) .file-button { outline: 2px solid var(--accent); }