:root{
  --bg:#050a06;
  --bg2:#040804;
  --fg:#b9ffb9;
  --fg2:#6bff6b;
  --muted:#6fbf6f;
  --line:rgba(107,255,107,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(107,255,107,.08), transparent 60%),
              radial-gradient(900px 700px at 90% 10%, rgba(107,255,107,.05), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.5;
}

a{color:var(--fg2)}
code{color:var(--fg2)}

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.terminal{
  max-width: 980px;
  margin: 48px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.terminal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.45);
}
.terminal__left{display:flex;align-items:center;gap:10px;min-width:0}
.terminal__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.terminal__dots{display:flex;gap:7px}
.dot{width:10px;height:10px;border-radius:999px;opacity:.9}
.dot--red{background:#ff5f56}
.dot--yellow{background:#ffbd2e}
.dot--green{background:#27c93f}
.terminal__title{color:var(--muted);font-size:12px;letter-spacing:.02em}
.terminal__crumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.terminal__clock{
  color: var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}
.crumb{
  color:var(--fg2);
  background:transparent;
  border:0;
  font:inherit;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crumb:hover{filter:brightness(1.15)}
.crumbsep{opacity:.7}

.menubar{
  display:flex;
  gap:2px;
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.35);
  position: relative;
  user-select:none;
}
.menubar__item{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.menubar__item:hover,
.menubar__item[aria-expanded="true"]{
  background: rgba(107,255,107,.08);
  outline:1px solid rgba(107,255,107,.14);
}

.dropdown{
  position:absolute;
  top: 40px;
  left: 8px;
  min-width: 240px;
  border:1px solid rgba(107,255,107,.18);
  border-radius:12px;
  background: rgba(0,0,0,.85);
  box-shadow: var(--shadow);
  padding:6px;
  z-index: 10;
}
.dropdown--sub{
  top: 0;
  left: calc(100% - 6px);
  min-width: 240px;
}
.dropdown__submenu{position:relative}
.dropdown__submenu:hover > .dropdown--sub{display:block}
.dropdown__submenu > .dropdown--sub{display:none}
.dropdown__item--submenu::after{
  content:"▸";
  margin-left:auto;
  opacity:.8;
}
.dropdown__sep{height:1px;background:rgba(107,255,107,.12);margin:6px 6px}
.dropdown__item{
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
  text-decoration:none;
  cursor:pointer;
}
.dropdown__item:hover{
  background: rgba(107,255,107,.10);
}
.dropdown__item code{color:var(--fg2)}

.terminal__screen{
  padding:16px 14px;
  min-height: 62vh;
  max-height: 70vh;
  overflow:auto;
  scrollbar-color: rgba(107,255,107,.30) rgba(0,0,0,.2);
}

.line{white-space:pre-wrap;word-break:break-word}
.line--muted{color:var(--muted)}
.line a{color:var(--fg2)}
.line code{color:var(--fg2)}
.cmdlink{
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:var(--fg2);
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset: 2px;
}
.cmdlink:hover{filter:brightness(1.12)}
.block{margin:10px 0;padding:10px 12px;border:1px dashed rgba(107,255,107,.22);border-radius:12px;background:rgba(0,0,0,.22)}

.ascii{
  margin:0;
  white-space:pre;
  color:var(--fg);
}

.embed{margin-top:10px}
.embed__meta{color:var(--muted);margin-bottom:8px}
.embed__iframe{width:100%;height:360px;border:1px solid rgba(107,255,107,.16);border-radius:12px}
.img__wrap{margin-top:10px;display:inline-block}
.img__wrap img{max-width:100%;height:auto;border:1px solid rgba(107,255,107,.16);border-radius:12px}

.lightbox{
  position:fixed;
  inset:0;
  z-index: 1000;
}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
}
.lightbox__panel{
  position:absolute;
  inset: 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.lightbox__close{
  align-self:flex-end;
  border:1px solid rgba(107,255,107,.22);
  background: rgba(0,0,0,.45);
  color: var(--fg2);
  font: inherit;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.lightbox__close:hover{background: rgba(0,0,0,.60)}
.lightbox__img{
  max-width: min(1200px, 96vw);
  max-height: 88vh;
  border-radius: 14px;
  border:1px solid rgba(107,255,107,.18);
  background: rgba(0,0,0,.2);
}

.prompt{
  display:flex;
  align-items:center;
  gap:0;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.45);
}
.prompt__lhs{color:var(--muted);margin-right:10px}
.prompt__buffer{
  min-width: 0;
  white-space: pre;
  color: var(--fg);
}
.prompt__input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  color:transparent;
  font: inherit;
  padding:0;
  caret-color: transparent;
  width: 1px;
  min-width: 1px;
  opacity: 0;
}
.cursor{
  width: 0.62em;
  height: 1.2em;
  background: var(--fg2);
  display:inline-block;
  border-radius: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: -0.15em;
}
@keyframes blink{ 50%{opacity:0} }

@media (max-width: 780px){
  .terminal{margin:18px 12px}
  .terminal__screen{min-height: 72vh}
}

/* Rainbow (hidden theme) */
@keyframes rainbowHue {
  0%{filter:hue-rotate(0deg) saturate(1.4)}
  100%{filter:hue-rotate(360deg) saturate(1.4)}
}

@keyframes rainbowBg {
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

html[data-theme="rainbow"] body{
  background: linear-gradient(120deg, #18001f, #001a2a, #001f12, #2a1b00, #250010);
  background-size: 300% 300%;
  animation: rainbowBg 10s ease-in-out infinite;
}

html[data-theme="rainbow"] .terminal{
  animation: rainbowHue 2.2s linear infinite;
  box-shadow: 0 18px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html[data-theme="rainbow"] .cursor{
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 22px rgba(255,255,255,.18);
}