:root{color-scheme:dark;--bg:#090911;--text:#f0effa;--muted:#a4a5c0;--lav:#aaa5f5;--ice:#c4dcff;--line:rgba(202,207,255,.22)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{min-height:100vh;overflow-x:hidden;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 18% 42%,rgba(74,69,140,.17),transparent 38%),radial-gradient(ellipse at 86% 10%,rgba(113,153,213,.1),transparent 34%),var(--bg)}.ambient{position:fixed;width:25rem;height:25rem;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.13}.a{background:#5d55c8;top:18%;left:-16rem}.b{background:#9bc9ff;right:-20rem;bottom:0}.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4}.petal{position:absolute;top:-8%;color:#f4f2ff;text-shadow:0 0 9px #b6b8ff70;opacity:0;animation:fall linear infinite;will-change:transform,opacity}@keyframes fall{0%{transform:translate3d(0,-5vh,0) rotate(0);opacity:0}10%{opacity:.65}85%{opacity:.42}100%{transform:translate3d(var(--drift),110vh,0) rotate(430deg);opacity:0}}.page{position:relative;min-height:100vh;max-width:1320px;margin:auto;padding:52px 7.5% 26px;display:flex;flex-direction:column;justify-content:center}.profile{display:grid;grid-template-columns:minmax(280px,.86fr) minmax(360px,1fr);align-items:center;gap:clamp(50px,8vw,120px)}.portrait-stage{width:min(100%,420px);aspect-ratio:1;position:relative;display:grid;place-items:center;justify-self:center;isolation:isolate;transition:transform .2s ease-out;will-change:transform}.halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:#7770e9;filter:blur(48px);opacity:.22;animation:halo 7s ease-in-out infinite alternate}.frame{width:76%;aspect-ratio:1;position:relative;overflow:hidden;border-radius:50%;padding:2px;background:linear-gradient(145deg,#eef1ff,#9190d680 36%,#d0e1ff1f 68%,#ddeeffb3);box-shadow:0 0 0 1px #e8ebff12,0 0 48px #6969d121}.avatar{width:100%;height:100%;display:block;object-fit:cover;object-position:center 44%;border-radius:50%;filter:saturate(.9) contrast(1.04)}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;pointer-events:none}.o1{width:99%;height:42%;transform:rotate(-24deg);border-color:#aeaaff38;animation:orbit 22s linear infinite}.o2{width:45%;height:105%;transform:rotate(24deg);border-color:#b1d5ff24;animation:orbit 28s linear infinite reverse}.o3{width:88%;height:88%;border-style:dashed;border-color:#cdd0ff14;animation:orbit 60s linear infinite}.index{position:absolute;left:7%;bottom:15%;color:#9c9cbd;font:10px monospace;letter-spacing:.16em}.dot{position:absolute;top:20%;right:15%;width:5px;height:5px;border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--ice)}.content{max-width:570px}.eyebrow{color:#aaa9d6;font:12px/1.6 monospace;letter-spacing:.025em;display:flex;align-items:center;gap:10px}.eyebrow i,.status i{width:5px;height:5px;border-radius:50%;background:var(--lav);box-shadow:0 0 12px #aaa5f5cc;flex-shrink:0}.name{display:flex;align-items:baseline;gap:16px;margin:13px 0 8px}h1{margin:0;font-size:clamp(76px,10vw,130px);line-height:.98;letter-spacing:-.075em;font-weight:850;color:transparent;background:linear-gradient(#fff 10%,#e0e0f0 52%,#8c8ba7);-webkit-background-clip:text;background-clip:text}.lead{margin:21px 0 12px;font-size:clamp(17px,1.6vw,20px);font-weight:650;letter-spacing:-.025em}.bio{max-width:450px;margin:0;color:var(--muted);font-size:15px;line-height:1.8}.status{display:flex;align-items:center;gap:10px;margin-top:26px;color:#a4a5bf;font:12px/1.5 monospace;letter-spacing:.035em}.status i{width:6px;height:6px;animation:pulse 2.4s ease-in-out infinite}.socials{display:flex;gap:11px;margin-top:30px}.socials a{display:grid;place-items:center;width:49px;height:49px;border:1px solid #cdcff42b;border-radius:16px;color:#d7d8ef;background:linear-gradient(145deg,#ffffff0e,#ffffff04);transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}.socials svg{width:20px;height:20px;fill:currentColor}.socials a:hover,.socials a:focus-visible{color:white;transform:translateY(-4px);border-color:#b3b1ffbf;background:#837eda29;box-shadow:0 8px 28px #625bb92e;outline:none}.caption{display:flex;align-items:center;gap:12px;margin-top:14px;color:#777991;font:9px monospace;letter-spacing:.18em}.caption span{height:1px;width:36px;background:linear-gradient(90deg,#aeaa80,transparent)}.router-note{margin-top:7px;color:#9697e6;font:10px monospace;letter-spacing:.06em}.router-note span{color:#6e708f}footer{display:flex;justify-content:space-between;margin-top:clamp(48px,8vh,90px);color:#666981;font:9px monospace;letter-spacing:.14em}footer b{font-weight:400}@keyframes orbit{to{rotate:336deg}}@keyframes halo{to{opacity:.28;transform:scale(1.08)}}@keyframes pulse{50%{opacity:.45}}@media(max-width:760px){.page{padding:38px 24px 22px;min-height:100svh}.profile{grid-template-columns:1fr;gap:32px}.portrait-stage{width:min(78vw,330px)}.content{width:100%;max-width:520px;margin:auto;text-align:center}.eyebrow{justify-content:center;font-size:11px}.name{justify-content:center;gap:11px;margin-top:13px}h1{font-size:clamp(70px,19vw,108px)}.lead{font-size:17px;margin-top:16px}.bio{margin:auto;font-size:14px;line-height:1.75;max-width:390px}.status{justify-content:center;margin-top:21px;font-size:11px}.socials{justify-content:center;margin-top:25px;gap:10px}.socials a{width:47px;height:47px;border-radius:15px}.caption{justify-content:center}}@media(max-width:360px){.page{padding-left:17px;padding-right:17px}.portrait-stage{width:min(76vw,285px)}h1{font-size:68px}.socials a{width:43px;height:43px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.petals{display:none}}
/* Avatar motion inspired by roum-bio: orbital rings + a moving light sweep */
.frame{isolation:isolate}
.frame:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.24) 49%,transparent 64%);transform:translateX(-130%);animation:avatar-sheen 7s ease-in-out infinite 1.4s}
@keyframes avatar-sheen{0%,18%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
.o1{animation:bio-orbit-x 26s linear infinite;transform:rotateX(72deg) rotateZ(0deg);transform-style:preserve-3d}
.o2{animation:bio-orbit-y 38s linear infinite;transform:rotateY(70deg) rotateZ(0deg);transform-style:preserve-3d}
.o3{animation:orbit 60s linear infinite}
@keyframes bio-orbit-x{to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes bio-orbit-y{to{transform:rotateY(70deg) rotateZ(-360deg)}}
.eyebrow{color:#d7d5ff}
.eyebrow span{display:inline-block;padding:4px 10px;border:1px solid #a7a2f64d;border-radius:5px;background:linear-gradient(90deg,#7770e926,#c7d9ff12);box-shadow:0 0 22px #8179ed12}
.lead{font-size:clamp(13px,1.2vw,15px);font-weight:450;color:#a7a7bd;letter-spacing:0;margin-top:16px;margin-bottom:10px}
@media(prefers-reduced-motion:reduce){.frame:after{animation:none;display:none}.o1,.o2,.o3,.halo{animation:none!important}}

/* Quote is the visual hook: bold, luminous type without a surrounding badge */
.eyebrow{display:block;margin:0 0 22px;color:#f7f8ff;font:800 clamp(29px,3.5vw,46px)/1.12 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.055em}
.eyebrow i{display:none}
.eyebrow span{display:inline;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:transparent;background-image:linear-gradient(105deg,#f8f9ff 8%,#c9d4ff 48%,#9c91ff 92%);-webkit-background-clip:text;background-clip:text;text-wrap:balance;text-shadow:none}
@media(max-width:760px){.eyebrow{font-size:clamp(27px,7.5vw,38px);line-height:1.16;margin-bottom:18px}.eyebrow span{display:block}}

/* Animated accent after the quote */
.eyebrow{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:0}
.eyebrow span{display:inline;background-image:linear-gradient(105deg,#f8f9ff 8%,#c9d4ff 48%,#9c91ff 92%);background-size:180% auto;animation:quote-shimmer 5s ease-in-out infinite}
.eyebrow i.quote-spark{display:inline-block;flex:0 0 auto;margin-left:9px;color:#d9d5ff;font:700 23px/1 system-ui,sans-serif;text-shadow:0 0 10px #a7a2ff,0 0 24px #8f85ff88;animation:spark-float 2.2s ease-in-out infinite}
@keyframes quote-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes spark-float{0%,100%{transform:translateY(1px) rotate(0) scale(.9);opacity:.7}50%{transform:translateY(-5px) rotate(22deg) scale(1.2);opacity:1}}
@media(max-width:760px){.eyebrow{justify-content:center;gap:0}.eyebrow i.quote-spark{font-size:21px;margin-left:7px}}
@media(prefers-reduced-motion:reduce){.eyebrow span,.eyebrow i.quote-spark{animation:none!important}}

/* Softer quote typography, same size, with a subtle lightning flicker */
.eyebrow{font-weight:450;letter-spacing:-.045em}
.eyebrow span{font-weight:450}
.eyebrow i.quote-spark{font-style:normal;display:inline-block;flex:0 0 auto;margin-left:9px;color:#cbd9ff;font-family:system-ui,sans-serif;font-size:.72em;line-height:1;text-shadow:0 0 8px #a7c5ff99,0 0 20px #8f85ff66;animation:quote-lightning 3.4s ease-in-out infinite}
@keyframes quote-lightning{0%,78%,100%{opacity:.72;transform:translateY(0) scale(1);filter:brightness(1)}82%{opacity:1;transform:translateY(-2px) scale(1.12);filter:brightness(1.5)}86%{opacity:.45;transform:translateY(1px) scale(.96);filter:brightness(1.2)}90%{opacity:1;transform:translateY(-1px) scale(1.08);filter:brightness(1.7)}}
@media(max-width:760px){.eyebrow{font-weight:450}.eyebrow span{font-weight:450}.eyebrow i.quote-spark{margin-left:7px}}
@media(prefers-reduced-motion:reduce){.eyebrow i.quote-spark{animation:none!important}}


/* Sakura petal accent replaces the lightning */
.eyebrow i.quote-petal{display:inline-block;flex:0 0 auto;margin-left:10px;color:#f2eaff;font:400 .72em/1 Georgia,serif;text-shadow:0 0 10px #d9c8ffbb,0 0 22px #9b8dff66;animation:sakura-drift 4.8s ease-in-out infinite;transform-origin:center}
@keyframes sakura-drift{0%,100%{transform:translate3d(0,1px,0) rotate(-20deg) scale(.92);opacity:.68}35%{transform:translate3d(3px,-5px,0) rotate(35deg) scale(1.12);opacity:1}70%{transform:translate3d(-2px,-2px,0) rotate(85deg) scale(.98);opacity:.82}}
@media(max-width:760px){.eyebrow i.quote-petal{margin-left:7px}}
@media(prefers-reduced-motion:reduce){.eyebrow i.quote-petal{animation:none!important}}
/* Small, unobtrusive background music control */
.music-toggle{position:fixed;right:22px;bottom:20px;z-index:10;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid #cbd2ff38;border-radius:14px;color:#e8e9ff;background:rgba(14,15,31,.78);backdrop-filter:blur(16px);font:10px/1 monospace;letter-spacing:.12em;cursor:pointer;box-shadow:0 8px 30px #0003;transition:transform .2s,border-color .2s,background .2s}
.music-toggle:hover,.music-toggle:focus-visible{transform:translateY(-2px);border-color:#bdb8ff9c;background:rgba(37,34,66,.88);outline:none}
.music-icon{font:20px/1 Georgia,serif;color:#d4d1ff}
.music-bars{display:flex;align-items:center;gap:2px;height:13px}
.music-bars i{display:block;width:2px;height:4px;border-radius:2px;background:#c8c7ff;opacity:.5}
.music-toggle[aria-pressed="true"] .music-bars i{opacity:1;animation:music-wave .7s ease-in-out infinite alternate}
.music-toggle[aria-pressed="true"] .music-bars i:nth-child(2){animation-delay:.2s}
.music-toggle[aria-pressed="true"] .music-bars i:nth-child(3){animation-delay:.4s}
@keyframes music-wave{to{height:12px}}
@media(max-width:760px){.music-toggle{right:14px;bottom:14px;padding:10px 11px;gap:8px}}
@media(prefers-reduced-motion:reduce){.music-toggle,.music-bars i{animation:none!important;transition:none!important}}

/* Refine quote hierarchy: bold, but intentionally lighter than the ROUM title */
.eyebrow{font-weight:650;letter-spacing:-.045em}
.eyebrow span{font-weight:650}
h1{font-weight:850}
.eyebrow i.quote-petal{font-size:.8em;transform-origin:50% 50%;animation:sakura-spin 3.8s linear infinite}
@keyframes sakura-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.eyebrow i.quote-petal{animation:none!important}}

.music-source{position:fixed;width:1px;height:1px;left:-10px;bottom:0;border:0;opacity:.01;pointer-events:none}


/* ROUM hover gradient */
h1{
  color:transparent;
  background-image:linear-gradient(110deg,#fff 0%,#fff 34%,#e8f5ff 43%,#a7dcff 51%,#4ba5ff 59%,#d9efff 68%,#fff 78%,#fff 100%);
  background-size:300% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position 1.05s cubic-bezier(.22,.7,.25,1),filter .6s ease,transform .6s ease;
}
h1:hover{
  background-position:0% 50%;
  filter:drop-shadow(0 0 12px rgba(112,190,255,.2));
  transform:translateY(-1px);
}

/* Soft sakura glow: subtle halo, no harsh bloom */
.eyebrow i.quote-petal{
  color:#d9d2ff;
  text-shadow:0 0 3px rgba(195,180,255,.35),0 0 7px rgba(153,139,255,.2);
  filter:none;
  box-shadow:none;
}
@media(max-width:760px){
  .eyebrow{justify-content:center;column-gap:8px}
  .eyebrow span{max-width:calc(100% - 1.8em)}
}
@media(hover:none){h1:hover{filter:none;transform:none}}
@media(prefers-reduced-motion:reduce){
  h1,.eyebrow i.quote-petal{animation:none!important;transition:none!important;filter:none;transform:none}
  h1{background-position:100% 50%}
}

/* Final layout guard: quote text and spinning flower must never overlap */
.content .eyebrow{
  position:relative;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:100%;
  max-width:100%;
}
.content .eyebrow span{
  position:relative !important;
  display:block !important;
  flex:0 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100% - 30px) !important;
  overflow-wrap:anywhere;
}
.content .eyebrow i.quote-petal{
  position:relative !important;
  inset:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 1em !important;
  width:1em !important;
  height:1em !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1;
  font-style:normal;
  line-height:1;
  text-shadow:0 0 3px rgba(195,180,255,.28),0 0 6px rgba(153,139,255,.14) !important;
  filter:none !important;
  animation:sakura-spinner 2.8s linear infinite !important;
}

/* Quote + flower: keep the spinner immediately beside the text, not at the far edge */
.content .eyebrow{
  display:inline-flex !important;
  width:fit-content !important;
  max-width:100% !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  text-align:left !important;
}
.content .eyebrow span{
  display:inline-block !important;
  flex:0 1 auto !important;
  width:max-content !important;
  max-width:calc(100% - 28px) !important;
}
.content .eyebrow i.quote-petal{
  flex:0 0 1em !important;
  align-self:center !important;
  margin:0 !important;
}

/* Remove sakura and footer elements entirely from the visible layout */
.eyebrow,.quote-petal,main.page>footer{display:none!important}

/* Quote restored; decorative spinning flower remains removed */
.content .eyebrow{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 18px !important;
  text-align:inherit !important;
  font-size:clamp(1.2rem,2.2vw,1.65rem);
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.25;
}
.content .eyebrow span{display:inline !important;max-width:100% !important}

/* Small original dark-navy meme sticker in the empty lower-right corner */
.meme-sticker{
  position:fixed;
  z-index:2;
  right:clamp(16px,3vw,44px);
  bottom:clamp(12px,2.5vh,24px);
  width:clamp(155px,17vw,245px);
  pointer-events:none;
  opacity:.92;
  transform:rotate(-2deg);
  filter:drop-shadow(0 10px 28px rgba(28,48,92,.22));
}
.meme-sticker svg{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:760px){
  .meme-sticker{width:clamp(96px,27vw,140px);right:8px;bottom:8px;opacity:.82}
}
@media(max-width:390px){
  .meme-sticker{width:88px;right:4px;bottom:4px;opacity:.72}
}
@media(prefers-reduced-motion:reduce){.meme-sticker{transform:none}}