@import url('https://fonts.googleapis.com/css2?family=Arial&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root{
  --ink:#20194b;
  --pink:#ff4d98;
  --aqua:#22d8d2;
  --cream:#fff9df;
  --yellow:#fee356;
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:var(--aqua);
  background-image:radial-gradient(#138a88 1px,transparent 1px);
  background-size:5px 5px;
  color:var(--ink);
  font-family:'DM Mono',monospace;
}

.site-bar{
  background:var(--ink);
  color:var(--cream);
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc((100% - 1180px)/2 + 20px);
  font-size:13px;
  letter-spacing:1px;
}
.site-bar a{
  font:700 23px 'Space Grotesk';
  color:var(--yellow);
  text-decoration:none;
  letter-spacing:-1px;
}
.site-bar button{
  border:2px solid var(--cream);
  padding:5px 8px;
  background:var(--pink);
  font:700 12px 'DM Mono';
  cursor:pointer;
  color:var(--ink);
}
.home-link{
  display:inline-block;
  margin:0 0 16px;
  color:var(--cream);
  font:13px 'DM Mono',monospace;
  letter-spacing:.3px;
  text-decoration:none;
}
.home-link:hover{color:var(--yellow);text-decoration:underline}

main{
  max-width:1180px;
  margin:auto;
  padding:36px 20px;
}
.intro{
  color:var(--cream);
  margin-bottom:27px;
}
.intro p:first-child{
  font-size:13px;
  letter-spacing:1.5px;
  margin:0;
}
.intro h1{
  font:700 clamp(45px,7vw,78px)/.78 'Space Grotesk';
  letter-spacing:-5px;
  margin:11px 0;
  color:var(--cream);
  text-shadow:4px 4px var(--ink);
}
.intro h1 em{
  color:var(--yellow);
  font-style:normal;
}
.intro>p:last-child{
  font-size:12px;
  max-width:400px;
}

.workspace{
  display:grid;
  grid-template-columns:292px 1fr;
  gap:26px;
  align-items:start;
}
.controls{
  background:#eee;
  border:3px solid var(--ink);
  box-shadow:6px 6px var(--ink);
}
.control-header{
  background:#4d65f1;
  color:#fff;
  padding:8px 9px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
}
.controls form{
  padding:13px;
  max-height:750px;
  overflow:auto;
}
fieldset{
  border:1px solid #8d8d8d;
  background:#fff;
  margin:0 0 14px;
  padding:10px;
}
legend{
  font-weight:bold;
  color:#173d85;
  font-size:12px;
}
label{
  display:grid;
  gap:4px;
  margin:0 0 9px;
  font-size:12px;
  font-weight:bold;
}
input,textarea,select{
  width:100%;
  font:12px Arial,sans-serif;
  border:1px solid #888;
  padding:4px;
  color:#111;
  background:#fff;
}
.drop-upload,.friend-upload{display:block;margin:0 0 10px;color:#173d85}
.drop-upload input,.friend-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-upload span,.friend-upload span{display:block;margin-top:5px;padding:12px;border:2px dashed #4d65f1;background:#eef0ff;color:#20194b;text-align:center;font:600 10px 'DM Mono',monospace;cursor:pointer;transition:.15s}
.drop-upload:hover span,.drop-upload.is-dragging span,.friend-upload:hover span{background:#fee356;border-color:#20194b;transform:translateY(-1px)}
.friend-upload span{padding:7px;font-size:9px;border-width:1px;background:#f6f7ff}
textarea{resize:vertical}
.colors{display:flex;gap:8px}
.colors label{width:33%}
.colors input{height:27px;padding:1px}
.tiny{
  font-size:12px;
  line-height:1.4;
  margin:0 0 9px;
  color:#555;
}
.friend-input{
  padding:7px 0;
  border-top:1px dotted #bbb;
}
.friend-input:first-child{border-top:0}
.friend-input label{margin-bottom:4px}

.preview-label{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  background:var(--yellow);
  border:3px solid var(--ink);
  border-bottom:0;
  padding:8px 11px;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  font-weight:bold;
}
.preview-actions{display:flex;align-items:center;gap:10px}
.preview-mode-toggle{display:flex;gap:3px}
.preview-mode-toggle button{background:#fff9df;color:#20194b}
.preview-mode-toggle button[aria-pressed="true"]{background:#20194b;color:#fff}
.preview-label button{
  border:1px solid var(--ink);
  padding:3px 6px;
  background:var(--pink);
  color:var(--ink);
  font:700 9px 'DM Mono',monospace;
  cursor:pointer;
}
.preview-label button:hover{background:var(--cream)}
.preview-wrap{
  min-width:0;
}
.profile-scroller{
  overflow-x:auto;
  overflow-y:hidden;
}
.profile{
  width:800px;
  min-width:800px;
  background:var(--page-color, #ffffff);
  color:#000;
  font-family:Arial, sans-serif;
  font-size:9px;
  line-height:1.1;
  border:0;
  box-shadow:none;
}
.masthead{
  display:flex;
  align-items:flex-start;
  box-sizing:border-box;
  height:47px;
  padding:6px 8px;
  background:#003399;
  color:#fff;
  font-size:9px;
}
.masthead-brand{
  font:bold 10px Arial, sans-serif;
  white-space:nowrap;
}
.masthead-brand span{font-weight:normal}
.masthead-brand b{padding:0 5px}
.masthead-search{margin:0 auto; display:flex; align-items:center; gap:5px; font-size:9px}
.masthead-dot{font-size:15px;line-height:8px}
.masthead-profile-name{position:relative;top:1px}
.masthead-search input{width:95px;height:13px;padding:0;border:1px solid #bbb}
.masthead-search button{height:13px;padding:0 4px;border:1px solid #aaa;background:#fff;color:#003399;font:bold 8px Arial,sans-serif}
.masthead-links{
  display:flex;
  gap:5px;
  font-size:9px;
}
.top-nav{
  display:flex; gap:0; justify-content:center;
  padding:4px 5px;
  margin:0;
  background:#6699cc;
  border:0;
  font-size:9px;
}
.top-nav a{
  color:#fff;
  text-decoration:none;
  padding:0 5px;
  border-right:1px solid #fff;
}
.top-nav a:last-child{border:0}
.profile-page{
  padding:9px 17px 12px;
}
.profile-page h1{
  margin:0 0 2px;
  padding:2px 0;
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:12pt;
  color:#000;
  font-weight:bold;
}
.profile-grid{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:16px;
  align-items:start;
}
.profile-left{
  font-size:9px;
  line-height:1.1;
}
.identity-block{display:flex;gap:10px;align-items:start}
.identity-meta,
.identity-meta .quote,
.identity-meta .facts,
.identity-meta .last-login{
  flex:1;
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:8pt;
  color:#000;
  font-weight:normal;
}
.avatar{
  width:113px;
  height:auto;
  min-height:0;
  border:1px solid #666;
  background:linear-gradient(135deg,#ff85ba,#ffc7dd);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:48px;
  overflow:hidden;
}
.avatar img{
  width:100%;
  height:auto;
  max-height:180px;
  object-fit:contain;
  display:block;
}
.avatar img.placeholder-avatar{aspect-ratio:1;max-height:none;object-fit:contain;background:#bdbdbd}
.quote{
  margin:0 0 7px;
  font-style:normal;
  color:#000;
  min-height:0;
}
.quote::before,.quote::after{content:'"'}
.facts{
  list-style:none;
  padding:0;
  margin:0;
}
.facts li{
  margin:0 0 2px;
  font-weight:normal;
  white-space:pre-line;
}
.view-my{
  width:113px;
  margin:5px 0 8px;
  text-align:center;
  color:#000;
  font-size:9px;
}
.view-my a{
  color:var(--link-color, #003399);
  text-decoration:none;
  font-weight:bold;
}
.profile-right{
  min-width:0;
  margin-top:-22px;
}
.profile-right > section{
  margin-bottom:10px;
}
.profile-right > section h2{
  margin:0 0 4px;
  padding:2px 5px;
  font:bold 11px Arial,sans-serif;
  background:#ffcc99;
  color:var(--accent-color, #ff6600);
}
.contact-box,
.info-box,
.details-box,
.comments-box{
  border:1px solid #6699cc;
  margin-bottom:15px;
}
.blurbs-box{
  border:0;
  margin-bottom:15px;
}
.friend-space-box{
  border:0;
  margin-bottom:15px;
}
.blurbs-box h2,
.friend-space-box h2{
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:9pt;
  color:#ff6600;
  font-weight:bold;
}
.profile-left > .info-box, .profile-left > .details-box{margin-top:14px}
.profile-left > .info-box h2, .profile-left > .details-box h2, .contact-box h2{background:#6699cc;color:#fff;margin:0;padding:3px 5px;font-family:Verdana,Arial,sans-serif,Helvetica;font-size:9pt;color:#fff;font-weight:bold}
.contact-grid{
  display:grid;
  grid-template-columns:max-content max-content;
  justify-content:space-between;
  column-gap:8px;
  row-gap:4px;
  margin:8px 4px 7px;
  max-width:none;
}
.contact-icon{
  display:flex;
  align-items:center;
  min-height:19px;
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  font:9px Arial, sans-serif;
  color:#003399;
  cursor:default;
}
.contact-icon img{display:block;width:auto;max-width:none;height:auto;image-rendering:auto}
.glyph{
  width:15px;
  height:15px;
  border:1px solid #9b9b9b;
  background:#efefef;
  display:grid;
  place-items:center;
  font-size:9px;
  line-height:1;
  color:#333;
}
.profile-url{
  margin:11px 0 14px;
  font-size:9px;
  line-height:1.1;
  border:1px solid #6699cc;
  padding:3px 5px;
  background:#fff;
}
.profile-url strong{
  color:#000;
}
.profile-url span{
  display:block;
  padding-left:5px;
  color:#000;
}
.info-line,
.detail-grid div{
  display:grid;
  grid-template-columns:72px 1fr;
  font-family:Verdana,Arial,sans-serif,Helvetica;
  font-size:8pt;
  color:#000;
  font-weight:normal;
  line-height:1.1;
  margin:0;
  border-top:2px solid #fff;
  background:#d7e7f7;
  padding:0;
}
.info-line strong,
.detail-grid strong{
  color:#000;
  background:#a9c7e6;
  padding:3px 5px;
  box-sizing:border-box;
  border-left:2px solid #fff;
  border-right:2px solid #fff;
  font-weight:normal;
}
.info-line span,
.detail-grid span{
  color:#000;
  padding:3px 5px;
  box-sizing:border-box;
  border-right:2px solid #fff;
  font-weight:normal;
}
.detail-grid{
  display:block;
}
.blurbs-box h3{
  margin:7px 5px 3px;
  font:bold 12px Arial,sans-serif;
  color:#ff6600;
}
.profile-copy{
  margin:0 5px 7px;
  white-space:pre-wrap;
  font-size:9px;
  line-height:1.2;
}
.friend-count,
.comment-meta{
  font:bold 11px Arial,sans-serif;
  margin:0 5px 5px;
}
.friend-count{margin-bottom:13px;}
.friend-count #friend-count{color:#ff0000;}
.all-friends{
  margin:3px 5px 8px;
  color:#ff0000;
  font:bold 9px Arial,sans-serif;
  text-align:right;
}
.friend-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:9px 7px;
  padding:0 5px 6px;
}
.friend{
  font-size:9px;
  font-weight:bold;
  color:var(--link-color, #003399);
  text-align:center;
}
.friend img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:150px;
  margin:0 auto;
  border:1px solid #999;
}
.friend-face{
  width:100%;
  aspect-ratio:1;
  border:1px solid #999;
  background:#bdbdbd url('/static/no-photo.png') center/contain no-repeat;
}
.friend span{
  display:block;
  margin:0 0 2px;
}
.comment{
  display:grid;
  grid-template-columns:110px 1fr;
  margin:0;
  border-top:2px solid #fff;
}
.comment-name{
  color:#003399;
  font-weight:bold;
  font-size:9px;
  padding:4px;
  text-align:center;
  background:#ff9933;
}
.comment-body{
  font-size:9px;
  line-height:1.25;
  padding:5px;
  min-height:42px;
  background:#ffddbb;
}
.last-login{margin:7px 0 0;line-height:1.1}
.network-box{border:2px solid #000;padding:15px 8px;margin:0 0 11px;text-align:center;font:bold 12px Arial,sans-serif}
.blog-box{font-size:9px;line-height:1.25;margin:0 3px 11px}.blog-box strong{color:#003399}.blog-box a{color:#003399;font-weight:bold;text-decoration:none}.blog-box p{margin:7px 0 0}
.profile footer{
  border-top:1px solid #ccc;
  padding:6px 10px;
  font-size:8px;
  color:#666;
}

/* A shareable, phone-width variation of the same live profile. */
.profile.is-portrait{
  width:390px;
  min-width:390px;
  font-size:10px;
  line-height:1.2;
}
.profile.is-portrait .masthead{
  height:29px;
  min-height:0;
  align-items:center;
  gap:7px;
}
.profile.is-portrait .masthead-search{display:flex;margin-left:auto;gap:3px}
.profile.is-portrait .masthead-search span{display:none}
.profile.is-portrait .masthead-search input{width:72px;height:13px}
.profile.is-portrait .masthead-search button{height:13px;padding:0 3px}
.profile.is-portrait .masthead-links{margin-left:0;font-size:8px}
.profile.is-portrait .top-nav{flex-wrap:wrap;line-height:1.45;padding:4px 3px}
.profile.is-portrait .top-nav a{padding:0 2px;font-size:7px}
.profile.is-portrait .top-nav a:nth-child(12),
.profile.is-portrait .top-nav a:nth-child(13),
.profile.is-portrait .top-nav a:nth-child(n + 15){display:none}
.profile.is-portrait .profile-page{padding:12px 12px 15px}
.profile.is-portrait .profile-page h1{margin-bottom:7px;padding:3px 0}
.profile.is-portrait .profile-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:9px 10px}
.profile.is-portrait .profile-left,
.profile.is-portrait .profile-right{display:contents}
.profile.is-portrait .identity-block{display:grid;grid-column:1 / -1;grid-row:1;grid-template-columns:132px minmax(0, 1fr);gap:12px;margin:0}
.profile.is-portrait .avatar{width:130px;flex:0 0 130px}
.profile.is-portrait .avatar img{max-height:210px}
.profile.is-portrait .identity-meta,
.profile.is-portrait .identity-meta .quote,
.profile.is-portrait .identity-meta .facts,
.profile.is-portrait .identity-meta .last-login{font-size:9px;line-height:1.2}
.profile.is-portrait .identity-meta{margin-top:0}
.profile.is-portrait .view-my{grid-column:1 / -1;grid-row:1;align-self:start;justify-self:start;width:auto;margin:101px 0 0 144px;font-size:10px}
.profile.is-portrait .contact-box,
.profile.is-portrait .info-box,
.profile.is-portrait .details-box{margin-bottom:12px}
.profile.is-portrait .contact-box{grid-column:1 / -1;grid-row:2;height:max-content;margin:0}
.profile.is-portrait .contact-box h2{font-size:8pt;padding:3px}
.profile.is-portrait .contact-grid{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:3px;row-gap:3px;margin:5px 3px}
.profile.is-portrait .contact-icon{min-width:0;min-height:16px;font-size:8px;overflow:hidden}
.profile.is-portrait .contact-icon img{width:auto;max-width:none;height:auto}
.profile.is-portrait .network-box{grid-column:1 / -1;grid-row:8;align-self:start;margin:0;padding:10px 5px;font-size:10px;line-height:1.25}
.profile.is-portrait .profile-url{grid-column:1 / -1;grid-row:4;font-size:10px;margin:0}
.profile.is-portrait .profile-left > .info-box{grid-column:1;grid-row:7;margin:0}
.profile.is-portrait .profile-left > .details-box{grid-column:2;grid-row:7;margin:0}
.profile.is-portrait .profile-left > .info-box h2,
.profile.is-portrait .profile-left > .details-box h2{font-size:8pt;padding:3px}
.profile.is-portrait .info-line,
.profile.is-portrait .detail-grid div{grid-template-columns:58px minmax(0, 1fr);font-size:7.5pt;line-height:1.08}
.profile.is-portrait .detail-grid div{grid-template-columns:62px minmax(0, 1fr)}
.profile.is-portrait .info-line strong,
.profile.is-portrait .detail-grid strong,
.profile.is-portrait .info-line span,
.profile.is-portrait .detail-grid span{min-width:0;padding:3px;overflow-wrap:anywhere;word-break:break-word}
.profile.is-portrait .friend-space-box{grid-column:1 / -1;grid-row:5}
.profile.is-portrait .blurbs-box{grid-column:1 / -1;grid-row:6}
.profile.is-portrait .blog-box{grid-column:1 / -1;grid-row:9;font-size:10px;line-height:1.35;margin:0}
.profile.is-portrait .profile-right > section{margin-bottom:0}
.profile.is-portrait .profile-right > section h2{font-size:11px}
.profile.is-portrait .blurbs-box h3{font-size:12px}
.profile.is-portrait .profile-copy{font-size:10px;line-height:1.35}
.profile.is-portrait .friend-count{font-size:11px}
.profile.is-portrait .friend-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px 5px;padding:0 3px 8px}
.profile.is-portrait .friend{font-size:8px}
.profile.is-portrait .friend img{max-height:90px}
.profile.is-portrait .friend-face{max-height:90px}
.profile.is-portrait .all-friends{font-size:10px;margin-top:8px}
.profile.is-portrait footer{font-size:9px;padding:8px}

@media(max-width:800px){
  .site-bar{padding:0 12px}
  .site-bar span{display:none}
  .workspace{grid-template-columns:1fr}
  .controls form{max-height:none}
  .profile{min-width:760px}
}
@media(max-width:480px){
  main{padding:24px 11px}
  .intro h1{letter-spacing:-3px}
}