/* ==========================================================================
   JoãoOS XP — app styles. Layouts adapt to the *window* width via container queries.
   ========================================================================== */
.win-body{
  container:win / inline-size
}

/* ---------- Project covers (+ generated pixel cover when no image exists) ---------- */
.cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#1b2838
}
.cover.ph{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(hsl(var(--h) 50% 42%) 0 50%,hsl(var(--h) 50% 34%) 50%)
}
.cover.ph::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(rgba(255,255,255,.09) 0 25%,transparent 0 50%) 0 0/4px 4px}
.ph-t{position:relative;font:400 20px/1 var(--font-px);color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.4);letter-spacing:-1px}
.ph-e{position:absolute;right:6px;bottom:6px;width:24px;height:24px;color:#fff;opacity:.5}

/* ---------- João.exe (welcome / profile) ---------- */
.wel{flex:1;min-height:0;display:grid;grid-template-columns:292px minmax(0,1fr);overflow:auto;grid-template-rows:minmax(max-content,1fr);background:#fff}
.wel-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px 16px 16px;
  color:var(--side-ink);
  background:linear-gradient(var(--side-a) 0 36%,var(--side-b) 36%);
  overflow:hidden
}
.wel-card::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(rgba(255,255,255,.08) 0 25%,transparent 0 50%) 0 0/4px 4px;pointer-events:none}
.wel-card>*{position:relative}
.wel-photo{position:relative;width:168px;height:168px;flex:none;border:4px solid #fff;background:#fff;box-shadow:4px 4px 0 rgba(0,20,100,.4)}
.wel-photo img,.wel-photo canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wel-photo canvas{image-rendering:pixelated}
.wel-name{font:400 17px/1.3 var(--font-px);text-align:center;text-shadow:3px 3px 0 rgba(0,20,100,.5);margin-top:4px}
.wel-typed{min-height:22px;font:400 18px/1.25 var(--font-ui);color:#fff3b0;text-shadow:1px 0 0 currentColor,2px 2px 0 rgba(0,20,100,.5);text-align:center}
.caret{display:inline-block;width:8px;height:15px;margin-left:3px;background:#fff3b0;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sheet{width:100%;margin-top:4px;padding:8px 10px;background:rgba(0,20,100,.3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.sheet>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px;padding:2px 0;font-size:15px;line-height:1.25}
.sheet dt{padding-top:2px;color:#c3d6ff;text-transform:uppercase;font-size:13px;letter-spacing:1px}
.sheet dd{margin:0;color:#fff;overflow-wrap:anywhere}
.sheet a{color:#fff3b0}
.sheet b{font:400 12px var(--font-px);color:#fff3b0;text-shadow:none}
.xpbar{display:inline-block;width:72px;height:10px;margin-left:8px;vertical-align:middle;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.xpbar i{display:block;height:100%;background:repeating-linear-gradient(90deg,#4cff4c 0 4px,transparent 4px 5px)}
.wel-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:auto;padding-top:8px}
.soc{display:block}.soc:hover .tile{transform:translateY(-3px)}.soc .tile{transition:transform .1s steps(2)}
.wel-main{min-width:0;display:flex;flex-direction:column;gap:14px;padding:18px 20px 22px;background:#fff}
.wel-bio{font-size:18px;line-height:1.38}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{
  padding:8px 4px 7px;
  text-align:center;
  background:linear-gradient(#fff 0 2px,#eef4ff 2px);
  box-shadow:0 -1px 0 #7f9db9,0 1px 0 #7f9db9,-1px 0 0 #7f9db9,1px 0 0 #7f9db9
}
.stat .n{display:block;font:400 20px/1.3 var(--font-px);color:var(--link)}
.stat span{display:block;margin-top:3px;padding:0 2px;font-size:14px;line-height:1.15;color:var(--ink-2)}
.feat{
  display:grid;
  grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:14px;
  padding:10px;
  color:#fff;
  background:linear-gradient(#2a475e 0 2px,#1b2838 2px);
  box-shadow:0 -1px 0 #0d1620,0 1px 0 #0d1620,-1px 0 0 #0d1620,1px 0 0 #0d1620,4px 4px 0 rgba(0,0,0,.18)
}
.feat-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;align-self:start}
.feat-img .cover{position:absolute;inset:0}
.ribbon{
  position:absolute;
  left:0;
  top:8px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 9px 2px 6px;
  font:400 14px/1.3 var(--font-ui);
  color:#4a3000;
  background:#ffc83c;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
  text-shadow:1px 0 0 currentColor
}
.feat h3{font:400 13px/1.4 var(--font-px);margin-bottom:6px;text-shadow:2px 2px 0 #000}
.feat p{font-size:16px;line-height:1.35;color:#c7d5e0}
.feat-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sec{
  font:400 16px/1 var(--font-ui);
  color:var(--link);
  padding:2px 0 5px;
  border-bottom:2px solid #d6e2f8;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:1px 0 0 currentColor
}
.hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hl-i{display:flex;flex-direction:column;gap:3px;padding:6px 6px 7px;border:0;text-align:left;color:var(--ink);background:linear-gradient(#fff 0 2px,#f6f4ea 2px 60%,#ece9d8 60%);box-shadow:0 -1px 0 #7f9db9,0 1px 0 #7f9db9,-1px 0 0 #7f9db9,1px 0 0 #7f9db9}
.hl-i:hover{background:linear-gradient(#fff6d2 0 2px,#ffe9a2 2px 60%,#ffd978 60%);box-shadow:0 -1px 0 #b87400,0 1px 0 #b87400,-1px 0 0 #b87400,1px 0 0 #b87400}
.hl-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#222;box-shadow:0 0 0 1px #aca899}
.hl-img .cover{position:absolute;inset:0}
.hl-i b{margin-top:3px;font-size:15px;line-height:1.1;overflow-wrap:anywhere}
.hl-i small{font-size:13px;color:var(--ink-3)}
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qa{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  text-align:left;
  border:0;
  color:var(--ink);
  background:linear-gradient(#fff 0 2px,#f6f4ea 2px 60%,#ece9d8 60%);
  box-shadow:0 -1px 0 #7f9db9,0 1px 0 #7f9db9,-1px 0 0 #7f9db9,1px 0 0 #7f9db9
}
.qa:hover{background:linear-gradient(#fff6d2 0 2px,#ffe9a2 2px 60%,#ffd978 60%);box-shadow:0 -1px 0 #b87400,0 1px 0 #b87400,-1px 0 0 #b87400,1px 0 0 #b87400}
.qa b{display:block;font-size:17px}.qa small{display:block;font-size:14px;color:var(--ink-3)}
.nowlist{display:grid;gap:6px}.nowlist li{display:flex;align-items:center;gap:9px;font-size:16px;line-height:1.25}
@container win (max-width:760px){
  .wel{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:max-content;align-content:start}
  .wel-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;column-gap:16px;padding:16px}
  .wel-card .wel-photo{grid-row:1 / span 3;width:112px;height:112px}
  .wel-name,.wel-typed{text-align:left}.wel-name{margin:0}
  .sheet{grid-column:1 / -1}.wel-social{grid-column:1 / -1;justify-content:flex-start;margin-top:0}
}
@container win (max-width:520px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{grid-template-columns:minmax(0,1fr)}.feat-img{max-width:260px}
  .quick{grid-template-columns:minmax(0,1fr)}
  .wel-card{grid-template-columns:minmax(0,1fr);justify-items:center}.wel-card .wel-photo{grid-row:auto}
  .wel-name,.wel-typed{text-align:center}
}

/* ---------- about_me.txt (Notepad) ---------- */
.notepad{flex:1;min-height:0;overflow:auto;padding:6px 10px;background:#fff}
.notepad pre{margin:0;font:400 20px/1.15 var(--font-mono);color:#000;white-space:pre-wrap;overflow-wrap:anywhere}
.notepad a{color:#0000ee}

/* ---------- Contact (compose) ---------- */
.mail{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.mail-bar{flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--face-lo);box-shadow:0 1px 0 #fff}
.mail-form{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:12px 14px 4px;background:var(--face-2)}
.mail-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mail-chips{margin:-2px 0 10px}
.mail-chips .chip{cursor:pointer;border:0}.mail-chips .chip:hover{background:#fff1b8}
.mail-form .grow .textarea{flex:1;min-height:110px}
.mail-note{min-height:20px;font-size:15px}.mail-note.ok{color:var(--ok)}.mail-note.bad{color:var(--bad)}
.mail-info{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  padding:8px 14px;
  font-size:15px;
  border-top:1px solid var(--face-lo);
  background:var(--face)
}
.mail-info .ico{margin-right:-6px}
.lnk{display:inline-flex;align-items:center;gap:5px;color:var(--link)}
@container win (max-width:460px){.mail-2{grid-template-columns:1fr}}

/* ---------- LinkedIn ---------- */
.li{flex:1;min-height:0;overflow:auto;background:#fff}
.li-banner{height:88px;background:linear-gradient(135deg,#0a66c2 0 25%,#0b73da 25% 50%,#0a66c2 50% 75%,#0b73da 75%) 0 0/16px 16px}
.li-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:0 18px}
.li-head>div{padding-top:10px}
.li-av{flex:none;border:4px solid #fff;background:#6d0d2a;box-shadow:3px 3px 0 rgba(0,0,0,.25);margin-top:-36px}
.li-head h2{font:400 22px/1.2 var(--font-ui);text-shadow:1px 0 0 currentColor}.li-head p{font-size:16px;line-height:1.3;color:var(--ink-2)}
.li-head small{display:flex;align-items:center;gap:6px;color:var(--ink-3);margin-top:3px}
.li-body{padding:16px 18px 22px}
.li-body h3{margin-bottom:6px;font:400 17px var(--font-ui);color:#0a66c2;text-shadow:1px 0 0 currentColor}
.li-sum{padding:10px 12px;font-size:16px;line-height:1.42;background:#f3f6fb;box-shadow:inset 0 0 0 1px #cfd9ea}
.li-meta{margin-top:9px;font-size:15px;color:var(--ink-2)}
.li-cta{margin-top:16px}

/* ---------- Resume ---------- */
.rv-bar{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-bottom:1px solid var(--face-lo);
  box-shadow:0 1px 0 #fff;
  background:var(--face)
}
.rv-hint{margin-left:6px;font-size:14px;color:var(--ink-3)}
.rv-scroll{flex:1;min-height:0;overflow:auto;padding:16px;background:#7c7a72}
.paper{max-width:780px;margin:0 auto;padding:34px 40px 40px;background:#fff;color:#111;box-shadow:4px 4px 0 rgba(0,0,0,.35);font:14px/1.4 var(--font-ui)}
.paper h2{font:400 19px/1.35 var(--font-px);text-shadow:none}
.paper .r-head{margin-top:3px;font-size:17px;color:#333}
.paper .r-contact{margin-top:2px;font-size:14px;color:#444}
.paper .r-contact a{color:#0a3ea6}
.paper section{margin-top:15px}
.paper h3{
  margin-bottom:6px;
  padding-bottom:2px;
  font:400 15px/1.2 var(--font-ui);
  text-transform:uppercase;
  letter-spacing:1px;
  color:#0a3ea6;
  border-bottom:2px solid #0a3ea6;
  text-shadow:1px 0 0 currentColor
}
.r-item{margin-bottom:7px;font-size:15px}
.r-row{display:flex;justify-content:space-between;gap:12px}.r-row b{font-size:16px}.r-row span{color:#555;white-space:nowrap}
.r-org{color:#444}.r-item p{margin-top:2px}
.paper ul{padding-left:16px;list-style:square}.paper li{margin-bottom:3px;font-size:15px}
.r-skills div{margin-bottom:2px;font-size:15px}
@container win (max-width:560px){.paper{padding:20px 18px}.r-row{flex-direction:column;gap:0}}

#print-root{display:none}
@media print{
  @page{margin:14mm}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  body>*:not(#print-root){display:none!important}
  #print-root{display:block!important;color:#000}
  #print-root .paper{max-width:none;margin:0;padding:0;box-shadow:none;font-size:10.5pt}
  #print-root .paper{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;line-height:1.35;text-shadow:none}
  #print-root .paper *{text-shadow:none!important}
  #print-root .paper h2{font-family:var(--font-px);font-size:15pt}
  #print-root .paper h3,#print-root .paper .r-row b{font-family:inherit;font-weight:700}
  #print-root .paper h3{font-size:9.5pt}
  #print-root .paper b,#print-root .paper strong{font-weight:700}
  #print-root .paper a{color:#000;text-decoration:none}
}

/* ---------- Projects explorer ---------- */
.xpl{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.xb{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--face-lo);box-shadow:0 1px 0 #fff}
.xbtn{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 6px;border:0;background:none;color:var(--ink);font:400 var(--fs)/1 var(--font-ui)}
.xbtn:hover:not(:disabled){background:linear-gradient(#fff 0 2px,#fff3c4 2px);box-shadow:0 0 0 1px #c9a43a}
.xbtn:disabled{opacity:.38}
.xaddr{
  flex:1 1 220px;
  min-width:140px;
  display:flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 8px;
  background:#fff;
  border:1px solid var(--line-2);
  font-size:15px;
  white-space:nowrap;
  overflow:hidden
}
.xaddr-t{overflow:hidden;text-overflow:ellipsis}
.xsearch{position:relative;flex:0 1 190px;min-width:120px}
.xsearch .gl{position:absolute;left:8px;top:9px;color:var(--ink-3);pointer-events:none}
.xsearch .input{height:30px;min-height:30px;padding:3px 7px 3px 26px}
.xviews{display:flex}
.xviews button{display:grid;place-items:center;width:30px;height:30px;border:0;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.xviews button:hover{background:#fff6d2}
.xviews button[aria-pressed=true]{background:#d7e6ff;color:#0a3ea6;box-shadow:inset 0 0 0 2px #316ac5}
.xsort,.xcoll{width:auto;height:30px;min-height:30px;padding-top:2px;padding-bottom:2px}
.xcoll{display:none}
.xm{flex:1;min-height:0;display:flex}
.xs{flex:none;width:240px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px;background:linear-gradient(var(--side-a) 0 140px,var(--side-b) 140px)}
.xp{background:#d6dff7;box-shadow:0 0 0 1px #fff,3px 3px 0 rgba(0,0,60,.25)}
.xp h4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 8px;
  font:400 15px/1.2 var(--font-ui);
  color:#fff;
  text-shadow:1px 0 0 currentColor,1px 1px 0 rgba(0,0,60,.45);
  background:linear-gradient(90deg,#0b4fd6 0,#3d86f6 100%)
}
[data-theme=olive] .xp h4{background:linear-gradient(90deg,#667d34,#9db35e)}[data-theme=silver] .xp h4{background:linear-gradient(90deg,#8a8fb8,#c3c7e0);color:#23254a;text-shadow:none}
.xp-b{padding:8px 6px}
.xc{display:flex;align-items:center;gap:7px;width:100%;padding:4px 6px;border:0;background:none;color:#0a3ea6;text-align:left;font:400 15px/1.2 var(--font-ui)}
.xc>span:not(.tile){flex:1;min-width:0}.xc i{font-style:normal;font-size:13px;color:var(--ink-3)}
.xc:hover{color:#c25a00;text-decoration:underline}
.xc.on{background:#fff;font-weight:400;box-shadow:inset 0 0 0 1px #316ac5;text-shadow:1px 0 0 currentColor}
.xd{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.xd-info{align-items:center;text-align:center;padding:8px 0}
.xd-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#222;box-shadow:0 0 0 1px #7f9db9,3px 3px 0 rgba(0,0,0,.2)}
.xd-img .cover{position:absolute;inset:0}
.xd h3{font:400 16px/1.25 var(--font-ui);margin-top:2px;text-shadow:1px 0 0 currentColor}
.xd-desc{font-size:15px;line-height:1.3;color:var(--ink-2)}
.xd-hint{font-size:14px;color:var(--ink-3)}
.xd-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:14px}.xd-dl dt{color:var(--ink-3)}.xd-dl dd{margin:0}
.xd-btns{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.xv{flex:1;min-width:0;overflow:auto;padding:10px;background:#fff;outline:none}
.xv-empty{display:flex;align-items:center;gap:8px;padding:20px;color:var(--ink-3)}
.xg{display:grid;gap:8px;align-content:start}
.xg-thumbs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.xg-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 8px}
.xi{border:0;background:none;color:var(--ink);text-align:left}
.xg-thumbs .xi{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:6px 6px 7px;text-align:center}
.xi-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e7da;box-shadow:0 0 0 1px #aca899,3px 3px 0 rgba(0,0,0,.14)}
.xi-img .cover{position:absolute;inset:0}
.xi-name{font:400 15px/1.2 var(--font-ui);overflow-wrap:anywhere;text-shadow:1px 0 0 currentColor}
.xi-eng{font-size:14px;color:var(--ink-3)}
.xi:hover{background:#eef4ff;box-shadow:inset 0 0 0 1px #9db6e8}
.xi.sel{background:var(--sel);color:#fff;box-shadow:none}.xi.sel .xi-eng,.xi.sel .xt-d{color:#fff}
.xi:focus-visible{outline:1px dotted #000;outline-offset:-2px}.xi.sel:focus-visible{outline-color:#fff}
.xi-b{
  position:absolute;
  top:4px;
  right:4px;
  padding:2px 5px;
  font:400 13px/1 var(--font-ui);
  color:#66c0f4;
  background:#1b2838;
  box-shadow:1px 1px 0 rgba(0,0,0,.5);
  text-shadow:1px 0 0 currentColor
}
.xi-b.star{right:auto;left:4px;padding:1px 2px;color:#ffc83c}
.xg-list .xi{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"t n" "t e";column-gap:8px;align-items:center;padding:3px 6px}
.xg-list .xi-th{grid-area:t}.xg-list .xi-name{grid-area:n;font-weight:400}.xg-list .xi-eng{grid-area:e}
.xi-th{position:relative;display:block;flex:none;width:34px;height:26px;overflow:hidden;background:#e9e7da;box-shadow:0 0 0 1px #aca899}
.xi-th .cover{position:absolute;inset:0}
.xt{width:100%;border-collapse:collapse;font-size:15px}
.xt th{
  position:sticky;
  top:-10px;
  z-index:1;
  padding:5px 8px;
  text-align:left;
  background:linear-gradient(#fff,#e9e6d3);
  border:1px solid var(--line);
  cursor:pointer;
  white-space:nowrap
}
.xt th .gl{display:inline-block;vertical-align:-2px;margin-left:2px}
.xt td{padding:3px 8px;border-bottom:1px solid #f0efe6;vertical-align:middle}
.xt tr.xi:hover td{background:#eef4ff}.xt tr.xi.sel td{background:var(--sel)}
.xt-n{display:flex;align-items:center;gap:8px;font-weight:400;text-shadow:1px 0 0 currentColor}
.xt-d{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)}
@container win (max-width:720px){
  .xs{display:none}.xcoll{display:block}.xaddr{flex-basis:100%;order:9}.xsearch{flex:1 1 140px}
}

/* ---------- Project viewer ---------- */
.pv{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 310px;background:#202020;outline:none}
.pv-stage{min-width:0;min-height:0;display:flex;flex-direction:column;background:linear-gradient(#2e2e2e,#181818)}
.pv-img{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:14px;overflow:hidden}
.pv-img>img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0 0 2px #000,6px 6px 0 rgba(0,0,0,.45)}
.pv-img .cover.ph{width:min(100%,520px);height:auto}
.pv-nav{position:absolute;top:50%;width:38px;height:48px;margin-top:-24px;display:grid;place-items:center;border:0;color:#fff;background:rgba(0,0,0,.5)}
.pv-nav:hover{background:rgba(36,94,219,.85)}.pv-nav.prev{left:8px}.pv-nav.next{right:8px}
.pv-count{position:absolute;right:10px;bottom:8px;padding:1px 8px;font-size:14px;color:#fff;background:rgba(0,0,0,.65)}
.pv-strip{flex:none;display:flex;gap:6px;padding:8px 10px;overflow-x:auto;background:#101010}
.pv-strip button{flex:none;width:92px;height:56px;padding:0;border:0;background:#000;box-shadow:0 0 0 2px #444;opacity:.65}
.pv-strip button:hover{opacity:1}.pv-strip button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px #ffc83c}
.pv-strip img{width:100%;height:100%;object-fit:cover}
.pv-info{min-width:0;overflow:auto;padding:16px;background:var(--face)}
.pv-info h2{margin-bottom:8px;font:400 14px/1.45 var(--font-px);text-shadow:none}
.pv-tag{margin-bottom:10px;font-size:17px;line-height:1.35}
.pv-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:12px 0;font-size:15px}.pv-meta dt{color:var(--ink-3)}.pv-meta dd{margin:0;display:flex;align-items:center;gap:5px}
.pv-btns{display:flex;flex-direction:column;gap:6px;margin-top:12px}.pv-btns .btn{width:calc(100% - 2px)}
.pv-pn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:18px;
  padding-top:10px;
  border-top:1px solid var(--face-lo);
  font-size:14px;
  color:var(--ink-3)
}
@container win (max-width:720px){
  .pv{display:flex;flex-direction:column;overflow:auto}
  .pv-stage{flex:none;height:min(62cqw,340px)}
  .pv-info{flex:none;overflow:visible}
}

/* ---------- Malleus Maleficarum (Steam-style page) ---------- */
.mal{flex:1;min-height:0;overflow:auto;color:#c7d5e0;background:#1b2838}
.mal-hero{position:relative;height:300px;overflow:hidden;background:#000}
.mal-hero .cover{position:absolute;inset:0;object-position:center 22%}
.mal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,#1b2838)}
.mal-hero-t{position:absolute;left:20px;right:20px;bottom:14px;z-index:1}
.mal-hero-t h2{font:400 22px/1.35 var(--font-px);color:#fff;text-shadow:3px 3px 0 #000}
.mal-hero-t p{margin-top:4px;font-size:19px;color:#e3edf7;text-shadow:2px 2px 0 #000}
.ribbon.big{z-index:1;top:14px;padding:3px 12px 3px 8px;font-size:15px}
.mal-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;padding:6px 20px 24px}
.mal-desc{font-size:17px;line-height:1.5}
.mal-tags{margin:12px 0}
.mal-body h3{margin:14px 0 4px;font:400 15px/1.2 var(--font-ui);text-transform:uppercase;letter-spacing:1px;color:#66c0f4;text-shadow:1px 0 0 currentColor}
.mal-team{font-size:16px;line-height:1.4;color:#9fb3c6}
.mal-side{align-self:start;display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px #2a475e}
.mal-side .btn{white-space:normal;text-align:center;line-height:1.15;padding-top:6px;padding-bottom:6px}
.mal-side dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin-bottom:6px;font-size:15px}.mal-side dt{color:#8ba6bf}.mal-side dd{margin:0;color:#fff}
@container win (max-width:660px){.mal-body{grid-template-columns:minmax(0,1fr)}.mal-hero{height:210px}.mal-hero-t h2{font-size:18px}}

/* ---------- Skills ---------- */
.sk{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.sk-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 310px;margin:0 6px 6px;background:#fcfcfe;border:1px solid #919b9c}
.sk-grid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;align-content:start;padding:12px}
.sk-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 6px 10px;
  border:0;
  color:var(--ink);
  text-align:center;
  background:linear-gradient(#fff 0 2px,#f6f4ea 2px);
  box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line),-1px 0 0 var(--line),1px 0 0 var(--line)
}
.sk-card .tile{margin:2px}
.sk-card b{font-size:16px;line-height:1.15}.sk-card small{font-size:14px;line-height:1.15;color:var(--ink-3)}
.sk-card:hover{background:linear-gradient(#fff6d2 0 2px,#ffe9a2 2px)}
.sk-card.sel{color:#fff;background:var(--sel)}.sk-card.sel small{color:#fff}
.sk-st{position:absolute;top:4px;right:4px;min-height:18px;padding:0 3px}
.sk-det{overflow:auto;padding:16px;background:var(--face);border-left:1px solid var(--face-lo)}
.sd-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.sd-head h3{font:400 20px/1.2 var(--font-ui);text-shadow:1px 0 0 currentColor}.sd-head p{color:var(--ink-3)}
.sd-study{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:6px 8px;font-size:15px;background:#fff1b8;box-shadow:0 0 0 1px #d4a017}
.sd-note{margin-bottom:12px;font-size:16px;line-height:1.4}
.sk-det h4{margin:10px 0 4px;font:400 15px var(--font-ui);color:var(--link);text-transform:uppercase;letter-spacing:1px;text-shadow:1px 0 0 currentColor}
.sd-used{margin-bottom:10px;font-size:15px;line-height:1.5}
.sk-det .lnk{padding:0;border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer}
@container win (max-width:720px){.sk-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,1fr) auto;overflow:auto}.sk-det{border-left:0;border-top:1px solid var(--face-lo)}}

/* ---------- Experience ---------- */
.exp{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.exp-scroll{flex:1;min-height:0;overflow:auto;margin:0 6px 6px;padding:14px 18px 22px;background:#fcfcfe;border:1px solid #919b9c}
.exp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:16px}
.exp-btns{display:flex;gap:6px}
.tab-n{margin-left:4px;padding:0 5px;font-size:13px;color:#0a3ea6;background:#e1e8f8}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:4px;background:repeating-linear-gradient(var(--sel) 0 6px,transparent 6px 10px)}
.job{position:relative;margin-bottom:12px}
.job-dot{position:absolute;left:-25px;top:16px;width:12px;height:12px;background:var(--sel);box-shadow:0 0 0 2px #fcfcfe,0 0 0 4px var(--sel)}
.job-card{padding:10px 12px;background:#fff;box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line),-1px 0 0 var(--line),1px 0 0 var(--line),3px 3px 0 rgba(0,0,0,.08)}
.job-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start}
.job-t h3{font:400 17px/1.25 var(--font-ui);text-shadow:1px 0 0 currentColor}.job-org{font-size:15px;color:var(--link);overflow-wrap:anywhere}
.job-p{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.job-card p{margin-top:6px;font-size:16px;line-height:1.4;color:var(--ink-2)}
@container win (max-width:540px){.job-h{grid-template-columns:auto minmax(0,1fr)}.job-p{grid-column:1 / -1;flex-direction:row;align-items:center}}

/* ---------- Education & research ---------- */
.edu{flex:1;min-height:0;overflow:auto;padding:16px 18px 22px;background:#fcfcfe}
.edu section{margin-bottom:20px}
.edu h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding-bottom:5px;
  font:400 17px/1.2 var(--font-ui);
  color:var(--link);
  border-bottom:2px solid #d6e2f8;
  text-shadow:1px 0 0 currentColor
}
.edu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.paper-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.edu-card,.paper-card{
  padding:10px 12px;
  background:#fff;
  box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line),-1px 0 0 var(--line),1px 0 0 var(--line),3px 3px 0 rgba(0,0,0,.08)
}
.edu-card{display:flex;align-items:flex-start;gap:12px}
.edu-card h4{font:400 16px/1.25 var(--font-ui);text-shadow:1px 0 0 currentColor}.edu-org{font-size:15px;color:var(--link)}.edu-per{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.paper-t{display:flex;gap:4px;margin-bottom:6px}
.paper-card h4{font:400 16px/1.4 var(--font-ui)}
.paper-by{margin-top:5px;font-size:15px;color:var(--ink-2)}
.paper-n{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:15px;color:var(--ok)}
.edu-cta{display:flex;justify-content:center}

/* ---------- Achievements (Steam-like) ---------- */
.ach{flex:1;min-height:0;display:flex;flex-direction:column;color:#c7d5e0;background:#1b2838}
.ach-head{flex:none;display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(#2a475e,#1b2838);box-shadow:0 2px 0 #0d1620}
.ach-head h2{font:400 14px/1.4 var(--font-px);color:#fff;text-shadow:none}.ach-head p{margin:4px 0 8px;font-size:16px;color:#8ba6bf}
.ach-head .progress{background:#0d1620;border-color:#2a475e}
.ach-list{flex:1;min-height:0;overflow:auto;display:grid;gap:6px;align-content:start;padding:10px 14px 16px}
.ach-i{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px #2a475e
}
.ach-ico{display:grid;place-items:center;width:52px;height:52px;background:#0d1620;box-shadow:inset 0 0 0 2px #2a475e}
.ach-i.gold .ach-ico{box-shadow:inset 0 0 0 2px #d4a017}.ach-i.silver .ach-ico{box-shadow:inset 0 0 0 2px #aab4be}.ach-i.bronze .ach-ico{box-shadow:inset 0 0 0 2px #b8733a}.ach-i.star .ach-ico{box-shadow:inset 0 0 0 2px #66c0f4}
.ach-i.lock{background:rgba(255,255,255,.015);box-shadow:inset 0 0 0 1px #2a475e}.ach-i.lock .ach-ico .ico{filter:grayscale(1) brightness(.75)}
.ach-t b{display:block;font-size:17px;color:#fff}.ach-t p{margin-top:2px;font-size:15px;line-height:1.3;color:#8ba6bf}
.ach .chip{color:#8ba6bf;background:#0d1620;box-shadow:0 -1px 0 #2a475e,0 1px 0 #2a475e,-1px 0 0 #2a475e,1px 0 0 #2a475e}
@container win (max-width:540px){.ach-i{grid-template-columns:auto minmax(0,1fr)}.ach-i .chip,.ach-i .btn{grid-column:2;justify-self:start}}

/* ---------- Terminal ---------- */
.term{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:8px 12px;
  color:#c8c8c8;
  background:#0c0c0c;
  font:400 19px/1.15 var(--font-mono);
  cursor:text
}
.tl{white-space:pre-wrap;overflow-wrap:anywhere}
.tl.hd,.hd{color:#ffd24a}.tl.dim,.dim{color:#7d7d7d}.tl.bad{color:#ff6b5e}.tl.ok{color:#5be37d}
.tl-a{display:inline;padding:0;border:0;background:none;color:#5ec8ff;font:inherit;text-decoration:underline;cursor:pointer}
.tl-a:hover,.tl-a:focus-visible{color:#fff;background:#245edb;outline:none}
.tl a{color:#5ec8ff}
.tp{color:#fff}
.tline{display:flex;align-items:center;gap:8px}
.tin{flex:1;min-width:0;padding:0;border:0;outline:none;background:transparent;color:#fff;font:inherit;caret-color:#fff}
.nf{display:flex;gap:20px}.nf-a{flex:none;width:15ch;color:#ffd24a}.nf-i b{display:inline-block;min-width:84px;color:#ffd24a;font-weight:400}
.cbs i{display:inline-block;width:26px;height:16px}

/* ---------- Display Properties ---------- */
.dp{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--face)}
.dp-body{flex:1;min-height:0;overflow:auto;margin:0 6px 6px;padding:14px;background:#fcfcfe;border:1px solid #919b9c}
.dp-hint{margin-bottom:12px;font-size:16px;color:var(--ink-2)}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.thm,.wpc{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:0;
  color:var(--ink);
  text-align:center;
  background:#fff;
  box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line),-1px 0 0 var(--line),1px 0 0 var(--line)
}
.thm:hover,.wpc:hover{background:#fff6d2}
.thm[aria-pressed=true],.wpc[aria-pressed=true]{box-shadow:0 0 0 3px var(--sel)}
.thm-n{font-size:15px;font-weight:400;text-shadow:1px 0 0 currentColor}
.thm-prev{position:relative;display:block;height:96px;overflow:hidden;background:#6fa5e8}
.thm-prev i{position:absolute;display:block}
.thm-prev .tp-t{left:18px;top:14px;right:18px;height:16px;background:var(--title)}
.thm-prev .tp-t b{position:absolute;right:3px;top:3px;width:9px;height:9px;background:#e4664b}
.thm-prev .tp-b{left:18px;top:30px;right:18px;height:36px;background:var(--face);box-shadow:-2px 0 0 var(--frame),2px 0 0 var(--frame),0 2px 0 var(--frame)}
.thm-prev .tp-k{left:0;right:0;bottom:0;height:16px;background:var(--task)}
.thm-prev .tp-k u{position:absolute;left:0;top:0;bottom:0;width:32px;background:linear-gradient(#6fd16f 0 40%,#2d8f2d 40%)}
.wpc canvas{display:block;width:100%;height:auto;aspect-ratio:80/48;image-rendering:pixelated}
.dp .group{margin-bottom:14px}

/* ---------- About JoãoOS ---------- */
.ab{flex:1;min-height:0;display:flex;flex-direction:column}
.ab-head{flex:none;padding:22px 20px 16px;text-align:center;color:#fff;background:linear-gradient(#0b2f9e 0 4px,#0a2c9a 4px)}
.ab-logo{font:400 26px/1.25 var(--font-px);text-shadow:3px 3px 0 #1d3f99}.ab-logo span{color:#cfe0ff}.ab-logo sup{margin-left:4px;font-size:11px;color:var(--accent);vertical-align:top;position:relative;top:-6px}
.ab-head p{margin-top:6px;letter-spacing:2px;color:#9db6ec}
.ab-body{flex:1;min-height:0;overflow:auto;padding:16px 20px;font-size:16px;line-height:1.4;background:var(--face)}
.ab-body p{margin-bottom:8px}
.ab-cr h4{margin:12px 0 4px;font:400 15px/1.2 var(--font-ui);text-transform:uppercase;letter-spacing:1px;color:var(--link);text-shadow:1px 0 0 currentColor}
.ab-cr li{margin-bottom:4px;font-size:15px}
.ab-disc{margin-top:12px;padding:8px 10px;font-size:14px;color:var(--ink-3);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line)}
.ab-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px}