:root{ --ink: #0a0a0c; --ink-2: #14141a; --paper: #f6f3ee; --accent: oklch(0.74 0.14 70); --accent-ink: #1a1408; --live: #e54a3a; --t-primary: #ffffff; --t-secondary: rgba(255,255,255,0.6); --t-tertiary: rgba(255,255,255,0.42); --t-muted: rgba(255,255,255,0.35); --hairline: rgba(255,255,255,0.08); --strong: rgba(255,255,255,0.18); --font-display: "Fraunces", "Times New Roman", serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } .s4u-body{ margin:0; min-height:100vh; background:var(--ink); } .s4u, .s4u *, .s4u *::before, .s4u *::after{ box-sizing:border-box; } .s4u{ font-family:var(--font-ui); color:var(--t-primary); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .s4u h1, .s4u h2, .s4u h3, .s4u p{ margin:0; } .s4u a{ color:inherit; text-decoration:none; } .s4u button{ font-family:inherit; } .s4u input{ font-family:inherit; } .s4u img{ display:block; max-width:100%; } .s4u .display-serif{ font-family:var(--font-display); font-optical-sizing:auto; letter-spacing:-0.02em; } .s4u .mono{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.22em; font-size:10px; font-weight:500; } .s4u .score-num{ font-variant-numeric:tabular-nums; } .s4u .btn-primary{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:52px; border:none; border-radius:2px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-ui); font-size:14px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; transition:filter .15s ease; } .s4u .btn-primary:hover{ filter:brightness(1.08); } .s4u .btn-primary:active{ filter:brightness(0.96); } .s4u .btn-primary:disabled{ opacity:0.55; cursor:default; filter:none; } .s4u .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius:2px; background:rgba(255,255,255,0.06); color:var(--t-primary); border:1px solid rgba(255,255,255,0.12); font-family:var(--font-ui); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .s4u .btn-ghost:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.5); } .s4u .field label.mono{ color:var(--t-secondary); transition:color .2s ease; } .s4u .field .field-line{ border-bottom:1px solid var(--strong); transition:border-color .2s ease; } .s4u .field:focus-within label.mono{ color:var(--accent); } .s4u .field:focus-within .field-line{ border-bottom-color:var(--accent); } .s4u .field input, .s4u .field textarea{ width:100%; padding:0 0 6px; background:transparent; border:none; outline:none; color:var(--t-primary); font-size:15px; font-family:inherit; } .s4u .field input{ height:38px; } .s4u .field textarea{ min-height:40px; padding:6px 0; line-height:1.5; resize:vertical; } .s4u .field input::placeholder, .s4u .field textarea::placeholder{ color:var(--t-muted); } .s4u input:-webkit-autofill, .s4u input:-webkit-autofill:hover, .s4u input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px transparent inset; -webkit-text-fill-color:#fff; caret-color:#fff; transition:background-color 9999s ease-in-out 0s; } .s4u .text-danger{ color:#ff8a7a; } .s4u .field-validation-error{ display:block; margin-top:8px; color:#ff8a7a; font-size:12px; line-height:1.4; } .s4u .validation-summary-errors{ color:#ff8a7a; font-size:12.5px; line-height:1.5; } .s4u .validation-summary-errors ul{ margin:0; padding-left:16px; } .s4u .field-validation-valid, .s4u .validation-summary-valid{ display:none; }