@import url('/style.css');
:root{--bg:#101316;--panel:#1b2025;--text:#e6e9df;--quiet:#adb8b8;--accent:#c4f366}body{background:var(--bg);color:var(--text)}header,main{max-width:1440px;margin:auto;padding:0 44px}header{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3b4348;font:10px var(--mono);letter-spacing:.06em}header>a:hover{color:var(--accent)}header>span{color:var(--quiet)}.studio-title{padding:38px 0 30px;display:flex;justify-content:space-between;align-items:center}.studio-title h1{font-size:clamp(36px,4.8vw,68px);margin:14px 0}.studio-title h1 em{font-family:Georgia,serif;font-weight:400}.studio-title p:not(.eyebrow){color:var(--quiet);font-size:16px}.eyebrow{font-size:10px;color:var(--accent)}.signal{font:20px/1.5 var(--mono);color:var(--accent);border:1px solid #515e46;padding:15px 22px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;align-items:start}.monitor{position:sticky;top:20px;min-width:0}.monitor-top{display:flex;justify-content:space-between;gap:15px;padding:13px 16px;background:var(--panel);font:9px/1.6 var(--mono);color:var(--quiet)}.canvas-wrap{background:repeating-conic-gradient(#15191d 0 25%,#191e22 0 50%) 0/20px 20px;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #3b4348}canvas{max-width:100%;max-height:65dvh;width:auto;height:auto;display:block}.preview-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px}.preview-controls label{font-size:13px}button,select,input{font:inherit}button{background:transparent;color:var(--text);border:1px solid #515b61;padding:11px 14px;font-size:12px;cursor:pointer;min-height:44px}button:hover{background:#303a30;color:var(--accent);border-color:var(--accent)}button:disabled{opacity:.5;cursor:wait}#download{background:var(--accent);border-color:var(--accent);color:#17200e;font-weight:700}#status{font:11px/1.7 var(--mono);color:var(--quiet);min-height:38px;margin-top:14px}#status.error{color:#ffad94}.controls{background:var(--panel);padding:22px}.controls h2{font:11px/1.4 var(--mono);letter-spacing:.03em;margin:0 0 18px}.controls label{font-size:12px;display:block}.controls label span{display:block;color:var(--quiet);font-size:10px;margin-top:3px}input[type=file]{max-width:100%;font-size:11px;margin-top:12px}input::file-selector-button{background:#303b32;border:1px solid #647456;color:var(--text);padding:9px;margin-right:7px;cursor:pointer}.privacy{font-size:11px;color:var(--quiet);line-height:1.6;margin:13px 0 22px}select{width:100%;background:#101719;color:var(--text);border:1px solid #515b61;padding:10px;margin:10px 0}#load-sample{width:100%}.effect-tools{border-top:1px solid #465055;margin-top:26px;padding-top:24px}.effect-heading{display:flex;justify-content:space-between;gap:10px}.effect-heading>span{font:9px var(--mono);color:var(--accent)}.mutation{display:flex;gap:9px;margin-bottom:16px}.mutation button{flex:1}#mutate{border-color:var(--accent);color:var(--accent)}.seed-label{display:flex!important;align-items:center;justify-content:space-between;margin:12px 0 22px}#seed{background:#101719;color:var(--text);border:1px solid #515b61;padding:7px;width:110px}.fx-group{margin-top:18px}.fx-group h3{font:10px var(--mono);color:var(--accent);letter-spacing:.1em;border-bottom:1px solid #465055;padding-bottom:10px}.fx{padding:10px 0;border-bottom:1px solid #30393e}.fx label{display:flex;align-items:center;gap:9px;cursor:pointer;min-height:28px}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.fx-range{display:flex;gap:12px;align-items:center;padding:10px 0 0 25px}.fx-range[hidden]{display:none}.fx-range input{width:100%;accent-color:var(--accent)}.fx-range output{font:10px var(--mono);min-width:24px}.studio-foot{font:11px/1.8 var(--mono);color:var(--quiet);padding:35px 0 45px;max-width:900px}.studio-foot a{text-decoration:underline;color:var(--text)}:focus-visible{outline:3px solid #c4f366;outline-offset:4px}.skip{background:var(--accent);color:#101316}.input-tools>label{margin-top:10px}@media(max-width:1000px){header,main{padding-left:24px;padding-right:24px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.controls{padding:17px}}@media(max-width:700px){header,main{padding-left:20px;padding-right:20px}header>span,.signal{display:none}.studio-title{padding:28px 0}.studio-title h1{font-size:40px;line-height:1.05}.workspace{grid-template-columns:1fr;gap:25px}.monitor{position:static}.canvas-wrap{min-height:0}canvas{max-height:55dvh}.monitor-top{font-size:8px;flex-wrap:wrap}.preview-controls{gap:8px}.preview-controls label{font-size:11px}#download{font-size:11px;padding:10px}.controls{padding:20px}.studio-foot{font-size:10px}.effect-heading h2{font-size:10px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.example-gallery{border-top:1px solid #3b4348;padding:26px 0 38px}.examples-heading{display:flex;justify-content:space-between;gap:20px;align-items:end}.examples-heading h2{font-size:30px;margin-top:10px;letter-spacing:-.035em}.examples-heading>a{font:10px var(--mono);color:var(--accent);white-space:nowrap}.examples-intro{font-size:13px;color:var(--quiet);margin:14px 0 22px;max-width:760px}#example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.example-card{min-width:0;background:var(--panel);padding:12px}.example-card canvas{width:100%;height:auto;max-height:none;background:#101316}.example-labels{display:grid;grid-template-columns:1fr 1fr;font:8px var(--mono);letter-spacing:.08em;color:var(--quiet);padding:2px 0 8px}.example-labels span:nth-child(2){padding-left:8px;color:var(--accent)}.example-card h3{font-size:19px;line-height:1.15;letter-spacing:-.025em;margin:16px 0 10px}.example-card p{font-size:11px;line-height:1.65;color:var(--quiet);min-height:55px}.example-card button{font-size:10px;width:100%;margin-top:16px;padding:9px 5px}#workspace{scroll-margin-top:20px}@media(max-width:1000px){#example-grid{grid-template-columns:1fr 1fr}.example-card p{min-height:36px}}@media(max-width:650px){.examples-heading{display:block}.examples-heading>a{display:inline-block;margin-top:15px}.examples-heading h2{font-size:27px}#example-grid{grid-template-columns:1fr}.example-card{padding:16px}.example-card h3{font-size:23px}.example-card p{min-height:0;font-size:13px}.example-card button{font-size:12px}.example-labels{font-size:10px}.example-gallery{padding-bottom:30px}}