Glassmorphism Form Controls in CSS, Bootstrap & Tailwind

<div class="g-scene" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="wrap"><div class="split">
<div class="col">
<section class="g-glass g-panel" aria-labelledby="c1"><span class="lbl" id="c1">Text fields and select</span>
  <div class="fields">
    <div class="g-field"><label class="g-label" for="f-name">Full name</label><input class="g-input" id="f-name" type="text" autocomplete="name" value="Amara Okafor"></div>
    <div class="g-field"><label class="g-label" for="f-mail">Work email</label><input class="g-input" id="f-mail" type="email" autocomplete="email" placeholder="[email protected]" aria-describedby="f-mail-hint"><span class="g-hint" id="f-mail-hint">We send the invoice here.</span></div>
    <div class="g-field"><label class="g-label" for="f-search">Search invoices</label><div class="g-with-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input class="g-input" id="f-search" type="search" placeholder="Number or client"></div></div>
    <div class="g-field"><label class="g-label" for="f-team">Team</label><div class="g-select"><select class="g-input" id="f-team"><option>Design</option><option selected>Engineering</option><option>Marketing</option><option>Operations</option></select></div></div>
  </div>
</section>
<section class="g-glass g-panel" aria-labelledby="c2"><span class="lbl" id="c2">Checkboxes, radios and range</span>
  <div class="choices">
    <fieldset class="g-group"><legend class="g-label">Email me about</legend>
      <label class="g-check"><input type="checkbox" checked>Product updates</label>
      <label class="g-check"><input type="checkbox">Weekly digest</label>
      <label class="g-check"><input type="checkbox" checked>Security alerts</label>
    </fieldset>
    <fieldset class="g-group"><legend class="g-label">Plan</legend>
      <label class="g-check"><input type="radio" name="plan" value="starter">Starter</label>
      <label class="g-check"><input type="radio" name="plan" value="team" checked>Team</label>
      <label class="g-check"><input type="radio" name="plan" value="enterprise">Enterprise</label>
    </fieldset>
  </div>
  <div class="g-field"><label class="g-label" for="f-vol">Notification volume</label>
    <input class="g-range" id="f-vol" type="range" min="0" max="10" value="6" aria-describedby="f-vol-scale">
    <div class="g-scale" id="f-vol-scale"><span>0 Silent</span><span>10 Loud</span></div></div>
</section>
</div>
<form class="g-glass g-login" action="#" aria-labelledby="login-title">
  <span class="lbl">Login card</span>
  <h2 id="login-title">Welcome back</h2>
  <p class="g-intro">Sign in to Northwind Studio.</p>
  <div class="g-field"><label class="g-label" for="l-mail">Email</label><input class="g-input" id="l-mail" type="email" autocomplete="username" placeholder="[email protected]" required></div>
  <div class="g-field"><div class="g-label-row"><label class="g-label" for="l-pass">Password</label><a class="g-link" href="#reset">Forgot password?</a></div><input class="g-input" id="l-pass" type="password" autocomplete="current-password" required></div>
  <div class="g-between"><label class="g-check"><input type="checkbox" name="remember">Keep me signed in</label></div>
  <button class="g-btn g-btn--accent" type="submit">Sign in</button>
  <div class="g-or">or</div>
  <button class="g-btn" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="12" r="4"/><path d="M12 12h9M18 12v3M21 12v2"/></svg>Sign in with a passkey</button>
  <p class="g-foot">New to Northwind? <a class="g-link" href="#signup">Create an account</a></p>
</form>
</div></div>

/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* scene: fixed page background of four gradient orbs (decorative, aria-hidden) */
:where([data-scene]){color:var(--glass-ink)}
.g-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--scene-base)}
.g-scene i{position:absolute;aspect-ratio:1;border-radius:50%;animation:g-drift 32s ease-in-out infinite alternate}
.g-scene i:nth-child(1){width:clamp(240px,40vw,520px);left:-7%;top:-9%;background:var(--scene-1)}
.g-scene i:nth-child(2){width:clamp(170px,26vw,360px);right:-5%;top:18%;background:var(--scene-2);animation-delay:-9s}
.g-scene i:nth-child(3){width:clamp(220px,34vw,460px);left:28%;bottom:-16%;background:var(--scene-3);animation-delay:-17s}
.g-scene i:nth-child(4){width:clamp(90px,13vw,180px);left:54%;top:7%;background:var(--scene-4);animation-delay:-4s}
@keyframes g-drift{to{transform:translate3d(3vw,4vh,0) scale(1.06)}}
/* glass surface */
.g-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);box-shadow:var(--glass-highlight),var(--glass-shadow);color:var(--glass-ink)}
.g-glass--strong{background:var(--glass-bg-strong)}
.g-panel{padding:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.g-muted{color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-scene i{animation:none}}
/* buttons: glass control, tinted accent glass, quiet text button, round icon button */
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.g-row+.g-row{margin-top:14px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glass-highlight);
  color:var(--glass-ink);font:inherit;font-size:.95rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .2s,transform .2s}
.g-btn:hover{background:var(--glass-bg-strong)}
.g-btn:active{transform:translateY(1px)}
.g-btn:focus-visible,.g-icon-btn:focus-visible{outline:3px solid var(--glass-focus);outline-offset:3px}
.g-btn svg,.g-icon-btn svg{width:18px;height:18px;flex:none}
.g-btn--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent);
  box-shadow:var(--glass-highlight)}
.g-btn--accent:hover{background:var(--glass-accent-bg);filter:brightness(1.08)}
.g-btn--quiet{border-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.g-btn--quiet:hover{background:var(--glass-bg-control)}
.g-btn--strong{background:var(--glass-bg-strong)} /* for buttons placed straight on the scene */
.g-btn--sm{min-height:36px;padding:0 14px;font-size:.85rem}
.g-btn--lg{min-height:54px;padding:0 28px;font-size:1.05rem}
.g-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.g-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--glass-edge);border-radius:50%;
  background:var(--glass-bg-control);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-highlight);color:var(--glass-ink);cursor:pointer;transition:background-color .2s,transform .2s}
.g-icon-btn:hover{background:var(--glass-bg-strong)}
.g-icon-btn:active{transform:scale(.96)}
.g-icon-btn--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-icon-btn--accent:hover{background:var(--glass-accent-bg);filter:brightness(1.08)}
.g-icon-btn--lg{width:56px;height:56px}
.g-icon-btn--lg svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.g-btn,.g-icon-btn{transition:none}.g-btn:active,.g-icon-btn:active{transform:none}}
/* form controls: every field has a 3:1 --glass-edge boundary and turns more opaque on focus */
.g-field{display:grid;gap:6px;align-content:start}
.g-label{font-size:.88rem;font-weight:600;color:var(--glass-ink)}
.g-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.g-input{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--glass-edge);border-radius:12px;background:var(--glass-bg-control);
  box-shadow:var(--glass-highlight);color:var(--glass-ink);font:inherit;font-size:.95rem;transition:background-color .2s}
.g-input::placeholder{color:var(--glass-ink-soft);opacity:1}
.g-input:hover,.g-input:focus{background:var(--glass-bg-strong)}
.g-input:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
.g-hint{font-size:.8rem;color:var(--glass-ink-soft)}
.g-with-icon{position:relative}
.g-with-icon svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--glass-ink-soft);pointer-events:none}
.g-with-icon .g-input{padding-left:42px}
.g-select{position:relative}
.g-select select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer}
.g-select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--glass-ink);border-bottom:2px solid var(--glass-ink);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.g-group{display:grid;gap:10px;margin:0;padding:0;border:0}
.g-group legend{margin-bottom:10px;padding:0}
.g-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.95rem}
.g-check input{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--glass-edge);border-radius:7px;
  background:var(--glass-bg-control) 50% / 14px no-repeat;cursor:pointer;transition:background-color .15s}
.g-check input[type=radio]{border-radius:50%}
.g-check input:checked{border-color:transparent;background-color:var(--glass-accent-bg);
  background-image:var(--glass-check-icon)}
.g-check input[type=radio]:checked{background-image:radial-gradient(circle,var(--glass-on-accent) 0 4px,transparent 4.5px);background-size:auto}
.g-check input:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
/* range slider: 3:1 track edge, accent thumb with a white ring */
.g-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.g-range::-webkit-slider-runnable-track{height:10px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-moz-range-track{height:8px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid #fff;border-radius:50%;
  background:var(--glass-accent-bg);box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--glass-accent-bg);
  box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus-visible{outline:3px solid var(--glass-focus);outline-offset:4px;border-radius:999px}
.g-scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--glass-ink-soft)}
.g-link{color:var(--glass-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.g-link:hover{text-decoration-thickness:2px}
.g-link:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.g-input,.g-check input{transition:none}}
/* login card */
.g-login{display:grid;gap:16px;padding:32px}
.g-login h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.01em}
.g-login .g-intro{margin-top:-10px;color:var(--glass-ink-soft);font-size:.95rem}
.g-login .g-btn{width:100%}
.g-login .g-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.9rem}
.g-or{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--glass-ink-soft)}
.g-or::before,.g-or::after{content:"";flex:1;height:1px;background:var(--glass-edge);opacity:.5}
.g-login .g-foot{text-align:center;font-size:.9rem;color:var(--glass-ink-soft)}

<div class="g-scene" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="wrap"><div class="row g-4 align-items-start">
<div class="col-lg-7 d-flex flex-column gap-4">
<section class="card g-glass g-form" aria-labelledby="c1"><div class="card-body"><span class="lbl" id="c1">Text fields and select</span>
  <div class="row g-3">
    <div class="col-sm-6"><label class="form-label" for="f-name">Full name</label><input class="form-control" id="f-name" type="text" autocomplete="name" value="Amara Okafor"></div>
    <div class="col-sm-6"><label class="form-label" for="f-mail">Work email</label><input class="form-control" id="f-mail" type="email" autocomplete="email" placeholder="[email protected]" aria-describedby="f-mail-hint"><div class="form-text" id="f-mail-hint">We send the invoice here.</div></div>
    <div class="col-sm-6"><label class="form-label" for="f-search">Search invoices</label><div class="position-relative"><svg class="g-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input class="form-control" id="f-search" type="search" placeholder="Number or client"></div></div>
    <div class="col-sm-6"><label class="form-label" for="f-team">Team</label><select class="form-select" id="f-team"><option>Design</option><option selected>Engineering</option><option>Marketing</option><option>Operations</option></select></div>
  </div>
</div></section>
<section class="card g-glass g-form" aria-labelledby="c2"><div class="card-body"><span class="lbl" id="c2">Checkboxes, radios and range</span>
  <div class="row g-4">
    <div class="col-sm-6"><fieldset class="d-grid gap-2"><legend class="form-label mb-2">Email me about</legend>
      <div class="form-check"><input class="form-check-input" type="checkbox" id="e1" checked><label class="form-check-label" for="e1">Product updates</label></div>
      <div class="form-check"><input class="form-check-input" type="checkbox" id="e2"><label class="form-check-label" for="e2">Weekly digest</label></div>
      <div class="form-check"><input class="form-check-input" type="checkbox" id="e3" checked><label class="form-check-label" for="e3">Security alerts</label></div>
    </fieldset></div>
    <div class="col-sm-6"><fieldset class="d-grid gap-2"><legend class="form-label mb-2">Plan</legend>
      <div class="form-check"><input class="form-check-input" type="radio" name="plan" id="p1" value="starter"><label class="form-check-label" for="p1">Starter</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="plan" id="p2" value="team" checked><label class="form-check-label" for="p2">Team</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="plan" id="p3" value="enterprise"><label class="form-check-label" for="p3">Enterprise</label></div>
    </fieldset></div>
    <div class="col-12"><label class="form-label" for="f-vol">Notification volume</label>
      <input class="form-range d-block" id="f-vol" type="range" min="0" max="10" value="6" aria-describedby="f-vol-scale">
      <div class="g-scale" id="f-vol-scale"><span>0 Silent</span><span>10 Loud</span></div></div>
  </div>
</div></section>
</div>
<div class="col-lg-5">
<form class="card g-glass g-form g-login" action="#" aria-labelledby="login-title"><div class="card-body">
  <span class="lbl mb-0">Login card</span>
  <h2 id="login-title">Welcome back</h2>
  <p class="g-intro">Sign in to Northwind Studio.</p>
  <div><label class="form-label" for="l-mail">Email</label><input class="form-control" id="l-mail" type="email" autocomplete="username" placeholder="[email protected]" required></div>
  <div><div class="d-flex justify-content-between align-items-baseline gap-3"><label class="form-label" for="l-pass">Password</label><a class="g-link" href="#reset">Forgot password?</a></div><input class="form-control" id="l-pass" type="password" autocomplete="current-password" required></div>
  <div class="form-check"><input class="form-check-input" type="checkbox" id="l-rem" name="remember"><label class="form-check-label" for="l-rem">Keep me signed in</label></div>
  <button class="btn btn-glass btn-glass-accent w-100" type="submit">Sign in</button>
  <div class="g-or">or</div>
  <button class="btn btn-glass w-100" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="12" r="4"/><path d="M12 12h9M18 12v3M21 12v2"/></svg>Sign in with a passkey</button>
  <p class="g-foot">New to Northwind? <a class="g-link" href="#signup">Create an account</a></p>
</div></form>
</div>
</div></div>

/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* scene: fixed page background of four gradient orbs (decorative, aria-hidden) */
:where([data-scene]){color:var(--glass-ink)}
.g-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--scene-base)}
.g-scene i{position:absolute;aspect-ratio:1;border-radius:50%;animation:g-drift 32s ease-in-out infinite alternate}
.g-scene i:nth-child(1){width:clamp(240px,40vw,520px);left:-7%;top:-9%;background:var(--scene-1)}
.g-scene i:nth-child(2){width:clamp(170px,26vw,360px);right:-5%;top:18%;background:var(--scene-2);animation-delay:-9s}
.g-scene i:nth-child(3){width:clamp(220px,34vw,460px);left:28%;bottom:-16%;background:var(--scene-3);animation-delay:-17s}
.g-scene i:nth-child(4){width:clamp(90px,13vw,180px);left:54%;top:7%;background:var(--scene-4);animation-delay:-4s}
@keyframes g-drift{to{transform:translate3d(3vw,4vh,0) scale(1.06)}}
/* glass surface */
.g-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);box-shadow:var(--glass-highlight),var(--glass-shadow);color:var(--glass-ink)}
.g-glass--strong{background:var(--glass-bg-strong)}
.g-panel{padding:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.g-muted{color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-scene i{animation:none}}
/* Bootstrap: the glass tokens feed Bootstrap's own component variables */
.card.g-glass{--bs-card-bg:var(--glass-bg);--bs-card-border-color:var(--glass-border);--bs-card-border-radius:var(--glass-radius);
  --bs-card-inner-border-radius:calc(var(--glass-radius) - 1px);--bs-card-color:var(--glass-ink);--bs-card-spacer-x:24px;--bs-card-spacer-y:24px;
  --bs-card-title-color:var(--glass-ink);--bs-card-subtitle-color:var(--glass-ink-soft)}
:where([data-scene]){--bs-body-color:var(--glass-ink);--bs-secondary-color:var(--glass-ink-soft);--bs-border-color:var(--glass-edge);;--bs-emphasis-color:var(--glass-ink)}
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn-glass{--bs-btn-padding-x:20px;--bs-btn-padding-y:0;--bs-btn-font-size:.95rem;--bs-btn-font-weight:600;--bs-btn-line-height:1;--bs-btn-border-radius:999px;
  --bs-btn-color:var(--glass-ink);--bs-btn-bg:var(--glass-bg-control);--bs-btn-border-color:var(--glass-edge);
  --bs-btn-hover-color:var(--glass-ink);--bs-btn-hover-bg:var(--glass-bg-strong);--bs-btn-hover-border-color:var(--glass-edge);
  --bs-btn-active-color:var(--glass-ink);--bs-btn-active-bg:var(--glass-bg-strong);--bs-btn-active-border-color:var(--glass-edge);
  --bs-btn-disabled-color:var(--glass-ink);--bs-btn-disabled-bg:var(--glass-bg-control);--bs-btn-disabled-border-color:var(--glass-edge);--bs-btn-disabled-opacity:.5;
  --bs-btn-focus-box-shadow:var(--glass-highlight);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glass-highlight);
  transition:background-color .2s,transform .2s}
.btn-glass:active{transform:translateY(1px)}
.btn-glass:focus-visible,.btn-check:focus-visible+.btn-glass{outline:3px solid var(--glass-focus);outline-offset:3px}
.btn-glass svg{width:18px;height:18px;flex:none}
.btn-glass-accent{--bs-btn-color:var(--glass-on-accent);--bs-btn-bg:var(--glass-accent-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--glass-on-accent);--bs-btn-hover-bg:var(--glass-accent-bg);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--glass-on-accent);--bs-btn-active-bg:var(--glass-accent-bg);--bs-btn-active-border-color:transparent}
.btn-glass-accent:hover{filter:brightness(1.08)}
.btn-glass-quiet{--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-hover-bg:var(--glass-bg-control);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.btn-glass-strong{--bs-btn-bg:var(--glass-bg-strong)} /* for buttons placed straight on the scene */
.btn-glass.btn-sm{--bs-btn-padding-x:14px;--bs-btn-font-size:.85rem;min-height:36px}
.btn-glass.btn-lg{--bs-btn-padding-x:28px;--bs-btn-font-size:1.05rem;min-height:54px}
.btn-glass.btn-icon{width:44px;height:44px;min-height:0;padding:0}
.btn-glass.btn-icon.btn-sm{width:36px;height:36px}
.btn-glass.btn-icon.btn-sm svg{width:16px;height:16px}
.btn-glass.btn-icon.btn-lg{width:56px;height:56px}
.btn-glass.btn-icon.btn-lg svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.btn-glass{transition:none}.btn-glass:active{transform:none}}
/* forms: .form-control, .form-select, .form-check-input and .form-range read Bootstrap variables set from the tokens */
.g-form{--bs-body-bg:var(--glass-bg-control);--bs-body-color:var(--glass-ink);--bs-border-color:var(--glass-edge);--bs-border-radius:12px;
  --bs-secondary-color:var(--glass-ink-soft);--bs-secondary-bg:var(--glass-bg-control);--bs-tertiary-bg:var(--glass-bg-control)}
.g-form .form-label{margin-bottom:6px;font-size:.88rem;font-weight:600;color:var(--glass-ink)}
.g-form .form-control,.g-form .form-select{min-height:46px;padding:10px 14px;font-size:.95rem;box-shadow:var(--glass-highlight);transition:background-color .2s}
.g-form .form-select{padding-right:42px;background-position:right 14px center;cursor:pointer}
.g-form .form-control::placeholder{color:var(--glass-ink-soft);opacity:1}
.g-form .form-control:hover,.g-form .form-select:hover,
.g-form .form-control:focus,.g-form .form-select:focus{background-color:var(--glass-bg-strong);border-color:var(--glass-edge);box-shadow:var(--glass-highlight)}
.g-form .form-control:focus-visible,.g-form .form-select:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
.g-form .form-text{margin-top:6px;font-size:.8rem;color:var(--glass-ink-soft)}
.g-form .g-icon{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--glass-ink-soft);pointer-events:none}
.g-form .g-icon+.form-control{padding-left:42px}
.g-form .form-check{display:flex;align-items:center;gap:10px;min-height:0;margin:0;padding:0;font-size:.95rem}
.g-form .form-check-input:not([role=switch]){flex:none;float:none;width:22px;height:22px;margin:0;border:1.5px solid var(--glass-edge);border-radius:7px;cursor:pointer;
  background-color:var(--glass-bg-control);background-size:14px}
.g-form .form-check-input[type=radio]{border-radius:50%;background-size:auto}
.g-form .form-check-input:not([role=switch]):focus{border-color:var(--glass-edge);box-shadow:none}
.g-form .form-check-input:not([role=switch]):checked{--bs-form-check-bg-image:var(--glass-check-icon);border-color:transparent;background-color:var(--glass-accent-bg)}
.g-form .form-check-input[type=radio]:not([role=switch]):checked{--bs-form-check-bg-image:radial-gradient(circle,var(--glass-on-accent) 0 4px,transparent 4.5px)}
.g-form .form-check-input:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
.g-form .form-check-label{cursor:pointer}
.g-form .form-range{height:28px}
.g-form .form-range::-webkit-slider-runnable-track{height:10px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-form .form-range::-moz-range-track{height:8px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-form .form-range::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px;border:3px solid #fff;border-radius:50%;background:var(--glass-accent-bg);
  box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-form .form-range::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--glass-accent-bg);
  box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-form .form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-form .form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-form .form-range:focus-visible{outline:3px solid var(--glass-focus);outline-offset:4px;border-radius:999px}
.g-scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--glass-ink-soft)}
.g-link{color:var(--glass-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.g-link:hover{color:var(--glass-ink);text-decoration-thickness:2px}
.g-link:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.g-form .form-control,.g-form .form-select{transition:none}}
/* login card: a .card with .card-body */
.g-login .card-body{display:grid;gap:16px;padding:32px}
.g-login h2{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.g-login .g-intro{margin:-10px 0 0;color:var(--glass-ink-soft);font-size:.95rem}
.g-or{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--glass-ink-soft)}
.g-or::before,.g-or::after{content:"";flex:1;height:1px;background:var(--glass-edge);opacity:.5}
.g-login .g-foot{margin:0;text-align:center;font-size:.9rem;color:var(--glass-ink-soft)}

<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-(image:--scene-base)">
  <i class="absolute -top-[9%] -left-[7%] aspect-square w-[clamp(240px,40vw,520px)] rounded-full bg-(image:--scene-1) motion-safe:animate-drift"></i>
  <i class="absolute top-[18%] -right-[5%] aspect-square w-[clamp(170px,26vw,360px)] rounded-full bg-(image:--scene-2) [animation-delay:-9s] motion-safe:animate-drift"></i>
  <i class="absolute -bottom-[16%] left-[28%] aspect-square w-[clamp(220px,34vw,460px)] rounded-full bg-(image:--scene-3) [animation-delay:-17s] motion-safe:animate-drift"></i>
  <i class="absolute top-[7%] left-[54%] aspect-square w-[clamp(90px,13vw,180px)] rounded-full bg-(image:--scene-4) [animation-delay:-4s] motion-safe:animate-drift"></i>
</div>
<div class="mx-auto flex max-w-[980px] flex-col gap-[26px]"><div class="grid items-start gap-[26px] min-[821px]:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
<div class="flex flex-col gap-[26px]">
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass p-6" aria-labelledby="c1"><span class="mb-4 block text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase" id="c1">Text fields and select</span>
  <div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,210px),1fr))] gap-4">
    <div class="grid content-start gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="f-name">Full name</label><input class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" id="f-name" type="text" autocomplete="name" value="Amara Okafor"></div>
    <div class="grid content-start gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="f-mail">Work email</label><input class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" id="f-mail" type="email" autocomplete="email" placeholder="[email protected]" aria-describedby="f-mail-hint"><span class="text-[.8rem] text-ink-soft" id="f-mail-hint">We send the invoice here.</span></div>
    <div class="grid content-start gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="f-search">Search invoices</label><div class="relative"><svg class="pointer-events-none absolute top-1/2 left-[14px] size-[18px] -translate-y-1/2 text-ink-soft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg><input class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none pl-[42px]" id="f-search" type="search" placeholder="Number or client"></div></div>
    <div class="grid content-start gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="f-team">Team</label><div class="relative after:pointer-events-none after:absolute after:top-1/2 after:right-[18px] after:size-2 after:-translate-y-[70%] after:rotate-45 after:border-r-2 after:border-b-2 after:border-ink after:content-['']"><select class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none cursor-pointer appearance-none pr-[42px]" id="f-team"><option>Design</option><option selected>Engineering</option><option>Marketing</option><option>Operations</option></select></div></div>
  </div>
</section>
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass p-6" aria-labelledby="c2"><span class="mb-4 block text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase" id="c2">Checkboxes, radios and range</span>
  <div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,180px),1fr))] gap-x-[26px] gap-y-[22px]">
    <fieldset class="grid gap-2.5"><legend class="text-[.88rem] font-semibold text-ink mb-2.5">Email me about</legend>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="checkbox" class="size-[22px] flex-none cursor-pointer appearance-none rounded-[7px] border-[1.5px] border-glass-edge bg-glass-control bg-size-[14px] bg-center bg-no-repeat transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-(image:--glass-check-icon) focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" checked>Product updates</label>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="checkbox" class="size-[22px] flex-none cursor-pointer appearance-none rounded-[7px] border-[1.5px] border-glass-edge bg-glass-control bg-size-[14px] bg-center bg-no-repeat transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-(image:--glass-check-icon) focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none">Weekly digest</label>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="checkbox" class="size-[22px] flex-none cursor-pointer appearance-none rounded-[7px] border-[1.5px] border-glass-edge bg-glass-control bg-size-[14px] bg-center bg-no-repeat transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-(image:--glass-check-icon) focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" checked>Security alerts</label>
    </fieldset>
    <fieldset class="grid gap-2.5"><legend class="text-[.88rem] font-semibold text-ink mb-2.5">Plan</legend>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="radio" name="plan" value="starter" class="size-[22px] flex-none cursor-pointer appearance-none rounded-full border-[1.5px] border-glass-edge bg-glass-control transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-[radial-gradient(circle,var(--glass-on-accent)_0_4px,transparent_4.5px)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none">Starter</label>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="radio" name="plan" value="team" class="size-[22px] flex-none cursor-pointer appearance-none rounded-full border-[1.5px] border-glass-edge bg-glass-control transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-[radial-gradient(circle,var(--glass-on-accent)_0_4px,transparent_4.5px)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" checked>Team</label>
      <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="radio" name="plan" value="enterprise" class="size-[22px] flex-none cursor-pointer appearance-none rounded-full border-[1.5px] border-glass-edge bg-glass-control transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-[radial-gradient(circle,var(--glass-on-accent)_0_4px,transparent_4.5px)] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none">Enterprise</label>
    </fieldset>
  </div>
  <div class="mt-[22px] grid gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="f-vol">Notification volume</label>
    <input class="range-glass rounded-full focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-focus" id="f-vol" type="range" min="0" max="10" value="6" aria-describedby="f-vol-scale">
    <div class="flex justify-between text-[.8rem] text-ink-soft" id="f-vol-scale"><span>0 Silent</span><span>10 Loud</span></div></div>
</section>
</div>
<form class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass grid gap-4 p-8" action="#" aria-labelledby="login-title">
  <span class="block text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase">Login card</span>
  <h2 class="text-2xl leading-tight font-bold tracking-[-.01em]" id="login-title">Welcome back</h2>
  <p class="-mt-2.5 text-[.95rem] text-ink-soft">Sign in to Northwind Studio.</p>
  <div class="grid gap-1.5"><label class="text-[.88rem] font-semibold text-ink" for="l-mail">Email</label><input class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" id="l-mail" type="email" autocomplete="username" placeholder="[email protected]" required></div>
  <div class="grid gap-1.5"><div class="flex items-baseline justify-between gap-3"><label class="text-[.88rem] font-semibold text-ink" for="l-pass">Password</label><a class="rounded-[4px] font-semibold text-ink underline underline-offset-3 hover:decoration-2 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus" href="#reset">Forgot password?</a></div><input class="min-h-[46px] w-full rounded-xl border border-glass-edge bg-glass-control px-[14px] py-[10px] text-[.95rem] text-ink inset-shadow-glass transition-colors duration-200 placeholder:text-ink-soft hover:bg-glass-strong focus:bg-glass-strong focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none" id="l-pass" type="password" autocomplete="current-password" required></div>
  <label class="flex cursor-pointer items-center gap-2.5 text-[.95rem]"><input type="checkbox" name="remember" class="size-[22px] flex-none cursor-pointer appearance-none rounded-[7px] border-[1.5px] border-glass-edge bg-glass-control bg-size-[14px] bg-center bg-no-repeat transition-colors duration-150 checked:border-transparent checked:bg-accent-glass checked:bg-(image:--glass-check-icon) focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none">Keep me signed in</label>
  <button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border border-transparent bg-accent-glass leading-none font-semibold text-on-accent no-underline inset-shadow-glass backdrop-blur-glass transition-[filter,translate] duration-200 hover:brightness-[1.08] active:translate-y-px focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:translate-y-0 min-h-11 px-5 text-[.95rem] w-full" type="submit">Sign in</button>
  <div class="flex items-center gap-3 text-[.8rem] text-ink-soft before:h-px before:flex-1 before:bg-glass-edge before:opacity-50 before:content-[''] after:h-px after:flex-1 after:bg-glass-edge after:opacity-50 after:content-['']">or</div>
  <button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border border-glass-edge bg-glass-control leading-none font-semibold text-ink no-underline inset-shadow-glass backdrop-blur-glass transition-[background-color,translate] duration-200 hover:bg-glass-strong active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:translate-y-0 min-h-11 px-5 text-[.95rem] w-full" type="button"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="12" r="4"/><path d="M12 12h9M18 12v3M21 12v2"/></svg>Sign in with a passkey</button>
  <p class="text-center text-[.9rem] text-ink-soft">New to Northwind? <a class="rounded-[4px] font-semibold text-ink underline underline-offset-3 hover:decoration-2 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus" href="#signup">Create an account</a></p>
</form>
</div></div>

/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* Tailwind theme: utilities such as bg-glass, border-glass-edge, backdrop-blur-glass and text-ink read the tokens above */
@theme inline {
  --color-glass: var(--glass-bg);
  --color-glass-strong: var(--glass-bg-strong);
  --color-glass-control: var(--glass-bg-control);
  --color-glass-border: var(--glass-border);
  --color-glass-edge: var(--glass-edge);
  --color-ink: var(--glass-ink);
  --color-ink-soft: var(--glass-ink-soft);
  --color-accent: var(--glass-accent);
  --color-accent-glass: var(--glass-accent-bg);
  --color-on-accent: var(--glass-on-accent);
  --color-focus: var(--glass-focus);
  --color-good: var(--glass-good);
  --color-good-glass: var(--glass-good-bg);
  --color-bad: var(--glass-bad);
  --color-bad-glass: var(--glass-bad-bg);
  --color-warn: var(--glass-warn);
  --color-warn-glass: var(--glass-warn-bg);
  --color-scrim: var(--glass-scrim);
  --blur-glass: var(--glass-blur);
  --radius-glass: var(--glass-radius);
  --shadow-glass: var(--glass-shadow);
  --inset-shadow-glass: var(--glass-highlight);
  --animate-drift: g-drift 32s ease-in-out infinite alternate;
}
@keyframes g-drift { to { transform: translate3d(3vw,4vh,0) scale(1.06); } }
/* range track and thumb: pseudo-elements, kept as one utility */
@utility range-glass {
  appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  &::-webkit-slider-runnable-track { height: 10px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-bg-control); }
  &::-moz-range-track { height: 8px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-bg-control); }
  &::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 3px solid #fff; border-radius: 50%; background: var(--glass-accent-bg); box-shadow: 0 0 0 1px var(--glass-edge), 0 2px 6px rgb(0 0 0 / .25); }
  &::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--glass-accent-bg); box-shadow: 0 0 0 1px var(--glass-edge), 0 2px 6px rgb(0 0 0 / .25); }
}