/* Workspace shell; processing, preview geometry and status colors stay in index.html. */
body{font-family:'Avenir Next','IBM Plex Sans',system-ui,sans-serif}
main{max-width:1440px;padding:24px 28px 64px}
header{margin-bottom:18px;padding:16px 8px}
.studio-nav{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.studio-nav button{font:inherit;border:0;background:transparent;color:var(--muted);padding:11px 18px;border-radius:24px;cursor:pointer;min-height:44px}
.studio-nav button[aria-pressed=true]{background:var(--ac-soft);color:var(--ac);font-weight:600}
.studio-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.studio-inputs{padding:22px 8px}
.studio-inputs h2{font-size:23px;letter-spacing:-.6px;margin:10px 0}
.studio-eyebrow{font:11px var(--mono);letter-spacing:1.4px;color:var(--muted)}
.studio-input-description{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.studio-inputs .trybar{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0 0 22px}
.studio-inputs .or{font-size:10px;text-align:center}
.drops{display:grid;grid-template-columns:1fr;gap:12px}
.drop{min-height:125px;padding:18px;border-radius:13px}
.drop .k{font-size:10px}.drop .v{font-size:14px;overflow-wrap:anywhere}
.studio-private{color:var(--muted);font-size:12px;line-height:1.8;margin:18px 0}
.studio-learn{width:100%;margin-top:22px;padding:12px;text-align:left;background:var(--ac-soft);border:0;color:var(--ac);border-radius:10px;font:inherit;font-size:12px;cursor:pointer;min-height:44px}
.studio-review{background:var(--surface);border:1px solid var(--line);padding:30px;border-radius:22px;min-width:0}
.studio-review-heading h1{font-size:34px;line-height:1.2;letter-spacing:-1.2px;max-width:none;margin:8px 0 10px}
.studio-review-heading p{font-size:13px;color:var(--muted);margin:0}
.studio-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:420px;padding:30px;background:var(--field);border-radius:16px;margin-top:28px}
.studio-empty-symbol{font-size:40px;color:var(--ac)}
.studio-empty h2{font-family:Georgia,serif;font-size:29px;font-weight:400;letter-spacing:-.7px;margin:15px 0}
.studio-empty p{font-size:14px;color:var(--muted);line-height:1.7;max-width:350px;margin-bottom:25px}
#result{margin-top:25px}.summary{border:0;background:var(--field);border-radius:12px}.summary .stat{padding:12px 18px}.summary b{font-size:23px}
.stagewrap{border-radius:12px;box-shadow:0 8px 24px -12px var(--paper-shadow)}
.exportbar{border:0;background:var(--field);padding:16px;border-radius:12px}
.sample{border-radius:10px;background:var(--ac);min-height:44px}
.studio-review .changes{margin-top:25px}
.guide{margin-top:0;padding:25px 36px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.guide>.full-guide{margin:0 0 40px}.examples-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px}.examples-title h2{margin:0;font-size:30px;letter-spacing:-1px}.examples-title span{font-size:12px;color:var(--muted)}
.full-guide details{border-top:1px solid var(--line);padding:19px 0;margin:0}.full-guide summary{font-size:16px;font-weight:500;cursor:pointer;line-height:1.5}.guide-body{padding:18px 0 0 20px;max-width:800px;font-size:14px;line-height:1.8}.guide-body p{margin:0 0 18px}.guide-body code{color:var(--ac);font-size:12px;overflow-wrap:anywhere}.guide-body dt{font-weight:600;margin-top:18px}.guide-body dd{margin:6px 0 20px;color:var(--muted)}.guide-body ol{padding-left:22px}.guide-body li{margin-bottom:12px}.guide-body a{color:var(--ac);text-underline-offset:4px}
.token-example{display:grid;gap:14px;background:var(--field);padding:24px;border-radius:12px;margin:20px 0}.token-example span{font:11px var(--mono);color:var(--muted)}.token-example b{font-weight:500}
.studio-examples{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:35px}.studio-example{padding:25px;border-radius:16px;background:var(--field)}.studio-example:last-child{background:var(--ac-soft)}.studio-example h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:10px 0 16px}.studio-example p{font-size:13px;line-height:1.8;color:var(--muted)}.studio-example a{color:var(--ac);font-size:13px;display:inline-block;margin:8px 12px 0 0;text-underline-offset:4px}.studio-example button{margin-top:12px}
[hidden]{display:none!important}button:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px}button{transition:background-color .16s,transform .16s}button:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.studio-nav button:hover,.studio-learn:hover{background:var(--ac-soft);color:var(--ac)}}
@media(max-width:900px){main{padding:16px}.studio-workspace{grid-template-columns:225px minmax(0,1fr);gap:16px}.studio-review{padding:20px}.studio-review-heading h1{font-size:28px}}
@media(max-width:700px){.studio-workspace{grid-template-columns:1fr}.studio-inputs{padding:8px}.studio-review{padding:18px}.studio-empty{min-height:280px}.guide{padding:24px 18px}.studio-examples{grid-template-columns:1fr}.guide-body{padding-left:0}.examples-title{align-items:start;flex-direction:column}.flow{gap:6px}header{gap:12px;flex-wrap:wrap}.pbar{gap:8px}.stagewrap{min-width:0}.stagescroll{overflow:visible}.swipe{display:none}.full-guide summary{font-size:15px}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active{transform:none}.cyc b,.cyc mark{animation:none}}

/* Soft gray canvas in auto and light modes, independent of the OS theme. */
:root:not([data-theme="dark"]){
 --bg:#eeefed;--surface:#fafbf9;--raised:#ffffff;--field:#f0f1ee;
 --ink:#252824;--muted:#636a62;--line:#dde0d9;--line-2:#cbd0c7;
 --ac:#e03c00;--ac-hot:#ff4400;--ac-soft:rgba(224,60,0,.08);--ac-line:rgba(224,60,0,.3);
 --ok:#0f7a4d;--ok-soft:rgba(15,122,77,.09);--err:#c0342b;--err-soft:rgba(192,52,43,.09);
 --warn:#8a5a10;--warn-bg:rgba(255,179,77,.16);--xl:#0f7a4d;--xl-soft:rgba(15,122,77,.09);
 --pp:#e03c00;--pp-soft:rgba(224,60,0,.08);--skip:#8a5a10;--paper-shadow:rgba(20,16,12,.14);
 --s1:#e03c00;--s2:#0f766e;--s3:#5b4bd6;--s4:#a86a10;--s5:#0f7a4d;--s6:#b3306b;
}
.change-log{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:0 16px}
.change-log summary,details.log summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none}
.change-log summary::before,details.log summary::before{content:'+';font-size:20px;color:var(--ac)}
.change-log[open] summary::before,details.log[open] summary::before{content:'−'}
.expand-label{margin-left:auto;font-size:11px;color:var(--muted)}
.change-log[open] .expand-label{display:none}
.change-log .chg{margin-top:8px}
.studio-welcome{max-width:1120px;margin:40px auto;text-align:center;padding:24px}
.studio-welcome h1{font-size:clamp(40px,5vw,66px);line-height:1.06;letter-spacing:-2.7px;margin:20px auto;max-width:780px}
.studio-welcome>p{max-width:550px;margin:20px auto;color:var(--muted);line-height:1.7}
.welcome-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.welcome-actions button{padding:14px 24px;min-height:48px}
.studio-welcome .welcome-note{font-size:12px;max-width:450px}
.transfer-demo{display:grid;grid-template-columns:1fr 110px 1.4fr;align-items:center;text-align:left;margin:48px auto 0;max-width:960px}
.demo-sheet,.demo-deck{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 12px 36px -24px rgba(30,35,30,.2)}
.demo-sheet{transform:rotate(-2deg)}.demo-deck{transform:rotate(1deg);padding:32px}
.demo-label{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.demo-row{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);font-size:13px}.demo-row b{color:var(--ok)}
.demo-deck h2{font-size:25px;letter-spacing:-.7px;margin:24px 0}
.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-metrics span{font-size:11px;color:var(--muted)}.demo-metrics b{display:block;position:relative;height:35px;margin-top:10px;font-size:22px;letter-spacing:-.8px;font-weight:500}.demo-metrics i,.demo-metrics strong{position:absolute;font-style:normal;font-weight:inherit}.demo-metrics strong{opacity:0;color:var(--ac)}
.demo-caption{display:block;font-size:10px;color:var(--muted);margin-top:25px}
.demo-bridge{display:grid;gap:22px;overflow:hidden}.transfer-number{font:11px var(--mono);color:var(--ac);opacity:0;display:block}
.is-transferring .transfer-number{animation:transfer-value 1s cubic-bezier(.45,0,.2,1) both}
.is-transferring .transfer-number:nth-child(2){animation-delay:.3s}.is-transferring .transfer-number:nth-child(3){animation-delay:.6s}
.is-transferring .demo-metrics i{animation:old-value .3s ease-out .8s both}.is-transferring .demo-metrics strong{animation:new-value .5s cubic-bezier(.22,1,.36,1) 1s both}
.is-transferring .demo-metrics>div:nth-child(2) i{animation-delay:1.1s}.is-transferring .demo-metrics>div:nth-child(2) strong{animation-delay:1.3s}.is-transferring .demo-metrics>div:nth-child(3) i{animation-delay:1.4s}.is-transferring .demo-metrics>div:nth-child(3) strong{animation-delay:1.6s}
@keyframes transfer-value{0%{opacity:0;transform:translateX(-35px)}30%,70%{opacity:1}100%{opacity:0;transform:translateX(55px)}}
@keyframes old-value{to{opacity:0;transform:translateY(-8px)}}
@keyframes new-value{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.studio-welcome{padding:12px;margin:20px auto}.transfer-demo{grid-template-columns:1fr;gap:14px;margin-top:28px}.demo-sheet,.demo-deck{transform:none;padding:22px}.demo-bridge{height:30px;display:flex;justify-content:center;gap:20px}.demo-metrics b{font-size:21px}.studio-welcome h1{letter-spacing:-1.6px}}
@media(prefers-reduced-motion:reduce){.is-transferring .transfer-number{animation:none}.is-transferring .demo-metrics i{animation:none;opacity:0}.is-transferring .demo-metrics strong{animation:none;opacity:1}}

/* Files run across the top; the deck gets the full workspace width. */
main{max-width:1600px}
.studio-workspace{grid-template-columns:minmax(0,1fr);gap:22px}
.studio-inputs{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:8px 24px;padding:22px 26px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.studio-inputs>.studio-eyebrow,.studio-inputs>h2,.studio-inputs>.studio-input-description{grid-column:1}
.studio-inputs>h2{margin:0;font-size:22px}
.studio-inputs>.studio-input-description{margin:0;max-width:650px}
.studio-inputs .trybar{grid-column:2;grid-row:1 / 4;margin:0;justify-content:center;min-width:175px}
.studio-inputs .drops{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.studio-inputs .drop{min-height:120px}
.studio-inputs .studio-learn{grid-column:1;width:max-content;margin:8px 0 0;background:transparent;padding:0}
.studio-inputs .studio-private{grid-column:2;margin:8px 0 0;font-size:11px;text-align:right}
.studio-review{padding:30px;min-height:0}
@media(max-width:700px){.studio-inputs{padding:18px;grid-template-columns:1fr}.studio-inputs .trybar{grid-column:1;grid-row:auto;align-items:flex-start;min-width:0;margin-top:12px}.studio-inputs .drops{grid-template-columns:1fr}.studio-inputs .studio-private{grid-column:1;text-align:left}.studio-review{padding:18px}}

/* The welcome illustration demonstrates the transfer before a click. */
.is-previewing .transfer-number{animation:preview-transfer 5.5s cubic-bezier(.45,0,.2,1) infinite}
.is-previewing .transfer-number:nth-child(2){animation-delay:.3s}.is-previewing .transfer-number:nth-child(3){animation-delay:.6s}
.is-previewing .demo-metrics i{animation:preview-old 5.5s ease-in-out infinite}
.is-previewing .demo-metrics strong{animation:preview-new 5.5s ease-in-out infinite}
.is-previewing .demo-metrics>div:nth-child(2) i,.is-previewing .demo-metrics>div:nth-child(2) strong{animation-delay:.3s}
.is-previewing .demo-metrics>div:nth-child(3) i,.is-previewing .demo-metrics>div:nth-child(3) strong{animation-delay:.6s}
@keyframes preview-transfer{0%,8%{opacity:0;transform:translateX(-35px)}15%,24%{opacity:1}32%,100%{opacity:0;transform:translateX(55px)}}
@keyframes preview-old{0%,18%,90%,100%{opacity:1;transform:translateY(0)}28%,80%{opacity:0;transform:translateY(-8px)}}
@keyframes preview-new{0%,18%,90%,100%{opacity:0;transform:translateY(8px)}28%,80%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.is-previewing .transfer-number,.is-previewing .demo-metrics i,.is-previewing .demo-metrics strong{animation:none}.is-previewing .demo-metrics i{opacity:0}.is-previewing .demo-metrics strong{opacity:1}}