*{box-sizing:border-box}body,html{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#152033}.shell{display:grid;grid-template-columns:minmax(320px,420px) 1fr;grid-gap:24px;gap:24px;max-width:1400px;margin:0 auto;padding:28px}.panel{background:white;border:1px solid #e2e7ec;border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(20,33,61,.06)}h1,h2{margin:4px 0 8px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:#0099d8}.muted,.note{color:#667085;font-size:14px}.formGrid{display:grid;grid-gap:14px;gap:14px;margin-top:24px}label span{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#475467}input{width:100%;border:1px solid #cfd6de;border-radius:9px;padding:11px 12px;font-size:14px;outline:none}input:focus{border-color:#0099d8;box-shadow:0 0 0 3px rgba(0,153,216,.12)}.buttons{display:flex;gap:10px;margin-top:20px}button{border:0;border-radius:9px;padding:10px 14px;background:#0099d8;color:white;font-weight:700;cursor:pointer}.secondary,.toggle button{background:#eef2f6;color:#344054}.previewHeader{display:flex;align-items:center;justify-content:space-between;gap:16px}.toggle{display:flex;gap:6px}.toggle button.active{background:#14213d;color:white}.preview{margin-top:18px;border-radius:12px;overflow:auto;border:1px solid #e2e7ec;min-height:320px;padding:24px}.preview.light{background:white}.preview.dark{background:#1f2329}.preview iframe{width:760px;height:260px;border:0;background:transparent}.note{margin-top:14px}code{background:#f2f4f7;padding:2px 5px;border-radius:4px}@media(max-width:900px){.shell{grid-template-columns:1fr;padding:16px}.preview iframe{width:700px}}