:root { --black:#0b0b0d; --panel:#141417; --panel-2:#1a1a1f; --red:#ee2d38; --red-dark:#a91e27; --white:#f3f0ec; --muted:#85838a; --line:#303035; --mono:'DM Mono', monospace; --sans:'Space Grotesk', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--white); background:var(--black); font-family:var(--sans); } body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.06; background-image:radial-gradient(#fff .55px, transparent .55px); background-size:5px 5px; z-index:0; } .noise { position:fixed; top:0; right:0; width:40vw; height:100vh; pointer-events:none; opacity:.22; background:linear-gradient(130deg,transparent 45%,var(--red-dark) 45.2%, transparent 48%); filter:blur(70px); }
.app-shell { max-width:1200px; margin:auto; position:relative; z-index:1; padding:0 22px 50px; } .topbar { height:90px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:13px; color:var(--white); text-decoration:none; } .brand img { width:50px; height:50px; object-fit:contain; filter:grayscale(1) brightness(3); } .brand-divider { width:1px; height:31px; background:var(--red); transform:skew(-19deg); } .brand-label { font:500 10px/1.2 var(--mono); letter-spacing:.11em; } .brand-label em { color:var(--red); font-style:normal; } .account-area { display:flex; gap:8px; align-items:center; } .status-dot,.pulse-mark { color:var(--red); font-size:14px; } .status-dot:after { content:'ONLINE'; color:var(--muted); font:9px var(--mono); margin-left:6px; } .avatar { width:37px; height:37px; border:1px solid var(--line); border-radius:50%; color:var(--white); background:var(--panel); font:12px var(--mono); cursor:pointer; } .hidden { display:none !important; }
.hero { padding:76px 0 50px; max-width:760px; } .eyebrow,.challenge-kicker,.hero-meta,.progress-top,.progress-caption,.challenge-footer,.site-footer { font:10px var(--mono); letter-spacing:.12em; } .eyebrow { color:var(--red); display:flex; gap:10px; align-items:center; } .eyebrow-line { width:25px; height:1px; background:var(--red); } h1 { margin:18px 0 16px; font-size:clamp(4.6rem, 15vw, 9.8rem); line-height:.8; letter-spacing:-.09em; font-weight:700; } h1 span { color:transparent; -webkit-text-stroke:1px var(--white); } h1 .red { color:var(--red); -webkit-text-stroke:0; } .hero-copy { color:#bbb8bc; font-size:17px; line-height:1.5; max-width:415px; margin:0 0 27px; } .hero-meta { color:var(--muted); display:flex; gap:30px; } .hero-meta b { color:var(--white); font-weight:400; }
.progress-card { background:var(--panel); border:1px solid var(--line); padding:19px 20px 15px; margin-bottom:25px; } .progress-top { display:flex; justify-content:space-between; color:var(--muted); } .progress-top strong { color:var(--white); font-weight:400; } .progress-track { height:4px; background:#2a2a2e; margin:16px 0 12px; } #progress-bar { height:100%; width:0; background:var(--red); transition:width .4s ease; } .progress-caption { color:var(--muted); display:flex; justify-content:space-between; }
.challenge-list { display:grid; gap:13px; } .challenge { display:grid; grid-template-columns:76px 1fr; background:var(--panel); border:1px solid var(--line); transition:border-color .25s, transform .25s; } .challenge:hover { border-color:#5b5a60; transform:translateY(-2px); } .challenge.done { border-color:var(--red-dark); } .challenge-number { padding:22px 0 0 20px; color:var(--red); font:15px var(--mono); } .challenge-body { padding:21px 24px 18px 0; } .challenge-kicker { color:var(--red); display:flex; justify-content:space-between; } .challenge-kicker span { color:var(--muted); } h2 { font-size:clamp(1.45rem,4vw,2.25rem); line-height:1; letter-spacing:-.055em; margin:12px 0 9px; } .challenge p { color:#a6a4aa; font-size:13px; line-height:1.45; margin:0 0 18px; max-width:610px; } .challenge-footer { border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); } .complete-button { background:none; border:0; padding:0; color:var(--red); font:10px var(--mono); cursor:pointer; } .complete-button:disabled { opacity:.5; } .complete-button span { font-size:15px; margin-left:4px; }.done .complete-button { color:#6fc78d; }
.upload-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:19px 0; max-width:430px; } .add-tile,.photo-tile { aspect-ratio:1; border:1px dashed #55545a; background:#202024; color:var(--muted); position:relative; overflow:hidden; } .add-tile { cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; } .add-tile span { color:var(--red); font-size:25px; line-height:1; } .add-tile small { font:8px var(--mono); margin-top:5px; } .add-tile.disabled { opacity:.3; pointer-events:none; } .photo-tile img { width:100%; height:100%; object-fit:cover; } .photo-tile span { position:absolute; left:5px; bottom:4px; color:white; font:9px var(--mono); text-shadow:0 1px 4px #000; } .photo-tile i { position:absolute; inset:0; display:grid; place-items:center; background:#0009; color:var(--red); font-style:normal; } .file-input { display:none; } .field-wrap { display:flex; align-items:center; gap:10px; border-bottom:1px solid #55545a; max-width:620px; margin:20px 0; padding-bottom:9px; } .field-prefix { color:var(--red); font:11px var(--mono); } .field-wrap input { border:0; outline:0; background:none; color:var(--white); width:100%; font:14px var(--mono); } .field-wrap input::placeholder { color:#646269; } .single-upload { margin:20px 0; } .upload-button { display:flex; gap:9px; align-items:center; color:var(--white); background:#202024; border:1px dashed #55545a; padding:13px 15px; font:10px var(--mono); cursor:pointer; } .upload-button>span:first-child { color:var(--red); font-size:17px; } .has-photo .upload-button { padding:0; border-style:solid; } .has-photo img { width:60px; height:48px; object-fit:cover; display:block; } .has-photo .upload-button span { padding-right:14px; }
.site-footer { border-top:1px solid var(--line); margin-top:70px; padding-top:24px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); } .site-footer img { width:35px; height:35px; object-fit:contain; filter:grayscale(1) brightness(2); }
.modal-backdrop { position:fixed; inset:0; z-index:5; background:#000b; display:grid; place-items:center; padding:20px; } .auth-modal { background:var(--panel); border:1px solid #4a484f; width:min(100%,430px); padding:34px 30px 27px; position:relative; box-shadow:0 20px 80px #000; } .close-modal { position:absolute; top:12px; right:16px; color:var(--muted); background:none; border:0; font-size:25px; cursor:pointer; } .auth-mark { font:18px var(--mono); color:var(--white); margin-bottom:34px; } .auth-mark span { color:var(--red); } .auth-modal h2 { font-size:3rem; margin:16px 0 10px; } .auth-modal h2 span { color:var(--red); } .auth-modal p { color:var(--muted); font-size:13px; line-height:1.45; } .auth-modal form { display:grid; gap:14px; margin-top:22px; } .auth-modal label { color:var(--muted); font:10px var(--mono); } .auth-modal input { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line); background:#202024; color:var(--white); outline:0; font:13px var(--mono); } .auth-modal input:focus { border-color:var(--red); } .primary-button { background:var(--red); color:white; border:0; padding:14px; font:11px var(--mono); cursor:pointer; margin-top:5px; } .primary-button:disabled { opacity:.5; }.switch-auth { display:block; margin:18px auto 0; background:none; border:0; color:var(--muted); font:11px var(--mono); cursor:pointer; } .switch-auth u { color:var(--white); }.form-message { min-height:17px; text-align:center; margin:14px 0 0 !important; color:#7bd197 !important; }.form-message.error { color:#ff737b !important; }
.auth-page { min-height:100vh; } .auth-shell { width:min(100% - 40px, 500px); margin:auto; padding:35px 0 25px; position:relative; z-index:1; } .auth-shell>.brand { margin-bottom:60px; } .auth-panel { width:100%; box-shadow:0 20px 80px #000; } .auth-panel h1 { font-size:clamp(3.7rem, 15vw, 5.5rem); line-height:.82; letter-spacing:-.08em; margin:16px 0; } .auth-panel h1 span { color:var(--red); -webkit-text-stroke:0; } .auth-footer { color:var(--muted); text-align:center; font:9px var(--mono); letter-spacing:.13em; margin-top:25px; }
.account-menu-wrap { position:relative; } .account-dropdown { position:absolute; z-index:4; top:48px; right:0; width:220px; padding:16px; background:var(--panel-2); border:1px solid #48474d; box-shadow:0 18px 45px #000b; } .account-profile { display:grid; gap:5px; } .profile-label { color:var(--red); font:10px var(--mono); letter-spacing:.12em; } .account-profile strong { color:var(--white); font:14px var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-profile small { color:var(--muted); font:10px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .menu-divider { height:1px; background:var(--line); margin:15px 0 12px; } .logout-button { width:100%; display:flex; justify-content:space-between; align-items:center; color:var(--red); background:none; border:0; padding:0; font:10px var(--mono); cursor:pointer; } .logout-button span { font-size:15px; }
.profile-shell { width:min(100% - 40px, 620px); margin:auto; padding:28px 0 40px; position:relative; z-index:1; } .profile-header { height:70px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .profile-code { color:var(--muted); font:10px var(--mono); letter-spacing:.1em; } .profile-card { margin:70px auto 0; padding:35px 30px 28px; text-align:center; background:var(--panel); border:1px solid var(--line); box-shadow:0 20px 70px #0009; } .profile-eyebrow { color:var(--red); font:11px var(--mono); letter-spacing:.14em; } .profile-avatar-wrap { width:108px; height:108px; margin:25px auto 20px; border:1px solid var(--red); border-radius:50%; background:linear-gradient(145deg,#3b171b,#17171b); display:grid; place-items:center; overflow:hidden; position:relative; } .profile-avatar { display:none; width:100%; height:100%; object-fit:cover; } .profile-avatar.has-image { display:block; } .profile-avatar-wrap span { color:var(--white); font:42px var(--sans); } .profile-card h1 { font-size:clamp(2.6rem,10vw,4.5rem); line-height:.9; margin:0; letter-spacing:-.08em; } .profile-card h1 span { color:var(--red); } .profile-card>p { color:var(--muted); font:13px var(--mono); margin:13px 0 0; } .profile-line { height:1px; background:var(--line); margin:28px 0 18px; } .profile-meta { display:flex; justify-content:space-between; color:var(--muted); font:11px var(--mono); letter-spacing:.1em; } .profile-meta strong { color:#6fc78d; font-weight:400; } .profile-logout { width:100%; margin-top:25px; } .profile-note { font-size:11px !important; }
.home-link,.profile-home-button { color:var(--white); text-decoration:none; font:11px var(--mono); letter-spacing:.08em; } .home-link span,.profile-home-button span { color:var(--red); font-size:15px; margin-left:4px; } .profile-home-button { display:block; margin-top:18px; padding:13px; border:1px solid var(--line); color:var(--muted); } .profile-home-button:hover,.home-link:hover { color:var(--red); }
@media (max-width:600px) { .app-shell { padding:0 15px 35px; } .topbar { height:72px; } .brand img { width:42px; height:42px; } .brand-label { font-size:9px; } .hero { padding:60px 0 38px; } h1 { font-size:clamp(4.2rem, 20vw, 7rem); } .hero-copy { font-size:15px; } .hero-meta { gap:15px; font-size:8px; flex-wrap:wrap; } .challenge { grid-template-columns:47px 1fr; } .challenge-number { padding:23px 0 0 12px; font-size:12px; } .challenge-body { padding:20px 13px 17px 0; } .challenge-kicker { font-size:8px; } h2 { font-size:1.45rem; } .challenge p { font-size:12px; } .challenge-footer { font-size:8px; } .complete-button { font-size:8px; } .site-footer { font-size:8px; } .site-footer img { width:26px; height:26px; } .auth-modal { padding:29px 21px 22px; } .auth-shell { width:min(100% - 30px, 500px); } .auth-shell>.brand { margin-bottom:35px; } }
.eyebrow,.challenge-kicker,.hero-meta,.progress-top,.progress-caption,.challenge-footer,.site-footer { font-size:11px; }
.challenge p { font-size:15px; }
.complete-button { font-size:11px; }
.auth-modal label { font-size:12px; }
.auth-modal input { font-size:15px; }
.primary-button,.switch-auth { font-size:12px; }
.upload-grid small { font-size:10px; }
@media (max-width:600px) { .brand-label { font-size:10px; } .hero-meta,.challenge-kicker,.challenge-footer,.site-footer { font-size:10px; } .challenge p { font-size:14px; } .complete-button { font-size:10px; } .progress-top,.progress-caption { font-size:10px; } }