:root{--bg:#131211;--text:#e9e6e1;--text-soft:#b5b1a9;--muted:#8f8b84;--divider:#ffffff17;--card-bg:#211f1c;--chip-bg:#ffffff0f;--logo-chip:#f2efe9;--scrollbar:#3f3c38;--titlebar-bg:#1d1b19;--col-pad:26px 36px;--space:1.4rem;--space-sm:.85rem;--space-xs:.4rem;--radius:6px;--font:"Manrope", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;background-color:#2a2d33}body:before{content:"";z-index:-1;background:url(/wallpaper.jpg) 50%/cover no-repeat;position:fixed;inset:0}.desktop{height:100%;padding:clamp(20px,4.5vmin,56px)}.window{background-color:var(--bg);background-image:radial-gradient(1100px 700px at 18% -12%,#ffffff0d,#0000 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");background-size:auto,200px 200px;border:1px solid #ffffff24;border-radius:12px;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 24px 70px #00000080,0 4px 18px #00000059}.titlebar{background:var(--titlebar-bg);border-bottom:1px solid var(--divider);flex-shrink:0;align-items:center;height:42px;padding:0 16px;display:flex;position:relative}.traffic-lights{gap:8px;display:flex}.traffic-light{border-radius:50%;width:12px;height:12px}.tl-red{background:#ff5f57}.tl-yellow{background:#febc2e}.tl-green{background:#28c840}.titlebar-title{color:var(--muted);letter-spacing:.03em;font-size:.72rem;position:absolute;left:50%;transform:translate(-50%)}.portfolio{flex:1;grid-template-rows:1fr auto;grid-template-columns:1fr 1px 1.08fr;width:100%;min-height:0;display:grid}.divider{background-color:var(--divider);height:100%}.col{height:100%;min-height:0;padding:var(--col-pad);gap:var(--space);flex-direction:column;display:flex;overflow:hidden}.col-left,.col-projects{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;overflow-y:auto}.col-left::-webkit-scrollbar{width:4px}.col-projects::-webkit-scrollbar{width:4px}.col-left::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}.col-projects::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}.col-left::-webkit-scrollbar-track{background:0 0}.col-projects::-webkit-scrollbar-track{background:0 0}.col-left{gap:1.4rem}.name{letter-spacing:-.02em;font-size:clamp(1.4rem,1.9vw,2rem);font-weight:400;line-height:1.05}.role{color:var(--text-soft);letter-spacing:.02em;max-width:38em;margin-top:.45rem;font-size:.84rem;line-height:1.55}.meta{color:var(--muted);margin-top:.55rem;font-size:.7rem;line-height:1.6}.col-heading{letter-spacing:.01em;color:var(--text);font-size:1.05rem;font-weight:400}.bio{color:var(--muted);max-width:40em;margin-top:.35rem;font-size:.73rem;line-height:1.6}.about-header{flex-direction:column;flex-shrink:0;display:flex}.exp-section{flex-direction:column;gap:.95rem;display:flex}.experience-block{flex-direction:column;gap:.45rem;display:flex}.exp-header{align-items:center;gap:12px;display:flex}.exp-logo-wrap{background:var(--logo-chip);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex;overflow:hidden}.exp-logo{object-fit:contain;max-width:74%;max-height:74%}.exp-company{font-size:.92rem;font-weight:400}.exp-role{color:var(--muted);margin-top:2px;font-size:.79rem}.exp-summary{color:var(--text-soft);max-width:42em;font-size:.81rem;line-height:1.55}.tech-dropdown{margin-top:.3rem}.tech-dropdown summary{cursor:pointer;color:var(--text);-webkit-user-select:none;user-select:none;align-items:center;gap:9px;font-size:.92rem;list-style:none;display:flex}.tech-dropdown summary::-webkit-details-marker{display:none}.tech-dropdown summary:before{content:"▸";color:var(--muted);font-size:.8em;transition:transform .2s}.tech-dropdown[open] summary:before{transform:rotate(90deg)}.tech-list{flex-wrap:wrap;gap:6px;margin-top:12px;list-style:none;display:flex}.tech-list li{color:var(--muted);background:var(--chip-bg);letter-spacing:.02em;border-radius:999px;padding:3px 10px;font-size:.68rem}.project-card{gap:var(--space-sm);color:inherit;cursor:pointer;flex-direction:column;text-decoration:none;display:flex}.card-media{aspect-ratio:16/9;border-radius:var(--radius);background:var(--card-bg);width:100%;position:relative;overflow:hidden}.card-media img,.card-media video{object-fit:cover;border-radius:var(--radius);width:100%;height:100%;position:absolute;inset:0}.card-media video{pointer-events:none}.card-footer{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.card-name{font-size:.92rem}.card-github{color:var(--muted);white-space:nowrap;font-size:.73rem}.card-desc{color:var(--text-soft);margin-top:-.45rem;font-size:.75rem;line-height:1.6}.card-tags{flex-wrap:wrap;gap:6px;display:flex}.tag{color:var(--muted);background:var(--chip-bg);letter-spacing:.02em;border-radius:999px;padding:2px 8px;font-size:.68rem}.site-footer{border-top:1px solid var(--divider);color:var(--muted);grid-column:1/-1;justify-content:space-between;align-items:center;padding:12px 36px;font-size:.73rem;display:flex}.site-footer a{color:var(--muted);text-decoration:none;transition:color .18s}.site-footer a:hover{color:var(--text)}.footer-links{gap:22px;display:flex}@media (width>=769px) and (height<=800px){:root{--col-pad:16px 32px}.desktop{padding:clamp(12px,2.2vmin,22px)}.titlebar{height:36px}.col-left{gap:.95rem}.name{font-size:clamp(1.25rem,1.7vw,1.7rem)}.role{margin-top:.35rem;font-size:.8rem}.bio{margin-top:.3rem;font-size:.7rem}.meta{margin-top:.45rem;font-size:.68rem;line-height:1.5}.exp-section{gap:.6rem}.experience-block{gap:.3rem}.exp-logo-wrap{border-radius:8px;width:34px;height:34px}.exp-company{font-size:.86rem}.exp-role{font-size:.74rem}.exp-summary{font-size:.76rem}.site-footer{padding:9px 32px}}@media (width<=768px){html,body,#root{height:auto;overflow:auto}.desktop{height:auto;min-height:100vh;padding:14px}.window{height:auto;min-height:calc(100vh - 28px)}.portfolio{flex-direction:column;height:auto;display:flex}.portfolio>.divider{display:none}.col{height:auto;padding:26px 20px;overflow:visible}.col-left,.col-projects{overflow-y:visible}.site-footer{flex-wrap:wrap;gap:8px;padding:12px 20px}}
