:root { color-scheme: dark; --bg:#05080f; --panel:#0d1320; --line:#223047; --cyan:#12e7f2; --orange:#ff9d00; --text:#eaf4ff; --muted:#8ea0b8; --violet:#a46cff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 52% -10%,#10253a 0,#070b13 38%,var(--bg) 72%); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; }
header { min-height:68px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(5,8,15,.88); position:sticky; top:0; z-index:2; backdrop-filter:blur(16px); }
.brand { font-weight:800; font-size:1.2rem; color:var(--cyan); letter-spacing:-.02em; }.mark { margin-right:.45rem; }
.judge-link { color:#b8c9df; font-size:.78rem; font-weight:700; text-decoration:none; border:1px solid #30435e; padding:.48rem .7rem; border-radius:99px; }.judge-link:hover,.judge-link:focus-visible { color:var(--cyan); border-color:var(--cyan); }
.badges { display:flex; gap:.5rem; }.badges span { border:1px solid #30435e; color:#9bb0c9; padding:.32rem .6rem; border-radius:99px; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
main { width:min(1440px,94vw); margin:0 auto; }.hero { padding:3.2rem 0 2rem; max-width:900px; }.eyebrow { color:var(--orange); font:700 .72rem ui-monospace,monospace; letter-spacing:.16em; }.hero h1 { font-size:clamp(2.1rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.055em; margin:.7rem 0 1rem; }.lede { color:#a8b8cc; max-width:760px; font-size:1.08rem; line-height:1.6; }
.workspace { display:grid; grid-template-columns:minmax(390px,.88fr) minmax(480px,1.25fr); gap:1.1rem; align-items:start; }.panel { background:linear-gradient(180deg,rgba(16,24,39,.96),rgba(9,14,24,.96)); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 70px rgba(0,0,0,.28); }.controls { padding:1.25rem; }.output { min-height:810px; padding:1.25rem; position:sticky; top:84px; }
.panel-title { font:700 .78rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; color:#bed0e7; margin-bottom:1rem; }.panel-title span { color:var(--orange); margin-right:.55rem; }
label { display:block; color:#aabbd0; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; margin:.9rem 0 .38rem; font-weight:700; }.hint,.control-note { color:#6f849f; font-size:.74rem; margin:.4rem 0 0; }.control-note { font-size:.68rem; line-height:1.35; text-transform:none; letter-spacing:0; font-weight:400; }
textarea,input,select { width:100%; border:1px solid #283852; background:#080d16; color:var(--text); border-radius:8px; padding:.78rem .85rem; font:inherit; outline:none; transition:.18s; }textarea { line-height:1.5; resize:vertical; }textarea:focus,input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(18,231,242,.1); }.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; }
details { margin:1.2rem 0; border:1px solid var(--line); border-radius:9px; padding:.8rem; }summary { cursor:pointer; color:#b8c8db; font:700 .76rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }.module-list { padding-top:.5rem; display:grid; grid-template-columns:1fr 1fr; gap:.25rem .7rem; }.module { margin:0; display:flex; align-items:flex-start; gap:.45rem; text-transform:none; letter-spacing:0; font-size:.67rem; font-weight:400; color:#8195ad; }.module input { width:auto; accent-color:var(--orange); }.module b { display:block; color:var(--orange); font:700 .65rem ui-monospace,monospace; }
button { border:0; border-radius:7px; padding:.85rem 1rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; background:linear-gradient(90deg,#09cce2,var(--cyan)); color:#001014; }button:disabled { opacity:.45; cursor:not-allowed; }.controls>button { width:100%; min-height:48px; }.secondary { padding:.5rem .7rem; background:#111b2b; border:1px solid #31435e; color:#b8c9df; font-size:.68rem; }.output-head { display:flex; justify-content:space-between; gap:1rem; }.actions { display:flex; gap:.4rem; }.empty { display:grid; place-items:center; align-content:center; min-height:650px; text-align:center; color:#71859e; }.empty h2 { color:#bed0e5; margin:.8rem 0 0; }.empty p { margin:.4rem; }.orb { display:grid; place-items:center; width:90px; height:90px; border-radius:50%; color:var(--cyan); font:800 2rem ui-monospace,monospace; border:1px solid var(--cyan); box-shadow:0 0 45px rgba(18,231,242,.24),inset 0 0 28px rgba(18,231,242,.12); }
pre { white-space:pre-wrap; word-break:break-word; margin:1rem 0; padding:1rem; max-height:680px; overflow:auto; color:#d7e7f7; background:#060a12; border:1px solid #1d2b40; border-radius:9px; font:500 .82rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }.status { min-height:1.4rem; margin-top:.7rem; font-size:.78rem; }.status.error { padding:.7rem; color:#ff8a8a; border:1px solid #7a2530; background:#2a1016; border-radius:7px; }.status.success { color:#62f6ba; }.meta { color:#657c97; font:.7rem ui-monospace,monospace; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(0,16,20,.25); border-top-color:#001014; border-radius:50%; animation:spin .8s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.gallery { margin:1.8rem 0 1.2rem; }.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:.9rem; }.gallery-heading .eyebrow { margin:0 0 .45rem; }.gallery-heading h2 { margin:0; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.04em; }.gallery-heading>p { max-width:460px; margin:0; color:#8295ad; font-size:.86rem; line-height:1.5; }.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; }.gallery-card { overflow:hidden; background:linear-gradient(180deg,rgba(16,24,39,.96),rgba(9,14,24,.96)); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 70px rgba(0,0,0,.22); }.video-frame { aspect-ratio:16/9; background:#060a12; }.video-frame iframe { width:100%; height:100%; display:block; border:0; }.gallery-card-body { padding:1rem 1.05rem 1.1rem; }.gallery-card-kicker { color:var(--orange); font:700 .66rem ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }.gallery-card h3 { margin:.5rem 0 .35rem; color:#eaf4ff; font-size:1.05rem; }.gallery-card p { margin:0 0 .8rem; color:#8295ad; font-size:.82rem; line-height:1.5; }.gallery-card a { color:var(--cyan); font-size:.76rem; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }.gallery-card a:hover,.gallery-card a:focus-visible { color:#fff; text-decoration:underline; }.laws { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.2rem 0 3rem; }.laws article { border:1px solid var(--line); background:#09101b; padding:1rem; border-radius:10px; }.laws b { display:block; color:var(--cyan); margin-bottom:.45rem; }.laws span { color:#8295ad; font-size:.84rem; line-height:1.5; }footer { border-top:1px solid var(--line); color:#60758f; text-align:center; padding:1.4rem; font-size:.75rem; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; }.output { position:static; min-height:520px; }.empty { min-height:360px; }.laws { grid-template-columns:1fr; }.gallery-heading { align-items:start; flex-direction:column; gap:.7rem; }.badges span:not(:last-child) { display:none; } }
@media (max-width:560px) { .grid.two,.module-list { grid-template-columns:1fr; }.hero { padding-top:2rem; }.workspace { display:block; }.output { margin-top:1rem; }.badges { display:none; }.judge-link { padding:.42rem .58rem; font-size:.67rem; } }