:root {
  --bg1:#1a1a1a;
  --bg2:#2d2d2d;
  --bg3:#404040;
  --corner-control-height:1.1rem;
  --gold:gold;
  --green:#6cc417;
  --hotpink:hotpink;
  --muted:rgba(255,255,255,.88);
  --panel-strong:rgba(0,0,0,.92);
  --panel:rgba(0,0,0,.72);
  --pink:pink;
  --radius:.5rem;
  --red:#ff0101;
  --shadow:0 .35rem 1rem rgba(0,0,0,.55);
  --text:#fff;
  /* tuning variables */
  --footer-height: 2.2rem; /* adjust if your fixed footer differs */
  --center-height: calc(100vh - var(--footer-height)); /* visual area to center within */
  color-scheme:dark;
  font-size:16px;
}
*, *::before, *::after {box-sizing:border-box;}
:focus-visible {outline:3px solid var(--gold); outline-offset:3px;}
a {color:inherit;}
a.flink {font-size:inherit; text-decoration:none;}
html {-webkit-text-size-adjust:100%; text-size-adjust:100%; min-height:100%; overflow-x:hidden; scroll-behavior:smooth;}
body {background:linear-gradient(45deg, var(--bg1) 0%, var(--bg2) 25%, var(--bg1) 50%, var(--bg3) 75%, var(--bg1) 100%) fixed; color:var(--text); font-family:Arial, Verdana, sans-serif; margin:0; min-height:100dvh; min-height:100svh; min-height:100vh; overflow-x:hidden; overflow-y:auto;}
h2 {margin:1px;}
img {display:block; height:auto; max-width:100%;}
#dpa {background:var(--panel-strong); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); box-shadow:var(--shadow); clear:both; cursor:auto; font-size:.9rem; line-height:1.45; margin:.5rem 0 0; max-height:calc(100dvh - 3.5rem); overflow:auto; overflow-wrap:anywhere; padding:.8rem; text-align:left;}
#dpa p {margin:0 0 .6rem;}
#dpa p:last-child {margin-bottom:0;}
#dsum {background:var(--red); border-radius:.25rem; color:#000; cursor:pointer; display:grid; float:right; font-size:1rem; font-weight:700; height:var(--corner-control-height); line-height:1; list-style:none; min-height:var(--corner-control-height); padding:0 .4rem; place-items:center;}
#dsum::-webkit-details-marker {display:none;}
#dtext {max-width:min(46rem, calc(100vw - 1rem)); position:fixed; right:max(.1rem, env(safe-area-inset-right)); top:max(.1rem, env(safe-area-inset-top)); z-index:30;}
#ftc1 {background:#000; font-size:1rem; inset:auto 0 0 0; line-height:1.3; margin:0; padding:.12rem .5rem max(.12rem, env(safe-area-inset-bottom)); position:fixed; text-align:center; z-index:10;}
#hhh {color:var(--red); display:flex; font-size:1.05rem; font-weight:700; justify-content:center; margin:0 auto; text-align:center;}
#love {background:rgba(0,0,0,.7); border:3px solid var(--hotpink); border-radius:.25rem; color:var(--pink); display:inline-block; font-size:clamp(1.1rem,5.5vw,1.45rem); font-weight:700; line-height:1.05; padding:.3rem .48rem; text-align:center;}
#loved {display:flex; font-size:1.1rem; justify-content:center; margin:.65rem auto 0; padding:0;}
#mainh {background:#000; border-radius:.15rem; display:inline-block; font-size:clamp(1.45rem,7vw,1.85rem); line-height:1; margin:0 0 .35rem; max-width:calc(100vw - 1rem); padding:.28rem .65rem; text-align:center; width:min(100%,16rem);}
#texted {margin:.7rem auto .35rem; overflow:hidden; padding:1px 0;}
#xboarder {border:4px solid var(--gold); box-shadow:1px 1px 1px .15rem goldenrod;}
.ascii-art {color:var(--green); display:block; font:400 clamp(.2rem,.92vw,.34rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin:0 auto; max-width:100%; text-align:center; white-space:pre;}

/* Centering: flex-based, top padding = 2rem + safe-area, bottom = 0 */
.center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--center-height); /* area to center inside */
  padding: calc(2rem + env(safe-area-inset-top)) .5rem 0;
  box-sizing: border-box;
  width: 100%;
}

/* content-wrapper: fit content but never exceed the center area */
.content-wrapper {
  margin: 0 auto;
  text-align: center;
  width: min(100%, 40rem);
  height: fit-content;
  max-height: calc(var(--center-height) - 2rem); /* breathing room inside center */
  overflow: auto; /* internal scroll when needed */
  box-sizing: border-box;
}

.hero {width:fit-content;}
.highlight {-webkit-text-stroke:1px var(--green); background:var(--panel-strong); border-radius:var(--radius); color:var(--gold); font-size:14px; font-weight:700; line-height:1; margin:0 auto; max-width:100%; overflow:hidden; padding:.2rem .25rem; text-shadow:0 2px 5px rgba(0,0,0,.7); width:fit-content;}
.home-link {color:var(--gold); display:inline-block; text-decoration:none; transition:transform .16s ease;}
.lefttop {height:var(--corner-control-height); left:max(1px, env(safe-area-inset-left)); object-fit:contain; position:fixed; top:max(1px, env(safe-area-inset-top)); width:var(--corner-control-height); z-index:20;}
.overlay-text {background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); color:var(--muted); font-size:1.1rem; font-weight:700; margin:0 auto; padding:.48em .9em; width:fit-content;}
.tagline {color:var(--red); font:700 1rem/1.12 Arial, sans-serif!important; letter-spacing:0px; margin:0; text-align:left; word-spacing:0px;}
.tagline-center {display:block; text-align:center;}
@media (hover:hover) and (pointer:fine) {.home-link:hover {transform:scale(1.04);}}
@media (max-width:39.99rem) {
  :root {font-size:18px;}
  #love {font-size:1.23rem;}
  #mainh {font-size:2rem; width:min(100%,18rem);}
  #texted {-webkit-overflow-scrolling:touch; overflow-x:auto; overflow-y:hidden;}
  .ascii-art {font-size:.34rem; max-width:100%;}
  .highlight {max-width:100%; overflow:hidden;}
  .overlay-text {font-size:1.1rem;}
  .tagline {font-size:1rem;}
}

/* mobile-specific adjustments */
@media (max-width:39.99rem) {
  html, body {height:100svh; overflow:hidden;}
  .center-container {
    height: calc(100svh - var(--footer-height));
    padding: calc(2rem + env(safe-area-inset-top)) .5rem 0;
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width:40rem) {
  :root {font-size:18px;}
  #dpa {font-size:.95rem; padding:1rem;}
  #love {font-size:1.5em;}
  #loved {font-size:1.25rem;}
  #mainh {font-size:2rem; max-width:75vw; width:25rem;}
  .center-container {padding-left:.75rem; padding-right:.75rem;}
  .highlight {max-width:min(100%,23rem); padding:.22rem .4rem;}
  .overlay-text {font-size:1.2em;}
}
@media (min-width:64rem) {:root {font-size:clamp(18px, 1vw + .55rem, 22px);}}
@media (orientation:landscape) and (max-height:22.5rem) {:root {font-size:clamp(8px,3vh,17px);}}
@media (orientation:landscape) and (max-height:35.5rem) {
  :root {font-size:clamp(12px,3vh,20px);}
  #ftc1 {display:none;}
  .center-container {min-height:99dvh; padding-top:1px; padding-bottom:1px;}
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important;}
  html {scroll-behavior:auto;}
}

/* Ensure the center area is filled by the wrapper, and center the inner content */
.content-wrapper {
  width: min(100%, 40rem);
  margin: 0 auto;
  box-sizing: border-box;

  /* fill the parent center area so we can center its children vertically */
  height: 100%;

  /* use flex to center content inside the wrapper */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */

  /* keep internal scrolling if content exceeds available height */
  max-height: 100%;
  overflow: auto;
  padding: 0.5rem; /* optional inner padding */
}

/* The main container inside wrapper: allow it to size to content but center it too */
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: .7rem;
}

/* Remove default top/bottom margins from headings that shift centering */
.tagline,
.tagline h2,
.tagline h2 span,
h1, h2, h3 {
  margin: 0;
  padding: 0;
}
#mainh {width:17.5rem!important;}
@media (max-width:375px) and (max-height:667px) and (orientation:portrait) and (max-width:18rem) {body, html, :root {font-size:14px}}