@font-face { font-family: SG; src: url(/static/sg-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: SG; src: url(/static/sg-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: Plex; src: url(/static/plex-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --bg:#090c12; --surface:#131821; --surface-raised:#1a202b; --ink:#f3f2ef; --muted:#a3adba; --quiet:#778493; --line:#303846; --signal:#ff7d4e; --signal-light:#ffae82; --mint:#89dbc2; --sky:#9bbfff; --bad:#ff9b9b; --mono:Plex,ui-monospace,monospace; --r:20px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse 60% 36% at 78% -7%,#352116 0%,transparent 70%),radial-gradient(ellipse 42% 32% at 5% 25%,#101e28 0%,transparent 75%),var(--bg); color:var(--ink); font:400 16px/1.48 SG,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(#67717b17 1px,transparent 1px),linear-gradient(90deg,#67717b17 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
a { color:inherit; }
button,select,input { font:inherit; color:inherit; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,.drop:focus-within { outline:2px solid var(--signal-light); outline-offset:3px; }
.wrap { position:relative; max-width:1260px; margin:0 auto; padding:26px 28px 88px; }
.topbar,.brand,.session,.card-heading,.subheading,.history-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar { margin-bottom:29px; }
.brand { justify-content:flex-start; gap:12px; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; border-radius:12px; background:linear-gradient(145deg,#ffad6f,#eb633d 70%); color:#1b110e; box-shadow:0 8px 25px #ff75472d,inset 0 1px #ffffff8a; font-weight:800; font-size:19px; letter-spacing:-.11em; transform:rotate(-5deg); }
.logo { font-weight:800; font-size:23px; letter-spacing:-.045em; line-height:1; }
.logo b { color:var(--signal); font-weight:800; }
.logo small { display:block; margin:5px 0 0 1px; color:var(--quiet); font:400 10px var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.session { justify-content:flex-end; gap:11px; }
.online,.user-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; background:#1a2029aa; padding:8px 12px; color:var(--muted); font:400 11px var(--mono); letter-spacing:.025em; }
.online i,.engine-light { width:7px; height:7px; flex:none; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px #89dbc221,0 0 15px #89dbc28e; }
.user-pill { color:var(--ink); text-transform:capitalize; }
.eyebrow,.card-aside,.tag { color:var(--signal-light); font:400 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(42px,5vw,70px); line-height:1.01; font-weight:800; letter-spacing:-.062em; }
h1 em { font-style:normal; color:var(--signal); }
h2 { font-size:27px; font-weight:800; letter-spacing:-.045em; line-height:1.12; margin:6px 0 0; }
.hero { min-height:306px; display:grid; grid-template-columns:minmax(0,1.14fr) minmax(280px,.86fr); overflow:hidden; border:1px solid #564036; border-radius:26px; background:radial-gradient(circle at 75% 39%,#8b45244a,transparent 36%),linear-gradient(120deg,#202128 1%,#251b1d 56%,#151a22 100%); box-shadow:0 23px 70px #0005,inset 0 1px #ffffff1a; }
.hero-copy { padding:45px 48px 26px; display:flex; flex-direction:column; align-items:flex-start; }
.hero-copy h1 { max-width:710px; margin:15px 0 17px; }
.hero-copy p { max-width:610px; color:#c7c3c1; font-size:16px; line-height:1.55; margin-bottom:23px; }
.hero-foot { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:#b8aaa3; font:400 11px var(--mono); letter-spacing:.035em; }
.hero-foot > span:first-child { display:inline-flex; align-items:center; gap:9px; }
.hero-spark { width:6px; height:6px; background:var(--signal); transform:rotate(45deg); }
.hero-visual { position:relative; min-height:290px; display:grid; place-items:center; isolation:isolate; }
.hero-visual::before { content:""; position:absolute; width:300px; height:300px; border:1px solid #ff916d30; border-radius:50%; box-shadow:0 0 0 55px #ff916d0a,0 0 0 110px #ff916d05; }
.frame { width:270px; height:175px; border-radius:13px; position:absolute; border:1px solid #ffb49b7a; }
.frame-back { transform:translate(29px,-25px) rotate(8deg); background:#c4643855; box-shadow:0 20px 45px #0004; }
.frame-front { display:grid; place-items:center; overflow:hidden; transform:translate(-3px,0) rotate(-6deg); background:linear-gradient(145deg,#a9482c,#ea8150 54%,#ffb271); box-shadow:0 22px 35px #0008,inset 0 1px #ffffff78; }
.frame-front::before { content:""; position:absolute; width:200px; height:200px; border:1px solid #fff8; border-radius:50%; box-shadow:0 0 0 28px #fff2,0 0 0 55px #fff2; }
.frame-orbit { position:absolute; width:430px; height:28px; border:1px solid #fff9; border-radius:50%; transform:rotate(-28deg); }
.frame-play { z-index:1; display:grid; place-items:center; width:54px; height:54px; padding-left:3px; border-radius:50%; background:#181b20e0; color:#fff; font-size:19px; box-shadow:0 8px 20px #0006; }
.frame-caption { position:absolute; bottom:11px; left:14px; right:14px; display:flex; justify-content:space-between; color:#321812; font:400 10px var(--mono); letter-spacing:.12em; }
.hero-frame-label { position:absolute; right:22px; bottom:18px; color:#dab2a0; font:400 10px var(--mono); letter-spacing:.11em; }
.grid { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr); gap:18px; margin-top:20px; align-items:start; }
.card,.job { border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(145deg,#181e28,#12171f 72%); box-shadow:0 10px 38px #0002,inset 0 1px #ffffff09; }
.card { padding:27px; }
.card-heading { align-items:flex-start; margin-bottom:20px; }
.card-aside { color:var(--quiet); margin-top:5px; white-space:nowrap; }
.drop { display:grid; justify-items:center; align-content:center; min-height:195px; padding:25px 20px; border:1.5px dashed #5a6570; border-radius:16px; background:radial-gradient(circle at 50% 0%,#ff875216,transparent 70%),#1d242d; cursor:pointer; text-align:center; transition:border-color .18s,background .18s,transform .18s; }
.drop:hover,.drop.over { border-color:var(--signal); background:#2a2728; transform:translateY(-2px); }
.drop-icon { display:grid; place-items:center; width:49px; height:49px; margin-bottom:12px; border-radius:14px; border:1px solid #fa986d70; background:#ff87521a; color:var(--signal-light); font-size:29px; line-height:1; }
.drop strong { font-weight:800; font-size:19px; letter-spacing:-.02em; }
.drop .meta { margin-top:5px; }
.meta { color:var(--muted); font:400 12px/1.5 var(--mono); }
.hint { color:var(--quiet); font-size:12px; line-height:1.55; margin:10px 2px 25px; }
.hint code { color:#c7d1dc; font:400 11px var(--mono); }
.subheading { margin-bottom:10px; }
.subheading .meta { color:var(--quiet); }
.presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.preset { min-height:76px; padding:12px 12px 13px; border:1px solid #3a4350; border-radius:12px; background:#202630; text-align:left; cursor:pointer; transition:border-color .15s,transform .15s,background .15s,box-shadow .15s; }
.preset:hover { border-color:#728092; transform:translateY(-2px); }
.preset[aria-pressed=true] { border-color:var(--signal); background:#382822; box-shadow:inset 0 0 0 1px #ff7d4e6b,0 0 0 3px #ff7d4e16; }
.preset b { display:block; color:var(--ink); font-size:14px; font-weight:800; }
.preset[aria-pressed=true] b { color:#ffd7c3; }
.preset span { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.3; }
.preset-note { min-height:18px; margin:11px 0 19px; color:#b6bec7; font-size:12px; }
details { margin:0; }
summary { list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
.advanced { margin:4px 0 22px; border-top:1px solid var(--line); padding-top:16px; }
.advanced summary,.token-box summary { display:flex; align-items:center; justify-content:space-between; color:#c0c8d2; font-size:13px; }
.advanced summary span,.token-box summary span { color:var(--signal); font-size:18px; transition:transform .15s; }
details[open] summary span { transform:rotate(180deg); }
.row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.row label,.login label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.row input,.row select,.login input { width:160px; padding:10px 12px; border:1px solid #495361; border-radius:9px; background:#0e131b; color:var(--ink); }
.row input::placeholder,.login input::placeholder { color:var(--quiet); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:10px; padding:11px 17px; background:var(--signal); color:#25130f; font-weight:800; text-decoration:none; cursor:pointer; transition:transform .16s,background .16s,border-color .16s,box-shadow .16s; }
.btn:hover:not(:disabled) { transform:translateY(-2px); background:#ff946a; box-shadow:0 9px 20px #ff794534; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.primary { width:100%; min-height:49px; background:linear-gradient(110deg,#ffad74,#ff7850 70%); box-shadow:0 9px 22px #ff72452a; font-size:15px; }
.btn.primary:hover:not(:disabled) { background:linear-gradient(110deg,#ffbe8d,#ff8961 70%); }
.btn.primary span { margin-left:auto; font-size:21px; line-height:1; }
.btn.ghost { border-color:#45505f; background:#1b222c; color:#d3dce6; font-weight:400; box-shadow:none; }
.btn.ghost:hover { border-color:#8895a5; background:#26303c; }
.btn.small { padding:7px 11px; border-radius:8px; font-size:12px; }
.side-card { padding-bottom:21px; }
.engine-light { margin:8px 8px 0 0; }
.stat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.stat div { min-height:85px; padding:13px; border:1px solid #34404c; border-radius:12px; background:#202630; }
.stat .tag { display:block; color:var(--quiet); font-size:10px; letter-spacing:.08em; }
.stat b { display:block; margin-top:4px; color:#f9f5ef; font-size:25px; letter-spacing:-.04em; line-height:1.2; }
.guide { margin-top:21px; padding:20px; border-radius:13px; border:1px solid #624432; background:linear-gradient(135deg,#39271f,#241f23); }
.guide ol { list-style:none; counter-reset:guide; margin:15px 0; padding:0; }
.guide li { counter-increment:guide; display:flex; align-items:baseline; gap:10px; color:#e6d4c7; font-size:13px; margin:11px 0; }
.guide li::before { content:counter(guide,decimal-leading-zero); color:var(--signal-light); font:400 11px var(--mono); }
.guide li b { font-weight:800; }
.guide p { margin:17px 0 0; padding-top:15px; border-top:1px solid #ffffff1e; color:#cbb2a4; font-size:12px; line-height:1.5; }
.machine-note { margin:18px 0; color:var(--muted); font-size:12px; line-height:1.5; }
.token-box { border-top:1px solid var(--line); padding-top:14px; }
.token-box .meta { margin:10px 0 0; }
.history { margin-top:41px; }
.history-head { margin-bottom:16px; align-items:end; }
.history-head h2 { font-size:31px; }
.history-count { border:1px solid var(--line); border-radius:999px; padding:6px 11px; color:var(--muted); font:400 11px var(--mono); }
.jobs { display:flex; flex-direction:column; gap:11px; }
.job { padding:19px 21px; }
.job-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.job-top .name { flex:1; min-width:180px; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.job-top .meta { flex-basis:100%; order:3; color:var(--quiet); }
.pill { border-radius:999px; padding:5px 10px; background:#333b48; color:#d5dbe2; font:400 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.s-running { background:#6a4526; color:#ffe0b3; } .s-done { background:#1d4a40; color:#9be6ca; } .s-failed,.s-cancelled { background:#63313a; color:#ffbec6; } .s-queued,.s-preparing { background:#29425d; color:#bed9ff; }
.bar { height:7px; overflow:hidden; margin:15px 0 7px; border-radius:99px; background:#2b3440; }
.bar[hidden] { display:none; }
.bar i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--signal),#ffc08a); transition:width .6s; }
.job .row { margin-top:16px; }
.job .row select { max-width:270px; }
.out { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px; margin-top:19px; }
.out video,.out img { display:block; width:100%; border:1px solid var(--line); border-radius:12px; background:#000; }
.files { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.files a { display:inline-flex; padding:7px 10px; border:1px solid #47515e; border-radius:8px; color:#c7d5e5; font-size:12px; text-decoration:none; }
.files a:hover { border-color:var(--signal); color:#fff; }
pre.log { max-height:240px; overflow:auto; margin:14px 0 0; padding:13px; border-radius:10px; background:#090e15; color:#b8c6d3; font:400 11px/1.55 var(--mono); white-space:pre-wrap; }
.err { min-height:0; margin:9px 0 0; color:var(--bad); font-size:13px; }
.empty { padding:30px; border:1px dashed var(--line); border-radius:var(--r); color:var(--muted); text-align:center; }
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,420px); align-items:center; gap:80px; padding-top:40px; padding-bottom:40px; }
.auth-story { max-width:620px; padding:0 0 35px 12px; }
.auth-story .brand { margin-bottom:115px; }
.auth-story h1 { margin:20px 0 22px; }
.auth-story > p { max-width:480px; color:#b9c1ca; font-size:17px; line-height:1.62; }
.auth-stats { display:flex; align-items:center; gap:12px; margin-top:43px; color:var(--quiet); font:400 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.auth-stats i { width:3px; height:3px; border-radius:50%; background:var(--signal); }
.login { padding:33px; box-shadow:0 25px 70px #0006; }
.login h2 { font-size:30px; margin:9px 0 5px; }
.login-copy { margin-bottom:31px; color:var(--muted); font-size:14px; }
.login label { margin-bottom:16px; color:#cbd3dd; font-size:13px; }
.login input { width:100%; min-height:46px; margin-top:3px; }
.login .btn { margin-top:10px; }
@media (max-width:980px) { .grid { grid-template-columns:1fr; } .side-card { display:grid; grid-template-columns:1fr 1fr; column-gap:18px; } .side-card .card-heading,.side-card .machine-note,.side-card .token-box { grid-column:1/-1; } .guide { margin-top:0; } .auth-wrap { gap:35px; } }
@media (max-width:720px) { .wrap { padding:18px 15px 65px; } .topbar { align-items:flex-start; } .session { flex-wrap:wrap; gap:6px; } .online { display:none; } .hero { grid-template-columns:1fr; } .hero-copy { padding:33px 25px; } .hero-copy h1 { font-size:clamp(41px,9vw,58px); } .hero-visual { display:none; } .card { padding:21px; } .presets { grid-template-columns:repeat(2,minmax(0,1fr)); } .side-card { display:block; } .guide { margin-top:20px; } .out { grid-template-columns:1fr; } .auth-wrap { grid-template-columns:1fr; min-height:100vh; gap:23px; align-content:center; } .auth-story { padding:0; } .auth-story .brand { margin-bottom:37px; } .auth-story h1 { font-size:43px; } .auth-story > p,.auth-stats { display:none; } .login { padding:25px; } }
@media (max-width:430px) { .logo { font-size:20px; } .brand-mark { width:34px; height:34px; font-size:16px; } .card-aside { display:none; } .presets { gap:6px; } .preset { padding:10px; } .job { padding:16px; } .job .row { gap:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }