/* Kuldeep Singh · Terminal portfolio — a macOS Terminal window */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { overflow: hidden; background: #0d0d14; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

:root {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --fg: #e7e7ea; --dim: #8e8e98; --bg: rgba(24,24,28,.94);
  --green: #5af78e; --blue: #57c7ff; --cyan: #9aedfe; --yellow: #f3f99d; --magenta: #ff6ac1; --red: #ff5c57; --android: #3ddc84;
  --ease: cubic-bezier(.32,.72,0,1);
}

/* desktop behind the window */
.desk {
  position: fixed; top: 0; left: 0; right: 0; height: 100%; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(255,140,90,.28), transparent 70%),
    radial-gradient(50% 50% at 92% 18%, rgba(214,48,140,.24), transparent 70%),
    radial-gradient(70% 60% at 8% 96%, rgba(40,90,255,.34), transparent 70%),
    radial-gradient(60% 60% at 96% 96%, rgba(120,60,255,.3), transparent 70%),
    #0d0d14;
}
.desk:has(.win.max) { padding: 8px; }

/* window */
.win {
  display: flex; flex-direction: column; width: min(980px, 100%); height: min(660px, 100%);
  border-radius: 12px; overflow: hidden; background: var(--bg);
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.35);
  transition: width .35s var(--ease), height .35s var(--ease), transform .4s var(--ease), opacity .3s;
}
.win.max { width: 100%; height: 100%; }
.win.min { transform: translateY(46vh) scale(.06); opacity: 0; pointer-events: none; }
.win.closing { transform: scale(.94); opacity: 0; }

.bar {
  position: relative; flex: none; height: 32px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#303035, #28282c); border-bottom: 1px solid rgba(0,0,0,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  user-select: none; -webkit-user-select: none;
}
.lights { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.light { position: relative; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3); }
.light.close { background: #ff5f57; }
.light.min { background: #febc2e; }
.light.max { background: #28c840; }
.light::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 -apple-system, system-ui, sans-serif; color: rgba(0,0,0,.55); opacity: 0; }
.light.close::after { content: '×'; font-size: 11px; }
.light.min::after { content: '−'; }
.light.max::after { content: '+'; }
.lights:hover .light::after { opacity: 1; }
.title { font-size: 13px; font-weight: 600; color: #b9b9c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 180px); }
.win.inactive .light { background: #4b4b50; }
.win.inactive .title { color: #7c7c84; }

/* terminal text */
.term {
  flex: 1; overflow-y: auto; padding: 10px 14px 14px; cursor: text; color: var(--fg); font: 14px/1.5 var(--mono);
  -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.term::-webkit-scrollbar { width: 10px; }
.term::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); background-clip: padding-box; border: 3px solid transparent; border-radius: 5px; }
#out > div, .line { min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.hang { padding-left: 4ch; text-indent: -2ch; }
::selection { background: rgba(87,199,255,.35); }
b { font-weight: 700; }
.g { color: var(--green); } .b { color: var(--blue); } .c { color: var(--cyan); } .y { color: var(--yellow); }
.m { color: var(--magenta); } .r { color: var(--red); } .d { color: var(--dim); }
.term a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(154,237,254,.4); text-underline-offset: 2px; }
.term a:hover { text-decoration-color: currentColor; }

.cursor { background: var(--fg); color: #1a1a1d; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { background: transparent; color: var(--fg); } }
.win.inactive .cursor { animation: none; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* neofetch */
.nf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 30px; padding: 2px 0 4px; white-space: normal !important; }
.nf .art { font: inherit; line-height: 1.15; color: var(--android); white-space: pre; }
.nf .info { flex: 1 1 34ch; min-width: 0; }
.nf .info > div { min-height: 1.5em; white-space: pre-wrap; }
.swatch { display: inline-block; width: 3ch; height: 1.2em; vertical-align: middle; }

/* quick-command row (touch screens) and the hidden input that receives keystrokes */
.keys { display: none; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #202024; border-top: 1px solid rgba(255,255,255,.06); }
.keys::-webkit-scrollbar { display: none; }
.keys button { flex: none; padding: 6px 12px; border-radius: 7px; background: #37373d; color: var(--fg); font: 13px var(--mono); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.keys button:active { background: #4c4c54; }
.cmd { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }

.dock {
  position: fixed; left: 50%; bottom: 20px; width: 58px; height: 58px; margin-left: -29px; border-radius: 14px;
  display: grid; place-items: center; color: var(--green); font: 700 18px var(--mono);
  background: linear-gradient(#3b3b41, #1d1d21); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), 0 12px 30px rgba(0,0,0,.5);
}
.noscript { position: fixed; left: 0; right: 0; top: 45%; text-align: center; color: #ccc; font: 15px var(--mono); }
.noscript a { color: var(--cyan); }

@media (max-width: 700px), (pointer: coarse) { .keys { display: flex; } }
@media (max-width: 700px) {
  .desk { padding: 0; }
  .win, .win.max { width: 100%; height: 100%; border-radius: 0; }
  .term { padding: 8px 10px 12px; font-size: 13px; }
  .nf .art { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .win { transition: none; }
}