:root { font-family: system-ui, sans-serif; color: #1e293b; background: #f8fafc; } body { margin: 0; } header { display: flex; gap: 2rem; align-items: center; padding: 1rem max(5vw, 2rem); background: #0f172a; } header a { color: #e2e8f0; text-decoration: none; margin-right: 1rem; } .brand { font-weight: 700; font-size: 1.2rem; } main { max-width: 1000px; margin: 2rem auto; padding: 0 1.25rem; } table { width: 100%; border-collapse: collapse; background: white; } th, td { padding: .8rem; border-bottom: 1px solid #e2e8f0; text-align: left; } a { color: #075985; } .status { text-transform: capitalize; font-weight: 600; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .card { padding: 1rem; background: white; border: 1px solid #e2e8f0; border-radius: .5rem; } .card img { width: 100%; image-rendering: pixelated; border: 1px solid #cbd5e1; } .preview-large { max-width: 100%; width: 636px; image-rendering: pixelated; border: 1px solid #334155; background: #f7f3df; } .device-layout { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.device-layout dl { flex: 1 1 260px; }
.device-layout .preview-large { width: 320px; max-width: 100%; flex-shrink: 0; }
dl { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem; } dt { font-weight: 700; } dd { margin: 0; } select, button { display: block; margin-top: .4rem; padding: .55rem .7rem; } button { margin-top: 1rem; background: #0369a1; color: white; border: 0; border-radius: .25rem; cursor: pointer; } .notice { padding: .75rem; color: #166534; background: #dcfce7; border-radius: .25rem; } .notice.error { color: #991b1b; background: #fee2e2; }
.hero { padding: 3rem 0 2rem; } .hero p { max-width: 40rem; font-size: 1.1rem; color: #334155; } .cta { display: flex; gap: 1rem; margin-top: 1.5rem; } .button { display: inline-block; padding: .7rem 1.3rem; background: #0369a1; color: white; border-radius: .3rem; text-decoration: none; font-weight: 600; } .button.secondary { background: white; color: #0369a1; border: 1px solid #0369a1; } .auth-card { max-width: 26rem; margin: 2rem auto; padding: 2rem; background: white; border: 1px solid #e2e8f0; border-radius: .5rem; } .auth-card label { display: block; margin-top: 1rem; font-weight: 600; } .auth-card input { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: .25rem; } .settings-card { max-width: 32rem; margin-top: 1.5rem; padding: 1.5rem; background: white; border: 1px solid #e2e8f0; border-radius: .5rem; } .settings-card label { display: block; margin-top: 1rem; font-weight: 600; } .settings-card input { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: .25rem; } .account { margin-left: auto; display: flex; align-items: center; gap: .75rem; color: #e2e8f0; } .link-button { background: none; border: 0; color: #7dd3fc; cursor: pointer; padding: 0; font: inherit; } .auth-card .link-button { color: #075985; margin-top: 1rem; text-decoration: underline; }