/* DV68 BREATH PASSWORD · Frost (fictional) · stage 2 of 3: the WebGL pane under the DOM, the CSS frost as the fallback.
   The pane is WebGL (js/frost.js); every word, dot and the caret are DOM above it. */

@property --hw { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --hh { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .80);
  --ink-3: rgba(255, 255, 255, .72);
  --shadow: 0 1px 18px rgba(20, 16, 40, .38);
  --coral: #ffb3a7;
  --pitch: 43px;
  --dot: 13px;
  --field-w: min(560px, 86vw);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: #6f6a92 linear-gradient(180deg, #8a8bb0 0%, #6d6497 32%, #b07a9e 50%, #d9a39a 58%, #5d587a 72%, #77769a 100%);
  color: var(--ink); overflow: hidden;
}
.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; }

.fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.gl-on .fx { opacity: 1; }
.cssfx { display: none; }

/* ---------- top bar ---------- */
.top { position: fixed; top: 34px; left: 48px; right: 48px; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  font: 500 13px/1 'Inter', sans-serif; color: var(--ink-2); letter-spacing: .02em; text-shadow: var(--shadow); pointer-events: none; }
.top .mark { font-weight: 600; letter-spacing: .26em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.top .net { display: inline-flex; align-items: center; gap: 8px; }
.top .net svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.top .net svg circle { fill: currentColor; stroke: none; }

/* ---------- centre column ---------- */
.ui { position: fixed; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px 30px; text-shadow: var(--shadow); text-align: center; }
.lock { width: 46px; height: 46px; margin-bottom: 26px; opacity: .94; }
.lock svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 1px 8px rgba(20, 16, 40, .35)); }
.lock .shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.lock.open .shackle { transform: translateY(-5px) rotate(-18deg); }
h1 { font: 300 64px/1.04 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; letter-spacing: -.02em; margin: 0; }
.sub { font: 400 16px/1.4 'Inter', sans-serif; color: var(--ink-2); margin: 14px 0 54px; letter-spacing: .01em; max-width: 32em; }
.sub, h1 { transition: opacity .35s ease; }
.ui.swap h1, .ui.swap .sub { opacity: 0; }

.form { display: flex; flex-direction: column; align-items: center; margin: 0; }
.form > .field, .form > .notes, .go, .helpwrap { transition: opacity .45s ease, transform .45s ease; }
.form.away > .field, .form.away > .notes, .form.away .go, .form.away .helpwrap { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.acts { position: relative; margin-top: 46px; }
.helpwrap { position: relative; }

/* ---------- the field ---------- */
.field { position: relative; width: var(--field-w); height: 86px; }
.label { position: absolute; left: 0; top: -26px; width: 100%; text-align: center; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255, 255, 255, .74); transition: color .2s ease; cursor: text; }
.field input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 43px; background: transparent; outline: none;
  color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  font-family: Menlo, 'SF Mono', Consolas, monospace; font-size: var(--fs, 72px); letter-spacing: 0; text-align: center;
  padding: 0 var(--pad, 56px); cursor: text; z-index: 2;
}
.field input::selection { background: transparent; color: transparent; }
.field input::-ms-reveal { display: none; }
.field input:disabled { cursor: not-allowed; }
.glyphs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.glyphs .g { position: absolute; top: 50%; left: 0; width: var(--pitch); height: 40px; margin-top: -20px; display: grid; place-items: center;
  transform: translateX(var(--x)); }
.glyphs .g::after { content: ''; width: var(--dot); height: var(--dot); border-radius: 50%; background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .62), 0 1px 3px rgba(30, 20, 60, .22); animation: pop .32s cubic-bezier(.2, 1.6, .4, 1) both; }
.glyphs.reveal .g::after { display: none; }
.glyphs .g b { display: none; font: 500 26px/1 'Inter', sans-serif; color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .5), 0 1px 3px rgba(30, 20, 60, .3); }
.glyphs.reveal .g b { display: block; }
.selbar { position: absolute; top: 50%; left: 0; height: 34px; margin-top: -17px; width: 0; border-radius: 17px; opacity: 0;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: opacity .15s ease; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.caret { position: absolute; top: 50%; left: 0; width: 2px; height: 30px; margin: -15px 0 0 -1px; background: #fff; border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 255, .7); transform: translateX(var(--cx, 0px)); opacity: 0; }
.field.focus .caret.on { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, .7) 80%, transparent);
  transition: height .2s ease, box-shadow .2s ease, background .2s ease; }
.field:hover .line { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .88) 18%, rgba(255, 255, 255, .88) 82%, transparent); }
.field.focus .line { height: 2px; box-shadow: 0 0 14px rgba(255, 255, 255, .55);
  background: linear-gradient(90deg, transparent, #fff 16%, #fff 84%, transparent); }
.field.focus .label { color: #fff; }
.ring { position: absolute; inset: -14px -22px; border-radius: 60px; pointer-events: none; border: 1.5px solid rgba(255, 255, 255, 0);
  transition: border-color .2s ease, box-shadow .2s ease; }
.kb .field.focus .ring { border-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.field.bad .line { background: linear-gradient(90deg, transparent, var(--coral) 16%, var(--coral) 84%, transparent); height: 2px;
  box-shadow: 0 0 14px rgba(255, 150, 140, .55); }
.field.bad .label { color: var(--coral); }
.field.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
.field.busy input { cursor: progress; }

.eye { position: absolute; right: 8px; top: 50%; width: 44px; height: 44px; margin-top: -22px; z-index: 3; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .82); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .2s ease, color .2s ease; }
.eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(20, 16, 40, .4)); }
.eye .slash { stroke-dasharray: 23; stroke-dashoffset: 0; transition: stroke-dashoffset .25s ease; }
.eye[aria-pressed="true"] .slash { stroke-dashoffset: 23; }
.eye:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.eye:active { background: rgba(255, 255, 255, .22); }
.eye:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.eye:disabled { opacity: .4; cursor: not-allowed; }

.notes { position: relative; height: 0; width: var(--field-w); }
.notes p { position: absolute; left: 0; right: 0; top: 12px; margin: 0; font: 500 13px/1.3 'Inter', sans-serif; letter-spacing: .01em; }
.msg { color: #fff; }
.msg:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 8px var(--coral); }
.caps { display: inline-flex; justify-content: center; align-items: center; gap: 6px; color: #fff; }
.caps[hidden] { display: none; }
.caps svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.msg:not(:empty) + .caps { top: 34px; }

/* ---------- buttons ---------- */
.go, .again { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
  font: 500 15px/1 'Inter', sans-serif; letter-spacing: .04em; color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45); padding: 0 30px; border-radius: 40px; cursor: pointer; text-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(30, 20, 60, .12), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.go .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.go:hover, .again:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .7); transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(30, 20, 60, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.go:hover .arrow { transform: translateX(3px); }
.go:active, .again:active { transform: translateY(0) scale(.98); background: rgba(255, 255, 255, .3); }
.go:focus-visible, .again:focus-visible, .help:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.go[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; background: rgba(255, 255, 255, .1); box-shadow: none; }
.go[aria-disabled="true"] .arrow { transform: none; }
.go .spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.go[aria-busy="true"] .spin { display: block; }
.go[aria-busy="true"] .arrow { display: none; }
.go[aria-busy="true"] { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
.again { position: absolute; left: 0; right: 0; top: 0; width: max-content; margin: 0 auto; white-space: nowrap; }
.again[hidden] { display: none; }

.help { margin-top: 6px; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font: 500 13px/1 'Inter', sans-serif; letter-spacing: .01em; text-shadow: var(--shadow); border-radius: 22px; transition: color .2s ease; }
.help:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.help-card { position: absolute; top: calc(100% + 2px); left: 50%; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 14px; font: 400 13px/1.4 'Inter', sans-serif; color: #fff;
  background: rgba(40, 30, 70, .22); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.help-card b { font-weight: 600; letter-spacing: .06em; }
.help-card[hidden] { display: none; }

/* ---------- caption ---------- */
.cap { position: fixed; left: 48px; bottom: 40px; z-index: 3; margin: 0; font: 500 13px/1.45 'Inter', sans-serif; letter-spacing: .02em;
  pointer-events: none; text-shadow: 0 1px 12px rgba(20, 16, 40, .45); text-align: left; }
.cap b { display: block; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 8px; }
.cap span { font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.cap i { display: block; font-style: normal; color: rgba(255, 255, 255, .72); margin-top: 4px; font-size: 13px; }
.brandmark { position: fixed; right: 48px; bottom: 40px; z-index: 3; margin: 0; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); pointer-events: none; }

/* ---------- no WebGL: CSS dusk + backdrop-filter frost whose mask opens over the field ---------- */
.no-gl .fx { display: none; }
.no-gl .cssfx { display: block; position: fixed; inset: 0; z-index: 0; }
.cs-scene { position: absolute; inset: 0;
  background:
    radial-gradient(60px 60px at calc(50% + 0.2 * var(--u, 450px)) calc(var(--hor, 60%) - 0.046 * var(--u, 450px)), #fff4dc 0 40%, rgba(255, 220, 160, .9) 48%, rgba(255, 170, 110, 0) 100%),
    radial-gradient(60% 30% at calc(50% + 0.2 * var(--u, 450px)) var(--hor, 60%), rgba(255, 170, 110, .55), rgba(255, 140, 110, 0) 70%),
    linear-gradient(180deg, #0d1034 0%, #262063 calc(var(--hor, 60%) - 0.7 * var(--u, 450px)), #5c3a86 calc(var(--hor, 60%) - 0.32 * var(--u, 450px)),
      #b34c80 calc(var(--hor, 60%) - 0.14 * var(--u, 450px)), #f27a6a calc(var(--hor, 60%) - 0.05 * var(--u, 450px)), #ffb874 calc(var(--hor, 60%) - 2px),
      #1d1430 var(--hor, 60%), #2a1f45 calc(var(--hor, 60%) + 0.05 * var(--u, 450px)), #4a4278 calc(var(--hor, 60%) + 0.2 * var(--u, 450px)), #171127 100%); }
.cs-scene::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--hor, 60%) - 0.085 * var(--u, 450px)); height: calc(0.1 * var(--u, 450px));
  background: #1d1430;
  -webkit-mask: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V12l2-6 2 6 2-9 2 9 2-5 2 5 2-8 2 8 2-4 2 4 2-10 2 10 2-6 2 6 2-7 2 7 2-3 2 3 2-8 2 8 2-5 2 5 2-9 2 9 2-6 2 6V20z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 160px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V12l2-6 2 6 2-9 2 9 2-5 2 5 2-8 2 8 2-4 2 4 2-10 2 10 2-6 2 6 2-7 2 7 2-3 2 3 2-8 2 8 2-5 2 5 2-9 2 9 2-6 2 6V20z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 160px 100% repeat-x; }
.cs-frost { position: absolute; inset: 0; -webkit-backdrop-filter: blur(26px) saturate(1.12); backdrop-filter: blur(26px) saturate(1.12);
  background: radial-gradient(120% 90% at 50% 50%, rgba(205, 208, 238, .26), rgba(225, 228, 248, .55) 100%);
  -webkit-mask: radial-gradient(var(--hw) var(--hh) at var(--hx, 50%) var(--hy, 60%), transparent 50%, #000 100%);
          mask: radial-gradient(var(--hw) var(--hh) at var(--hx, 50%) var(--hy, 60%), transparent 50%, #000 100%);
  transition: --hw .45s cubic-bezier(.2, .8, .3, 1), --hh .45s cubic-bezier(.2, .8, .3, 1); }
.cs-frost.slow { transition-duration: 4s, 4s; transition-timing-function: ease-in, ease-in; }
.cs-frost.thaw { transition-duration: 1.6s, 1.6s; }

/* ---------- short desktops ---------- */
@media (max-height: 780px) and (min-width: 601px) {
  .lock { width: 40px; height: 40px; margin-bottom: 18px; }
  h1 { font-size: 56px; }
  .sub { margin: 10px 0 46px; }
  .acts { margin-top: 40px; }
}
@media (max-height: 680px) and (min-width: 601px) {
  .lock { display: none; }
  h1 { font-size: 48px; }
  .sub { margin: 8px 0 40px; }
  .cap i { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  :root { --field-w: min(560px, calc(100vw - 32px)); }
  .top { left: 22px; right: 22px; top: 24px; }
  .top .net { display: none; }
  .ui { padding: 0 16px 64px; }
  .lock { width: 40px; height: 40px; margin-bottom: 22px; }
  h1 { font-size: 46px; }
  .sub { font-size: 15.5px; margin: 12px 0 50px; }
  .eye { right: 2px; }
  .cap { left: 22px; bottom: 26px; }
  .cap span { font-size: 15px; }
  .cap i { display: none; }
  .brandmark { display: none; }
}
@media (max-width: 360px) { h1 { font-size: 40px; } }
@media (max-width: 600px) and (max-height: 700px) {
  .lock { display: none; }
  .ui { padding-bottom: 56px; }
  .sub { margin-bottom: 42px; }
  .acts { margin-top: 38px; }
  .help { margin-top: 2px; }
}
/* phone landscape */
@media (max-height: 500px) and (min-width: 601px) {
  .top { top: 18px; }
  .lock, .sub { display: none; }
  h1 { font-size: 34px; margin-bottom: 40px; }
  .acts { margin-top: 34px; }
  .help { margin-top: 0; }
  .cap, .brandmark { display: none; }
}

@media (min-width: 2200px) {
  h1 { font-size: 80px; }
  .sub { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .field.focus .caret.on { animation: none !important; opacity: 1; }
  .cs-frost.slow { transition-duration: .6s !important; }
}