.editor-container,.code-block{background:var(--color-bg-elevated);border-radius:12px;overflow:hidden;border:1px solid var(--color-border)}.code-block{margin:20px 0}@media(max-width:767px){.code-block{margin:16px 0;border-radius:8px}.code-block-content pre code{font-size:13px;padding:12px}}@media(max-width:479px){.code-block-header{padding:6px 12px}.code-block-content pre code{font-size:12px;padding:10px}}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border)}.code-block-lang{font-size:.7rem;color:var(--color-text-dimmest);text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-mono)}.code-block-content{overflow-x:auto}.code-block-content pre{margin:0;padding:0;background:var(--color-bg-elevated);border:none;border-radius:0}.code-block-content pre code{display:block;background:none;padding:16px;color:var(--color-text);font-family:var(--font-mono);font-size:14px;line-height:1.5;tab-size:2;white-space:pre}.copy-btn{background:transparent;border:1px solid var(--color-border-strong);border-radius:4px;color:var(--color-text-muted);font-size:.75rem;padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .2s;font-family:var(--font-mono)}.copy-btn:hover{background:var(--color-border-light);border-color:var(--color-accent);color:var(--color-accent)}.copy-btn.copied{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent)}.copy-btn svg{width:14px;height:14px}.editor-controls{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border);align-items:center}.control-btn{display:flex;align-items:center;gap:6px;background:var(--color-border-light);color:var(--color-text-secondary);padding:8px 16px;border:1px solid var(--color-border);border-radius:6px;font-family:var(--font-mono);font-size:.9rem;cursor:pointer;transition:all .2s}.control-btn:hover{background:var(--color-border);color:var(--color-text-bright)}.control-btn.play-btn:hover{background:var(--color-accent-deep-a20);border-color:var(--color-accent);color:var(--color-accent)}.control-btn.stop-btn:hover{background:var(--color-error-a20);border-color:var(--color-error);color:var(--color-error)}.control-btn.update-btn:hover{background:var(--color-info-a20);border-color:var(--color-info);color:var(--color-info)}.control-btn.playing{background:var(--color-accent-deep-a20);border-color:var(--color-accent);color:var(--color-accent)}.control-hint{margin-left:auto;color:var(--color-text-dimmest);font-size:.75rem}.control-hint kbd{background:var(--color-border-light);padding:2px 5px;border-radius:3px;border:1px solid var(--color-border)}@media(max-width:479px){.control-hint{display:none}}#editor-wrapper{background:var(--color-bg-elevated)}strudel-editor{display:block;--background: var(--color-bg-elevated);--foreground: var(--color-text);--caret: var(--color-accent);--selection: var(--color-accent-a20);--gutterBackground: var(--color-bg-tertiary);--gutterForeground: var(--color-text-dimmest);--lineHighlight: rgba(255, 255, 255, .03)}.error-display{display:none;background:var(--color-error-bg);border-top:1px solid var(--color-error);padding:12px 16px;color:var(--color-error-light);font-size:.85rem;line-height:1.5}.error-display.visible{display:block}.error-display .error-title{color:var(--color-error);font-weight:700;margin-bottom:4px}.error-display .error-message{font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word}.error-display .error-dismiss{float:right;background:none;border:none;color:var(--color-error-light);cursor:pointer;font-size:1.2rem;line-height:1;padding:0;margin-left:10px}.error-display .error-dismiss:hover{color:var(--color-error)}pre code{display:block;padding:16px;overflow-x:auto;background:var(--color-bg-elevated);border-radius:8px}