:root{--ink:#263244;--muted:#8a8e9a;--purple:#7856d9;--line:#ebe9f0;--paper:#fffdf8;--light:#f7f6fa;--font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:var(--font);font-size:13px;background:#faf9fc}button,input,select,textarea{font:inherit;color:inherit}button{border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;padding:9px 12px;transition:background .15s}button:hover{background:#efecf8}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid #b9a5f4;outline-offset:2px}input:not([type=checkbox]):not([type=range]):not([type=color]),textarea,select{border:1px solid #e5e2ec;border-radius:7px;background:#fff;padding:9px;width:100%;outline-offset:1px}textarea{resize:vertical;line-height:1.5}input[type=number]{min-width:0}input[type=color]{width:100%;height:35px;border:1px solid var(--line);border-radius:6px;background:white;padding:3px;cursor:pointer}input[type=range]{accent-color:var(--purple);width:100%}label{display:block;font-size:11px;font-weight:600;color:#777988;margin:15px 0 0}label input,label select,label textarea{display:block;margin-top:7px}.primary{color:white;background:var(--purple);font-weight:600;box-shadow:0 3px 8px #7856d925}.primary:hover{background:#6943cb}.muted{color:var(--muted)}.topbar{height:83px;display:flex;align-items:center;padding:0 28px;gap:25px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:#253047;text-decoration:none;font-size:28px;font-weight:750;letter-spacing:-1px}.brand small{display:block;font-size:8px;letter-spacing:2px;font-weight:600;color:#a4a1b4;margin-top:2px}.brand-icon{font-family:Georgia;font-style:italic;font-weight:bold;font-size:39px;color:white;background:var(--purple);width:44px;height:44px;border-radius:14px;line-height:39px;text-align:center;position:relative;transform:rotate(-5deg)}.brand-icon span{font-size:17px;position:absolute;right:0;top:-6px;color:#f6cb78}.divider{height:30px;width:1px;display:inline-block;background:var(--line)}.project-name input{border:0!important;font-weight:600;padding:0!important;width:240px!important;background:none!important}.project-name>span{display:block;font-size:10px;color:#9693a3;margin-top:6px}.top-actions{display:flex;gap:8px;align-items:center;margin-left:auto}.top-actions .primary{padding:12px 19px;margin-left:8px}.top-actions .primary span{margin-left:25px}.workspace{display:grid;grid-template-columns:76px 254px minmax(440px,1fr) 250px;min-height:calc(100vh - 112px)}.rail{background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;padding-top:18px;gap:10px}.rail button{width:60px;padding:10px 0;font-size:10px;color:#888594}.rail button b{display:block;font-size:24px;font-weight:500;margin-bottom:5px}.rail .active{background:#f0eafb;color:var(--purple)}.rail-bottom{margin-top:auto;margin-bottom:22px}.library{background:white;border-right:1px solid var(--line);padding:24px 20px}.panel-head{font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:space-between}.badge{background:#f2effb;color:#9076c5;font-size:8px;letter-spacing:1px;padding:4px 6px;border-radius:4px}h1{font-family:Georgia,serif;font-weight:400;font-size:32px;line-height:1.15;letter-spacing:-.8px;margin:30px 0 12px}h1 em{color:var(--purple);font-weight:400}.library p{font-size:11px;line-height:1.7}.search{margin:20px 0 15px;background:#faf9fc!important;font-size:11px}.chips{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:20px}.chips button{font-size:10px;padding:6px 8px;border-radius:6px}.chips .active{background:#ece6fb;color:var(--purple);font-weight:600}.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.asset-card{border:1px solid #eeecf3;background:#fdfcfe;border-radius:9px;padding:10px 5px 7px;min-height:102px;display:flex;flex-direction:column;align-items:center;gap:7px}.asset-card:hover{border-color:#bba5ed;background:#f8f4ff}.asset-card img{height:65px;width:72px;object-fit:contain}.asset-card span{font-size:9px;color:#8a8598}.library-note{margin-top:23px;padding-top:17px;border-top:1px solid var(--line);font-size:10px;line-height:1.8;color:#aaa4b4}.studio{min-width:0;display:flex;flex-direction:column;background:#f5f4f8}.canvas-toolbar{height:65px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid var(--line);gap:10px}.scene-pill{color:#8f71be;background:#f4eefb;font-size:9px;font-weight:600;letter-spacing:.6px;padding:5px 8px;border-radius:5px;margin-right:10px}#sceneTitle{font-size:11px}.toolbar-actions{display:flex;gap:5px;align-items:center}.toolbar-actions button{font-size:23px;padding:2px 8px}.toolbar-actions .divider{height:18px;margin:0 10px}.hand-toggle{display:flex;align-items:center;white-space:nowrap;font-size:10px;margin:0;color:#8b8498;gap:6px;font-weight:400}.hand-toggle input{margin:0;accent-color:var(--purple)}.aspect{font-size:9px;background:#f6f5f8;color:#9b94a7;padding:5px 8px;margin-left:15px;border-radius:4px}.stage-area{padding:28px 35px 12px;display:flex;flex-direction:column;justify-content:center;flex:1;min-height:390px;background-image:radial-gradient(#d9d5e7 .65px,transparent .65px);background-size:16px 16px}.stage-heading{display:flex;justify-content:space-between;margin-bottom:13px;font-size:8px;letter-spacing:1.2px;color:#a9a2b6}.stage-heading span:last-child{letter-spacing:.3px}.canvas-wrap{position:relative;box-shadow:0 12px 35px #3930500b,0 1px 4px #39305010;background:var(--paper);border-radius:2px;overflow:hidden}#stage{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none;cursor:default}#emptyCanvas{position:absolute;top:40%;width:100%;text-align:center;pointer-events:none;font-family:Georgia;font-size:26px;color:#a29ab5}#emptyCanvas small{display:block;font-family:var(--font);font-size:11px;margin-top:12px;color:#b4afc1}.stage-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:#a59db2;font-size:9px}.stage-footer button{font-size:10px;color:#8e859d;padding:6px}.timeline{background:white;border-top:1px solid var(--line);padding:18px 23px 22px;min-height:200px;margin-top:14px}.timeline-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.transport{display:flex;align-items:center;gap:10px}.play{background:var(--purple);color:#fff;border-radius:50%;width:34px;height:34px;padding:0}.play:hover{background:#6844c2}.transport>button:not(.play){color:#aba3b8;font-size:11px;padding:5px}#timeLabel{font-variant-numeric:tabular-nums;font-size:11px}#timeLabel span{color:#b6afc1}.preview-tag{font-size:9px;color:#aa9cbd;border-left:1px solid var(--line);padding-left:12px}.timeline-header>div>button{font-size:10px}.add-scene{border:1px solid #e6def4;color:var(--purple);margin-left:6px}.timeline>input{display:block;height:10px;margin:15px 0 17px}.scene-cards{display:flex;gap:12px;overflow:auto;padding:3px 2px 5px}.scene-card{position:relative;border:1px solid #e5dfec;border-radius:8px;background:#fffdf8;min-width:126px;width:126px;height:85px;padding:0;overflow:hidden;flex-shrink:0;text-align:left}.scene-card.active{border:2px solid var(--purple);box-shadow:0 0 0 3px #7856d90b}.scene-card canvas{width:100%;height:55px;object-fit:contain;display:block}.scene-card .scene-meta{display:flex;justify-content:space-between;background:#fff;padding:6px;font-size:8px;color:#9e94ab}.scene-card .scene-number{position:absolute;left:6px;top:5px;background:#ffffffde;border-radius:3px;padding:3px;font-size:8px;color:#8f7ba8}.inspector{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column}.inspector>.panel-head{padding:25px 20px;height:65px;border-bottom:1px solid var(--line)}.inspector-body{padding:20px 19px;overflow:auto;max-height:calc(100vh - 200px);scrollbar-width:thin}.inspector-tabs{display:flex;background:#f5f3f8;padding:3px;border-radius:7px;margin-bottom:24px}.inspector-tabs button{width:50%;font-size:10px;padding:7px}.inspector-tabs .active{background:white;box-shadow:0 1px 4px #35265d10;color:var(--purple)}.eyebrow{font-size:9px;color:#a298b0;letter-spacing:1px;font-weight:600}.eyebrow span{letter-spacing:0;font-weight:400;float:right}h3{font-size:14px;font-weight:500;margin:10px 0 20px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.unit-input{position:relative}.unit-input span{position:absolute;right:10px;top:8px}.button-row{display:flex;gap:5px;margin-top:15px}.button-row button{border:1px solid var(--line);flex:1;font-size:10px;padding:8px 5px}.danger{color:#bf6d76}.inspector-footer{margin-top:auto;padding:18px 14px;border-top:1px solid var(--line);font-size:8px;color:#aba3b8;white-space:nowrap}.online-dot{background:#a1b58d;width:5px;height:5px;display:inline-block;border-radius:50%;margin-right:5px}hr{border:0;border-top:1px solid var(--line);margin:22px 0}.app-footer{height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:8px;color:#a9a2b5;letter-spacing:.2px;border-top:1px solid var(--line);background:white}.app-footer b{font-weight:400;margin-left:8px;color:#bfb7c9}#noSelection{text-align:center;padding:22px 0}#noSelection p{font-size:11px;line-height:1.7}.selection-icon{font-size:36px;color:#b3a1d5}#layers{margin-top:12px}.layer{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:10px;padding:9px;margin-top:4px;border:1px solid #f0edf5}.layer.active{background:#f2ecfd;border-color:#d4c6ef;color:#7353b3}.layer small{color:#a79db8;font-size:8px}.tip{font-size:11px;line-height:1.75;color:#9a91a8}.wide{width:100%;border:1px solid #e5deef;margin-top:14px}.subtle{font-size:10px;color:#9b7fa4;padding-left:0}.text-example{width:100%;border:1px solid var(--line);font-size:21px;text-align:left;padding:22px 12px;margin-top:15px}.text-example.smaller{font-size:14px}h2{font-family:Georgia,serif;font-size:29px;font-weight:400;letter-spacing:-.6px;line-height:1.2;margin:18px 0}dialog{width:490px;max-width:95vw;border:1px solid #e7e0ee;border-radius:17px;padding:35px;color:var(--ink);box-shadow:0 20px 80px #20163130}dialog::backdrop{background:#28223466;backdrop-filter:blur(4px)}dialog form{position:absolute;right:10px;top:8px}.close{font-size:24px;color:#9d91af}dialog ol{padding-left:20px;font-size:12px;line-height:1.9}dialog li{margin-bottom:10px}progress{width:100%;accent-color:var(--purple);margin-top:25px}#toast{position:fixed;left:50%;bottom:35px;transform:translateX(-50%);padding:13px 23px;background:#302441;color:white;border-radius:9px;box-shadow:0 5px 25px #30244130;z-index:50;max-width:90vw;font-size:12px}[hidden]{display:none!important}body.busy .workspace{pointer-events:none;opacity:.7}body.drawing #stage{cursor:crosshair}@media(min-width:1600px){.workspace{grid-template-columns:84px 280px minmax(500px,1fr) 280px}.stage-area{padding:45px 55px}.asset-card{height:120px}.asset-card img{height:80px}}@media(max-width:1200px){.workspace{grid-template-columns:66px 215px minmax(360px,1fr) 215px}.topbar{gap:15px;padding:0 17px}.top-actions{gap:0}.top-actions #help span{display:none}.project-name input{width:180px!important}.library{padding:22px 14px}.stage-area{padding:24px 20px}.canvas-toolbar{padding:0 15px}.aspect{display:none}.hand-toggle{font-size:9px}.inspector-body{padding:15px 13px}}@media(max-width:950px){.workspace{grid-template-columns:60px 180px minmax(320px,1fr)}.inspector{grid-column:2/4;border-top:1px solid var(--line)}.inspector-body{max-height:none}.inspector-body>section{max-width:650px}.inspector-footer{display:none}.top-actions #help,.top-actions #openProject{display:none}.project-name input{width:150px!important}.toolbar-actions .divider{display:none}.stage-area{min-height:300px}.library{grid-row:1}.studio{grid-row:1}.rail{grid-row:1/3}.topbar{height:75px}.workspace{min-height:calc(100vh - 104px)}.preview-tag{display:none}}@media(max-width:620px){.topbar{padding:12px;gap:10px;flex-wrap:wrap;height:auto}.brand{font-size:22px}.brand-icon{width:34px;height:34px;font-size:30px;line-height:31px}.topbar>.divider{display:none}.project-name{flex:1}.top-actions{width:100%;justify-content:flex-end}.top-actions #openProject{display:block}.workspace{grid-template-columns:50px 1fr}.library{grid-column:2;grid-row:2;padding:20px}.studio{grid-column:2;grid-row:1}.rail{grid-row:1/4}.rail button{width:46px}.inspector{grid-column:2;grid-row:3}.asset-grid{grid-template-columns:repeat(3,1fr)}.library h1{font-size:24px;margin-top:15px}.library h1 br{display:none}.stage-area{padding:15px 10px;min-height:220px}.canvas-toolbar{height:50px;padding:8px}.hand-toggle{display:none}.stage-heading{font-size:6px}.stage-footer{font-size:8px}.timeline{padding:12px 10px}.timeline-header{flex-wrap:wrap}.canvas-toolbar #sceneTitle{display:none}.app-footer span:first-child{display:none}}
@media(min-width:951px){.workspace{height:calc(100vh - 112px);min-height:640px}.library{overflow-y:auto;scrollbar-width:thin}.studio{min-height:0;overflow:hidden}.stage-area{min-height:0;overflow:hidden}.canvas-wrap{width:min(100%,calc((100vh - 450px)*1.7778));min-width:300px;align-self:center}.stage-heading,.stage-footer{width:min(100%,calc((100vh - 450px)*1.7778));min-width:300px;align-self:center}.timeline{flex-shrink:0}.inspector-body{flex:1;min-height:0}.rail{min-height:0}}
#downloadShelf{position:fixed;bottom:32px;right:20px;z-index:40;background:white;border:1px solid #d9cbed;box-shadow:0 4px 22px #37244b18;border-radius:8px;padding:9px 12px;font-size:11px;max-width:90vw}#downloadShelf>span{color:#9a90a8;margin-right:8px}#downloadLink{color:var(--purple);font-weight:600;cursor:pointer;text-decoration:none}#downloadShelf button{padding:2px 7px;color:#a297ad}
.canvas-wrap,.stage-heading,.stage-footer{min-width:0!important;align-self:center}.canvas-wrap{flex-shrink:0}#emptyCanvas{font-size:clamp(12px,1.6vw,26px);padding:0 12px}#emptyCanvas small{font-size:10px}#newProjectDialog{width:730px;padding:36px;max-height:94vh;overflow:auto}#newProjectDialog form{position:static}#newProjectDialog label{margin-bottom:8px}.new-close{position:absolute;right:16px;top:12px}.size-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 8px}.size-preset{border:1px solid #e4dfed;padding:12px 7px;background:#fcfbfe;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.size-preset.selected{border:2px solid var(--purple);background:#f4efff;padding:11px 6px}.size-art{height:94px;display:flex;align-items:center;justify-content:center;width:100%}.size-art i{display:block;background:#c8b9eb;border-radius:3px}.size-art .landscape{width:95px;height:54px}.size-art .square{width:68px;height:68px}.size-art .portrait{width:46px;height:82px}.custom-art{font-size:44px;color:#a68ecf}.size-preset strong{font-size:11px}.size-preset small{font-size:9px;color:#91869f;min-height:24px;line-height:1.5}.size-preset>span:last-child{font-size:9px;color:#a395b2}.new-project-note{font-size:10px;line-height:1.7;color:#9c90a9;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.new-project-note button{font-size:10px;color:var(--purple);padding:3px}.form-error{color:#b14861;font-size:12px}@media(max-width:620px){.size-presets{grid-template-columns:1fr 1fr}#newProjectDialog{padding:25px}.size-art{height:65px}.size-art .portrait{height:60px;width:34px}.size-art .square{height:50px;width:50px}}
.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.preview-element{font-size:9px;color:var(--purple);padding:7px 5px;background:#f2ecfc}.animation-presets{display:flex;gap:5px;margin-top:12px}.animation-presets button{font-size:9px;flex:1;padding:7px 4px;border:1px solid #e6def1;border-radius:6px;color:#8d75ad}.animation-presets button:hover{border-color:#ac92da}.animation-summary{padding:10px;background:#f8f5fc;border-radius:6px;line-height:1.9}.inspector select{font-size:11px}
.hand-tone-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}.hand-tone-cards button{border:1px solid #e7dfef;padding:4px;border-radius:7px;background:#fff}.hand-tone-cards button[aria-pressed=true]{border:2px solid var(--purple);padding:3px;background:#f7f0ff}.hand-tone-cards small{display:block;font-size:9px;color:#94849e;margin:5px 0}.hand-thumb{display:block;width:100%;aspect-ratio:1;background-image:url('assets/hands/realistic-hands.png');background-size:300% 300%;background-repeat:no-repeat;background-color:#faf8fc;border-radius:3px}.hand-thumb.light{background-position:0 0}.hand-thumb.medium{background-position:50% 0}.hand-thumb.dark{background-position:100% 0}.hand-picker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px;padding-bottom:14px}
.animation-tile-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0}.animation-tile{min-width:0;text-align:center;border:1px solid #e3dbea;background:#fcfaff;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 5px;width:100%;margin-top:10px}.animation-tile-row .animation-tile{margin:0}.animation-tile small{font-size:9px;color:#91839e}.animation-tile strong{font-size:10px;line-height:1.3}.tile-icon{font-size:27px;color:var(--purple);height:37px;display:flex;align-items:center;justify-content:center}.tile-icon.hand-thumb{width:46px;height:43px;aspect-ratio:auto;display:block}.animation-tile:hover,.animation-tile[aria-expanded=true]{border-color:var(--purple);background:#f1eaff}.element-placement{margin:14px 0}.element-placement summary{cursor:pointer;font-size:11px;color:#8f7e9f;padding:10px 0}#animationPicker{width:390px;max-width:calc(100vw - 28px);max-height:85vh;padding:22px;border-radius:14px;overflow:auto;box-shadow:0 18px 70px #25123f35}#animationPicker::backdrop{background:#22153333}.picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.picker-head h2{font:600 18px Inter,system-ui;margin:0}.picker-head button{font-size:24px;padding:0 6px}.picker-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.picker-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:87px;border:1px solid #e5dced;background:#fcfaff;padding:9px 3px;border-radius:8px}.picker-option span{font-size:30px;color:#9784b1}.picker-option strong{font-size:10px}.picker-option[aria-pressed=true]{border:2px solid var(--purple);background:#f1eaff}.picker-option[aria-pressed=true] span{color:var(--purple)}#pickerSettings label{display:block;font-size:11px;color:#8d8296;margin:16px 0 0}#pickerSettings select,#pickerSettings input:not([type=range]){display:block;width:100%;margin-top:6px;border:1px solid #e4ddeb;border-radius:7px;padding:10px;background:white;color:#3c3348}#pickerSettings input[type=range]{width:100%;margin-top:10px}.picker-done{margin-top:20px}#pickerSettings .hand-picker{margin:0;border:0}#pickerSettings .hand-thumb{min-height:70px}
.phase-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}#animationPicker{margin:auto 24px auto auto}#animationPicker::backdrop{backdrop-filter:none}@media(max-width:620px){#animationPicker{margin:auto}}
.animation-section{border-top:1px solid var(--line);padding-top:15px;margin-top:18px}.animation-section h4{font:600 12px Inter,system-ui;margin:0 0 12px;color:#574765}.animation-section>.animation-tile-row{margin:0 0 12px}.animation-section .animation-tile{min-height:92px}.animation-section .field-grid label{font-size:10px}.eraser-thumb,.eraser-tones .hand-thumb{background-position-y:100%}#animationPicker{right:285px;margin:auto 0 auto auto}@media(max-width:850px){#animationPicker{right:12px}}@media(max-width:620px){#animationPicker{right:auto;margin:auto}}
.drag-hand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:58vh;overflow:auto}.drag-hand-option{padding:5px;border:1px solid #e4ddeb;border-radius:8px;background:#faf8fd}.drag-hand-option[aria-pressed=true]{border:2px solid var(--purple);padding:4px;background:#eee6ff}.drag-hand-thumb{display:block;width:100%;aspect-ratio:1;background-image:url('assets/hands/realistic-hands.png');background-size:300% 300%;background-repeat:no-repeat}.tile-icon.drag-hand-thumb{width:42px;height:42px}.drag-hand-option small{font-size:9px;display:block;padding:5px 0}.direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.direction-up{grid-column:2;grid-row:1}.direction-left{grid-column:1;grid-row:2}.direction-right{grid-column:3;grid-row:2}.direction-down{grid-column:2;grid-row:3}.animation-tile[hidden]{display:none}