:root{
  --sand-50: #f9f5ef;
  --sand-200: #e7d9c5;
  --sand-300: #d8bf9e;
  --clay-500: #a86840;
  --dune-700: #5c3b2a;
  --sky-400: #6ec4cf;
  --sun-400: #f2b544;

  --color-bg: linear-gradient(180deg, #fff7ec 0%, #fde7c5 45%, #f6d7a9 100%);
  --color-surface: #ffffffea;
  --color-border: #e7d9c5;
  --color-text: #2b2622;
  --color-muted: #6d5f55;
  --color-primary: var(--clay-500);
  --color-accent: var(--sun-400);
  --radius: 14px;
  --shadow: 0 8px 28px rgba(92,59,42,0.15);

  --step--1: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --step-0: clamp(1rem, 0.96rem + 0.4vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.8vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.35rem + 1.2vw, 1.875rem);
  --step-3: clamp(2rem, 1.8rem + 1.8vw, 2.5rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--color-text);
  background: var(--color-bg) fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;background:#fff;
  padding:.5rem 1rem;border-radius:8px;box-shadow:var(--shadow);z-index:1000
}

.site-header{
  text-align:center;
  padding:2.5rem 1rem 1.5rem;
}
.site-header h1{
  margin:0 0 .25rem;
  font-size:var(--step-3);
  letter-spacing:.02em;
  color:var(--dune-700);
}
.tagline{
  margin:0;
  color:var(--color-muted);
  font-size:var(--step-0);
}

.container{
  max-width:720px;
  margin:0 auto;
  padding:1rem;
}

.card{
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  border:1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:1.25rem;
}

.card h2{
  margin-top:0;
  font-size:var(--step-1);
  color:var(--clay-500);
}

.form{
  display:grid;
  gap:.75rem;
}

.label{font-weight:600}

.input-row{
  display:flex;
  gap:.5rem;
  align-items:center;
}

.input{
  flex:1 1 auto;
  font-size:var(--step-0);
  padding:.75rem .9rem;
  border:1px solid var(--sand-200);
  border-radius:12px;
  background:#fffdf9;
  color:var(--color-text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}
.input:focus{
  border-color: var(--clay-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay-500) 25%, white);
}

.btn{
  cursor:pointer;
  border:1px solid transparent;
  border-radius:12px;
  padding:.8rem 1rem;
  font-weight:700;
  font-size:var(--step-0);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  will-change: transform;
}
.btn.primary{
  background: linear-gradient(135deg, var(--clay-500), var(--sun-400));
  color:#fff;
  box-shadow: 0 6px 16px rgba(168,104,64,0.25);
}
.btn.primary:hover{ transform: translateY(-1px) }
.btn.primary:active{ transform: translateY(0) scale(.99) }

.helper{
  margin:.25rem 0 0;
  color:var(--color-muted);
  font-size:var(--step--1);
}

.output-wrap{
  margin-top:1rem;
  padding:.75rem 1rem;
  border:1px dashed var(--sand-300);
  border-radius:12px;
  background: #fffaf3;
}
.output{
  margin:0;
  font-size:var(--step-1);
  font-variant-numeric: lining-nums;
  min-height:1.875rem; 
}

.site-footer{
  text-align:center;
  color:var(--dune-700);
  padding:2rem 1rem 3rem;
  font-size:var(--step--1);
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none }
}

@media (prefers-color-scheme: dark){
  :root{
    --color-surface: #211a16e6;
    --color-border: #3a2c24;
    --color-text: #f2ece6;
    --color-muted: #d9c9bd;
    --color-bg: radial-gradient(1200px 800px at 20% -10%, #3e2b22 0%, #2e241f 30%, #1f1a16 100%);
    --shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .input{ background:#2a221e; border-color:#3a2c24; color:var(--color-text) }
  .output-wrap{ background:#1f1a16 }
}