:root{
  --bg: #100e09;
  --fg: #cbcbcb;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; width:100%}
html{scroll-padding-top:110px;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family: 'VT323', monospace;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 48px;
  z-index:100;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.top-left{
  font-size:20px;
  letter-spacing:1px;
}

.cursor{
  display:inline-block;
  width:8px;
  animation:blink 1s steps(2) infinite;
}

@keyframes blink{50%{opacity:0}}

.top-right a{
  color:var(--fg);
  text-decoration:none;
  margin-left:18px;
  font-size:18px;
}

.top-right{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.ascii-pattern-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.ascii-dot{
  position:absolute;
  color:var(--fg);
  font-family:'Handjet', monospace;
  font-size:14px;
  opacity:0;
  text-shadow:0 0 10px rgba(203,203,203,0.8), 0 0 20px rgba(203,203,203,0.5), 0 0 30px rgba(203,203,203,0.3);
}

.ascii-dot.twinkle{
  animation:twinkle 3s ease-in-out infinite;
}

@keyframes twinkle{
  0%, 100%{opacity:0.08; transform:scale(0.8); text-shadow:0 0 8px rgba(203,203,203,0.5), 0 0 15px rgba(203,203,203,0.3)}
  50%{opacity:0.35; transform:scale(1.2); text-shadow:0 0 15px rgba(203,203,203,1), 0 0 30px rgba(203,203,203,0.8), 0 0 45px rgba(203,203,203,0.5)}
}

.ascii-dot.float{
  animation:float 6s ease-in-out infinite;
}

@keyframes float{
  0%, 100%{opacity:0.2; transform:translateY(0); text-shadow:0 0 10px rgba(203,203,203,0.6), 0 0 20px rgba(203,203,203,0.4)}
  50%{opacity:0.3; transform:translateY(-10px); text-shadow:0 0 15px rgba(203,203,203,0.9), 0 0 30px rgba(203,203,203,0.6)}
}

.ascii-dot.pulse{
  animation:pulse 4s ease-in-out infinite;
}

@keyframes pulse{
  0%, 100%{opacity:0.15; text-shadow:0 0 8px rgba(203,203,203,0.5), 0 0 15px rgba(203,203,203,0.3)}
  50%{opacity:0.4; text-shadow:0 0 20px rgba(203,203,203,1), 0 0 40px rgba(203,203,203,0.8), 0 0 60px rgba(203,203,203,0.4)}
}

.ascii-dot.drift{
  animation:drift 8s ease-in-out infinite;
}

@keyframes drift{
  0%, 100%{opacity:0.15; transform:translate(0, 0); text-shadow:0 0 10px rgba(203,203,203,0.6), 0 0 20px rgba(203,203,203,0.4)}
  25%{transform:translate(5px, -5px)}
  50%{opacity:0.28; transform:translate(0, -8px); text-shadow:0 0 15px rgba(203,203,203,0.9), 0 0 30px rgba(203,203,203,0.6)}
  75%{transform:translate(-5px, -3px)}
}

main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
  position:relative;
  z-index:1;
  padding:0 20px;
}

main.bitmap-page,
main.projects-page{
  height:auto;
  min-height:100vh;
  justify-content:flex-start;
  padding:0 20px;
}

main.projects-page .projects-terminal,
main.projects-page .project-card,
main.projects-page .project-detail,
main.projects-page .project-img{
  will-change: transform, opacity;
}

@keyframes projectsViewIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes projectsCardIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

main.projects-page .projects-terminal{
  animation:projectsViewIn 420ms ease both;
}

main.projects-page .projects-view:not([hidden]){
  animation:projectsViewIn 360ms ease both;
}

main.projects-page .project-card{
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

main.projects-page .project-card:hover{
  transform:translateY(-3px);
  border-color:rgba(203,203,203,0.35);
  background:rgba(203,203,203,0.03);
  box-shadow:0 12px 36px rgba(0,0,0,0.35);
}

main.projects-page .projects-grid .project-card{
  animation:projectsCardIn 420ms ease both;
}
main.projects-page .projects-grid .project-card:nth-child(1){ animation-delay:40ms; }
main.projects-page .projects-grid .project-card:nth-child(2){ animation-delay:90ms; }
main.projects-page .projects-grid .project-card:nth-child(3){ animation-delay:140ms; }
main.projects-page .projects-grid .project-card:nth-child(4){ animation-delay:190ms; }
main.projects-page .projects-grid .project-card:nth-child(5){ animation-delay:240ms; }
main.projects-page .projects-grid .project-card:nth-child(6){ animation-delay:290ms; }

@media (prefers-reduced-motion: reduce){
  main.projects-page .projects-terminal,
  main.projects-page .projects-view:not([hidden]),
  main.projects-page .projects-grid .project-card{
    animation:none !important;
  }
  main.projects-page .project-card{
    transition:none !important;
  }
}

.pixel-art{
  position:absolute;
  width:5px;
  height:5px;
  background:var(--fg);
  opacity:0.85;
  pointer-events:none;
  filter: drop-shadow(0 0 3px var(--fg)) drop-shadow(0 0 8px var(--fg));
}

@keyframes pixelFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); opacity:0.85; }
  50%{ transform:translateY(-15px) rotate(2deg); opacity:1; }
}

@keyframes pixelPulse{
  0%,100%{ filter: drop-shadow(0 0 3px var(--fg)) drop-shadow(0 0 8px var(--fg)); }
  50%{ filter: drop-shadow(0 0 8px var(--fg)) drop-shadow(0 0 20px var(--fg)) drop-shadow(0 0 30px var(--fg)); }
}

.pixel-art-left{
  left:5%;
  top:65%;
  animation: pixelFloat 6s ease-in-out infinite, pixelPulse 4s ease-in-out infinite;
  box-shadow:
    0 0 0 var(--fg), 5px 0 0 var(--fg), 10px 0 0 var(--fg), 15px 5px 0 var(--fg),
    0 5px 0 var(--fg), 5px 5px 0 var(--fg), 10px 5px 0 var(--fg), 15px 10px 0 var(--fg),
    -5px 5px 0 var(--fg), -5px 10px 0 var(--fg), 0 10px 0 var(--fg), 5px 10px 0 var(--fg),
    10px 10px 0 var(--fg), 15px 15px 0 var(--fg), 20px 15px 0 var(--fg),
    0 -5px 0 var(--fg), 5px -5px 0 var(--fg), 10px -10px 0 var(--fg), 15px -15px 0 var(--fg),
    20px -20px 0 var(--fg), 25px -25px 0 var(--fg), 30px -30px 0 var(--fg),
    35px -35px 0 var(--fg), 40px -40px 0 var(--fg), 45px -40px 0 var(--fg),
    50px -35px 0 var(--fg), 55px -35px 0 var(--fg), 60px -30px 0 var(--fg),
    -5px -5px 0 var(--fg), -10px -10px 0 var(--fg), -15px -15px 0 var(--fg),
    20px 0 0 var(--fg), 25px 0 0 var(--fg), 30px 5px 0 var(--fg), 35px 5px 0 var(--fg),
    40px 10px 0 var(--fg), 45px 10px 0 var(--fg), 50px 10px 0 var(--fg), 55px 15px 0 var(--fg),
    60px 15px 0 var(--fg), 65px 20px 0 var(--fg), 70px 20px 0 var(--fg), 75px 25px 0 var(--fg),
    80px 30px 0 var(--fg), 85px 30px 0 var(--fg), 90px 35px 0 var(--fg),
    -5px 15px 0 var(--fg), -10px 20px 0 var(--fg), -10px 25px 0 var(--fg),
    -15px 30px 0 var(--fg), -15px 35px 0 var(--fg), -20px 40px 0 var(--fg),
    -20px 45px 0 var(--fg), -25px 50px 0 var(--fg), -25px 55px 0 var(--fg),
    -30px 60px 0 var(--fg), -30px 65px 0 var(--fg), -25px 70px 0 var(--fg),
    -40px -30px 0 var(--fg), -45px -35px 0 var(--fg), -50px -40px 0 var(--fg),
    -55px -40px 0 var(--fg), -60px -35px 0 var(--fg),
    70px -15px 0 var(--fg), 75px -20px 0 var(--fg), 80px -20px 0 var(--fg),
    25px 25px 0 var(--fg), 30px 25px 0 var(--fg), 35px 25px 0 var(--fg),
    25px 30px 0 var(--fg), 30px 30px 0 var(--fg), 35px 30px 0 var(--fg), 40px 30px 0 var(--fg),
    30px 35px 0 var(--fg), 35px 35px 0 var(--fg), 40px 35px 0 var(--fg), 45px 35px 0 var(--fg),
    35px 40px 0 var(--fg), 40px 40px 0 var(--fg), 45px 40px 0 var(--fg),
    -35px 0 0 var(--fg), -40px 5px 0 var(--fg), -45px 5px 0 var(--fg),
    100px 40px 0 var(--fg), 105px 45px 0 var(--fg), 110px 45px 0 var(--fg);
}

.pixel-art-right{
  right:8%;
  top:20%;
  animation: pixelFloat 7s ease-in-out infinite 0.5s, pixelPulse 5s ease-in-out infinite 1s;
  box-shadow:
    0 0 0 var(--fg), -5px 0 0 var(--fg), -10px 0 0 var(--fg),
    5px 5px 0 var(--fg), 0 5px 0 var(--fg), -5px 5px 0 var(--fg), -10px 5px 0 var(--fg), -15px 5px 0 var(--fg),
    10px 10px 0 var(--fg), 5px 10px 0 var(--fg), 0 10px 0 var(--fg), -5px 10px 0 var(--fg),
    15px 15px 0 var(--fg), 10px 15px 0 var(--fg), 5px 15px 0 var(--fg), 0 15px 0 var(--fg),
    20px 20px 0 var(--fg), 15px 20px 0 var(--fg), 10px 20px 0 var(--fg),
    -15px -5px 0 var(--fg), -20px -10px 0 var(--fg), -25px -15px 0 var(--fg),
    -30px -20px 0 var(--fg), -35px -25px 0 var(--fg), -40px -30px 0 var(--fg),
    -45px -35px 0 var(--fg), -50px -40px 0 var(--fg), -55px -45px 0 var(--fg),
    -60px -45px 0 var(--fg), -65px -40px 0 var(--fg), -70px -40px 0 var(--fg),
    -20px -5px 0 var(--fg), -25px -5px 0 var(--fg), -30px -10px 0 var(--fg),
    -35px -10px 0 var(--fg), -40px -15px 0 var(--fg), -45px -15px 0 var(--fg),
    25px 25px 0 var(--fg), 30px 30px 0 var(--fg), 35px 35px 0 var(--fg),
    40px 40px 0 var(--fg), 45px 45px 0 var(--fg), 50px 50px 0 var(--fg),
    55px 55px 0 var(--fg), 60px 60px 0 var(--fg), 65px 65px 0 var(--fg),
    70px 70px 0 var(--fg), 75px 75px 0 var(--fg),
    -5px 20px 0 var(--fg), -10px 25px 0 var(--fg), -10px 30px 0 var(--fg),
    -15px 30px 0 var(--fg), -15px 35px 0 var(--fg), -20px 35px 0 var(--fg),
    -20px 40px 0 var(--fg), -25px 40px 0 var(--fg), -25px 45px 0 var(--fg),
    -50px 60px 0 var(--fg), -45px 55px 0 var(--fg), -40px 55px 0 var(--fg), -35px 60px 0 var(--fg),
    -55px 65px 0 var(--fg), -50px 65px 0 var(--fg), -45px 65px 0 var(--fg), -40px 65px 0 var(--fg), -35px 65px 0 var(--fg), -30px 65px 0 var(--fg),
    -55px 70px 0 var(--fg), -50px 70px 0 var(--fg), -45px 70px 0 var(--fg), -40px 70px 0 var(--fg), -35px 70px 0 var(--fg), -30px 70px 0 var(--fg),
    -50px 75px 0 var(--fg), -45px 75px 0 var(--fg), -40px 75px 0 var(--fg), -35px 75px 0 var(--fg),
    -45px 80px 0 var(--fg), -40px 80px 0 var(--fg),
    -42px 85px 0 var(--fg),
    30px -20px 0 var(--fg), 35px -25px 0 var(--fg), 40px -25px 0 var(--fg),
    -75px -30px 0 var(--fg), -80px -25px 0 var(--fg),
    80px 80px 0 var(--fg), 85px 85px 0 var(--fg), 90px 85px 0 var(--fg);
}

.terminal{
  width:auto;
  max-width:520px;
  height:auto;
  border:3px solid rgba(203,203,203,0.95);
  border-radius:18px;
  position:relative;
  background:transparent;
  opacity:1;
  transform:scale(1);
  transition:opacity 0.3s ease, transform 0.3s ease;
  padding:40px 30px 30px 30px;
}

.terminal.closing{
  opacity:0;
  transform:scale(0.95);
}

.terminal-header{
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:0 24px;
  background:transparent;
  z-index:1;
}

.filename{
  color:var(--fg);
  font-size:16px;
  line-height:1;
  background:var(--bg);
  padding:0 8px;
}

.close{
  background:var(--bg);
  border:none;
  color:var(--fg);
  font-size:16px;
  cursor:pointer;
  line-height:1;
  padding:0 8px;
}

.terminal-body{
  position:relative;
  padding:0;
}

.terminal-body p{
  margin-bottom:12px;
}

.terminal-body p:last-child{
  margin-bottom:0;
}

.signature-img{
  max-width:160px;
  height:auto;
  filter:brightness(0) invert(0.8);
  opacity:0.9;
  display:block;
  margin-top:12px;
}

.real-terminal{
  width:800px;
  max-width:90%;
  background:rgba(16, 14, 9, 0.95);
  border:1px solid rgba(203,203,203,0.3);
  border-radius:8px;
  overflow:hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index:50;
  position:relative;
}

.terminal-main{
  display:flex;
  justify-content:space-between;
  min-width:0;
}

.terminal-left{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.terminal-output-scroll{
  max-height:min(200px, 25vh);
  overflow-y:auto;
  overflow-x:auto;
  padding-right:10px;
  margin-top:10px;
}

.terminal-output-scroll::-webkit-scrollbar{
  width:6px;
}

.terminal-output-scroll::-webkit-scrollbar-track{
  background:rgba(203,203,203,0.1);
}

.terminal-output-scroll::-webkit-scrollbar-thumb{
  background:rgba(203,203,203,0.3);
  border-radius:3px;
}

.terminal-right{
  display:flex;
  align-items:center;
  padding-right:20px;
}

.ascii-cat{
  font-family:'Handjet', monospace;
  font-size:14px;
  line-height:1.2;
  color:var(--fg);
  opacity:0.7;
  text-align:center;
  margin:0;
}

.interactive-terminal-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:20px;
  scroll-margin-top:100px;
}

.interactive-terminal{
  width:1000px;
  max-width:95%;
  position:relative;
  scroll-behavior:auto;
}

.social-icons{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:30px;
}

.social-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(203,203,203,0.3);
  border-radius:50%;
  color:var(--fg);
  opacity:0.6;
  transition:all 0.3s ease;
}

.social-icon:hover{
  opacity:1;
  border-color:var(--fg);
  transform:translateY(-3px);
  box-shadow:0 5px 20px rgba(203,203,203,0.2);
}

.social-icon svg{
  width:20px;
  height:20px;
}

.terminal-commands{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 0 20px 20px;
}

.cmd-btn{
  padding:6px 14px;
  border:1px solid rgba(203,203,203,0.4);
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  color:var(--fg);
  opacity:1;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  transition:all 0.2s ease;
}

.cmd-btn:hover{
  opacity:1;
  background:rgba(203,203,203,0.1);
  border-color:var(--fg);
  transform:translateY(-2px);
}

.control-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.control-value{
  color:var(--fg);
  opacity:0.75;
  font-size:14px;
}

.cmd-btn:active{
  transform:translateY(0);
}

.output-line{
  white-space:pre;
  font-family:'Courier New', Consolas, monospace;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0;
  animation:lineSlide 0.15s ease forwards;
  opacity:0;
}

@keyframes lineSlide{
  from{ opacity:0; transform:translateX(-10px); }
  to{ opacity:1; transform:translateX(0); }
}

#dynamicOutput .terminal-line{
  animation:fadeIn 0.3s ease;
}

#dynamicOutput .terminal-output{
  animation:typeIn 0.5s ease;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes typeIn{
  from{ opacity:0; }
  to{ opacity:0.8; }
}

.typing-anim{
  display:inline-block;
  animation:typeEffect 0.3s ease;
}

@keyframes typeEffect{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

.input-line{
  margin-top:10px;
}

.terminal-bar{
  display:flex;
  align-items:center;
  padding:12px 16px;
  background:rgba(203,203,203,0.1);
  border-bottom:1px solid rgba(203,203,203,0.2);
}

.terminal-buttons{
  display:flex;
  gap:8px;
}

.terminal-buttons span{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(203,203,203,0.5);
}

.btn-close{ background:rgba(203,203,203,0.3); }
.btn-minimize{ background:rgba(203,203,203,0.2); }
.btn-maximize{ background:rgba(203,203,203,0.2); }

.terminal-title{
  flex:1;
  text-align:center;
  font-size:13px;
  color:var(--fg);
  opacity:0.7;
}

.terminal-content{
  padding:20px;
  font-size:14px;
  line-height:1.8;
}

.terminal-line{
  margin-bottom:4px;
}

.prompt{
  color:var(--fg);
  opacity:0.7;
  margin-right:8px;
}

.command{
  color:var(--fg);
}

.terminal-output{
  color:var(--fg);
  opacity:0.8;
  margin-bottom:16px;
  padding-left:20px;
}

.typing{
  animation:blink 1s steps(2) infinite;
}

.new-file-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  position:absolute;
  top:12%;
  left:3%;
  opacity:1;
  transition:transform 0.3s ease, opacity 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(203,203,203,0.3));
}

.new-file-icon:hover{
  transform:scale(1.1);
  filter: drop-shadow(0 0 15px rgba(203,203,203,0.6));
}

.new-file-icon.hiding{
  opacity:0;
  transform:scale(0.8);
}

.new-file-icon.showing{
  animation:fileAppear 0.4s ease-out;
}

@keyframes fileAppear{
  0%{ opacity:0; transform:scale(0.5); }
  100%{ opacity:1; transform:scale(1); }
}

.file-label{
  color:var(--fg);
  font-size:14px;
  text-align:center;
}

.new-terminal-wrap{
  position:absolute;
  top:10%;
  left:3%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

.new-terminal-wrap .terminal{
  max-width:400px;
}

.terminal.opening{
  animation:terminalOpen 0.4s ease-out;
}

@keyframes terminalOpen{
  0%{ opacity:0; transform:scale(0.8) translateY(20px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}

.ascii-particle{
  position:fixed;
  pointer-events:none;
  color:var(--fg);
  font-family:'Handjet', monospace;
  font-size:16px;
  opacity:0.8;
  z-index:9999;
  user-select:none;
  text-shadow:0 0 8px rgba(203,203,203,0.3);
  transition:opacity 0.5s ease-out;
  transform:translate(-50%, -50%);
}

.bitmap-main,
.projects-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  position:relative;
  z-index:1;
  padding:100px 20px 40px;
}

.bitmap-main{ justify-content:center; }
.projects-main{ justify-content:flex-start; }

.projects-terminal{
  margin-top:auto;
  margin-bottom:auto;
}

.bitmap-terminal,
.projects-terminal{
  width:100%;
  max-width:1200px;
  box-sizing:border-box;
  background:rgba(16, 14, 9, 0.95);
  border:1px solid rgba(203,203,203,0.3);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.bitmap-content,
.projects-content{ padding:20px; }

.projects-header{
  margin-bottom:18px;
}

.projects-view[hidden]{
  display:none !important;
}

.projects-title{
  margin:0 0 8px;
  color:var(--fg);
  font-size:28px;
}

.projects-subtitle{
  margin:0 0 18px;
  color:var(--fg);
  opacity:0.8;
  font-size:16px;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

@media (max-width:1000px){
  .projects-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:640px){
  .projects-grid{ grid-template-columns:1fr; }
}

.project-card{
  border:1px solid rgba(203,203,203,0.2);
  border-radius:6px;
  background:rgba(203,203,203,0.02);
  padding:16px;
}

.project-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.project-card-title{
  margin:0;
  font-size:20px;
  color:var(--fg);
}

.project-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

.tag{
  border:1px solid rgba(203,203,203,0.3);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  color:var(--fg);
  opacity:0.85;
}

.project-card-desc{
  margin:0 0 14px;
  color:var(--fg);
  opacity:0.8;
  font-size:14px;
  line-height:1.6;
}

.project-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.projects-divider{
  height:1px;
  background:rgba(203,203,203,0.2);
  margin:22px 0;
}

.project-detail{
  border:1px solid rgba(203,203,203,0.2);
  border-radius:6px;
  background:rgba(203,203,203,0.02);
  padding:16px;
  margin-bottom:14px;
  scroll-margin-top:110px;
}

.project-detail-header{
  margin-bottom:12px;
}

.project-detail-title{
  margin:0 0 6px;
  font-size:22px;
  color:var(--fg);
}

.project-detail-lead{
  margin:0;
  font-size:14px;
  color:var(--fg);
  opacity:0.8;
  line-height:1.6;
}

.project-media{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin:14px 0;
}

@media (max-width:640px){
  .project-media{ grid-template-columns:1fr; }
}

.project-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  border:1px solid rgba(203,203,203,0.25);
  background:rgba(203,203,203,0.03);
}

.project-split{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:14px;
}

@media (max-width:1000px){
  .project-split{ grid-template-columns:1fr; }
}

.project-block{
  border:1px solid rgba(203,203,203,0.18);
  border-radius:6px;
  background:rgba(203,203,203,0.01);
  padding:12px;
}

.project-block-title{
  margin:0 0 10px;
  font-size:16px;
  color:var(--fg);
}

.code-block{
  margin:0;
  padding:12px;
  border:1px solid rgba(203,203,203,0.22);
  border-radius:6px;
  background:rgba(203,203,203,0.03);
  overflow:auto;
  font-family:'Courier New', Consolas, monospace;
  font-size:12px;
  line-height:1.5;
  color:var(--fg);
}

.project-list{
  list-style:none;
  padding:0;
  margin:0 0 14px;
}

.project-list li{
  padding:6px 0;
  border-bottom:1px dashed rgba(203,203,203,0.18);
  color:var(--fg);
  opacity:0.85;
  font-size:14px;
}

.project-list li:last-child{
  border-bottom:none;
}

@media (max-width:1000px){
  .bitmap-main,
  .projects-main{ padding:70px 12px 40px; }
  .bitmap-terminal{ padding:16px; }
}

@media (max-width:640px){
  .bitmap-main,
  .projects-main{ padding:40px 8px 24px; }
  .upload-area{ padding:36px 12px; }
  .preview-content{ padding:12px; }
}

.bitmap-container{
  width:100%;
  max-width:1200px;
  display:flex;
  justify-content:center;
}



.upload-section{
  margin:20px 0;
}

.upload-area{
  border:2px dashed rgba(203,203,203,0.3);
  border-radius:8px;
  padding:60px 40px;
  text-align:center;
  cursor:pointer;
  transition:all 0.3s ease;
  background:transparent;
}

.upload-area{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.upload-area input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  padding:0;
  margin:0;
  z-index:10;
}

.upload-area svg,
.upload-area p{ position:relative; z-index:1; }

.upload-area:hover{
  border-color:rgba(203,203,203,0.6);
  background:rgba(203,203,203,0.03);
}

.upload-area svg{
  color:var(--fg);
  opacity:0.6;
  margin-bottom:16px;
}

.upload-area p{
  color:var(--fg);
  margin:8px 0;
  font-size:16px;
}

.upload-hint{
  opacity:0.5;
  font-size:13px !important;
}

.controls-section{
  margin:30px 0;
  padding:20px;
  border:1px solid rgba(203,203,203,0.2);
  border-radius:6px;
  background:rgba(203,203,203,0.02);
}

.control-group{
  margin:16px 0;
}

.control-label{
  display:block;
  color:var(--fg);
  font-size:14px;
  margin-bottom:8px;
}

.control-icon{
  color:var(--fg);
  opacity:0.7;
  margin-right:8px;
}

.control-select{
  width:100%;
  max-width:400px;
  padding:8px 12px;
  background:rgba(203,203,203,0.05);
  border:1px solid rgba(203,203,203,0.3);
  border-radius:4px;
  color:var(--fg);
  font-family:'VT323', monospace;
  font-size:14px;
  margin-top:8px;
  cursor:pointer;
}

.control-select:focus{
  outline:none;
  border-color:var(--fg);
}

.control-slider{
  width:100%;
  max-width:400px;
  margin-top:8px;
  height:6px;
  background:rgba(203,203,203,0.2);
  border-radius:3px;
  outline:none;
  -webkit-appearance:none;
}

.control-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  background:var(--fg);
  border-radius:50%;
  cursor:pointer;
}

.control-slider::-moz-range-thumb{
  width:16px;
  height:16px;
  background:var(--fg);
  border-radius:50%;
  cursor:pointer;
  border:none;
}

.control-checkbox{
  width:18px;
  height:18px;
  margin-left:10px;
  cursor:pointer;
  vertical-align:middle;
}

.control-buttons{
  display:flex;
  gap:10px;
  margin-top:20px;
  flex-wrap:wrap;
}

.preview-section{
  margin:30px 0;
}

.preview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.preview-box{
  border:1px solid rgba(203,203,203,0.2);
  border-radius:6px;
  overflow:hidden;
  background:rgba(203,203,203,0.02);
}

.preview-header{
  padding:10px 16px;
  background:rgba(203,203,203,0.1);
  border-bottom:1px solid rgba(203,203,203,0.2);
}

.preview-content{
  padding:16px;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.preview-content img{
  max-width:100%;
  max-height:400px;
  border-radius:4px;
}

.preview-content canvas{
  max-width:100%;
  max-height:400px;
  width:auto;
  height:auto;
  display:block;
}

.bitmap-container{ display:flex; justify-content:center; }

.ascii-preview{
  background:rgba(0,0,0,0.3);
  overflow:auto;
  max-height:500px;
  align-items:flex-start;
  justify-content:flex-start;
}

.ascii-preview pre{
  font-family:'Courier New', monospace;
  font-size:8px;
  line-height:1;
  color:var(--fg);
  margin:0;
  white-space:pre;
  letter-spacing:0;
}

.ascii-preview::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.ascii-preview::-webkit-scrollbar-track{
  background:rgba(203,203,203,0.1);
}

.ascii-preview::-webkit-scrollbar-thumb{
  background:rgba(203,203,203,0.3);
  border-radius:4px;
}

@media (max-width:900px){
  .preview-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  main{height:auto; min-height:100vh; justify-content:flex-start; padding-top:110px; align-items:stretch}
  .terminal{width:min(520px, 92vw); max-height:80vh; overflow:auto}
  .topbar{padding:16px 14px; flex-direction:column; align-items:flex-start; gap:10px}
  .top-right{width:100%; gap:12px; justify-content:flex-start}
  .top-right a{margin-left:0}
  .ascii-particle{font-size:14px}
  .bitmap-content{padding:16px}
  .upload-area{padding:40px 20px}
  .control-buttons{flex-direction:column}
  .cmd-btn{width:100%}

  .interactive-terminal-wrap{padding:14px}
  .interactive-terminal-wrap{width:100%}
  .interactive-terminal{width:100%; max-width:100%}
  .real-terminal{width:100%; max-width:100%}
  .terminal-main{flex-direction:column}
  .terminal-right{padding:0 20px 16px; justify-content:center}
  .terminal-content{padding:14px; font-size:13px; line-height:1.7}
  .terminal-output{padding-left:0}
  .terminal-commands{padding:10px 0 16px 0}
  .social-icons{gap:16px; margin-top:18px; flex-wrap:wrap}

  .terminal-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  .terminal-output-scroll{-webkit-overflow-scrolling:touch}
}

@media (max-width:420px){
  .top-left{font-size:18px}
  .terminal-title{font-size:12px}
  .ascii-cat{font-size:12px}
}