@font-face{font-family:Tiro;src:url('../fonts/Timeisrunningout-Bold.otf')}@font-face{font-family:Gattica;src:url('../fonts/Gattica-Medium105.otf')}*{box-sizing:border-box}body{margin:0;background:#efefea;color:#222;font-family:Gattica,Arial,sans-serif}main{display:grid;grid-template-columns:1fr 320px;height:100svh}#view{position:relative;min-width:0;background:#d4ff00}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:30px;left:32px;pointer-events:none}h1{font:48px/.95 Tiro,sans-serif;letter-spacing:-2px;margin:0 0 18px}header span,.bottom,.label{font-size:10px;letter-spacing:1px}.bottom{position:absolute;bottom:24px;left:32px;right:28px;display:flex;align-items:center;justify-content:space-between}aside{padding:28px 24px;overflow:auto;border-left:1px solid #ccc}h2{font-size:22px;font-weight:400;margin:0 0 24px}button{font:inherit;cursor:pointer;border:1px solid #c6c6be;background:transparent;padding:10px;color:inherit}button:hover,button.active{background:#222;color:#fff}button:focus-visible,input:focus-visible{outline:2px solid #5433ee;outline-offset:3px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:22px}.label{display:flex;justify-content:space-between;margin:18px 0 10px}.label span{font-size:9px;color:#777}#editor{width:100%;height:176px;background:#e2e2da;border:1px solid #ccc;touch-action:none}#editor circle{cursor:grab}.row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:14px 0}.control{margin:16px 0}.control label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}input[type=range]{width:100%;accent-color:#242424}#colors{display:flex;gap:9px}#colors button{width:30px;height:30px;border-radius:50%;padding:0;border:2px solid transparent}#colors button.active{outline:1px solid #222;outline-offset:3px}input[type=color]{width:34px;height:25px;padding:0;border:0}.exports{display:grid;gap:7px;margin-top:24px}.exports button:first-child{background:#222;color:white}#message{font-size:11px;margin-top:10px}.bottom button{font-size:10px;border:0}@media(max-width:760px){main{grid-template-columns:1fr;height:auto}#view{height:65svh;min-height:420px}aside{border-left:0}h1{font-size:34px}header{left:20px;top:20px}.bottom{left:20px;right:15px;font-size:8px}}

.studio-panel{border-top:1px solid #ccc;border-bottom:1px solid #ccc;margin:20px 0;padding:16px 0}.studio-panel summary{cursor:pointer;font-size:13px;letter-spacing:.08em;margin-bottom:16px}.view-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.view-presets button{font:inherit;font-size:12px;padding:9px 5px;border:1px solid #bbb;background:transparent;cursor:pointer}.view-presets button:hover{background:#ddd}.view-presets button:disabled{opacity:.4}.hint{font-size:11px;line-height:1.5;opacity:.65}.studio-panel .control{margin-top:16px}

.control select{width:100%;padding:10px;background:transparent;color:inherit;border:1px solid #bbb;font:inherit}.object-reset{width:100%;padding:10px;background:transparent;border:1px solid #bbb;font:inherit;margin:16px 0;cursor:pointer}

/* Motion edition: same typography and ink/lime palette. */
main{grid-template-columns:minmax(0,1fr) 350px}aside{padding:24px 22px;background:#f0f0e9}button,select,input{font-family:inherit}select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23222' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center!important;border:1px solid #c6c6be;padding:11px 33px 11px 12px;border-radius:4px;color:#222;font:inherit;font-size:12px}select:focus-visible{outline:2px solid #6236ef;outline-offset:2px}.row:has(#type){display:block;font-size:10px;letter-spacing:.1em}.row #type{display:block;width:100%;margin-top:9px;background-color:#d4ff00!important;border-color:#222;font-size:16px;padding:15px 35px 15px 14px}.studio-heading>span{font-size:9px;letter-spacing:.14em;opacity:.6}.studio-heading h2{font-size:24px;letter-spacing:-.8px;margin:8px 0 20px}.motion-panel{border:1px solid #222;border-radius:10px;padding:16px;margin-top:22px;background:#e6e6dc}.section-kicker{font-size:10px;letter-spacing:.1em;display:flex;align-items:center;gap:7px}.loop-symbol{margin-left:auto;font-size:22px;line-height:1}.live-dot{width:6px;height:6px;border-radius:50%;background:#777}.is-playing .live-dot{background:#6236ef;box-shadow:0 0 0 4px #6236ef18}.motion-panel h3{font-size:20px;letter-spacing:-.6px;font-weight:400;margin:14px 0}.state-tabs{display:grid;grid-template-columns:1fr 18px 1fr;align-items:center;text-align:center;gap:4px}.state-tabs button{padding:10px 5px;font-size:10px;border-radius:5px;background:#f0f0e9}.state-tabs b{display:block;font:26px Tiro,sans-serif;margin-bottom:3px}.state-tabs button[aria-pressed=true]{background:#d4ff00;border-color:#222}.state-tabs button:hover{color:#222;background:#d4ff00}.motion-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.motion-actions button{font-size:10px;border-radius:4px;padding:10px 5px}#motionPlay{background:#222;color:#d4ff00;border-color:#222}.duration-row{display:flex;justify-content:space-between;font-size:11px;margin:16px 0 8px}.motion-status{font-size:10px;line-height:1.5;margin-top:8px;min-height:15px;color:#595951}.motion-panel .hint{min-height:32px;margin:10px 0}.motion-transport{position:absolute;bottom:24px;left:32px;right:32px;max-width:570px;margin:auto;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #222;border-radius:30px;background:#f0f0e9ed;backdrop-filter:blur(10px);box-shadow:0 3px 0 #2221;z-index:2}#transportPlay{width:32px;height:32px;border:0;border-radius:50%;background:#222;color:#d4ff00;padding:4px;font-size:14px;flex-shrink:0}#motionTimeline{min-width:30px;flex:1;width:auto}.transport-state{font:17px Tiro,sans-serif}#motionTime{font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}.loop-badge{font-size:9px;white-space:nowrap;letter-spacing:.06em}.animated-control label:before{content:'↔';color:#6236ef;margin-right:7px}.animated-control label{justify-content:flex-start}.animated-control output{margin-left:auto;color:#6236ef;font-variant-numeric:tabular-nums}.control output{font-variant-numeric:tabular-nums}.control input[type=range]{accent-color:#6236ef}.control select{border-radius:5px;font-size:12px}.exports .video-export{background:#222;color:#d4ff00;border-color:#222;border-radius:5px;padding:14px}.video-hint{margin:0 0 8px;font-size:10px;text-align:center}.exports button{border-radius:4px}.studio-panel{margin-top:20px}.studio-panel summary{font-size:10px}.view-presets button{border-radius:4px;font-size:10px}.view-presets button:hover{color:#222}.control{margin:19px 0}.control label{font-size:11px}button:disabled{opacity:.45;cursor:wait}.hint{opacity:1;color:#6a6a62}#downloadReady{border-radius:5px;background:#d4ff00;text-decoration:none;font-size:12px}
@media(max-width:760px){main{grid-template-columns:1fr}.motion-transport{left:15px;right:15px;gap:8px;bottom:24px}.loop-badge{display:none}aside{padding:24px 20px}#view{height:70svh}.studio-heading h2{font-size:26px}}

.motion-transport .transport-state{padding:3px;width:24px;height:28px;border:0;border-radius:4px;background:#deded3;flex-shrink:0}.motion-transport .transport-state:hover{background:#d4ff00;color:#222}

.zoom-buttons{display:flex;border-left:1px solid #bbb;padding-left:6px;gap:3px}.zoom-buttons button{padding:0;width:26px;height:28px;border:0;font-size:20px;border-radius:5px}.zoom-buttons button:hover{background:#222;color:#d4ff00}.motion-transport{max-width:660px}@media(max-width:760px){.motion-transport{gap:5px}.zoom-buttons{padding-left:2px}.zoom-buttons button{width:22px}}

.motion-expand{width:100%;font-size:11px;margin-top:8px;padding:9px;border:1px solid #222;border-radius:4px;background:#d4ff00}.motion-expand:hover{background:#222;color:#d4ff00}

.state-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#motionEasing{width:100%;font-size:11px}.state-tabs button{min-width:0}

#motionHelp,.video-hint{display:none}.motion-status:empty{display:none}.state-tabs{margin:16px 0}#view .bottom{justify-content:flex-end}.row #type{margin-top:0}.motion-panel{margin-top:18px}

#previousMotion[hidden]{display:none}

.poster-guide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed #2223;pointer-events:none;z-index:1;box-sizing:border-box}

#view{background:#e8e8e4}#view>header{display:none}.poster-template{position:absolute;pointer-events:none;object-fit:contain;box-shadow:0 1px 10px #0001}.poster-guide{transform:none;z-index:2}#view>canvas{position:absolute;inset:0;z-index:1}.motion-transport,#view>.bottom{z-index:3}

/* Keep the safe area implicit; composition still enforces its bounds. */
.poster-guide{display:none}

/* Multi-object controls extend the existing Studio grid. */
.poster-editor{margin-bottom:18px}.poster-mode,.poster-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.poster-mode button,.poster-buttons button{border-radius:4px;font-size:11px;padding:10px 6px}.poster-mode button[aria-pressed=true]{background:#222;color:#d4ff00}#posterTools{padding-top:18px}#posterTools[hidden]{display:none}#posterTools .section-kicker{margin-bottom:12px}#posterLayers{display:grid;gap:5px;margin:12px 0;max-height:160px;overflow:auto}#posterLayers button{text-align:left;border-radius:4px;font-size:11px;display:flex;align-items:center;gap:8px}#posterLayers button:before{content:'';width:9px;height:9px;flex-shrink:0;background:var(--item-color);border-radius:50%}#posterLayers button[aria-selected=true]{background:#d4ff00;color:#222;border-color:#222}.poster-library{border-top:1px solid #ccc;padding-top:16px;margin-top:16px}.poster-library summary{font-size:10px;letter-spacing:.08em;cursor:pointer;margin-bottom:12px}.poster-library input:not([type=file]),.poster-library select{width:100%;padding:11px;border:1px solid #c6c6be;border-radius:4px;background:transparent;font:inherit;font-size:12px;margin:0 0 8px}.poster-library .poster-buttons{margin-bottom:8px}

.poster-mode{grid-template-columns:repeat(3,minmax(0,1fr))}#view.free-view .poster-template,#view.free-view .poster-guide{display:none}

#colors{display:grid;grid-template-columns:repeat(3,30px);gap:9px}

.poster-gesture-hint{font-size:10px;line-height:1.5;color:#666;margin:12px 0}

#arrangeAdd[hidden],#colorTarget[hidden]{display:none}#colorTarget,#addType{max-width:100%;width:100%;padding:10px;background:transparent;border:1px solid #c6c6be;border-radius:4px;font:inherit;font-size:12px;margin-bottom:10px}#arrangeAdd .row{display:block}#posterTools .poster-buttons button{overflow-wrap:anywhere}