@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#130d1d;--panel:#21162e;--ink:#fff8f3;--muted:#d1c2df;--violet:#c099ff;--gold:#ffd16d;--line:#483558;--display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--body:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-padding-top:2rem}body{margin:0;isolation:isolate;background:#09071a;color:var(--ink);font:1rem/1.55 var(--body)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.skip{position:absolute;left:1rem;top:-10rem;background:var(--gold);color:#1b1026;padding:.6rem;z-index:5}.skip:focus{top:1rem}img{display:block;width:100%;height:auto}figure,p,h1,h2,h3{margin:0}
.bar,footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1440px;padding:1rem clamp(1.2rem,5vw,5rem);margin:auto}.bar{min-height:76px}.brand{display:inline-flex;align-items:center;gap:.3em;font:800 clamp(1.25rem,2.2vw,1.65rem)/1 var(--display);white-space:nowrap}.brand em{color:var(--violet);font-style:normal}.mark{margin-right:.25em;color:var(--gold)}nav{display:flex;gap:clamp(.8rem,3vw,2.5rem);align-items:center;font-weight:700;font-size:.9rem}.join{border:1px solid var(--line);padding:.6rem .9rem;border-radius:5px}nav a:hover,footer a:hover{color:var(--gold)}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);max-width:1440px;margin:auto;padding:clamp(2.3rem,6vw,5.5rem) clamp(1.2rem,7vw,7rem);background:linear-gradient(100deg,rgb(9 6 22 / 68%),transparent 75%);border-block:1px solid var(--line)}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--gold)}h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.92}h1{font-size:clamp(5rem,12vw,11.5rem);letter-spacing:-.045em;margin:.12em 0 .14em}h1 em{color:var(--violet);font-style:normal}h1 span{color:var(--gold)}.hero-copy>p:not(.eyebrow),.participate p:not(.eyebrow){max-width:36ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem)}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.65rem}.button{display:inline-flex;justify-content:center;align-items:center;gap:.7rem;border:1px solid transparent;border-radius:5px;padding:.75rem 1rem;font-weight:800;font-size:.9rem;min-height:46px}.gold{background:var(--gold);color:#22132d}.gold:hover{background:#ffe2a2}.outline{border-color:#866aa4;background:transparent;color:var(--ink)}.outline:hover{background:#38254f}.hero-art{transform:rotate(2.4deg);background:#fff0c6;padding:.55rem .55rem .45rem;border:2px solid #191020;box-shadow:9px 12px 0 #190d26;max-width:560px;justify-self:center;width:100%}.hero-art img{aspect-ratio:1.13;object-fit:cover;object-position:center 37%;border:1px solid #191020}.hero-art figcaption{color:#23162e;font-weight:800;font-size:.86rem;padding:.45rem .2rem 0}
.section{max-width:1440px;margin:auto;padding:clamp(2.8rem,6vw,6rem) clamp(1.2rem,7vw,7rem)}h2{font-size:clamp(3.2rem,7vw,6rem);margin:.12em 0 .42em}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem)}article{border:1px solid var(--line);background:rgb(16 10 30 / 87%);border-radius:9px;overflow:hidden}.art{width:100%;display:block;border:0;background:#3e2953;padding:0;overflow:hidden}.art img{aspect-ratio:4/3;object-fit:cover;object-position:center 35%;transition:transform .25s}.art:hover img{transform:scale(1.04)}.card-copy{padding:1.2rem}.card-copy h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:.23em 0 .44em}.text-button{background:transparent;color:var(--violet);border:0;padding:0;font-weight:800}.text-button:hover{text-decoration:underline}
.team,.participate{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:2rem}.team h2{margin-bottom:0}.names{margin:0;display:flex;flex-wrap:wrap;gap:.65rem;list-style:none;padding:0}.names li{border:1px solid #74599a;border-radius:30px;padding:.45rem .95rem;color:#e7d7ff}#fiche{background:rgb(16 10 30 / 88%);padding:clamp(1rem,3vw,2rem);border:1px solid var(--line);border-radius:9px}label{display:block;font-weight:800;margin:0 0 .35rem}input,textarea{width:100%;padding:.65rem .75rem;margin:0 0 1rem;border:1px solid #74599a;border-radius:5px;background:#241831;color:var(--ink)}textarea{resize:vertical}#result{margin-top:1.3rem}.status{margin-top:.6rem;color:var(--violet)}footer{min-height:80px;flex-wrap:wrap;color:var(--muted);font-size:.87rem}
dialog{width:min(94vw,900px);max-height:92vh;border:1px solid var(--line);border-radius:9px;background:#1b1226;color:var(--ink);padding:1rem}dialog::backdrop{background:#0b0611e8}.dialog-bar{display:flex;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:.6rem}.dialog-bar h2{font-size:clamp(1.5rem,5vw,2.5rem);margin:0}.close{border:1px solid var(--line);background:#2b1c39;color:#fff;min-width:44px;height:44px;border-radius:4px;font-size:1.5rem}dialog img{width:auto;max-width:100%;max-height:calc(92vh - 5.5rem);object-fit:contain;margin:auto}
@media(max-width:760px){.hero,.team,.participate{grid-template-columns:1fr}.hero{gap:2.4rem}.hero-art{width:calc(100% - 14px)}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bar{flex-wrap:wrap}.join{padding:.35rem .55rem}}@media(max-width:470px){.cards{grid-template-columns:1fr}.bar{gap:.65rem}.bar nav{gap:.8rem;font-size:.82rem}h1{font-size:clamp(4.1rem,18vw,6rem)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.worlds{border-top:1px solid var(--line)}
.worlds .art img{aspect-ratio:16/10;object-position:center}
select{display:block;width:100%;padding:.65rem .75rem;margin:0 0 1rem;border:1px solid #74599a;border-radius:5px;background:#241831;color:var(--ink);font:inherit}
select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
label small{color:var(--muted);font-weight:500}
@media(max-width:470px){.bar nav{flex-wrap:wrap}}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgb(8 5 20 / 38%),rgb(8 5 20 / 64%)),url("nebuleuse.webp") center / cover no-repeat}
@media(max-width:760px){.hero{background:linear-gradient(180deg,rgb(9 6 22 / 65%),transparent)}}

.world-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;max-width:680px}
.world-count{margin:0 0 .85rem;color:var(--muted);font-weight:700}
.world-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.world-pages[hidden]{display:none}
.world-pages button:disabled{opacity:.44;cursor:default}
@media(max-width:470px){.world-filters{grid-template-columns:1fr;gap:0}}

.studio{border-top:1px solid var(--line)}
.studio form{background:rgb(16 10 30 / 88%);border:1px solid var(--line);border-radius:9px;padding:clamp(1rem,3vw,2rem)}
.studio fieldset{border:1px solid var(--line);border-radius:5px;margin:0;padding:.8rem 1rem}
.studio legend{font-weight:800;padding:0 .35rem}
#comic-cast{display:flex;flex-wrap:wrap;gap:.55rem 1.2rem}
#comic-cast label{display:flex;align-items:center;gap:.45rem;margin:0}
#comic-cast input{width:auto;margin:0;accent-color:var(--violet)}
#comic-output{margin-top:1.5rem}
#comic-output h3{font-size:2.3rem}
#comic-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding-left:1.3rem}
#comic-panels li{background:rgb(16 10 30 / 88%);border:1px solid var(--line);border-radius:5px;padding:.8rem}
#comic-panels strong{color:var(--gold)}
#comic-status{margin-top:.6rem;color:var(--violet)}
@media(max-width:760px){#comic-panels{grid-template-columns:1fr}}
#comic-board{display:block;width:100%;height:auto;max-width:900px;margin:1rem auto;border-radius:8px}
