/* Midnyte v10 hero: black cinematic stage, five coders in orbiting light (kie + kling), liquid-glass UI, Instrument Serif. */
.liquid-glass{background:rgba(255,255,255,.01);background-blend-mode:luminosity;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.1);position:relative;overflow:hidden}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
body.v10{background:#000}
.v10-stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#000;color:#fff;font-family:Inter,system-ui,sans-serif}
.v10-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(17%);opacity:0;z-index:0}
.v10-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 22%)}

/* Nav */
.v10-navwrap{position:relative;z-index:20;padding:24px}
.v10-nav{display:flex;align-items:center;justify-content:space-between;max-width:64rem;margin:0 auto;padding:12px 24px;border-radius:999px}
.v10-left{display:flex;align-items:center;gap:32px}
.v10-brand{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:-.02em}
.v10-brand svg{width:26px;fill:none;stroke:#deb780;stroke-width:3.2}
.v10-links{display:flex;gap:28px}
.v10-links a,.v10-text{color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.v10-links a:hover,.v10-text:hover{color:#fff}
.v10-right{display:flex;align-items:center;gap:16px}
.v10-pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 24px;border-radius:999px;color:#fff;font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s}
.v10-pill:hover{background:rgba(255,255,255,.05)}

/* Hero */
.v10-hero{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;transform:translateY(-20%)}
.v10-h1{margin:0 0 32px;font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(48px,6.4vw,84px);line-height:1;letter-spacing:-.02em;color:#fff;white-space:nowrap;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.v10-h1 em{font-style:italic;color:#f2dcb4}
.v10 .v9-sub{margin:-16px 0 24px;font-size:16px;color:rgba(255,255,255,.85)}
.v10-stack{width:100%;max-width:40rem;display:grid;gap:16px;justify-items:center}
.v10-composer{width:100%;border-radius:28px;padding:18px 18px 14px 22px;text-align:left;background:rgba(10,12,16,.35)}
.v10-composer textarea{display:block;width:100%;min-height:52px;padding:0;border:0;background:none;resize:none;outline:none;color:#fff;font:inherit;font-size:16px;line-height:1.5}
.v10-composer textarea::placeholder{color:rgba(255,255,255,.45)}
.v10-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.v10-chips{display:flex;flex-wrap:wrap;gap:6px}
.v10-chip{padding:7px 13px;border-radius:999px;color:rgba(255,255,255,.78);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:color .2s,background .2s}
.v10-chip:hover{color:#fff;background:rgba(255,255,255,.06)}
.v10-actions{display:flex;align-items:center;gap:12px;flex:none}
.v10-model{font-size:12.5px;color:rgba(255,255,255,.5);white-space:nowrap}
.v10-attach{padding:0;border:0;background:none;color:rgba(255,255,255,.65);cursor:pointer;line-height:0;transition:color .2s}
.v10-attach:hover{color:#fff}
.v10-attach svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v10-send{display:grid;place-items:center;padding:12px;border:0;border-radius:50%;background:#fff;color:#000;cursor:pointer;transition:transform .15s,background .2s}
.v10-send:hover{background:#f2dcb4}.v10-send:active{transform:scale(.95)}
.v10-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v10-sub{margin:0;padding:0 16px;font-size:14px;line-height:1.65;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.v10-manifesto{padding:12px 32px}

/* Footer icons */
.v10-foot{position:relative;z-index:10;display:flex;justify-content:center;gap:16px;padding-bottom:48px}
.v10-round{display:grid;place-items:center;padding:16px;border-radius:50%;color:rgba(255,255,255,.8);cursor:pointer;transition:color .2s,background .2s}
.v10-round:hover{color:#fff;background:rgba(255,255,255,.05)}
.v10-round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:767px){
 .v10-links,.v10-text{display:none}
 .v10-navwrap{padding:16px}
 .v10-nav{padding:10px 10px 10px 18px}
 .v10-pill{padding:8px 16px}
 .v10-hero{transform:translateY(-6%);padding:24px 16px}
 .v10-h1{white-space:normal;font-size:clamp(46px,13vw,64px);line-height:1.02}
 .v10-video{transform:translateY(22%)}
 .v10-tools{flex-direction:column;align-items:stretch}
 .v10-actions{justify-content:flex-end}
 .v10-model{margin-right:auto}
 .v10-foot{padding-bottom:28px}
}
/* entrance */
@media (prefers-reduced-motion:no-preference){
 .anim .v10-nav{animation:v9-down .6s var(--e-soft) .06s both}
 .anim .v10-h1{animation:v9-focus 1s var(--e-primary) .3s both}
 .anim .v10-composer{animation:v9-panel .9s var(--e-primary) .6s both}
 .anim .v10-sub{animation:v9-pop .5s var(--e-soft) .9s both}
 .anim .v10-manifesto{animation:v9-pop .5s var(--e-soft) 1s both}
 .anim .v10-round{animation:v9-up .55s var(--e-soft) both}
 .anim .v10-round:nth-child(1){animation-delay:1.1s}.anim .v10-round:nth-child(2){animation-delay:1.16s}.anim .v10-round:nth-child(3){animation-delay:1.22s}.anim .v10-round:nth-child(4){animation-delay:1.28s}
}
.v10-video{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%)}
@media (max-width:767px){.v10-h1 span{display:block}}
@media (max-width:600px){.v9-chat-close{display:none}}
/* Blend the hero into the next section (#0a1014) instead of a hard edge */
.v10-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 34%),linear-gradient(0deg,#0a1014 0%,rgba(10,16,20,.85) 9%,rgba(10,16,20,0) 30%)}
.v10-stage{background:#000}
.v10-foot{padding-bottom:64px}
/* Phones: portrait solo video, taller stage so he sits just below the composer */
@media (max-width:767px){
 .v10-stage{min-height:calc(100svh + 240px)}
 .v10-video{transform:none;-webkit-mask-image:none;mask-image:none;object-position:50% 70%}
 .v10-hero{transform:none;justify-content:flex-start;padding-top:8px}
 .v10-shade{background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 58%),linear-gradient(0deg,#0a1014 0%,rgba(10,16,20,0) 16%)}
 .v10-foot{padding-bottom:36px}
}
@media (max-width:767px){
 .v10-stage{min-height:calc(100svh + 170px)}
 .v10-video{top:auto;bottom:0;height:auto;aspect-ratio:9/16;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
 .v10-shade{background:linear-gradient(0deg,#0a1014 0%,rgba(10,16,20,0) 14%)}
}
.v10-sub{text-wrap:balance}