@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Outfit:wght@500;600;700&display=swap");

:root{
  --bg:#07080f;
  --panel:#0c0e18;
  --ink:#e8ecff;
  --mute:#6d7594;
  --hot:#ff4d9d;
  --cyan:#5ce1c5;
  --gold:#ffd57a;
  --violet:#b59cff;
  --blue:#7eb8ff;
  --text:#e8ecff;
  --dim:#8b93b0;
  --sans:"Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pm-line:rgba(92,225,197,.28);
  --pm-accent:#5ce1c5;
  --pm-ink:#04110c;
  --line:1.7;
}

*{box-sizing:border-box}
html,body{
  height:100%;margin:0;color:var(--ink);font-family:var(--mono);
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,77,157,.12), transparent 58%),
    radial-gradient(800px 480px at 88% 100%, rgba(92,225,197,.09), transparent 55%),
    #080910;
}
#fx{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  animation:aurora 22s linear infinite;
}
.stage,.titlebar,.statusbar{position:relative;z-index:2}

.pane.editor{
  transform:perspective(1400px) rotateY(3deg);
  box-shadow:0 30px 80px -30px #000, 0 0 80px rgba(255,77,157,.08);
}
.pane.editor .code{
  text-shadow:0 0 18px rgba(92,225,197,.12);
}
body.is-exec .pane.editor{
  box-shadow:0 30px 80px -24px #000, 0 0 120px rgba(92,225,197,.22);
}
body.is-exec .live-badge{color:var(--cyan)}

@keyframes aurora{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(40deg)}
}

.titlebar{
  height:72px;display:flex;align-items:center;gap:14px;padding:0 16px 0 12px;
  background:rgba(10,12,22,.92);border-bottom:1px solid rgba(0,251,255,.22);
  backdrop-filter:blur(16px);position:relative;z-index:2;
}
.hh-brand{
  display:flex;align-items:center;gap:16px;text-decoration:none;min-width:0;
}
.hh-logo{
  display:block;height:58px;width:58px;flex:0 0 58px;
  object-fit:cover;object-position:center;
  border-radius:12px;
  filter:drop-shadow(0 0 14px rgba(0,251,255,.45)) drop-shadow(0 0 22px rgba(209,0,255,.28));
}
.hh-lockup{display:flex;flex-direction:column;gap:2px;min-width:0}
.hh-word{
  display:flex;align-items:baseline;gap:0;
  font:800 28px/.9 var(--sans);letter-spacing:.04em;
  white-space:nowrap;
}
.hh-word b{
  font-weight:800;font-style:normal;color:#00fbff;
  text-shadow:0 0 12px #00fbff, 0 0 28px rgba(0,251,255,.55);
}
.hh-word i{
  font-weight:800;font-style:normal;color:#e14bff;
  text-shadow:0 0 12px #d100ff, 0 0 28px rgba(209,0,255,.55);
}
.hh-tag{
  font:700 10px/1 var(--sans);letter-spacing:.34em;color:#9aa6c4;
  text-shadow:0 0 10px rgba(0,251,255,.25);
}
.hh-watermark{
  pointer-events:none;position:fixed;left:50%;top:54%;z-index:1;
  transform:translate(-50%,-50%);
  width:min(72vw, 640px);height:auto;opacity:.09;
  object-fit:contain;user-select:none;
}
.title-grow{flex:1;min-width:0}
.traffic{display:flex;gap:7px;padding:0 6px}
.traffic i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 -1px 1px #0006}
.traffic i:nth-child(1){background:#ff5f57}
.traffic i:nth-child(2){background:#febc2e}
.traffic i:nth-child(3){background:#28c840}
.nav-link{
  display:inline-flex;align-items:center;justify-content:center;
  color:#06241c;text-decoration:none;
  font:800 12px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;
  margin-right:14px;padding:9px 14px;border-radius:999px;
  background:linear-gradient(180deg,#7af8dc,#3ec9ad);
  border:1px solid #b8fff0;
  box-shadow:0 0 0 0 rgba(92,225,197,.7), 0 0 22px rgba(92,225,197,.65);
  text-shadow:0 0 6px rgba(255,255,255,.45);
  animation:notice 1.6s ease-in-out infinite;
}
.nav-link:hover{
  color:#04140f;
  filter:brightness(1.08);
  box-shadow:0 0 28px rgba(92,225,197,.9);
}
@keyframes notice{
  0%,100%{box-shadow:0 0 0 0 rgba(92,225,197,.55), 0 0 18px rgba(92,225,197,.55);transform:scale(1)}
  50%{box-shadow:0 0 0 8px rgba(92,225,197,0), 0 0 28px rgba(92,225,197,.85);transform:scale(1.04)}
}
.live-badge{
  display:flex;align-items:center;gap:8px;font:700 11px/1 var(--sans);
  letter-spacing:.2em;color:var(--hot);
}
.live-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--hot);
  box-shadow:0 0 12px var(--hot);animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35;transform:scale(.85)}}
#clock{font-size:12px;color:var(--mute);min-width:84px;text-align:right;font-variant-numeric:tabular-nums}

.stage{
  height:calc(100vh - 72px - 30px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:10px;padding:10px;position:relative;z-index:1;
}
.pane{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  background:linear-gradient(180deg,rgba(16,18,32,.92),rgba(8,10,18,.96));
  border:1px solid rgba(255,255,255,.07);border-radius:16px;
  box-shadow:0 24px 60px -28px #000, inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.pane-head{
  height:36px;display:flex;justify-content:space-between;align-items:center;
  padding:0 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);
}
.editor-body{flex:1;display:grid;grid-template-columns:56px 1fr 86px;min-height:0;overflow:hidden;position:relative}
.gutter{
  margin:0;padding:18px 10px;list-style:none;text-align:right;color:#3d4563;
  font-size:12px;line-height:var(--line);overflow:hidden;user-select:none;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent);
}
.gutter .cur{color:var(--cyan);font-weight:600}
.code{
  margin:0;padding:18px 8px 28px 14px;overflow:auto;
  font-size:13.5px;line-height:var(--line);color:#c9d1ef;
  position:relative;
}
.editor-body::before{display:none}
.gutter,.code,.minimap{position:relative;z-index:1}
.code .ln{min-height:calc(1em * var(--line));white-space:pre-wrap;word-break:break-word}
.code .ln.cur{
  background:linear-gradient(90deg,rgba(92,225,197,.08),transparent 80%);
  box-shadow:inset 3px 0 0 var(--cyan);border-radius:0 8px 8px 0;margin-left:-8px;padding-left:8px;
}
.code .kw{color:#ff7eb6;font-weight:500}
.code .fn{color:var(--cyan)}
.code .str{color:var(--gold)}
.code .cm{color:#5b6484;font-style:italic}
.code .var{color:var(--violet)}
.code .const{color:var(--blue);font-weight:500}
.code .num{color:#9cdcfe}
.code .op{color:#89ddff}
.code .caret{
  display:inline-block;width:7px;height:1.15em;background:var(--cyan);
  vertical-align:text-bottom;margin-left:1px;border-radius:1px;
  animation:blink .85s step-end infinite;box-shadow:0 0 14px var(--cyan);
}
@keyframes blink{50%{opacity:0}}

.minimap{
  display:flex;flex-direction:column;gap:3px;padding:16px 14px 16px 10px;
  background:rgba(0,0,0,.22);border-left:1px solid rgba(255,255,255,.05);
}
.minimap i{
  display:block;height:3px;border-radius:99px;background:#3a4260;opacity:.85;
}
.minimap i.c{background:#4a5270}
.minimap i.s{background:var(--gold)}
.minimap i.v{background:var(--violet)}
.minimap i.k{background:var(--cyan)}
.minimap i.cur{background:var(--hot);box-shadow:0 0 8px var(--hot)}

.form-scroll{flex:1;overflow:auto;padding:14px 14px 28px;scrollbar-width:thin}

.statusbar{
  height:30px;display:flex;align-items:center;gap:16px;padding:0 14px;
  background:linear-gradient(90deg,#ff4d9d,#7a5cff 45%,#5ce1c5);
  color:#12010a;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  position:relative;z-index:2;
}
.statusbar .grow{flex:1}
#mode{background:#12010a;color:var(--cyan);padding:4px 8px;border-radius:6px;font-family:var(--mono)}

@media(max-width:900px){
  .hh-logo{height:46px;width:46px;flex-basis:46px}
  .hh-word{font-size:20px}
  .hh-tag{letter-spacing:.22em;font-size:9px}
  .hh-watermark{width:80vw}
  .stage{grid-template-columns:1fr;grid-template-rows:46vh 1fr}
  .editor-body{grid-template-columns:44px 1fr 0}
  .minimap{display:none}
  html,body{overflow:auto}
  .stage{height:auto;min-height:calc(100vh - 88px)}
  .editor-body,.form-scroll{min-height:280px}
}