:root{
  }
  
  @media (max-width:720px){ body{padding:20px} }

  .lbl{font:500 11px/1 var(--sans); letter-spacing:.1em;
       text-transform:uppercase; color:var(--p200)}
  .lbl-field{display:block; margin-bottom:8px}
  .mono{font-family:var(--mono); font-size:13px}
  .ai-disclosure{margin:0 0 var(--s2); max-width:62ch;
                 color:var(--p200); font:400 15px/1.55 var(--sans)}

  

  



  


  header .rule{flex:1; height:1px; background:var(--p600)}
  header a.nav{font-family:var(--mono); font-size:13px;
               color:var(--p200); text-decoration:none}
  header a.nav:hover{color:var(--p050)}

  






  .open{margin-bottom:var(--s4)}
  .open h1{font:400 22px/1.4 var(--sans); letter-spacing:-.01em;
     color:var(--p050); margin:0 0 var(--s2); text-wrap:balance}
  .open h1 span{display:block}
  .open h1 b{font-weight:400; color:var(--p200)}
  


  .source{margin-bottom:var(--s4); padding-bottom:var(--s4);
          border-bottom:1px solid var(--p600)}
  .source b{display:block; font:500 10px/1 var(--sans);
     letter-spacing:.14em; text-transform:uppercase; color:var(--p400);
     margin-bottom:10px; font-weight:500}
  .source .sp{width:100%; height:152px; border:0; border-radius:12px;
              display:block; background:var(--p800)}
  .source .use{margin:var(--s2) 0 0; font:400 20px/1.45 var(--sans);
               color:var(--p200)}
  .gorow{display:flex; align-items:center; gap:var(--s3);
         margin-top:var(--s3); flex-wrap:wrap}
  .gorow .cost{flex:1; margin:0; font:400 13px/1.5 var(--mono);
               color:var(--p400)}
  @media (max-width:820px){
    .open{margin-bottom:var(--s3)}
    .open h1{font-size:20px}           
    .open h1 span{display:inline}
    .source{margin-bottom:var(--s3); padding-bottom:var(--s3)}
    .source .use{font-size:17px}
    


    .gorow{flex-direction:column; align-items:stretch; gap:var(--s2)}
    .gorow .cost{flex:0 0 auto}
    .gorow .go{width:100%}
  }

  textarea{width:100%; background:var(--p700);
           border:1px solid var(--p600); border-radius:2px;
           padding:12px 13px; color:var(--p050); font:inherit;
           resize:vertical; min-height:92px}
  textarea:focus{outline:2px solid var(--ochre); outline-offset:1px}
   
  .go{flex:0 0 auto; margin:0; background:var(--p050); border:0;
      border-radius:2px; color:var(--p900);
      font:600 16px/1 var(--sans); padding:16px 32px; cursor:pointer}
  .go:hover{background:var(--p200)}
  .go[disabled]{opacity:.45; cursor:not-allowed}
  .go .sub{font-family:var(--mono); font-size:11px; letter-spacing:0;
           text-transform:none; color:var(--p400)}
  .err{color:var(--rust); font-family:var(--mono); font-size:13px;
       margin-top:12px}

   
  


  .work{margin-top:var(--s3)}
  

  .asked{padding-bottom:var(--s3); border-bottom:1px solid var(--p600);
         margin-bottom:var(--s4)}
  .asked q{display:block; font:400 20px/1.45 var(--sans);
           color:var(--p050); quotes:'\201C' '\201D'}

  





  .stage{position:relative; width:100%; aspect-ratio:16/9;
         background:var(--p900); border:1px solid var(--p600);
         overflow:hidden}
  .stage canvas{display:block; width:100%; height:100%}

  
















  .waiting{position:absolute; inset:0;
           transition:opacity .55s ease}
  .waiting.gone{opacity:0}
  .waiting .specks{position:absolute; inset:0}
  .waiting .ruler{position:absolute; inset:0;
     background:repeating-linear-gradient(90deg,
       rgba(243,244,241,.05) 0 1px, transparent 1px 64px)}
  .waiting .hz{position:absolute; left:0; right:0; top:56%; height:1px;
     background:rgba(221,199,173,.18)}
  



  .waiting .sweep{position:absolute; top:0; bottom:0; width:180px;
     background:linear-gradient(90deg, transparent,
       rgba(243,244,241,.045), transparent);
     animation:sweep 6s linear infinite}
  @keyframes sweep{0%{left:-180px} 100%{left:100%}}
  .waiting .say{position:absolute; left:0; right:0; bottom:18px;
     text-align:center; font:400 13px/1 var(--mono); color:var(--p400)}
  

  @media (prefers-reduced-motion: reduce){
    .waiting .sweep{animation:none; display:none}
  }

   
  .state{display:flex; align-items:baseline; gap:var(--s3);
         padding:var(--s2) 0; border-bottom:1px solid var(--p600);
         flex-wrap:wrap}
  .state .w{font:500 11px/1 var(--sans); letter-spacing:.1em;
            text-transform:uppercase; color:var(--amber); flex:0 0 auto}
  .state .w.done{color:var(--moss)} .state .w.failed{color:var(--rust)}
  .state .now{flex:1; min-width:0; font:400 16px/1.4 var(--sans);
              color:var(--p050)}

  




  .steps{display:flex; gap:0; margin:var(--s3) 0 0; padding:0;
         list-style:none; flex-wrap:wrap}
  .steps li{flex:1 1 0; min-width:150px; padding:0 var(--s2) 0 0}
  .steps .bar{height:2px; background:var(--p700); margin-bottom:10px;
              position:relative; overflow:hidden}
  .steps li.done .bar{background:var(--p400)}
  .steps li.live .bar{background:var(--p600)}
  .steps li.live .bar::after{content:""; position:absolute; inset:0;
     width:40%; background:var(--amber);
     animation:slide 1.6s ease-in-out infinite}
  @keyframes slide{0%{transform:translateX(-100%)}
                   100%{transform:translateX(250%)}}
  .steps b{display:block; font:400 13px/1.35 var(--mono);
           color:var(--p400); font-weight:400}
  .steps li.live b{color:var(--p050)}
  .steps li.done b{color:var(--p200)}

  



  




  .read{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
        align-items:start;
        padding:var(--s4) 0; border-bottom:1px solid var(--p600)}
  .read .txt{grid-column:1 / span 2; min-width:0; max-width:62ch;
             padding-right:var(--s5)}
  .read .txt p{margin:0; font:400 16px/1.6 var(--sans); color:var(--p200)}
  .read .txt p b{color:var(--p050); font-weight:400}
  .waitfacts{grid-column:3; padding-right:var(--s2)}
  .waitfacts .fr{display:flex; align-items:baseline; gap:var(--s2);
     padding:9px 0; border-bottom:1px solid var(--p700)}
  .waitfacts .fr:first-child{border-top:1px solid var(--p600)}
  .waitfacts dt{flex:1; font:500 10px/1.4 var(--sans);
     letter-spacing:.14em; text-transform:uppercase; color:var(--p400)}
  .waitfacts dd{margin:0; font:400 14px/1.4 var(--mono);
     color:var(--p050); white-space:nowrap}
  

  .waitfacts dd.pending{color:var(--p400)}

  


  















  .keepit{display:grid; grid-template-columns:1fr 1fr;
          column-gap:var(--s5); align-items:start;
          grid-template-rows:auto 1fr auto auto auto auto;
          padding:var(--s4) 0}
  .keepit .half{display:contents}
  .keepit .half:first-child > *{grid-column:1}
  .keepit .half:last-child > *{grid-column:2}
  .keepit .lbl{grid-row:1}
  .keepit p:not(.sendsaid){grid-row:2}
  .keepit .row{grid-row:3}
  .keepit .consent{grid-row:4}
  .keepit .sendrow{grid-row:5}
  .keepit .sendsaid{grid-row:6}
  .keepit p{margin:0 0 var(--s2); font:400 15px/1.6 var(--sans);
            color:var(--p200); max-width:52ch}
  .keepit p b{color:var(--p050); font-weight:500}
  .keepit .row{display:flex; gap:var(--s2); align-items:center}
  .keepit .row input{flex:1; min-width:0; background:var(--p800);
     border:1px solid var(--p600); border-radius:2px; padding:12px 14px;
     color:var(--p050); font:400 13px/1.4 var(--mono)}
  .keepit .row input.mail{font-family:var(--sans); font-size:15px}
  .keepit .row button{flex:0 0 auto; background:none; color:var(--p050);
     border:1px solid var(--p400); border-radius:2px; padding:12px 18px;
     font:400 13px/1 var(--mono); cursor:pointer; white-space:nowrap}
  .keepit .row button:hover{border-color:var(--p200)}
  .keepit .row button:disabled{color:var(--p400);
     border-color:var(--p700); cursor:default}
   
  .keepit .row button.said{color:var(--moss); border-color:var(--p600)}
   
  .keepit .sendrow{margin-top:var(--s2)}
  .keepit .sendrow button{background:none; color:var(--p050);
     border:1px solid var(--p400); border-radius:2px; padding:12px 18px;
     font:400 13px/1 var(--mono); cursor:pointer; white-space:nowrap}
  .keepit .sendrow button:hover{border-color:var(--p200)}
  .keepit .sendrow button:disabled{color:var(--p400); border-color:var(--p700);
     cursor:default}
  

  .keep.prov{color:var(--rust)}
  .allmine{display:inline-block; margin-top:12px; color:var(--p200);
    font-family:var(--mono); font-size:13px}
  .sendme{margin-top:18px}
  .sendform{margin-top:10px; max-width:34em}
  .sendform input[type=email]{width:100%; height:40px; padding:0 10px;
    background:var(--p900); border:1px solid var(--p600);
    border-radius:2px; color:var(--p050); margin-top:6px}
  

  .consent{display:flex; gap:10px; align-items:flex-start;
    margin-top:var(--s2); cursor:pointer; border-radius:2px;
    padding:2px 0; transition:box-shadow .2s}
  .consent input{margin:3px 0 0; flex:0 0 auto; width:16px; height:16px;
    accent-color:var(--sky); cursor:pointer}
  .consent .ctext{display:flex; flex-direction:column; gap:3px}
  .consent .cmain{font:400 14px/1.45 var(--sans); color:var(--p050)}
  .consent .cfine{font:400 12px/1.5 var(--sans); color:var(--p400)}
   
  .consent.need{box-shadow:0 0 0 1px var(--ochre); padding:6px 8px;
    margin-left:-8px}
  .sendsaid{margin-top:10px; color:var(--moss)}
  #sendgo{margin-top:12px}
  .clock{flex:0 0 auto; font:400 13px/1 var(--mono); color:var(--p400);
         white-space:nowrap}
  @media (max-width:820px){
    .steps li{flex:1 1 100%; padding:0 0 var(--s2)}
    .read{grid-template-columns:minmax(0, 1fr); gap:var(--s3)}
    .read .txt, .waitfacts{grid-column:1; padding-right:0}
    



    .keepit{grid-template-columns:1fr; grid-template-rows:none}
    

    .keepit .half:first-child > *,
    .keepit .half:last-child > *{grid-column:1; grid-row:auto}
    

    .keepit .half:last-child > .lbl{margin-top:var(--s4)}
  }

   
  












  .answer{margin-top:26px}
   
  .answer h2{font:500 24px/1.2 var(--display); letter-spacing:.025em;
             text-transform:uppercase; margin:0}
  .next{margin:10px 0 0; color:var(--p200); font-size:15px; max-width:60ch}
  .listen{display:inline-block; margin-top:18px; text-decoration:none}
  .link{display:flex; gap:10px; align-items:center; margin-top:22px;
        flex-wrap:wrap}
  .link input{flex:1; min-width:220px; background:var(--p700);
              border:1px solid var(--p600); border-radius:2px;
              padding:10px 12px; color:var(--p050);
              font-family:var(--mono); font-size:13px}
  .btn{background:var(--p700); border:1px solid var(--p600);
       border-radius:2px; padding:10px 14px; color:var(--p200);
       font:500 11px/1 var(--sans); letter-spacing:.1em;
       text-transform:uppercase; cursor:pointer; text-decoration:none}
  .btn:hover{border-color:var(--p200); color:var(--p050)}
   
  .keep{margin-top:14px; color:var(--p200); font-size:15px;
        max-width:60ch}
  .keep b{color:var(--p050); font-weight:500}
  .mine{margin-top:34px; padding-top:22px;
        border-top:1px solid var(--p600)}
  .mine a{display:block; color:var(--p050); text-decoration:none;
          padding:7px 0}
  .mine a:hover{color:var(--p200)}
  .mine .when{font-family:var(--mono); font-size:12px;
              color:var(--p400); margin-left:10px}

   
  .ownwords{font:400 13px/1.5 var(--sans); color:var(--p400);
            margin:var(--s1) 0 0}
  #termsrow{margin-top:var(--s2)}
  #termsrow a{color:var(--p050)}

   
  .line{padding:var(--s3) 0; border-bottom:1px solid var(--p600)}
  .line .lbl{color:var(--amber)}
  .line .place{margin:10px 0 6px; font:400 26px/1.25 var(--sans);
               color:var(--p050)}
  .line .eta{margin:0; font:400 16px/1.5 var(--sans); color:var(--p200)}
  .work.inline .state, .work.inline .steps, .work.inline .read{display:none}
  .work.inline .keepit{margin-bottom:var(--s4);
                       border-bottom:1px solid var(--p600)}
   
  .keepit.mailfirst .half:first-child > *{grid-column:2}
  .keepit.mailfirst .half:last-child > *{grid-column:1}
  @media (max-width:820px){
    .line .place{font-size:22px}
    .keepit.mailfirst .half:first-child > *,
    .keepit.mailfirst .half:last-child > *{grid-column:1}
    .keepit.mailfirst .half:last-child > *{order:-1}
    .keepit.mailfirst .half:last-child > .lbl{margin-top:0}
    .keepit.mailfirst .half:first-child > .lbl{margin-top:var(--s4)}
    

    .state{row-gap:8px}
    .state .now{flex:1 1 100%; order:3}
    .state .clock{margin-left:auto}
  }