.role-story{display:grid;grid-template-columns:1fr 1.2fr;gap:5%;padding:0 20px 35px 85px;align-items:start}
.role-story h3{font:italic 32px/1.1 Garamond,Georgia;margin:12px 0}
.role-story p{font:14px/1.7 Inter;margin-bottom:16px}.role-story .eyebrow{font:9px Plex;letter-spacing:1px}.role-story .role-responsibility{border-top:1px solid #a4afad;padding-top:15px;font-size:12px}.role-story a{font:12px Inter;text-decoration:underline;text-underline-offset:5px}
.role-sample{margin:0}.role-sample img{display:block;width:100%;height:auto;max-height:480px;object-fit:contain;object-position:top;background:#d6dddc}.role-sample figcaption{font:10px/1.5 Plex;margin-top:10px}
.tutorial-library{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:35px 0 60px;scroll-margin-top:130px}.tutorial-player{min-width:0;border-top:1px solid;padding-top:20px}.tutorial-player h2{font:700 clamp(28px,3vw,46px)/1 Inter;letter-spacing:-1.8px;margin:12px 0}.tutorial-player header p{font:13px/1.5 Inter;margin:10px 0 20px}.tutorial-player .eyebrow{font:9px Plex}
.device-switch{display:flex;border-block:1px solid;margin-bottom:16px}.device-switch button{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-height:48px;border:0;background:transparent;color:inherit;font:12px Inter;cursor:pointer}.device-switch button+button{border-left:1px solid}.device-switch button[aria-pressed=true]{background:#302a25;color:#ead0df}.device-switch svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}.device-switch button:focus-visible{outline:3px solid #7442b2;outline-offset:2px}
.video-stage{display:grid;place-items:center;background:#201d1b;min-height:200px}.video-stage video{display:block;width:100%;aspect-ratio:16/9;max-height:560px;object-fit:contain}.is-phone .video-stage video{width:auto;max-width:100%;height:480px;aspect-ratio:9/16}.video-format{font:10px Plex;margin-top:10px}.tutorial-library~.lineup .library-status{margin-top:25px}
.demo-page{padding:20px 6% 60px;background:#e4e6e8;color:#19231f}.demo-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%;margin-top:25px}.demo-layout h1{font:700 clamp(55px,7vw,100px)/.9 Inter;letter-spacing:-5px;margin:0 0 30px}.demo-layout h1 em{font-family:Garamond,Georgia;font-weight:400;color:#7952a7}.demo-layout header p,.demo-layout li{font:14px/1.7 Inter}.demo-layout ol{padding:25px 0 25px 20px}.demo-layout header a{font:12px Inter}.demo-layout form{border-top:1px solid;padding-top:20px}.demo-layout h2{font:italic 36px Garamond,Georgia;margin-bottom:25px}.demo-layout label{display:block;font:12px Inter;margin-bottom:18px}.demo-layout label span{opacity:.6}.demo-layout input,.demo-layout select,.demo-layout textarea{display:block;width:100%;margin-top:7px;border:0;border-bottom:1px solid #7c8c81;border-radius:0;background:#d5dcda;color:#19231f;padding:12px;font:15px Inter;box-sizing:border-box}.demo-layout textarea{resize:vertical}.demo-layout button,.demo-layout #demo-mail{display:flex;justify-content:space-between;gap:20px;align-items:center;width:100%;min-height:48px;padding:13px;border:0;background:#b99bdb;color:#19231f;font:14px Inter;cursor:pointer}.demo-layout .demo-hint{font:11px/1.6 Inter;margin:18px 0}.demo-layout #demo-result:not([hidden]){margin-top:20px;border-top:1px solid;padding-top:15px}.demo-layout #demo-result p{font:12px/1.5 Inter}.demo-layout #copy-demo{background:transparent;text-decoration:underline}.demo-layout :focus-visible{outline:2px solid #6d479a;outline-offset:3px}
@media(max-width:650px){.role-story{display:block;padding:0 8px 25px}.role-story p{font-size:13px}.role-sample{margin-top:25px}.tutorial-library{display:block;margin:25px 0 40px}.tutorial-player{margin-bottom:35px}.is-phone .video-stage video{height:440px;max-height:65vh}.demo-layout{display:block}.demo-layout h1{font-size:58px;letter-spacing:-3px}.demo-layout form{margin-top:35px}.demo-page{padding:20px 22px 40px}}