/* A small data-and-notes composition, restored from the selected design. */
.studio-edit[data-layout=sections] .studio-intro{display:grid;grid-template-columns:minmax(0,390px) minmax(0,480px);justify-content:center;gap:clamp(32px,4.4vw,56px);min-height:354px;padding:31px 0 38px;align-items:center}
.studio-edit[data-layout=sections] .studio-intro h1{font-size:clamp(56px,5.6vw,72px);line-height:1.45;white-space:normal;letter-spacing:-.065em}
.studio-edit .studio-intro .intro-second{display:block;letter-spacing:-.045em;margin-left:.68em}
.studio-edit .studio-intro .title-line{display:block;white-space:nowrap;width:max-content}
.title-char{position:relative;display:inline-block;vertical-align:baseline;isolation:isolate}
.title-glyph{display:inline-block;pointer-events:none;transform-origin:50% 70%;transition:transform .46s cubic-bezier(.2,.85,.2,1.35),color .32s}
.title-char.intro-comma{width:.68em}.title-char.intro-period{width:.62em}
.title-char.is-active{z-index:2}.title-char.is-near{z-index:1}
.title-char.is-active .title-glyph{transform:translateY(-.045em) scale(1.25);color:#557445}
.title-char.is-near .title-glyph{transform:translateY(-.012em) scale(1.055)}
.title-char.intro-period.is-active .title-glyph{color:#c67650}
.intro-note>svg path{stroke-dasharray:1;stroke-dashoffset:0}
.intro-composition{position:relative;width:100%;height:290px;isolation:isolate}
.intro-code{position:absolute;z-index:0;right:10px;top:12px;width:254px;min-height:122px;padding:17px 20px 21px;transform:rotate(8deg);transform-origin:50% 50%;border:1px solid #d9dfcd;border-radius:4px;background:#eef1e5;color:#7c866d;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.code-filename{display:block;padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid #dce2d1;font:12px/1.4 var(--mono);letter-spacing:.02em;color:#8a937e}
.intro-code code{font:12px/1.9 var(--mono);white-space:nowrap;color:#4d5c42}
.intro-code .code-row{display:block;width:max-content;color:#4d5c42}
.intro-code .code-row>span{color:#929b82}.intro-code .code-row>em{font-style:normal;color:#ae694c}
.code-caret{display:inline-block;width:1px;height:1em;background:#9d7653;vertical-align:-.12em;margin-left:3px;opacity:0}
.intro-chart{position:absolute;z-index:2;left:12px;top:36px;margin:0;width:258px;height:246px;padding:17px 21px 13px;background:#e1edab;border:1px solid #c1d183;border-radius:5px;box-shadow:0 9px 19px #53612d0c;transform:rotate(-7deg);transition:transform .4s,box-shadow .4s}
.intro-chart-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#63733f;font-size:12px;line-height:1.4}




.intro-chart .chart-statement{font:650 27px/1.2 var(--sans);letter-spacing:-.04em;color:#2a361f;margin:18px 0 11px}
.intro-plot{display:block;width:100%;height:87px;overflow:visible}
.intro-plot-grid{stroke:#afc073;stroke-width:.7;opacity:.68}
.intro-plot-bars{fill:#334228;stroke:none}
.intro-plot-bars rect{transform-box:fill-box;transform-origin:center bottom}
.intro-plot-bars rect:nth-child(even){fill:#a5b975}
.intro-plot-line{stroke:#d97b54;stroke-width:3.3;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.intro-plot-points{opacity:0;fill:#e1edab;stroke:#c9744f;stroke-width:2;transition:opacity .35s}
.intro-chart.is-awake .intro-plot-points{opacity:1}
.intro-chart figcaption{display:flex;justify-content:space-between;font:12px/1.2 var(--mono);color:#6e7d4c;margin-top:1px}
.intro-note{position:absolute;z-index:3;right:6px;bottom:3px;width:183px;min-height:158px;padding:27px 20px 25px;background:#fdfdfa;border:1px solid #e0e3d9;transform:rotate(6deg);box-shadow:0 7px 17px #35452b07;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.intro-note p{font:500 23px/1.5 var(--serif);letter-spacing:-.045em;white-space:nowrap;color:#374032}
.intro-note>svg{display:block;width:113px;height:17px;margin-top:5px;stroke:#d6805b;stroke-width:1.8}
.intro-note-star{position:absolute;right:11px;bottom:6px;font:30px/1 var(--sans);color:#d6805b;transition:transform .6s}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .intro-chart.is-awake{transform:translateY(-4px) rotate(-4deg);box-shadow:0 14px 23px #53612d12}
  .intro-code.is-awake{z-index:4;transform:translateY(-6px) rotate(3deg);box-shadow:0 12px 23px #35452b13}
  .intro-note.is-awake{transform:translateY(-5px) rotate(2deg);box-shadow:0 12px 23px #35452b10}
}
@media(min-width:621px) and (max-width:1000px){
  .studio-edit[data-layout=sections] .studio-intro{grid-template-columns:minmax(0,300px) 380px;gap:40px;min-height:329px;padding:29px 0 33px}
  .studio-edit[data-layout=sections] .studio-intro h1{font-size:clamp(39px,5.6vw,54px)}
  .intro-composition{height:267px}
  .intro-chart{left:5px;top:36px;width:222px;height:229px;padding:15px 16px 10px}
  .intro-chart .chart-statement{font-size:25px;margin:17px 0 7px}
  .intro-plot{height:79px}
  .intro-code{right:7px;top:12px;width:235px;padding:14px 15px 18px;min-height:118px}
  .intro-note{right:0;bottom:2px;width:158px;min-height:143px;padding:24px 15px 23px}
  .intro-note p{font-size:21px}.intro-note>svg{width:103px}
  .intro-note-star{font-size:27px;bottom:4px}
  
}
@media(min-width:621px) and (max-width:740px){
  .studio-edit[data-layout=sections] .studio-intro{grid-template-columns:minmax(0,1fr) 344px;gap:20px}
  .studio-edit[data-layout=sections] .studio-intro h1{font-size:clamp(34px,5.2vw,39px)}
  .intro-chart{left:4px;width:211px}
  .intro-code{width:215px;right:7px}
  .intro-code code{font-size:12px;letter-spacing:-.07em}
  .intro-note{width:146px;padding-inline:14px}
  .intro-note p{font-size:20px}
}
@media(max-width:620px){
  .studio-edit[data-layout=sections] .studio-intro{display:flex;flex-direction:column;align-items:stretch;gap:15px;min-height:0;padding:26px 0 28px}
  .studio-edit[data-layout=sections] .studio-intro h1{font-size:clamp(34px,9vw,46px);line-height:1.42;letter-spacing:-.055em}
  .studio-edit .studio-intro .intro-second{display:block;letter-spacing:-.045em;margin-left:.68em}
  .intro-composition{height:261px;width:min(100%,382px);align-self:center;margin:0}
  .intro-chart{left:6px;top:35px;width:57%;height:221px;padding:15px 14px 11px}
  .intro-chart .chart-statement{font-size:25px;margin:17px 0 7px}
  .intro-plot{height:76px}
  .intro-chart-top{gap:7px}
  
  .intro-code{right:8px;top:10px;width:66%;min-width:208px;min-height:114px;padding:14px 15px 17px}
  .intro-code code{font-size:12px;letter-spacing:-.04em}
  .intro-note{right:3px;bottom:6px;width:42%;min-width:134px;min-height:135px;padding:22px 12px 24px}
  .intro-note p{font-size:clamp(18px,5.25vw,21px)}
  .intro-note>svg{width:85%;max-width:104px;margin-top:2px}
  .intro-note-star{font-size:26px;bottom:4px;right:9px}
}
@media(prefers-reduced-motion:reduce){.intro-composition *,.title-glyph{transition:none!important;animation:none!important}.title-char .title-glyph{transform:none!important}}