:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #09121e; color: #e8eef5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
main { max-width: 760px; margin: 20px auto; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.8rem, 6vw, 3rem); margin: .35em 0; }
h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { line-height: 1.75; } a { color: #9bddf8; display: inline-block; padding: 10px 0; }
.eyebrow { color: #91bfcc; letter-spacing: .13em; font-size: .8rem; margin-top: 2rem; }
.grid { display: grid; gap: 14px; margin: 22px 0; }
article { border: 1px solid #324555; background: #101e2c; border-radius: 16px; padding: 18px; }
button { font: inherit; font-weight: 650; min-height: 48px; width: 100%; padding: 14px 18px; border: 1px solid #649cac; background: #b4e6e9; color: #0b2029; border-radius: 10px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: grid; gap: 12px; margin: 20px 0; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; line-height: 1.7; min-height: 48px; }
input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; }
#status { border-left: 3px solid #a3d2df; padding: 12px 16px; background: #152332; }
.muted { color: #adbdcd; font-size: .9rem; }
:focus-visible { outline: 3px solid #f6d78a; outline-offset: 4px; }
[hidden] { display: none !important; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }