:root{color-scheme:dark;--pink:#ff71ce;--cyan:#01cdfe;--yellow:#fffb96;--purple:#b967ff;--ink:#080010;--panel:#120024}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#fff;font:15px/1.5 'Space Grotesk',sans-serif;min-height:100svh;background-image:linear-gradient(#b967ff16 1px,transparent 1px),linear-gradient(90deg,#01cdfe12 1px,transparent 1px);background-size:46px 46px}[hidden]{display:none!important}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:2px solid var(--purple);background:#080010;color:var(--yellow);padding:8px 14px;font-weight:700}button:hover{border-color:var(--cyan);color:#fff}button:disabled{opacity:.55;cursor:wait}button.primary{background:var(--cyan);color:#080010;border-color:var(--cyan);box-shadow:4px 4px 0 var(--pink);transform:skew(-5deg)}button.primary:hover{background:var(--yellow)}a{color:var(--cyan)}:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}input,select{min-height:44px;background:#080010;border:2px solid var(--purple);color:white;padding:10px 12px;min-width:0}input{width:100%}label{display:block;font-weight:600;margin:16px 0 6px}.admin-header{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:22px 30px;border-bottom:2px solid var(--pink);background:linear-gradient(transparent 50%,#0004 50%),#120024;background-size:100% 4px}.brand{display:block;text-decoration:none;background:var(--pink);color:#080010;padding:8px 18px;box-shadow:6px 6px 0 var(--cyan);transform:skew(-12deg) rotate(-2deg)}.brand span{display:block;font:24px 'VT323',monospace;letter-spacing:3px}.brand strong{font-size:12px}.admin-header nav{display:flex;flex-wrap:wrap;gap:9px;margin-left:auto}.admin-header nav a{font:18px 'VT323',monospace;text-transform:uppercase;text-decoration:none;padding:12px;background:#080010;border:1px solid var(--purple);transform:skew(-10deg)}.admin-header nav a[aria-current]{background:var(--pink);color:#080010;box-shadow:3px 3px 0 var(--cyan)}main{padding:28px;max-width:1800px;margin:auto}.frame{background:var(--panel);border:3px solid var(--pink);box-shadow:7px 7px 0 var(--cyan);min-width:0}.titlebar{background:linear-gradient(100deg,var(--pink),var(--purple),var(--cyan));color:#080010;padding:8px 12px;font:18px 'VT323',monospace;font-weight:bold;display:flex;justify-content:space-between;gap:16px;overflow-wrap:anywhere}.login-panel{width:min(100%,480px);margin:6vh auto 30px;transform:rotate(-1deg)}.login-content{padding:32px;background-image:radial-gradient(#ff71ce20 20%,transparent 20%);background-size:12px 12px}.cutout{display:inline-block;background:var(--yellow);color:#080010;transform:rotate(3deg);font:18px 'VT323',monospace;padding:3px 12px;box-shadow:4px 4px 0 #000}h1{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:20px 0 12px;color:var(--yellow)}p{margin:10px 0;color:#d6c8e8}.login-content button{width:100%;margin-top:24px}.small{font-size:12px;line-height:1.5;color:#c4b7cf}.workspace-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.workspace-toolbar h1{margin:0}.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}.workspace{display:grid;grid-template-columns:185px minmax(0,1fr);gap:22px;align-items:start}.files{grid-row:span 2}.files nav{padding:12px 8px;display:grid;gap:6px}.file-button{font:14px 'VT323',monospace;text-align:left;padding:9px 10px;color:var(--cyan);border:1px solid transparent;overflow-wrap:anywhere}.file-button[aria-pressed=true]{color:#080010;background:var(--pink);border-color:var(--yellow);box-shadow:3px 3px 0 var(--cyan);transform:rotate(-1deg)}.side-note{padding:0 14px}.text-link{display:block;margin:20px 14px;font-size:12px}.code-panel .titlebar{font-size:16px}#draftStatus{font-size:14px;white-space:nowrap}#codeEditor{height:580px;font-size:13px;overflow:hidden}.cm-editor{height:100%}.cm-scroller{overflow:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;line-height:1.65}.cm-editor.cm-focused{outline:2px solid var(--cyan)}.preview-panel{grid-column:2}.preview-controls{display:flex;align-items:center;gap:12px;padding:14px;flex-wrap:wrap}.preview-controls label{margin:0}.preview-controls select{flex:1}#previewHint{margin:0 14px 14px}iframe{display:block;width:100%;height:600px;border:0;background:#080010}#status{max-width:100%;padding:12px 16px;border-left:4px solid var(--cyan);background:#120024;margin:26px 0;font-size:14px;overflow-wrap:anywhere}#status[data-error=true]{border-color:var(--pink);color:var(--yellow)}details{border-top:1px solid var(--purple);padding:14px}summary{cursor:pointer;min-height:44px;color:var(--yellow);font-weight:600}.revision{border-top:1px dashed #b967ff66;padding:12px 0}.revision p{font-size:12px;overflow-wrap:anywhere}.revision button{font-size:12px;width:100%}.revision small{font:14px 'VT323',monospace;color:var(--cyan)}dialog{max-width:min(520px,calc(100vw - 36px));border:3px solid var(--pink);background:var(--panel);color:white;padding:24px;box-shadow:8px 8px 0 var(--cyan)}dialog::backdrop{background:#080010dc}dialog h2{color:var(--yellow);line-height:1.2}dialog .actions{margin-top:24px}@media(min-width:1450px){.workspace{grid-template-columns:185px minmax(0,1fr) minmax(360px,.8fr)}.files{grid-row:auto}.preview-panel{grid-column:3}.preview-panel iframe{height:548px}}@media(max-width:800px){main{padding:20px 16px}.admin-header{padding:18px;gap:20px}.admin-header nav{margin-left:0}.workspace-toolbar{align-items:start;flex-direction:column}.workspace{grid-template-columns:minmax(0,1fr)}.files{grid-row:auto}.files nav{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-panel{grid-column:1}.side-note,.files .text-link{display:inline-block;margin:10px;padding:0}.files details{margin-top:8px}.login-content{padding:24px}#codeEditor{height:480px}.login-panel{margin:24px auto}.actions{justify-content:flex-start}.admin-header nav a{padding:10px;font-size:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep operation feedback visible while scrolling through source and previews. */
body{padding-bottom:80px}#status{position:fixed;z-index:100;bottom:16px;left:28px;right:28px;margin:0;box-shadow:0 4px 20px #000b}@media(max-width:800px){#status{left:16px;right:16px;bottom:12px}}