:root{color-scheme:light;--ink:#242047;--paper:#fffce8;--pink:#ff8fc3;--lime:#b1f35d;--purple:#a4a5e5}*{box-sizing:border-box}body{margin:0;background:var(--purple);color:var(--ink);font:15px/1.5 "Trebuchet MS",system-ui,sans-serif}a{color:inherit;text-underline-offset:3px}button,select,.file-button{font:700 12px/1.4 "Courier New",monospace;color:var(--ink);border:2px solid var(--ink);background:var(--paper);padding:8px 11px;border-radius:0;cursor:pointer}button:hover,.file-button:hover{background:var(--pink)}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,.file-button:focus-within{outline:3px solid #bc206c;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:3px solid var(--ink);background:#ffef63;padding:15px 26px}.brand{font-weight:1000;font-size:22px;letter-spacing:-1px;white-space:nowrap;text-decoration:none}.top h1{font:1000 24px/1.1 "Arial Black",system-ui,sans-serif;letter-spacing:-1px;margin:0}.top h1 span{color:#ab2764}.top p{font-size:12px;margin:4px 0 0}.about-link{font:12px monospace;white-space:nowrap}main{padding:18px 24px;max-width:1800px;margin:auto}.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}.toolbar label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.toolbar select{max-width:100%}.actions{display:flex;flex-wrap:wrap;gap:9px}.status{font:12px/1.5 monospace;min-height:18px;margin:12px 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.code-pane,.preview-pane{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--paper);min-width:0;display:flex;flex-direction:column}.pane-title{display:flex;justify-content:space-between;gap:10px;align-items:baseline;background:var(--ink);color:var(--paper);padding:10px 13px}.pane-title h2{font-size:15px;margin:0}.pane-title>span{font:9px monospace;color:var(--lime)}.tabs{display:flex;gap:0;background:#d9d3e8;border-bottom:2px solid var(--ink)}.tabs button{border:0;border-right:2px solid var(--ink);padding:9px 18px;background:transparent}.tabs [aria-selected=true]{background:var(--pink)}#source-panel{position:relative;height:520px;min-height:250px;background:#272822}#editor,#fallback{width:100%;height:100%;position:absolute;inset:0}#fallback{resize:none;border:0;padding:14px;color:#f8f8f2;background:#272822;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}#editor{font-size:13px}.code-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:10px/1.5 monospace;padding:8px 10px;background:#e5dfed}#preview-mount{height:560px;min-height:300px;background:white;flex:1}iframe{display:block;border:0;width:100%;height:100%;background:white}.console{border-top:2px solid var(--ink);font:11px/1.5 monospace;padding:9px 12px}.console summary{cursor:pointer}.console pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto;margin:9px 0 0}.how{margin-top:35px;background:var(--paper);border:3px solid var(--ink);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:35px}.how h2{font-size:21px;line-height:1.2;letter-spacing:-.5px;margin:0 0 13px}.how p{font-size:14px;max-width:630px}.extra-actions{display:flex;flex-wrap:wrap;gap:8px}.file-button{display:inline-block}.small{font-size:11px!important}.text-button{font:inherit;text-decoration:underline;background:transparent;padding:0;border:0;box-shadow:none}.how code{background:#e1d8ee;padding:2px 4px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1800px;margin:auto;padding:0 24px 24px;font:11px monospace}@media(max-width:850px){.workspace{grid-template-columns:1fr}#source-panel{height:340px}#preview-mount{height:520px;flex:auto}.how{grid-template-columns:1fr;gap:24px}.top{padding:14px 18px;flex-wrap:wrap;gap:10px}.top h1{font-size:20px}.top .about-link{display:none}main{padding:16px}.toolbar label{display:block;width:100%}.toolbar select{display:block;margin-top:5px;width:100%}.actions{gap:8px}button,.file-button{padding:8px 9px}.status{font-size:11px}.code-foot{font-size:9px}.how{padding:18px}.top .brand{font-size:20px}.top p{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.jump-code{display:none}@media(max-width:850px){.jump-code{display:inline-block;padding:3px 6px;font-size:10px}.preview-pane .pane-title>span{display:none}}

dialog{max-width:min(460px,calc(100% - 40px));border:3px solid var(--ink);background:var(--paper);color:var(--ink);padding:24px;box-shadow:6px 6px var(--ink)}dialog::backdrop{background:#24204788}dialog h2{font-size:20px;margin:0 0 14px}dialog p{font-size:14px}dialog .actions{margin-top:20px}