:root{--bg:#f6f1ea;--ink:#1f1c1a;--red:#E63950;--line:#e2d8cc;--ed:#191716;--edink:#efe6dc}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Mono',monospace;
background-image:radial-gradient(circle at 1px 1px,rgba(230,57,80,.12) 1px,transparent 0);background-size:22px 22px}
.serif{font-family:'Instrument Serif',serif}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px -12px rgba(60,30,20,.25);overflow:hidden;animation:rise .5s both}
.panel.d2{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.editor-wrap{background:var(--ed);color:var(--edink);display:flex;font-size:13px;line-height:20px}
.gutter{padding:12px 8px;text-align:right;color:#6d625a;user-select:none;min-width:40px;overflow:hidden}
.code{flex:1;background:transparent;color:inherit;border:0;outline:0;resize:none;padding:12px;font:inherit;line-height:20px;white-space:pre;tab-size:2}
.btn{border:1px solid var(--line);background:#fff;padding:6px 12px;border-radius:999px;font-size:12px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--red);color:var(--red)}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.tab{padding:6px 14px;font-size:12px;color:#a99c90;cursor:pointer;border-bottom:2px solid transparent}
.tab.on{color:#fff;border-color:var(--red)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;animation:rise .3s both;z-index:50}
.pill{background:var(--red);color:#fff;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;cursor:pointer;position:relative}