.playground,.playground *{margin-top:0!important}.playground{display:flex;flex-direction:column;overflow:hidden;height:calc(100vh - 180px);min-height:500px;margin:0 -.5rem!important}.pg-toolbar{display:flex;align-items:center;gap:.6rem;padding:.7rem .6rem;flex-wrap:wrap}.pg-toolbar-left{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.pg-toolbar-right{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-left:auto}.pg-label{font-family:var(--sl-font-system-mono, monospace);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-text-soft, #8A837D);height:30px;display:inline-flex;align-items:center;margin-right:.1rem}.playground select,.pg-btn{height:30px;box-sizing:border-box}.playground select{appearance:none;background:var(--ink-bg-elevated, #FFFFFF);border:1px solid var(--ink-hairline-strong, #D6D0C7);border-radius:4px;color:var(--ink-text, #14110F);font-family:var(--sl-font, sans-serif);font-size:.82rem;padding:0 2rem 0 .6rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A837D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;line-height:28px}:root[data-theme=dark] .playground select{background-color:var(--ink-bg, #0E0D0B);border-color:var(--ink-hairline-strong, #2A2724);color:var(--ink-text, #E8E4DD)}.playground select:focus-visible{outline:2px solid var(--ink-amber, #E68A2E);outline-offset:-1px}.pg-btn{font-family:var(--sl-font, sans-serif);font-size:.8rem;font-weight:500;border-radius:4px;padding:0 .65rem;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;line-height:28px}.pg-btn--ghost{background:transparent;border:1px solid var(--ink-hairline-strong, #D6D0C7);color:var(--ink-text-muted, #5F5853)}:root[data-theme=dark] .pg-btn--ghost{border-color:var(--ink-hairline-strong, #2A2724);color:var(--ink-text-muted, #ACA59A)}.pg-btn--ghost:hover{border-color:var(--ink-amber, #B8651B);color:var(--ink-text, #14110F)}:root[data-theme=dark] .pg-btn--ghost:hover{border-color:var(--ink-amber, #E68A2E);color:var(--ink-text, #E8E4DD)}.pg-btn--primary{background:var(--ink-amber, #B8651B);border:1px solid var(--ink-amber, #B8651B);color:#fff}.pg-btn--primary:hover{background:var(--ink-amber-deep, #8E4D11);border-color:var(--ink-amber-deep, #8E4D11)}:root[data-theme=dark] .pg-btn--primary{background:transparent;border-color:var(--ink-amber, #E68A2E);color:var(--ink-amber, #E68A2E)}:root[data-theme=dark] .pg-btn--primary:hover{background:#e68a2e1a}.pg-snippet-wrap{position:relative}.pg-snippet-list{position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:var(--ink-bg-elevated, #FFFFFF);border:1px solid var(--ink-hairline-strong, #D6D0C7);border-radius:4px;padding:4px 0;min-width:210px;box-shadow:0 6px 20px #0000001a}:root[data-theme=dark] .pg-snippet-list{background:var(--ink-bg-elevated, #14110F);border-color:var(--ink-hairline-strong, #2A2724);box-shadow:0 8px 24px #0006}.pg-snippet-list button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink-text-muted, #5F5853);font-family:var(--sl-font, sans-serif);font-size:.82rem;padding:.45rem .8rem;cursor:pointer;transition:background .1s ease,color .1s ease}:root[data-theme=dark] .pg-snippet-list button{color:var(--ink-text-muted, #ACA59A)}.pg-snippet-list button:hover{background:var(--ink-amber-tint, rgba(184,101,27,.08));color:var(--ink-text, #14110F)}:root[data-theme=dark] .pg-snippet-list button:hover{background:var(--ink-amber-tint, rgba(230,138,46,.1));color:var(--ink-text, #E8E4DD)}.pg-tabs{display:flex;gap:0;border-top:1px solid var(--ink-hairline, #E7E3DC);border-bottom:1px solid var(--ink-hairline, #E7E3DC);padding-left:.4rem}:root[data-theme=dark] .pg-tabs{border-color:var(--ink-hairline, #1A1815)}.pg-tab{font-family:var(--sl-font-system-mono, monospace);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-text-soft, #8A837D);background:none;border:none;border-bottom:3px solid transparent;padding:.6rem 1rem;margin-bottom:-1px;cursor:pointer;transition:color .16s ease,border-color .16s ease}.pg-tab:hover{color:var(--ink-text-muted, #5F5853)}:root[data-theme=dark] .pg-tab:hover{color:var(--ink-text-muted, #ACA59A)}.pg-tab--active{color:var(--ink-text, #14110F);border-bottom-color:var(--ink-amber, #B8651B)}:root[data-theme=dark] .pg-tab--active{color:var(--ink-text, #E8E4DD);border-bottom-color:var(--ink-amber, #E68A2E)}.pg-tab--image{display:inline-flex;align-items:center;gap:.4rem}.pg-tab-badge{font-size:.6rem;font-weight:600;letter-spacing:.08em;padding:1px 5px;border-radius:2px;background:var(--ink-amber, #B8651B);color:var(--ink-bg-elevated, #FFFFFF)}:root[data-theme=dark] .pg-tab-badge{background:var(--ink-amber, #E68A2E);color:var(--ink-bg, #0E0D0B)}.pg-image-pane{height:100%;overflow:auto;padding:1.5rem;background:var(--ink-bg, #F7F4EE)}:root[data-theme=dark] .pg-image-pane{background:var(--ink-bg, #0E0D0B)}.pg-image-pane [hidden]{display:none!important}.pg-image-inner{max-width:36rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.pg-image-drop{position:relative;border:1.5px dashed var(--ink-hairline-strong, #D6D0C7);border-radius:4px;background:var(--ink-bg-elevated, #FFFFFF);min-height:240px;display:flex;align-items:center;justify-content:center;transition:border-color .16s ease,background .16s ease;cursor:pointer}:root[data-theme=dark] .pg-image-drop{border-color:var(--ink-hairline-strong, #2A2724);background:var(--ink-bg-elevated, #14110F)}.pg-image-drop:hover{border-color:var(--ink-amber, #B8651B)}.pg-image-drop:focus-visible{border-color:var(--ink-amber, #B8651B);outline:2px solid var(--ink-amber, #B8651B);outline-offset:2px}:root[data-theme=dark] .pg-image-drop:hover,:root[data-theme=dark] .pg-image-drop:focus-visible{border-color:var(--ink-amber, #E68A2E)}:root[data-theme=dark] .pg-image-drop:focus-visible{outline-color:var(--ink-amber, #E68A2E)}.pg-image-drop--dragover{border-color:var(--ink-amber, #B8651B);background:#b8651b0a}:root[data-theme=dark] .pg-image-drop--dragover{border-color:var(--ink-amber, #E68A2E);background:#e68a2e0f}.pg-image-drop-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;color:var(--ink-text-muted, #5F5853);padding:1.5rem}:root[data-theme=dark] .pg-image-drop-empty{color:var(--ink-text-muted, #ACA59A)}.pg-image-drop-empty svg{color:var(--ink-text-soft, #8A837D);margin-bottom:.3rem}.pg-image-drop-title{font-size:.95rem;font-weight:500;color:var(--ink-text, #14110F);margin:0!important}:root[data-theme=dark] .pg-image-drop-title{color:var(--ink-text, #E8E4DD)}.pg-image-drop-hint{font-size:.78rem;margin:0 0 .7rem!important}.pg-image-pick{margin-top:.4rem!important}.pg-image-drop-filled{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}.pg-image-drop-filled img{max-width:100%;max-height:320px;object-fit:contain;display:block;border-radius:2px}.pg-image-clear{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;border:none;border-radius:50%;background:var(--ink-text, #14110F);color:var(--ink-bg-elevated, #FFFFFF);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}:root[data-theme=dark] .pg-image-clear{background:var(--ink-text, #E8E4DD);color:var(--ink-bg, #0E0D0B)}.pg-image-actions{display:flex;align-items:center;gap:.75rem}.pg-image-generate{display:inline-flex;align-items:center;gap:.4rem}.pg-image-generate:disabled{opacity:.45;cursor:not-allowed}.pg-image-generate-spinner{display:inline-flex;align-items:center;gap:.35rem}.pg-image-status{font-size:.82rem;color:var(--ink-text-muted, #5F5853)}:root[data-theme=dark] .pg-image-status{color:var(--ink-text-muted, #ACA59A)}.pg-image-error{padding:.7rem .9rem;border-left:3px solid var(--ink-amber, #B8651B);background:#b8651b0f;color:var(--ink-text, #14110F);font-size:.85rem;line-height:1.5;border-radius:0 2px 2px 0}:root[data-theme=dark] .pg-image-error{border-left-color:var(--ink-amber, #E68A2E);background:#e68a2e14;color:var(--ink-text, #E8E4DD)}.pg-image-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:3px;background:var(--ink-bg-elevated, #FFFFFF);border:1px solid var(--ink-hairline, #E7E3DC);font-size:.82rem;color:var(--ink-text-muted, #5F5853)}:root[data-theme=dark] .pg-image-feedback{background:var(--ink-bg-elevated, #14110F);border-color:var(--ink-hairline-strong, #2A2724);color:var(--ink-text-muted, #ACA59A)}.pg-image-feedback-label{margin-right:auto}.pg-feedback-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border:1px solid var(--ink-hairline-strong, #D6D0C7);border-radius:3px;background:transparent;color:var(--ink-text-muted, #5F5853);font-size:.78rem;font-family:var(--sl-font, sans-serif);cursor:pointer;transition:border-color .16s ease,color .16s ease}:root[data-theme=dark] .pg-feedback-btn{border-color:var(--ink-hairline-strong, #2A2724);color:var(--ink-text-muted, #ACA59A)}.pg-feedback-btn:hover{border-color:var(--ink-amber, #B8651B);color:var(--ink-text, #14110F)}:root[data-theme=dark] .pg-feedback-btn:hover{border-color:var(--ink-amber, #E68A2E);color:var(--ink-text, #E8E4DD)}.pg-feedback-btn:disabled{opacity:.45;cursor:default}.pg-feedback-btn--active{border-color:var(--ink-amber, #B8651B);color:var(--ink-amber, #B8651B)}:root[data-theme=dark] .pg-feedback-btn--active{border-color:var(--ink-amber, #E68A2E);color:var(--ink-amber, #E68A2E)}.pg-feedback-thanks{font-style:italic;color:var(--ink-text-soft, #8A837D);flex-basis:100%}.pg-image-tip{display:flex;align-items:center;gap:.55rem;margin:0!important;padding:.7rem .9rem;border-radius:3px;background:var(--ink-bg-elevated, #FFFFFF);border:1px solid var(--ink-hairline, #E7E3DC);border-left:2px solid var(--ink-amber, #B8651B);font-size:.8rem;line-height:1.5;color:var(--ink-text-muted, #5F5853)}:root[data-theme=dark] .pg-image-tip{background:var(--ink-bg-elevated, #14110F);border-color:var(--ink-hairline-strong, #2A2724);border-left-color:var(--ink-amber, #E68A2E);color:var(--ink-text-muted, #ACA59A)}.pg-image-tip-icon{flex-shrink:0;width:16px;height:16px;color:var(--ink-amber, #B8651B)}:root[data-theme=dark] .pg-image-tip-icon{color:var(--ink-amber, #E68A2E)}.pg-image-tip-body{flex:1;min-width:0}.pg-image-tip-label{font-family:var(--sl-font-system-mono, monospace);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-amber, #B8651B);margin-right:.45rem;vertical-align:baseline}:root[data-theme=dark] .pg-image-tip-label{color:var(--ink-amber, #E68A2E)}.pg-image-tip kbd{font-family:var(--sl-font-system-mono, monospace);font-size:.7rem;padding:1px 5px;border:1px solid var(--ink-hairline-strong, #D6D0C7);border-radius:3px;background:var(--ink-bg, #F7F4EE);color:var(--ink-text, #14110F);box-shadow:0 1px 0 var(--ink-hairline-strong, #D6D0C7)}:root[data-theme=dark] .pg-image-tip kbd{border-color:var(--ink-hairline-strong, #2A2724);background:var(--ink-bg, #0E0D0B);color:var(--ink-text, #E8E4DD);box-shadow:0 1px 0 var(--ink-hairline-strong, #2A2724)}.pg-body{display:flex;flex:1;min-height:0}.pg-editor-pane{flex:1;min-width:0;position:relative;border-right:1px solid var(--ink-hairline, #E7E3DC)}:root[data-theme=dark] .pg-editor-pane{border-right-color:var(--ink-hairline-strong, #2A2724)}.pg-editor-instance{width:100%;height:100%;position:absolute;inset:0}.pg-preview-pane{flex:1;min-width:0;display:flex;flex-direction:column}.pg-preview-bar{display:flex;align-items:center;gap:0;padding:.45rem .7rem;border-bottom:1px solid var(--ink-hairline, #E7E3DC)}:root[data-theme=dark] .pg-preview-bar{border-bottom-color:var(--ink-hairline, #1A1815)}.pg-view-btn{font-family:var(--sl-font-system-mono, monospace);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-text-soft, #8A837D);background:none;border:1px solid var(--ink-hairline-strong, #D6D0C7);padding:.3rem .7rem;cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease;height:30px;line-height:1;display:inline-flex;align-items:center}:root[data-theme=dark] .pg-view-btn{border-color:var(--ink-hairline-strong, #2A2724)}.pg-view-btn:first-child{border-radius:4px 0 0 4px}.pg-view-btn:last-child{border-radius:0 4px 4px 0;border-left:none}.pg-view-btn--active{color:var(--ink-amber, #B8651B);border-color:var(--ink-amber, #B8651B);background:#b8651b0f}:root[data-theme=dark] .pg-view-btn--active{color:var(--ink-amber, #E68A2E);border-color:var(--ink-amber, #E68A2E);background:#e68a2e14}.pg-preview-container{flex:1;background:#fff;overflow:auto;display:flex;justify-content:center;padding:0}.pg-preview-container iframe{width:100%;height:100%;border:none;background:#fff;transition:max-width .3s ease}.pg-size{font-family:var(--sl-font-system-mono, monospace);font-size:.68rem;letter-spacing:.04em;color:var(--ink-text-soft, #8A837D);height:30px;line-height:28px;padding:0 .5rem;border:1px solid var(--ink-hairline, #E7E3DC);border-radius:4px;box-sizing:border-box;display:inline-block}:root[data-theme=dark] .pg-size{border-color:var(--ink-hairline, #1A1815)}.pg-size--warn{color:#c9a06b;border-color:#c9a06b}.pg-size--danger{color:#c9665b;border-color:#c9665b}.pg-toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(20px);background:var(--ink-bg-elevated, #FFFFFF);border:1px solid var(--ink-amber, #B8651B);color:var(--ink-text, #14110F);font-family:var(--sl-font, sans-serif);font-size:.85rem;padding:.5rem 1.2rem;border-radius:4px;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:100;pointer-events:none;box-shadow:0 4px 12px #0000001a}:root[data-theme=dark] .pg-toast{background:var(--ink-bg-elevated, #14110F);border-color:var(--ink-amber, #E68A2E);color:var(--ink-text, #E8E4DD);box-shadow:0 4px 12px #0006}.pg-toast--visible{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:768px){.playground{height:auto;min-height:auto;margin:0}.pg-body{flex-direction:column}.pg-editor-pane{position:relative;height:350px;border-right:none;border-bottom:1px solid var(--ink-hairline, #E7E3DC)}:root[data-theme=dark] .pg-editor-pane{border-bottom-color:var(--ink-hairline-strong, #2A2724)}.pg-preview-pane{height:400px}}