@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
--pink:#ff0080;
--mag:#ff00ff;
--ink:#26171f;
--deep:#150c12;
--fg:#f8eaf2;
--dim:#c6a9ba;
--r:28px;
}

*,*::before,*::after{box-sizing:border-box}

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
margin:0;
font-family:'Inter',system-ui,-apple-system,'Segoe UI','Noto Sans SC',sans-serif;
font-size:17px;
line-height:1.7;
color:var(--fg);
background:var(--deep);
overflow-x:hidden;
}

:focus-visible{outline:2px solid var(--mag);outline-offset:3px}

p{margin:0 0 1rem}
a{color:#ff9ecd}

.aurora{
position:fixed;
inset:-18vmax;
z-index:0;
pointer-events:none;
mix-blend-mode:screen;
filter:blur(70px) saturate(140%);
opacity:.9;
}

.aurora i{position:absolute;display:block;border-radius:50%}

.aurora-a{
width:72vmax;height:72vmax;left:-12vmax;top:-14vmax;
background:radial-gradient(circle at 50% 50%,rgba(255,0,128,.6),transparent 64%);
animation:drift-a 26s ease-in-out infinite alternate;
}

.aurora-b{
width:58vmax;height:58vmax;right:-14vmax;top:10vmax;
background:radial-gradient(circle at 50% 50%,rgba(255,0,255,.48),transparent 64%);
animation:drift-b 34s ease-in-out infinite alternate;
}

.aurora-c{
width:66vmax;height:66vmax;left:16vmax;bottom:-22vmax;
background:radial-gradient(circle at 50% 50%,rgba(122,62,255,.42),transparent 62%);
animation:drift-c 30s ease-in-out infinite alternate;
}

@keyframes drift-a{to{transform:translate3d(10vmax,7vmax,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(-9vmax,10vmax,0) scale(1.2)}}
@keyframes drift-c{to{transform:translate3d(7vmax,-9vmax,0) scale(1.1)}}

.hero{
position:relative;
z-index:1;
min-height:100vh;
min-height:100svh;
display:grid;
place-items:center;
padding:6rem 1.2rem 7rem;
text-align:center;
overflow:hidden;
background:radial-gradient(circle at 50% 42%,rgba(21,12,18,.3),rgba(21,12,18,.82) 74%);
}

.hero-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:54px 54px;
-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 16%,transparent 76%);
mask-image:radial-gradient(ellipse at 50% 50%,#000 16%,transparent 76%);
pointer-events:none;
}

.hero-title{
position:relative;
margin:0;
max-width:16ch;
font-size:clamp(2.5rem,10vw,7.5rem);
line-height:1.02;
font-weight:600;
letter-spacing:-.045em;
word-break:break-word;
background:linear-gradient(105deg,#fff 6%,#ffd7ee 24%,var(--pink) 50%,var(--mag) 72%,#fff 96%);
background-size:230% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
animation:flow 14s ease-in-out infinite alternate;
}

@keyframes flow{to{background-position:100% 0}}

.stage{
position:relative;
z-index:1;
max-width:1220px;
margin:0 auto;
padding:clamp(2rem,6vw,4.5rem) clamp(.9rem,4vw,2.5rem) clamp(2.5rem,7vw,5rem);
}

.stage-in{
display:grid;
grid-template-columns:1fr;
gap:clamp(1.1rem,3vw,2.2rem);
}

.rail{
background:rgba(255,255,255,.055);
border-radius:var(--r);
padding:1.4rem 1.2rem;
align-self:start;
}

.rail-title{
margin:0 0 .45rem;
font-size:.82rem;
font-weight:500;
letter-spacing:.22em;
color:var(--pink);
}

.subtitle{
margin:0 0 1.1rem;
font-size:.95rem;
line-height:1.65;
color:var(--dim);
}

.rail-list{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:2px;
}

.rail-list a{
display:flex;
align-items:center;
min-height:44px;
padding:.5rem .75rem;
border-radius:16px;
font-size:.95rem;
color:var(--fg);
text-decoration:none;
transition:background .25s ease,color .25s ease,padding-left .25s ease;
}

.rail-list a:hover{
background:rgba(255,0,128,.18);
color:#fff;
padding-left:1rem;
}

.sheet{
background:rgba(255,255,255,.045);
border-radius:var(--r);
padding:clamp(1.3rem,3.4vw,2.6rem);
color:#f0dce7;
}

.sheet > div{
padding-block:clamp(1.4rem,4vw,2.2rem);
}

.sheet > div + div{border-top:1px solid rgba(255,255,255,.1)}

.sheet > div:first-child{padding-top:.2rem}

.sheet > div[id]{
scroll-margin-top:1.5rem;
scroll-margin-bottom:120px;
}

.sheet h2{
position:relative;
margin:0 0 .7rem;
padding-top:.85rem;
font-size:clamp(1.35rem,3vw,1.85rem);
line-height:1.28;
letter-spacing:-.022em;
font-weight:600;
color:#fff;
}

.sheet h2::before{
content:'';
position:absolute;
top:0;left:0;
width:46px;height:4px;
border-radius:2px;
background:linear-gradient(90deg,var(--pink),var(--mag));
}

.sheet h3{
margin:1.4rem 0 .5rem;
font-size:1.12rem;
letter-spacing:-.01em;
color:#ffd9ec;
}

.sheet ul,.sheet ol{padding-left:1.25rem;margin:0 0 1rem}
.sheet li{margin:.28rem 0}
.sheet strong{color:#fff}
.sheet img{max-width:100%;height:auto;display:block;border-radius:20px;margin:1rem 0}
.sheet blockquote{
margin:1.2rem 0;
padding:.9rem 1.1rem;
border-radius:20px;
background:rgba(255,0,128,.14);
color:#ffe3f1;
}
.sheet blockquote p:last-child{margin:0}

.foot{
position:relative;
z-index:1;
margin-top:clamp(2rem,6vw,3.6rem);
padding:clamp(2.2rem,6vw,3.8rem) clamp(1.1rem,4vw,2.5rem) calc(122px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(255,0,128,.18),rgba(38,23,31,.92) 44%,#110a0e);
}

.foot-top{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end;
gap:1.6rem;
max-width:1220px;
margin:0 auto;
}

.foot-addr{font-style:normal;margin:0}

.foot-mark{
display:block;
font-size:clamp(2.2rem,11vw,5.6rem);
line-height:.98;
font-weight:600;
letter-spacing:-.05em;
background:linear-gradient(100deg,#fff,#ffc9e4 40%,var(--pink) 68%,var(--mag));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.foot-nav{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:2px;
}

.foot-nav a{
display:inline-flex;
align-items:center;
min-height:44px;
padding:.4rem 0;
font-size:1rem;
color:var(--dim);
text-decoration:none;
transition:color .2s ease,transform .2s ease;
}

.foot-nav a:hover{color:#fff;transform:translateX(4px)}

.foot-base{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:.8rem;
max-width:1220px;
margin:2rem auto 0;
padding-top:1.1rem;
border-top:1px solid rgba(255,255,255,.14);
font-size:.9rem;
color:var(--dim);
}

.copy{margin:0}

.foot-mini{
margin:0;
padding:0;
list-style:none;
display:flex;
flex-wrap:wrap;
gap:.4rem 1rem;
}

.foot-mini a{
display:inline-flex;
align-items:center;
min-height:40px;
padding:.2rem .1rem;
color:var(--dim);
text-decoration:none;
}

.foot-mini a:hover{color:#fff}

.dock{
position:fixed;
left:50%;
bottom:calc(.85rem + env(safe-area-inset-bottom));
transform:translateX(-50%);
z-index:60;
display:flex;
align-items:center;
gap:.3rem;
width:max-content;
max-width:calc(100vw - 1.2rem);
padding:.4rem;
border-radius:999px;
background:rgba(28,16,23,.8);
border:1px solid rgba(255,0,128,.3);
box-shadow:0 20px 44px rgba(0,0,0,.5);
-webkit-backdrop-filter:blur(16px);
backdrop-filter:blur(16px);
}

.dock-brand{
display:inline-flex;
align-items:center;
min-height:44px;
padding:0 1.05rem;
border-radius:999px;
font-size:1rem;
font-weight:600;
letter-spacing:-.01em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
text-decoration:none;
background:linear-gradient(100deg,rgba(255,0,128,.34),rgba(255,0,255,.34));
}

.dock-set{position:relative}

.dock-btn{
display:inline-flex;
align-items:center;
min-height:44px;
padding:0 1rem;
border-radius:999px;
font-size:.95rem;
color:#ffd9ec;
background:rgba(255,255,255,.08);
cursor:pointer;
user-select:none;
list-style:none;
transition:background .2s ease,color .2s ease;
}

.dock-btn::-webkit-details-marker{display:none}
.dock-btn:hover{background:rgba(255,255,255,.16);color:#fff}

.dock-set[open] > .dock-btn{
background:linear-gradient(100deg,var(--pink),var(--mag));
color:#fff;
}

.dock-panel{
position:absolute;
bottom:calc(100% + .55rem);
margin:0;
padding:.4rem;
min-width:10.5rem;
list-style:none;
display:grid;
gap:2px;
border-radius:22px;
background:rgba(32,18,26,.96);
border:1px solid rgba(255,0,128,.32);
box-shadow:0 22px 48px rgba(0,0,0,.55);
}

.dock-set--l .dock-panel{left:0}
.dock-set--r .dock-panel{right:0}

.dock-panel a{
display:flex;
align-items:center;
min-height:44px;
padding:0 .95rem;
border-radius:16px;
font-size:.95rem;
white-space:nowrap;
color:#f6e2ec;
text-decoration:none;
transition:background .2s ease,color .2s ease;
}

.dock-panel a:hover{background:rgba(255,0,128,.24);color:#fff}

html.js .reveal{
opacity:0;
transform:translateY(16px);
transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
}

html.js .reveal.in{opacity:1;transform:none}

@media (min-width:960px){
.stage-in{grid-template-columns:250px minmax(0,1fr)}
.rail{position:sticky;top:1.5rem}
}

@media (max-width:600px){
.dock{padding:.34rem;gap:.2rem}
.dock-btn{padding:0 .7rem;font-size:.88rem}
.dock-brand{padding:0 .75rem;font-size:.92rem}
.stage{padding-inline:.85rem}
.sheet{border-radius:24px}
.foot-base{font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
html.js .reveal{opacity:1;transform:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}