:root{
    --ink:#07080A; --ink-2:#101315;
    --paper:#EFEAE0; --paper-dim:#ADA79C; --paper-faint:#6E6A62;
    --brass:#D6AF5C; --brass-deep:#7E6322;
    --verdigris:#5E9A87; --verdigris-lift:#96CFBB;
    --oxide:#C0522D; --oxide-lift:#EE9170;
    --hair:rgba(239,234,224,.17);
    --display:"Young Serif",Georgia,"Times New Roman",serif;
    --body:"Newsreader",Georgia,"Times New Roman",serif;
    --mark:"Courier Prime",Courier,monospace;
    --state:var(--brass); --state-lift:var(--brass);
  }
  *{box-sizing:border-box}
  button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  [hidden]{display:none!important}
  html,body{height:100%}
  body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
    font-weight:400;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
  ::selection{background:var(--brass);color:var(--ink)}

  #scene{position:fixed;inset:-3%;z-index:0;overflow:hidden;background:var(--ink);
    animation:drift 90s ease-in-out infinite alternate}
  @keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.11)}}
  .plate{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity 2000ms ease-in-out}
  .plate.on{opacity:1}

  #wash{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(64% 52% at 50% 44%,rgba(7,8,10,.93) 0%,rgba(7,8,10,.8) 46%,
        rgba(7,8,10,.42) 74%,rgba(7,8,10,.2) 100%),
      linear-gradient(180deg,rgba(7,8,10,.88) 0%,rgba(7,8,10,.56) 26%,
        rgba(7,8,10,.62) 66%,rgba(7,8,10,.95) 100%)}
  #embers{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
  #rain{position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}

  #boot{position:fixed;inset:0;z-index:40;background:var(--ink);display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:20px;
    transition:opacity 900ms ease}
  #boot.gone{opacity:0;pointer-events:none}
  .boot__mark{font-family:var(--mark);font-size:12px;color:var(--paper-faint);margin:0}
  .boot__bar{width:min(200px,48vw);height:1px;background:var(--hair);position:relative}
  .boot__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--brass);
    transition:width 400ms ease}

  .shell{position:relative;z-index:10;max-width:700px;margin:0 auto;padding-inline:26px;
    display:flex;flex-direction:column;min-height:100%;min-height:100svh}

  /* A plain gradient, not a backdrop blur. Blur over a moving plate tears. */
  .head{position:sticky;top:env(safe-area-inset-top,0px);z-index:12;display:flex;
    align-items:baseline;gap:14px;padding-block:18px 34px;
    font-family:var(--mark);font-size:12px;color:var(--paper-faint);
    background:linear-gradient(180deg,rgba(7,8,10,.97) 0%,rgba(7,8,10,.96) 50%,
      rgba(7,8,10,.72) 74%,rgba(7,8,10,0) 100%)}
  .head__name{white-space:nowrap}
  .head__rule{flex:1;height:1px;background:var(--hair);align-self:center}
  .head__no{color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap}
  .snd{background:none;border:0;cursor:pointer;padding:10px 4px 10px 12px;margin:-10px -4px -10px 0;
    color:var(--paper-faint);font-size:16px;line-height:1;white-space:nowrap;
    transition:color 200ms ease,transform 200ms ease}
  .snd:hover,.snd:focus-visible{color:var(--brass);transform:scale(1.15);outline:none}

  .stage{flex:1;display:flex;flex-direction:column;justify-content:center;
    padding-block:26px 76px}

  .mark{display:flex;align-items:center;gap:12px;margin:0 0 22px;
    font-family:var(--mark);font-size:12px;color:var(--paper-faint)}
  .mark__no{color:var(--brass);font-variant-numeric:tabular-nums}
  .mark__rule{width:28px;height:1px;background:var(--hair)}
  .mark__name{font-family:var(--body);font-style:italic;font-size:15px;color:var(--paper-dim)}

  .ask{font-family:var(--display);font-weight:400;font-size:clamp(24px,6.4vw,46px);
    line-height:1.18;letter-spacing:-.005em;text-wrap:balance;margin:0 0 14px;
    min-height:1.18em;color:var(--paper)}
  .ask em{font-family:var(--body);font-style:italic;font-weight:400;color:var(--brass)}
  .aside{font-size:17px;line-height:1.55;color:var(--paper-dim);max-width:44ch;margin:0 0 30px;
    font-style:italic}

  .rows{border-top:1px solid var(--hair)}
  .row{appearance:none;display:flex;gap:16px;width:100%;text-align:left;cursor:pointer;
    background:transparent;border:0;border-bottom:1px solid var(--hair);
    border-left:2px solid transparent;color:var(--paper);font-family:var(--body);
    font-size:17.5px;font-weight:400;line-height:1.5;padding:18px 14px 18px 12px;
    transition:background 180ms ease,border-left-color 180ms ease,padding-left 180ms ease}
  .row__k{font-family:var(--mark);font-size:12px;color:var(--paper-faint);
    padding-top:5px;flex:0 0 auto;transition:color 180ms ease}
  .row:hover,.row:focus-visible{background:rgba(214,175,92,.07);border-left-color:var(--brass);
    padding-left:18px;outline:none}
  .row:hover .row__k,.row:focus-visible .row__k{color:var(--brass)}
  .row:active{background:rgba(214,175,92,.1);border-left-color:var(--brass)}
  .row.chosen{background:rgba(214,175,92,.14);border-left-color:var(--brass)}
  .row.chosen .row__k{color:var(--brass)}

  .inscribe{width:100%;background:rgba(16,19,21,.72);border:0;
    border-bottom:1px solid var(--hair);color:var(--paper);font-family:var(--display);
    font-size:23px;padding:14px 12px;transition:border-color 180ms}
  .inscribe::placeholder{font-family:var(--body);font-style:italic;color:var(--paper-faint)}
  .inscribe:focus{outline:none;border-bottom-color:var(--brass)}

  .act{margin-top:28px;display:inline-flex;align-items:center;gap:12px;appearance:none;
    cursor:pointer;background:transparent;border:1px solid var(--brass-deep);
    color:var(--brass);font-family:var(--mark);font-size:13px;padding:14px 24px;
    transition:background 200ms,color 200ms,border-color 200ms}
  .act:hover,.act:focus-visible{background:var(--brass);color:var(--ink);
    border-color:var(--brass);outline:none}
  .skip{display:block;margin-top:14px;background:none;border:0;cursor:pointer;
    font-family:var(--mark);font-size:12px;color:var(--paper-faint);padding:4px 0;
    text-decoration:underline;text-underline-offset:3px}
  .skip:hover,.skip:focus-visible{color:var(--paper-dim);outline:none}

  /* The build keys the black plate off the wordmark, so it arrives with real
     alpha and needs no blending trick to sit on the scene. */
  .brandmark{display:block;width:clamp(132px,30vw,184px);height:auto;margin:0 0 16px -6px;
    filter:drop-shadow(0 2px 18px rgba(0,0,0,.85))}
  .open__title{font-family:var(--display);font-weight:400;font-size:clamp(46px,12vw,88px);
    line-height:1;letter-spacing:-.02em;margin:0 0 24px;color:var(--paper)}
  .open__title i{display:block;font-family:var(--body);font-style:italic;color:var(--brass);
    font-size:.36em;letter-spacing:0;margin-bottom:8px}
  .open__body{font-size:18px;line-height:1.62;color:var(--paper-dim);max-width:46ch;margin:0}
  .open__body strong{color:var(--paper);font-weight:500}
  .open__body+.open__body{margin-top:16px}
  /* The turn. The last line before the wallet is the one that asks. */
  .open__ask{font-family:var(--body);font-style:italic;font-size:clamp(19px,3.8vw,23px);
    line-height:1.45;color:var(--brass);max-width:46ch;margin:22px 0 0}

  .doorway{display:block;width:min(540px,88vw);margin:24px 0 0;padding:0;border:0;
    background:none;cursor:pointer;text-align:left;
    transition:transform 340ms ease,filter 340ms ease}
  .doorway__frame{position:relative;display:block;width:100%;aspect-ratio:16/9}
  .doorway img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center;opacity:0;transition:opacity 850ms ease;
    -webkit-mask-image:radial-gradient(68% 68% at 50% 50%,#000 40%,transparent 100%);
    mask-image:radial-gradient(68% 68% at 50% 50%,#000 40%,transparent 100%)}
  .doorway img.on{opacity:1}
  .doorway:hover,.doorway:focus-visible{transform:translateY(-4px);
    filter:brightness(1.18) drop-shadow(0 6px 44px rgba(214,175,92,.32));outline:none}
  .doorway.opened{cursor:default;transform:none;filter:none}
  .doorway__hint{display:inline-block;margin-top:2px;padding:14px 24px;
    border:1px solid var(--brass-deep);font-family:var(--mark);font-size:13px;
    color:var(--brass);transition:background 220ms ease,color 220ms ease,
    border-color 220ms ease,opacity 500ms ease}
  .doorway:hover .doorway__hint,.doorway:focus-visible .doorway__hint{
    background:var(--brass);color:var(--ink);border-color:var(--brass)}
  .doorway.opened .doorway__hint{opacity:0}

  .wallet{border-top:1px solid var(--brass-deep);border-bottom:1px solid var(--brass-deep);
    padding:26px 0;margin-bottom:40px}
  .wallet h3{font-family:var(--mark);font-size:12px;font-weight:400;color:var(--brass);
    margin:0 0 16px}
  .wallet p{font-family:var(--display);font-size:clamp(18px,3.6vw,22px);line-height:1.45;
    color:var(--paper);margin:0 0 8px}
  .wallet p:last-child{margin-bottom:0;font-family:var(--body);font-style:italic;
    color:var(--brass)}
  .wallet__pic{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
    margin:0 0 20px;
    -webkit-mask-image:radial-gradient(74% 74% at 50% 50%,#000 46%,transparent 100%);
    mask-image:radial-gradient(74% 74% at 50% 50%,#000 46%,transparent 100%)}

  .crown{display:flex;align-items:center;gap:26px;margin-bottom:34px}
  .seal{width:clamp(104px,23vw,160px);height:clamp(104px,23vw,160px);flex:0 0 auto;display:block;
    filter:drop-shadow(0 3px 14px rgba(0,0,0,.75))}
  .seal .ring{fill:none;stroke:var(--hair);stroke-width:.6}
  .seal .ring--out{stroke:url(#ringGrad);stroke-width:1.2}
  .seal .tick{stroke:var(--brass-deep);stroke-width:.7;opacity:.75}
  .seal .glyph{fill:none;stroke:url(#brassGrad);stroke-width:2.9;stroke-linecap:round;
    stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
  .seal .gleam{fill:none;stroke:#FBF1D6;stroke-width:.65;stroke-linecap:round;
    stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;opacity:0}
  .seal.lit .glyph{transition:stroke-dashoffset 1400ms cubic-bezier(.3,.8,.2,1);stroke-dashoffset:0}
  .seal.lit .gleam{transition:stroke-dashoffset 1600ms cubic-bezier(.3,.8,.2,1),opacity 900ms ease;
    stroke-dashoffset:0;opacity:.85}
  .seal.lit .ring{stroke:var(--state);opacity:.55;transition:stroke 900ms}
  .seal.lit .ring--out{stroke:url(#ringGrad);opacity:1}
  .crown__txt{min-width:0}
  .crown__label{font-family:var(--mark);font-size:12px;color:var(--paper-faint);margin:0 0 6px}
  .crown__house{font-family:var(--display);font-weight:400;font-size:clamp(30px,7.4vw,52px);
    line-height:1.02;margin:0 0 10px;color:var(--paper)}
  .crown__clause{font-family:var(--body);font-style:italic;font-size:clamp(16px,3.2vw,19px);
    color:var(--paper-dim);margin:0}

  .faces{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:40px;
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .face{padding:22px 18px;border-left:2px solid transparent;opacity:.42;
    transition:opacity 500ms ease,border-color 500ms ease,background 500ms ease}
  .face+.face{border-left:1px solid var(--hair)}
  .face.live{opacity:1}
  .face--wealth.live{border-left-color:var(--verdigris);background:rgba(94,154,135,.09)}
  .face--shadow.live{border-left-color:var(--oxide);background:rgba(192,82,45,.09)}
  .face__tag{font-family:var(--mark);font-size:11px;letter-spacing:.04em;
    color:var(--paper-faint);margin:0 0 10px;padding-bottom:9px;
    border-bottom:1px solid var(--hair)}
  .face.live .face__tag{border-bottom-color:currentColor}
  .face--wealth.live .face__tag{color:var(--verdigris-lift)}
  .face--shadow.live .face__tag{color:var(--oxide-lift)}
  .face__name{font-family:var(--display);font-size:clamp(19px,4.2vw,25px);line-height:1.15;
    margin:0 0 8px;color:var(--paper)}
  .face--wealth.live .face__name{color:var(--verdigris-lift)}
  .face--shadow.live .face__name{color:var(--oxide-lift)}
  .face__note{font-size:15px;line-height:1.5;color:var(--paper-dim);margin:0}
  .face__here{display:block;margin-top:12px;font-family:var(--mark);font-size:11px;
    color:var(--paper-faint)}

  .read section{margin-bottom:34px}
  .read h3{font-family:var(--mark);font-size:12px;font-weight:400;color:var(--brass);
    margin:0 0 10px}
  .read p{font-size:18px;line-height:1.66;color:var(--paper);margin:0 0 22px;max-width:60ch}
  .read p.muted{color:var(--paper-dim);font-size:17px}
  .quote{font-family:var(--display);font-size:23px;line-height:1.38;color:var(--paper)}

  /* The house has traits. The person does not get a name. */
  .traits{list-style:none;margin:0;padding:0}
  .traits li{position:relative;padding-left:18px;margin:0 0 10px;font-size:15.5px;
    line-height:1.5;color:var(--paper-dim)}
  .traits li:last-child{margin-bottom:0}
  .traits li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;
    background:currentColor;opacity:.55}
  .face.live .traits li{color:var(--paper)}

  .lede{font-family:var(--body);font-style:italic;font-size:17px;line-height:1.5;
    color:var(--paper-dim);max-width:56ch;margin:0 0 16px}
  .turn,.read p.turn{font-family:var(--body);font-style:italic;
    font-size:clamp(18px,3.4vw,21px);line-height:1.45;color:var(--brass);
    max-width:56ch;margin:0}
  .turn--wide{margin:0 0 34px}

  .ledger{border-left:2px solid var(--state);padding:4px 0 4px 20px;margin-bottom:34px}
  .ledger dt{font-family:var(--mark);font-size:12px;color:var(--paper-faint);margin-bottom:6px}
  .ledger dd{margin:0;font-family:var(--display);font-size:21px;color:var(--state-lift)}
  .ledger dd span{display:block;font-family:var(--body);font-size:16px;line-height:1.55;
    color:var(--paper-dim);margin-top:8px}

  .groups{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:34px;
    font-family:var(--mark);font-size:12px;color:var(--paper-faint)}
  .groups b{font-family:var(--body);font-style:italic;font-weight:400;font-size:15px}
  .groups .t b{color:var(--verdigris-lift)}
  .groups .s b{color:var(--oxide-lift)}

  .dissolve{font-family:var(--display);font-size:clamp(23px,4.8vw,32px);line-height:1.3;
    color:var(--brass);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    padding-block:28px;margin:0 0 32px;text-wrap:balance}
  .close{font-size:18px;line-height:1.66;color:var(--paper);margin:0 0 40px;max-width:60ch}

  .sign{border-top:1px solid var(--brass-deep);padding-top:28px}
  .sign h4{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.25;
    margin:0 0 10px;color:var(--paper)}
  .sign p{font-size:17px;line-height:1.55;color:var(--paper-dim);margin:0 0 22px;max-width:46ch}
  .sign__row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
  .sign__field{flex:1 1 230px;min-width:0}
  .sign__field label{display:block;font-family:var(--mark);font-size:12px;
    color:var(--paper-faint);margin-bottom:8px}
  .sign .act{margin-top:0;flex:0 0 auto;text-decoration:none}
  .sign a.act{display:inline-flex;margin-bottom:30px}
  .sign__note{font-family:var(--mark);font-size:11px;line-height:1.7;color:var(--paper-faint);
    margin:20px 0 0}
  .sealed{font-family:var(--body);font-style:italic;font-size:19px;color:var(--brass);margin:0}
  .retake{margin:36px 0 0;background:none;border:0;cursor:pointer;font-family:var(--mark);
    font-size:12px;color:var(--paper-faint);padding:6px 0;text-decoration:underline;
    text-underline-offset:3px}
  .retake:hover,.retake:focus-visible{color:var(--brass);outline:none}

  .enter{animation:rise 560ms cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .d2{animation-delay:90ms}.d3{animation-delay:180ms}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:60ms!important}
    #scene{animation:none}
  }
  @media (max-width:560px){
    body{font-size:16px}
    .shell{padding-inline:20px}
    .head{gap:10px;padding-block:14px 28px;font-size:11px}
    .stage{padding-block:18px 64px}
    .mark{gap:10px;margin-bottom:18px}
    .mark__name{font-size:14px}
    .aside{font-size:15px;margin-bottom:24px}
    .row{font-size:16px;line-height:1.45;padding:16px 10px 16px 10px;gap:13px}
    .row:hover,.row:focus-visible{padding-left:14px}
    .open__body{font-size:16px;max-width:100%}
    .open__ask{font-size:18px;max-width:100%;margin-top:18px}
    .open__title{margin-bottom:20px}
    .brandmark{margin-left:-6px}
    .doorway{width:100%;margin-top:20px}
    .inscribe{font-size:20px;padding:12px 10px}
    .act{width:100%;justify-content:center;padding:15px 20px}
    .wallet{padding:22px 0;margin-bottom:32px}
    .wallet p{font-size:17px}
    .crown{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
    .seal{width:104px;height:104px}
    .faces{grid-template-columns:1fr;margin-bottom:32px}
    .face{padding:18px 16px}
    .face+.face{border-left:2px solid transparent;border-top:1px solid var(--hair)}
    .read p{font-size:16px}
    .read p.muted{font-size:15px}
    .traits li{font-size:15px}
    .lede{font-size:15px;max-width:100%}
    .turn,.read p.turn{font-size:17px;max-width:100%}
    .turn--wide{margin-bottom:28px}
    .read section{margin-bottom:28px}
    .quote{font-size:20px}
    .ledger{padding-left:16px}
    .ledger dd{font-size:19px}
    .ledger dd span{font-size:15px}
    .groups{gap:14px;margin-bottom:28px}
    .dissolve{padding-block:24px;margin-bottom:26px}
    .close{font-size:16px;margin-bottom:32px}
    .sign{padding-top:24px}
    .sign h4{font-size:22px}
    .sign p{font-size:16px}
    .sign .act{width:100%}
  }
  @media (max-width:390px){
    .head__name{display:none}
    .open__title{font-size:clamp(38px,13vw,52px)}
    .row{font-size:15.5px}
  }