/* Tutorials live inside the same site shell as the learning pages. */
#nav-tutorials{color:#98702c;background:#fff8e9;border-color:#eeddb5}#nav-tutorials:hover{background:#fff0cb;color:#805c1f}
.tutorial-hub{max-width:1100px;margin:0 auto}.tutorial-list-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 42px;border:1px solid #e3d9f6;border-radius:24px;background:linear-gradient(120deg,#f0e8ff,#faf7ff 70%);margin-bottom:30px}.tutorial-kicker{color:#8560bb;font-size:13px;font-weight:600}.tutorial-list-heading h1{font-size:32px;line-height:1.45;margin:14px 0;color:#302748}.tutorial-list-heading p{color:#837591;font-size:14px;line-height:1.8;margin:0}.tutorial-hub-symbol{display:grid;place-items:center;flex-shrink:0;width:95px;height:110px;background:#fff9;border:1px solid white;border-radius:18px;font-size:49px;color:#a489d3;transform:rotate(7deg)}.tutorial-search-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.tutorial-search-row h2{font-size:20px;margin:0}.tutorial-search-row h2 span{font-size:13px;background:#ede6f8;color:#8568b2;border-radius:20px;padding:4px 9px;margin-left:8px}.tutorial-search-row input{width:min(360px,50%);font-size:13px}.tutorial-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tutorial-card{display:flex;align-items:flex-start;gap:18px;background:white;padding:26px;border:1px solid #e5ddf0;border-radius:18px;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}.tutorial-card:hover{border-color:#b29ad8;transform:translateY(-2px);box-shadow:0 8px 25px #7150a410}.tutorial-card-icon{display:grid;place-items:center;width:43px;height:47px;flex-shrink:0;border-radius:12px;background:#f1eafb;color:#9572c6;font-size:24px}.tutorial-card:nth-child(3n+2) .tutorial-card-icon{background:#edf7f3;color:#4a9a82}.tutorial-card:nth-child(3n+3) .tutorial-card-icon{background:#fff5df;color:#b28e44}.tutorial-card>div{min-width:0;flex:1}.tutorial-card-label{font-size:11px;color:#9a8da8}.tutorial-card h3{font-size:19px;margin:9px 0;color:#352d4b;line-height:1.5}.tutorial-card p{font-size:13px;color:#8c809a;margin:0;line-height:1.8}.tutorial-card-action{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:12px;color:#8763b9;font-weight:600}.tutorial-card-action b{font-size:19px}.tutorial-empty{grid-column:1/-1;padding:52px 24px;text-align:center;background:white;border:1px dashed #dfd4ef;border-radius:16px;color:#93849f}.tutorial-empty b{color:#635370}.tutorial-empty p{font-size:13px}.tutorial-reading{max-width:860px;margin:0 auto}.tutorial-back{display:inline-block;margin-bottom:22px;text-decoration:none;color:#8261af;font-size:13px}.tutorial-article{background:white;border:1px solid #e7dff1;border-radius:20px;padding:38px 44px;overflow-wrap:anywhere;color:#42384f}.tutorial-article-kicker{font-size:12px;color:#a08caf}.tutorial-article .tutorial-title{font-size:30px;line-height:1.5;margin:14px 0;color:#302640}.tutorial-summary{color:#93859e;font-size:14px;line-height:1.8;border-bottom:1px solid #eee7f5;padding-bottom:24px;margin-bottom:26px}.tutorial-article p{font-size:16px;line-height:1.95;margin:16px 0}.tutorial-article h1{font-size:28px;line-height:1.5;margin:30px 0 16px}.tutorial-article h2{font-size:23px;line-height:1.6;margin:28px 0 14px}.tutorial-article h3{font-size:19px;margin:24px 0 12px}.tutorial-article img{display:block;max-width:100%;height:auto;border-radius:12px;margin:22px auto}.tutorial-article ul,.tutorial-article ol{padding-left:25px;line-height:1.9;font-size:16px;margin:18px 0}.tutorial-article li{margin:8px 0}.tutorial-article blockquote{margin:22px 0;background:#f7f3fc;border-left:3px solid #a38bc7;padding:14px 20px;line-height:1.9;color:#796789;border-radius:0 8px 8px 0}.tutorial-article code{background:#f4eff8;padding:3px 6px;border-radius:5px;font-size:.9em}.tutorial-article pre{overflow:auto;background:#f4eff8;border-radius:10px;padding:18px;line-height:1.7}.tutorial-article pre code{padding:0;white-space:pre}.tutorial-article hr{border:0;border-top:1px solid #eee7f4;margin:24px 0}.tutorial-article a{color:#835bb8;text-decoration:underline;text-underline-offset:3px}.tutorial-reading-end{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:32px;border-top:1px solid #eee7f4;padding-top:22px;font-size:13px;color:#9b89a8}.tutorial-reading-end a{font-weight:600;text-decoration:none}.tutorial-loading{padding:40px;text-align:center;color:#9787a7}
/* Continuous Markdown composer with live reading preview. */
#admin-dialog:has(.tutorial-editor){width:min(1180px,calc(100vw - 48px));max-width:none;padding:26px 28px;max-height:calc(100dvh - 40px)}.te-heading{display:flex;justify-content:space-between;align-items:center;padding-right:40px;gap:20px}.te-heading>div>span{font-size:11px;color:#a192b4}.te-heading h2{font-size:23px;margin:6px 0 16px}.te-heading>span{font-size:11px;color:#a399ad}.te-metadata .te-title{border:0;border-bottom:1px solid #eee7f5;border-radius:0;font-size:24px;font-weight:650;padding:10px 0;width:100%;background:white;box-sizing:border-box}.te-metadata>textarea{border:0;font-size:13px;resize:none;padding:10px 0;width:100%;box-sizing:border-box;line-height:1.7;min-height:50px;background:white}.te-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px;background:#f8f6fc;border:1px solid #e8e0f2;border-bottom:0;border-radius:12px 12px 0 0}.te-toolbar>div{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.te-toolbar button{font-size:12px;padding:7px 10px;min-height:32px;box-shadow:none}.te-toolbar select{width:auto;padding:7px;font-size:12px;border-radius:7px}.te-workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e8e0f2;border-radius:0 0 12px 12px;overflow:hidden;height:clamp(280px,43vh,490px)}.te-source,.te-preview-pane{min-width:0;display:flex;flex-direction:column;background:#fff}.te-source{border-right:1px solid #e8e0f2}.te-pane-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#aa9bb7;padding:12px 18px;border-bottom:1px solid #f0eaf6}.te-pane-heading b{color:#81718f;font-weight:500}.te-source>textarea{flex:1;min-height:0;width:100%;box-sizing:border-box;padding:20px;border:0;border-radius:0;background:white;font:14px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;resize:none;color:#52455f;outline:none}.te-preview-pane .tutorial-article{border:0;border-radius:0;padding:20px 26px;overflow:auto;flex:1;min-height:0}.te-preview-pane .tutorial-title{font-size:24px;margin-top:0}.te-preview-empty{font-size:13px;color:#b0a2bb;padding:35px 0}.te-help{padding:12px 16px;color:#9887a6;font-size:12px;line-height:1.8;background:#faf7ff}.te-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #eee7f4;padding-top:16px}.te-footer>div:last-child{display:flex;gap:8px}.te-publish{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:12px;color:#9686a5}.te-publish label{display:flex;gap:7px;align-items:center}.te-publish input[type=number]{width:64px;padding:7px}.te-publish input[type=checkbox]{width:15px;height:15px;accent-color:#7c5fc2}.te-publish>span{font-size:11px;color:#b09fbc}.te-footer button{font-size:13px}.tutorial-editor .form-error:empty{margin:0;min-height:12px}
@media(max-width:700px){.tutorial-list-heading{padding:26px 24px;margin-bottom:22px}.tutorial-list-heading h1{font-size:25px}.tutorial-hub-symbol{display:none}.tutorial-list{grid-template-columns:1fr;gap:12px}.tutorial-card{padding:22px}.tutorial-search-row{align-items:flex-start;flex-direction:column;gap:14px}.tutorial-search-row input{width:100%;box-sizing:border-box}.tutorial-article{padding:24px 22px}.tutorial-article .tutorial-title{font-size:25px}.tutorial-reading-end{flex-direction:column;align-items:flex-start}#admin-dialog:has(.tutorial-editor){width:calc(100vw - 20px);padding:22px 16px;max-height:calc(100dvh - 20px)}.te-workspace{grid-template-columns:1fr;height:auto}.te-source{border-right:0;border-bottom:1px solid #e8e0f2}.te-source>textarea{min-height:300px;flex:auto}.te-preview-pane .tutorial-article{max-height:360px;min-height:180px}.te-heading{align-items:flex-start}.te-heading>span{display:none}.te-footer{flex-direction:column;align-items:stretch}.te-footer>div:last-child{justify-content:flex-end}.te-publish{gap:12px}.te-toolbar{gap:8px}.te-metadata .te-title{font-size:21px}}

/* One tutorial palette, shared by its navigation, list and article view. */
#nav-tutorials{color:#167baf;background:#e7f3fc;border-color:#c8e0f0}#nav-tutorials:hover{color:#12678f;background:#dceef9}
body[data-zone="tutorials"]{background:linear-gradient(180deg,#eef6fc 0,#f8fbfe 440px)}
body[data-zone="tutorials"] .tutorial-hub{max-width:900px}
body[data-zone="tutorials"] .tutorial-reading{max-width:780px}
.tutorial-list-heading{padding:26px 30px;margin-bottom:24px;background:linear-gradient(120deg,#e2f0fa,#f4f9fd);border-color:#d2e5f2;border-radius:18px}
.tutorial-list-heading h1{font-size:27px;margin:10px 0}.tutorial-kicker{color:#167baf}.tutorial-list-heading p{color:#708395}
.tutorial-hub-symbol{width:65px;height:76px;font-size:35px;color:#508eaf}
.tutorial-search-row h2 span{color:#167baf;background:#e4f1fa}
.tutorial-card{position:relative;align-items:center;gap:14px;padding:20px;border-color:#d6e4ef;border-radius:14px}.tutorial-card:hover{border-color:#8ab8d3;box-shadow:0 6px 18px #167baf10}
.tutorial-card .tutorial-card-icon,.tutorial-card:nth-child(3n+2) .tutorial-card-icon,.tutorial-card:nth-child(3n+3) .tutorial-card-icon{width:36px;height:40px;font-size:21px;color:#167baf;background:#e7f3fc}
.tutorial-card h3{font-size:17px;margin:0;line-height:1.6;color:#30485d;padding-right:18px}.tutorial-card p{font-size:12px;color:#778c9c;margin-top:7px;padding-right:16px}
.tutorial-card-action{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:block;margin:0;font-size:20px;color:#167baf}
.tutorial-back,.tutorial-article a{color:#167baf}.tutorial-article{border-color:#d6e4ef}.tutorial-article-kicker{color:#82a0b4}.tutorial-article blockquote{background:#eef6fc;border-color:#68a3c2;color:#4b7792}.tutorial-article code,.tutorial-article pre{background:#edf4f9}.tutorial-reading-end{border-color:#deeaf3;color:#7c91a1}
.tutorial-empty{border-color:#d6e4ef;color:#778c9c}.tutorial-empty button{background:#e7f3fc;color:#167baf;border-color:#c8e0f0}.tutorial-loading{color:#778c9c}
@media(max-width:700px){.tutorial-list-heading{padding:22px}.tutorial-list-heading h1{font-size:23px}.tutorial-card{padding:18px}}
/* Keep both writing panes bounded, independently scrollable even for long articles. */
#admin-dialog .te-workspace{min-height:0;grid-template-rows:minmax(0,1fr)}
#admin-dialog .te-source,#admin-dialog .te-preview-pane{height:100%;min-height:0;overflow:hidden}
#admin-dialog .te-pane-heading{flex:0 0 auto}
#admin-dialog #tutorial-markdown{height:0;min-height:0;flex:1 1 0;overflow-y:scroll;overflow-x:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:auto}
#admin-dialog #te-preview{height:0;min-height:0;flex:1 1 0;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:auto}
#admin-dialog #tutorial-markdown::-webkit-scrollbar,#admin-dialog #te-preview::-webkit-scrollbar{width:10px}
#admin-dialog #tutorial-markdown::-webkit-scrollbar-thumb,#admin-dialog #te-preview::-webkit-scrollbar-thumb{background:#ccc2dd;border:2px solid white;border-radius:8px}
.te-toolbar .te-color-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#80718e}.te-toolbar #te-color{min-height:28px;width:30px;height:28px;padding:2px;border-radius:5px;cursor:pointer}
.tutorial-article img{cursor:zoom-in}.tutorial-image-viewer{position:fixed;inset:0;background:#171322eF;z-index:10000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:65px 28px;border:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;box-sizing:border-box}.tutorial-image-viewer img{max-width:100%;max-height:calc(100dvh - 130px);object-fit:contain;cursor:zoom-in}.tutorial-image-viewer.zoomed{display:block;text-align:center}.tutorial-image-viewer.zoomed img{max-width:none;max-height:none;cursor:zoom-out}.tutorial-image-viewer .image-viewer-close{position:fixed;top:18px;right:22px;border:1px solid #ffffff44;background:#ffffff20;color:white;z-index:2;width:42px;height:42px;border-radius:50%;font-size:24px;padding:0}.image-viewer-hint{position:fixed;bottom:18px;left:0;right:0;text-align:center;color:#d7d0e1;font-size:12px;pointer-events:none}
@media(max-width:700px){#admin-dialog .te-workspace{grid-template-rows:340px 340px}#admin-dialog #tutorial-markdown{min-height:0}#admin-dialog #te-preview{min-height:0;max-height:none}}