```css
/* =========================================================
   EROSARROWS // PERSONAL TRANSMISSION
   ========================================================= */

:root{
  --bg:#e8e7ff;
  --paper:#f7f4ff;
  --paper-soft:#fbf9ff;
  --ink:#514c73;
  --violet:#8a7bba;
  --pink:#d790bb;
  --blue:#91a9d9;
  --line:#aaa1cb;
  --ghost:#ffffffaa;
  --dark:#363450;

  --border:#8f86b4;
  --shadow:#8d82b040;
  --muted:#756b9d;
  --rose:#be6a9b;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  min-width:0;
  margin:0;

  color:var(--ink);

  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  line-height:1.6;

  background:
    radial-gradient(
      circle at 12% 25%,
      #fff8 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 76% 68%,
      #fff8 0 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      0deg,
      #00000005 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(
      135deg,
      #e9e5fb 0%,
      #dbe7fa 48%,
      #f8ddeb 100%
    );

  background-size:
    auto,
    auto,
    auto,
    100% 100%;

  overflow-x:hidden;
}

/* CRT / scanline overlay */

body::before{
  content:"";

  position:fixed;
  inset:0;
  z-index:9999;

  pointer-events:none;

  background:
    linear-gradient(
      transparent 50%,
      #665f9b0d 50%
    );

  background-size:100% 4px;

  mix-blend-mode:multiply;
}

/* =========================================================
   LINKS
   ========================================================= */

a{
  color:#6759a3;
  text-decoration:none;

  transition:
    background .15s ease,
    text-shadow .15s ease;
}

a:hover{
  background:#fff4;
  text-shadow:0 0 8px #cfa1ef;
}

a:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:2px;
}

/* =========================================================
   PAGE WRAPPER
   ========================================================= */

.wrap{
  position:relative;

  width:min(1120px,94vw);

  margin:22px auto 55px;
}

/* =========================================================
   TOP SIGNAL BAR
   ========================================================= */

.top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:12px;

  margin-bottom:7px;
}

.micro{
  color:var(--ink);

  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.micro .red{
  color:#be5e86;
}

.signal{
  padding:5px 8px;

  border:1px solid var(--line);

  background:#ffffff66;

  color:var(--muted);

  font-size:10px;

  box-shadow:
    inset 0 0 0 1px #fff7;
}

/* =========================================================
   HEADER
   ========================================================= */

.header{
  position:relative;

  min-height:176px;

  overflow:hidden;

  padding:25px 32px;

  border:1px solid var(--border);

  background:#e8e1fbcc;

  box-shadow:
    8px 8px 0 #b9a8d955;
}

/* decorative star field */

.header::before{
  content:"";

  position:absolute;
  inset:-20%;

  background:
    radial-gradient(
      circle at 60% 50%,
      #ffffffa0 0 2px,
      transparent 3px
    );

  background-size:26px 26px;

  transform:rotate(-11deg);

  opacity:.6;

  pointer-events:none;
}

/* scrolling transmission */

.header::after{
  content:
    "INTERFACE / DREAM / TRANSMISSION / "
    "INTERFACE / DREAM / TRANSMISSION";

  position:absolute;

  right:0;
  bottom:8px;
  left:0;

  overflow:hidden;

  color:#71679988;

  font-size:9px;
  letter-spacing:.32em;

  white-space:nowrap;

  animation:drift 24s linear infinite;

  pointer-events:none;
}

@keyframes drift{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-30%);
  }
}

/* =========================================================
   LOGO
   ========================================================= */

.logo{
  position:relative;
  z-index:2;

  display:inline-block;

  color:#665b95;

  font-family:'Patrick Hand',cursive;
  font-size:72px;
  font-weight:400;
  line-height:.8;

  letter-spacing:.03em;

  text-shadow:
    2px 2px #ffffff,
    6px 5px #d8a6ca;

  transform:rotate(-2deg);
}

/* =========================================================
   HEADER SUBTEXT
   ========================================================= */

.sub{
  position:relative;
  z-index:2;

  max-width:640px;

  margin-top:18px;

  color:var(--ink);

  font-size:11px;
  line-height:1.8;
}

.sub em{
  color:#b45c8c;
  font-style:normal;
}

/* =========================================================
   HEADER ORB
   ========================================================= */

.orb{
  position:absolute;

  top:26px;
  right:42px;

  width:115px;
  height:115px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:1px solid #8176a5;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #fff 0%,
      #dad1ff 28%,
      #a9a0dc 48%,
      #6e678e 52%,
      #c7b7dd 54%,
      #f6cde2 71%,
      transparent 72%
    );

  box-shadow:
    0 0 0 9px #ffffff30,
    0 0 35px #bda6e880;

  opacity:.72;

  animation:float 6s ease-in-out infinite;
}

.orb img{
  display:block;

  width:86%;
  height:86%;

  object-fit:contain;
  object-position:center;
}

@keyframes float{
  50%{
    transform:translateY(-8px) rotate(5deg);
  }
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.layout{
  display:grid;

  grid-template-columns:
    190px
    minmax(0,1fr)
    215px;

  gap:12px;

  margin-top:14px;

  align-items:start;
}

/* =========================================================
   PANELS / CARDS
   ========================================================= */

.panel,
.card{
  min-width:0;

  border:1px solid var(--line);

  background:#f8f5ffdd;

  box-shadow:
    4px 4px 0 var(--shadow);
}

.panel{
  padding:11px;
}

.card{
  position:relative;

  overflow:hidden;

  background:#fbf9ffea;
}

/* =========================================================
   SIDEBARS
   ========================================================= */

.side{
  position:sticky;
  top:12px;
}

.panel-title{
  display:flex;
  align-items:center;

  gap:6px;

  min-width:0;

  margin-bottom:9px;
  padding-bottom:7px;

  border-bottom:1px dotted #aaa2c6;

  color:var(--muted);

  font-size:10px;
  line-height:1.35;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.nav{
  display:block;
}

.nav a{
  display:block;

  margin:2px 0;
  padding:7px 5px;

  color:#6759a3;

  font-size:12px;
}

.nav a::before{
  content:'› ';

  color:var(--rose);
}

/* =========================================================
   DECORATIVE ELEMENTS
   ========================================================= */

.rune{
  margin:8px 0 13px;

  color:#b477a1;

  font-size:33px;
  letter-spacing:8px;
  text-align:center;
}

.echo{
  margin:13px 0;
  padding:9px;

  border-left:3px solid #9185bf;

  background:#e4eaff;

  color:var(--ink);

  font-size:10px;
  line-height:1.7;
}

.blink{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.badge{
  padding:4px 5px;

  border:1px solid #9890ae;

  background:#ebe7f5;

  box-shadow:
    inset 0 0 0 1px #fff9;

  color:#675f86;

  font-size:8px;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main{
  display:grid;

  min-width:0;

  gap:12px;
}

.hero{
  min-height:240px;

  padding:19px 20px 15px;
}

.hero h1{
  margin:0 0 6px;

  color:#58527f;

  font-family:'Patrick Hand',cursive;

  font-size:39px;
  font-weight:400;

  line-height:1.15;
}

.hero p{
  max-width:650px;

  margin:0;

  color:var(--ink);

  font-size:12px;
  line-height:1.9;
}

.hero .stamp{
  position:absolute;

  top:13px;
  right:14px;

  padding:6px 8px;

  border:1px dashed #b17fa4;

  background:#fff8;

  color:#9a537d;

  font-size:8px;

  transform:rotate(5deg);
}

/* =========================================================
   GRIDS
   ========================================================= */

.matrix{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:4px;

  margin-top:10px;
}

.cell{
  min-height:42px;

  display:grid;
  place-items:center;

  padding:5px;

  border:1px dotted #b1a7c9;

  background:#ebe8f4;

  color:#726895;

  font-size:9px;

  text-align:center;
}

.cell:nth-child(2n){
  background:#e4eaf8;
}

.cell:nth-child(3n){
  background:#f2e2ef;
}

/* =========================================================
   CHANNEL / LIST ROWS
   ========================================================= */

.channel{
  color:var(--ink);

  font-size:10px;
  line-height:1.8;
}

.channel .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:10px;

  padding:4px 0;

  border-bottom:1px dotted #c4bdd2;
}

.channel .row:last-child{
  border-bottom:0;
}

.channel .row > *:last-child{
  text-align:right;
}

/* =========================================================
   TICKER
   ========================================================= */

.ticker{
  height:24px;

  overflow:hidden;

  margin-top:18px;
  padding:6px 0;

  border-top:1px dotted #aba1c6;
  border-bottom:1px dotted #aba1c6;

  color:#765f93;

  font-size:9px;

  white-space:nowrap;
}

.ticker span{
  display:inline-block;

  animation:scroll 18s linear infinite;
}

@keyframes scroll{
  from{
    transform:translateX(100%);
  }

  to{
    transform:translateX(-100%);
  }
}

/* =========================================================
   STICKERS
   ========================================================= */

.sticker{
  position:absolute;

  color:#c583ac;

  font-size:20px;

  opacity:.7;

  pointer-events:none;
}

.s1{
  right:18px;
  bottom:22px;

  transform:rotate(8deg);
}

.s2{
  left:12px;
  bottom:30px;

  transform:rotate(-11deg);
}

/* =========================================================
   NOISE BOX
   ========================================================= */

#noise{
  background:#fbf9ffea;
}

#noise .tiny{
  margin:0;
}

/* =========================================================
   CHAT PANEL
   ========================================================= */

.chat-panel{
  width:100%;
  min-width:0;

  padding:0;

  overflow:hidden;

  border:1px solid var(--line);

  background:#f8f5ffdd;

  box-shadow:
    4px 4px 0 var(--shadow);
}

.chat-panel .panel-title{
  min-height:30px;

  margin:0;
  padding:8px 11px;
}

.chat-label-gif{
  display:block;

  width:auto;
  max-width:100%;
  height:18px;

  object-fit:contain;
  object-position:left center;
}

#chat-container-main{
  position:relative;

  width:100%;
  min-width:0;

  display:grid;

  grid-template-rows:
    auto
    minmax(0,1fr)
    auto
    auto;

  overflow:visible;

  background:
    linear-gradient(
      180deg,
      #ffffff24,
      #ffffff08
    ),
    repeating-linear-gradient(
      0deg,
      #665f9b06 0 1px,
      transparent 1px 4px
    );
}

#chat-title{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:6px 9px;

  border-bottom:1px dotted #aaa2c6;

  color:var(--muted);

  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

#chat-title p{
  margin:0;
}

#chat-container{
  position:relative;

  height:360px;

  min-height:0;
  min-width:0;

  overflow-y:auto;
  overflow-x:hidden;

  padding:7px;

  overscroll-behavior:contain;

  scrollbar-width:thin;
  scrollbar-color:#aaa1cb transparent;

  background:
    linear-gradient(
      #ffffff2a,
      #ffffff2a
    ),
    repeating-linear-gradient(
      0deg,
      #665f9b08 0 1px,
      transparent 1px 4px
    );
}

#chat-container::-webkit-scrollbar{
  width:7px;
}

#chat-container::-webkit-scrollbar-thumb{
  background:#aaa1cb88;

  border:2px solid transparent;
  border-radius:8px;

  background-clip:padding-box;
}

#chat-messages{
  display:flex;
  flex-direction:column;

  gap:6px;

  margin:0;
  padding:0;

  list-style:none;
}

.message{
  min-width:0;

  padding:6px 7px;

  border:1px dotted #b1a7c9;

  background:#ebe8f4d9;

  overflow-wrap:anywhere;

  box-shadow:
    1px 1px 0 #8d82b01c;
}

.message:nth-child(2n){
  background:#e4eaf8d9;
}

.message:nth-child(3n){
  background:#f2e2efd9;
}

.message-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;

  gap:7px;

  margin-bottom:2px;
}

.username{
  min-width:0;

  font-weight:600;

  overflow-wrap:anywhere;
}

.timestamp{
  flex:none;

  color:#8a7fa2;

  font-size:8px;

  white-space:nowrap;
}

.message-text{
  min-width:0;

  color:var(--dark);

  font-size:10px;
  line-height:1.6;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}

.message-text a{
  overflow-wrap:anywhere;
}

.message-text strong{
  color:#8b5d82;
  font-weight:600;
}

.emoticon{
  display:inline-block;

  width:19px;
  height:19px;

  margin:0 1px;

  vertical-align:-5px;

  object-fit:contain;
}

.chat-load-more{
  display:block;

  width:calc(100% - 12px);

  margin:7px auto 0;
  padding:4px 6px;

  border:1px dashed #aaa1cb;

  background:#ffffff55;

  color:var(--muted);

  font:inherit;
  font-size:8px;
  letter-spacing:.06em;

  cursor:pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

.chat-load-more:hover{
  background:#ffffffa8;
  transform:translateY(-1px);
}

.chat-load-more:active{
  transform:translateY(0);
}

.chat-load-more:disabled{
  cursor:wait;
  opacity:.6;
}

/* =========================================================
   USERNAME AREA
   ========================================================= */

#username-container{
  padding:8px;

  border-top:1px dotted #aaa2c6;

  background:
    linear-gradient(
      135deg,
      #f7f0fb88,
      #e9e5fb66
    );
}

#username-input-section{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:6px;

  align-items:end;
}

.input-wrapper{
  display:grid;

  gap:4px;

  min-width:0;
}

#username-input,
#website-input,
#chat-input{
  width:100%;
  min-width:0;

  border:1px solid #aaa1cb;
  border-radius:0;

  background:#fffaff;

  color:var(--dark);

  font:inherit;

  outline:0;
}

#username-input,
#website-input{
  min-height:27px;

  padding:5px 6px;

  font-size:9px;
}

#username-input:focus,
#website-input:focus,
#chat-input:focus{
  border-color:#8a7bba;

  box-shadow:
    0 0 0 2px #8a7bba20;
}

#button-container{
  position:relative;
}

/* =========================================================
   BUTTONS
   ========================================================= */

#set-username-btn,
#send-button,
#emoji-button{
  position:relative;

  border:1px solid #8f86b4;

  background:
    linear-gradient(
      135deg,
      #fdf9ff 0%,
      #eee8fa 52%,
      #e9def0 100%
    );

  color:#675f86;

  cursor:pointer;

  box-shadow:
    2px 2px 0 #8d82b040,
    inset 0 0 0 1px #ffffff88;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;

  overflow:hidden;
}

#set-username-btn::before,
#send-button::before,
#emoji-button::before{
  content:"";

  position:absolute;

  inset:2px;

  border:1px dotted #aa9fc1;

  pointer-events:none;
}

#set-username-btn::after,
#send-button::after,
#emoji-button::after{
  content:"✦";

  position:absolute;

  top:1px;
  right:4px;

  color:#c17aa4;

  font-size:7px;

  opacity:.75;

  pointer-events:none;
}

#set-username-btn{
  min-height:57px;

  padding:0 8px;

  font-size:9px;
}

#set-username-btn:hover,
#send-button:hover,
#emoji-button:hover{
  background:
    linear-gradient(
      135deg,
      #fffaff 0%,
      #f4e7f1 50%,
      #e8e1fb 100%
    );

  box-shadow:
    2px 2px 0 #8d82b055,
    inset 0 0 0 1px #ffffffaa;

  transform:translate(-1px,-1px);
}

#set-username-btn:active,
#send-button:active,
#emoji-button:active{
  transform:translate(1px,1px);

  box-shadow:
    1px 1px 0 #8d82b040,
    inset 0 0 0 1px #ffffff66;
}

#set-username-btn:focus-visible,
#send-button:focus-visible,
#emoji-button:focus-visible{
  outline:2px solid #b477a1;
  outline-offset:2px;
}

#set-username-btn:disabled,
#send-button:disabled,
#emoji-button:disabled{
  cursor:wait;
  opacity:.6;
}

/* =========================================================
   WELCOME STATE
   ========================================================= */

#welcome-message{
  display:none;

  align-items:center;
  justify-content:space-between;

  gap:8px;
}

#username-container.show-welcome
#username-input-section{
  display:none;
}

#username-container.show-welcome
#welcome-message{
  display:flex;
}

.welcome-text{
  min-width:0;

  color:var(--muted);

  font-size:9px;
}

.username-display{
  display:block;

  color:#9a537d;

  font-size:11px;
  font-weight:600;

  overflow-wrap:anywhere;
}

.welcome-image{
  width:50px;
  height:36px;

  flex:none;

  object-fit:contain;
}

/* =========================================================
   CHAT COMPOSER
   ========================================================= */

#chat-controls{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    44px;

  gap:5px;

  padding:8px;

  border-top:1px dotted #aaa2c6;

  align-items:stretch;
}

.input-group{
  position:relative;

  min-width:0;
}

#chat-input{
  display:block;

  min-height:66px;
  max-height:120px;

  resize:vertical;

  padding:7px 6px 18px;

  font-size:9px;
  line-height:1.6;
}

.char-counter{
  position:absolute;

  right:6px;
  bottom:3px;

  color:#8a7fa2;

  font-size:8px;

  pointer-events:none;
}

.char-counter.over-limit{
  color:#b44d7e;
  font-weight:600;
}

.button-group{
  display:grid;

  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;

  gap:5px;

  min-width:0;
}

#send-button,
#emoji-button{
  min-width:0;
  min-height:40px;

  padding:3px;
}

#send-text{
  position:relative;
  z-index:1;

  font-size:8px;
  letter-spacing:.06em;
}

#emoji-content{
  position:relative;
  z-index:1;

  display:grid;
  place-items:center;

  width:100%;
  height:100%;
}

#emoji-content img{
  display:block;

  width:32px !important;
  height:32px !important;

  object-fit:contain;

  image-rendering:auto;

  filter:saturate(.9);

  transition:
    transform .18s ease;
}

#emoji-button:hover
#emoji-content img{
  transform:scale(1.08) rotate(-2deg);
}

/* =========================================================
   EMOJI PICKER
   ========================================================= */

.emoji-picker{
  position:absolute;

  z-index:50;

  top:0;
  right:calc(100% + 7px);

  display:none;

  width:176px;
  height:190px;

  padding:5px;

  border:1px dashed #aaa1cb;

  background:#f7f4ff;

  box-shadow:
    4px 4px 0 #8d82b040;
}

.emoji-picker.active{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(34px,1fr)
    );

  gap:4px;

  overflow:auto;
}

.emoji-picker::before{
  content:"EMOTES // SIDE CHANNEL";

  position:absolute;

  top:-14px;
  left:7px;

  color:#8a7bba;

  font-size:7px;
  letter-spacing:.08em;

  pointer-events:none;
}

.emoji-picker .emoji{
  display:grid;
  place-items:center;

  min-height:34px;

  padding:3px;

  border:1px dotted #b1a7c9;

  background:#ebe8f4;

  cursor:pointer;
}

.emoji-picker .emoji:hover{
  background:#f2e2ef;
}

.emoji-picker .emoji img{
  width:24px;
  height:24px;

  object-fit:contain;
}

/* =========================================================
   CLOSING MESSAGE
   ========================================================= */

.closing-block{
  min-width:0;
}

.closing-block .panel{
  margin:0;
}

.closing-gif{
  display:block;

  width:68px;
  height:30px;

  margin:
    6px 0 0 62px;

  object-fit:contain;
  object-position:left top;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  padding-top:7px;

  color:#776d91;

  font-size:9px;
  letter-spacing:.08em;

  text-align:center;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

  .layout{
    grid-template-columns:
      170px
      minmax(0,1fr);
  }

  .rightgrid{
    grid-column:1 / -1;

    grid-template-columns:
      1fr 1fr;
  }

  .rightgrid .side{
    position:static;
  }

  #chat-container{
    height:380px;
  }

  .orb{
    right:20px;

    width:85px;
    height:85px;
  }

  .logo{
    font-size:58px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:650px){

  .wrap{
    width:min(94vw,560px);
  }

  .top{
    align-items:flex-start;
    flex-direction:column;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .rightgrid{
    grid-column:auto;

    grid-template-columns:1fr;
  }

  .side{
    position:static;
  }

  .header{
    padding:22px;
  }

  .logo{
    font-size:52px;
  }

  .sub{
    max-width:78%;

    font-size:11px;
  }

  .orb{
    top:24px;
    right:14px;

    width:56px;
    height:84px;

    border-radius:9px;

    opacity:.35;
  }

  .hero{
    min-height:0;

    padding:17px;
  }

  .hero .stamp{
    position:relative;

    top:auto;
    right:auto;

    display:inline-block;

    margin-bottom:12px;

    transform:rotate(2deg);
  }

  .hero h1{
    font-size:30px;
  }

  .hero p{
    font-size:12px;
  }

  .channel .row{
    flex-direction:column;

    gap:1px;
  }

  .channel .row > *:last-child{
    text-align:left;
  }

  .matrix{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .gif-slots{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ticker{
    margin-top:15px;
  }

  .chat-label-gif{
    height:16px;
  }

  #chat-container{
    height:400px;
  }

  #username-input-section{
    grid-template-columns:1fr;
  }

  #set-username-btn{
    width:100%;

    min-height:34px;
  }

  #chat-controls{
    grid-template-columns:
      minmax(0,1fr)
      62px;
  }

  #send-button,
  #emoji-button{
    min-height:38px;
  }

  .emoji-picker{
    top:auto;
    right:0;
    bottom:calc(100% + 7px);

    width:min(
      176px,
      calc(100vw - 32px)
    );

    height:180px;
  }

  .closing-gif{
    margin:
      6px 0 0 62px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  html{
    scroll-behavior:auto;
  }

  .header::after,
  .orb,
  .ticker span{
    animation:none;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
  }
}
```