/* paprika-dream: scroll story (no external references) */

:root{
  --fg: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);

  --panel: rgba(0,0,0,.42);
  --panel2: rgba(0,0,0,.22);

  --r: 22px;
  --shadow: 0 22px 80px rgba(0,0,0,.45);
  --neonG: rgba(0,255,140,.86);
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  background:#000;
  overflow-x:hidden;
}

/* Fixed background layers */
.bgLayer{
  position:fixed;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition: opacity 520ms ease;
  will-change: opacity;
  pointer-events:none;
}
.bgLayer.on{ opacity:1; }

/* Readability overlay (keeps image visible) */
.bgLayer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 30% 22%, rgba(0,0,0,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.33));
}

/* Topbar */
.topbar{
  position:fixed;
  z-index:10;
  top:14px;
  left:14px;
  right:14px;

  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:12px;

  padding:10px 12px 12px;
  border:1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0 }
.dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,80,140,.95));
  box-shadow: 0 0 18px rgba(255,80,140,.20);
}
.brandText{ min-width:0 }
.brandName{ font-weight:700; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brandMeta{ font-size:12px; opacity:.65; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.navlink{
  text-decoration:none;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  letter-spacing:.04em;

  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.navlink:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.08); }
.navlink:active{ transform: translateY(0px) scale(.99); }
.navlink.ghost{ background: transparent; }

/* now + progress */
.status{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right: 8px;
  white-space:nowrap;
}
.statusLabel{
  font-size: 11px;
  opacity: .6;
  letter-spacing:.12em;
  text-transform: uppercase;
}
.statusName{ font-weight:650; letter-spacing:.04em; opacity:.9; }
.progress{
  grid-column: 1 / -1;
  height: 2px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow:hidden;
}
.progressBar{ height:100%; width:0%; background: rgba(255,255,255,.55); }

/* Stack */
.stack{
  position:relative;
  z-index:2;
  padding-top: 92px; /* topbar space */
}

.scene{
  min-height: 110vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 58px 16px;
}
.scene-tight{ min-height: 92vh; }

.panel{
  width: min(980px, 100%);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border-radius: var(--r);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
}

.kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: 12px;
  opacity: .75;
  letter-spacing: .12em;
  text-transform: lowercase;
  margin-bottom: 10px;
}

.h1{ margin:0 0 12px; font-size: clamp(30px, 4vw, 56px); letter-spacing:.01em; }
.h2{ margin:0 0 10px; font-size: clamp(22px, 3vw, 36px); letter-spacing:.01em; }
.sub{ margin:0; color:var(--muted); line-height:1.75 }
.note{ margin: 14px 0 0; color: rgba(255,255,255,.58); font-size: 13px; line-height:1.7 }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: .95em;
  padding: .05em .35em;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

/* Home preview grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top: 16px;
}
.thumb{
  position:relative;
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  transform: translateZ(0);
  text-decoration:none;
}
.thumb img{
  display:block;
  width:100%;
  height:140px;
  object-fit: cover;
  opacity:.92;
  transition: transform .22s ease, opacity .22s ease;
}
.thumb:hover img{ transform: scale(1.03); opacity:1; }
.cap{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: lowercase;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  padding: 10px 14px;
}
.btn:hover{ border-color: rgba(255,255,255,.22); }
.btn.primary{
  border-color: rgba(255,80,140,.30);
  background: linear-gradient(180deg, rgba(255,80,140,.16), rgba(120,220,255,.08));
}
.btn.ghost{ background: transparent; }
.foot{ margin-top: 16px; }
.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

/* Clinical record */
.panel.clinical{
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.26));
  border-color: rgba(0,255,140,.20);
}
.record{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border:1px solid rgba(0,255,140,.18);
  background: rgba(0,0,0,.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
  position: relative;
  overflow:hidden;
}
.record::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(0,255,140,.06) 0 1px, transparent 1px 5px);
  opacity:.55;
  pointer-events:none;
}
.row{ position:relative; }
.row.spacer{ height: 10px; }
.key{ color: var(--neonG); letter-spacing:.08em; }

/* Scene split */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.box{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.boxTitle{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: 12px;
  opacity: .75;
  letter-spacing: .12em;
  text-transform: lowercase;
  margin-bottom: 6px;
}
.boxText{ margin:0; color: rgba(255,255,255,.74); line-height:1.75 }

/* Profile mono */
.mono{
  margin-top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  line-height: 1.8;
}

/* Dream log */
.logGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.logBox{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.lbl{
  display:block;
  margin-top: 10px;
  font-size: 12px;
  opacity:.75;
  letter-spacing:.08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
.inp, .ta{
  width:100%;
  margin-top: 6px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
  padding: 10px 12px;
  outline:none;
}
.ta{ resize: vertical; min-height: 140px; }
.inp:focus, .ta:focus{ border-color: rgba(255,255,255,.24); }

.btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.entries{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.entry{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
}
.entryTitle{ font-weight:700; letter-spacing:.04em; }
.entryMeta{
  margin-top: 4px;
  font-size: 12px;
  opacity:.65;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
.entryText{
  margin-top: 8px;
  color: rgba(255,255,255,.76);
  line-height:1.75;
  white-space: pre-wrap;
}

/* Radio */
.panel.radio{
  border-color: rgba(120,220,255,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.24));
}
.radioCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.radioCol{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  padding: 14px;
}
.linkList{ margin: 10px 0 0; padding-left: 18px; color: rgba(255,255,255,.78); line-height:1.9; }
.dim{ opacity:.55; }

/* Footer */
.footer{
  position:relative;
  z-index:2;
  padding: 22px 16px 30px;
  text-align:center;
  color: rgba(255,255,255,.55);
}

/* ===== Floating TV Dock ===== */
.tvDock{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.tvDockFrame{
  position: relative;
  padding: 14px 14px 16px;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.18));
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  pointer-events: auto;
}
.tvDockBezel{
  position:absolute;
  inset: 8px 8px 38px 8px;
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(380px 210px at 20% 20%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
}
.tvDockScreen{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  clip-path: polygon(4% 14%, 10% 4%, 92% 7%, 97% 18%, 96% 86%, 88% 97%, 10% 94%, 5% 82%);
}
#ytDock{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.tvDockScan{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
  opacity:.20;
  mix-blend-mode: overlay;
}
.tvDockFeet{
  display:flex;
  gap:10px;
  margin-top: 10px;
  justify-content:flex-end;
  opacity:.75;
}
.knob{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.20);
  box-shadow: 0 0 14px rgba(255,255,255,.08);
}
.tvUnmute, .tvClose{
  position:absolute;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}
.tvUnmute{ right: 48px; }
.tvClose{ right: 10px; }
.tvUnmute:hover, .tvClose:hover{ border-color: rgba(255,255,255,.24); }

/* Responsive */
@media (max-width: 980px){
  .topbar{ grid-template-columns: 1fr auto; }
  .status{ display:none; }
}
@media (max-width: 860px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .thumb img{ height: 120px; }
  .split{ grid-template-columns: 1fr; }
  .logGrid{ grid-template-columns: 1fr; }
  .radioCols{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .brandMeta{ display:none; }
  .nav{ gap:8px; }
  .navlink{ padding: 7px 10px; font-size: 12px; }
  .tvDock{ left: 10px; bottom: 10px; width: min(340px, calc(100vw - 20px)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bgLayer{ transition:none }
  .navlink, .thumb img{ transition:none }
  .topbar, .cap{ backdrop-filter:none }
}


/* Dream Log accordion */
.entry{
  overflow: hidden;
}
.entrySummary{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.entrySummary::-webkit-details-marker{ display:none; }
.entryDay{
  font-weight: 750;
  letter-spacing: .04em;
}
.entryChevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-left: auto;
  opacity: .8;
}
details[open] .entryChevron{ transform: rotate(225deg); }
.entryBody{
  padding-top: 10px;
}