.studio-interaction-demo{--sid-shell:#e8eeeb;--sid-paper:#f5f1e7;--sid-ink:#242923;--sid-muted:#526158;--sid-accent:#a23e29;--sid-line:#c5cbc1;--sid-poster:#ce542f;--sid-poster-ink:#050806;--sid-poster-type:#fff3d4;container:studio-demo/inline-size;width:100%;min-width:0;padding:clamp(14px,2.2vw,26px);color:var(--sid-ink);background:var(--sid-shell);border:1px solid var(--sid-line);border-radius:8px;font:400 14px/1.5 Studio Sans,Arial,sans-serif;text-align:left;isolation:isolate;transition:background-color .35s ease,border-color .35s ease,color .35s ease}.studio-interaction-demo[data-demo-theme=dark]{--sid-shell:#132421;--sid-paper:#102e29;--sid-ink:#f0f2df;--sid-muted:#bdc8ba;--sid-accent:#d6ed91;--sid-line:#516356;--sid-poster:#d6ed91;--sid-poster-ink:#14392e;--sid-poster-type:#14392e}.studio-interaction-demo,.studio-interaction-demo *{box-sizing:border-box}.studio-interaction-demo.sid-compact{padding:clamp(14px,1.65vw,22px)}.studio-interaction-demo :is(p,h3){margin:0;padding:0}.studio-interaction-demo button{appearance:none;font:inherit;color:inherit;cursor:pointer;border:0;border-radius:0;background:none;text-align:left}.studio-interaction-demo :is(button,h3):focus-visible{outline:3px solid currentColor;outline-offset:4px}.studio-interaction-demo svg{flex:0 0 auto;width:18px;height:18px}.studio-interaction-demo .sid-intro{display:flex;align-items:center;justify-content:space-between;gap:12px}.studio-interaction-demo .sid-intro>div{min-width:0}.studio-interaction-demo .sid-intro>div>span{display:block;font-size:12px;font-weight:500}.studio-interaction-demo .sid-intro p{margin-top:4px;font-size:11px;color:var(--sid-muted)}.studio-interaction-demo .sid-theme-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:9px 11px;border:1px solid var(--sid-line);border-radius:24px;font-size:11px;transition:background-color .22s ease}.studio-interaction-demo .sid-theme-toggle:hover{background:var(--sid-paper)}.studio-interaction-demo .sid-compositions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 14px;border-bottom:1px solid var(--sid-line)}.studio-interaction-demo .sid-compositions>button{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:11px 9px;font-size:12px;color:var(--sid-muted);transition:color .18s ease,background-color .18s ease}.studio-interaction-demo .sid-compositions>button[aria-selected=true]{background:var(--sid-ink);color:var(--sid-shell)}.studio-interaction-demo .sid-compositions>button:not([aria-selected=true]):hover{background:var(--sid-paper);color:var(--sid-ink)}.studio-interaction-demo .sid-compositions small{margin-left:auto;font-size:9px}.studio-interaction-demo .sid-layout-icon{display:grid;flex:0 0 auto;width:17px;height:17px;gap:2px}.studio-interaction-demo .sid-layout-icon i{display:block;border:1px solid}.studio-interaction-demo .sid-layout-icon-editorial{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.studio-interaction-demo .sid-layout-icon-editorial i:first-child{grid-row:span 2}.studio-interaction-demo .sid-layout-icon-gallery{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.studio-interaction-demo .sid-layout-icon-gallery i:first-child{grid-row:span 2;background:currentColor}.studio-interaction-demo .sid-layout-icon-poster{grid-template-rows:1fr 2fr 1fr}.studio-interaction-demo .sid-layout-icon-poster i:nth-child(2){background:currentColor}.studio-interaction-demo .sid-window{min-width:0;overflow:hidden;border:1px solid var(--sid-line);background:var(--sid-paper)}.studio-interaction-demo .sid-content{position:relative;min-width:0;min-height:506px;overflow:hidden}.studio-interaction-demo .sid-editorial-masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 26px;padding:19px 0 16px;border-bottom:1px solid var(--sid-ink)}.studio-interaction-demo .sid-editorial-masthead>span:first-child{font-family:"Studio Serif",Georgia,serif;font-size:25px;letter-spacing:-.055em}.studio-interaction-demo .sid-editorial-masthead>span:last-child{max-width:17ch;font-size:9px;line-height:1.4;text-align:right;text-transform:uppercase;letter-spacing:.045em}.studio-interaction-demo .sid-editorial-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:24px 18px;padding:25px 26px 27px}.studio-interaction-demo .sid-kicker{grid-column:1;display:flex;align-items:center;gap:12px;color:var(--sid-accent);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.studio-interaction-demo .sid-kicker>span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid;border-radius:50%;font-size:10px}.studio-interaction-demo .sid-editorial-title{grid-column:1;font:400 clamp(40px,8cqi,67px)/.98 "Studio Serif",Georgia,serif;letter-spacing:-.065em;color:var(--sid-ink)}.studio-interaction-demo .sid-editorial-title>em,.studio-interaction-demo .sid-editorial-title>span{display:block}.studio-interaction-demo .sid-editorial-title>em{margin-top:3px;font-weight:400;color:var(--sid-accent)}.studio-interaction-demo .sid-editorial-margin{grid-column:2;grid-row:1/5;display:flex;align-items:center;flex-direction:column;align-self:stretch;gap:22px;padding-top:13px;border-left:1px solid var(--sid-line);color:var(--sid-accent)}.studio-interaction-demo .sid-editorial-margin>span{font:italic 95px/.9 "Studio Serif",Georgia,serif;letter-spacing:-.13em;margin-left:-6px}.studio-interaction-demo .sid-editorial-margin>i{flex:1;width:1px;min-height:28px;background:var(--sid-line)}.studio-interaction-demo .sid-editorial-margin>small{writing-mode:vertical-rl;font-size:9px;letter-spacing:.09em;text-transform:uppercase}.studio-interaction-demo .sid-editorial-intro{grid-column:1;max-width:39ch;font-size:13px;line-height:1.7;color:var(--sid-muted)}.studio-interaction-demo .sid-article-actions{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}.studio-interaction-demo .sid-read,.studio-interaction-demo .sid-save{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;font-size:11px}.studio-interaction-demo .sid-read{border-bottom:1px solid}.studio-interaction-demo .sid-read svg{transition:transform .22s ease}.studio-interaction-demo .sid-read:hover svg{transform:translateX(4px)}.studio-interaction-demo .sid-read[aria-expanded=true] svg{transform:rotate(-90deg)}.studio-interaction-demo .sid-save{justify-content:center;min-width:44px;color:var(--sid-muted)}.studio-interaction-demo .sid-save[aria-pressed=true]{color:var(--sid-accent)}.studio-interaction-demo .sid-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 26px;border-top:1px solid var(--sid-ink)}.studio-interaction-demo .sid-topics button{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;min-width:0;min-height:64px;padding:12px 8px;font-size:11px}.studio-interaction-demo .sid-topics button+button{border-left:1px solid var(--sid-line)}.studio-interaction-demo .sid-topics button>span{width:100%;font-size:9px;color:var(--sid-muted)}.studio-interaction-demo .sid-topics button svg{width:14px;height:14px;margin-left:auto;transition:transform .2s ease}.studio-interaction-demo .sid-topics button[aria-pressed=true]{color:var(--sid-accent)}.studio-interaction-demo .sid-topics button:hover svg{transform:translateX(3px)}.studio-interaction-demo .sid-scene-gallery{background:var(--sid-ink);color:var(--sid-paper);padding:26px}.studio-interaction-demo .sid-gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:25px}.studio-interaction-demo .sid-gallery-heading h3{font:400 clamp(25px,4.8cqi,38px)/1.04 Studio Sans,Arial,sans-serif;letter-spacing:-.06em;color:inherit}.studio-interaction-demo .sid-gallery-heading h3 em{display:block;font:italic 1.1em/1.15 "Studio Serif",Georgia,serif;letter-spacing:-.055em}.studio-interaction-demo .sid-gallery-heading p{max-width:14ch;font-size:10px;line-height:1.6;text-align:right}.studio-interaction-demo .sid-gallery-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:164px 164px;gap:9px}.studio-interaction-demo .sid-gallery-card{display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;padding:17px;color:#213528;background:#d8eaa5;transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s ease}.studio-interaction-demo .sid-card-0{grid-row:1/3}.studio-interaction-demo .sid-card-1{background:#e7eff0;color:#183d45}.studio-interaction-demo .sid-card-2{background:#b8432b;color:#fff1d3}.studio-interaction-demo .sid-gallery-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 #00000025}.studio-interaction-demo .sid-gallery-card:focus-visible{outline-offset:-5px}.studio-interaction-demo .sid-card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}.studio-interaction-demo .sid-card-art{display:flex;flex-direction:column;justify-content:center;min-width:0}.studio-interaction-demo .sid-card-art>span{display:block;font:400 29px/1 Studio Sans,Arial,sans-serif;letter-spacing:-.075em}.studio-interaction-demo .sid-card-art>i{font:italic 43px/1 "Studio Serif",Georgia,serif;letter-spacing:-.06em}.studio-interaction-demo .sid-card-0 .sid-card-art>span{font:400 clamp(70px,16cqi,125px)/1 "Studio Serif",Georgia,serif;letter-spacing:-.14em}.studio-interaction-demo .sid-card-0 .sid-card-art>i{padding-top:17px;border-top:1px solid #21352870;font:400 13px/1.2 Studio Sans,Arial,sans-serif;letter-spacing:0}.studio-interaction-demo .sid-card-1 .sid-card-art>span{display:flex;align-items:center;gap:13px;font-size:29px}.studio-interaction-demo .sid-card-1 .sid-card-art svg{width:28px;height:28px}.studio-interaction-demo .sid-card-1 .sid-card-art>i{display:none}.studio-interaction-demo .sid-card-2 .sid-card-art>span{font-size:17px;font-weight:500;line-height:1;letter-spacing:-.04em}.studio-interaction-demo .sid-card-caption{display:flex;align-items:flex-end;justify-content:space-between;gap:7px;font-size:11px;line-height:1.4}.studio-interaction-demo .sid-card-caption svg{width:16px;height:16px}.studio-interaction-demo .sid-gallery-footer{display:flex;justify-content:space-between;gap:16px;padding-top:18px;font-size:9px}.studio-interaction-demo .sid-gallery-footer>span:last-child{text-align:right}.studio-interaction-demo .sid-scene-poster{display:flex;flex-direction:column;background:var(--sid-poster);color:var(--sid-poster-ink)}.studio-interaction-demo .sid-poster-top{display:flex;justify-content:space-between;gap:20px;padding:21px 26px;border-bottom:1px solid;font-size:10px}.studio-interaction-demo .sid-poster-top>span:first-child{font-weight:500;letter-spacing:-.04em;font-size:13px}.studio-interaction-demo .sid-poster-top>span:last-child{text-align:right}.studio-interaction-demo .sid-poster-body{flex:1;display:flex;flex-direction:column;align-items:stretch;padding:22px 26px 24px}.studio-interaction-demo .sid-poster-number{display:flex;align-items:baseline;gap:5px;margin-bottom:23px;font:400 22px/1 Studio Sans,Arial,sans-serif;letter-spacing:-.05em}.studio-interaction-demo .sid-poster-number>span{font-size:10px;letter-spacing:0}.studio-interaction-demo .sid-poster-title{display:flex;flex-direction:column;gap:0;color:inherit}.studio-interaction-demo .sid-poster-title>span{display:block;font:500 clamp(26px,8.3cqi,68px)/.95 Studio Sans,Arial,sans-serif;letter-spacing:-.075em}.studio-interaction-demo .sid-poster-title>em{display:block;margin:-3px 0 3px;font:italic 400 clamp(45px,15cqi,122px)/1.08 "Studio Serif",Georgia,serif;letter-spacing:-.075em;color:var(--sid-poster-type)}.studio-interaction-demo .sid-poster-title>strong{display:block;font:500 clamp(17px,4.5cqi,36px)/1.15 Studio Sans,Arial,sans-serif;letter-spacing:-.045em}.studio-interaction-demo .sid-poster-next{display:inline-flex;justify-content:space-between;align-items:center;align-self:flex-end;gap:18px;margin-top:26px;min-height:48px;padding:0 0 0 14px;border:1px solid;font-size:11px}.studio-interaction-demo .sid-poster-next>svg{box-sizing:content-box;width:20px;height:20px;padding:13px;border-left:1px solid;transition:padding .22s ease}.studio-interaction-demo .sid-poster-next:hover>svg{padding-left:18px;padding-right:8px}.studio-interaction-demo .sid-poster-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 26px;border-top:1px solid;font-size:10px}.studio-interaction-demo .sid-poster-footer .sid-read{border:0}.studio-interaction-demo .sid-reading{margin:0 26px 24px;padding:23px 0 0;border-top:1px solid}.studio-interaction-demo .sid-reading[hidden]{display:none}.studio-interaction-demo .sid-reading:not([hidden]){animation:sid-detail-in .3s ease both}.studio-interaction-demo .sid-reading p{max-width:58ch;font-size:13px;line-height:1.7}.studio-interaction-demo .sid-reading strong{display:block;margin-top:16px;font-size:12px;line-height:1.6;font-weight:500}.studio-interaction-demo .sid-scene-poster .sid-reading{margin-top:0}.studio-interaction-demo .sid-note{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:13px;font-size:10px;line-height:1.5;color:var(--sid-muted)}.studio-interaction-demo .sid-note>span:last-child{flex:0 0 auto}.studio-interaction-demo .sid-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.studio-interaction-demo .sid-changed.sid-scene-editorial{animation:sid-page-in .52s cubic-bezier(.16,1,.3,1) both}.studio-interaction-demo .sid-changed .sid-editorial-title{animation:sid-type-in .65s cubic-bezier(.16,1,.3,1) both}.studio-interaction-demo .sid-changed.sid-scene-gallery{animation:sid-gallery-in .42s ease both}.studio-interaction-demo .sid-changed .sid-gallery-card{animation:sid-card-in .56s cubic-bezier(.16,1,.3,1) both}.studio-interaction-demo .sid-changed .sid-card-1{animation-delay:65ms}.studio-interaction-demo .sid-changed .sid-card-2{animation-delay:.13s}.studio-interaction-demo .sid-changed.sid-scene-poster{animation:sid-poster-in .52s cubic-bezier(.16,1,.3,1) both}.studio-interaction-demo .sid-changed .sid-poster-title>span{animation:sid-poster-type .64s cubic-bezier(.16,1,.3,1) both}.studio-interaction-demo .sid-changed .sid-poster-title>em{animation:sid-poster-type .64s cubic-bezier(.16,1,.3,1) 65ms both}.studio-interaction-demo .sid-changed .sid-poster-title>strong{animation:sid-poster-type .64s cubic-bezier(.16,1,.3,1) .13s both}@keyframes sid-page-in{0%{clip-path:inset(0 0 100%);opacity:.5}to{clip-path:inset(0);opacity:1}}@keyframes sid-type-in{0%{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes sid-gallery-in{0%{opacity:.25}to{opacity:1}}@keyframes sid-card-in{0%{transform:translateY(34px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes sid-poster-in{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes sid-poster-type{0%{transform:translateX(-28px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes sid-detail-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@container studio-demo (max-width: 460px){.studio-interaction-demo .sid-intro{align-items:flex-start}.studio-interaction-demo .sid-intro p{max-width:23ch}.studio-interaction-demo .sid-compositions{margin-top:17px}.studio-interaction-demo .sid-compositions>button{gap:7px;min-height:48px;padding-inline:8px;font-size:11px}.studio-interaction-demo .sid-compositions small{display:none}.studio-interaction-demo .sid-content{min-height:465px}.studio-interaction-demo .sid-editorial-masthead{margin-inline:17px}.studio-interaction-demo .sid-editorial-masthead>span:first-child{font-size:24px}.studio-interaction-demo .sid-editorial-masthead>span:last-child{max-width:14ch;font-size:8px}.studio-interaction-demo .sid-editorial-body{grid-template-columns:minmax(0,1fr) 36px;gap:23px 13px;padding:22px 17px}.studio-interaction-demo .sid-editorial-title{font-size:clamp(35px,9cqi,46px);line-height:1}.studio-interaction-demo .sid-editorial-margin{gap:18px}.studio-interaction-demo .sid-editorial-margin>span{font-size:57px}.studio-interaction-demo .sid-editorial-margin>small{font-size:8px}.studio-interaction-demo .sid-editorial-intro{font-size:12px}.studio-interaction-demo .sid-save span{display:none}.studio-interaction-demo .sid-topics{margin-inline:17px}.studio-interaction-demo .sid-topics button{padding-inline:5px;font-size:10px;gap:6px 2px}.studio-interaction-demo .sid-topics button svg{width:12px;height:12px}.studio-interaction-demo .sid-scene-gallery{padding:22px 17px}.studio-interaction-demo .sid-gallery-heading{gap:10px;margin-bottom:22px}.studio-interaction-demo .sid-gallery-heading h3{font-size:28px}.studio-interaction-demo .sid-gallery-heading p{max-width:10ch;font-size:9px}.studio-interaction-demo .sid-gallery-grid{grid-template-rows:151px 151px;gap:7px}.studio-interaction-demo .sid-gallery-card{padding:12px}.studio-interaction-demo .sid-card-meta{font-size:10px}.studio-interaction-demo .sid-card-caption{font-size:10.5px}.studio-interaction-demo .sid-card-meta>span:last-child{display:none}.studio-interaction-demo .sid-card-0 .sid-card-art>span{font-size:68px}.studio-interaction-demo .sid-card-1 .sid-card-art>span{font-size:23px;gap:6px}.studio-interaction-demo .sid-card-1 .sid-card-art svg{width:19px;height:19px}.studio-interaction-demo .sid-card-2 .sid-card-art>span{font-size:14px}.studio-interaction-demo .sid-card-art>i{font-size:35px}.studio-interaction-demo .sid-card-caption svg{width:13px;height:13px}.studio-interaction-demo .sid-gallery-footer{font-size:8px}.studio-interaction-demo .sid-poster-top{padding:17px;gap:13px;font-size:9px}.studio-interaction-demo .sid-poster-top>span:last-child{max-width:14ch}.studio-interaction-demo .sid-poster-body{padding:23px 17px}.studio-interaction-demo .sid-poster-number{margin-bottom:27px}.studio-interaction-demo .sid-poster-title>span{font-size:9.3cqi}.studio-interaction-demo .sid-poster-title>em{font-size:17cqi}.studio-interaction-demo .sid-poster-title>strong{font-size:5.5cqi}.studio-interaction-demo .sid-poster-next{margin-top:31px}.studio-interaction-demo .sid-poster-footer{padding-inline:17px}.studio-interaction-demo .sid-reading{margin-inline:17px}.studio-interaction-demo .sid-note{font-size:9px}}@container studio-demo (max-width: 285px){.studio-interaction-demo .sid-layout-icon{display:none}.studio-interaction-demo .sid-compositions>button{justify-content:center}.studio-interaction-demo .sid-theme-toggle{padding-inline:9px}.studio-interaction-demo .sid-theme-toggle>span{display:none}.studio-interaction-demo .sid-editorial-title{font-size:36px}.studio-interaction-demo .sid-editorial-body{grid-template-columns:minmax(0,1fr)}.studio-interaction-demo .sid-editorial-margin{display:none}.studio-interaction-demo .sid-gallery-card{padding:9px}.studio-interaction-demo .sid-card-0 .sid-card-art>span{font-size:54px}.studio-interaction-demo .sid-card-1 .sid-card-art>span{font-size:18px;gap:4px}.studio-interaction-demo .sid-card-1 .sid-card-art svg{width:15px;height:15px}.studio-interaction-demo .sid-card-art>i{font-size:29px}.studio-interaction-demo .sid-gallery-heading{align-items:flex-start;flex-direction:column}.studio-interaction-demo .sid-gallery-heading p{max-width:none;text-align:left}.studio-interaction-demo .sid-card-caption svg,.studio-interaction-demo .sid-topics button svg{display:none}}@media (prefers-reduced-motion:reduce){.studio-interaction-demo,.studio-interaction-demo *,.studio-interaction-demo :after{animation:none!important;transition:none!important}}