.prompt-studio{--prompt-slate:#1e293b;--prompt-border:#e2e8f0;--prompt-openai:#10a37f;--prompt-claude:#d97706;max-width:1280px}
.prompt-hero{margin:1.2rem 0 1.6rem}.prompt-hero h1{max-width:900px}.prompt-hero h1 em{font-style:normal;color:#256b55}.prompt-hero>p{max-width:820px}.prompt-local-note{padding:.85rem 1rem;border-left:4px solid #10a37f;background:#ecfdf5;border-radius:.35rem;color:#14532d}
.prompt-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1.25rem}.prompt-panel,.prompt-flow,.prompt-sponsored{min-width:0;border:1px solid var(--prompt-border);border-radius:1rem;background:#fff;box-shadow:0 8px 26px rgb(15 23 42 / 5%)}.prompt-editor{padding:1.25rem}.prompt-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.prompt-panel-heading h2{margin:.25rem 0 0;font-size:1.25rem;color:var(--prompt-slate)}.prompt-step{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:#f1f5f9;color:#475569;font-weight:700}.prompt-editor>label,.prompt-preset>label{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;margin:.95rem 0 .4rem;color:#263448;font-weight:650}.prompt-limit,.prompt-hint,.prompt-empty,.prompt-metric-caption,.prompt-estimate-caveat{font-size:.82rem;color:#64748b;font-weight:400}.prompt-editor textarea,.prompt-editor input,.prompt-editor select{box-sizing:border-box;width:100%;border:1px solid #cbd5e1;border-radius:.65rem;padding:.75rem .8rem;background:#fff;color:#0f172a;font:inherit;line-height:1.5}.prompt-editor textarea{resize:vertical;min-height:7.5rem}.prompt-editor textarea:focus,.prompt-editor input:focus,.prompt-editor select:focus,.prompt-json:focus{outline:3px solid #2563eb;outline-offset:2px;border-color:#2563eb}.prompt-hint{margin:.45rem 0 0;line-height:1.5}.prompt-hint code,.prompt-empty code{padding:.1rem .3rem;border-radius:.25rem;background:#f1f5f9;color:#334155}.prompt-variables{margin-top:1.2rem;padding:1rem;border:1px solid var(--prompt-border);border-radius:.8rem;background:#f8fafc}.prompt-subheading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.prompt-subheading h3{margin:0;font-size:1rem;color:var(--prompt-slate)}#variable-count{font-size:.8rem;color:#64748b}.prompt-empty{margin:.65rem 0 0}.prompt-variable-fields{display:grid;gap:.7rem;margin-top:.7rem}.prompt-variable-fields:empty{margin-top:0}.prompt-variable-field{display:grid;gap:.3rem}.prompt-variable-field label{font-size:.88rem;font-weight:600;color:#334155}.prompt-variable-field input{min-height:2.8rem}.prompt-preset{margin-top:1.2rem}.prompt-preset select{min-height:2.8rem}.prompt-preview-column{display:grid;gap:1rem;min-width:0}.prompt-flow{position:relative;overflow:hidden;padding:1.15rem;background:#0e1218;color:#f8fafc}.prompt-flow:before{position:absolute;inset:0;content:"";pointer-events:none;opacity:.55;background-image:linear-gradient(90deg,transparent 97%,#27303b 97%),linear-gradient(transparent 97%,#27303b 97%);background-size:58px 58px}.prompt-flow>*{position:relative}.prompt-flow>h2{margin:0 0 1rem;font-size:1.08rem;color:#cbd5e1}.prompt-flow-source{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border:1px solid #313b47;border-radius:.65rem;background:#171d25;color:#cbd5e1;font-size:.9rem}.prompt-source-dot,.metric-dot{flex:0 0 auto;width:.7rem;height:.7rem;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 .25rem rgb(96 165 250 / 14%)}.prompt-flow-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:.8rem 0}.prompt-metric{padding:.9rem;border:1px solid;border-radius:.75rem;background:#171d25}.prompt-metric-openai{border-color:var(--prompt-openai)}.prompt-metric-claude{border-color:var(--prompt-claude)}.prompt-metric-title{display:flex;align-items:center;gap:.5rem}.prompt-metric-title h3{margin:0;font-size:.94rem;color:#f8fafc}.prompt-metric-openai .metric-dot{background:var(--prompt-openai);box-shadow:0 0 0 .25rem rgb(16 163 127 / 15%)}.prompt-metric-claude .metric-dot{background:var(--prompt-claude);box-shadow:0 0 0 .25rem rgb(217 119 6 / 15%)}.prompt-token-value{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin:.85rem 0 .35rem}.prompt-token-value strong{font-size:1.45rem;font-variant-numeric:tabular-nums}.prompt-metric-openai .prompt-token-value strong{color:#4adeb2}.prompt-metric-claude .prompt-token-value strong{color:#fbbf24}.prompt-token-value span{font-size:.8rem;color:#cbd5e1}.prompt-metric-caption{margin:0;color:#aab5c2;line-height:1.4}.prompt-flow-summary{display:flex;justify-content:space-between;gap:.8rem;padding:.8rem .2rem .1rem;color:#cbd5e1;font-size:.83rem}.prompt-flow-summary span{display:grid;gap:.2rem}.prompt-flow-summary strong{color:#fff;font-size:1.08rem;font-variant-numeric:tabular-nums}.prompt-estimate-caveat{margin:.8rem 0 0;color:#94a3b8;line-height:1.5}.prompt-output{padding:1.15rem;border:1px solid var(--prompt-border);border-radius:1rem;background:#fff}.prompt-rendered{min-height:7rem;max-height:18rem;overflow:auto;margin:0;padding:1rem;border:1px solid #e2e8f0;border-radius:.65rem;background:#f8fafc;color:#1e293b;white-space:pre-wrap;overflow-wrap:anywhere;font: .93rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.prompt-json-section .prompt-panel-heading{margin-bottom:.5rem}.prompt-json{max-height:25rem;overflow:auto;margin:.75rem 0 0;padding:1rem;border:1px solid #343a43;border-radius:.7rem;background:#1e1e1e;color:#d4d4d4;white-space:pre;overflow:auto;tab-size:2;font:.84rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.prompt-sponsored{padding:1rem;background:#f8fafc;border-style:dashed}.prompt-sponsored p{margin:.55rem 0 .25rem;color:#334155;font-weight:650}.prompt-sponsored small{color:#64748b}.prompt-disclaimer{margin:1.25rem 0 2rem}.prompt-debugger-page :focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@media(max-width:900px){.prompt-layout{grid-template-columns:minmax(0,1fr)}.prompt-preview-column{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.prompt-editor,.prompt-flow,.prompt-output{padding:.9rem}.prompt-flow-cards{grid-template-columns:1fr}.prompt-flow-summary{font-size:.78rem}.prompt-hero h1{font-size:clamp(2rem,10vw,3rem)}.prompt-limit{max-width:45%;text-align:right}}
@media(prefers-reduced-motion:reduce){.prompt-debugger-page *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.prompt-button{display:inline-flex;justify-content:center;align-items:center;min-height:2.55rem;padding:.55rem .85rem;border:1px solid #1e293b;border-radius:.55rem;background:#1e293b;color:#fff;font:inherit;font-size:.88rem;font-weight:650;cursor:pointer}.prompt-button:hover{background:#334155}.prompt-button-secondary{border-color:#cbd5e1;background:#fff;color:#1e293b}.prompt-button-secondary:hover{background:#f1f5f9}.prompt-variable-actions{display:flex;align-items:center;gap:.6rem}.prompt-status{min-height:1.25rem;margin:.5rem 0 0;color:#475569;font-size:.82rem}.prompt-status:empty{display:none}.prompt-flow-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.prompt-flow-summary>div{display:grid;gap:.25rem;min-width:0}.prompt-flow-summary>div>strong{color:#cbd5e1;font-size:.78rem}.prompt-flow-summary>div>span{display:block;color:#94a3b8;font-size:.75rem;line-height:1.5}.prompt-flow-summary b{color:#fff;font-size:.9rem;font-variant-numeric:tabular-nums}
@media(max-width:560px){.prompt-flow-summary{grid-template-columns:1fr}.prompt-flow-summary>div{grid-template-columns:1fr auto;align-items:baseline}.prompt-variable-actions{align-items:flex-end;flex-direction:column}.prompt-subheading{align-items:flex-start}}