:root{
  --bg: #0b0b0c;
  --panel: #111213;
  --card: #0f1011;
  --heading: #e6e6e6;
  --text: #9aa0a6;
  --link: #7cc0ff;
  --muted: #6f7476;
  --radius: 12px;
  --card-border: rgba(255,255,255,0.03);
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  padding:32px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.page{
  max-width:920px;
  margin:0 auto;
}

.header{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  margin-bottom:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.02);
}

.icon{
  width:56px;
  height:56px;
  border-radius:8px;
  object-fit:cover;
  display:block;
  border:1px solid rgba(255,255,255,0.03);
  -webkit-user-drag:none;
  user-drag:none;
}

.title{
  margin:0;
  font-size:28px;
  color:var(--heading);
  font-weight:700;
  letter-spacing:0.4px;
}

.subtitle{
  margin:4px 0 0 0;
  font-size:13px;
  color:var(--muted);
}

.name-link{
  color:var(--link);
  text-decoration:none;
  font-weight:600;
}

.content{
  margin-top:6px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-radius:var(--radius);
  padding:18px 20px;
  border: 1px solid var(--card-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  margin-bottom:18px;
}

.story-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.005), rgba(255,255,255,0.00));
}

.about-card{
  padding-bottom:16px;
}

.lead{
  margin:0 0 12px 0;
  color:var(--text);
  font-size:15px;
  opacity:0.95;
}

.lead-hero{
  font-size:17px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:12px;
}

.project{
  display:block;
  margin:12px 0 14px 0;
}

.project-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:10px;
  display:inline-block;
  -webkit-user-drag:none;
  user-drag:none;
}

.project-title-wrap{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:6px 0;
}

.project-title{
  color:var(--heading);
  font-weight:700;
  font-size:18px;
}

.project-title-suffix{
  color:var(--heading);
  font-weight:700;
  font-size:18px;
}

.project-title a{
  color:var(--link);
  text-decoration:none;
}

.project-title a:hover{
  text-decoration:underline;
}

a{
  color:var(--link);
  text-decoration:none;
  font-weight:600;
}

a:visited{
  color:var(--link);
}

a:hover{
  text-decoration:underline;
}

.muted{
  color:var(--muted);
  font-weight:600;
  font-size:15px;
}

.story-title{
  margin:16px 0 0 0;
  font-size:18px;
  color:var(--heading);
  font-weight:700;
}

::selection{
  background: rgba(124,192,255,0.18);
  color: #ffffff;
}

img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

@media (max-width:600px){
  .page{padding:12px}
  .title{font-size:20px}
  .icon{width:44px;height:44px}
  .project-icon{width:16px;height:16px}
  .project-title{font-size:16px}
  .project-title-suffix{font-size:16px}
  .story-title{font-size:16px}
}