:root {
      --paper: #EAECEF;
      --panel: #FDFDFB;
      --ink: #15171C;
      --ink-soft: #5A606B;
      --line: #D3D7DD;
      --brass: #B98A2E;
      /* the key: brass, warm, the one signal color */
      --brass-deep: #8A6414;
      --cipher: #2C7A6B;
      /* transformed / unreadable state */
      --danger: #B23A2E;
      --shadow: 0 1px 0 rgba(21, 23, 28, .04), 0 10px 30px -12px rgba(21, 23, 28, .28);

      /* spacing scale — every gap/padding/margin below should reference one
         of these instead of a one-off number. This is what makes spacing
         feel consistent instead of "close enough" everywhere. */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 20px;
      --sp-6: 24px;
      --sp-7: 32px;
      --sp-8: 48px;

      /* minimum touch target — WCAG 2.5.5 recommends 44x44px minimum for
         anything tappable, this is the number that shows up in every button
         rule below on mobile */
      --tap-min: 44px;

      /* type scale — replaces a scattered set of near-duplicate sizes
         (11.5px, 12px, 12.5px, 13px etc. all doing roughly the same job)
         with one system every text rule below references */
      --fs-2xs: 10px;
      --fs-xs: 11px;
      --fs-sm: 12px;
      --fs-base: 13px;
      --fs-md: 14px;
      --fs-lg: 15px;
      --fs-xl: 16px;
      --fs-2xl: 19px;
      --fs-cipher: 20px;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0
    }

    body {
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(185, 138, 46, .10), transparent 60%),
        var(--paper);
      color: var(--ink);
      font-family: "Space Grotesk", system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      line-height: 1.5;
    }

    .wrap {
      max-width: 920px;
      margin: 0 auto;
      padding: var(--sp-8) var(--sp-6) 80px;
    }

    /* header */
    .eyebrow {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-sm);
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--brass-deep);
      margin: 0 0 var(--sp-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--sp-2) var(--sp-3);
    }

    .eyebrow > span:first-child {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow > span:first-child::before {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--brass)
    }

    .whoami-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0;
      text-transform: none;
      font-size: var(--fs-xs);
      color: var(--ink-soft);
    }

    /* gate: bare-bones for now, reuses existing panel/modes/actionbar styles */
    .gate .panel input[type=email],
    .gate .panel input[type=password] {
      margin-bottom: 0;
    }

    h1 {
      font-size: clamp(34px, 6vw, 56px);
      line-height: 1.02;
      font-weight: 700;
      letter-spacing: -.02em;
      margin: 0 0 10px;
    }

    h1 .cut {
      color: var(--ink-soft)
    }

    .lede {
      max-width: 52ch;
      color: var(--ink-soft);
      font-size: var(--fs-xl);
      margin: 0
    }

    .lede code {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-base);
      color: var(--ink)
    }

    /* mode toggle */
    .modes {
      display: flex;
      gap: 0;
      margin: var(--sp-7) 0 var(--sp-5);
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      width: fit-content;
      max-width: 100%;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .modes button {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-base);
      letter-spacing: .04em;
      padding: var(--sp-3) var(--sp-5);
      min-height: var(--tap-min);
      color: var(--ink-soft);
      transition: .18s;
      white-space: nowrap;
    }

    .modes button[aria-selected="true"] {
      background: var(--ink);
      color: var(--panel)
    }

    .modes button:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: -2px
    }

    /* mute toggle rides at the end of the tab row on its own terms,
       not squeezed in with an ad-hoc inline style */
    .mode-tabs-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      flex-wrap: wrap;
      margin: var(--sp-7) 0 var(--sp-5);
    }

    .mode-tabs-row .modes {
      margin: 0;
    }

    .mute-btn {
      appearance: none;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 10px;
      cursor: pointer;
      font-size: var(--fs-xl);
      min-width: var(--tap-min);
      min-height: var(--tap-min);
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      transition: .15s;
      flex-shrink: 0;
    }

    .mute-btn:hover {
      border-color: var(--brass);
    }

    .mute-btn:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 2px;
    }

    /* panels */
    .stack {
      display: grid;
      gap: 18px
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 20px 20px 18px;
      box-shadow: var(--shadow);
    }

    /* auth card: wraps the gate's panels + submit button as ONE visual
       unit (like Stripe/Linear-style login cards), instead of a floating
       button sitting disconnected below a separate card */
    .auth-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      /* rounded corners clip both the inner content and the action
         footer automatically thanks to overflow: hidden */
    }

    .panel-inner {
      position: relative;
      padding: var(--sp-5) var(--sp-5) var(--sp-4);
    }

    .auth-actions {
      margin-top: 0;
      padding: var(--sp-4) var(--sp-5) var(--sp-5);
      border-top: 1px solid var(--line);
      background: var(--panel);
      flex-direction: column;
      align-items: stretch;
      gap: var(--sp-2);
    }

    .auth-actions .go {
      width: 100%;
      justify-content: center;
    }

    .auth-actions .status {
      margin-left: 0;
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 12px;
      gap: 12px
    }

    .panel-head label {
      font-weight: 600;
      font-size: var(--fs-lg)
    }

    .hint {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
      color: var(--ink-soft)
    }

    .panel-head--tight {
      margin-top: var(--sp-4);
    }

    .link-btn {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-sm);
      color: var(--brass-deep);
      text-decoration: underline;
      text-underline-offset: 3px;
      padding: var(--sp-2) 0;
      margin-top: var(--sp-2);
      min-height: var(--tap-min);
      display: inline-flex;
      align-items: center;
    }

    .link-btn:hover {
      color: var(--ink);
    }

    .link-btn:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 2px;
    }

    textarea,input#authEmail,input#authPassword,
    input[type=text],
    input[type=password] {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 6px 12px;
      color: var(--ink);
      font-family: "Noto Sans Egyptian Hieroglyphs", "IBM Plex Mono", monospace;
      font-size: var(--fs-md);
      resize: vertical;
      transition: border-color .15s, box-shadow .15s;
    }

    textarea {
      min-height: 120px;
      line-height: 1.6
    }

    textarea:focus,
    input:focus {
      outline: 0;
      border-color: var(--brass);
      box-shadow: 0 0 0 3px rgba(185, 138, 46, .16)
    }

    textarea.cipher {
      color: var(--cipher);
      word-break: break-all;
      font-size: var(--fs-cipher);
      line-height: 1.55
    }

    /* key row */
    .keyrow {
      display: flex;
      gap: 10px;
      align-items: stretch
    }

    .keyrow input {
      flex: 1
    }

    .keyrow .icon-btn {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      width: 48px;
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-sm);
      color: var(--ink-soft);
      display: grid;
      place-items: center;
      transition: .15s;
    }

    .keyrow .icon-btn:hover {
      border-color: var(--brass);
      color: var(--brass-deep)
    }

    .keyrow .icon-btn:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 2px
    }

    /* the signature: the obfuscated key readout */
    .vault {
      margin-top: 14px;
      border: 1px dashed var(--line);
      border-radius: 12px;
      padding: 14px 16px;
      background: linear-gradient(180deg, #fff, #faf7ef);
    }

    .vault .cap {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--brass-deep);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 10px;
    }

    .vault .cap .lock {
      font-size: var(--fs-base)
    }

    .vault-tools {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mini {
      appearance: none;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 7px;
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-2xs);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 9px;
      color: var(--brass-deep);
      transition: .15s;
    }

    .mini:hover {
      border-color: var(--brass);
      background: #fbf6ea
    }

    .mini:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 2px
    }

    .mini.danger {
      color: var(--danger);
    }

    .mini.danger:hover {
      border-color: var(--danger);
      background: #fdf0ee;
    }

    /* saved messages */
    .save-row {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap;
    }

    .save-row input {
      flex: 1;
      min-width: 160px;
    }

    .save-row .ghost {
      flex-shrink: 0;
    }

    .saved-list {
      margin-top: var(--sp-4);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }

    .saved-empty {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
      color: var(--ink-soft);
      opacity: .6;
      padding: var(--sp-2) 0;
    }

    .saved-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      flex-wrap: wrap;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: var(--sp-3);
      background: #fff;
    }

    .saved-item-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .saved-item-label {
      font-weight: 600;
      font-size: var(--fs-md);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .saved-item-date {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
      color: var(--ink-soft);
    }

    .saved-item-actions {
      display: flex;
      gap: var(--sp-2);
      flex-shrink: 0;
    }

    .glyphs {
      font-family: "Noto Sans Egyptian Hieroglyphs", "IBM Plex Mono", monospace;
      font-size: var(--fs-2xl);
      line-height: 1.8;
      letter-spacing: .04em;
      color: var(--ink);
      word-break: break-all;
      min-height: 1.8em;
    }

    .glyphs.idle {
      color: var(--ink-soft);
      opacity: .6
    }

    .vault .note {
      margin-top: 8px;
      font-size: var(--fs-xs);
      color: var(--ink-soft)
    }

    /* action */
    .actionbar {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 4px
    }

    .go {
      appearance: none;
      border: 0;
      cursor: pointer;
      background: var(--ink);
      color: var(--panel);
      font-family: "Space Grotesk", sans-serif;
      font-weight: 600;
      font-size: var(--fs-lg);
      padding: var(--sp-1) var(--sp-4);
      min-height: var(--tap-min);
      border-radius: 12px;
      letter-spacing: .01em;
      transition: transform .08s, background .2s;
      box-shadow: var(--shadow);
    }

    .go:hover {
      background: #000
    }

    .go:active {
      transform: translateY(1px)
    }

    .go:focus-visible {
      outline: 2px solid var(--brass);
      outline-offset: 3px
    }

    .go[disabled] {
      opacity: .45;
      cursor: not-allowed
    }

    .ghost {
      appearance: none;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: var(--sp-1) var(--sp-5);
      min-height: var(--tap-min);
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-base);
      color: var(--ink-soft);
      transition: .15s;
    }

    .ghost:hover {
      border-color: var(--ink);
      color: var(--ink)
    }

    .status {
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-sm);
      color: var(--ink-soft);
      margin-left: auto
    }

    .status.ok {
      color: var(--cipher)
    }

    .status.err {
      color: var(--danger)
    }

    /* output copy button */
    .copy {
      appearance: none;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
      padding: 5px 12px;
      color: var(--ink-soft);
      transition: .15s;
    }

    .copy:hover {
      border-color: var(--brass);
      color: var(--brass-deep)
    }

    footer {
      margin-top: 34px;
      color: var(--ink-soft);
      font-size: var(--fs-sm);
      line-height: 1.7;
      max-width: 64ch
    }

    footer b {
      color: var(--ink);
      font-weight: 600
    }

    footer .mono {
      font-family: "IBM Plex Mono", monospace
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */

    @media (max-width: 720px) {
      .panel {
        padding: var(--sp-4) var(--sp-4) var(--sp-3);
      }

      textarea.cipher {
        font-size: var(--fs-xl);
      }

      .glyphs {
        font-size: var(--fs-xl);
      }
    }

    @media (max-width: 560px) {
      .wrap {
        padding: var(--sp-7) var(--sp-4) var(--sp-8);
      }

      /* action buttons go full-width and stack — easier to tap accurately
         than small side-by-side targets on a phone */
      .actionbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
      }

      .actionbar .go,
      .actionbar .ghost {
        width: 100%;
        justify-content: center;
      }

      .status {
        margin-left: 0;
        width: 100%;
        text-align: left;
      }

      /* mode tabs fill the available width evenly instead of staying
         a small fit-content cluster */
      .modes {
        width: 100%;
      }

      .modes button {
        flex: 1;
      }

      .mode-tabs-row {
        width: 100%;
      }

      .keyrow {
        gap: var(--sp-2);
      }

      /* the ankh seal on the door scales down so it can't overflow a
         narrow viewport */
      .doorL::after,
      .doorR::after {
        font-size: clamp(32px, 12vw, 64px);
      }
    }

    @media (max-width: 400px) {
      h1 {
        font-size: clamp(28px, 9vw, 40px);
      }

      .go,
      .ghost,
      .link-btn {
        font-size: var(--fs-md);
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        scroll-behavior: auto
      }
    }

    /* ============================================================
       VAULT DOOR THEATRICS
       ============================================================ */

    .gate {
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      width: 100%;
      max-width: none;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--sp-6);
      box-sizing: border-box;
    }

    .gate-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 420px;
    }

    /* two stone door leaves — invisible and non-interactive until a
       successful login triggers the .opening sequence below */
    .doorL,
    .doorR {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transform: translateX(0);
      /* ashlar-block texture: hard-edged mortar lines forming distinct
         blocks (crisp), rather than fine 3px stripes (which alias into a
         soft wash at most screen scales) */
      background:
        repeating-linear-gradient(0deg, transparent 0 34px, rgba(94, 79, 51, .38) 34px 36px),
        repeating-linear-gradient(90deg, transparent 0 58px, rgba(94, 79, 51, .32) 58px 60px),
        radial-gradient(circle at 2px 2px, rgba(0, 0, 0, .06) 1px, transparent 1.5px),
        linear-gradient(165deg, #ded4b8 0%, #c7bb99 55%, #ab9d7c 100%);
      background-size: 60px 36px, 60px 36px, 6px 6px, 100% 100%;
      /* two shadows instead of one big blur: a tight edge for crisp
         definition, a soft one at low opacity for ambient depth only */
      box-shadow:
        inset 0 0 2px rgba(0, 0, 0, .4),
        inset 0 0 22px rgba(0, 0, 0, .14);
    }

    .doorL {
      left: 0;
      border-right: 2px solid var(--brass-deep);
    }

    .doorR {
      right: 0;
      border-left: 2px solid var(--brass-deep);
    }

    /* brass seal glyph centered on the seam, one half on each leaf */
    .doorL::after,
    .doorR::after {
      content: "𓋹";
      position: absolute;
      top: 50%;
      font-size: 64px;
      color: var(--brass-deep);
      opacity: .55;
      transform: translateY(-50%);
    }

    .doorL::after {
      right: -32px;
    }

    .doorR::after {
      left: -32px;
    }

    /* warm flash behind the doors, revealed as they part */
    .flash {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(600px 400px at 50% 50%, rgba(185, 138, 46, .55), transparent 70%);
      opacity: 0;
    }

    /* the unlock sequence: doors appear closed for a beat, then slide apart
       with a heavy, deliberate ease — reads as stone grinding, not a UI slide */
    .gate.opening .doorL {
      animation: doorLSeq 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
    }

    .gate.opening .doorR {
      animation: doorRSeq 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
    }

    @keyframes doorLSeq {
      0% {
        opacity: 1;
        transform: translateX(0);
      }

      22% {
        opacity: 1;
        transform: translateX(0);
      }

      100% {
        opacity: 1;
        transform: translateX(-100%);
      }
    }

    @keyframes doorRSeq {
      0% {
        opacity: 1;
        transform: translateX(0);
      }

      22% {
        opacity: 1;
        transform: translateX(0);
      }

      100% {
        opacity: 1;
        transform: translateX(100%);
      }
    }

    .gate.opening .flash {
      animation: doorFlash 1.1s ease forwards;
    }

    @keyframes doorFlash {
      0% {
        opacity: 0
      }

      30% {
        opacity: 0
      }

      45% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    /* the ankh seal pulses apart with the doors rather than just riding along flat */
    .gate.opening .doorL::after {
      animation: sealPulseL 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
    }

    .gate.opening .doorR::after {
      animation: sealPulseR 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
    }

    @keyframes sealPulseL {
      0% {
        opacity: .55;
        transform: translateY(-50%) scale(1);
      }

      22% {
        opacity: 1;
        transform: translateY(-50%) scale(1.25);
      }

      100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.25) translateX(-40px);
      }
    }

    @keyframes sealPulseR {
      0% {
        opacity: .55;
        transform: translateY(-50%) scale(1);
      }

      22% {
        opacity: 1;
        transform: translateY(-50%) scale(1.25);
      }

      100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.25) translateX(40px);
      }
    }

    /* wrong credentials: shake the panel, show hairline cracks */
    #authPanel {
      position: relative;
    }

    #authPanel.shake {
      animation: sealShake .5s;
    }

    @keyframes sealShake {

      10%,
      90% {
        transform: translateX(-1px)
      }

      20%,
      80% {
        transform: translateX(2px)
      }

      30%,
      50%,
      70% {
        transform: translateX(-4px)
      }

      40%,
      60% {
        transform: translateX(4px)
      }
    }

    .crack-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background-image:
        linear-gradient(105deg, transparent 46%, var(--danger) 46%, var(--danger) 47%, transparent 47%),
        linear-gradient(72deg, transparent 60%, var(--danger) 60%, var(--danger) 61%, transparent 61%),
        linear-gradient(140deg, transparent 30%, var(--danger) 30%, var(--danger) 31%, transparent 31%);
      background-repeat: no-repeat;
      transition: opacity .2s;
      border-radius: 16px;
    }

    #authPanel.shake .crack-overlay {
      opacity: .35;
    }

    /* glyph-carving strip: fills in as the seal (password) is typed */
    .seal-strip {
      margin-top: var(--sp-2);
      font-family: "Noto Sans Egyptian Hieroglyphs", "IBM Plex Mono", monospace;
      font-size: var(--fs-2xl);
      letter-spacing: .05em;
      color: var(--brass-deep);
      min-height: 1.6em;
      word-break: break-all;
    }

    .seal-strip.idle {
      color: var(--ink-soft);
      opacity: .55;
      font-family: "IBM Plex Mono", monospace;
      font-size: var(--fs-xs);
    }

    .seal-strip .g {
      display: inline-block;
      animation: chisel .18s ease-out;
    }

    @keyframes chisel {
      0% {
        opacity: 0;
        transform: scale(1.6);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .doorL,
      .doorR,
      .flash,
      #authPanel.shake,
      .seal-strip .g {
        animation: none !important;
        transition: none !important;
      }

      .gate.opening .doorL {
        transform: translateX(-100%);
      }

      .gate.opening .doorR {
        transform: translateX(100%);
      }
    }