.faq-page{padding-bottom:100px}.faq-definitions{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:32px;padding:32px;background:#f0ebf7;border:1px solid #e6dff0;border-radius:20px;margin-bottom:56px}.faq-definitions h2{font-size:24px;margin:10px 0}.faq-definitions h3{font-size:18px;margin:0 0 12px}.faq-definitions p:not(.eyebrow){font-size:14px;line-height:1.9;color:#77717e;margin:0}.faq-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px}.faq-nav{align-self:start;position:sticky;top:120px}.faq-nav h2{font-size:24px;margin:14px 0 25px}.faq-nav nav{display:flex;flex-direction:column;gap:8px}.faq-nav nav a{display:flex;justify-content:space-between;padding:15px 12px;border-bottom:1px solid #e7e2ed;font-size:14px}.faq-nav nav a:hover{background:#f0ebf7;border-radius:8px}.faq-nav small{color:#9280a7}.faq-guide-link{display:inline-block;color:#3477b4;font-size:13px;margin-top:30px}.faq-link-tip{font-size:12px;color:#8b8591;line-height:1.9;margin-top:16px}.faq-search label{font-size:24px;font-weight:700;display:block;margin-bottom:20px}.faq-search>div{display:flex;gap:12px}.faq-search input{width:100%;min-width:0;border:1px solid #ded9e5;border-radius:10px;background:white;padding:16px 18px;font:inherit;font-size:14px}.faq-search .button{flex-shrink:0}.faq-tools{display:flex;justify-content:space-between;align-items:center;margin:16px 0 32px;gap:15px}.faq-tools p,.faq-tools button{font-size:12px;color:#8b8591}.faq-group{scroll-margin-top:110px;margin-bottom:40px;border:1px solid #e8e4eb;background:white;border-radius:18px;overflow:hidden}.faq-group-heading{padding:28px 30px;background:#f7f5fa}.faq-group-heading>span{font-size:10px;letter-spacing:2px;color:#9980b1}.faq-group-heading h2{font-size:25px;margin:10px 0 0}.faq-item{border-top:1px solid #eeeaf2}.faq-item summary{padding:23px 30px;gap:18px;cursor:pointer;display:flex;align-items:center;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-number{color:#ab9aba;font-size:12px;flex-shrink:0}.faq-item h3{font-size:16px;line-height:1.7;font-weight:600;margin:0}.faq-plus{margin-left:auto;color:#9a80b5;font-size:20px;flex-shrink:0}.faq-item[open] .faq-plus{transform:rotate(45deg)}.faq-item[open] summary{padding-bottom:14px}.faq-item>.faq-answer{padding:0 30px 25px 65px;max-width:none;font-size:14px;line-height:1.95;color:#736c79}.faq-answer p{margin:8px 0}.faq-answer ul,.faq-answer ol{padding-left:22px;margin:8px 0}.faq-answer li{margin:7px 0}.faq-answer a{color:#2876b9;text-decoration:underline;text-underline-offset:4px}.faq-answer code{color:#3777ae;background:#edf5fc;padding:2px 5px;border-radius:4px}.faq-page [hidden]{display:none!important}.faq-page :focus-visible{outline:2px solid #8b6ab0;outline-offset:4px}#faq-empty{padding:40px;text-align:center;background:#f1edf6;border-radius:14px;color:#776b84}
@media(max-width:1000px){.faq-definitions{grid-template-columns:1fr 1fr}.faq-definitions>div{grid-column:1/-1}.faq-layout{grid-template-columns:210px minmax(0,1fr);gap:30px}}
@media(max-width:760px){.faq-definitions{grid-template-columns:1fr;gap:24px;padding:24px;margin-bottom:32px}.faq-layout{grid-template-columns:1fr;gap:30px}.faq-nav{position:static}.faq-nav nav{gap:0}.faq-nav nav a{padding:14px 0}.faq-nav h2{margin-bottom:12px}.faq-guide-link{margin-top:18px}.faq-link-tip br{display:none}.faq-search>div{gap:8px}.faq-search input{font-size:12px;padding:14px 12px}.faq-search .button{padding:14px 18px}.faq-group-heading{padding:22px}.faq-item summary{padding:20px;gap:12px}.faq-item h3{font-size:15px}.faq-item>.faq-answer{padding:0 20px 22px 45px}.faq-tools{margin-bottom:24px}.faq-page{padding-bottom:50px}}
.tutorial-hero{overflow:hidden;background:linear-gradient(115deg,#faf9f6 12%,#f4eef8 62%,#e9effb);border-bottom:1px solid #ebe5ef}.tutorial-hero-inner{position:relative;min-height:470px;display:flex;align-items:center;isolation:isolate}.tutorial-hero-copy{position:relative;z-index:1;padding:65px 0;width:55%}.tutorial-hero h1{font-size:clamp(40px,4.5vw,68px);line-height:1.2;letter-spacing:-2px;margin:25px 0}.tutorial-hero-copy>p:last-child{font-size:15px;color:#89828e}.tutorial-mascots{position:absolute;width:55%;height:115%;object-fit:contain;right:0;bottom:-8%;z-index:0;pointer-events:none}.tutorial-paths{padding-top:48px;padding-bottom:48px}.tutorial-paths>h2{font-size:30px;margin:16px 0 28px}.tutorial-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tutorial-path{padding:30px 32px;border:1px solid #e5dce9;border-radius:18px;background:#f3edf8;display:flex;flex-direction:column}.diy-path{background:#f9f1ed;border-color:#eee1da}.path-top{display:flex;align-items:center;justify-content:space-between;color:#9b84af;font-size:10px;letter-spacing:1.5px}.diy-path .path-top{color:#b18c7d}.path-top b{font-size:14px;letter-spacing:0;border:1px solid #d8c8e4;padding:8px 10px;border-radius:7px}.diy-path .path-top b{border-color:#e6cec1}.tutorial-path h3{font-size:29px;margin:18px 0 12px}.tutorial-path p{font-size:14px;line-height:1.9;color:#827987;margin:0 0 18px}.tutorial-path .path-lead{color:#4f4558;font-weight:600;font-size:16px;margin-bottom:10px}.tutorial-path .button{align-self:flex-start;margin-top:auto;background:#fffafc}.faq-page#component-guide{scroll-margin-top:110px}
@media(max-width:760px){.tutorial-hero-inner{min-height:510px;align-items:flex-start}.tutorial-hero-copy{padding:40px 0 0;width:100%}.tutorial-hero h1{font-size:40px}.tutorial-hero-copy>p:last-child{font-size:12px}.tutorial-mascots{width:80%;height:65%;right:-6%;bottom:-7%;opacity:.9}.tutorial-path-grid{grid-template-columns:1fr;gap:16px}.tutorial-path{padding:24px}.tutorial-paths>h2{font-size:26px}.tutorial-paths{padding-top:34px;padding-bottom:34px}}

/* Tutorial path cards: quiet, partial product previews behind the copy. */
.tutorial-path{position:relative;isolation:isolate;overflow:hidden;min-height:280px;padding:24px 32px}
.tutorial-path::before,.tutorial-path::after{content:"";position:absolute;pointer-events:none}
.tutorial-path::before{z-index:0;inset:0;background:linear-gradient(100deg,currentColor 0%,transparent 64%);opacity:.035}
.tutorial-path::after{z-index:0;right:2%;bottom:-22%;width:42%;height:112%;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.2;filter:saturate(.82);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%)}
.tutorial-path>*{position:relative;z-index:1}
.tutorial-path>p:not(.path-support){max-width:76%}
.diy-path::after{right:1%;bottom:4%;width:49%;height:78%;background-image:url("assets/tutorial-face-selection.png");opacity:.25;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
.component-path::after{right:1%;bottom:5%;width:49%;height:76%;background-image:url("assets/tutorial-complete-components.png");opacity:.25;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
.path-support{display:flex;align-items:center;align-self:flex-start;gap:9px;width:max-content;max-width:100%;margin:1px 0 18px!important;padding:7px 12px;border:1px solid #d9cce6;border-radius:999px;background:#fff9;font-size:12px!important;font-weight:700;color:#5f5368!important;line-height:1.3!important;backdrop-filter:blur(5px)}
.path-support span{font-size:9px;letter-spacing:.12em;color:#9b84af}
.path-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:18px 0 12px}
.tutorial-path .path-heading h3{margin:0}
.path-heading .path-support{align-self:center;margin:0!important;flex-shrink:0}
.diy-path .path-support{border-color:#ead3c7}.diy-path .path-support span{color:#b18c7d}
@media(max-width:760px){.tutorial-path{min-height:270px;padding:22px 24px}.tutorial-path>p:not(.path-support){max-width:84%}.tutorial-path::after{width:48%;opacity:.2}.diy-path::after{right:0;width:49%;bottom:4%}.component-path::after{right:0;width:49%;bottom:5%}}
.tutorial-silhouette{position:absolute;width:78%;height:145%;object-fit:contain;right:-8%;bottom:-20%;z-index:0;pointer-events:none;filter:brightness(0) invert(1);opacity:.48;transform:rotate(-4deg)}
.tutorial-mascots{z-index:1}
@media(max-width:760px){.tutorial-silhouette{width:112%;height:94%;right:-22%;bottom:-5%;opacity:.34}}
/* Hide the introductory definitions block per design feedback. */
.faq-definitions{display:none!important}