.landing-editor-scene{--landing-editor-demo-height:520px;flex-direction:column;gap:2.5rem;display:flex}.landing-editor-scene-columns{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center;gap:3rem;display:grid;@media only screen and (width<=767px){display:block}}.landing-editor-scene-demo{height:var(--landing-editor-demo-height);flex-direction:column;display:flex;@media only screen and (width<=767px){height:40vh;padding-bottom:1em}& .landing-editor-scene-frame{flex:1;min-height:0}}.landing-editor-scene-fallback{border:1px solid var(--border-color);border-radius:var(--16px);background:color-mix(in srgb, currentColor 4%, transparent);width:100%;height:100%}.landing-editor-scene.landing-walkthrough-scene .landing-editor-scene-copy .landing-feature-list{@media only screen and (width<=767px){scroll-snap-type:x proximity;margin-top:1.5rem;display:flex;overflow-x:auto;& li{scroll-snap-align:start;flex:1 0 260px}}}.landing-walkthrough-scene .landing-walkthrough-scene-copy .landing-feature-list{margin-top:0;& li{padding-block:.75rem;padding-right:1rem;transition:opacity .3s,border-color .3s,background-color .3s;position:relative}}.landing-walkthrough-scene[data-active-step] .landing-feature-list li{opacity:.45;cursor:pointer;&:not(.active) a{pointer-events:none}&.active{opacity:1;border-left-color:var(--primary-color);background-color:color-mix(in srgb, var(--primary-color) 8%, transparent)}}.landing-walkthrough-scene[data-auto-playing] .landing-feature-list li.active{border-left-color:color-mix(in srgb, var(--primary-color) 30%, transparent);&:before{content:"";background:var(--primary-color);transform-origin:top;width:3px;height:100%;animation:landing-walkthrough-step-progress var(--landing-walkthrough-step-interval,5s) linear;position:absolute;top:0;left:-3px}}@keyframes landing-walkthrough-step-progress{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.landing-walkthrough-scene .landing-feature-list li{@media (prefers-reduced-motion:reduce){transition:none}}.landing-organize-scene{--landing-organize-demo-height:560px;& .landing-organize-scene-columns{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:3rem;display:grid;& .landing-organize-scene-demo{width:100%;max-width:462px;height:var(--landing-organize-demo-height);flex-direction:column;grid-area:1/2;justify-self:center;display:flex;& .landing-organize-scene-frame{flex:1;min-height:0}& .demo-app-frame-container .demo-app-frame{& .note-list-bar-layout-content{border-right:none}}& .landing-organize-scene-fallback{border:1px solid var(--border-color);border-radius:var(--16px);background:color-mix(in srgb, currentColor 4%, transparent);width:100%;height:100%}}& .landing-organize-scene-copy{grid-area:1/1}@media only screen and (width<=767px){display:block;& .landing-organize-scene-demo{height:min(var(--landing-organize-demo-height), 60vh);margin-inline:auto}}}& .landing-organize-scene-demo .main-layout{transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .4s ease-in-out;@media (prefers-reduced-motion:reduce){transition:opacity .4s ease-in-out}}&[data-active-step="1"] .landing-organize-scene-demo .main-layout{transform-origin:100px 165px;transform:translate(100px,115px)scale(2)}&[data-active-step="3"] .landing-organize-scene-demo .main-layout{transform-origin:100px 300px;transform:translate(100px,-20px)scale(2)}&[data-active-step="4"] .landing-organize-scene-demo .main-layout{transform-origin:100px 450px;transform:translate(100px,-110px)scale(2)}& .demo-force-hover .disclosure{display:flex}& .demo-force-hover .disclosure-icon{margin:0 .2em;font-size:.7em;display:inline-block}& .demo-click-ripple{z-index:100;background:var(--primary-color);pointer-events:none;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;animation:.65s ease-out forwards landing-organize-click-ripple;position:absolute;transform:scale(0)}}@keyframes landing-organize-click-ripple{0%{opacity:.6;transform:scale(.2)}to{opacity:0;transform:scale(2.4)}}.landing-organize-scene.landing-walkthrough-scene .landing-organize-scene-copy .landing-feature-list{@media only screen and (width<=767px){scroll-snap-type:x proximity;margin-top:1.5rem;display:flex;overflow-x:auto;& li{scroll-snap-align:start;flex:1 0 260px}}}.landing-preview-scene{--landing-preview-demo-height:320px;@media only screen and (width>=768px){--landing-preview-demo-height:460px}@media only screen and (width>=1200px){--landing-preview-demo-height:560px}@media only screen and (width>=1920px){--landing-preview-demo-height:640px}& .landing-preview-scene-columns{flex-direction:column;align-items:center;gap:2.5rem;display:flex;& .landing-preview-scene-demo{width:100%;max-width:960px;height:var(--landing-preview-demo-height);flex-direction:column;margin-bottom:1em;display:flex;& .landing-preview-scene-frame{flex:1;min-height:0}& .demo-app-frame-container .demo-app-frame{box-shadow:none;outline:1px solid hsl(var(--hsl-neutral-600))}& .landing-preview-scene-fallback{border:1px solid var(--border-color);border-radius:var(--16px);background:color-mix(in srgb, currentColor 4%, transparent);width:100%;height:100%}}& .landing-preview-scene-copy{width:100%;& .landing-feature-list{scroll-snap-type:x proximity;display:flex;overflow-x:auto;& li{scroll-snap-align:start;flex:1 0 260px}}}}}