@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap");
@import url("syntax-highlighting.css");

/* ================================
Theme Tokens (CLI / Terminal)
================================ */
:root{
/* Base */
--bg-color: #070A0F;
--panel-color: rgba(255,255,255,0.03);
--panel-border: rgba(255,255,255,0.12);

/* Text */
--main-color: #EAF2FF;
--text-color: rgba(234,242,255,0.78);
--muted-color: rgba(234,242,255,0.55);

/* Accents */
--alt-color: #7CFFB2;        /* neon green */
--alt2-color: #FF8C00;       /* neon orange */
--warn-color: #FFD479;
--danger-color: #FF6B8B;

/* Effects */
--glow: 0 0 18px rgba(124,255,178,0.22);
--glow-strong: 0 0 30px rgba(124,255,178,0.35);
--orange-glow: 0 0 22px rgba(255,140,0,0.35);
--shadow: 0 12px 32px rgba(0,0,0,0.5);

/* Misc */
--dash: rgba(255,255,255,0.18);
--light-alt-color: rgba(124,255,178,0.25);
}

/* ================================
Global
================================ */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
background-color: var(--bg-color);
color: var(--main-color);
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

margin: 0 auto;
width: 92%;
max-width: 820px;

line-height: 1.85em;
font-size: 0.95em;

background-image:
radial-gradient(900px 420px at 18% 8%, rgba(124,255,178,0.10), transparent 55%),
radial-gradient(900px 420px at 82% 12%, rgba(255,140,0,0.10), transparent 55%),
radial-gradient(700px 380px at 50% 92%, rgba(255,212,121,0.06), transparent 60%);
}

body.large{ font-size: 1.02em; line-height: 1.9em; }
.container{ margin-left:auto; margin-right:auto; }

p{
  overflow-wrap: anywhere;  /* or: break-word; */
  word-break: normal;
  white-space: normal;
}


@media only screen and (max-device-width: 500px){
*{ font-size:12px !important; }
}

/* ================================
Typography
================================ */
h1,h2,h3,h4,h5,h6{
margin: 0;
margin-top: 22px;
font-weight: 700;
color: var(--main-color);
letter-spacing: 0.25px;
}

h1{ font-size: 1.35em; }
h2{ font-size: 1.18em; }
h3{ font-size: 1.05em; }

p,ul,ol{ font-size:1em; color: var(--text-color); }
b,strong{ color: var(--main-color); }
.primary-text{ color: var(--main-color); }

.invert{
color: var(--bg-color);
background-color: var(--alt-color);
padding: 1px 6px;
border-radius: 6px;
box-shadow: var(--glow);
}

/* ================================
Links
================================ */
a{
color: var(--alt-color);
text-decoration: none;
border-bottom: 1px solid rgba(124,255,178,0.45);
padding-bottom: 1px;
transition: all 120ms ease;
}

a:hover{
color: var(--bg-color);
background-color: var(--alt-color);
border-bottom-color: transparent;
box-shadow: var(--glow-strong);
border-radius: 6px;
padding: 1px 6px;
}

/* ================================
Header / Navigation (Single Line)
================================ */
header{ margin-top:22px; margin-bottom:14px; }

.menu{
border-top: 1px dashed var(--dash);
border-bottom: 1px dashed var(--dash);
margin-bottom: 26px;

background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
box-shadow: var(--shadow);
border-radius: 14px;
padding: 2px 12px;
}

.menu ul{
margin: 10px 0;
padding: 0;
list-style: none;

display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;

white-space: nowrap;
overflow-x: auto;
}

.menu ul li{
display: inline-flex;
align-items: center;
}

.menu ul li a{
color: var(--muted-color);
text-decoration: none;
border-bottom: 0;
padding: 3px 8px;
border-radius: 10px;
transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.menu ul li a:hover{
color: var(--main-color);
background-color: rgba(255,140,0,0.12);
box-shadow: 0 0 0 1px rgba(255,140,0,0.25), var(--orange-glow);
}

.menu ul li.page_title{
margin-right: auto;
font-weight: 700;
color: var(--main-color);
position: relative;
padding-left: 18px;
flex-shrink: 0;
}

.menu ul li.page_title::before{
content: "❯";
position: absolute;
left: 0;
color: var(--alt-color);
text-shadow: var(--glow);
}

/* ================================
Lists (non-menu)
================================ */
:not(.menu) > ul{ list-style:none; padding-left:1.2em; }

ul :not(.menu) > ul{
list-style:none;
padding-left:2.2em;
margin-top:0.5em;
margin-bottom:0.7em;
}

:not(.menu) > ul > li:before{
content:"•";
color: var(--alt2-color);
margin-right:10px;
text-shadow: var(--orange-glow);
}

ul :not(.menu) > ul > li:before{
content:"◦";
color: var(--alt-color);
margin-right:10px;
text-shadow: var(--glow);
}

/* ================================
Footer
================================ */
footer{
color: var(--muted-color);
border-top: 1px dashed var(--dash);
margin: 24px auto 20px;
padding-top: 12px;
text-align: right;
background: rgba(255,255,255,0.01);
}

/* ================================
Images
================================ */
img.home_header, img.detail_header{
width:100%;
border-radius:14px;
box-shadow: var(--shadow);
}

img{ filter: saturate(1.05) contrast(1.05); }

/* ================================
Error Box
================================ */
div.error_box{ margin:100px; text-align:center; }
div.error_box h1{ font-size:2em; }

/* ================================
Selection
================================ */
*::selection{
background-color: var(--light-alt-color);
color: #06110B; }