/* Double Trouble — terminal / dev-studio theme. No build, no framework.
   Self-hosted font, one small progressive-enhancement script (copy-email.js). */

@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root{
  --bg:#0b0e14; --panel:#11161f; --panel2:#0e131b; --line:#1e2733;
  --tx:#cdd5df; --tx2:#aab2bd; --mut:#7d8694;
  --green:#3fb950; --cyan:#56d4dd; --purple:#bc8cff; --yellow:#e3b341;
  --r:#ff5f56; --y:#ffbd2e; --g:#27c93f;
  --wrap:1180px;
  --font:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:28px}
:where(a,button):focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#04130a;padding:10px 14px;z-index:60}
.skip:focus{left:8px;top:8px}

/* ---- top bar ---- */
.bar{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);
  padding:12px 28px;background:rgba(11,14,20,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.logo{font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
.logo b{color:var(--green)}
.tabs{display:flex;gap:4px;margin-left:6px}
.tabs a{padding:5px 12px;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;
  color:var(--mut);font-size:12.5px}
.tabs a:hover{color:var(--tx)}
.tabs a.on{color:var(--tx);background:var(--panel)}
.status{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 8px var(--green);margin-right:6px;vertical-align:middle}

/* ---- hero terminal ---- */
.hero{padding:54px 0 32px}
.term{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 26px 64px -34px #000}
.term-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
.term-head i{width:12px;height:12px;border-radius:50%;display:inline-block}
.term-head .r{background:var(--r)}.term-head .y{background:var(--y)}.term-head .g{background:var(--g)}
.term-head .ttl{margin-left:8px;color:var(--mut);font-size:12.5px}
.term-body{padding:26px 30px 32px;font-size:15px;line-height:1.9}
.pr{color:var(--green)}.path{color:var(--cyan)}.cmd{color:#fff}.com{color:var(--mut)}
h1.big-out{display:block;font-size:clamp(25px,4.6vw,46px);line-height:1.16;color:#fff;
  font-weight:700;margin:10px 0 6px;letter-spacing:-.01em}
h1.big-out em{color:var(--purple);font-style:normal}
.cursor{display:inline-block;width:10px;height:1.05em;background:var(--green);
  vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- work ---- */
.work{padding-bottom:18px}
.work-head{color:var(--mut);font-size:13px;margin:46px 0 18px}
.work-head b{color:var(--green)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;list-style:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover{border-color:#33404f;transform:translateY(-3px)}
.chead{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--panel2)}
.chead i{width:10px;height:10px;border-radius:50%}
.chead .file{margin-left:6px;color:var(--mut);font-size:12.5px}
.chead .lang{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.shot{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#05070b}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.96;transition:opacity .2s}
.card:hover .shot img{opacity:1}
.cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.cbody .name{color:#fff;font-weight:700;font-size:17px}
.cbody .desc{color:var(--tx2);font-size:13.5px;line-height:1.55}
.cbody .desc::before{content:"// ";color:var(--mut)}
.cbody .run{margin-top:auto;color:var(--green);font-size:13px;width:fit-content}
.cbody .run .path{color:var(--cyan)}
.cbody .run:hover .path{text-decoration:underline}

/* ---- footer ---- */
footer{margin-top:46px;border-top:1px solid var(--line);background:var(--panel2);padding:48px 0 26px}
.ftitle{color:var(--mut);font-size:13px;margin-bottom:14px}
.mailline{font-size:clamp(18px,3.2vw,32px);color:#fff;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mailline .pr{color:var(--green)}
.mailline a.email{color:var(--cyan)}
.mailline a.email:hover{text-decoration:underline}
.copy-btn{font:inherit;font-size:12px;font-weight:500;line-height:1;color:var(--green);
  background:transparent;border:1px solid var(--line);border-radius:6px;padding:7px 11px;cursor:pointer;
  transition:background .15s,border-color .15s}
.copy-btn:hover{background:rgba(63,185,80,.1);border-color:var(--green)}
.copy-btn.is-copied{color:#04130a;background:var(--green);border-color:var(--green)}
.sbar{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:12px;color:var(--mut)}
.sbar b{color:var(--green)}

/* ---- responsive ---- */
@media (max-width:760px){
  .bar{padding:11px 18px;gap:10px}
  .tabs{display:none}
  .status{font-size:11.5px;gap:10px}
  .status .sep{display:none}
  .wrap{padding-inline:18px}
  .term-body{padding:20px 18px 26px;font-size:14px;line-height:1.8}
  .grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:420px){
  .status span.online-text{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .cursor{animation:none}
  .card:hover{transform:none}
}