*{box-sizing:border-box}body{margin:0;background:#f5f3f9;color:#2a2540;font:15px system-ui,sans-serif}header,main,footer{max-width:1360px;margin:auto;padding:24px 42px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d8d3e3}header a{font-size:30px;letter-spacing:-.06em;text-decoration:none;color:inherit;font-weight:600}header a span{color:#8f75c5}.tag{font-size:10px;letter-spacing:.14em;color:#7e748e}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #c5b9d9;border-radius:5px;background:none;padding:10px 16px}header button{background:#50406c;color:#fff;border:0}.headline{display:flex;justify-content:space-between;align-items:end;padding:30px 0}h1{font-family:Georgia,serif;font-size:clamp(34px,4.5vw,60px);font-weight:400;letter-spacing:-.04em;margin:20px 0}.headline p{line-height:1.7;color:#7e748e}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:12px}.toolbar button{font-size:12px;border:0;padding:8px}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d8d3e3;border-radius:6px;overflow:hidden;min-height:450px}.source,.preview{padding:24px}.source{background:#ebe6f2;border-right:1px solid #d8d3e3}.workspace label,.workspace h2{font:10px system-ui;letter-spacing:.12em;color:#7e748e;display:block;margin:0 0 20px}textarea{resize:vertical;display:block;width:100%;height:390px;min-height:280px;font:14px/1.9 ui-monospace,monospace;border:0;background:transparent;color:#50406c;outline-offset:4px}.preview{background:#fff}article{font:17px/1.8 Georgia,serif;overflow-wrap:anywhere}article h1{font-size:32px;margin:20px 0}article h2,article h3{font:600 23px/1.4 Georgia;margin:22px 0 12px;color:inherit;letter-spacing:0}article p{margin:12px 0}article blockquote{border-left:3px solid #a78bc3;padding-left:18px;color:#7e748e;margin:20px 0}article code{font:13px ui-monospace;background:#f1edf5;padding:2px 4px}details{color:#7e748e;font-size:12px;padding-top:25px;line-height:1.8}summary{cursor:pointer}footer{border-top:1px solid #d8d3e3;display:flex;justify-content:space-between;color:#7e748e;font-size:12px}#status{font-size:12px;color:#50406c;min-height:18px}:focus-visible{outline:2px solid #8f75c5;outline-offset:3px}@media(max-width:750px){header,main,footer{padding:20px}.tag{display:none}.headline{display:block;padding:10px 0}.workspace{grid-template-columns:1fr}.source{border-right:0;border-bottom:1px solid #d8d3e3}textarea{height:250px}.headline p{font-size:13px}footer{display:block;line-height:2}footer span{display:block}}