@font-face{font-family:WanheDisplay;src:url('/fonts/wanhe-display.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:NotoSC;src:url('/fonts/noto-sans-sc-400.woff2?v=4') format('woff2');font-display:swap;font-weight:400}
:root{
  --ink:#030309;--ivory:#fcf9f3;--blue:#1724e8;--violet:#5543ff;--cyan:#5ce7ff;--red:#ff315d;
  --line:rgba(252,249,243,.18);--line-soft:rgba(252,249,243,.09);--muted:rgba(252,249,243,.62);
  --serif:Georgia,'Times New Roman',NotoSC,serif;--sans:NotoSC,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',NotoSC,monospace;--pad:clamp(18px,3vw,48px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-synthesis:none}
body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:#030309;color:var(--ivory);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button,a,summary,label,select{touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{border:0;background:none;cursor:pointer}
::selection{background:var(--ivory);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

#hero-canvas{position:fixed;inset:0;width:100vw;height:100svh;z-index:0;pointer-events:none;background:radial-gradient(circle at 48% 42%,#1922d0 0,#0c115a 42%,#030309 82%)}
.analog-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.24;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 3px 4px),radial-gradient(ellipse at center,transparent 44%,rgba(0,0,0,.82) 100%)}
.analog-layer::before{content:"";position:absolute;inset:-18%;opacity:.42;background:radial-gradient(circle at 28% 32%,rgba(92,231,255,.23),transparent 27%),radial-gradient(circle at 72% 68%,rgba(255,49,93,.14),transparent 24%)}
.analog-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,70,.025),transparent 35%,rgba(0,225,255,.025));animation:signalDrift 7s steps(2,end) infinite}

@keyframes signalDrift{0%,100%{transform:translateX(0)}48%{transform:translateX(2px)}52%{transform:translateX(-2px)}}

.loading-screen{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:22px;background:#000;transition:opacity .75s cubic-bezier(.76,0,.24,1),visibility .75s}
.loading-screen.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loading-mark{width:58px;height:58px;overflow:hidden;border:1px solid var(--ivory)}
.loading-mark img{width:100%;height:100%}
.loading-screen p,.loading-screen small{margin:0;font:10px/1.2 var(--mono);letter-spacing:.18em}
.loading-screen small{color:var(--muted)}
.loading-segments{display:grid;grid-template-columns:repeat(12,9px);gap:4px;padding:4px;border:1px solid rgba(252,249,243,.55)}
.loading-segments i{display:block;width:9px;height:8px;background:var(--ivory);opacity:.1;animation:segment 1.25s steps(1,end) infinite}
.loading-segments i:nth-child(2){animation-delay:.08s}.loading-segments i:nth-child(3){animation-delay:.16s}.loading-segments i:nth-child(4){animation-delay:.24s}.loading-segments i:nth-child(5){animation-delay:.32s}.loading-segments i:nth-child(6){animation-delay:.4s}.loading-segments i:nth-child(7){animation-delay:.48s}.loading-segments i:nth-child(8){animation-delay:.56s}.loading-segments i:nth-child(9){animation-delay:.64s}.loading-segments i:nth-child(10){animation-delay:.72s}.loading-segments i:nth-child(11){animation-delay:.8s}.loading-segments i:nth-child(12){animation-delay:.88s}
@keyframes segment{0%,100%{opacity:.12}12%,62%{opacity:1}}

.app-shell{position:relative;z-index:2;opacity:0;transition:opacity .9s ease}
html.is-ready .app-shell{opacity:1}
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 var(--pad);border-bottom:1px solid var(--line);background:rgba(3,3,9,.38);backdrop-filter:blur(12px);font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.identity{display:flex;align-items:center;gap:12px;min-width:0}
.identity img{width:30px;height:30px;border:1px solid rgba(252,249,243,.3)}
.identity span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runtime{display:flex;align-items:center;gap:8px;color:var(--muted)}
.runtime i,.rail-signal i{width:6px;height:6px;background:#56f79b;border-radius:50%;box-shadow:0 0 13px #56f79b}
.site-header nav{justify-self:end;display:flex;align-items:center;gap:24px}
.site-header nav a,.site-header nav button{padding:12px 0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.site-header nav a:hover,.site-header nav button:hover{color:var(--cyan)}

.hero{position:relative;min-height:100svh;padding:calc(64px + var(--pad)) var(--pad) var(--pad);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.hero::before{content:"";position:absolute;inset:84px var(--pad) var(--pad);border:1px solid var(--line);border-radius:clamp(24px,4vw,58px);pointer-events:none}
.hero-meta{display:flex;justify-content:space-between;padding:0 clamp(18px,3vw,42px);font:9px/1.2 var(--mono);letter-spacing:.14em;color:rgba(252,249,243,.7);z-index:2}
.hero h1{align-self:center;width:100%;max-width:100%;margin:0;padding:4vh 0;text-align:center;font-family:var(--serif);font-size:clamp(54px,9.1vw,138px);font-weight:400;line-height:.78;letter-spacing:-.075em;text-transform:uppercase;text-shadow:-3px 0 rgba(255,49,93,.42),3px 0 rgba(92,231,255,.38);z-index:2}
.hero h1 span{display:block;position:relative;transform:scaleX(.95)}
.hero h1 span:first-child{transform:translateX(-1vw) scaleX(.95)}
.hero h1 span:last-child{transform:scaleX(.95)}
.hero h1 span::after{content:attr(data-text);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px rgba(252,249,243,.22);transform:translate(1px,2px);clip-path:inset(48% 0 44% 0)}
.hero-foot{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:0 clamp(18px,3vw,42px);z-index:2}
.hero-foot p{margin:0;max-width:410px;color:rgba(252,249,243,.68);font-size:12px;line-height:1.8}
.hero-foot a{display:flex;gap:28px;align-items:center;border-bottom:1px solid var(--ivory);padding:10px 0;font:10px/1 var(--mono);letter-spacing:.14em}
.hero-foot a b{font-size:17px}

.workspace,.results{position:relative;margin:0 var(--pad);background:rgba(3,3,9,.86);border:1px solid var(--line);backdrop-filter:blur(14px)}
.workspace{border-radius:48px 48px 0 0;overflow:hidden}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:clamp(28px,4vw,60px);border-bottom:1px solid var(--line)}
.section-heading span{font:9px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.section-heading h2{margin:13px 0 0;font:400 clamp(38px,5vw,74px)/.9 var(--serif);letter-spacing:-.045em}
.section-heading p{margin:0;text-align:right;font:10px/1.7 var(--mono);letter-spacing:.08em;color:var(--muted)}
.section-heading strong{color:var(--ivory);font-weight:400}
#generation-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,32%)}
.form-primary{min-width:0;border-right:1px solid var(--line)}
.prompt-field{display:block;padding:clamp(26px,4vw,58px);border-bottom:1px solid var(--line)}
.prompt-field>span,.connection-rail label>span,.output-row label>span{display:flex;justify-content:space-between;margin-bottom:14px;font:9px/1 var(--mono);letter-spacing:.13em;color:var(--muted)}
.prompt-field output{font:inherit}.prompt-field output b{color:var(--ivory);font-weight:400}
.prompt-field textarea{display:block;width:100%;min-height:210px;padding:0;border:0;outline:0;resize:vertical;background:transparent;color:var(--ivory);font:400 clamp(22px,2.4vw,38px)/1.35 var(--serif);caret-color:var(--cyan)}
.prompt-field textarea::placeholder{color:rgba(252,249,243,.24)}
.parameter-grid{display:grid;grid-template-columns:1fr 1fr}
fieldset{min-width:0;margin:0;padding:26px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
fieldset:nth-child(2){border-right:0}
legend{padding:0 0 16px;font:9px/1 var(--mono);letter-spacing:.13em;color:var(--muted)}
.choice-row{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.choice-row.four{grid-template-columns:repeat(4,1fr)}.choice-row.three{grid-template-columns:repeat(3,1fr)}
.choice-row label,.frame-row label{position:relative;cursor:pointer;background:rgba(3,3,9,.8)}
.choice-row input,.frame-row input{position:absolute;opacity:0;pointer-events:none}
.choice-row span{display:grid;place-content:center;min-height:70px;text-align:center;font:10px/1 var(--mono);letter-spacing:.05em;transition:.2s}
.choice-row small{display:block;margin-top:8px;color:var(--muted);font-size:8px}
.choice-row input:checked+span,.choice-row label:hover span{background:var(--ivory);color:var(--ink)}
.choice-row input:checked+span small{color:rgba(3,3,9,.65)}
.frame-fieldset{grid-column:1/-1;border-right:0;padding-bottom:24px}
.frame-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.frame-row span{display:flex;min-height:92px;align-items:center;justify-content:center;gap:12px;transition:.2s}
.frame-row input:checked+span,.frame-row label:hover span{background:rgba(252,249,243,.12)}
.frame-row b{font:9px/1 var(--mono);font-weight:400}
.frame{display:block;border:1px solid var(--ivory);opacity:.75}.frame.square{width:28px;height:28px}.frame.landscape32{width:35px;height:23px}.frame.landscape169{width:39px;height:22px}.frame.portrait23{width:22px;height:33px}.frame.portrait916{width:18px;height:32px}
.output-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
.output-row label{padding:26px;border-right:1px solid var(--line)}.output-row label:last-child{border-right:0}
select{width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#030309;color:var(--ivory);outline:0;font:11px/1 var(--mono)}
.connection-rail{display:flex;flex-direction:column;padding:clamp(26px,3vw,42px);background:rgba(8,9,35,.42)}
.rail-heading{display:flex;justify-content:space-between;gap:10px;padding-bottom:35px;font:9px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.rail-heading b{color:var(--ivory);font-weight:400}
.connection-rail label{display:block;margin-bottom:28px}
.connection-rail input{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--ivory);font:11px/1.3 var(--mono)}
.connection-rail input::placeholder{color:rgba(252,249,243,.27)}
.key-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--line)}
.key-wrap input{border:0}.key-wrap button{padding:10px 0 10px 14px;color:var(--muted);font:9px/1 var(--mono)}
.check-button{display:flex;justify-content:space-between;width:100%;margin-top:4px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:10px/1 var(--mono);letter-spacing:.1em;text-align:left}
.check-button:hover{color:var(--cyan)}
.connection-rail>p{margin:26px 0;color:var(--muted);font-size:10px;line-height:1.8}
.rail-signal{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:20px;font:8px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.generate-strip{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(260px,32%);min-height:92px;border-top:1px solid var(--line)}
.generate-strip p{align-self:center;margin:0;padding:22px clamp(26px,4vw,58px);font-size:11px;color:var(--muted)}
.generate-strip p.success{color:#56f79b}.generate-strip p.error{color:#ff718f}
#generate-button{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,3vw,42px);background:var(--ivory);color:var(--ink);font:11px/1 var(--mono);letter-spacing:.12em;transition:.25s}
#generate-button b{font-size:22px}#generate-button:hover{background:var(--cyan)}#generate-button:disabled,.check-button:disabled{opacity:.4;cursor:wait}

.results{border-top:0;padding-bottom:0;background:rgba(3,3,9,.93)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);min-height:380px}
.empty-state{grid-column:1/-1;display:grid;place-content:center;justify-items:center;min-height:430px;padding:48px;background:#030309;text-align:center}
.empty-state span{margin-bottom:36px;font:9px/1 var(--mono);letter-spacing:.16em;color:var(--red)}
.empty-state b{font:400 clamp(40px,6vw,82px)/1 var(--serif)}
.empty-state p{max-width:350px;margin:18px 0 0;color:var(--muted);font-size:11px;line-height:1.7}
.image-card{position:relative;overflow:hidden;background:#060612;min-height:320px}
.image-card img{width:100%;height:auto;aspect-ratio:var(--image-ratio,1/1);object-fit:cover}
.image-card[data-aspect="landscape32"] img{aspect-ratio:3/2}
.image-card[data-aspect="landscape169"] img{aspect-ratio:16/9}
.image-card[data-aspect="portrait23"] img{aspect-ratio:2/3}
.image-card[data-aspect="portrait916"] img{aspect-ratio:9/16}
.image-info{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;padding:18px 20px;border-top:1px solid var(--line-soft);background:#030309}
.image-prompt{margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--muted);font-size:10px;line-height:1.5}
.image-actions{display:flex;align-items:center;gap:12px;font:8px/1 var(--mono);white-space:nowrap}
.image-actions a,.image-actions button{padding:8px 0;border-bottom:1px solid var(--line);font:inherit}.image-actions a:hover,.image-actions button:hover{color:var(--cyan)}

footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 var(--pad);padding:35px 0 45px;border-top:1px solid var(--line);font:9px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
footer>a:first-child{display:flex;align-items:center;gap:10px;color:var(--ivory)}footer img{width:24px;height:24px}footer>a:last-child{justify-self:end;color:var(--ivory)}footer p{margin:0}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto}.runtime{display:none}.site-header nav{gap:16px}.site-header nav a:nth-child(2){display:none}
  .hero h1{font-size:clamp(58px,11vw,108px)}
  #generation-form{grid-template-columns:1fr}.form-primary{border-right:0}.connection-rail{border-top:1px solid var(--line);min-height:390px}.generate-strip{grid-template-columns:1fr minmax(220px,42%)}
  .gallery{grid-template-columns:1fr}
}
@media(max-width:600px){
  :root{--pad:12px}
  .site-header{height:56px;padding:0 16px}.identity img{width:26px;height:26px}.identity span{font-size:8px}.site-header nav{gap:12px}.site-header nav a{display:none}.site-header nav button{font-size:8px}
  .hero{padding-top:76px;min-height:100svh}.hero::before{inset:68px 12px 12px;border-radius:24px}.hero-meta{padding:0 14px}.hero-meta span:last-child{display:none}
  .hero h1{font-size:clamp(46px,13.5vw,72px);line-height:.82}.hero h1 span:first-child,.hero h1 span:last-child{transform:none}
  .hero-foot{padding:0 14px;display:block}.hero-foot p{font-size:10px}.hero-foot a{margin-top:18px;justify-content:space-between}
  .workspace{border-radius:26px 26px 0 0}.section-heading{padding:28px 22px}.section-heading h2{font-size:40px}.section-heading p{font-size:8px}
  .prompt-field{padding:26px 22px}.prompt-field textarea{min-height:170px;font-size:24px}
  .parameter-grid{grid-template-columns:1fr}fieldset,fieldset:nth-child(2){border-right:0}.frame-fieldset{grid-column:auto}.frame-row{grid-template-columns:repeat(5,minmax(0,1fr))}.frame-row span{min-height:80px;display:grid;place-content:center;justify-items:center}.frame-row b{margin-top:8px}.frame.square{width:23px;height:23px}.frame.landscape32{width:29px;height:19px}.frame.landscape169{width:31px;height:17px}.frame.portrait23{width:18px;height:27px}.frame.portrait916{width:15px;height:26px}
  .output-row{grid-column:auto}.output-row label{padding:22px 18px}.connection-rail{padding:28px 22px}.generate-strip{grid-template-columns:1fr}.generate-strip p{min-height:58px;padding:18px 22px}#generate-button{min-height:68px}
  .gallery{min-height:300px}.empty-state{min-height:330px;padding:30px 20px}.image-info{grid-template-columns:1fr}.image-actions{justify-content:space-between}
  footer{grid-template-columns:1fr auto;padding:28px 8px 34px}footer p{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.analog-layer::after,.loading-segments i{animation:none}.loading-screen{transition:none}.app-shell{transition:none}}