1/*2 * The demo's design language deliberately opposes the starter's calm3 * mint-on-forest-green: charred blacks, molten gradient accents, smoke4 * greys, sharp corners, condensed display headings over a monospace body.5 * The page is structured as a working application: top bar with measured6 * facts, the incident board, then account and device panels behind7 * disclosures. The WebGL backdrop (.magma-backdrop) renders behind8 * everything; the body gradient keeps the page intentional without WebGL.9 */1011@font-face {12 font-family: "Chakra Petch";13 src: url("/fonts/chakra-petch-700.woff2") format("woff2");14 font-weight: 700;15 font-style: normal;16 font-display: swap;17}1819:root {20 --char-0: #0c0908;21 --char-1: #170f0a;22 --char-2: #221510;23 --char-line: #3a231a;24 --ash: #cfbfb6;25 --bone: #f6ebe2;26 --smoke: #9c8a80;27 --crimson: #b3122e;28 --magma: #ff3d00;29 --ember: #ff9d45;30 --heat: linear-gradient(120deg, #b3122e, #ff3d00 55%, #ff9d45);31 --focus: #ffcf99;32 --alert: #ff8a75;33 color: var(--ash);34 background: var(--char-0);35 font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;36 font-size: 15px;37 line-height: 1.65;38}3940* {41 box-sizing: border-box;42}4344::selection {45 background: var(--magma);46 color: var(--char-0);47}4849body {50 margin: 0;51 background:52 radial-gradient(120% 55% at 50% 110%, rgba(255, 61, 0, 0.16), transparent 62%),53 radial-gradient(70% 40% at 85% 0%, rgba(179, 18, 46, 0.1), transparent 70%),54 var(--char-0);55 min-height: 100vh;56}5758.magma-backdrop {59 position: fixed;60 inset: 0;61 width: 100%;62 height: 100%;63 z-index: -1;64 pointer-events: none;65}6667main {68 margin: 0 auto;69 max-width: 78rem;70 min-height: 100vh;71 padding: 2rem 1.5rem 3rem;72 position: relative;73}7475h1,76h2,77h3,78summary {79 font-family: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;80 font-weight: 700;81 text-transform: uppercase;82}8384/* The package and starter diagnostics panels render small kicker lines the85 demo's structure does not use. */86.eyebrow {87 display: none;88}8990.topbar {91 align-items: baseline;92 border-bottom: 1px solid var(--char-line);93 display: flex;94 flex-wrap: wrap;95 gap: 0.5rem 1.5rem;96 justify-content: space-between;97 padding-bottom: 0.9rem;98}99100.topbar h1 {101 background: var(--heat);102 background-clip: text;103 -webkit-background-clip: text;104 color: transparent;105 filter: drop-shadow(0 0 16px rgba(255, 61, 0, 0.3));106 font-size: 1.35rem;107 letter-spacing: 0.02em;108 margin: 0;109}110111.status-strip {112 color: var(--smoke);113 display: flex;114 flex-wrap: wrap;115 font-size: 0.78rem;116 gap: 0.4rem 1.4rem;117 margin: 0;118}119120.status-strip [data-fact="network"][data-online="no"] {121 color: var(--alert);122}123124.board {125 background: linear-gradient(180deg, rgba(255, 61, 0, 0.05), transparent 30%), var(--char-2);126 border: 1px solid var(--char-line);127 border-radius: 2px;128 margin-top: 1.5rem;129 padding: 1.4rem;130 position: relative;131}132133.board::before {134 background: var(--heat);135 content: "";136 height: 2px;137 left: -1px;138 position: absolute;139 right: -1px;140 top: -1px;141}142143label {144 color: var(--bone);145 display: block;146 font-weight: 750;147 margin-bottom: 0.5rem;148}149150.composer {151 display: flex;152 gap: 0.5rem;153}154155input,156select,157button {158 border: 1px solid var(--char-line);159 border-radius: 2px;160 font: inherit;161 padding: 0.7rem 0.8rem;162}163164input[type="text"],165input:not([type]) {166 background: #17100c;167 caret-color: var(--ember);168 color: var(--bone);169 flex: 1;170 min-width: 0;171}172173select {174 background: #17100c;175 color: var(--bone);176}177178button {179 background: var(--heat);180 border: 0;181 color: #1a0703;182 cursor: pointer;183 font-weight: 800;184 letter-spacing: 0.05em;185 text-transform: uppercase;186}187188button:hover {189 box-shadow: 0 0 20px rgba(255, 61, 0, 0.4);190}191192button:focus-visible,193input:focus-visible,194select:focus-visible,195a:focus-visible,196summary:focus-visible {197 outline: 3px solid var(--focus);198 outline-offset: 2px;199}200201.state {202 color: var(--smoke);203 min-height: 1.5rem;204}205206.columns {207 display: grid;208 gap: 1rem;209 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));210 margin-top: 1rem;211}212213.column {214 background: var(--char-1);215 border: 1px solid var(--char-line);216 border-radius: 2px;217 min-height: 16rem;218 padding: 1rem;219}220221.column h2 {222 border-bottom: 1px solid var(--char-line);223 color: var(--bone);224 display: flex;225 font-size: 0.95rem;226 justify-content: space-between;227 letter-spacing: 0.05em;228 margin: 0 0 0.9rem;229 padding-bottom: 0.6rem;230}231232.column .count {233 color: var(--ember);234}235236.column-empty {237 font-size: 0.8rem;238}239240ul {241 display: grid;242 gap: 0.65rem;243 list-style: none;244 margin: 0;245 padding: 0;246}247248.incident {249 background: var(--char-0);250 border-left: 3px solid var(--magma);251 display: grid;252 gap: 0.5rem;253 padding: 0.7rem 0.8rem;254}255256.incident.sev-smolder {257 border-left-color: var(--ember);258}259260.incident.sev-burn {261 border-left-color: var(--magma);262}263264.incident.sev-melt {265 border-left-color: var(--crimson);266 box-shadow: inset 0 0 18px rgba(179, 18, 46, 0.22);267}268269.incident-head {270 display: grid;271 gap: 0.15rem;272}273274.incident-title {275 color: var(--bone);276 overflow-wrap: anywhere;277}278279.incident-meta {280 color: var(--smoke);281 font-size: 0.75rem;282}283284.incident-actions {285 align-items: center;286 display: flex;287 flex-wrap: wrap;288 gap: 0.4rem;289}290291.incident-actions .state {292 font-size: 0.75rem;293 min-height: 0;294}295296button.move {297 background: transparent;298 border: 1px solid var(--char-line);299 color: var(--ember);300 font-size: 0.72rem;301 padding: 0.35rem 0.55rem;302}303304button.move:hover {305 border-color: var(--magma);306 box-shadow: none;307}308309[data-status="out"] .incident {310 border-left-color: var(--char-line);311 box-shadow: none;312 opacity: 0.6;313}314315[data-status="out"] .incident-title {316 color: var(--smoke);317 text-decoration: line-through;318}319320.panel {321 background: var(--char-1);322 border: 1px solid var(--char-line);323 border-radius: 2px;324 margin-top: 1rem;325}326327.panel summary {328 color: var(--bone);329 cursor: pointer;330 font-size: 0.9rem;331 letter-spacing: 0.05em;332 padding: 0.9rem 1.2rem;333}334335.panel summary::marker {336 color: var(--magma);337}338339.panel > :not(summary) {340 margin: 0 1.2rem 1.2rem;341}342343.account {344 background: var(--char-0);345 border: 1px solid var(--char-line);346 border-radius: 2px;347 color: var(--ash);348 line-height: 1.6;349 margin-top: 0;350 padding: 1.4rem;351}352353.account-out {354 border-color: var(--char-line);355}356357.account h2 {358 color: var(--bone);359 margin: 0 0 1rem;360}361362.account-field {363 margin: 0.75rem 0 0.25rem;364}365366.account-field input {367 max-width: 24rem;368 width: 100%;369}370371.account-field .account-note {372 margin: 0.35rem 0 0;373}374375.account-actions {376 display: flex;377 flex-wrap: wrap;378 gap: 0.6rem;379 margin: 0.5rem 0 0.25rem;380}381382.account-secondary {383 background: transparent;384 border: 1px solid var(--char-line);385 color: var(--bone);386}387388.account button:disabled {389 cursor: not-allowed;390 opacity: 0.55;391}392393.account-error {394 color: var(--alert);395}396397.account-note {398 color: var(--smoke);399 font-size: 0.9rem;400}401402.account dl {403 display: grid;404 gap: 0.5rem;405 grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));406 margin: 0.5rem 0 0;407}408409.account dl div {410 background: var(--char-1);411 border-left: 2px solid var(--char-line);412 padding: 0.75rem;413}414415.account dt {416 color: var(--ember);417 font-size: 0.72rem;418 font-weight: 800;419 letter-spacing: 0.08em;420 text-transform: uppercase;421}422423.account dd {424 margin: 0.25rem 0 0;425 overflow-wrap: anywhere;426}427428.account-caps dd {429 color: var(--bone);430}431432.device-status {433 background: var(--char-0);434 border: 1px solid var(--char-line);435 border-radius: 2px;436 padding: 1.4rem;437}438439.device-status h2 {440 color: var(--bone);441 margin: 0 0 0.5rem;442}443444.device-status dl {445 display: grid;446 gap: 0.5rem;447 grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));448}449450.device-status dl div {451 background: var(--char-1);452 border-left: 2px solid var(--char-line);453 padding: 0.75rem;454}455456.device-status dt {457 color: var(--ember);458 font-size: 0.72rem;459 font-weight: 800;460 letter-spacing: 0.08em;461 text-transform: uppercase;462}463464.device-status dd {465 margin: 0.25rem 0 0;466}467468.device-category {469 border-top: 1px solid var(--char-line);470 margin-top: 1.25rem;471 padding-top: 1rem;472}473474.device-category h3 {475 color: var(--bone);476 font-size: 1rem;477 margin: 0 0 0.15rem;478}479480.runtime-recovery {481 border: 1px solid var(--magma);482 border-radius: 2px;483 margin: 1rem 0;484 padding: 1rem;485}486487.runtime-recovery h4,488.runtime-recovery p {489 margin-top: 0;490}491492.device-hook {493 color: var(--smoke);494 font-size: 0.8rem;495 margin: 0 0 0.75rem;496}497498.device-hook code {499 color: var(--ember);500}501502.pwa-actions {503 background: var(--char-1);504 border: 1px solid var(--char-line);505 border-radius: 2px;506 margin-top: 1rem;507 padding: 1rem;508}509510.pwa-actions h3 {511 color: var(--bone);512 margin: 0 0 0.75rem;513}514515.pwa-actions p,516.pwa-actions ol {517 color: var(--ash);518 line-height: 1.55;519}520521.pwa-actions ol {522 margin-bottom: 0;523 padding-left: 1.4rem;524}525526.pwa-actions .pwa-error {527 color: var(--alert);528}529530footer {531 border-top: 1px solid var(--char-line);532 color: var(--smoke);533 font-size: 0.85rem;534 margin-top: 2rem;535 padding-top: 1rem;536}537538footer code {539 color: var(--ember);540}541542footer a {543 color: var(--ember);544 margin-right: 1.2rem;545}546547.topbar,548.board,549.panel,550footer {551 animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;552}553554.board {555 animation-delay: 0.08s;556}557558.panel:nth-of-type(1) {559 animation-delay: 0.16s;560}561562.panel:nth-of-type(2) {563 animation-delay: 0.22s;564}565566footer {567 animation-delay: 0.28s;568}569570@keyframes rise {571 from {572 opacity: 0;573 transform: translateY(14px);574 }575576 to {577 opacity: 1;578 transform: none;579 }580}581582@media (prefers-reduced-motion: reduce) {583 *,584 *::before,585 *::after {586 animation: none ;587 transition: none ;588 }589}590591@media (max-width: 40rem) {592 main {593 padding: 1.5rem 1rem 2.5rem;594 }595596 .composer {597 align-items: stretch;598 flex-direction: column;599 }600}