1:root {2 color: #eff8f2;3 background: #18231f;4 font-family: Inter, ui-sans-serif, system-ui, sans-serif;5}67* {8 box-sizing: border-box;9}1011body {12 margin: 0;13}1415main {16 margin: 0 auto;17 max-width: 78rem;18 min-height: 100vh;19 padding: 4rem 1.5rem;20}2122.hero {23 max-width: 58rem;24}2526.eyebrow {27 color: #9bc9b1;28 font-size: 0.75rem;29 font-weight: 800;30 letter-spacing: 0.09em;31 text-transform: uppercase;32}3334h1 {35 font-size: clamp(2.6rem, 7vw, 6.5rem);36 letter-spacing: -0.055em;37 line-height: 0.9;38 margin: 0.7rem 0 1.5rem;39}4041.hero > p:last-child {42 color: #bed0c6;43 font-size: 1.15rem;44 line-height: 1.6;45 max-width: 48rem;46}4748.island {49 background: #22332c;50 border: 1px solid #3b594c;51 border-radius: 0.7rem;52 margin-top: 3rem;53 min-height: 24rem;54 padding: 1.4rem;55}5657.island h2 {58 font-size: 1.5rem;59 margin: 0.25rem 0 1.5rem;60}6162.device-status {63 background: #1d2b25;64 border: 1px solid #3b594c;65 border-radius: 0.7rem;66 margin-top: 1rem;67 padding: 1.4rem;68}6970.device-status h2 {71 margin: 0.25rem 0 1rem;72}7374.device-status dl {75 display: grid;76 gap: 0.5rem;77 grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));78}7980.device-status dl div {81 background: #18231f;82 padding: 0.75rem;83}8485.device-status dt {86 color: #9bc9b1;87 font-size: 0.75rem;88 font-weight: 800;89 text-transform: uppercase;90}9192.device-status dd {93 margin: 0.25rem 0 0;94}9596.device-status h2 {97 margin-bottom: 0.5rem;98}99100.device-category {101 border-top: 1px solid #3b594c;102 margin-top: 1.25rem;103 padding-top: 1rem;104}105106.device-category h3 {107 font-size: 1.05rem;108 margin: 0 0 0.15rem;109}110111.runtime-recovery {112 margin: 1rem 0;113 padding: 1rem;114 border: 1px solid var(--accent, currentColor);115 border-radius: 0.75rem;116}117118.runtime-recovery h4,119.runtime-recovery p {120 margin-top: 0;121}122123.device-hook {124 color: #9bc9b1;125 font-size: 0.8rem;126 margin: 0 0 0.75rem;127}128129.device-hook code {130 color: #d9efe2;131}132133.pwa-actions {134 background: #18231f;135 border: 1px solid #3b594c;136 border-radius: 0.5rem;137 margin-top: 1rem;138 padding: 1rem;139}140141.pwa-actions h3 {142 margin: 0 0 0.75rem;143}144145.pwa-actions p,146.pwa-actions ol {147 color: #bed0c6;148 line-height: 1.55;149}150151.pwa-actions ol {152 margin-bottom: 0;153 padding-left: 1.4rem;154}155156.pwa-actions .pwa-error {157 color: #f6b8b0;158}159160label {161 display: block;162 font-weight: 750;163 margin-bottom: 0.5rem;164}165166.composer {167 display: flex;168 gap: 0.5rem;169}170171input,172button {173 border: 1px solid #68927e;174 border-radius: 0.35rem;175 font: inherit;176 padding: 0.7rem 0.8rem;177}178179input[type="text"],180input:not([type]) {181 background: #f3faf6;182 color: #122019;183 flex: 1;184 min-width: 0;185}186187button {188 background: #99e5bd;189 color: #122019;190 cursor: pointer;191 font-weight: 800;192}193194button:focus-visible,195input:focus-visible {196 outline: 3px solid #d5f26a;197 outline-offset: 2px;198}199200.state {201 color: #bed0c6;202 min-height: 1.5rem;203}204205ul {206 display: grid;207 gap: 0.65rem;208 list-style: none;209 padding: 0;210}211212.task {213 align-items: center;214 background: #18231f;215 border-left: 3px solid #99e5bd;216 display: flex;217 gap: 0.75rem;218 padding: 0.75rem 0.9rem;219}220221.task-toggle {222 align-items: center;223 display: flex;224 gap: 0.65rem;225 margin: 0;226 min-width: 0;227}228229.task-toggle input {230 height: 1.15rem;231 width: 1.15rem;232}233234.task-toggle span {235 overflow-wrap: anywhere;236}237238.task-complete .task-toggle span {239 color: #9bc9b1;240 text-decoration: line-through;241}242243.account {244 background: #1d2b25;245 border: 1px solid #3b594c;246 border-radius: 0.7rem;247 color: #bed0c6;248 line-height: 1.6;249 margin-top: 3rem;250 padding: 1.4rem;251}252253.account-out {254 border-color: #68927e;255}256257.account h2 {258 margin: 0.25rem 0 1rem;259}260261.account-field {262 margin: 0.75rem 0 0.25rem;263}264265.account-field input {266 max-width: 24rem;267 width: 100%;268}269270.account-field .account-note {271 margin: 0.35rem 0 0;272}273274.account-actions {275 display: flex;276 flex-wrap: wrap;277 gap: 0.6rem;278 margin: 0.5rem 0 0.25rem;279}280281.account-secondary {282 background: transparent;283 color: #d9efe2;284}285286.account button:disabled {287 cursor: not-allowed;288 opacity: 0.55;289}290291.account-error {292 color: #f6b8b0;293}294295.account-note {296 color: #9bc9b1;297 font-size: 0.9rem;298}299300.account dl {301 display: grid;302 gap: 0.5rem;303 grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));304 margin: 0.5rem 0 0;305}306307.account dl div {308 background: #18231f;309 padding: 0.75rem;310}311312.account dt {313 color: #9bc9b1;314 font-size: 0.75rem;315 font-weight: 800;316 text-transform: uppercase;317}318319.account dd {320 margin: 0.25rem 0 0;321 overflow-wrap: anywhere;322}323324.account-caps dd {325 color: #d9efe2;326}327328footer {329 color: #9bc9b1;330 margin-top: 2rem;331}332333footer a {334 color: #99e5bd;335}336337@media (max-width: 40rem) {338 main {339 padding: 2.5rem 1rem;340 }341342 .composer {343 align-items: stretch;344 flex-direction: column;345 }346}