:root { --ink: #171717; --paper: #d9d6d2; --brown: #65483a; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 80% 18%,#ddff73 0 2%,transparent 18%),radial-gradient(circle at 82% 68%,#c7bcff 0 6%,transparent 27%),var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
main { min-height: 100vh; padding: 24px; }
form { width: min(100%, 900px); min-height: calc(100vh - 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; margin: 0 auto; }
label { font-size: clamp(56px, 10vw, 132px); font-weight: 700; letter-spacing: -.06em; line-height: .9; }
input { width: 100%; border: 0; border-bottom: 4px solid var(--brown); outline: 0; padding: 10px 0 16px; background: transparent; color: var(--brown); font: inherit; font-size: clamp(38px, 7vw, 96px); font-weight: 700; letter-spacing: -.05em; }
input:focus { border-color: var(--ink); }
.save-button { align-self: center; width: min(100%, 360px); margin-top: 24px; border: 2px solid #2d6a32; border-radius: 16px; padding: 22px 30px; background: #4e9b55; color: #fff; cursor: pointer; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 7px 0 #2d6a32; }
.save-button:hover { background: #5caf63; }
.save-button:active { transform: translateY(2px); }
.switch { align-self:center; display:flex; align-items:center; gap:10px; margin:26px 0 0; color:var(--brown); font-size:16px; font-weight:600; }
.switch a { display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--brown); padding:5px 1px; color:var(--ink); font-weight:800; text-decoration:none; transition:color .2s,border-color .2s; }
.switch a span { color:#2d6a32; font-size:20px; line-height:0; transition:transform .2s; }.switch a:hover,.switch a:focus-visible { border-color:#2d6a32; color:#2d6a32; }.switch a:hover span,.switch a:focus-visible span { transform:translate(3px,-3px); }
@media (max-width: 600px) { .switch { margin-top:14px; font-size:14px; } }
input { border:3px solid var(--brown); border-radius:0; padding:18px 16px; background:rgb(255 255 255 / .38); }input:focus { border-color:var(--ink); background:#fff; }.save-button { border:2px solid var(--ink); border-radius:24px; background:var(--ink); color:var(--paper); box-shadow:12px 12px 0 var(--brown); }.save-button:hover { background:var(--ink); box-shadow:8px 8px 0 var(--brown); transform:translate(-4px,-4px); }.save-button:active { transform:translate(4px,4px); box-shadow:3px 3px 0 var(--brown); }.switch { justify-content:center; width:100%; text-align:center; }