:root{color-scheme:dark;--bg:#080a12;--panel:#10131e;--panel2:#151928;--text:#f5f7ff;--muted:#9ba3b8;--line:#252a3b;--violet:#9b87ff;--blue:#56b8ff;--green:#58d9a3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% -10%,#1d1745 0,transparent 32%),var(--bg);color:var(--text)}button,input{font:inherit}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);border-bottom:1px solid var(--line);background:#080a12d9;position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{color:var(--text);text-decoration:none;font-weight:750;letter-spacing:-.02em}.prompt{color:var(--violet);font-family:ui-monospace,monospace}.local{font:12px ui-monospace,monospace;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 10px var(--green)}main{max-width:1120px;margin:auto;padding:72px 24px}.hero{max-width:760px;margin-bottom:88px}.eyebrow{font:700 11px ui-monospace,monospace;letter-spacing:.16em;color:var(--violet);margin:0 0 18px}.hero h1{font-size:clamp(44px,7vw,76px);line-height:.98;letter-spacing:-.055em;margin:0 0 28px}.hero h1 span{color:var(--muted)}.hero>p:not(.eyebrow){font-size:18px;line-height:1.7;color:var(--muted);max-width:650px}.search{margin-top:32px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel);padding:0 18px;height:58px;border-radius:12px}.search:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px #9b87ff22}.search input{width:100%;background:none;border:0;outline:0;color:var(--text)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-head h2{font-size:30px;margin:0}.section-head #count{color:var(--muted);font:12px ui-monospace,monospace}.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.platform,.card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel2),var(--panel));border-radius:14px;color:var(--text);text-align:left}.platform{padding:22px;cursor:pointer}.platform:hover,.platform.active{border-color:var(--violet);transform:translateY(-2px)}.platform strong{display:block;margin-bottom:7px}.platform small{color:var(--muted)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 18px}.filter{background:transparent;border:1px solid var(--line);color:var(--muted);padding:8px 13px;border-radius:999px;cursor:pointer}.filter.active,.filter:hover{background:#9b87ff18;border-color:var(--violet);color:var(--text)}.library{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.card{padding:24px}.card .meta{display:flex;gap:8px;flex-wrap:wrap}.badge{font:11px ui-monospace,monospace;color:var(--blue);background:#56b8ff12;border:1px solid #56b8ff35;padding:5px 8px;border-radius:6px}.card h3{font-size:21px;margin:20px 0 8px}.card p{color:var(--muted);line-height:1.55}.card button,.back,.reveal{border:0;color:var(--text);background:none;padding:8px 0;cursor:pointer;font-weight:700}.card button{color:var(--violet)}.empty{grid-column:1/-1;padding:42px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}.detail{max-width:850px}.back{color:var(--muted);margin-bottom:30px}.detail h1{font-size:44px;letter-spacing:-.04em;margin:16px 0}.detail-summary{font-size:18px;line-height:1.7;color:var(--muted)}.step{margin:22px 0;border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--panel)}.step h2{margin:8px 0}.step .phase{font:11px ui-monospace,monospace;color:var(--violet);text-transform:uppercase;letter-spacing:.12em}.hint,.solution,.commands{border-left:2px solid var(--violet);padding:12px 16px;margin:14px 0;background:#9b87ff0b}.solution{border-color:var(--green)}code{font-family:ui-monospace,monospace;color:#dce8ff}.reveal{color:var(--blue);margin-right:18px}footer{border-top:1px solid var(--line);padding:30px;text-align:center;color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:2px solid var(--blue);outline-offset:3px}@media(max-width:760px){main{padding-top:48px}.platforms{grid-template-columns:repeat(2,1fr)}.library{grid-template-columns:1fr}.local{display:none}.hero{margin-bottom:60px}}
:where(.creator-footer){display:flex;justify-content:center;align-items:center;gap:10px 22px;flex-wrap:wrap}:where(.creator-footer) p{margin:0}:where(.creator-footer) a{color:var(--blue);text-decoration:none}:where(.creator-footer) a:hover{text-decoration:underline}:where(.brand) img{display:block;width:auto;height:42px}:where(.hero-author){margin-top:18px;border:1px solid var(--violet);border-radius:9px;background:#9b87ff18;color:var(--text);padding:10px 15px;cursor:pointer;font-weight:700}:where(.hero-author):hover{background:#9b87ff28}
:where(.hero-author){display:inline-flex;align-items:center;justify-content:center;margin-top:18px;border:1px solid #8c7cff;border-radius:10px;background:linear-gradient(135deg,#765cff,#238fd7);box-shadow:0 8px 24px #765cff26;color:#fff;padding:11px 17px;cursor:pointer;font-weight:750;letter-spacing:-.01em;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}:where(.hero-author):hover{border-color:#a99dff;background:linear-gradient(135deg,#846eff,#2aa8ef);box-shadow:0 10px 30px #765cff3d;transform:translateY(-1px)}:where(.hero-author):active{transform:translateY(0)}:where(.hero-author):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.authoring{max-width:1120px;margin:0 auto;padding:64px 24px 88px}.author-shell{max-width:920px;margin:0 auto}.author-shell>h1{font-size:clamp(38px,6vw,60px);letter-spacing:-.045em;margin:0 0 12px}.author-shell>p:not(.eyebrow){color:var(--muted);line-height:1.65;margin:0 0 36px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}.form-grid label,.editor-field,.upload{display:flex;flex-direction:column;gap:9px;color:#dce2f2;font-size:13px;font-weight:700}.form-grid input,.form-grid select,.editor-field textarea,.upload input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:13px 14px}.form-grid input:focus,.form-grid select:focus,.editor-field textarea:focus,.upload input:focus{border-color:var(--violet);outline:0;box-shadow:0 0 0 3px #9b87ff20}.editor-field{margin:18px 0}.editor-field textarea{min-height:170px;resize:vertical;font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.upload{margin:26px 0}.upload span{color:var(--muted);font-size:12px;font-weight:400}.image-list{color:var(--muted);font:12px/1.6 ui-monospace,monospace}.form-actions{display:flex;gap:12px;align-items:center;margin-top:28px}.form-actions button,.preview-head button{border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);padding:11px 17px;cursor:pointer;font-weight:700}.form-actions button[type="submit"]{border-color:#8c7cff;background:linear-gradient(135deg,#765cff,#238fd7)}.form-actions button:disabled{cursor:wait;opacity:.55}#form-status{min-height:22px;color:var(--blue);font:12px/1.6 ui-monospace,monospace}.preview-panel{margin-top:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:24px}.preview-panel pre{max-height:520px;overflow:auto;white-space:pre-wrap;color:#dce8ff}.preview-head{display:flex;align-items:center;justify-content:space-between}.preview-head h2{margin:0}.primary-link{color:var(--blue)}[hidden]{display:none!important}@media(max-width:760px){.brand img{height:34px}.form-grid{grid-template-columns:1fr}.authoring{padding-top:42px}.creator-footer{align-items:center;flex-direction:column}.form-actions{align-items:stretch;flex-direction:column}.form-actions button{width:100%}}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:20px}.brand .brand-mark{width:38px;height:38px;object-fit:contain}.brand-ctf{color:#fff}.brand-writeups{background:linear-gradient(90deg,var(--violet),var(--blue));background-clip:text;-webkit-background-clip:text;color:transparent}@media(max-width:520px){.brand{font-size:17px}.brand .brand-mark{width:32px;height:32px}}