@font-face{font-family:'Futura Bold BT';src:url('/maker/assets/fonts/futurabold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Calibri;src:url('/maker/assets/fonts/calibri.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--green:#12B2B1;--yellow:#FEEC00;--blue:#3366FE;--red:#B23123;--white:#fff;--black:#000;--app-height:100svh;font-family:Calibri,sans-serif;color:var(--black);background:var(--green)}
@supports(height:100dvh){:root{--app-height:100dvh}}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--green);overscroll-behavior:none}html{overflow:hidden}body{height:var(--app-height);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{border:0;font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:4px solid var(--blue);outline-offset:4px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{display:block;width:34px;height:34px;fill:currentColor;flex-shrink:0}.icon *{stroke:none}button svg{pointer-events:none}.shape-button{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;padding:12px;border-radius:0;background:var(--white);color:var(--black)}.round{border-radius:50%}
.topbar{max-width:1152px;margin:auto;padding:24px 24px 28px;display:flex;justify-content:flex-end}.topbar nav{display:flex;gap:16px}.topbar .home-button{padding:7px;background:transparent;color:var(--blue);text-decoration:none}.topbar .session-button{background:var(--blue);color:var(--white)}.topbar .session-button.logged-in{background:var(--red)}.topbar .session-button .icon{transform:translateY(-2px)}.home-icon{position:relative;display:block;width:28px;height:23px;margin-top:8px;background:currentColor}.home-icon:before{content:'';position:absolute;left:-5px;top:-17px;border-right:19px solid transparent;border-bottom:18px solid currentColor;border-left:19px solid transparent}#help-button{color:var(--blue)}
main{max-width:1152px;margin:auto;padding:0 24px 32px}.workshop{display:grid;grid-template-columns:minmax(0,1fr) 94px 360px;gap:40px;align-items:stretch}.film-area{grid-column:1;min-width:0}.paper{width:100%;aspect-ratio:1;position:relative;padding:0;overflow:hidden;background:var(--white);container-type:inline-size}.stage{position:absolute;left:1.25%;top:1.25%;width:97.5%;height:70.5%;overflow:hidden;background:var(--green);touch-action:none;contain:paint}#objects{position:absolute;inset:0}.scene-object{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);padding:0;background:transparent;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.scene-object:active:not(:disabled){transform:translate(-50%,-50%);cursor:grabbing}.scene-object img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.scene-object:focus-visible{outline:3px solid var(--black);outline-offset:3px}#selection-mark{position:absolute;height:6px;background:rgb(51 102 254 / 50%);transform:translateX(-50%);pointer-events:none;z-index:99}
.maker-line{position:absolute;top:2.6%;left:3%;width:94%;height:4.6%;display:flex;align-items:center;white-space:pre;color:var(--white);font-size:3.8cqw;line-height:1;pointer-events:none;z-index:2}.maker-line input{font:inherit;color:inherit;background:transparent;border:0;border-radius:0;min-width:0;flex:1;padding:0;margin:0;height:100%;line-height:inherit;pointer-events:auto;outline:none}.maker-line input::placeholder{color:var(--white);opacity:1}.maker-line input:focus{background:var(--green);text-decoration:underline;text-underline-offset:.15em}.maker-line input:disabled{opacity:1}
.paper-signature{position:absolute;right:2%;top:67.5%;height:3.2%;font-size:2.8cqw;line-height:1;color:var(--white);pointer-events:none;z-index:2}.caption-area{position:absolute;inset:0;pointer-events:none}.story-line{position:absolute;left:3%;width:94%;height:6%;font-family:Calibri,sans-serif;font-size:4.26cqw;font-weight:400;line-height:1.4084507;border:0;border-radius:0;padding:0;margin:0;background:var(--white);color:var(--black);pointer-events:auto;outline:none;appearance:none}.story-line:nth-child(1){top:78.2%}.story-line:nth-child(2){top:84.2%}.story-line:nth-child(3){top:90.2%}.story-line::placeholder{color:var(--black);opacity:1}.story-line:focus{box-shadow:inset 0 -3px var(--green)}.story-line:disabled{opacity:1}
.palette-wrap{grid-column:3;min-width:0;height:100%}.palette{height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:106px;align-content:start;gap:14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--white) var(--green);padding-right:5px}.sticker{display:grid;place-items:center;min-width:0;padding:13px;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}.sticker:active:not(:disabled){transform:none}.sticker img{display:block;width:100%;height:100%;max-height:80px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.controls{grid-column:2;display:flex;flex-direction:column;gap:12px;min-height:0}.history,.finish-controls{display:grid;grid-template-columns:44px 44px;gap:6px}.controls .shape-button{width:44px;height:44px;padding:8px}.controls .icon{width:28px;height:28px}.finish-controls{margin-top:auto}.new-button{padding:0!important;background:var(--red);color:var(--green)}.new-button .icon{width:90%;height:90%}.finish-button{background:var(--yellow);color:var(--green)}
.timeline-wrap{display:flex;align-items:flex-start;gap:14px;width:100%;margin-top:14px}.timeline{display:flex;flex:1 1 auto;gap:10px;min-width:0;min-height:104px;overflow-x:auto;padding:0 0 8px;scrollbar-width:thin;scrollbar-color:var(--white) var(--green);touch-action:pan-x}.frame-item{display:grid;flex:0 0 72px;grid-template-rows:72px 24px;justify-items:center;gap:6px;width:72px}.frame{position:relative;width:72px;height:72px;padding:4px;background:var(--white);border:0}.frame[aria-current=true]{padding:0;border:5px solid var(--blue)}.frame img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.frame-number{position:absolute;right:3px;bottom:3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:rgb(255 255 255 / 85%);font-size:13px;line-height:18px}.frame-delete{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;background:transparent}.frame-delete img{display:block;width:100%;height:100%;pointer-events:none}.frame-delete:disabled{opacity:.3}.film-controls{display:flex;flex:0 0 auto;align-self:flex-start;gap:8px;margin-top:14px;margin-left:auto}.film-controls .shape-button{width:44px;height:44px}.record-button{padding:11px;background:var(--red)}.record-button span{width:100%;height:100%;border-radius:50%;background:var(--white)}.play-button{background:var(--yellow)}.play-button span{width:0;height:0;margin-left:5px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid var(--blue)}.play-button.paused span{display:block;flex:0 0 20px;width:20px;height:24px;margin:0;border:0;background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 35%,transparent 35%,transparent 65%,var(--blue) 65%,var(--blue) 100%)}
body.playing .palette-wrap,body.playing .history,body.playing .finish-controls{opacity:.25;pointer-events:none}body.playing .scene-object{cursor:default;pointer-events:none}
dialog{border:0;border-radius:clamp(24px,5vw,48px);padding:28px;width:560px;max-width:calc(100% - 24px);max-height:90dvh;background:var(--white);color:var(--black);overflow:auto}dialog::backdrop{background:rgb(0 0 0 / 38%)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.modal-header h2{margin:0;color:var(--green);font:700 27px/1.15 'Futura Bold BT'}.close-button{flex-shrink:0;width:48px;height:48px;background:var(--yellow);color:var(--black)}.close-button .icon{width:28px;height:28px}#modal-content p{font-size:19px;line-height:1.35}.modal-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}.share-button{width:100%;min-height:64px;padding:12px 28px;border-radius:32px;background:var(--blue);color:var(--white);font:700 22px/1.15 'Futura Bold BT';text-align:center}.share-button:disabled{opacity:.55}.save-actions{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;column-gap:24px;row-gap:20px;padding-top:50px}.save-actions-spacer{grid-column:1}.save-actions :is(.share-button,.site-button){grid-column:2;width:100%;min-width:0;margin:0}.primary-button,.secondary-button,.site-button{min-height:52px;padding:12px 22px;border-radius:32px;font:20px/1 Calibri;background:var(--yellow);color:var(--black)}.secondary-button{background:var(--blue);color:var(--white)}.logout-confirm-button{background:var(--red);color:var(--white)}.site-button{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:12px 28px;border-radius:32px;background:var(--green);color:var(--white);font:700 22px/1.15 'Futura Bold BT';text-align:center}.field{display:block;margin:18px 0}.field span{display:block;font-size:19px;margin-bottom:6px}.field input{width:100%;min-height:50px;border:0;background:var(--yellow);padding:10px;font:20px Calibri}.small-note{font-size:16px!important}.account-error,.form-error{color:var(--white);background:var(--red);padding:12px}.preview-image{display:block;width:min(300px,100%);margin:18px auto 0;box-shadow:0 5px 16px rgb(0 0 0 / 13%)}.save-library-button{flex:none;width:64px;height:64px;padding:12px;background:var(--blue);color:var(--white)}.save-library-button .icon{width:40px;height:40px}.save-library-button .icon path{fill:var(--white)}.library-status{text-align:center;color:var(--green);margin-bottom:40px!important;overflow-wrap:anywhere}.library-tabs{display:flex;gap:12px;margin-bottom:35px;padding-bottom:12px}.library-tabs :is(#browser-tab,#account-tab){position:relative;background:var(--yellow);color:var(--black)}.library-tabs :is(#browser-tab,#account-tab)[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:6px;background:var(--blue);opacity:.5}.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}.library-card{text-align:center}.library-card>img{width:100%;display:block;box-shadow:0 5px 16px rgb(0 0 0 / 13%)}.library-card small{display:block;margin:8px;text-align:center}.library-card-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.library-card-actions button{display:grid;place-items:center;flex:none;width:clamp(44px,8vw,52px);height:clamp(44px,8vw,52px);margin:0;padding:0;background:transparent}.library-card-actions img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.confirm-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / 42%);padding:24px}.confirm-card{width:min(100%,430px);background:var(--white);border-radius:36px;padding:28px}.confirm-card h2{color:var(--green);font:700 25px 'Futura Bold BT';margin:0}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10;background:var(--yellow);padding:14px 20px;font-size:19px}#logout{background:var(--red);color:var(--white)}
.help-icons{display:grid;gap:10px}.help-icon-item{display:flex;align-items:center;gap:12px;font-size:18px;line-height:1.15}.help-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:8px;background:var(--white)}.help-icon .icon{width:28px;height:28px}.help-icon.record{border-radius:50%;background:var(--red);padding:11px}.help-icon.record:after{content:'';width:100%;height:100%;border-radius:50%;background:var(--white)}.help-icon.play{border-radius:50%;background:var(--yellow)}.help-icon.play:after{content:'';width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:17px solid var(--blue)}
.help-icon img{display:block;width:100%;height:100%;object-fit:contain}.drag-ghost{position:fixed;z-index:1000;width:76px;height:76px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none}

/* The account flow is shared with Maker; keep its presentation identical too. */
dialog:is([data-kind=email-account],[data-kind=email-code]){width:540px}
dialog:is([data-kind=email-account],[data-kind=email-code]) .modal-header h2{font-size:25px;line-height:1.25}
dialog:is([data-kind=email-account],[data-kind=email-code]) #modal-content p{margin:16px 0}
dialog:is([data-kind=email-account],[data-kind=email-code]) .modal-actions{gap:12px;margin-top:20px}
dialog:is([data-kind=email-account],[data-kind=email-code]) :is(.primary-button,.secondary-button,.quiet-button){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 18px;border:0;border-radius:32px;font:400 20px Calibri,sans-serif}
dialog:is([data-kind=email-account],[data-kind=email-code]) .primary-button{background:var(--yellow);color:var(--black)}
dialog:is([data-kind=email-account],[data-kind=email-code]) .secondary-button{background:var(--blue);color:var(--white)}
dialog:is([data-kind=email-account],[data-kind=email-code]) .quiet-button{background:var(--white);color:var(--black)}
dialog:is([data-kind=email-account],[data-kind=email-code]) .field{margin:18px 0}
dialog:is([data-kind=email-account],[data-kind=email-code]) .field>span{font-size:20px;margin-bottom:6px}
dialog:is([data-kind=email-account],[data-kind=email-code]) .field input{min-height:52px;padding:12px;border:0;border-radius:0;font:20px Calibri,sans-serif;outline-offset:3px}
dialog:is([data-kind=email-account],[data-kind=email-code]) .field input:focus{outline:3px solid var(--black)}
dialog:is([data-kind=email-account],[data-kind=email-code]) .account-error{padding:0;background:transparent;color:var(--black)}
#close-modal,#close-modal:focus,#close-modal:focus-visible{outline:none;box-shadow:none}
@media(max-width:720px){dialog:is([data-kind=email-account],[data-kind=email-code]){padding:20px}dialog:is([data-kind=email-account],[data-kind=email-code]) .modal-header h2{font-size:22px}}
@media (orientation:portrait){
 :root{--portrait-width:min(720px,calc(100vw - 32px));--portrait-top:max(8px,env(safe-area-inset-top));--portrait-bottom:max(8px,env(safe-area-inset-bottom));--portrait-paper:min(var(--portrait-width),calc(var(--app-height) - var(--portrait-top) - var(--portrait-bottom) - 296px))}
 body{display:flex;flex-direction:column;width:var(--portrait-width);margin:0 auto;padding:var(--portrait-top) 0 var(--portrait-bottom)}.topbar{position:static;width:100%;height:44px;flex:0 0 44px;max-width:none;padding:0;margin:0 0 10px}.topbar nav{width:100%;gap:12px}.topbar .session-button{order:-1;margin-right:auto}.topbar .shape-button{width:44px;height:44px;padding:8px}.topbar .icon{width:28px;height:28px}main{width:100%;max-width:none;padding:0;margin:0;flex:1;min-height:0}.workshop{height:100%;display:flex;flex-direction:column;gap:12px}.film-area{order:0;width:100%}.paper{width:var(--portrait-paper);margin:auto}.timeline-wrap{margin-top:10px}.timeline{min-height:82px;gap:7px}.frame-item{flex-basis:54px;width:54px;grid-template-rows:54px 20px;gap:5px}.frame{width:54px;height:54px;padding:3px}.frame[aria-current=true]{border-width:4px}.frame-delete{width:20px;height:20px}.film-controls{gap:6px;margin-top:5px}.film-controls .shape-button{width:40px;height:40px}.controls{order:1;display:flex;flex-direction:row;justify-content:space-between}.history,.finish-controls{display:flex;margin:0}.palette-wrap{order:2;flex:1 1 auto;height:auto;min-height:0;padding-top:24px}.palette{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:72px;gap:8px;padding-right:0}.sticker{padding:4px}.sticker img{max-height:64px}
}
@media (orientation:landscape), (min-width:1001px) and (hover:hover) and (pointer:fine){
 :root{--landscape-left:max(16px,env(safe-area-inset-left));--landscape-right:max(16px,env(safe-area-inset-right));--landscape-total:min(1388px,calc(100vw - var(--landscape-left) - var(--landscape-right)));--landscape-nav-gap:24px;--landscape-width:calc(var(--landscape-total) - 44px - var(--landscape-nav-gap));--landscape-palette-min:clamp(190px,24vw,360px);--landscape-top:max(calc(var(--app-height) * .03),env(safe-area-inset-top));--landscape-bottom:max(calc(var(--app-height) * .03),env(safe-area-inset-bottom));--timeline-height:112px;--landscape-paper:min(calc(var(--app-height) - var(--landscape-top) - var(--landscape-bottom) - var(--timeline-height)),calc(var(--landscape-width) - 94px - var(--landscape-palette-min) - 96px))}
 body{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:var(--landscape-nav-gap);width:var(--landscape-total);margin:0 0 0 max(var(--landscape-left),calc((100vw - var(--landscape-total))/2));padding:var(--landscape-top) 0 var(--landscape-bottom);align-items:start}.topbar{grid-area:1/1;position:static;width:44px;height:var(--landscape-paper);max-width:none;padding:0;margin:0}.topbar nav{height:100%;flex-direction:column;gap:8px}.topbar .session-button{margin-top:auto}.topbar .shape-button{width:44px;height:44px;padding:8px}.topbar .icon{width:28px;height:28px}main{grid-area:1/2;width:var(--landscape-width);max-width:none;padding:0;margin:0}.workshop{display:grid;grid-template-columns:var(--landscape-paper) 94px minmax(0,1fr);grid-template-rows:var(--landscape-paper);height:calc(var(--landscape-paper) + var(--timeline-height));column-gap:48px;row-gap:0;align-items:start}.film-area{grid-column:1;grid-row:1;width:100%}.controls{grid-column:2;grid-row:1;display:flex;height:var(--landscape-paper)}.palette-wrap{grid-column:3;grid-row:1;height:calc(var(--landscape-paper) + var(--timeline-height))}.paper{width:100%}.palette{grid-auto-rows:112px;gap:12px}.sticker{padding:6px}.sticker img{max-height:100px}
}
@media (orientation:landscape) and (max-height:700px){
 :root{--landscape-total:calc(100vw - var(--landscape-left) - var(--landscape-right));--landscape-nav-gap:10px;--landscape-palette-min:180px;--timeline-height:76px;--landscape-paper:min(calc(var(--app-height) - var(--landscape-top) - var(--landscape-bottom) - var(--timeline-height)),calc(var(--landscape-width) - 94px - var(--landscape-palette-min) - 20px))}
 .workshop{column-gap:10px}.timeline-wrap{margin-top:6px;gap:8px}.timeline{min-height:68px;gap:6px}.frame-item{flex-basis:42px;width:42px;grid-template-rows:42px 18px;gap:3px}.frame{width:42px;height:42px;padding:2px}.frame[aria-current=true]{border-width:3px}.frame-delete{width:18px;height:18px}.frame-number{font-size:10px;height:14px;line-height:14px}.film-controls{gap:5px;margin-top:3px}.film-controls .shape-button{width:36px;height:36px}.controls .shape-button{width:40px;height:40px}.history,.finish-controls{grid-template-columns:40px 40px}.palette{grid-auto-rows:64px;gap:5px}.sticker img{max-height:56px}
}
@media(pointer:coarse){.palette{scrollbar-width:none}.palette::-webkit-scrollbar{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Match the controls and canvas frame used by Maker. */
.paper{padding:0;border:0}
.history .shape-button{color:var(--green)}
.frame-delete{background:var(--red);color:var(--green)}
.frame-delete .icon{width:90%;height:90%}
.new-film-help{border-radius:50%;padding:0;background:var(--red);color:var(--white)}
.new-film-help .icon{width:90%;height:90%}
.finish-help{border-radius:50%;padding:8px;background:var(--yellow);color:var(--green)}
.frame-remove-help{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;padding:0;background:var(--red);color:var(--white)}
.frame-remove-help .icon{width:90%;height:90%}
body.playing .finish-controls{opacity:1;pointer-events:auto}
body.playing .frame-delete{display:none}
.fullscreen-button{padding:0!important;background:transparent!important}
.fullscreen-button img,.fullscreen-help img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

html.filmmaker-fullscreen,html.filmmaker-fullscreen body{width:100%;height:100%;height:100dvh;background:var(--green)}
html.filmmaker-fullscreen body{position:fixed;inset:0}
html.filmmaker-fullscreen .topbar{position:fixed;z-index:30;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:44px;height:44px;margin:0;padding:0}
html.filmmaker-fullscreen .topbar nav{display:block}
html.filmmaker-fullscreen .topbar nav>:not(#fullscreen-button){display:none}
html.filmmaker-fullscreen .topbar #fullscreen-button{width:44px;height:44px;padding:0}
@media (orientation:landscape), (min-width:1001px) and (hover:hover) and (pointer:fine){
 html.filmmaker-fullscreen{--landscape-total:calc(100vw - var(--landscape-left) - var(--landscape-right));--landscape-width:var(--landscape-total)}
 html.filmmaker-fullscreen body{display:block;margin-inline:auto}
 html.filmmaker-fullscreen main{width:var(--landscape-width);margin-inline:auto}
}
@media(pointer:coarse){#fullscreen-button,.fullscreen-help-item{display:none!important}}

/* Keep touch scrolling and the compact controls predictable on phones. */
.frame-number{right:6px;bottom:6px}
@media (orientation:portrait){
 .frame-number{right:4px;bottom:4px}
 .film-controls .shape-button{width:44px;height:44px}
 .controls{margin-bottom:16px}
}
@media(pointer:coarse){
 .palette{touch-action:pan-y}
 .sticker{touch-action:pan-y}
}