:root{
  }
  

   
  

  




  .who{font:500 11px/1.4 var(--sans); letter-spacing:.14em;
       text-transform:uppercase; color:var(--p200); white-space:nowrap;
       text-align:right}
  



  .who a{color:var(--p050); text-decoration:none;
         border-bottom:1px solid var(--p400); padding-bottom:1px}
  .who a:hover{border-bottom-color:var(--p050)}

   
  



  



  .arrived{display:flex; align-items:baseline; gap:var(--s3);
           padding:0 0 var(--s3); flex-wrap:wrap}
  .arrived b{font:500 11px/1 var(--sans); letter-spacing:.1em;
             text-transform:uppercase; color:var(--moss)}
  .arrived span{font:400 16px/1.4 var(--sans); color:var(--p050)}

  





  .titlerow{display:flex; align-items:baseline; gap:var(--s2);
            margin:0 0 var(--s3)}
  

  h1{font:500 32px/1.15 var(--display); letter-spacing:.025em;
     text-transform:uppercase; margin:0; flex:0 1 auto; min-width:0}
  





  #titletail{outline:none; border-bottom:1px solid transparent;
             padding-bottom:2px}
  #titletail[contenteditable]{cursor:text}
  #titletail[contenteditable]:hover{border-bottom-color:var(--p600)}
  #titletail[contenteditable]:focus{border-bottom-color:var(--ochre)}
  




  .rename{flex:none; align-self:center; background:none;
     border:1px solid var(--p600); border-radius:2px; padding:3px 8px;
     cursor:pointer; font:500 11px/1.5 var(--sans); letter-spacing:.1em;
     text-transform:uppercase; color:var(--p200)}
  .saved{flex:none; align-self:center; font:500 11px/1.5 var(--sans);
     letter-spacing:.1em; text-transform:uppercase; color:var(--moss);
     opacity:0; transition:opacity .2s}
  




  .refused{margin:0 0 var(--s3); font:400 13px/1.5 var(--mono);
           color:var(--rust)}

   
  


  .stage{position:relative; width:100%; aspect-ratio:16/9;
         background:var(--p900); border:1px solid var(--p600);
         overflow:hidden}
  canvas{display:block; width:100%; height:100%; cursor:crosshair}
  .stage:fullscreen{background:#000; border:0; border-radius:0;
                    display:flex; align-items:center; justify-content:center}
  .stage:fullscreen canvas{width:min(100vw, 177.78vh); height:auto;
                           max-width:none}
  



  .stage.max{position:fixed; inset:0; z-index:1000; background:#000;
             border:0; border-radius:0; display:flex; align-items:center;
             justify-content:center; width:100vw; height:100vh;
             height:100dvh; margin:0}
  .stage.max canvas{width:min(100vw, 177.78dvh); height:auto;
                    max-width:none}
  .stage .shut{display:none}
  .stage.max .shut{display:block; position:absolute; top:max(12px,
             env(safe-area-inset-top)); right:12px; z-index:2;
             font:400 14px/1 var(--mono); color:var(--p050);
             background:rgba(7,22,28,.7); border:1px solid var(--p600);
             padding:10px 14px; cursor:pointer}
  body.stage-max{overflow:hidden}
  .scrub{flex:1; height:3px; background:var(--p600); border-radius:2px;
         position:relative; cursor:pointer; min-width:40px}
  .scrub i{position:absolute; inset:0 auto 0 0; width:0;
           background:var(--amber); border-radius:2px}
  


  .full{width:38px; height:38px; flex:none; border:1px solid var(--p600);
        border-radius:2px; background:none; color:var(--p200);
        cursor:pointer; font:400 13px/1 var(--sans)}
  .full:hover{color:var(--p050); border-color:var(--p400)}
   
  .sharejump{height:38px; flex:none; padding:0 14px; background:none;
             border:1px solid var(--p600); color:var(--p050);
             font:400 13px/1 var(--mono); cursor:pointer; border-radius:2px}
  .sharejump:hover{border-color:var(--p200)}
  .mode{font:500 11px/1 var(--sans); letter-spacing:.14em;
        text-transform:uppercase; color:var(--p400); white-space:nowrap}
  .mode.live{color:var(--amber)}
  .ai-mark{margin:var(--s1) 0 0 70px;
           color:var(--p200); font:500 11px/1.4 var(--sans);
           letter-spacing:.1em; text-transform:uppercase}
  .ai-mark a{color:inherit; text-underline-offset:3px}
  .ai-mark a:hover{color:var(--p050)}

   
  

  



  .what{display:flex; gap:var(--s5); align-items:flex-start;
        padding:var(--s4) 0}
  .said{flex:1 1 auto; min-width:0}
  .lbl{display:block; font:500 10px/1 var(--sans); letter-spacing:.14em;
       text-transform:uppercase; color:var(--p400); margin-bottom:12px}
  



  .desc{font:400 20px/1.45 var(--sans); color:var(--p050); margin:0 0 var(--s4)}
  .prompt{font:400 20px/1.45 var(--sans); color:var(--p050);
          margin:0 0 var(--s3); quotes:'\201C' '\201D';
          display:-webkit-box; -webkit-line-clamp:5;
          -webkit-box-orient:vertical; overflow:hidden}
  





  .credit{margin:0; font:400 15px/1.6 var(--sans); color:var(--p200);
          max-width:62ch; text-wrap:balance}
  .credit b{color:var(--p050); font-weight:600}

  









  .facts{flex:0 0 300px; margin:0}
  .what .fact{align-items:baseline; padding:9px 0;
              border-bottom:1px solid var(--p700)}
  .what .fact:first-child{border-top:1px solid var(--p600)}
  .what .fact:last-child{border-bottom:1px solid var(--p700)}
  .what .fk{flex:1; font:500 10px/1.4 var(--sans); letter-spacing:.14em;
            text-transform:uppercase; color:var(--p400)}
  .what .fv{font:400 14px/1.4 var(--mono); color:var(--p050);
            white-space:nowrap}
  

  .what .fv a{color:var(--p200); text-decoration:none;
              border-bottom:1px solid var(--p600)}
  .what .fv a:hover{color:var(--p050); border-bottom-color:var(--p400)}
  .what .fv a.on{color:var(--p050)}

  hr{border:0; border-top:1px solid var(--p600); margin:var(--s4) 0}

  











  



  .region{padding:var(--s4) 0; border-top:1px solid var(--p600)}
  .share{padding:var(--s4) 0; border-top:1px solid var(--p600)}
  .region > .lbl, .share > .lbl{margin-bottom:14px}
  

  .dests{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
  .dest{display:inline-block; padding:9px 14px; background:none;
        border:1px solid var(--p600); border-radius:2px; color:var(--p050);
        font:400 13px/1.2 var(--mono); text-decoration:none;
        cursor:pointer; white-space:nowrap}
  .dest:hover{border-color:var(--p200); background:var(--p800)}
  .desthint{margin:0 0 var(--s3); font:400 13px/1.5 var(--sans);
            color:var(--p400)}
  .pairs{display:flex; align-items:center; gap:var(--s5);
         flex-wrap:wrap; justify-content:space-between}
  .pair{display:flex; align-items:center; gap:var(--s3); min-width:0}
  .addrpair{min-width:0}
  .addr{font:400 13px/1.4 var(--mono); color:var(--p200);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        min-width:0}

  


  .seg2{display:flex; border:1px solid var(--p600); border-radius:2px;
        overflow:hidden; width:max-content; max-width:100%}
  .seg2 button{border:0; background:none; color:var(--p200);
     cursor:pointer; padding:9px 16px; text-align:left; display:block}
  .seg2 button+button{border-left:1px solid var(--p600)}
   
  .seg2 button{flex:0 0 112px; min-width:112px}
  



  .vidpair{flex-shrink:0}
  .seg2 button b{display:block; font:400 13px/1.35 var(--mono);
                 font-weight:400}
  .seg2 button i{display:block; font:400 12px/1.35 var(--sans);
                 font-style:normal; color:var(--p400); margin-top:3px}
  .seg2 button[aria-pressed="true"]{background:var(--p700);
                                    color:var(--p050)}
  .seg2 button[aria-pressed="true"] i{color:var(--p200)}

  













  .btn{display:inline-block; width:auto; background:none;
       color:var(--p050); border:0;
       border-bottom:1px solid var(--p600); padding:0 0 3px;
       font:400 13px/1.4 var(--mono); cursor:pointer;
       text-decoration:none; white-space:nowrap}
  .btn:hover{border-bottom-color:var(--p200)}
   
  .btn.wait{color:var(--p400); border-bottom-color:var(--p700);
            cursor:default}
  





  .btn.refused{color:var(--rust); border-bottom-color:var(--rust);
               cursor:default}
   
  .btn.done{color:var(--moss); border-bottom-color:var(--moss)}

  



  .caprow{display:flex; align-items:flex-start; gap:var(--s5);
          margin-top:var(--s3); padding-top:var(--s3);
          border-top:1px solid var(--p700)}
  .caprow .thing{flex:1; min-width:0}
  .caprow .act{flex:0 0 auto; padding-top:36px}
  .cue{margin:0 0 10px; font:400 13px/1.5 var(--mono); color:var(--p400)}
  

  .caprow .box{background:var(--p800); border:1px solid var(--p600);
     border-radius:2px; padding:14px 16px;
     font:400 14px/1.6 var(--sans); color:var(--p050);
     white-space:pre-wrap; overflow-wrap:anywhere}
  .caprow .box u{text-decoration:none; color:var(--p200)}

  















  


  .yourrow{display:flex; align-items:center; gap:var(--s5);
           padding:var(--s2) 0}
  .yourrow + .yourrow{border-top:1px solid var(--p700)}
  .yourrow p{flex:1; margin:0; font:400 15px/1.55 var(--sans);
             color:var(--p200)}
  .yourrow p b{color:var(--p050); font-weight:500}
   
  .yourrow p .addr{display:block; margin-top:6px;
     font:400 13px/1.4 var(--mono); color:var(--p400)}
  .yourrow .act{flex:0 0 auto}
  



  .staffonly{color:var(--p400)}
  .verdictact{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .verdictact input{flex:1 1 220px; min-width:0; padding:9px 12px;
    font:inherit; color:inherit; background:transparent;
    border:1px solid var(--p600, currentColor); border-radius:8px}
  .staffonly b{color:var(--p200)}
  


  .wait{display:block; margin-top:6px; font:400 13px/1.4 var(--sans);
        color:var(--ochre)}
  .btn[disabled]{color:var(--p400); cursor:default;
                 border-bottom-color:var(--p700)}
  



  .btn.danger:hover{color:var(--rust); border-bottom-color:var(--rust)}

  


  .invitation{display:flex; align-items:center;
              justify-content:space-between;
              gap:var(--s5); padding:var(--s4) 0; flex-wrap:wrap}
  .invitation p{margin:0; font:400 20px/1.4 var(--sans); color:var(--p050)}
  .invitation .sub{margin:8px 0 0; font:400 13px/1.5 var(--mono);
                   color:var(--p400)}
  

  .primary{border:0; border-radius:2px; background:var(--p050);
           color:var(--p900); font:600 16px/1 var(--sans);
           padding:12px 22px; cursor:pointer; flex:none;
           text-decoration:none; display:inline-flex; align-items:center}
  .primary:hover{background:var(--p200)}
  







  .primary.second{background:none; color:var(--p050);
                  box-shadow:inset 0 0 0 1px var(--p400)}
  .primary.second:hover{background:var(--p800);
                        box-shadow:inset 0 0 0 1px var(--p200)}
  .quiet{color:var(--p200); font:400 13px/1.4 var(--mono);
         text-decoration:none; border:0; border-bottom:1px solid var(--p600);
         padding:0 0 2px; background:none; cursor:pointer; flex:none}
  .quiet:hover{color:var(--p050); border-bottom-color:var(--p400)}
  .quiet.ready{color:var(--p050); border-bottom-color:var(--p050)}
  


  .quiet.refused, .primary.refused{color:var(--rust);
                                   border-bottom-color:var(--rust)}
  .primary.refused{background:none; box-shadow:inset 0 0 0 1px var(--rust)}
  .another{margin-left:auto; color:var(--p200); text-decoration:none;
           font:400 16px/1.4 var(--sans); white-space:nowrap;
           border-bottom:1px solid var(--p600); padding-bottom:2px}
  .another:hover{color:var(--p050); border-bottom-color:var(--p400)}
  .hint{margin:var(--s2) 0 0; font:400 13px/1.4 var(--mono);
        color:var(--p400)}
  


  .invitation{margin-top:var(--s4); padding-top:var(--s3);
              border-top:1px solid var(--p600)}
  .invite{margin:0 0 var(--s2); font:400 16px/1.5 var(--sans);
          color:var(--p050); max-width:46ch}

  



  



  .change{margin-bottom:var(--s4); max-width:60ch}
  .change textarea{display:block; width:100%; min-height:76px;
     margin-top:var(--s1); padding:var(--s2); resize:vertical;
     background:var(--p800); border:1px solid var(--p600);
     border-radius:2px; color:var(--p050);
     font:400 16px/1.5 var(--sans)}
  .change textarea:focus{border-color:var(--p400)}
  .changerow{display:flex; align-items:center; gap:var(--s3);
             margin-top:var(--s2); flex-wrap:wrap}
  


  .working{font:400 13px/1.6 var(--mono); color:var(--p200);
           margin:var(--s2) 0 0}
  .working b{color:var(--p050); font-weight:400}
  .oops{font:400 16px/1.5 var(--sans); color:var(--rust);
        margin:var(--s2) 0 0}
  .linkout{flex:1 1 220px; min-width:0; height:38px; padding:0 8px;
     background:var(--p800); border:1px solid var(--p400); border-radius:2px;
     color:var(--p050); font-family:var(--mono); font-size:13px}

  .note{margin:var(--s5) 0 0;
        padding-top:var(--s3); border-top:1px solid var(--p600);
        color:var(--p400); font:400 13px/1.7 var(--mono)}

  


  



  button:focus-visible, input:focus-visible, a:focus-visible,
  textarea:focus-visible, select:focus-visible,
  .linkout:focus, textarea:focus{outline:2px solid var(--ochre);
                                 outline-offset:1px}

  @media (pointer: coarse){
    .full{width:44px; height:44px}
    .sharejump{height:44px}
    .seg button{padding:13px 15px}
    .quiet{padding-bottom:8px}
  }
  @media (max-width:820px){
    h1{font-size:28px}
    


    .titlerow{flex-wrap:wrap; row-gap:6px}
    h1{flex:1 1 100%; min-width:0; overflow-wrap:break-word; word-break:normal}
    .who{flex:1 0 100%; text-align:left}
    

    .what{flex-direction:column; gap:var(--s3); padding:var(--s3) 0}
    .facts{flex:1 1 100%; width:100%}
    

    .caprow{flex-direction:column; align-items:stretch; gap:var(--s2)}
    .caprow .act{padding-top:0}
    .seg2{width:100%}
    .seg2 button{flex:1; min-width:0}
    



    .vidpair{flex-direction:column; align-items:flex-start;
             gap:var(--s2); width:100%}
    .pairs{gap:var(--s3)}
    .invitation{gap:var(--s3)}
    .invitation .primary{width:100%; justify-content:center}
    .yourrow{flex-direction:column; align-items:flex-start;
             gap:var(--s2)}
    .another{margin-left:0; width:100%}
  }



@media (max-width:560px){
  .sharejump{width:38px; padding:0; font-size:18px}
  .sharejump span{display:none}
  .sharejump::before{content:"\2197"}
}
@media (max-width:560px) and (pointer: coarse){
  .sharejump{width:44px}
}




@media (max-width:560px){
  .transport{gap:10px; flex-wrap:wrap}
  .mode:empty{display:none}
}

 
.adminact{display:flex; flex-wrap:wrap; gap:var(--s1)}
.adminsaid{margin:var(--s1) 0 0; font:400 13px/1.5 var(--mono);
  color:var(--p200)}

 
.galask{display:flex; align-items:center; justify-content:space-between;
   gap:var(--s4); margin:var(--s4) 0; padding:var(--s4);
   background:var(--p800); border:1px solid var(--p600); border-radius:2px}
.galask[hidden]{display:none}
.galask h2{margin:0 0 6px; font:500 20px/1.25 var(--sans); color:var(--p050)}
.galask p{margin:0; font:400 15px/1.5 var(--sans); color:var(--p200)}
.galask .galmsg{margin-top:8px; color:var(--p050)}
.galask .galmsg[hidden]{display:none}
.galact{display:flex; align-items:center; gap:var(--s3); flex:0 0 auto}
.galact .primary-action{border:0; cursor:pointer; min-height:44px}
.galact .primary-action:disabled{background:var(--p400); cursor:default}
.galno{background:none; border:0; padding:13px 4px; min-height:44px;
   cursor:pointer; color:var(--p200); font:400 14px/1 var(--sans);
   text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.galno:hover{color:var(--p050)}
@media (max-width:700px){
  .galask{flex-wrap:wrap; gap:6px; margin:var(--s3) 0; padding:10px 12px;
     background:none}
  .galtext{flex:1 1 100%}
  .galask h2{margin:0; font-size:14px; line-height:1.4}
  .galask p{margin:2px 0 0; font-size:13px; line-height:1.4}
  .galact{flex:1 1 100%; justify-content:space-between; gap:10px}
  .galact .primary-action{padding:0 14px}
  .galno{padding:0 4px; font-size:13px}
}