:root{
  --win:rgba(0,0,0,0.8);
  --fg:#ffffff;
  --grey:#262626;
  --grey-text:#8a8a8a;
  --blue:#5fafff;
  --green:#5fd75f;
  --accent:#FF5A00;
  --gap:15px;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#000;color:var(--fg);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5}
a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{background:var(--fg);color:#000;text-decoration:none}
b,strong{font-weight:700}
p{margin:0 0 8px}

.root{position:relative;overflow:hidden;min-height:100vh;background:#000}
.wallpaper{position:fixed;inset:0;background:#000 url('../images/bg.jpg') center / cover no-repeat}
.page{position:relative;display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap);min-height:100vh}

.bar{display:flex;justify-content:space-between;align-items:stretch;gap:8px;flex-wrap:wrap;background:var(--win)}
.bar--top{min-height:28px}
.bar--bottom{min-height:26px}
.bar__text{display:flex;align-items:center;padding:0 10px}
.bg-credit{flex-wrap:wrap;row-gap:2px;column-gap:6px}
.bg-credit__label,.bg-credit__citation{white-space:nowrap}
.workspaces{display:flex;align-items:stretch;flex-wrap:wrap}
.ws{display:flex;align-items:center;padding:0 18px 0 14px;margin-left:-6px;min-height:28px;background:var(--grey);color:var(--fg);text-decoration:none;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}
.ws:first-child{padding-left:10px;margin-left:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
.ws--active{background:var(--fg);color:#000;font-weight:700}
.status{display:flex;align-items:stretch;flex-wrap:wrap;margin-left:auto}
.blk{display:flex;align-items:center;padding:0 18px 0 14px;min-height:26px;margin-left:-6px;background:var(--grey);color:var(--fg);text-decoration:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 50%,100% 100%,8px 100%,0 50%)}
.blk:first-child{margin-left:0}
.blk--last{padding:0 12px 0 14px;background:var(--fg);color:#000;font-weight:700;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
.ws:hover,.blk:hover{background:var(--fg) !important;color:#000 !important}

.tiles{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:var(--gap);align-items:stretch;align-content:start}
.win{min-width:0;background:var(--win);border:1px solid var(--grey);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.win--focus{border-color:var(--fg)}
.win--compact{padding:12px 14px}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0;min-height:0}

.prompt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prompt__cmd{min-width:0;overflow-wrap:anywhere}
.prompt__user{color:var(--blue);font-weight:700}
.prompt__host{color:var(--grey-text)}
.prompt__arrow,.prompt__env{color:var(--green)}
.prompt__env{white-space:nowrap}
.prompt--gap{margin-top:8px}
.cursor{display:inline-block;width:8px;height:15px;background:var(--fg);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.name{margin:0 0 8px;font-family:'VT323',monospace;font-weight:400;font-size:72px;line-height:0.9}
.muted{color:var(--grey-text)}
.small{font-size:11px}
.muted a{color:var(--grey-text)}
.muted a:hover{color:#000}

.log{display:grid;grid-template-columns:6ch minmax(0,1fr);column-gap:12px;row-gap:4px}
.log--wide{grid-template-columns:9ch minmax(0,1fr)}
.links{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px}
address{font-style:normal}

.photo-win{flex:1 1 auto;min-height:0;padding:0;gap:0}
.photo-win > .prompt{padding:10px 12px 8px}
.fig{margin:0;padding:16px;flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.photo{position:relative;width:min(100%,300px);aspect-ratio:266 / 247;overflow:hidden;cursor:pointer;outline:none}
.photo:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:50% 28%}
.reveal{opacity:1;transition:opacity .8s ease}
.photo.revealed .reveal{opacity:0;transition:opacity 3.3s ease-in}
@media (hover:hover) and (pointer:fine){
  .photo:hover .reveal{opacity:0;transition:opacity 3.3s ease-in}
}
.detect{position:absolute;left:28%;top:10%;width:44%;height:48%;border:2px solid var(--accent);opacity:0.5}
.detect span{position:absolute;left:-2px;top:100%;padding:1px 8px 1px 6px;background:var(--accent);color:#000;font-size:11px;font-weight:700;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.photo-hint{padding:0 12px 10px;text-align:left}

.player{gap:6px}
.mpbar{display:block;width:100%;padding:4px 0;background:none;border:0;color:var(--fg);font:inherit;text-align:left;white-space:pre;overflow:hidden;cursor:pointer}
.mpctl{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.mpctl > div{display:flex;flex-wrap:wrap;gap:4px}
.mpbtn{min-height:32px;padding:0 8px;background:none;border:0;color:var(--fg);font:inherit;cursor:pointer}
.mpbtn--main{background:var(--grey);font-weight:700}
.mpvol{align-self:center;white-space:pre}
.mpbtn:hover,.mpbar:hover{background:var(--fg) !important;color:#000 !important}
.credits{margin-top:4px}

.ghwrap{container-type:inline-size}
.ghgrid{margin:4px 0 0;padding-bottom:0.25em;font-family:inherit;font-size:8px;line-height:1.0;letter-spacing:0.04em;white-space:pre;overflow:hidden}
@supports (font-size:1cqw){.ghgrid{font-size:min(15px,calc(100cqw / 36.8))}}

.btn{display:inline-block;padding:4px 8px;background:var(--grey);color:var(--fg);font-weight:700;text-decoration:none}
.btn:hover{background:var(--fg);color:#000}

.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.entries li{padding-left:2ch;text-indent:-2ch}
.entries li::before{content:'- ';color:var(--green)}
.entry__meta{color:var(--grey-text)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:var(--gap)}
.card__img{display:block;margin:4px 0 8px;aspect-ratio:16 / 9;overflow:hidden;background:var(--grey);outline:2px solid transparent;outline-offset:2px}
.card__img img{display:block;width:100%;height:100%;object-fit:cover}
.card__img:hover{background:var(--grey)}
.card:hover .card__img,.card:focus-within .card__img{outline-color:var(--blue)}
.card h2{margin:0;font-size:inherit}
.card .btn{align-self:flex-start;margin-top:auto}

.reader{max-width:960px;width:100%;margin:0 auto}
.prose{overflow-wrap:break-word}
.prose h1,.prose h2,.prose h3,.prose h4{font-size:inherit;margin:20px 0 8px}
.prose h1::before{content:'# ';color:var(--green)}
.prose h2::before{content:'## ';color:var(--green)}
.prose h3::before{content:'### ';color:var(--green)}
.prose h4::before{content:'#### ';color:var(--green)}
.prose h1.name{margin:4px 0 8px;font-size:48px}
.prose h1.name::before{content:none}
.prose img{max-width:100%;height:auto;align-self:center}
.prose ul,.prose ol{margin:0 0 8px;padding-left:3ch}
.prose blockquote{margin:0 0 8px;padding-left:2ch;border-left:2px solid var(--grey);color:var(--grey-text)}
.prose pre{margin:0 0 8px;padding:10px 12px;background:#000;border:1px solid var(--grey);overflow-x:auto}
.prose code{font-family:inherit}
.prose :not(pre) > code{background:var(--grey);padding:0 4px}
.prose table{border-collapse:collapse;margin:0 0 8px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--grey);padding:4px 8px}
.prose hr{border:0;border-top:1px dashed var(--grey);margin:16px 0}
.banner{float:right;max-width:min(45%,420px);margin:0 0 12px 16px}
.banner img{display:block;width:100%;height:auto}
.comments{color:var(--fg);color-scheme:dark}

.fire{position:absolute;left:0;bottom:0;width:calc(100% - 410px);height:320px;z-index:10;opacity:0.6;pointer-events:none;image-rendering:pixelated}

@media (min-width:1001px){
  .tiles--home{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 530px}
  .tiles--home #about{grid-column:1;grid-row:1 / span 2}
  .tiles--home #thesis{grid-column:2;grid-row:1}
  .tiles--home .side{grid-column:3;grid-row:1 / span 2}
  .tiles--home #news{grid-column:1 / span 2;grid-row:3}
  .tiles--home #github{grid-column:2;grid-row:2}
  .tiles--home #contact{grid-column:3;grid-row:3}
  .tiles--split{grid-template-columns:minmax(0,1fr) 530px}
  .tiles--split .main-col{grid-column:1}
  .tiles--split .side-col{grid-column:2;align-self:start}
}
@media (min-width:1001px) and (max-width:1300px){
  .tiles--home{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px}
  .tiles--split{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:1300px){
  .mpbtn{padding:0 2px}
}
@media (max-width:1000px){
  .fire{width:100%;height:240px}
  .banner{float:none;max-width:100%;margin:0 0 12px}
  .bg-credit{width:100%;flex-direction:column;row-gap:0}
  .bg-credit__label{text-align:center}
  .bg-credit__citation{font-size:12px;text-align:center;white-space:normal}
}
@media (max-width:600px){
  .blk{padding:0 7px 0 6px;margin-left:-3px}
}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}