*{box-sizing:border-box}:root{--brand-orange: #fc7f2d;--brand-ink: #0b0a0a}body{margin:0;font-family:ui-monospace,monospace;background:#1e1e2e;color:#cdd6f4}main{max-width:760px;margin:0 auto;padding:24px}#brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.brand-logo{display:block;height:46px;width:auto;background:#fff;padding:8px 12px;border-radius:10px}.brand-sub{opacity:.7;font-size:.9em}.brand-sub code{color:var(--brand-orange)}#controls{display:flex;gap:12px;align-items:center;margin-bottom:12px}button{background:#585b70;color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer}button:hover{background:#6c7086}#play{background:var(--brand-orange);color:var(--brand-ink);font-weight:700}#play:hover{background:#ff9248}#examples{background:#585b70;color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font:inherit}#examples:hover{background:#6c7086}#step{margin-left:auto;opacity:.8}#editor{border:1px solid #45475a;border-radius:6px;overflow:hidden}#error{color:#f38ba8;min-height:1.4em;margin-top:8px;white-space:pre-wrap}.cm-editor{height:360px;font-size:14px}.ph-section{background:#89b4fa12}.ph-cell{background:#cdd6f42e;border-radius:2px}.ph-fire{background:#f9e2af;color:#1e1e2e;border-radius:2px;font-weight:700}#notice{color:#f9e2af;min-height:1.2em;margin-top:4px;font-size:.9em;opacity:.85;white-space:pre-wrap}#tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.tab{background:#313244;color:#cdd6f4;border:1px solid #45475a;border-radius:6px 6px 0 0;padding:5px 10px;cursor:pointer;font:inherit;font-size:.9em;display:flex;align-items:center;gap:8px}.tab.active{background:#585b70}.tab-x{opacity:.55}.tab-x:hover{opacity:1;color:#f38ba8}.tab-add{font-weight:700}