/* @override 
	https://test.alphaama.com/r/aa--styleshit.css?* */

@font-face { 
   font-family: "Source Code Pro"; 
   src:  url('aa--fu.otf.woff2') format("woff2"),
         url('aa--fu.otf') format("opentype"),
         url('aa--fu.ttf') format("truetype"); 
}

:root { 
/* 
     grays                colors              */
   --c-a-a:  23, 23, 23;--c-b-a: 204,102,102; /* red */
   --c-a-b:  55, 55, 55;--c-b-b: 222,147, 95; /* orange */
   --c-a-c:  82, 82, 82;--c-b-c: 240,198,116; /* yellow */
   --c-a-d: 123,123,123;--c-b-d: 181,189,104; /* green */
   --c-a-e: 180,180,180;--c-b-e: 138,190,183; /* cyan */
   --c-a-f: 223,223,223;--c-b-f: 129,162,190; /* blue */
                        --c-b-g: 178,148,187; /* violet */
   
   --bezier-quart: cubic-bezier(0.25, 1, 0.5, 1);
   --trans: all .3s ease-in-out 0s;
   --trans-quart: all .4s cubic-bezier(0.25, 1, 0.5, 1) 0s;
   --trans-quart-io: all .3s cubic-bezier(0.76, 0, 0.24, 1) 0s;
   
   --font-size: 16px;
   --font-size-s: .69420rem;
   --font-size-l: 1.2rem;
   --line: 2rem;
   --pad: .4rem;
   --size: 4rem;
   --media-height: 50vh; /* calc(1rem * 4); */
   --media-max-height: calc(100vh - 8rem - var(--line));    
   --top: 0;
}

html,
body {
   width: 100%;
   min-height: 100%;
   padding: 0;   
   margin: 0;
   font-size: var(--font-size);
   font-family: "Source Code Pro", monospace;
   letter-spacing: .023em;
   background-color: rgb(var(--c-a-a));	
   -webkit-text-size-adjust: 100%;
   line-height: var(--line);
}

#alphaama {
   color: rgb(var(--c-a-d));
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto auto 1fr auto;
   grid-template-areas:
      "a" "aa" "aam" "aama" "haama";
   align-items: start;   
   min-height: 100vh;
   box-sizing: border-box;
   padding-bottom: var(--size);
}

*::-webkit-scrollbar {
   width: 0px;
   height: 0px;
}

/* @group default */

article, section, h1, h2, p, ul, ol, li, span, a, button, textarea, time, figure, iframe, img {
   margin: 0;
   padding: 0;
   font-size: inherit;
   font-weight: normal;
   font-family: inherit;
   color: inherit; 
   text-decoration: none;
   list-style-type: none;
   -webkit-appearance: none;
           appearance: none;
   border-radius: 0;
   border: none;
   background: none;
   box-shadow: none;
   box-sizing: border-box;
}

button {
   display: grid;
   line-height: normal;
   cursor: pointer;
}

button:hover {
   color: rgb(var(--c-a-f));
}

::selection{
   background: white;
}

/* @end */
/* @group a */

#a {
   color: rgb(var(--c-a-c));
   background: rgb(var(--c-a-a));
   grid-area: a;
   display: grid;
   grid-template-areas: "before after title";
   grid-template-columns: auto auto 1fr;
   grid-gap: var(--pad);
   margin: 0;
   padding: var(--pad);
   /*white-space: pre;*/
   line-height: 1;
   cursor: pointer;
}

#a::before {
   content: attr(data-id-a);
   grid-area: before;
   color: rgb(var(--c-a-f));
}

#a::after{
   content: "//";
   grid-area: after;
   /*color: rgb(var(--c-a-c));*/
}

#a:hover {
   color: color: rgb(var(--c-a-f));;
}

#a:hover::before {
   content: "-<-";
}

.has-interesting #a:hover::before {
   content: "<--";
}



.has-interesting #a {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
   z-index: 999;
}



/* @end */
/* @group whatever the fuck you want */

#wtfyw {
   background: rgb(var(--c-a-a));
   position: fixed;
   bottom: 0;
   display: grid;
   grid-template-columns: 1fr var(--size);
   grid-template-rows: min-content;
   grid-template-areas:
      "halp halp"
	   "i u";
   width: 100vw;
   box-shadow: 0px -1rem 2rem 0 rgb(var(--c-a-a));
   z-index: 8;
}

#u {
   align-self: end;
   grid-area: u;
   display: grid;
   width: var(--size);
   height: var(--size);
   background-size: cover;
   background-position: 50% 50%;
   object-fit: cover;
   font-size: 0;
   text-align: center;
   background-color: rgb(var(--c));
}

#iot {
   color: rgb(var(--c-b-c));
   background: rgb(var(--c-a-a));
   grid-area: i;
   display: grid;
   padding: 0 var(--line);
   padding-top: 1rem;
   font-size: 1rem;
   transition: var(--trans-quart);
   resize: none;
   box-sizing: border-box;
   -webkit-line-break: normal;
   line-height: 1.5rem;   
   max-height: 100vh;
}

#iot:focus {
   outline: none;
   color: rgb(var(--c-a-a));
   background: rgb(var(--c-b-b));
   padding: var(--line);
}

#iot::placeholder {
   color: rgb(var(--c-b-c));
}

#iot:focus::placeholder {
   color: rgb(var(--c-a-c));
}

#wtfyw::after {
   content: attr(data-content) " ";
   white-space: pre-wrap;
   grid-area: i;
   pointer-events: none;
   padding: 0 var(--line);
   padding-top: 1rem;
   display: grid;
   font-size: 1rem;
   transition: var(--trans-quart);
   box-sizing: border-box;
   -webkit-line-break: normal;
   align-items: start;
   line-height: 1.5rem;
   letter-spacing: 0;
   visibility: hidden;
   max-height: 100vh;
}

.mode-input #wtfyw::after {
   padding: var(--line);
}

#halp {
   grid-area: halp;
}

/* @end */

/* @group aa */

#aa {
   grid-area: aa;
   --cc: var(--c-a-c);
   padding-left: var(--pad);
   overflow-x:  scroll;
}

#aa dl {
   grid-gap: var(--pad);
   display: grid;
   grid-template-columns: auto 1fr;
   margin: 0;
}

#aa dl dt {
   justify-self: start;
   border-bottom: none;
   color: rgb(var(--c-b-c));
}

#aa dl dt::before {
   content: "--";
   word-break: keep-all;
}

#aa dl dl > dt {
   justify-self: end;
}

#aa dl dl > dt::before {
   content: "";
}

#aa dl dt::after {
   /*content: ":";*/
}

#aa dl dd {
   margin: 0;
/*   border-bottom: none;
   padding: 0;*/
}

dd.anon p::before {
   content: attr(data-label);
   color: rgb(var(--c-a-c));
   margin-right: var(--pad);
}
/*.options {
   display: grid;
   overflow-x: scroll;
   width: 100vw;
   justify-items: start;
   grid-template-columns: auto auto 1fr;
   grid-template-areas: "before options after"; 
}*/

/*.options.expanded {
   grid-template-columns: 1fr;
   grid-template-areas: unset;   
   /*background: black;*!/
}*/

/*.options:not(.expanded) [data-label="aka"],
.options:not(.expanded) [data-label="last"] {
   display: grid;
   padding-left: 0;
}*/

/*.options > * {
   padding-left: calc(var(--pad)*4);
}

.options ul[data-label] {
   grid-template-columns:  auto 1fr;
   grid-gap: var(--pad);
   /*line-height: 1.4;*!/
}*/

/*.options ul[data-label] > * {
   grid-column: 2;
}

.options [data-label] {
   display: grid;
   grid-template-columns:  auto 1fr;
   grid-template-areas: "before .";
   grid-gap: var(--pad)
}

.options [data-label]::before {
   content: attr(data-label);
   opacity: .5;
   white-space: pre;
   grid-area: before;
   text-align: right;
}

.aka[data-label]::before {
   content: attr(data-label);
   opacity: 1;
   white-space: pre;
   grid-area: before;
   text-align: right;
}

.options [data-label="relays"] li > *{
   grid-column: 2;
}

.relay[data-label]::before {
   content: attr(data-read) attr(data-write);
   margin-right: var(--pad);
   word-break: keep-all;
}

.options [data-label="toggle"] li{
   display: grid;
   grid-auto-flow: column;
   /*grid-template-areas: unset;*!/
}

.options:not(.expanded) > * {
   display: none;
}*/

/* @end */
/* @group messages */

#net {
   grid-area: aam;
   position: relative;
   display: grid;
   grid-template-areas: "articles";
   grid-gap: var(--pad) 0;
   grid-template-columns: 1fr;
   grid-gap: var(--pad);
   grid-auto-flow: dense;
   /*z-index: 1;*/
}

#mess {
   display: grid;	
   position: relative;
/*   max-height: 100vh;
   overflow-y: scroll;*/
   /*grid-gap: var(--pad) 0;*/
}

article {
   display: grid;
/*   grid-template-areas:
      "by id id"
      "kind content content"
      "tags tags tags"
      "reactions reactions reactions"
      "replies replies";
   grid-template-columns: 1fr auto;*/
   position: relative;
   border-top: 1px dotted rgba(var(--c-a-c),1);
   
   grid-template-columns: auto auto 1fr auto;
   grid-template-rows: auto auto auto 1fr;
   grid-template-areas: 
      "by kind id id"
      "content content content content"
      "tags tags tags actions"
      "reactions reactions reactions reactions"
      "replies replies replies replies";
   border-left: 1px dotted rgba(var(--c-a-c), 1);
   padding-bottom: var(--pad);
   /*align-self: start;*/
}

/*article::before*/
article .s {
   /*content: "(" attr(data-kind) ")";*/
   color: rgb(var(--c-a-c));
   grid-area: kind;
   font-size: var(--font-size-s);
   padding: 0 var(--pad);
   line-height: 1;
   align-self: end;
}

article .s::before {
   content: "{";
}

article .s::after{
   content: "}";
}

/* betr col smol */
.smol:not(.interesting):not(.mom) > .tags,
.smol:not(.interesting):not(.mom) > .content,
.smol:not(.interesting):not(.mom) > .actions {
/*   position: absolute;
   opacity: 0;*/
   display: none;
   /*pointer-events: none;*/
}

.smol.interesting .smol > .content {
   /*display: grid;*/
}

/*article.interesting > .tags,
article.interesting > .replies,
article.interesting > .content,
article.interesting > .actions {
   display: grid;
}*/

article.smol:not(.interesting):hover {
   /*cursor: pointer;*/
}

article.smol:not(.interesting):hover > .content{
   display: grid;
   top: 0;
   position: absolute;
   /*opacity: 1;*/
   z-index: 9;
   width: 100%;
   background: rgb(var(--c-a-a));
   padding-bottom: var(--line);
   padding-right: var(--pad);
   pointer-events: none;
}

article > h1{
   grid-area: id;
   display: grid;
   line-height: 1;
   /*justify-content: right;*/
   /*align-items: start;*/
}

article > h1 .a.event-id {
   text-align: right;
   padding-right: var(--pad);
   /*justify-content: end;*/
}

.by {
   grid-area: by;
   display: grid;
   grid-template-areas: "who wen";
   grid-gap: var(--pad);
   line-height: 1;
   align-items: end;
   margin-bottom: 0;
   /*background-color: rgb(var(--c-a-a));*/
}

.created-at {
   color: rgb(var(--c-a-d));
   font-size: var(--font-size-s);
}

.created-at::before {
   content: "~";
}

.by .created-at {
   grid-area: wen;
}

.content {
   /*overflow: hidden;*/
   grid-area: content;
   padding-left: var(--pad);
   white-space: pre-wrap;
   /*width: 100%;*/
   hyphens: auto;
   -webkit-hyphens: auto;
   /*width: 100vw;*/
}

.tags {
   grid-area: tags;
   display: flex;
   flex-wrap: wrap;
   line-height: 1;
   font-size: var(--font-size-s);
   margin-top: var(--pad);
   display: none;
   /*grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));*/
}

.interesting > .tags {
   display: flex;
}

.tags li {
   /*padding: var(--pad);*/
   padding-left: var(--pad);
   display: inline-grid;
   justify-self: flex-start;
   /*list-style-type: decimal;*/
}

.tags li::marker {
  /*content: "[" counter(tags) "]";*/
}

.tags li:hover {
   /*color: rgb(var(--c-a-f));*/
}

.replies {
   grid-area: replies;
   /*z-index: 2;*/
   padding-bottom: 1rem;
   padding-left: var(--pad);
   padding-top: .7rem;
   /*background-color: rgb(var(--c-a-a));*/
   display: grid;
   grid-template-areas: "reactions";
}

e.root > .replies, 
.p > .replies {
   padding-bottom: 0;
   padding-left: 0;
}

/* @end */

/* @group view source */

.raw {
   display: grid;
   grid-template-columns: auto 1fr;
   overflow-x: scroll;
   max-width: 100vw;
   padding: var(--pad);
   margin: 0;
   cursor: pointer;
   /*background: black;*/
   /*justify-self: start;*/
   /*justify-items: start;*/
}

.raw::before {
   content: attr(id) " {";
   grid-column: 1/-1;
   color: rgb(var(--c-a-b));
}

.raw::after {
   content: "}";
   grid-column: 1/-1;
   color: rgb(var(--c-a-b));
   align-self: end;
}

.raw dt {
   justify-self: end;
   align-self: start;
   opacity: .6;
   cursor: auto;
   border-bottom: 1px solid rgb(var(--cc));
   padding-left: var(--pad);
   margin-left: var(--pad);
}

.raw dd {
   padding: 0 var(--line);
   margin: 0;
   hyphens: auto;
   -webkit-hyphens: auto;
   /*overflow: hidden;*/
   justify-self: start;
/*   -webkit-user-select: all;
   user-select: all;*/
   border-bottom: 1px solid rgb(var(--cc));
   /*display: grid;*/
   cursor: auto;
}

.e > .source {
   display: none;
}

.e.view-source > .source {
   grid-area: content;
   display: grid;
   
}



.e.view-source > *:not(.source):not(.by) {
   display: none!important;
}

.relay::before {
   content: attr(data-read) attr(data-write);
   margin-right: var(--pad);
   word-break: keep-all;
   color: rgb(var(--c-a-c));
}

.relay::after {
   content: attr(data-status);
}

/* @end */

/* @group authors */

/*#authors {
   grid-column: 2;
   max-height: calc(100vh - 5rem);
   overflow-y: scroll;
   grid-row: span 23;
   position: sticky;
   position: -webkit-sticky;
   top: 0;
}*/

.p:not(.interesting):not(.mom) {
   display: none;
}

.p {
/*   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto 1fr;
   grid-template-areas: 
      "id id"
      "content actions"
      "content replies";
   background: rgb(var(--c));
   grid-gap: 0 var(--pad);
   border: none;*/
   grid-template-areas: 
      "id id id id"
      "content content content content"
      "tags tags tags actions"
      "reactions reactions reactions reactions"
      "replies replies replies replies";
}

.p::before {
   content: none;
}
/*
.smol.p {
   padding-bottom: 0;
}*/

/*.p:not([data-nip05])::before {
   content: attr(id);
   grid-area: nip05;
   width: 100%;
   overflow: hidden;
   word-break: keep-all;
}*/

.smol.p > h1 {
   /*display: none;*/
}

/*.smol.p > h1 {
   font-size: var(--font-size-s);
   width: 100%;
   overflow: hidden;
}*/


/*
.p > .content {
   align-self: end;
}*/

/* @end */

/* @group kind-0 */

article[data-kind="0"] {
   padding: 0;
   grid-template-areas: 
      "content content content content"
      "by kind id actions"
      "replies replies replies replies";
   border-top: none;
   border-left: none;
   align-self: end;
}



.kind-0.content:not(.smol) {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-areas: 
      "picture picture"
      "logo name"
      "about about";
   align-self: start;
   align-items: start;
   padding: 0;
}

[data-kind="0"]:not(.smol)::before,
[data-kind="0"]:not(.smol) > .by, 
[data-kind="0"]:not(.smol) > h1 {
   background-color: rgb(var(--c-a-a));
   padding: var(--pad);
}

[data-kind="0"] > .by .author {
   /*display: none;*/
}

.tit {
   background-color: rgb(var(--c-a-a));
   grid-area: name;
   display: grid;
   padding: 0 var(--pad);

   position: relative;
   /*align-self: start;*/
   justify-self: start;
   grid-template-areas: "petname name";
   /*line-height: 1.4;*/
}

.logo {
   grid-area: logo;
   width: var(--line);
   height: var(--line);
   make your own filter: 
   /* https://codepen.io/sosuke/pen/Pjoqqp */
   filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
   padding: var(--pad);
   background-color: rgb(var(--c));
   /*z-index: 23;*/
   /*position: relative;*/
}

.about {
   color: rgb(var(--c-a-d));
   background-color: rgb(var(--c-a-a));
   /*margin: 0;*/
   line-height: 1.4;
   /*word-break: break-all;*/
   hyphens: auto;
   -webkit-hyphens: auto;
   white-space: pre-wrap;  
   padding: var(--pad);
   grid-area: about;
   /*z-index: 1;*/
   position: relative;
}

.about::before {
   content: "\\";
   display: block;
}

.picture {
   /*position: absolute;*/

   max-width: 100%;
   /*z-index: 0;*/
   max-height: var(--media-height);
   grid-area: picture;
   align-self: end;
   justify-self: start;
}

/* @end */

/* @group tags */

.a {
   display: inline-grid;
   /*grid-template-areas: "before and after";*/
   /*grid-template-columns: auto 1fr auto;*/
   font-size: var(--font-size-s);
   align-items: end;
   line-height: 1;
   word-break: keep-all;
}

.a:hover {
   color: rgb(var(--c-a-f));
}

.a {
   /*padding-top: 0;*/
   grid-gap: var(--pad);
   background-color: rgb(var(--c-a-a));
}

.author {
   grid-template-columns: auto 1fr;
}

.author::before {
   content: "";
   width: calc(1rem ); /*calc(1rem + calc(1rem/3));*/
   height: calc(1rem ); /*calc(1rem + calc(1rem/3));*/
   padding: 0;
   background-image: var(--picture);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: rgb(var(--c));
}

.author.has-picture::before {
   background-color: rgb(var(--c-a-a));
}

.content .a.mention {
   align-items: center!important;
   font-size: var(--font-size);
   padding: 0;
}

.content .a.mention .text {
   border-bottom: none;
}

.a.has-picture.mention::before {
   background-image: none!important;
   height: unset;
   width: unset;
}

/*.content .a.mention:not(.a-p):not(.a-e)::before {
   content: "";
}

.a-p.mention::before {
   content: "@";
   width: auto;
}

.a-e.mention::before {
   content: "/";
}

.a-e.mention::after {
   content: "";
}*/


/* @end */

/* @group draft */

.e.draft {
   
}

.e.draft > .heading > .id::before{
   content: "draft";
   color: rgb(var(--c-b-a));
   align-self: center;
   padding: calc(1rem / 6);
   border-bottom: 1px solid transparent;
}

.actions-draft {
   grid-area: actions;
   display: grid;
   grid-template-columns: auto;
   grid-auto-flow: column;
   grid-gap: var(--line);
   padding: var(--pad);
   justify-items: start;
   justify-self: start;
}

.cancel {
   color: rgb(var(--c-b-a));
}

.post {
   color: rgb(var(--c-b-d));
}

.edit {
   color: rgb(var(--c-b-b));
}

/* @end */

.reactions {
   grid-area: reactions;
   /*padding: 0 var(--pad);*/
   /*justify-self: end;*/
/*   position: sticky;
   position: -webkit-sticky;
   bottom: 4rem;*/
   display: grid;
   /*justify-items: end;*/
   background: rgb(var(--c-a-a));
}

/* @group actions */

.actions {
   grid-area: actions;
   padding: 0 var(--pad);
   justify-self: end;
   position: sticky;
   position: -webkit-sticky;
   bottom: 4rem;
   display: grid;
   grid-template-areas: "reactions" "hide-replies";
   justify-items: end;
   background: rgb(var(--c-a-a));
   justify-items: end;
}

.interesting > .actions {
   background: black;
}

.actions button {
   color: rgb(var(--c-a-b));
}

.actions button:hover {
   color: rgb(var(--c-a-f));
}

.actions .reactions {
   grid-area: reactions;
}

.actions .hide-replies {
   display: none;
   grid-area: hide-replies;
}

.has-replies > .actions > .hide-replies {
   display: grid;
   grid-template-areas: "before count after"
}

.actions .hide-replies::before {
   content: "//";
   grid-area: before;
   white-space: pre;
}

.replies-hidden > .actions .hide-replies::before {
   content: "/* ";
}

.replies-hidden > .actions .hide-replies::after {
   content: " event hidden */";
   grid-area: after;
   white-space: pre;
}

/* @end */

/*/* @group kind0 *!/

#kind-0 {
   /*grid-area: knd0;*!/
   display: grid;
   grid-template-columns: 1fr;
   align-items: start;
   align-self: start;
   /*max-height: 50vh;*!/
   /*overflow-y: scroll;*!/
}

.fren {
   display: grid;
   position: relative;
   grid-template-rows: auto 1fr auto;
   grid-template-columns: 1fr;
   grid-template-areas:
      "pubkey"
      "header"
      "follows"
      "relays"
      "dms"
      "interactions"
      "active";
   align-items: end;
}

.ffs .fren{
   margin-bottom: var(--line);
   border: 1px solid rgb(var(--c));
   border-bottom: 0;
}

.fren button.close {
   grid-area: header;
   align-self: start;
   justify-self: end;
   background: rgb(var(--c-a-a));
   color: rgb(var(--c-b-a));
   color: rgb(var(--c-a-f));
   top: calc(var(--line) + var(--pad));
   right: 0;
   padding: calc(var(--pad)*2);
   font-size: var(--font-size-l);
   line-height: 1;
}

.fren .metadata {
   grid-area: header;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas:
      "picture picture"
      "name logo"
      "about about";
   align-self: start;
   align-items: start;
}

.fren .picture {
   grid-area: picture;
   align-self: start;
   max-height: var(--media-height);
   height: unset;
   transition: var(--trans-quart);
   object-fit: contain;
   object-position: 0% 0%;
   cursor: pointer;
}

.fren .id {
   color: rgb(var(--c-b-a));
}

.fren .pubkey {
   grid-area: pubkey;
   margin: 0;
   align-self: start;
   padding: var(--pad);
   max-width: 100%;
   word-break: break-all;
   box-sizing: border-box;
   z-index: 4;
   background: rgb(var(--c-a-a));
   color: rgb(var(--c));
}

.fren .pubkey::selection {
   color: rgb(var(--c-a-a));
   background: rgb(var(--c-a-f));
}

.fren .pubkey::after {
   transform: translateX(-100%) translateY(.6rem);
}

.fren .logo {
   grid-area: logo;
   width: var(--line);
   height: var(--line);
   /*make your own filter: 
   https://codepen.io/sosuke/pen/Pjoqqp *!/
   filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
   padding: var(--pad);
   z-index: 23;
   box-sizing: border-box;
   align-self: end;
   border-top: 0;
   align-self: start;
}

.metadata .tit {
   padding-top: 0;
   padding-bottom: 0;
   grid-area: name;
   display: grid;
   align-self: start;
   justify-self: start;
   grid-template-areas: "petname nip05";
   /*line-height: 1.4;*!/
}

.name {
   color: rgb(var(--c-a-f));
   background: rgb(var(--c-a-a));
   position: relative;
   grid-area: petname;
   z-index: 1;
   justify-self: start;
   padding: 0 var(--pad);
   padding-top: 0;
}

.text[data-nip05] .name {
   /*color: rgb(var(--c));*!/
}

.tit::after {
   grid-area: nip05;
   content: attr(data-nip05);
   font-size: var(--font-size-s);
   background: rgb(var(--c-a-a));
   padding-right: var(--pad);
}

.about {
   color: rgb(var(--c-a-d));
   background-color: rgb(var(--c-a-a));
   margin: 0;
   transform-origin: bottom left;
   line-height: 1.4;
   /*word-break: break-all;*!/
   hyphens: auto;
   -webkit-hyphens: auto;
   white-space: pre-wrap;  
   padding: var(--pad);
   padding-top: 0;
   grid-area: about;
}

.about::before {
   content: "\\";
   display: block;
}

.solo .section {
   padding: 0 var(--pad);
   color: rgb(var(--c-a-c));
   display: grid;
   justify-self: start;
   cursor: pointer;
   background: rgb(var(--c-a-a));
   margin: 1px;
}

.solo .section::before {
   content: attr(data-label);
   grid-column: 1 / -1;
   text-align: right;
   justify-self: start;
   background: rgb(var(--c-a-a));
}

.solo .section .section-item {
   display: none;
}

.solo .section.active {
   width: 100%;
   box-sizing: border-box;
   /*grid-area: active;*!/
   padding-bottom: var(--line);
}

.solo .section.active::before {
   content: "--" attr(data-label);
   color: rgb(var(--c-a-e));
}

.solo .section.active .section-item {
   display: grid;
}

.solo .relays {
   grid-area: relays;
   display: grid;
   align-items: start;
   justify-self: end;
}

.solo .relay {
   padding-left: calc(var(--line) + var(--pad));
   text-indent: calc(var(--line)*-1);
   align-self: start;
}



.solo .follows.active,
.solo .follows-u.active {
   align-items: center;
   grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   grid-gap: var(--pad);
}

.follows-u {
   grid-area: follows-u;
}

.follows {
   grid-area: follows;
} 


.follow {
   padding-bottom: 1px;
   margin-right: var(--pad);
   max-width: 8rem;
   overflow: hidden;
}

.follow a.has-picture {
   padding: 0!important;
}

.interactions {
   grid-area: interactions;   
}

.interaction.unread {
   display: grid!important;
}

.interaction {
   grid-template-columns: auto;
   grid-auto-flow: column;
   justify-items: start;
   justify-content: center;
   grid-gap: var(--pad);
   padding: var(--pad);
   color: rgb(var(--c-a-c));
}

.interaction a {
   color: rgb(var(--cc));
}

.interaction.read {
   opacity: .5;
   display: none;
}

.inbox-state {
   margin-left: var(--pad);
   display: grid;
   align-content: center;
   color: rgb(var(--c-a-d));
}

.interaction.read .inbox-state {
   display: none;
}

.p-k .fren:not(.solo) {
   display: none!important;
}

.fren.solo {
   padding-bottom: 1px;
   margin-bottom: calc(var(--line) + calc(var(--pad)*2));
   background: linear-gradient(to left, rgb(var(--c-a-a)) 0%, rgb(var(--c)) 100%);
}

body:not(.ffs) .fren:not(.solo) > *:not(.interactions) {
   display: none;
}

.dms {
   grid-area: dms;
   overflow-y: scroll;
   max-height: var(--media-max-height);
}

.dm {
   /*display: none;*!/
}

.own.dm {
   justify-self: end;
}

/* @end *!/*/
/*/* @group kind1 *!/



/*.e {
   position: relative;
   box-sizing: border-box;
   border-top: 1px dotted rgba(var(--c-a-c),1);
}*!/

.e,
.e.root:not(.mom):not(.interesting).hidden {
   background: linear-gradient(to bottom, rgba(var(--cc),1) 0%, rgba(var(--c-a-a),1) 50%);
   background: rgba(var(--c-a-a));
   display: grid;
   grid-template-columns: var(--pad) auto 1fr;
   grid-template-rows: auto auto auto auto 1fr;
   grid-template-areas: 
      "h h h"
      "src src src"
      "content content content"
      "reactions reactions reactions"
      "actions actions actions"
      "replies replies replies";
   box-sizing: border-box;
   border-left: 1px dotted rgba(var(--c-a-c), 1);
   padding-bottom: var(--pad);
}

.e .heading {
   grid-area: h;
   color: rgb(var(--c-a-f));
   align-self: center;
   align-content: center;
   display: grid;
   grid-template-areas: 
      "name tags id";
   grid-template-columns: auto 1fr;
   font-size: var(--font-size-s);
   line-height: 1;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

.heading > .id {
   grid-area: id;
   color: rgb(var(--c-a-a));
   word-break: keep-all;
   align-self: start;
}

.heading > .id .text {
   border-bottom: 1px dotted rgba(var(--cc), 0);
}

.heading > .id::before,
.heading > .id::after{
   content: "";
}

.view-source > .heading > .id,
.heading > .id:hover::before,
.view-source > .heading > .id::before,
.heading > .id:hover::after,
.view-source > .heading > .id::after {
   color: rgb(var(--c-a-f));
}

.heading > .author {   
   z-index: 10;
   grid-area: name;
}

.heading > .author .text {
   border-bottom: 1px dotted rgba(var(--c), 0);
}

.e.mom > .heading {
   min-height: 6px;
}

.root.mom > .heading,
.mom:not(.interesting) > .heading {
   position: relative;
   top: 0;
}

.content {
   color: rgb(var(--c-a-d));
   background: rgb(var(--c-a-a));
   grid-area: content;
   display: grid;
   padding-left: var(--pad);
   padding-right: var(--pad);
   
   border: 1px solid transparent;
   border-left: none;
   box-sizing: border-box;
   overflow: hidden;   
}

.e.root:not(.mom):not(.interesting) > .replies .content,
.e.interesting .replies .content{
   max-width: 60vw;
   justify-self: stretch;
}

.replies {
   grid-area: replies;
   z-index: 2;
   padding-bottom: 1rem;
   padding-left: var(--pad);
   padding-top: .7rem;
   background-color: rgb(var(--c-a-a));
   display: grid;
   grid-template-areas: "reactions";
}

.e .reply[data-kind="7"] {
   grid-area: reactions;
}

.e.root:not(.mom):not(.interesting) > .replies {
   position: sticky;
   top: 1.2rem;
   align-self: start;
}

.replies-hidden .replies {
   display: none;
}



.e:not(.mom).hidden {
   margin: 0!important;
   padding: 0!important;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

.e.interesting .hidden {
   margin: 0!important;
   -webkit-user-select: auto;
      -moz-user-select: auto;
       -ms-user-select: auto;
           user-select: auto;
   pointer-events: auto;
}

.e.hidden > .content,
.e.hidden > .heading,
.e.hidden > .tags,
.e.hidden > .actions {
   display: none;
}

.e:not(.mom).hidden > .replies {
   border: none;
   border-top: none;
   border-bottom: none;
   margin: 0;
   padding: 0;
}

.e.mom > .content,
.e.mom > .heading,
.e.mom > .tags,
.e.interesting .e.hidden > .content,
.e.interesting .e.hidden > .heading,
.e.interesting .e.hidden > .tags
{
   display: grid;
}

.e.interesting.mom > .heading {
   font-size: var(--font-size);
   padding: var(--pad);
}

.e.interesting.mom > .heading,
.e.interesting.mom > .created-at,
.e.interesting.mom > .content {
   background-color: black;
}

/* @end *!/*/

/* kind40 - chat */

[data-kind="40"] {
   background: rgb(var(--cc));
}

[data-kind="40"] > .replies > .e {
   display: none;
}

[data-kind="40"] > .replies > .e:nth-last-child(-n+9) {
   display: grid;
}



/* @group over */

article:not(.interesting):hover {
   cursor: pointer;
   border-color: rgb(var(--c));
}

/*.e.over:not(.more-over) > .heading > .author .text*/
.e:hover > .by > .author {
  /*color: rgba(var(--c-a-f),1); */
}

.e:hover > .actions button{
  color: rgba(var(--c-a-d),1); 
}

.e:hover > .actions button:hover{
  color: rgba(var(--c-a-f),1); 
}

.more-over > .content {
   color: rgb(var(--c-a-d));
}
/*.over:not(.more-over) > .content*/
.e:hover > .content {
   color: rgb(var(--c-a-f));
}

/* @end */

/* @group interesting */


.has-interesting #o,
.has-interesting #m,
.has-interesting #alphaama,
.has-interesting article
/*.has-interesting article:not(.mom):not(.interesting).hidden*/
{
   display: none;
}

article.mom,
article.interesting article,
article.interesting {
   display: grid;
}


.interesting {
   /*top: 1.4rem;*/
   border-top: calc(var(--line)) solid rgba(var(--c), .2);
   border-bottom: var(--line) solid rgba(var(--c), .2);
   /*background-color: rgba(var(--c),1);*/
   padding-left: 0;
   padding-top: 0;
   transition: var(--trans-quart-io);
}

/*.has-interesting #anykind,
.has-interesting #kind-0 {
   display: none;
}

.has-interesting .e,
.has-interesting .e.root:not(.mom):not(.interesting).hidden{
   display: none;
}

.has-interesting .e.mom,
.has-interesting .e.interesting,
.has-interesting .e.interesting .e{
   display: grid;
}

.e.interesting {
   grid-template-columns: auto 1fr auto auto;
   grid-template-rows:  repeat(3, auto) 1fr;
   grid-template-areas: 
      "h h h h"
      "src src src src"
      "ca content content content"
      ". actions actions actions"
      ". replies replies replies";
   position: relative;
   border-top: calc(var(--top)) solid rgba(var(--c), .2);
   border-bottom: var(--top) solid rgba(var(--c), .2);
   background-color: rgba(var(--c),1);
   padding-left: 0;
   padding-top: 0;
   transition: var(--trans-quart-io);
}


.e.root:not(.mom):not(.interesting),
.e.interesting > .replies > .reply {
   grid-template-columns: auto 1fr auto 2fr;
   grid-template-columns: minmax(33vw, auto) 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas: 
      "h h"
      "content replies"
      "reactions replies"
      "actions replies"
      "src src";
   grid-gap: 0;
   margin-bottom: var(--pad);
   --c-root: var(--cc)
}

.p-k .e.root:not(.mom):not(.interesting),
.p-k .e.interesting .reply {
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto 1fr;
   grid-template-areas: 
      "h h"
      "content content"
      "reactions reactions"
      "actions actions"
      ". replies";
}

.e.root:not(.mom):not(.interesting) {
   margin-bottom: var(--line);
}

.e[data-reply] {
   margin-bottom: var(--line);
}
.e[data-reply]::before {
   content: "*";
   position: absolute;
   font-size: var(--font-size-s);
   color: rgb(var(--c-b-a));
   padding: var(--pad);
   background-color: rgb(var(--c-a-a));
   line-height: 1;
   transform: translateY(calc(-100% - 1px));
}

.e:last-child {
   margin-bottom: 0!important;
}

.e.interesting > .content.has-media {
   padding: 0!important;
}

.e.root:not(.interesting):not(.mom) > .heading,
.e.interesting .e .heading {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
   z-index: 7;
   background: rgb(var(--c-a-a));
}

.e.root:not(.interesting):not(.mom) > .content,
.e.interesting .e.reply > .content {
   align-self: start;
   position: sticky;
   position: -webkit-sticky;
   top: 1rem;
   max-width: 40vw;
}

/*.e.root:not(.interesting):not(.mom)[data-kind="0"] > .content,*!/
.p-k .e.root:not(.interesting):not(.mom) > .content,
.p-k .e.interesting .e.reply > .content {
   max-width: unset;
}

.e.interesting > .content {
   color: rgb(var(--c-a-f));
   position: relative;
   padding-bottom: 1.5rem;
   padding-left: var(--pad);
   top: 0;
   max-height: unset;
   hyphens: auto;
   -webkit-hyphens: auto;
   max-width: unset!important;
}

.e.interesting > .replies {
   align-self: start;
}

.has-interesting .replies {
   z-index: unset;
}

.interesting > .created-at {
   display: block;
}

.interesting .tags {
   line-height: unset;
   justify-content: start;
   justify-items: start;
   align-items: end;
}*/

/* @end */

/* @group alphaama */

#stuff {
   grid-area: haama;
   padding: 1rem;
   padding-bottom: var(--line);
   box-sizing: border-box;
}

/*

.ffs #stuff,
.has-interesting #alphaama {
   display: none;
}

#stuff p {
   hyphens: auto;
   -webkit-hyphens: auto;
}

#stuff p::before {
   content: "/* ";
}

#stuff p::after {
   content: " *!/";
}

#stuff em {
   color: rgb(var(--c-b-c));
}

#stuff a {
   color: rgb(var(--c-b-g));
   box-sizing: border-box;
   display: inline-block;
}

#stuff a::before {
   content: " *!/ ";
}

#stuff a::after {
   content: " /* ";
}

#stuff a:hover {
   text-decoration: underline;
}*/

/* @end */

/* @group content */

/*.content p {
   margin-bottom: 1.4rem;
   overflow: hidden;
   max-width: 100%;
   white-space: pre-wrap;
}

.content p:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
}

.interesting > .content p {
   cursor: auto;
   hyphens: auto;
   overflow: hidden;
   margin: 0;
}*/

.content-video,
.content-img {
   justify-self: start;
   align-self: start;
   max-width: 100%;
   max-height: var(--media-height);
   object-fit: contain;
   box-sizing: border-box;
   position: relative;
   padding: .5rem 0;
   margin: 0;
   display: block;
}

.interesting > .content .content-video {
   height: var(--media-max-height);
   max-height: unset;
}

.interesting > .content .content-img {
   height: auto;
   max-height: unset;
}

.content-link {
   color: rgba(var(--c-b-f), .7);
   /*word-break: break-all;*/
}

.content-link:hover {
   color: rgba(var(--c-b-f), 1);
}

.about .content-link {
   vertical-align: bottom;
}

.content iframe {
   background: rgb(var(--c-a-a));
   border: none;
   border: 1px dotted rgb(var(--c-a-a));
   font-family: "fu", monospace;
}

.yt { 
   margin: 0;
   z-index: 6;
}

.yt iframe, .yt object, .yt embed { 
   border: none;
}

.interesting > .content .yt {
   z-index: 5;
}

.interesting > .content .yt iframe, .interesting > .content .yt object, .interesting > .content .yt embed {
   height: var(--media-max-height);
   width: 100%;
}

/* @end */
/* @group yo */

.yo{
   color: rgb(var(--c-a-e));
   display: grid;
   position: relative;
   justify-self: start;
   grid-template-rows: 1fr auto;
   grid-template-areas:
      "yo";
   margin: 0; 
   padding-top: var(--line);
}

.yo video.started {
   
}

.yo.is-over {
   color: rgb(var(--c-a-f));
}

.yo video {
   grid-area: yo;
   background: black;
   opacity: .5;
   margin: 0;
}

.yo video:hover{
   cursor: pointer;
   opacity: 1;
}

.yo video.playin {
   opacity: 1;
   z-index: 1;
}

.yo figcaption{
   grid-area: yo;
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-areas:
      "progress progress"
      "before before"
      "vhs vhs"
      ". after";
   padding: .5rem;
   align-self: start;
   align-items: start;
   align-content: start;
   text-align: right;
   transform: translateY(-2rem);
   cursor: pointer;
}

.yo figcaption:hover {
   z-index: 2;
}

.yo figcaption:hover::before {
   content: "<video rewind";
}

.yo figcaption::before {
   content: "<video " attr(data-duration)"s";
   grid-area: before;
   white-space: pre;
}

.yo video:over + figcaption::before {
   content: "<video play " attr(data-duration)"s";
}

.yo .started + figcaption::before {
   content: "<video " attr(data-remains)"s";
}

.yo .started + figcaption:hover::before {
   content: "<video rewind";
}

.yo video.started:hover + figcaption::before {
   content: "<video play " attr(data-remains)"s";
}

.yo video.started.playin:hover + figcaption::before {
   content: "<video pause " attr(data-remains)"s";
}

.yo .vhs {
   width: 100%;
   grid-area: vhs;
   word-break: break-all;
   justify-self: start;
   mix-blend-mode: color-dodge;
   top: 0rem;
   box-sizing: border-box;
   cursor: text;
}

.over .vhs {
   opacity: 1;
}

.yo .vhs::after {
   content: ">";
}

.yo figcaption progress {
   grid-area: progress;
   align-self: center;
   pointer-events: none;
   width: 100%;
}

.yo figcaption progress[value] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 100%;
   height: 1px;
   margin: 0;  
}

.yo figcaption progress[value]::-webkit-progress-bar{
   background-color: rgba(var(--c-a-e), .2);
}

.yo figcaption progress[value]::-webkit-progress-value{
   background-color: rgb(var(--c-a-a));     
}

/* @end */

@media screen and (max-width: 769px) {
   :root {
      --font-size: 14px;
   }
   
/*   .p-k #kind-0 {
      position: relative;
   }
   
   .e.root:not(.mom):not(.interesting),
   .e.interesting .e.reply {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto 1fr;
      grid-template-areas: 
         "h h"
         "content content"
         "actions actions"
         ". replies";
      grid-gap: 0;
      margin-bottom: var(--top);
   }
   
   .e.root:not(.interesting):not(.mom) > .heading,
   .e.interesting .e > .heading,
   .e.root:not(.interesting):not(.mom) > .content,
   .e.interesting .e > .content,
   .over:not(.more-over) > .content {
      top: 0;
      position: relative;
   }
   
   .fren {
      grid-template-rows: repeat(7, auto) 1fr;
      grid-template-columns: 1fr;
      grid-template-areas:
         "pubkey"
         "header"
         "follows-u"
         "follows"
         "relays"
         "dms"
         "interactions"
         "active";
   }
   
   .solo .follows.active,
   .solo .follows-u.active {
      align-items: center;
      grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
      grid-gap: var(--pad);
   }
   
   .e.interesting {
      grid-template-columns: var(--pad) 1fr auto auto;
      grid-template-rows:  repeat(3, auto) 1fr;
      grid-template-areas: 
         "btn btn btn btn"
         "h h h h"
         "ca ca ca ca"
         "src src src src"
         "content content content content"
         "actions actions actions actions"
         ". replies replies replies";
      position: relative;
   }
   
   .raw {
      grid-template-columns: 1fr;
   }
   
   .raw dt {
      text-align: left;
   }
   
   .raw dd {
      padding: 0 var(--pad);
   }
   
   .content {
      color: rgb(var(--c-a-e));
   }
   
   .e.root:not(.mom):not(.interesting) > .replies .content,
   .e.interesting .replies .content {
      max-width: unset;
      justify-self: stretch;
   }
   
   .e.root:not(.interesting):not(.mom) > .content,
   .e.interesting .e.reply > .content {
      max-width: unset;
   }*/
   
   .raw {
      grid-template-columns: 1fr;
   }
   
   .raw dt {
      text-align: left;
   }
   
   .raw dd {
      padding: 0 var(--pad);
   }

}