| |
| |
| |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| -webkit-text-size-adjust: 100%; |
| } |
|
|
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--ink); |
| font-family: var(--font-sans); |
| font-size: var(--text-base); |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); |
| } |
|
|
| h1, h2, h3, h4 { |
| margin: 0; |
| line-height: 1.18; |
| letter-spacing: -0.018em; |
| font-weight: 700; |
| text-wrap: balance; |
| } |
|
|
| p { |
| margin: 0; |
| } |
|
|
| img { |
| max-width: 100%; |
| } |
|
|
| a { |
| color: var(--accent); |
| text-decoration-thickness: 1px; |
| text-underline-offset: 2px; |
| } |
|
|
| a:hover { |
| color: var(--accent-strong); |
| } |
|
|
| code { |
| font-family: var(--font-mono); |
| font-size: 0.88em; |
| background: var(--code-bg); |
| color: var(--code-ink); |
| padding: 0.14rem 0.42rem; |
| border-radius: var(--r-sm); |
| } |
|
|
| pre { |
| overflow: auto; |
| white-space: pre-wrap; |
| padding: var(--s-4); |
| border-radius: var(--r-md); |
| border: 1px solid var(--line); |
| background: var(--surface-2); |
| color: var(--ink-2); |
| font-family: var(--font-mono); |
| font-size: var(--text-sm); |
| } |
|
|
| pre code { |
| background: none; |
| padding: 0; |
| color: inherit; |
| } |
|
|
| hr { |
| border: 0; |
| border-top: 1px solid var(--line); |
| margin: var(--s-5) 0; |
| } |
|
|
| button, |
| input, |
| textarea, |
| select { |
| font: inherit; |
| color: inherit; |
| } |
|
|
| label { |
| display: block; |
| margin: var(--s-4) 0 var(--s-1); |
| color: var(--ink-2); |
| font-size: var(--text-sm); |
| font-weight: 550; |
| } |
|
|
| input:not([type="file"]), |
| textarea, |
| select { |
| width: 100%; |
| border: 1px solid var(--line-input); |
| border-radius: var(--r-md); |
| padding: 0.62rem 0.78rem; |
| background: var(--surface); |
| color: var(--ink); |
| transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); |
| } |
|
|
| input::placeholder, |
| textarea::placeholder { |
| color: var(--ink-3); |
| opacity: 1; |
| } |
|
|
| input:hover:not(:disabled):not(:focus), |
| textarea:hover:not(:disabled):not(:focus) { |
| border-color: var(--ink-2); |
| } |
|
|
| |
| @media (max-width: 880px) { |
| input:not([type="file"]), |
| textarea, |
| select { |
| font-size: max(1rem, var(--text-base)); |
| } |
| } |
|
|
| input:focus, |
| textarea:focus, |
| select:focus { |
| outline: none; |
| border-color: var(--focus); |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); |
| } |
|
|
| input[aria-invalid="true"], |
| textarea[aria-invalid="true"] { |
| border-color: var(--danger); |
| } |
|
|
| input[aria-invalid="true"]:focus, |
| textarea[aria-invalid="true"]:focus { |
| border-color: var(--danger); |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); |
| } |
|
|
| input:disabled, |
| textarea:disabled { |
| opacity: 0.55; |
| cursor: not-allowed; |
| } |
|
|
| textarea { |
| min-height: 6.4rem; |
| resize: vertical; |
| } |
|
|
| ::selection { |
| background: var(--accent-soft); |
| color: var(--accent-on-soft); |
| } |
|
|
| |
| :focus-visible { |
| outline: 2px solid var(--focus); |
| outline-offset: 2px; |
| border-radius: var(--r-sm); |
| } |
|
|
| |
| |
| main:focus { |
| outline: none; |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
