*,:before,:after,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;tab-size:4}body{line-height:inherit}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}b,strong{font-weight:bolder}pre,code,kbd,samp{font-family:var(--font-mono);font-size:1em}img,svg,video,canvas{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{font:inherit;letter-spacing:inherit;color:inherit;opacity:1;background:0 0;border-radius:0}button,[type=button],[type=reset],[type=submit]{appearance:button;cursor:pointer}textarea{resize:vertical}::placeholder{opacity:1}dialog{height:fit-content;margin:auto;position:fixed;inset:0}[hidden]{display:none!important}:root{color-scheme:dark;--font-sans:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--color-primary:#38bdf8;--color-primary-dim:#0284c7;--color-primary-soft:#7dd3fc;--color-primary-contrast:#03131c;--color-primary-surface:#071620;--color-background:#08090b;--color-surface:#0a0c10;--color-surface-raised:#0f1319;--color-foreground:#e6f2f8;--color-muted-foreground:#7f96a3;--color-border:#123243;--titlebar-h:42px;--cmdbar-h:48px;font-family:var(--font-mono);letter-spacing:0;color:var(--color-foreground);background:var(--color-background);font-weight:400;line-height:1.6}html,body{background:var(--color-background);height:100%;margin:0;overflow:hidden}html.booted #boot-screen{display:none}::selection{background:var(--color-primary);color:var(--color-primary-contrast)}:focus-visible{outline:1px solid var(--color-primary);outline-offset:2px}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.separator-x{background-color:color-mix(var(--color-foreground) 10%, transparent);width:100%;height:1px}#env{flex-direction:column;height:100dvh;display:flex;&>div:last-child{height:100%;display:flex}}#topbar{user-select:none;justify-content:space-between;align-items:center;height:33px;padding:3px 5px;font-size:13px;display:flex;&>div{justify-content:center;align-items:center;gap:10px;display:flex}& .topbar-item{border-radius:20px;height:27px;padding:3px 10px;transition:all .25s;&:hover{background-color:color-mix(var(--color-muted-foreground) 20%, transparent)}}& .vitals{align-items:center;gap:10px;display:flex}& .vital-item{align-items:center;gap:4px;display:flex}& .topbar-icon{display:flex;& svg{display:block}}& .system-status{align-items:center;gap:12px;display:flex}& .activities-indicator{align-items:center;gap:6px;display:flex;&>div:first-child{background-color:var(--color-foreground);border-radius:10px;width:30px;height:8px}&>div:last-child{background-color:var(--color-muted-foreground);border-radius:100%;width:6px;height:6px}}}.desktop{--window-gap:14px;background-image:image-set("/my-portfolio/_astro/wallpaper-forest.B867AOCe.avif" 1x type("image/avif"),"/my-portfolio/_astro/wallpaper-forest.DpfhY6BO.jpg" 1x type("image/jpeg"));background-size:cover;width:100%;height:100%;position:relative;overflow:hidden}#sidebar{flex-direction:column;justify-content:space-between;width:67px;height:100%;padding:4px 2px;display:flex;&>*{user-select:none}& ul{flex-direction:column;align-items:center;gap:4px;width:53px;margin-left:auto;margin-right:auto;display:flex;& li.active{position:relative;&:before{content:" ";background-color:var(--color-primary-dim);border-radius:100%;width:6px;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}}& li.is-focused{background-color:color-mix(var(--color-muted-foreground) 25%, transparent)!important}}& li,& #show-apps-icon{cursor:pointer;border-radius:10px;width:100%;height:53px;padding:5px;transition:all .2s;&:hover{background-color:color-mix(var(--color-muted-foreground) 15%, transparent)}}& #show-apps-icon{width:53px;margin-left:auto;margin-right:auto}}.terminal-window{left:var(--window-gap);top:var(--window-gap);width:calc(100% - var(--window-gap) * 2);height:calc(100% - var(--window-gap) * 2);background:var(--color-background);border:1px solid var(--color-border);border-radius:10px;flex-direction:column;min-height:0;transition:transform .15s,width .1s,height .1s,top .1s,left .1s;display:flex;position:absolute;overflow:hidden;box-shadow:0 0 10px -2px #000;&.is-maximized{width:100%;height:100%;top:0;left:0}&.is-dragging .titlebar{cursor:grabbing}&.is-resizing{&,& *{user-select:none!important}}}.resize-handles{z-index:20;pointer-events:none;position:absolute;inset:0;& .resize-handle{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;position:absolute;&[data-resize=n],&[data-resize=s]{cursor:ns-resize;height:6px;left:12px;right:12px}&[data-resize=e],&[data-resize=w]{cursor:ew-resize;width:6px;top:12px;bottom:12px}&[data-resize=n]{top:0}&[data-resize=s]{bottom:0}&[data-resize=e]{right:0}&[data-resize=w]{left:0}&[data-resize=ne],&[data-resize=nw],&[data-resize=se],&[data-resize=sw]{width:14px;height:14px}&[data-resize=ne],&[data-resize=sw]{cursor:nesw-resize}&[data-resize=nw],&[data-resize=se]{cursor:nwse-resize}&[data-resize=ne],&[data-resize=nw]{top:0}&[data-resize=se],&[data-resize=sw]{bottom:0}&[data-resize=ne],&[data-resize=se]{right:0}&[data-resize=nw],&[data-resize=sw]{left:0}}}.titlebar{height:var(--titlebar-h);background:linear-gradient(180deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);border-bottom:1px solid var(--color-border);user-select:none;cursor:grab;touch-action:none;flex-shrink:0;align-items:center;gap:12px;padding:0 12px;display:flex;& .titlebar-title{text-align:center;color:var(--color-primary-soft);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px;overflow:hidden}}.titlebar-meta{color:var(--color-muted-foreground);flex-shrink:0;font-size:11px}.traffic{cursor:default;flex-shrink:0;gap:7px;display:flex;& .traffic-btn{cursor:pointer;border:0;border-radius:50%;width:12px;height:12px;padding:0;box-shadow:inset 0 -1px 1px #00000059;&.close{cursor:default;background:#ff5f57}&.min{background:#febc2e}&.max{background:#28c840}&:hover{filter:brightness(1.15)}}}.terminal-body{flex:1;min-height:0;display:flex;position:relative;container-type:inline-size}.content-pane{scroll-behavior:smooth;background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent), transparent 180px), var(--color-background);flex:1;min-width:0;position:relative;overflow:hidden auto}.content-pane,.help-dialog-panel pre{&::-webkit-scrollbar{width:10px}&::-webkit-scrollbar-track{background:var(--color-surface)}&::-webkit-scrollbar-thumb{background:var(--color-border);border:2px solid var(--color-surface);&:hover{background:var(--color-primary)}}}.command-bar{min-height:var(--cmdbar-h);border-top:1px solid var(--color-border);background:var(--color-surface);flex-direction:column;flex-shrink:0;justify-content:center;padding:4px 12px;display:flex;& .command-output{text-overflow:ellipsis;min-height:0;font-size:12px;overflow:hidden;&.command-output-empty{display:none}}}.command-row{align-items:center;gap:8px;font-size:13px;display:flex;& .prompt-prefix{flex-shrink:0}& .command-input{min-width:0;color:var(--color-foreground);font:inherit;caret-color:var(--color-primary);background:0 0;border:0;outline:none;flex:1;padding:6px 0;&::placeholder{color:color-mix(in srgb, var(--color-muted-foreground) 70%, transparent)}}}.tui-panel{border:1px solid var(--color-border);background:#121216b8;padding:1rem;position:relative;& .tui-panel-title{background:var(--color-background);color:var(--color-primary);letter-spacing:.12em;text-transform:uppercase;padding:0 .45rem;font-size:11px;font-weight:600;position:absolute;top:0;left:.9rem;transform:translateY(-50%)}&:before,&:after{content:"";border:1px solid var(--color-primary);pointer-events:none;width:7px;height:7px;position:absolute}&:before{border-bottom:0;border-right:0;top:-1px;left:-1px}&:after{border-top:0;border-left:0;bottom:-1px;right:-1px}}.cmd-line{flex-wrap:wrap;align-items:baseline;gap:0;margin-bottom:.85rem;font-size:13px;display:flex;& .cmd{color:var(--color-foreground);margin-left:.5rem}& .comment{color:var(--color-muted-foreground);margin-left:.5rem}}.term-prompt{white-space:nowrap;font-size:13px}.prompt-user{color:var(--color-primary);font-weight:600}.prompt-at,.prompt-colon{color:var(--color-muted-foreground);font-weight:400}.prompt-host,.prompt-path{color:var(--color-primary-soft)}.prompt-dollar{color:var(--color-primary);font-weight:700}.term-section{flex-direction:column;justify-content:center;min-height:100%;padding:2.5rem 2rem 3rem;display:flex;& .term-section-inner{width:100%;max-width:1100px;margin:0 auto}}.term-btn{border:1px solid var(--color-primary);color:var(--color-primary);font:inherit;letter-spacing:.02em;cursor:pointer;background:0 0;align-items:center;gap:.45rem;padding:.55rem .85rem;font-size:12px;font-weight:600;transition:background .15s,color .15s,box-shadow .15s;display:inline-flex;&.term-btn-ghost{border-color:var(--color-border);color:var(--color-foreground)}&:hover,&:focus-visible{background:var(--color-primary);color:var(--color-primary-contrast);box-shadow:0 0 18px color-mix(in srgb, var(--color-primary) 35%, transparent)}&.term-btn-ghost:hover,&.term-btn-ghost:focus-visible{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-primary-contrast)}&.term-btn--sm{padding:.375rem .625rem;font-size:11px}}.tech-stack{& .tech-stack-label{letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary);margin-bottom:.5rem;font-size:.75rem;font-weight:600}& .tech-stack-chips{flex-wrap:wrap;gap:.5rem;display:flex;& .chip{border:1px solid var(--color-border);color:var(--color-primary-soft);background:color-mix(in srgb, var(--color-primary) 6%, transparent);padding:.2rem .5rem;font-size:11px;font-weight:500;transition:transform .15s,border-color .15s,background .15s;display:inline-block;&:hover{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 14%, transparent);transform:translateY(-1px)}}}&.tech-stack--sm{margin-bottom:.25rem;& .tech-stack-label{font-size:11px}& .tech-stack-chips{gap:.375rem}}}.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(220px,.7fr);align-items:end;gap:1.75rem;display:grid}.hero-name{letter-spacing:-.03em;color:var(--color-foreground);font-size:clamp(1.8rem,4cqw,3.1rem);font-weight:700;line-height:1.15}.hero-role{color:var(--color-primary);margin-bottom:.9rem;font-size:1.05rem;font-weight:600}.hero-bio{color:var(--color-muted-foreground);max-width:42rem;font-size:.95rem;& strong{color:var(--color-foreground);font-weight:600}}.hero-info{margin-top:1.25rem}.neofetch{gap:.6rem;margin-top:1rem;font-size:13px;display:grid;& .neofetch-key{color:var(--color-primary);width:95px;font-weight:600;&:after{content:":";color:var(--color-muted-foreground);margin-left:1px}}}.neofetch-row{display:flex;&>span:last-child{margin-inline-start:12px}& a{color:var(--color-foreground);border-bottom:1px dashed var(--color-border);overflow-wrap:anywhere;&:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}}}.profile-frame{border:1px solid var(--color-border);background:#121216b8;padding:8px;position:relative;& .profile-frame-bar{color:var(--color-muted-foreground);align-items:center;margin-bottom:8px;padding:0 2px;font-size:11px;display:flex}& img{aspect-ratio:1;object-fit:cover;filter:contrast(1.05)saturate(.92);width:100%;max-width:335px;display:block}}.project-card{border:1px solid var(--color-border);background:#101014cc;overflow:hidden;&+&{margin-top:1.75rem}& .components-wrap{border-top:1px solid var(--color-border);padding:1rem 1.15rem 1.2rem;& .components-title{letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:.9rem;font-size:12px}& .components-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem;display:grid}}}.project-main{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;display:grid;&.no-preview{grid-template-columns:1fr}}.project-preview{border-right:1px solid var(--color-border);background:var(--color-surface);min-height:220px;position:relative;& img{object-fit:cover;object-position:top;width:100%;height:240px;display:block}}.project-body{flex-direction:column;gap:.75rem;padding:1.25rem 1.35rem;display:flex;& .project-name{color:var(--color-foreground);font-size:1.15rem;font-weight:700;&:before{content:"> ";color:var(--color-primary)}}& .project-desc{color:var(--color-muted-foreground);flex:1;font-size:.9rem}& .project-actions{flex-wrap:wrap;gap:.6rem;display:flex}}.component-card{border:1px solid var(--color-border);background:var(--color-surface);flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex;overflow:hidden;&:hover{border-color:var(--color-primary-dim);box-shadow:0 0 20px color-mix(in srgb, var(--color-primary) 8%, transparent)}& img{object-fit:cover;object-position:top;border-bottom:1px solid var(--color-border);width:100%}& .component-body{flex-direction:column;flex:1;gap:.55rem;padding:.85rem .9rem 1rem;display:flex;& h4{font-size:.92rem;font-weight:700}&>p{color:var(--color-muted-foreground);flex:1;font-size:12px}& .term-btn{align-self:flex-start}}}.skills-group{margin-bottom:1.5rem;& h2{color:var(--color-primary);margin-bottom:.7rem;font-size:13px;font-weight:600;&:before{content:"▸ "}}& .skills-row{flex-wrap:wrap;gap:.65rem;display:flex}}.skill-box{border:1px solid var(--color-border);background:var(--color-surface);flex-direction:column;align-items:center;gap:.45rem;width:92px;padding:.7rem .5rem .55rem;transition:border-color .15s,box-shadow .15s,transform .15s;display:flex;&:hover{border-color:var(--color-primary);box-shadow:0 0 16px color-mix(in srgb, var(--color-primary) 18%, transparent);transform:translateY(-2px)}& img{object-fit:contain;height:36px}& .skill-name{text-align:center;color:var(--color-muted-foreground);font-size:10px;line-height:1.3}&:hover .skill-name{color:var(--color-foreground)}}.boot-screen{z-index:90;color:var(--color-primary);font-family:var(--font-mono);background:#000;padding:8vh 8vw;position:fixed;inset:0;overflow:hidden;& .boot-log{white-space:pre-wrap;text-shadow:0 0 8px color-mix(in srgb, var(--color-primary) 45%, transparent);font-size:13px;line-height:1.7}}.help-dialog{z-index:30;width:100%;max-width:none;height:100%;max-height:none;color:inherit;background:#0000009e;border:0;margin:0;padding:1rem;position:absolute;inset:0;overflow:hidden;&[open]{justify-content:center;align-items:center;display:flex}&:focus,&:focus-visible{outline:none}& .help-dialog-panel{background:var(--color-surface);width:min(640px,100%);min-height:0;max-height:100%;color:var(--color-foreground);border:1px solid var(--color-border);box-shadow:0 0 8px color-mix(in srgb, var(--color-primary) 20%, transparent);flex-direction:column;display:flex;& pre{white-space:pre-wrap;flex:1;min-height:0;margin:0;padding:1rem 1.1rem 1.2rem;font-size:12px;line-height:1.65;overflow:auto}}& .help-dialog-bar{border-bottom:1px solid var(--color-border);color:var(--color-primary);background:var(--color-primary-surface);justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;display:flex;& button{color:var(--color-muted-foreground);font:inherit;cursor:pointer;background:0 0;border:0;&:hover{color:var(--color-primary)}}}& .man-name{color:var(--color-primary)}}@container (width<=900px){.hero-grid,.project-main{grid-template-columns:1fr}.profile-frame img{max-width:250px}.project-preview{border-right:0;border-bottom:1px solid var(--color-border)}.project-preview img{height:200px}}@media (width<=768px){.titlebar-meta,.resize-handles,#topbar,#sidebar{display:none}.desktop{--window-gap:0px}.terminal-window{border-left:0;border-right:0;border-radius:0}}@container (width<=768px){.term-section{justify-content:flex-start;padding:1.5rem 1rem 2rem}}@media (width<=520px){.command-row{font-size:12px}.neofetch-row{flex-direction:column}}@container (width<=520px){.hero-name{font-size:1.7rem}.skill-box{width:78px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.boot-screen{display:none}}
