/* =======================================================
COMPONENT : GLOBAL
======================================================= */

:root{
      --bg:#050b15;
      --bg2:#09111e;
      --panel:#0d1726;
      --panel2:#101b2c;
      --line:#26384f;
      --line2:#1c2a3d;
      --text:#eaf1ff;
      --muted:#9aa8bf;
      --muted2:#7c8ea8;
      --accent:#6aa5ff;
      --accent2:#8cc4ff;
      --good:#7be0b4;
      --warn:#ffd36d;
      --shadow:0 28px 70px rgba(0,0,0,.42);
      --radius:22px;
      --radius2:28px;
      --max:1560px;
      --header-h:70px;
    }*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* =======================================================
COMPONENT : GLOBAL BODY
======================================================= */
.system-log-dropdown {
  background: transparent;
  border: none;
  font-family: monospace;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  margin: 25px 0;
  text-align: right;
}

.system-log-dropdown summary {
  list-style: none;
  display: inline-block;
  font-weight: bold;
  color: #4af7ff;
  outline: none;
  border: 1px solid #333;
  background: #0b0f19;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.system-log-dropdown summary::-webkit-details-marker {
  display: none;
}

.system-log-dropdown .dropdown-content {
  margin-top: 15px;
  padding: 15px;
  background: #0b0f19;
  border: 1px solid #222;
  border-top: 2px solid #4af7ff;
  border-radius: 6px;
  line-height: 1.6;
  color: #aaa;
  text-align: left;
}

.system-log-dropdown .dropdown-title {
  color: #ffdeb3;
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 12px;
}

.system-log-dropdown .system-log {
  background: #0b0f19;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #ff3366;
  font-family: monospace;
  font-size: 11px;
  color: #aaa;
  line-height: 1.5;
}

.system-log-dropdown .danger {
  color: #ff4a4a;
}

.system-log-dropdown .accent {
  color: #4af7ff;
  font-weight: bold;
}

.system-log-dropdown .update {
  color: #ff3366;
  font-weight: bold;
}

/* =======================================================
COMPONENT : BASE LINKS
======================================================= */

a{color:inherit;text-decoration:none}
/* =======================================================
COMPONENT : PAGE SHELL
======================================================= */

.page{
  width:min(var(--max), calc(100vw - 28px));
  margin:0 auto;
  padding:10px 0 26px;
}

/* =======================================================
COMPONENT : HEADER / TOPBAR
======================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px);
  background:linear-gradient(180deg, rgba(4,9,16,.9), rgba(4,9,16,.55));
  border-bottom:1px solid rgba(98,140,194,.12);
}

.topbar-inner{
  width:min(var(--max), calc(100vw - 28px));
  margin:0 auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:#deebff;
  white-space:nowrap;
}

.brand .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d7e7ff, #5ea0ff 55%, #265ab1 100%);
  box-shadow:0 0 22px rgba(94,160,255,.55);
  flex:0 0 auto;
}

.brand strong{
  font-size:18px;
  letter-spacing:.01em;
}

.brand small{
  margin-left:8px;
  color:var(--muted);
  font-size:12px;
}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
  color:#d9e4f6;
  font-size:14px;
}

.nav a{
  opacity:.84;
  transition:.18s ease;
}

.nav a:hover{
  opacity:1;
  color:#fff;
}

.chip{
  padding:10px 14px;
  border:1px solid rgba(115,146,188,.28);
  border-radius:999px;
  color:#d6def0;
  background:rgba(10,16,28,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  font-size:13px;
  white-space:nowrap;
}

/* =======================================================
COMPONENT : HERO
======================================================= */

.hero{
  margin-top:12px;
  border-radius:30px;
  border:1px solid rgba(95,129,177,.16);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,17,29,.82), rgba(7,12,20,.95));
  box-shadow:var(--shadow);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(330px, 460px) 1fr 300px;
  min-height:620px;
}

.hero-left{
  padding:42px 34px 34px;
  border-right:1px solid rgba(112,146,196,.12);
  background:linear-gradient(180deg, rgba(7,13,22,.96), rgba(8,13,20,.74));
}

.eyebrow{
  margin:0 0 16px;
  color:var(--accent);
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

h1{
  margin:0;
  font-size:clamp(40px, 4.8vw, 68px);
  line-height:.96;
  letter-spacing:-.04em;
}

.title-accent{
  display:block;
  margin-top:8px;
  color:#77aeff;
}

.lede{
  margin-top:24px;
  color:#dbe5f7;
  font-size:17px;
  line-height:1.95;
  max-width:34ch;
}

.lede .small{
  display:block;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
}

.hero-actions{
  margin-top:30px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:210px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(122,165,255,.5);
  background:linear-gradient(180deg, rgba(17,32,55,.95), rgba(12,21,38,.96));
  color:#eef4ff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(69,126,220,.12);
}

.btn.secondary{
  min-width:160px;
  border-color:rgba(113,141,185,.34);
  background:linear-gradient(180deg, rgba(14,23,39,.9), rgba(10,17,29,.95));
  color:#cfe0ff;
}

.hero-visual{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 340px at 34% 26%, rgba(121,167,255,.14), transparent 60%),
    radial-gradient(540px 280px at 74% 22%, rgba(133,200,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(14,24,40,.32), rgba(5,10,18,.96));
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,10,18,.02), rgba(5,10,18,.6)),
    radial-gradient(120px 120px at 86% 28%, rgba(255,212,160,.33), transparent 62%);
  pointer-events:none;
}

.floating-panel{
  position:absolute;
  left:34px;
  right:34px;
  top:24px;
  bottom:18px;
  border-radius:24px;
  border:1px solid rgba(116,151,202,.18);
  background:
    radial-gradient(1000px 420px at 50% 26%, rgba(88,130,206,.16), transparent 56%),
    linear-gradient(180deg, rgba(12,17,27,.18), rgba(4,8,14,.64));
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 24px 40px rgba(0,0,0,.24);
  overflow:hidden;
}

.floating-panel .tag{
  position:absolute;
  top:14px;
  left:14px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(4,9,16,.72);
  border:1px solid rgba(121,164,227,.2);
  color:#d7e8ff;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  z-index:5;
}

.floating-panel .hint{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  color:#b9c7de;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  background:
    radial-gradient(circle at 50% 30%, rgba(97,140,214,.18), transparent 42%),
    linear-gradient(180deg, rgba(16,26,40,.18), rgba(4,8,14,.65));
}

/* =======================================================
COMPONENT : STATUS PANEL
======================================================= */

.status{
  padding:22px 18px;
  border-left:1px solid rgba(112,146,196,.12);
  background:linear-gradient(180deg, rgba(6,12,20,.9), rgba(8,13,21,.95));
}

.status-card{
  margin-top:120px;
  padding:20px 18px 18px;
  border-radius:18px;
  background:rgba(12,18,29,.84);
  border:1px solid rgba(112,146,196,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.status-card h2{
  margin:0;
  font-size:20px;
  letter-spacing:.04em;
}

.status-card p{
  margin:10px 0 0;
  color:#b4c4dc;
  font-size:13px;
  line-height:1.8;
}

.rule{
  height:1px;
  margin:16px 0 14px;
  background:rgba(98,132,178,.2);
}

.status-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#dce7fb;
}

.pulse{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#69a8ff;
  box-shadow:0 0 18px rgba(105,168,255,.72);
  flex:0 0 auto;
}

/* =======================================================
COMPONENT : SECTION FRAME
======================================================= */

.section{
  margin-top:12px;
  border:1px solid rgba(90,126,175,.18);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(10,17,29,.82), rgba(8,13,22,.94));
  box-shadow:var(--shadow);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding:22px 22px 0;
}

.section-head .left{
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section-head .right{
  color:#dbe5f7;
  font-size:16px;
}

/* =======================================================
COMPONENT : EDITOR WRAP
======================================================= */

.editor-wrap{
  padding:24px;
  background:linear-gradient(180deg, rgba(10,17,29,.9), rgba(7,12,19,.96));
}

/* =======================================================
COMPONENT : EDITOR WINDOW
======================================================= */

.editor-window{
  border-radius:24px;
  border:1px solid rgba(112,146,196,.18);
  overflow:hidden;
  background:rgba(7,12,20,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* =======================================================
COMPONENT : EDITOR TOP
======================================================= */

.editor-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(112,146,196,.16);
  background:linear-gradient(180deg, rgba(19,26,40,.92), rgba(11,16,27,.92));
}

.window-dots{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}

.dot-red,.dot-yellow,.dot-green{
  width:12px;
  height:12px;
  border-radius:50%;
}
.dot-red{background:#ff5f57}
.dot-yellow{background:#febc2e}
.dot-green{background:#28c840}

.editor-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#dfe9ff;
  font-size:13px;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.editor-title strong{
  font-weight:700;
}

.editor-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  color:#92a4c0;
  font-size:12px;
  letter-spacing:.08em;
}

/* =======================================================
COMPONENT : EDITOR SHELL
======================================================= */

.editor-shell{
  display:grid;
  grid-template-columns:74px 1fr 290px;
  min-height:620px;
}

/* =======================================================
COMPONENT : GUTTER
======================================================= */

.gutter{
  border-right:1px solid rgba(112,146,196,.12);
  background:linear-gradient(180deg, rgba(10,15,24,.86), rgba(7,11,18,.94));
  color:#60708a;
  padding:18px 0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  line-height:2.15;
  text-align:right;
  user-select:none;
}

.gutter span{
  display:block;
  padding-right:16px;
}

/* =======================================================
COMPONENT : CODE AREA
======================================================= */

.code-area{
  padding:18px 18px 22px;
  background:
    linear-gradient(180deg, rgba(11,16,27,.92), rgba(7,11,18,.96)),
    radial-gradient(900px 420px at 40% 20%, rgba(91,136,217,.08), transparent 58%);
  overflow:hidden;
  position:relative;
}

.code-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0, rgba(255,255,255,.02) 50%, transparent 100%);
  pointer-events:none;
  opacity:.45;
}

.code{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:16px;
  line-height:1.95;
  color:#e8f0ff;
  position:relative;
  z-index:2;
}

.token-tag{ color:#7fb5ff; }
.token-attr{ color:#8ce6c6; }
.token-string{ color:#ffd98e; }
.token-comment{ color:#7890b2; }
.token-keyword{ color:#d9a6ff; }
.token-fn{ color:#9ee0ff; }
.cursor{
  display:inline-block;
  width:10px;
  height:1.05em;
  vertical-align:-.16em;
  background:#9dc3ff;
  box-shadow:0 0 12px rgba(157,195,255,.55);
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}

@keyframes blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

/* =======================================================
COMPONENT : PREVIEW
======================================================= */

.preview{
  border-left:1px solid rgba(112,146,196,.12);
  background:linear-gradient(180deg, rgba(8,13,21,.92), rgba(7,11,18,.98));
  display:flex;
  flex-direction:column;
}

/* =======================================================
COMPONENT : PREVIEW HEAD
======================================================= */

.preview-head{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(112,146,196,.12);
}

.preview-head .label{
  color:#7ea9ff;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.preview-head h3{
  margin:10px 0 0;
  font-size:18px;
  line-height:1.45;
}

/* =======================================================
COMPONENT : PREVIEW BODY
======================================================= */

.preview-body{
  padding:16px;
  display:grid;
  gap:12px;
}

/* =======================================================
COMPONENT : MINI BOX
======================================================= */

.mini-box{
  border:1px solid rgba(112,146,196,.18);
  border-radius:16px;
  background:rgba(12,18,30,.72);
  padding:14px;
}

.mini-box .key{
  color:#7faaff;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
  font-weight:700;
}

.mini-box .value{
  color:#e7eefc;
  line-height:1.85;
  font-size:14px;
}

/* =======================================================
COMPONENT : MINI LINKS
======================================================= */

.mini-links{
  display:grid;
  gap:10px;
}

/* =======================================================
COMPONENT : MINI LINK
======================================================= */

.mini-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(112,146,196,.18);
  background:rgba(10,16,26,.72);
  color:#eaf1ff;
  font-size:13px;
  transition:.18s ease;
}

.mini-link:hover{
  border-color:rgba(124,168,255,.42);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(124,168,255,.12), 0 16px 28px rgba(0,0,0,.22);
}

.mini-link .label{
  color:#7ea9ff;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:6px;
}

.mini-link .title{
  font-size:14px;
  line-height:1.45;
  font-weight:700;
}

.mini-link .arrow{
  color:#9cc1ff;
  font-size:20px;
  font-weight:700;
  flex:0 0 auto;
}

/* =======================================================
COMPONENT : READING
======================================================= */

.reading{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:12px;
  padding:24px;
  background:linear-gradient(180deg, rgba(10,17,29,.9), rgba(7,12,19,.96));
}

/* =======================================================
COMPONENT : READING PANELS
======================================================= */

.reading-main,
.reading-side{
  background:linear-gradient(180deg, rgba(10,17,29,.9), rgba(7,12,19,.96));
  border:1px solid rgba(112,146,196,.18);
  border-radius:22px;
  overflow:hidden;
}

.reading-main{
  padding:24px;
  min-height:520px;
}

.reading-side{
  padding:20px;
  min-height:520px;
}

/* =======================================================
COMPONENT : CHAPTER LABEL
======================================================= */

.chapter-label{
  color:#7ea9ff;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
}

/* =======================================================
COMPONENT : CHAPTER TITLE
======================================================= */

.chapter-title{
  margin:12px 0 0;
  font-size:28px;
  line-height:1.35;
  letter-spacing:-.03em;
}

/* =======================================================
COMPONENT : CHAPTER STATE
======================================================= */

.chapter-state{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(18,26,41,.8);
  border:1px solid rgba(122,159,210,.16);
  color:#d6e3fb;
  font-size:13px;
  letter-spacing:.04em;
}

.chapter-state .bar{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 16px rgba(123,224,180,.5);
  flex:0 0 auto;
}

/* =======================================================
COMPONENT : CHAPTER BODY
======================================================= */

.chapter-body{
  margin-top:24px;
  color:#edf3ff;
  line-height:2.15;
  font-size:16px;
  max-width:58ch;
}

.chapter-body p{
  margin:0 0 1.35em;
}

/* =======================================================
COMPONENT : SCENE BREAK
======================================================= */

.scene-break{
  margin:30px 0;
  padding:18px 18px 16px;
  border-left:3px solid rgba(122,168,255,.6);
  background:linear-gradient(90deg, rgba(96,144,220,.08), transparent);
  border-radius:12px;
  color:#dbe8ff;
}

.scene-break .reading-text{
  color:#7ea9ff;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:10px;
}

.scene-break .line{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:20px;
  letter-spacing:.08em;
}

/* =======================================================
COMPONENT : NEXT NAVIGATION
======================================================= */

.next-area{
  margin-top:22px;
  display:grid;
  gap:10px;
}

.next-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(112,146,196,.18);
  border-radius:16px;
  background:rgba(12,18,30,.72);
  transition:.18s ease;
}

.next-link:hover{
  border-color:rgba(124,168,255,.42);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(124,168,255,.12), 0 16px 28px rgba(0,0,0,.22);
}

.next-link .label{
  color:#7ea9ff;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:7px;
}

.next-link .title{
  font-size:15px;
  font-weight:700;
  line-height:1.45;
}

.next-link .arrow{
  color:#9cc1ff;
  font-size:20px;
  font-weight:700;
  flex:0 0 auto;
}

/* =======================================================
COMPONENT : CHAPTER CARDS
======================================================= */

.chapters{
  display:grid;
  gap:12px;
}

/* =======================================================
COMPONENT : CHAPTER CARD
======================================================= */

.chapter-card{
  border:1px solid rgba(112,146,196,.18);
  border-radius:16px;
  background:rgba(12,18,30,.72);
  overflow:hidden;
}

.chapter-card .head{
  padding:12px 14px;
  border-bottom:1px solid rgba(112,146,196,.12);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.chapter-card .head .no{
  color:#7ea9ff;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.chapter-card .head .state{
  font-size:12px;
  color:#b8c7e1;
}

.chapter-card .body{
  padding:14px;
  color:#e8f0ff;
  line-height:1.85;
  font-size:14px;
}

.chapter-card .body a{
  display:inline-flex;
  margin-top:10px;
  color:#9cc1ff;
  font-weight:700;
  letter-spacing:.04em;
}

/* =======================================================
COMPONENT : ARCHIVE / META
======================================================= */

.meta{
  margin-top:12px;
  padding:24px;
  background:linear-gradient(180deg, rgba(10,17,29,.9), rgba(7,12,19,.96));
}

.meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

.meta-card{
  border:1px solid rgba(112,146,196,.18);
  border-radius:18px;
  background:rgba(12,18,30,.72);
  padding:18px;
  min-height:180px;
}

.meta-card h3{
  margin:0;
  font-size:18px;
  letter-spacing:.03em;
}

.meta-card p{
  margin:12px 0 0;
  color:#c6d2e7;
  line-height:2;
  font-size:14px;
}

/* =======================================================
COMPONENT : TAG LIST
======================================================= */

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.tag{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(13,21,35,.68);
  border:1px solid rgba(112,146,196,.18);
  color:#dde7f8;
  font-size:12px;
}

/* =======================================================
COMPONENT : MINI CONSOLE
======================================================= */

.mini-console{
  margin-top:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(112,146,196,.18);
  background:rgba(8,14,24,.8);
  color:#c8d4e9;
  font-size:13px;
  line-height:1.7;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height:96px;
}

/* =======================================================
COMPONENT : FOOTER
======================================================= */

.footer{
  margin-top:12px;
  padding:24px;
  background:linear-gradient(180deg, rgba(8,13,20,.94), rgba(6,10,16,.98));
}

/* =======================================================
COMPONENT : FOOTER GRID
======================================================= */

.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr 1fr;
  gap:24px;
}

/* =======================================================
COMPONENT : FOOTER COLUMNS
======================================================= */

.footer-col{
  padding-right:22px;
  border-right:1px solid rgba(112,146,196,.12);
}

.footer-col:last-child{
  border-right:0;
  padding-right:0;
}

.footer-col h4{
  margin:0 0 16px;
  color:#d8e4f7;
  font-size:18px;
  font-weight:700;
}

.footer-col p{
  margin:0;
  color:#c3d0e7;
  line-height:2;
  font-size:14px;
}

/* =======================================================
COMPONENT : QUICK LINKS
======================================================= */

.quick-links{
  display:grid;
  gap:10px;
}

.quick-links a{
  color:#d9e4f8;
  font-size:14px;
  opacity:.9;
}

/* =======================================================
COMPONENT : FOOTER BOTTOM
======================================================= */

.footer-bottom{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#7b8ca8;
  font-size:12px;
  border-top:1px solid rgba(112,146,196,.12);
  padding-top:14px;
  flex-wrap:wrap;
}

/* =======================================================
COMPONENT : SOCIALS
======================================================= */

.socials{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* =======================================================
COMPONENT : SOCIAL
======================================================= */

.social{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(112,146,196,.18);
  background:rgba(12,18,30,.7);
  color:#eef4ff;
  font-weight:700;
  font-size:14px;
}

/* =======================================================
COMPONENT : RESPONSIVE 1180
======================================================= */

@media (max-width:1180px){
  .nav{display:none}
  .hero-grid{grid-template-columns:1fr}
  .hero-left{
    border-right:0;
    border-bottom:1px solid rgba(112,146,196,.12);
  }
  .status{
    border-left:0;
    border-top:1px solid rgba(112,146,196,.12);
  }
  .status-card{margin-top:20px}
  .editor-shell,
  .reading,
  .meta-grid,
  .footer-grid{
    grid-template-columns:1fr;

  }
  .editor-shell{min-height:auto}
  .gutter{display:none}
  .preview{
    border-left:0;
    border-top:1px solid rgba(112,146,196,.12);
  }
  .reading-main,
  .reading-side{
    min-height:auto;
  }
  .footer-col{
    border-right:0;
    padding-right:0;
  }


  }

/* =======================================================
COMPONENT : RESPONSIVE 720
======================================================= */

@media (max-width:720px){
  .page, .topbar-inner{width:calc(100vw - 20px)}
  .brand small{display:none}
  .chip{display:none}
  h1{font-size:40px}
/* =======================================================
COMPONENT : RESPONSIVE 720
======================================================= */

@media (max-width:720px){
  .page, .topbar-inner{width:calc(100vw - 20px)}
  .brand small{display:none}
  .chip{display:none}
  h1{font-size:40px}
  .hero-left{padding:26px 20px 22px}
  .btn{width:100%;min-width:0}
  .btn.secondary{width:100%}

  .section-head{
    padding-inline:18px;
    flex-direction:column;
    align-items:flex-start;
  }

  .editor-wrap,
  .reading,
  .meta,
  .footer{
    padding:18px;
  }

  .editor-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .editor-title{
    white-space:normal;
  }

  .code{font-size:14px}
  .chapter-title{font-size:22px}

  .floating-panel .tag,
  .floating-panel .hint{
    display:none;
  }
}


/* =======================================================
COMPONENT : NOVEL
======================================================= */
}

/* =======================================================
COMPONENT : .room-sub 
======================================================= */

.room-sub {
  font-size: 0.85rem;       /* 上のTHE FOUNDING STORYと同じか少し小さめ */
  color: #63b3ed;           /* 検索くんの青色に合わせる（例） */
  letter-spacing: 0.1em;    /* 文字の間隔を広げてテック感を出す */
  margin-top: 10px;         /* タイトルとの隙間 */
  margin-bottom: 20px;      /* 下のキャッチコピーとの隙間 */
  text-transform: uppercase; /* 強制的に大文字にする */
}


/* =======================================================
COMPONENT : system-log-dropdown 開閉システムだけ
======================================================= */


.system-log-dropdown {
    margin: 0;
    text-align: right;
}

.system-log-button {
    list-style: none;
    display: inline-block;
    font-weight: bold;
    color: #4af7ff;
    border: 1px solid #333;
    background: #0b0f19;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    letter-spacing: .5px;
}

.system-log-button::-webkit-details-marker {
    display: none;
}

.system-log-content {
    margin-top: 15px;
}


.system-log-content{
    margin-top:15px;
    padding:0;
    background:transparent;
    border:none;
}




/* =======================================================
COMPONENT : .novel-loading-area {
======================================================= */

/* 小説の記事内に部分的に作る、ローディング専用の枠 */
.novel-loading-area {
  background-color: transparent;
  color: #ffffff;
  font-family: sans-serif;
  padding: 40px 20px;
  margin: 20px 0;
  border-radius: 8px;

  /* 縦並びを「絶対に」維持する設定 */
  display: flex;
  flex-direction: column !important; /* 強制的に縦に並べる */
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 横幅の計算が狂うのを防ぐ */
  width: 100%; /* 横幅は親要素（小説の幅）に合わせる */
}

/* くるくる回るスピナーの土台（○） */
.novel-spinner {
  position: relative;
  width: 60px;
  height: 60px;

  /* 周りから潰されないようにサイズを固定するお守り */
  flex-shrink: 0 !important; 

  border: 6px solid #333333;
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  margin: 0 auto 15px auto; /* 確実に真ん中に置く */

  /* アニメーションを適用 */
  animation: novel-spin-anime 1.2s linear infinite;
}

/* アニメーション名 */
@keyframes novel-spin-anime {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 「Now Loading...」の文字 */
.novel-loading-text {
  font-size: 18px;
  letter-spacing: 2px;
  margin: 0;
  font-weight: bold;

  /* 文字も横に潰されないように固定 */
  flex-shrink: 0 !important; 
}

/* Complete表示 */
.novel-loading-text.complete {
  color: #ffffff;
  letter-spacing: 1px;
}

.novel-spinner.complete {
  animation: none;
  border: 6px solid #4caf50;
}


/* =======================================================
COMPONENT : .mini-video
======================================================= */

.mini-video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 8px; /* お好みで */
}

/* =======================================================
COMPONENT : リンクのしたに出る線けす
======================================================= */



a{
    text-decoration:none;
}



/* =======================================================
COMPONENT : 死んだ改行をなおさ
======================================================= */

.novel{
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.95;
    color: #e8f0ff;
    font-size: 16px;
}