/* CENTENARIO typography and an isolated, responsive tutorial library. */
.cent-tutorials,.cent-tutorials *,.tutorial-editor *{box-sizing:border-box}
.cent-tutorials{width:min(1200px,92vw);margin:40px auto;color:#eee;font-family:Montserrat,Arial,sans-serif;font-weight:400}
.cent-tutorials h2{font-size:24px;line-height:1.5;font-weight:500;margin:0 0 18px;color:#eee;letter-spacing:normal}
.cent-tutorials .ct-intro{font-size:15px;line-height:1.85;color:#aaa;max-width:1104px;margin:0 0 30px;white-space:pre-line}
.cent-tutorials button,.cent-tutorials input{font:inherit;color:inherit}
.cent-tutorials button{cursor:pointer}.cent-tutorials button:focus-visible,.cent-tutorials a:focus-visible,.cent-tutorials summary:focus-visible,.cent-tutorials input:focus-visible{outline:1px solid white;outline-offset:4px}
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.ct-main{min-width:0}.ct-player{width:100%;max-width:100%;margin-inline:auto;background:#000;position:relative;overflow:hidden}
.ct-frame{width:100%;position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;isolation:isolate}
.ct-frame>video,.ct-frame>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;object-fit:var(--ct-fit,contain)!important;transform:translate(var(--ct-x,0%),var(--ct-y,0%)) rotate(var(--ct-rotation,0deg)) scale(var(--ct-scale,1));transform-origin:center;z-index:0}
.ct-frame>video{visibility:hidden}.ct-frame>video.ct-ready{visibility:visible;z-index:1}
.ct-start{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;width:100%;border:0;background:linear-gradient(0deg,#0008,transparent);color:white;z-index:2;font-size:14px!important}
.ct-play-icon{display:grid;place-items:center;width:60px;height:60px;border:1px solid #aaa;border-radius:50%;background:#0008}.ct-play-icon svg{width:18px;height:22px;fill:#fff;margin-left:3px}
.ct-controls{display:flex;align-items:center;gap:12px;padding:10px;background:#080808;color:#ddd;direction:ltr;min-height:44px}
.ct-controls button{border:0;background:transparent;padding:3px;font-size:15px;min-width:26px;line-height:1.5}
.ct-controls input{min-width:0;flex:1;width:50px;accent-color:white}.ct-time{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-status{font-size:13px!important;line-height:1.7!important;color:#ccc!important;background:#000b;position:absolute;z-index:4;bottom:0;left:0;right:0;padding:12px;margin:0!important;text-align:center}
.ct-caption{padding:22px 0 20px}.cent-tutorials .ct-caption h3{font-size:20px;font-weight:400;line-height:1.5;color:#eee;margin:8px 0}.ct-caption h3,.cent-tutorials>h2,.cent-tutorials .ct-intro{overflow-wrap:anywhere}
.ct-caption p{font-size:15px;line-height:1.85;color:#aaa;white-space:pre-line;margin:0}.ct-count{font-size:11px;color:#888;letter-spacing:.08em}
.ct-next{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #333;padding-top:14px}.ct-next>span{font-size:11px;color:#888}.ct-next button{font-size:14px!important;line-height:1.7;border:0;background:none;text-align:end;padding:6px 0}.ct-next button:after{content:'→';margin-inline-start:14px}
.ct-library{border:1px solid #333;min-width:0}.ct-library summary{list-style:none;cursor:pointer;padding:20px 18px;font-size:13px;display:flex;justify-content:space-between;gap:12px}.ct-library summary::-webkit-details-marker{display:none}.ct-chevron{transition:transform .2s}.ct-library[open] .ct-chevron{transform:rotate(180deg)}.ct-library-inner{padding:0 16px 12px}.ct-search{width:100%;border:0;border-radius:0;border-bottom:1px solid #444;background:transparent;padding:12px 4px;font-size:13px!important;color:#eee;margin-bottom:12px}
.ct-topics{max-height:365px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#666 #111}.ct-topic{display:flex;gap:12px;align-items:center;width:100%;border:0;border-bottom:1px solid #262626;background:transparent;color:#aaa!important;text-align:start;padding:16px 9px;font-size:14px!important;line-height:1.7}.ct-topic:hover{color:white!important;background:#161616}.ct-topic[aria-pressed=true]{color:white!important;background:#202020;box-shadow:inset 2px 0 white}.ct-topic-number{font-size:10px;color:#888;flex-shrink:0}.ct-topic-title{flex:1;min-width:0;overflow-wrap:anywhere}.ct-topic-play{font-size:11px;color:#aaa}.ct-empty{color:#aaa;font-size:14px;line-height:1.8;margin:0;padding:14px 0}.ct-back{text-align:center;margin:28px auto 40px}.ct-back a{font-size:14px;color:#bcbcbc;text-decoration:none}.ct-back a:hover{color:white}.ct-back-arrow{margin-inline-start:12px}
.cent-tutorials [hidden],.tutorial-editor [hidden],.ct-player [hidden]{display:none!important}
.cent-tutorials[dir=rtl]{font-family:Tahoma,Arial,sans-serif}.cent-tutorials[dir=rtl] .ct-next button:after{content:'←'}.cent-tutorials[dir=rtl] .ct-topic[aria-pressed=true]{box-shadow:inset -2px 0 white}
.ct-player:fullscreen{height:100%;width:100%!important;max-width:none!important;display:flex;flex-direction:column;justify-content:center}.ct-player:fullscreen .ct-frame{flex:1;height:auto!important;aspect-ratio:auto!important;min-height:0}.ct-player:fullscreen .ct-controls{flex-shrink:0}
@media(max-width:760px){.cent-tutorials{margin:30px auto}.cent-tutorials h2{font-size:21px}.cent-tutorials .ct-intro{font-size:14px;margin-bottom:24px}.ct-layout{display:flex;flex-direction:column;gap:20px}.ct-main,.ct-library{width:100%}.ct-caption{padding:16px 0}.cent-tutorials .ct-caption h3{font-size:19px}.ct-caption p{font-size:14px}.ct-next{padding-top:10px}.ct-library summary{padding:17px 15px}.ct-topics{max-height:260px}.ct-topic{padding:13px 8px}.ct-play-icon{width:52px;height:52px}.ct-controls{gap:8px;padding:8px}.ct-time{font-size:9px}}
@media(prefers-reduced-motion:reduce){.ct-chevron{transition:none}}
/* Editor only; dimensions and transforms use the same player code as the page. */
.tutorial-editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tutorial-editor-actions select{width:auto;max-width:100%;flex:1}.te-item{border:1px solid #555;padding:16px;margin:0 0 16px}.te-item>summary{cursor:pointer;font-weight:500;display:flex;justify-content:space-between;gap:12px}.te-item-content{padding-top:18px}.te-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.te-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.te-fields .te-full{grid-column:1/-1}.te-fields label{display:block}.te-fields input:not([type=checkbox]),.te-fields textarea,.te-fields select{width:100%}.te-preview{position:sticky;top:10px;z-index:5;background:#111;border:1px solid #555;padding:12px;margin:18px 0;overflow:auto}.te-preview .ct-player{max-width:760px}.te-preview[data-device=mobile] .ct-player{max-width:390px}.te-preview .ct-start{font-family:Montserrat,Arial,sans-serif}.te-position{display:grid;grid-template-columns:1fr 1fr;gap:24px}.te-position label{display:block;margin-bottom:15px}.te-position input[type=range]{width:100%;accent-color:#aaa}.te-position input[type=number]{width:100%;max-width:180px}.te-device-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.te-device-buttons [aria-pressed=true]{background:#444;color:white}.te-preview-note{font-size:12px;color:#bbb;padding-top:8px}.te-item output{float:right;font-variant-numeric:tabular-nums}.te-file-name{font-size:12px;overflow-wrap:anywhere;color:#999;margin-top:4px}@media(max-width:700px){.te-position,.te-fields{grid-template-columns:1fr}.te-preview{position:relative;top:auto}}
/* Captions remain outside the scaled/rotated image, including in fullscreen. */
.ct-subtitle{position:absolute;z-index:3;left:5%;right:5%;bottom:12px;text-align:center;pointer-events:none;white-space:pre-line;font-family:Montserrat,Arial,sans-serif;font-size:24px;line-height:1.4;color:white;text-shadow:0 1px 3px #000}
.ct-subtitle[dir=rtl]{font-family:Tahoma,Arial,sans-serif}.ct-subtitle span{background:#000c;padding:3px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ct-controls{flex-wrap:wrap}.ct-cc-label{display:flex;align-items:center;gap:7px;font-size:11px;color:#bbb;margin:0}.ct-cc-select{max-width:140px;min-width:65px;font-size:12px!important;background:#111;color:#eee;border:1px solid #555;border-radius:0;padding:4px}
.te-subtitle-fields{border-top:1px solid #555;margin-top:20px;padding-top:16px}.te-subtitle-fields>summary{cursor:pointer;margin-bottom:12px}.te-subtitle-fields .te-fields{margin-top:12px}
@media(max-width:760px){.ct-subtitle{font-size:18px;bottom:10px}.ct-cc-label{flex-basis:100%;justify-content:flex-end}.ct-cc-select{max-width:170px}}