:root{font-family:Inter,"Segoe UI",sans-serif;color:#26332e;background:#f8f8f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}header{height:88px;border-bottom:1px solid #dfe4d9;display:flex;align-items:center;justify-content:space-between;padding:0 6vw}.logo{font-size:25px;font-weight:750;text-decoration:none;color:inherit;letter-spacing:-1px}.logo>span:not(.tag){color:#939c8c;margin:0 10px}.tag{font-size:10px;letter-spacing:1px;background:#e5ebd9;padding:6px 9px;border-radius:5px;margin-left:15px;vertical-align:middle}.header-note,.fine{font-size:13px;color:#778074}main{max-width:1280px;margin:auto;padding:58px 46px 20px}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:750;color:#6f7b65}.dot{display:inline-block;background:#6a8342;width:7px;height:7px;border-radius:50%;margin-right:8px}h1{font-size:clamp(44px,5vw,68px);line-height:1.05;letter-spacing:-3px;margin:24px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#6f873f}.intro>p{color:#737b70;line-height:1.65;font-size:16px;margin-bottom:42px}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.85fr);gap:64px}form,.pipeline{border:1px solid #dde3d6;border-radius:18px;background:#fff;padding:28px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.text-button{border:0;background:transparent;color:#748b45;font-size:12px;font-weight:650}label{display:block;font-weight:650;font-size:13px;margin:18px 0 10px}textarea,input,select{border:1px solid #dce2d5;border-radius:9px;background:#fafbf7;width:100%;padding:13px;color:#354032}textarea{height:104px;resize:vertical;line-height:1.6}textarea:focus,input:focus,select:focus{outline:2px solid #b9cf8d;outline-offset:2px}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px}.chips button{border:1px solid #e0e5d8;background:#fff;padding:7px 10px;border-radius:20px;color:#737e69;font-size:11px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.fields label{margin-top:4px}select{font-size:12px}details{font-size:12px;color:#74816b;margin:23px 0}.generate{width:100%;background:#d9ef99;border:0;border-radius:9px;padding:18px 20px;text-align:left;font-weight:750;color:#35432b;display:flex;justify-content:space-between}.generate:hover{background:#cce886}.fine{line-height:1.5}#connection{margin-bottom:0;font-size:11px}.pipeline{margin-top:22px;background:transparent}.pipeline .section-top{margin-bottom:12px}#progressLabel{font-size:11px;color:#798270}progress{height:5px;width:100%;appearance:none;border:0;border-radius:5px;overflow:hidden}progress::-webkit-progress-bar{background:#e5e9dd}progress::-webkit-progress-value{background:#8eaa5b}#status{font-size:13px;line-height:1.5}.stages{display:flex;gap:8px;flex-wrap:wrap}.stages span{font-size:10px;padding:6px 8px;border-radius:5px;background:#e9ede3;color:#839177}.stages span.active{background:#d9ef99;color:#364b20}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}.pill{font-size:9px;letter-spacing:.6px;border:1px solid #d9dfd0;border-radius:20px;padding:7px 10px}.screen{border:8px solid #fff;box-shadow:0 14px 44px #26332e0a;border-radius:28px;overflow:hidden;aspect-ratio:9/16;background:#eeefdf;position:relative;max-height:690px;margin:auto;width:100%}.screen video{width:100%;height:100%;display:block;object-fit:contain}#empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#f8f7e8,#e9eddb)}.glyphs{display:flex;align-items:center;gap:5px;padding:0 15px}.glyphs span{font-family:"Microsoft YaHei",sans-serif;font-size:clamp(48px,5vw,80px);animation:bob 3s infinite ease-in-out}.glyphs span:nth-child(2){color:#839952;animation-delay:-1s}.glyphs span:nth-child(3){color:#dd9278;animation-delay:-2s}#empty h2{font-family:Georgia,serif;font-size:31px;font-weight:400;line-height:1.2}#empty p{font-size:12px;color:#808770}.mini-pill{font-size:8px;letter-spacing:2px;border:1px solid #c7ceb7;border-radius:18px;padding:10px 16px;margin-top:35px}.preview-note{text-align:center;color:#909683;font-size:11px;line-height:1.5}.cast{display:flex;gap:9px}.cast>div{flex:1;text-align:center;background:#fff;border:1px solid #e0e5d8;border-radius:9px;padding:10px 4px}.cast strong{font-size:35px;font-weight:500;display:block}.cast span{display:block;color:#829653;font-size:13px}.cast small{display:block;color:#818c76;font-size:10px;margin-top:4px}#story h3{font-size:16px}#story ol{padding-left:18px;font-size:12px;line-height:1.65;color:#77816f}#story li{padding:4px 0}#export{font-size:12px;color:#6c7b61}#export a{display:inline-block;margin-right:18px;color:#5d733c}.download{padding:13px 18px;border:1px solid #baca9d;border-radius:8px;text-decoration:none;font-weight:700}.library{margin-top:55px}.library h2{font-size:21px;letter-spacing:-.5px}#library{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.film{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #dde3d6;border-radius:13px;padding:12px;text-align:left;color:inherit}.film img{width:48px;height:78px;object-fit:cover;border-radius:5px}.film div{flex:1;min-width:0}.film strong{font-size:12px;display:block}.film span{display:block;font-size:10px;color:#8b967e;margin-top:7px}footer{border-top:1px solid #dde3d6;margin-top:46px;padding:22px 0;color:#88927e;font-size:11px;display:flex;justify-content:space-between}@keyframes bob{50%{transform:translateY(-16px) rotate(7deg)}}@media(prefers-reduced-motion:reduce){.glyphs span{animation:none}}@media(max-width:800px){header{padding:0 22px}.header-note{display:none}main{padding:35px 20px}.workspace{grid-template-columns:1fr;gap:32px}.screen{max-width:380px}.preview-heading{max-width:380px;margin:0 auto 18px}#library{grid-template-columns:1fr}.fields{grid-template-columns:1fr}form,.pipeline{padding:22px}.library .eyebrow{display:none}footer{gap:15px}.cast strong{font-size:28px}}

.controls,.preview,#story{min-width:0}.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}.cast>div{min-width:0}#story,.film strong{overflow-wrap:anywhere}@media(max-width:800px){.workspace{grid-template-columns:minmax(0,1fr)}}

/* Keep learning glyphs and video controls in their original spatial order. */
.glyphs,.cast,video,#progress{direction:ltr}
html[dir=rtl] .generate,html[dir=rtl] .film{text-align:start}
.section-top,.preview-heading{flex-wrap:wrap}
html[lang=ar] h1 em{font-family:inherit}