/* Onim Tutorials - public styles (built on the Site Builder variables) */
.ott-hero-in{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.ott-hero-img img{max-width:100%;border-radius:var(--os-radius,18px)}
.ott-hero-in:has(.ott-hero-img){grid-template-columns:1.2fr .8fr}
.ott-eyebrow{display:inline-flex;gap:.45rem;align-items:center;padding:.3rem .8rem;border-radius:999px;background:var(--os-soft);color:var(--o-accent,#6c63ff);font-weight:700;font-size:.8rem;margin-bottom:.8rem}
.ott-search{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 1rem;max-width:720px;background:var(--o-surface,#fff);border:1px solid var(--o-border,#dde3f0);border-radius:16px;padding:.45rem .5rem .45rem 1rem;box-shadow:var(--os-shadow)}
.ott-search i{color:var(--o-muted,#66728f)}
.ott-search input{flex:1;border:0;outline:0;background:transparent;font-size:1rem;color:var(--o-text,#18203a);min-width:0;padding:.55rem 0}
.ott-search button{border:0;background:var(--o-accent,#6c63ff);color:#fff;font-weight:700;border-radius:12px;padding:.7rem 1.4rem;cursor:pointer}
.ott-stats{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.2rem 0 0;padding:0;color:var(--o-muted,#66728f)}
.ott-stats b{color:var(--o-text,#18203a);font-size:1.25rem;margin-right:.25rem}
.ott-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;align-items:start}
.ott-bar{margin-bottom:1rem}
.ott-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.ott-card{background:var(--o-surface,#fff);border:1px solid var(--o-border,#dde3f0);border-radius:var(--os-radius,18px);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.ott-card:hover{transform:translateY(-3px);box-shadow:var(--os-shadow)}
.ott-cover{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in srgb,var(--o-accent,#6c63ff) 22%,#fff),color-mix(in srgb,var(--o-accent,#6c63ff) 6%,#fff))}
.ott-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ott-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.6rem;color:var(--o-accent,#6c63ff);opacity:.85}
.ott-play{position:absolute;left:.7rem;bottom:.7rem;background:rgba(15,20,40,.82);color:#fff;border-radius:999px;font-size:.74rem;font-weight:700;padding:.28rem .7rem}
.ott-play i{font-size:.65rem;margin-right:.25rem}
.ott-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.ott-tagrow{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.ott-cat{font-size:.75rem;font-weight:700;color:var(--o-accent,#6c63ff)!important;text-decoration:none}
.ott-level{font-size:.68rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:#e8f7ee;color:#18794e}
.ott-level.ott-intermediate{background:#fff4dd;color:#a15c00}.ott-level.ott-advanced{background:#fde8ec;color:#b42343}
.ott-body h3{margin:0;font-size:1.05rem;line-height:1.35}.ott-body h3 a{color:var(--o-text,#18203a)!important;text-decoration:none}
.ott-body p{margin:0;color:var(--o-muted,#66728f);font-size:.9rem;line-height:1.55}
.ott-foot{margin-top:auto;padding-top:.7rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.8rem;color:var(--o-muted,#66728f);border-top:1px dashed var(--o-border,#dde3f0)}
.ott-more{font-weight:700;color:var(--o-accent,#6c63ff)!important;text-decoration:none;white-space:nowrap}
.ott-side{display:flex;flex-direction:column;gap:1rem}
.ott-sticky{position:sticky;top:90px}
.ott-box{background:var(--o-surface,#fff);border:1px solid var(--o-border,#dde3f0);border-radius:var(--os-radius,18px);padding:1.1rem 1.2rem}
.ott-box h4{margin:0 0 .7rem;font-size:.95rem;color:var(--o-text,#18203a)}
.ott-cats,.ott-toc,.ott-pop{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.ott-cats a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px;color:var(--o-text,#18203a)!important;text-decoration:none;font-size:.92rem}
.ott-cats a i{width:1.1rem;text-align:center;color:var(--o-accent,#6c63ff)}.ott-cats a b{margin-left:auto;font-size:.75rem;color:var(--o-muted,#66728f);background:var(--o-bg,#f3f5fa);border-radius:999px;padding:.1rem .5rem}
.ott-cats a:hover,.ott-cats a.on{background:var(--os-soft)}
.ott-pop{counter-reset:p;gap:.7rem}.ott-pop li{counter-increment:p;position:relative;padding-left:2rem}
.ott-pop li:before{content:counter(p);position:absolute;left:0;top:.1rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--os-soft);color:var(--o-accent,#6c63ff);font-size:.75rem;font-weight:700;display:grid;place-items:center}
.ott-pop a{color:var(--o-text,#18203a)!important;text-decoration:none;font-weight:600;font-size:.9rem;line-height:1.35}.ott-pop small{display:block;color:var(--o-muted,#66728f);font-size:.75rem}
.ott-help{text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--o-accent,#6c63ff) 12%,#fff),var(--o-surface,#fff))}
.ott-help>i{font-size:1.8rem;color:var(--o-accent,#6c63ff);margin-bottom:.4rem}.ott-help p{margin:0 0 .9rem;color:var(--o-muted,#66728f);font-size:.88rem;line-height:1.5}
.ott-toc a{display:block;padding:.3rem .6rem;border-left:2px solid var(--o-border,#dde3f0);color:var(--o-muted,#66728f)!important;text-decoration:none;font-size:.88rem}
.ott-toc .l3 a{padding-left:1.3rem;font-size:.84rem}.ott-toc a:hover,.ott-toc a.on{border-color:var(--o-accent,#6c63ff);color:var(--o-accent,#6c63ff)!important}
.ott-back{font-weight:700;text-decoration:none;color:var(--o-accent,#6c63ff)!important;padding:.2rem .4rem}
.ott-phead{padding:2rem 0 1.4rem;background:linear-gradient(180deg,color-mix(in srgb,var(--o-accent,#6c63ff) 10%,var(--o-surface,#fff)),var(--o-bg,#f3f5fa));border-bottom:1px solid var(--o-border,#dde3f0)}
.ott-phead h1{margin:.6rem 0 .5rem;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.2;color:var(--o-text,#18203a)}
.ott-lead{margin:0 0 .9rem;max-width:780px;font-size:1.08rem;color:var(--o-muted,#66728f);line-height:1.6}
.ott-single{padding-top:2rem;padding-bottom:2rem}
.ott-video{position:relative;aspect-ratio:16/9;border-radius:var(--os-radius,18px);overflow:hidden;background:#0d1224;margin-bottom:1.6rem;box-shadow:var(--os-shadow)}
.ott-video iframe,.ott-vbtn{position:absolute;inset:0;width:100%;height:100%;border:0}
.ott-vbtn{padding:0;cursor:pointer;background:#0d1224;display:block}.ott-vbtn img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s}.ott-vbtn:hover img{opacity:.95}
.ott-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--o-accent,#6c63ff);color:#fff;display:grid;place-items:center;font-size:1.6rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ott-vlabel{position:absolute;left:1rem;bottom:1rem;background:rgba(15,20,40,.85);color:#fff;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;font-weight:700}
.ott-prose{max-width:none}
.ott-prose h2{scroll-margin-top:90px}.ott-prose h3{scroll-margin-top:90px}
.ott-prose .ott-note,.ott-prose .ott-tip,.ott-prose .ott-warn{border-radius:12px;padding:.9rem 1.1rem;margin:1.2rem 0;border-left:4px solid;background:var(--os-soft);border-color:var(--o-accent,#6c63ff)}
.ott-prose .ott-tip{background:#e8f7ee;border-color:#18a35e}.ott-prose .ott-warn{background:#fff4dd;border-color:#e39a14}
.ott-prose .ott-note p,.ott-prose .ott-tip p,.ott-prose .ott-warn p{margin:0}
.ott-prose ol{list-style:none;counter-reset:s;padding:0}.ott-prose ol>li{counter-increment:s;position:relative;padding:.2rem 0 .8rem 2.6rem}
.ott-prose ol>li:before{content:counter(s);position:absolute;left:0;top:.1rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--o-accent,#6c63ff);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.85rem}
.ott-pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.ott-pn a{display:block;padding:.9rem 1.1rem;border:1px solid var(--o-border,#dde3f0);border-radius:14px;text-decoration:none;background:var(--o-surface,#fff)}
.ott-pn a:hover{border-color:var(--o-accent,#6c63ff)}.ott-pn .r{text-align:right}.ott-pn small{display:block;color:var(--o-muted,#66728f);font-size:.78rem}.ott-pn b{color:var(--o-text,#18203a);font-size:.95rem}
.ott-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;background:transparent}.ott-progress i{display:block;height:100%;width:0;background:var(--o-accent,#6c63ff)}
.ott-related{padding-top:1rem}
@media(max-width:960px){.ott-layout,.ott-hero-in:has(.ott-hero-img){grid-template-columns:1fr}.ott-sticky{position:static}.ott-hero-img{display:none}}
@media(max-width:560px){.ott-search button{padding:.7rem 1rem}.ott-pn{grid-template-columns:1fr}.ott-stats{gap:1rem}}