:root{
      --bg:#0f172a;
      --card:#0b1220;
      --acc:#22d3ee;
      --acc2:#a78bfa;
      --text:#e2e8f0;
      --muted:#94a3b8;
      --ring: rgba(34,211,238,0.6);
    }

    *{box-sizing:border-box}
    body{
      margin:0; min-height:100svh; 
      font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      background:
        radial-gradient(1200px 600px at 100% -20%, color-mix(in oklab, var(--acc) 30%, transparent), transparent),
        radial-gradient(1000px 500px at -10% 120%, color-mix(in oklab, var(--acc2) 30%, transparent), transparent),
        var(--bg);
      color:var(--text);
      display:grid; place-items:center; padding:16px;
    }

    .card{
      width:min(640px,100%);
      background:linear-gradient(180deg, color-mix(in oklab, var(--card) 85%, rgba(255,255,255,0.02) 0%), var(--card));
      border:1px solid rgba(255,255,255,.06);
      border-radius:24px; padding:20px; 
      box-shadow:0 15px 40px rgba(0,0,0,.35);
    }

    .logo{
      display:flex; justify-content:center; margin-bottom:16px;
    }
    .logo img{max-width:120px; height:auto; border-radius:12px;}

    .header{display:flex; flex-direction:column; align-items:center; margin-bottom:8px; text-align:center;}
    h1{font-size:20px; margin:0 0 4px 0}
    p.help{margin:0 0 16px 0; color:var(--muted); font-size:14px}

    .legend{display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:6px}

    .scale{display:grid; grid-template-columns: repeat(5,1fr); gap:10px; margin:10px 0 4px}
    .scale input{position:absolute; inset:0; opacity:0}
    .scale label{position:relative; display:grid; place-items:center; height:56px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); backdrop-filter: blur(6px); font-size:18px; font-weight:700; cursor:pointer; transition:.25s ease; outline: none}
    .scale label:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
    .scale label:hover{transform: translateY(-1px)}
    .scale input:checked + span{transform:scale(1.05)}
    .scale label::after{content:""; position:absolute; inset: -1px; border-radius:16px; pointer-events:none; transition:.3s}
    .scale label.selected{border-color: color-mix(in oklab, var(--acc) 45%, #fff 0%); box-shadow: 0 6px 18px rgba(34,211,238,.18), inset 0 0 0 1px rgba(255,255,255,.05)}

    .hidden{display:none}
    .fade{opacity:0; transform: translateY(6px); transition: .35s ease}
    .fade.show{opacity:1; transform:none}

    .visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

    textarea{width:100%; min-height:110px; border-radius:16px; padding:14px 14px 42px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color:var(--text); resize: vertical; outline: none}
    textarea:focus{box-shadow:0 0 0 3px var(--ring)}

    .actions{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
    .counter{font-size:12px; color:var(--muted)}

    button.send{appearance:none; border:0; padding:14px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px; background:linear-gradient(90deg, var(--acc), var(--acc2)); color:#0b1220; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.25); transition:.2s}
    button.send:disabled{opacity:.6; filter:grayscale(.3); cursor:not-allowed; box-shadow:none}

    button.prev{appearance:none; border:0; padding:14px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px; background:linear-gradient(90deg, var(--acc), var(--acc2)); color:#0b1220; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.25); transition:.2s}
    button.prev:disabled{opacity:.6; filter:grayscale(.3); cursor:not-allowed; box-shadow:none}

	 button.next{appearance:none; border:0; padding:14px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px; background:linear-gradient(90deg, var(--acc), var(--acc2)); color:#0b1220; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.25); transition:.2s}
    button.next:disabled{opacity:.6; filter:grayscale(.3); cursor:not-allowed; box-shadow:none}


    .thanks{place-items:center; text-align:center; padding:24px}
    .thanks.active{display:grid; animation:fadeIn .4s ease forwards}
    .thanks h2{margin:6px 0 8px; font-size:22px}
    .thanks p{color:var(--muted); margin:0}

    @keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
	  
	  input, textarea, button {
  font-size: 16px;
}