.playground main,.playground .nav{max-width:1440px}
.playground-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding:38px 0 28px}
.playground-hero h1{font-size:clamp(42px,4.4vw,62px);margin:12px 0 0;letter-spacing:-2px}
.playground-hero>div>p{font-size:16px;line-height:1.7;margin:0 0 12px}
.playground-hero .hero-small{font-size:12px;color:var(--muted);margin:0}
.compact-rule{padding:17px 20px;border:1px solid var(--line);border-left:3px solid var(--orange);background:#eeeee5;margin-bottom:24px;font-size:12px}
.compact-rule summary{cursor:pointer;line-height:1.9;list-style:none}.compact-rule summary>span:last-child{color:var(--muted);float:right;font-size:10px}
.rule-tag{font:9px var(--mono);text-transform:uppercase;color:var(--orange);margin-right:15px;letter-spacing:1px}
.compact-rule p{max-width:850px;color:var(--muted)}.compact-rule code{font:13px var(--mono)}
.workbench{border:1px solid #bfc6b3;background:#fbfaf4;box-shadow:0 12px 32px #25292305;border-radius:8px;overflow:hidden}
.pipeline-scroll{overflow:auto;max-width:100%;scrollbar-width:thin}
.pipeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-width:820px;background:#efefe6;border-bottom:1px solid #bfc6b3}
.pipeline-step{position:relative;display:flex;gap:11px;align-items:start;padding:20px 14px;background:none;border:0;border-right:1px solid var(--line);text-align:left;min-width:0;color:var(--ink)}
.pipeline-step:last-child{border-right:0}.pipeline-step[aria-selected=true]{background:#fbfaf4;box-shadow:inset 0 -3px var(--orange)}
.pipeline-step .flow-icon{width:25px;height:25px;margin-top:2px;font:10px var(--mono)}
.pipeline-step b{display:block;font-size:12px;font-weight:600;white-space:nowrap}
.pipeline-step div>span{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:5px;min-height:32px}
.pipeline-step time{font:10px var(--mono);color:var(--orange);display:block;margin-top:5px;min-height:12px}
.pipeline-step.running .flow-icon{border-color:var(--orange);color:var(--orange);animation:pulse 1.2s infinite}
.pipeline-step.done .flow-icon{background:var(--green);color:#fff;border-color:var(--green)}
.pipeline-step.failed .flow-icon{background:#f5e1d6;color:#963f24;border-color:#c8937f}
.pipeline-step.prepared .flow-icon{border-color:#c59a56;color:#9b7030;background:#f8efdc}
.workbench-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 23px;border-bottom:1px solid var(--line);background:#f4f4eb}
.build-controls{display:flex;align-items:center;gap:24px}.workbench-controls .input-sample input{width:80px}
.workbench-controls .primary{font-size:12px;padding:12px 19px}.workbench .notice{margin:16px 23px}
.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 25px 0}.workspace-heading h2{font:27px/1.3 Georgia,serif;margin:4px 0 0}
.follow-button{display:flex;align-items:center;gap:8px;font:10px var(--mono);background:none;border:1px solid var(--line);border-radius:20px;padding:8px 12px;color:var(--muted)}
.follow-button>span{width:5px;height:5px;border-radius:50%;background:#a6ae99}.follow-button[aria-pressed=true]{color:var(--orange);border-color:#e6c4a7}.follow-button[aria-pressed=true]>span{background:var(--orange)}
.stage-panel{padding:8px 25px 25px;min-height:440px}.stage-caption{font-size:12px;line-height:1.8;color:var(--muted);margin:14px 0}
.playground .editor textarea{height:350px;min-height:270px;max-height:650px;font-size:12px;line-height:1.8;padding:18px}
.playground .editor-bottom{min-height:38px}.panel-note{font-size:11px;color:var(--muted);margin:17px 0 0;line-height:1.8}
.empty-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:380px;text-align:center;padding:30px;color:var(--muted);background:radial-gradient(ellipse,#eeeee4 0%,transparent 70%)}
.empty-stage>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid #bcc5ad;border-radius:50%;font:15px var(--mono);color:var(--orange)}
.empty-stage h3{font:27px/1.3 Georgia,serif;color:var(--ink);margin:19px 0 10px}.empty-stage p{max-width:490px;font-size:13px;line-height:1.8;margin:0}
.compiler-route,.model-route{display:flex;align-items:center;gap:16px;margin:22px 0}
.compiler-route>span,.model-route>div{flex:1;padding:12px 16px;background:#eeeee5;border:1px solid var(--line);font-size:10px;color:var(--muted);min-width:0}
.compiler-route b,.model-route b{display:block;font-size:12px;color:var(--ink);font-weight:600;margin-bottom:3px}
.compiler-route i,.model-route i{font:18px var(--mono);color:var(--orange)}.model-route span{font-size:11px;display:block;color:var(--muted)}
.artifact-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-top:22px}
.artifact-tabs button{font-size:11px;background:none;border:1px solid transparent;border-radius:4px;padding:8px 12px;color:var(--muted)}.artifact-tabs button[aria-pressed=true]{border-color:var(--line);background:#eeeee5;color:var(--ink)}
.artifact-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}.artifact-card,.argument-card{min-width:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f4f4eb}
.artifact-card h3,.argument-card h3{font-size:12px;font-weight:600;margin:0;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}
.artifact-stats{font:10px/1.6 var(--mono);padding:10px 16px;margin:0;color:var(--muted)}
.artifact-code,.live-code{font:11px/1.9 var(--mono);white-space:pre;overflow:auto;tab-size:2;background:var(--code);color:#dbe7cf;padding:20px;margin:0;min-height:260px;max-height:460px;scrollbar-width:thin;scrollbar-color:#7c866b var(--code)}
.artifact-code:focus-visible,.live-code:focus-visible{outline-offset:-3px}.complete-proof{max-height:520px}
.artifact-hash{display:block;font:9px/1.8 var(--mono);overflow-wrap:anywhere;padding:10px 16px;color:var(--muted)}
.instruction-guide{border:1px solid var(--line);border-radius:5px;margin-top:18px;padding:16px 18px;background:#f4f4eb}.instruction-buttons{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.instruction-buttons button{border:1px solid #bcc5ae;background:#fbfaf4;font:10px var(--mono);padding:5px 10px;border-radius:3px}.instruction-buttons button:hover{border-color:var(--orange);color:var(--orange)}.instruction-guide p{font-size:12px;line-height:1.8;color:var(--muted);margin:8px 0 0}
.pending-note{background:#f5ecd9;border-left:2px solid #c89e4b;padding:12px 16px;font-size:12px;line-height:1.8}
.panel-detail{margin:18px 0 0;font-size:12px;border-top:1px solid var(--line);padding-top:15px}.panel-detail>summary{cursor:pointer;font-weight:550}.panel-detail>p{color:var(--muted);line-height:1.8;max-width:900px}.panel-detail code{font:11px var(--mono)}.panel-detail .artifact-code{margin-top:14px}
.proof-legend{display:flex;gap:22px;flex-wrap:wrap;font-size:10px;padding:13px 16px;background:#eeeee5;border:1px solid var(--line);margin:18px 0}.proof-legend b{margin-right:6px;color:var(--orange)}
.live-attempt{border:1px solid #bfc6b3;border-radius:6px;padding:16px;margin-bottom:15px;min-width:0}.live-attempt>summary{font:11px/1.6 var(--mono);cursor:pointer;overflow-wrap:anywhere}.attempt-explanation{font-size:12px;color:var(--muted);line-height:1.8}.live-attempt>details{font-size:11px;margin-top:16px}.live-attempt>details>summary{cursor:pointer}.live-attempt>details>.live-code{min-height:80px;margin-top:10px;max-height:220px;white-space:pre-wrap;overflow-wrap:anywhere}
.loop-notes{padding:4px 15px}.loop-notes p{font-size:11px;line-height:1.8;margin:10px 0;overflow-wrap:anywhere}.loop-notes b{font-weight:600;color:var(--muted)}.loop-notes code{font:10px/1.8 var(--mono)}
.argument-card .live-code{min-height:180px;max-height:430px;font-size:11px}.feedback{min-height:50px;max-height:250px;margin-top:15px;color:#f0c4a9;white-space:pre-wrap;overflow-wrap:anywhere}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.check-grid>div{padding:18px;background:#efefe6;border:1px solid var(--line);border-radius:5px}.check-grid b{font-size:13px}.check-grid p{font-size:11px;line-height:1.7;color:var(--muted);min-height:38px}.check-grid span{font:10px var(--mono);color:var(--muted)}
.check-grid>[data-state=running]{border-color:#d1ad82}.check-grid>[data-state=running]>span{color:var(--orange);animation:pulse 1.6s infinite}
.check-grid>[data-state=done]{background:#e8efdf;border-color:#b4c4a2}.check-grid>[data-state=done]>span{color:var(--green)}.check-grid>[data-state=failed]{background:#f5e5dc;border-color:#d5b09d}.check-grid>[data-state=failed]>span{color:#9a432b}
.replay-verdict{font:24px/1.5 Georgia,serif;border:1px solid var(--line);padding:25px;background:#eeeee5;margin:25px 0 16px}
.workbench .sample-output{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line);background:#eef0e5;padding:17px 25px}.sample-heading{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:12px}.sample-heading b{font-size:12px}.sample-heading>span{font:11px var(--mono)}
.sample-bars{display:grid;grid-template-columns:1fr 1fr;gap:28px}.sample-row{display:flex;align-items:center;gap:16px}.sample-row>code{flex:0 0 95px}.sample-track{height:12px;flex:1;background:#dbe1d1;overflow:hidden;border-radius:2px}.sample-track>div{height:100%;background:var(--green);transition:width .25s}.sample-row[data-match=false] .sample-track>div{background:var(--orange)}.workbench .sample-output>p{font-size:11px;color:var(--muted);margin:12px 0 0}
.reference-links{font-size:11px;color:var(--muted);padding:0 0 20px}
.syntax-keyword{color:#e7b78d}.syntax-number{color:#afcad8}.syntax-instruction{color:#c1d88f}.syntax-comment{color:#98a08e}
@media(max-width:1000px){.playground main,.playground .nav{padding-left:22px;padding-right:22px}.pipeline-step{padding:16px 12px;gap:8px}.playground-hero{gap:20px}.playground-hero>div>p{font-size:14px}.workbench-controls{gap:12px;padding:16px}.build-controls{gap:14px}.workbench-controls .button{font-size:10px;padding:11px}.compiler-route,.model-route{gap:9px}.compiler-route>span,.model-route>div{padding:12px 10px}.stage-panel{padding:8px 18px 22px}.artifact-code{font-size:10px;padding:16px}}
@media(max-width:700px){.playground main,.playground .nav{padding-left:15px;padding-right:15px}.playground-hero{grid-template-columns:1fr;gap:20px;padding:28px 0 23px}.playground-hero h1{font-size:46px}.playground-hero>div>p{font-size:13px;margin:0 0 10px}.playground-hero .hero-small{font-size:11px}.compact-rule{padding:13px 15px;font-size:11px}.compact-rule summary>span:last-child{float:none;display:block;margin-top:5px}.rule-tag{display:block;margin-bottom:4px}.compact-rule code{font-size:10px;overflow-wrap:anywhere}.workbench-controls{flex-wrap:wrap;gap:14px;padding:15px}.build-controls{justify-content:space-between;gap:14px;width:100%}.build-controls>.button{font-size:10px;flex-shrink:0}.workbench-controls .input-sample{justify-content:start;gap:8px}.workbench-controls .input-sample input{width:60px;max-width:65px;flex:none}.input-sample label{font-size:10px}.input-sample .text-button{font-size:10px}.prove-controls{width:100%;flex-direction:row}.prove-controls>.primary{flex:1;font-size:12px}.workspace-heading{padding:19px 15px 0;gap:10px}.workspace-heading h2{font-size:23px}.follow-button{font-size:9px;padding:7px 10px}.stage-panel{padding:6px 14px 18px;min-height:400px}.stage-caption{font-size:11px}.artifact-pair{grid-template-columns:1fr;gap:12px}.playground .editor textarea{font-size:11px;min-height:240px;height:290px}.playground .presets{gap:5px}.playground .presets button{padding:7px 9px;font-size:9px}.empty-stage{padding:25px 12px;min-height:360px}.empty-stage h3{font-size:24px}.empty-stage p{font-size:12px}.compiler-route{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}.compiler-route>i:nth-of-type(2){display:none}.compiler-route>span{min-height:71px}.model-route{flex-direction:column;align-items:stretch;gap:7px}.model-route>i{text-align:center;transform:rotate(90deg)}.artifact-code{max-height:340px;min-height:180px;font-size:10px}.artifact-tabs{gap:2px}.artifact-tabs button{font-size:10px;padding:7px 8px}.artifact-stats{font-size:9px}.artifact-hash{font-size:9px}.instruction-guide{padding:14px}.instruction-guide p{font-size:11px}.pending-note{font-size:11px}.live-attempt{padding:12px}.live-attempt>summary{font-size:10px}.argument-card .live-code{font-size:10px;max-height:340px}.proof-legend{gap:9px;padding:12px;font-size:9px}.check-grid{grid-template-columns:1fr;gap:9px}.check-grid>div{padding:13px 15px}.check-grid p{min-height:0;margin:7px 0}.check-grid b{font-size:12px}.replay-verdict{font-size:20px;padding:18px}.workbench .sample-output{padding:15px}.sample-bars{grid-template-columns:1fr;gap:10px}.sample-row>code{display:block;font-size:11px}.sample-heading>span{font-size:10px}.panel-detail{font-size:11px}.workbench .notice{margin:14px}.playground .how{margin-top:35px}.reference-links{font-size:10px;line-height:1.8}}
