/* Independent examples section directly below Xiaoyi. */
#moduleExamplesEntry{display:none;}
html body.workspace-readable.home-layout-enabled #moduleExamplesEntry{display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;gap:12px;flex-shrink:0;min-height:46px;width:100%;padding:0 19px;margin:0 0 8px;border:0;border-radius:9px;background:transparent;color:#34547e;font-family:inherit;font-size:14px;font-weight:650;text-align:left;cursor:pointer;}
html body.workspace-readable.home-layout-enabled #moduleExamplesEntry:hover{background:#edf5ff;color:#0865e9;}
#moduleExamplesEntry>span{flex:0 0 auto;}
.module-examples-entry-icon{display:grid;place-items:center;width:18px;font-size:18px;color:#2473df;}
#moduleExamplesEntry:focus-visible{outline:2px solid #73aeff;outline-offset:2px;}
.module-examples-dialog{position:fixed;inset:0;width:min(1120px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:1px solid #e1ecff;border-radius:20px;background:linear-gradient(145deg,#fff 25%,#eef6ff 75%,#fff);color:#061239;box-shadow:0 24px 90px #10264d40;overflow:hidden;font-family:inherit;}
.module-examples-shell{display:flex;flex-direction:column;max-height:calc(100dvh - 42px);}
.module-examples-dialog::backdrop{background:#111e355c;backdrop-filter:blur(4px);}
.module-examples-head{position:relative;display:flex;align-items:center;gap:16px;padding:20px 24px 14px;flex:0 0 auto;background:radial-gradient(ellipse at 90% 0,#cee5ff 0,transparent 65%);}
.module-examples-titles{flex:1;min-width:0;}
.module-examples-kicker{margin:0 0 6px;color:#3d69a2;font-size:12px;}
.module-examples-head h2{margin:0;letter-spacing:-.5px;font-size:28px;font-weight:850;line-height:1.25;color:#061239;}
.module-examples-head h2 span{font-size:1.15em;color:#0561ff;margin-right:4px;}
.module-examples-purpose{margin:8px 0 0;font-size:13px;line-height:1.6;color:#425e87;}
.module-examples-close{position:absolute;right:13px;top:12px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:0;background:transparent;color:#0961ff;font-size:28px;box-shadow:none;cursor:pointer;}
.module-examples-body{overflow-y:auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0 20px 14px;}
.module-example-step{position:relative;display:flex;flex-direction:column;min-width:0;padding:14px 14px 10px;border:1px solid #dce9fc;border-radius:12px;background:#ffffffeb;box-shadow:0 6px 20px #2963b209;}
.module-example-step:not(:last-child)::after{content:'›';position:absolute;right:-18px;top:44%;z-index:1;font-size:40px;line-height:1;color:#267bff;text-shadow:0 3px 8px #b8dcff;pointer-events:none;}
.module-example-step-heading{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.module-example-step-number{display:grid;place-items:center;flex:0 0 32px;height:30px;border-radius:16px;background:#0862ff;color:#fff;font-size:16px;font-weight:750;}
.module-example-step-heading h3{margin:0;font-size:19px;line-height:1.4;color:#061239;font-weight:800;}
.module-example-lead{margin:0 0 10px;padding:7px 6px;border-radius:10px;background:#edf5ff;text-align:center;font-size:13px;font-weight:700;line-height:1.5;color:#0561ff;}
.module-examples-visual{margin:0 0 8px;min-width:0;}
.module-examples-visual>img{display:block;width:100%;height:150px;object-fit:contain;border-radius:12px;background:#f4f8fd;}
.module-examples-visual figcaption{margin-top:6px;font-size:11px;line-height:1.5;color:#7085a2;}
.module-examples-crop{position:relative;width:100%;aspect-ratio:441/307;overflow:hidden;border-radius:12px;background:#ecf3fb;}
.module-examples-crop img{position:absolute;display:block;max-width:none;width:379.1383%;height:auto;left:-25.1701%;top:0;transform:translateY(-48.7789%);}
.illustrated-result .module-examples-crop{aspect-ratio:480/307;}
.illustrated-result .module-examples-crop img{width:348.3333%;left:-228.3333%;top:0;transform:translateY(-48.7789%);}
.module-examples-upload-sample{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:150px;padding:12px;text-align:center;border:1px dashed #b6d4ff;border-radius:12px;background:linear-gradient(135deg,#f7fbff,#e7f2ff);color:#35628d;box-sizing:border-box;}
.module-examples-upload-sample strong{font-size:14px;line-height:1.6;}
.module-examples-upload-sample>span:last-child{font-size:12px;line-height:1.6;}
.module-examples-upload-icon{font-size:32px;line-height:1.2;color:#1670ff;}
.module-example-brief{position:relative;flex:1;min-height:120px;padding:12px 12px 30px;border:1px solid #d1e3ff;border-radius:13px;background:#fff;}
.module-example-brief p{margin:0;color:#152b55;font-size:14px;line-height:1.7;overflow-wrap:anywhere;}
.module-example-brief-count{position:absolute;right:14px;bottom:12px;font-size:11px;color:#7c96ba;}
.module-example-ideas{margin-top:10px;}
.module-example-ideas>p{margin:0 0 8px;font-size:13px;color:#29456d;}
.module-example-ideas>div{display:flex;flex-wrap:wrap;gap:7px;}
.module-example-ideas span{padding:4px 8px;border-radius:9px;background:#eaf3ff;color:#1264d7;font-size:12px;}
.module-example-field+.module-example-field{margin-top:16px;}
.module-example-field h3{margin:0 0 8px;font-size:13px;line-height:1.5;color:#263b59;}
.module-example-field p{margin:0;color:#5b6d84;font-size:13px;line-height:1.85;overflow-wrap:anywhere;}
.module-example-checklist{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.module-example-checklist li{position:relative;padding-left:18px;font-size:13px;line-height:1.85;color:#5b6d84;overflow-wrap:anywhere;}
.module-example-checklist li::before{content:'✓';position:absolute;left:0;color:#3179d9;font-size:12px;font-weight:700;}
.module-example-more{margin:8px 0 0;padding:6px 0;border-top:1px solid #e3edfa;}
.module-example-more summary{font-size:12px;line-height:1.6;color:#2768bf;cursor:pointer;}
.module-example-more[open] summary{margin-bottom:14px;}
.module-example-trail{margin:8px 0 0;padding:6px;border-radius:8px;background:#f0f6ff;color:#476b9b;font-size:11px;line-height:1.6;text-align:center;}
.module-examples-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:0 0 auto;padding:0 20px 16px;}
.module-examples-footer p{margin:0;font-size:13px;line-height:1.7;color:#526e97;}
.module-examples-footer strong{color:#0864ff;}
.module-examples-use{flex:0 0 auto;min-width:140px;min-height:40px;padding:8px 18px;border:0;border-radius:12px;background:#0561ff;color:white;font-family:inherit;font-size:16px;font-weight:650;line-height:1.5;cursor:pointer;box-shadow:0 5px 14px #1164ff1f;}
.module-examples-use:focus-visible,.module-examples-close:focus-visible,.module-example-more summary:focus-visible{outline:3px solid #9dc4ff;outline-offset:2px;}
@media(max-width:760px){html body.workspace-readable.home-layout-enabled #moduleTabs#moduleTabs button.module-examples-entry,#moduleTabs button.module-examples-entry{display:none!important;}.module-examples-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);}.module-examples-shell{max-height:calc(100dvh - 26px);}.module-examples-head{padding:22px 20px 12px;}.module-examples-head h2{font-size:30px;letter-spacing:-1px;}.module-examples-purpose{font-size:13px;margin-top:10px;}.module-examples-body{grid-template-columns:1fr;padding:10px 16px 16px;}.module-example-step:not(:last-child)::after{display:none;}.module-example-step-heading h3{font-size:23px;}.module-example-lead{font-size:16px;}.module-example-brief p{font-size:16px;}.module-examples-footer{padding:0 18px 16px;align-items:stretch;flex-direction:column;gap:10px;}.module-examples-use{font-size:18px;}}

.module-example-step .module-examples-crop{height:clamp(110px,21vh,170px);aspect-ratio:auto;}

.module-examples-categories{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:6px;padding:0 24px 14px;}
.module-examples-categories button{flex:0 0 auto;padding:6px 10px;border:1px solid #dce8fa;border-radius:9px;background:#fff;color:#4b688d;font-family:inherit;font-size:12px;cursor:pointer;}
.module-examples-categories button[aria-pressed=true]{background:#0862ff;border-color:#0862ff;color:#fff;}
.module-examples-categories button:focus-visible{outline:2px solid #73aeff;outline-offset:2px;}
@media(max-width:760px){html body.workspace-readable.home-layout-enabled #moduleExamplesEntry{display:none!important;}.module-examples-categories{padding:0 18px 12px;}}

.module-examples-entry-icon svg{display:block;width:18px;height:21px;}
@media(min-width:761px) and (max-height:800px){.module-examples-head{padding-top:14px;padding-bottom:10px;}.module-examples-head h2{font-size:24px;}.module-examples-categories{padding-bottom:10px;}.module-example-step{padding:10px;}.module-example-step .module-examples-crop,.module-examples-visual>img,.module-examples-upload-sample{height:110px;}.module-example-brief{min-height:90px;}.module-example-brief p{font-size:13px;line-height:1.6;}.module-example-ideas{margin-top:8px;}.module-examples-footer{padding-bottom:12px;}}
@media(min-width:761px) and (max-height:650px){.module-examples-head{padding:10px 24px 8px;}.module-examples-head h2{font-size:22px;}.module-examples-kicker{margin-bottom:4px;}.module-examples-purpose{margin-top:4px;}.module-examples-categories{gap:4px;padding-bottom:8px;}.module-examples-categories button{padding:4px 8px;}.module-examples-body{padding-bottom:10px;}.module-example-step-heading{margin-bottom:6px;}.module-example-lead{margin-bottom:6px;padding:5px;line-height:1.4;}.module-example-step .module-examples-crop,.module-examples-visual>img,.module-examples-upload-sample{height:85px;}.module-example-more{margin-top:6px;padding:4px 0;}.module-example-trail{margin-top:6px;padding:4px;}.module-examples-footer{padding-bottom:10px;}.module-examples-footer p{font-size:12px;}}
.module-example-step{--tutorial-image-height:clamp(110px,21vh,170px);}
.module-example-step .module-examples-crop{width:min(100%,calc(var(--tutorial-image-height) * 441 / 307));height:auto;aspect-ratio:441/307;margin-inline:auto;}
.module-example-step .illustrated-result .module-examples-crop{width:min(100%,calc(var(--tutorial-image-height) * 480 / 307));aspect-ratio:480/307;}
@media(min-width:761px) and (max-height:800px){.module-example-step{--tutorial-image-height:110px;}}
@media(min-width:761px) and (max-height:650px){.module-example-step{--tutorial-image-height:85px;}}

.module-examples-visual>img.module-examples-transparent{background-color:#f7f8fa;background-image:conic-gradient(#e1e5eb 25%,transparent 0 50%,#e1e5eb 0 75%,transparent 0);background-size:16px 16px;}

/* Give the tutorial its own gentle cue before choosing a creation tool. */
html body.workspace-readable.home-layout-enabled #moduleExamplesEntry{position:relative;isolation:isolate;overflow:hidden;line-height:1.1;}
#moduleExamplesEntry>span{position:relative;z-index:1;}
html body.workspace-readable.home-layout-enabled #moduleExamplesEntry::after{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:45%;background:linear-gradient(105deg,transparent 5%,rgba(82,163,255,.08) 28%,rgba(132,197,255,.38) 50%,rgba(82,163,255,.08) 72%,transparent 95%);pointer-events:none;transform:translateX(-160%) skewX(-18deg);animation:tutorial-entry-sweep 5.6s ease-in-out infinite!important;}
html body.workspace-readable.home-layout-enabled #moduleExamplesEntry[aria-expanded="true"]::after{animation-play-state:paused!important;opacity:0;}
@keyframes tutorial-entry-sweep{0%,52%{transform:translateX(-160%) skewX(-18deg);}88%,100%{transform:translateX(380%) skewX(-18deg);}}
@media(prefers-reduced-motion:reduce){html body.workspace-readable.home-layout-enabled #moduleExamplesEntry::after{animation:none!important;display:none;}}