body{
    background:#0d0f12;
    color:#d0d0d0;
    font-family:monospace;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    margin:0;
}

.window{
width:750px;
border:1px solid #5aff9c;
border-radius:14px;
background:#111317;
overflow:hidden; /* FIX */
}

.titlebar{
display:flex;
align-items:center;
padding:8px 12px;
background:#111;
border-bottom:1px solid #5aff9c;
}

.dots{
    display:flex;
    gap:6px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
}

.red{background:#ff5f56;}
.yellow{background:#ffbd2e;}
.green{background:#27c93f;}

.title{
    margin-left:15px;
    color:#5aff9c;
    font-size:13px;
}

/* ascii */
.ascii{
    color:#5aff9c;
    text-align:center;
    margin:15px 0;
}

/* tiling layout */
.tiles{
    display:flex;
    height:350px;
}

.tile{
    padding:15px;
    overflow:auto;
}

.sidebar{
    width:220px;
    border-right:1px solid #5aff9c;
}

/* file tree */
.sidebar ul{
    list-style:none;
    padding:0;
}

.sidebar li{
    padding:6px;
    cursor:pointer;
}

.sidebar li:hover,
.selected{
    background:#5aff9c22;
}

/* content */
.content{
    flex:1;
}

.panel{
    display:none;
    flex-direction:column;
}

.panel.active{
    display:flex;
}

.panel a{
    color:#d0d0d0;
    text-decoration:none;
    margin:6px 0;
}

.panel a:hover{
    color:#5aff9c;
    padding-left:6px;
}

/* blinking cursor */
.cursor{
    animation:blink 1s infinite;
}

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

.page{
    padding:25px;
}

h2{
    color:#5aff9c;
    margin-bottom:20px;
}

/* gallery grid */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:15px;
}

.gallery img{
    width:100%;
    border:1px solid #5aff9c;
    border-radius:8px;
    transition:.2s;
}

.gallery img:hover{
    transform:scale(1.03);
}

/* writeup links */
.links{
    list-style:none;
    padding:0;
}

.links li{
    margin:12px 0;
}

.links a{
    color:#d0d0d0;
    text-decoration:none;
}

.links a:hover{
    color:#5aff9c;
    padding-left:6px;
}

/* back button */
.back{
    display:inline-block;
    margin-top:25px;
    color:#5aff9c;
    text-decoration:none;
}

/* === cars page only === */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:15px;
}

.gallery img{
width:100%;
border:1px solid #5aff9c;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

.gallery img:hover{
transform:scale(1.03);
}



/* window tiles */
.tilewin{
    position:absolute;
    border:1px solid #5aff9c;
    background:#111;
    overflow:hidden;
}

.tilewin img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* titlebar */
.tilebar{
    background:#5aff9c;
    color:#000;
    font-size:12px;
    padding:3px 6px;
    cursor:move;
}

#workspace {
    flex: 2;                   /* take more space than gallery */
    position: relative !important;
    border: none;              /* remove any leftover dashed border */
    min-height: 600px;         /* bigger workspace */
    height: auto;
    overflow: visible;
    padding: 8px;
}


/* window */
/* spawned windows (full borders, terminal style) */
.wm-window {
    position: absolute !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid #5aff9c; /* full border on all sides */
    border-radius: 6px;         /* optional: slight rounding like terminal */
    box-sizing: border-box;     /* ensures borders don't break size */
    animation: tile-in 0.25s ease-out;
}


/* title bar */
.wm-bar {
    background: #111;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5aff9c;
    font-size: 12px;
    border-bottom: 1px solid #5aff9c55;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}


/* buttons */
.wm-controls button{
background:none;
border:none;
color:#5aff9c;
cursor:pointer;
margin-left:6px;
font-size:12px;
}

.wm-controls button:hover{
color:white;
}

/* image */
.wm-window img{
width:100%;
height:100%;
object-fit:contain;
background:black;
}

/* states */
.wm-window.min{
display:none;
}

.wm-window.max{
z-index:999;
}

/* main horizontal tiling layout */
.wm-root{
display:flex;
gap:10px;
height:500px;
}

/* terminals */
/* left gallery terminal */
.terminal {
    flex: 1;
    border: 1px solid #5aff9c;   /* full border */
    border-radius: 10px;          /* rounded corners */
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* titlebar (same style for all windows) */
.titlebar{
background:#111;
padding:6px;
display:flex;
align-items:center;
gap:10px;
color:#5aff9c;
font-size:13px;
border-bottom:1px solid #5aff9c55;
}

/* ========================= */
/* WINDOW MANAGER LAYOUT */
/* ========================= */

.wm-root{
display:flex;
gap:14px;
width:900px;
height:520px;
}

/* left terminal */
.terminal{
width:260px;
flex-shrink:0;
border:1px solid #5aff9c;
background:#0a0a0a;
display:flex;
flex-direction:column;
}

/* shared titlebar style */
.terminal .titlebar{
background:#111;
padding:6px;
display:flex;
align-items:center;
gap:10px;
color:#5aff9c;
font-size:13px;
border-bottom:1px solid #5aff9c55;
}

/* dots */
.dots span{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
margin-right:4px;
}
.dots span:nth-child(1){background:#ff5f56;}
.dots span:nth-child(2){background:#ffbd2e;}
.dots span:nth-child(3){background:#27c93f;}

/* gallery */
.gallery{
padding:10px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:10px;
}

.gallery img{
width:100%;
cursor:pointer;
border:1px solid #5aff9c55;
transition:.2s;
}
.gallery img:hover{transform:scale(1.03);}

/* workspace */

/* spawned windows */
.wm-window{
position:absolute;
background:#0a0a0a;
border:1px solid #5aff9c;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 0 10px #5aff9c22;

}

/* window bar */
.wm-bar{
background:#111;
padding:6px;
display:flex;
justify-content:space-between;
align-items:center;
color:#5aff9c;
font-size:12px;
border-bottom:1px solid #5aff9c55;
}

/* buttons */
.wm-controls button{
background:none;
border:none;
color:#5aff9c;
cursor:pointer;
margin-left:6px;
}
.wm-controls button:hover{color:white;}

/* image */
.wm-window img{
width:100%;
height:100%;
object-fit:contain;
background:black;
}

.wm-window .titlebar{
  background:#111;
  padding:6px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#5aff9c;
  font-size:13px;
  border-bottom:1px solid #5aff9c55;
}

.wm-window .dots span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:4px;
}
.wm-window .dots span:nth-child(1){background:#ff5f56;}
.wm-window .dots span:nth-child(2){background:#ffbd2e;}
.wm-window .dots span:nth-child(3){background:#27c93f;}

/* spawned window animation */
@keyframes tile-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.wm-window {
    animation: tile-in 0.25s ease-out;
}

@keyframes tile-in {
    0% {
        transform: translateX(20px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}