@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;650;700;750;800;850;900;1000&display=swap');
:root{--bg:oklch(1 0 0);--surface:oklch(.974 .006 230);--ink:oklch(.30 .034 230);--muted:oklch(.48 .025 230);--line:oklch(.906 .016 230);--primary:oklch(.52 .115 230);--primary-light:oklch(.946 .028 230);--green:oklch(.52 .125 158);--green-light:oklch(.94 .04 158);--motion:oklch(.56 .16 246);--looks:oklch(.54 .17 296);--sound:oklch(.55 .18 349);--events:oklch(.74 .17 80);--control:oklch(.58 .17 48);--z-dropdown:10;--z-modal:20;--z-toast:30}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--surface);font:650 14px/1.45 'Nunito Sans',ui-rounded,system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;touch-action:manipulation}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}input:focus-visible,select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}svg{width:19px;height:19px;stroke-width:1.9;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2{font-size:15px;font-weight:850}h3{font-size:20px}a{color:inherit}.topbar{height:76px;background:white;display:flex;align-items:center;padding:0 32px;gap:58px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:39px;letter-spacing:-1.9px;font-weight:1000;color:oklch(.37 .09 168)}.brand-dot{color:oklch(.76 .16 77)}.brand-monkey{width:44px;height:49px;overflow:hidden;position:relative}.brand-monkey img{width:48px;height:58px;object-fit:cover;object-position:top;position:absolute;top:0;left:-1px}.topbar nav{display:flex;gap:9px;height:100%;align-items:center}.nav-link{height:43px;padding:0 17px;font-size:14px;font-weight:800;border-radius:10px;color:var(--muted)}.nav-link.active{background:var(--green-light);color:oklch(.38 .095 158)}.nav-link svg{width:18px}.little-spark{color:oklch(.67 .14 60);font-size:16px}.top-end{margin-left:auto;display:flex;align-items:center;gap:26px}.made-for{color:var(--muted);font-size:12px;font-weight:650}.avatar{height:36px;width:36px;border-radius:50%;background:oklch(.92 .07 82);color:oklch(.42 .09 65);font-weight:900;border:3px solid white;outline:1px solid var(--line)}.projectbar{display:flex;height:72px;padding:0 32px;justify-content:space-between;align-items:center;background:white}.project-name{display:flex;align-items:center;gap:12px;min-width:0}.project-icon{display:grid;place-items:center;background:oklch(.96 .03 95);height:37px;width:37px;border-radius:10px;color:oklch(.46 .10 144)}#project-title{width:235px;font-weight:850;font-size:17px;color:var(--ink);background:none;border:0;padding:8px 0}.pencil{width:14px;color:var(--muted);margin-left:-8px}.save-state{margin-left:17px;font-size:11px;font-weight:650;color:var(--muted);display:flex;gap:5px;align-items:center}.save-state svg{width:15px}.project-actions{display:flex;align-items:center;gap:22px}.text-button{min-height:42px;padding:7px 0;color:var(--muted);font-weight:750;font-size:12px}.text-button svg{width:17px}.button{height:42px;padding:0 17px;border-radius:9px;font-weight:850;font-size:12px}.outline{background:white;border:1px solid var(--line)}.button.primary{background:var(--primary);color:white}.editor{display:grid;grid-template-columns:minmax(350px,.9fr) minmax(450px,1.4fr);gap:22px;padding:0 28px 20px}.preview-column{min-width:0}.section-top{height:56px;display:flex;align-items:center;justify-content:space-between}.section-heading{display:flex;gap:8px;align-items:center}.live-dot{width:7px;height:7px;background:var(--green);border-radius:50%}.stage-controls{display:flex;align-items:center;gap:7px}.icon-button{width:34px;height:36px;padding:7px;border-radius:8px;color:var(--muted)}.icon-button:hover{background:oklch(.93 .013 230)}.separator{height:20px;width:1px;background:var(--line);margin:0 4px}.run-button{height:36px;border-radius:8px;background:var(--green);color:white;font-size:12px;font-weight:850;padding:0 12px}.run-button svg{width:15px;fill:currentColor}.run-button.running{background:oklch(.4 .1 158)}.stop-button{height:36px;width:36px;background:white;border:1px solid var(--line);border-radius:8px}.stop-button span{width:12px;height:12px;border-radius:3px;background:oklch(.66 .15 27)}.stage-shell{padding:5px;background:white;border:1px solid var(--line);border-radius:15px}.stage{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;isolation:isolate;touch-action:none;background-size:cover;background-position:center}.stage.jungle{background-image:url('assets/jungle.webp');background-color:oklch(.91 .10 140)}.stage.ocean{background:linear-gradient(oklch(.9 .06 225) 0 57%,oklch(.65 .12 225) 57% 76%,oklch(.89 .10 83) 76%)}.stage.sunset{background:linear-gradient(oklch(.8 .10 25),oklch(.9 .10 65) 63%,oklch(.6 .10 156) 63%)}.stage.space{background:radial-gradient(ellipse at 22% 26%,oklch(.85 .13 81) 0 3%,transparent 3.3%),radial-gradient(ellipse at 75% 44%,oklch(.7 .12 270) 0 8%,transparent 8.4%),oklch(.25 .06 270);background-size:auto}.scene-label{position:absolute;left:13px;top:13px;display:flex;gap:5px;align-items:center;color:oklch(.32 .065 155);background:oklch(1 0 0/.88);padding:5px 9px;border-radius:6px;font-size:10px;pointer-events:none}.scene-label svg{width:12px;height:12px}.stage-character{position:absolute;left:50%;top:50%;width:30%;height:42%;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;transform-origin:50% 70%;transition:translate .22s ease,rotate .22s ease,scale .22s ease;user-select:none}.stage-character.dragging{cursor:grabbing;transition:none}.stage-character img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 5px 2px oklch(.27 .07 130/.12))}.stage-character .emoji-sprite{font-size:95px;line-height:1}.speech{position:absolute;bottom:92%;left:58%;background:white;color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 14px 2px;font-size:12px;font-weight:850;padding:9px 13px;white-space:normal;width:max-content;max-width:165px;rotate:calc(var(--rotation,0deg) * -1)}.stage-bottom{display:flex;align-items:center;justify-content:space-between;height:43px;gap:6px}.stage-bottom>span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}.stage-bottom>span svg{width:13px}.compact{font-size:10px;gap:5px;min-height:36px}.compact svg{width:14px}.characters-header{display:flex;align-items:center;justify-content:space-between;margin-top:5px}.characters-header h2{font-size:13px}.characters-header h2 span{display:inline-flex;justify-content:center;align-items:center;width:20px;height:20px;background:oklch(.92 .01 230);border-radius:5px;margin-left:5px;font-size:10px}.character-list{display:flex;align-items:center;gap:9px;padding:7px 0 10px;overflow:auto}.character-card{min-width:94px;position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;background:white;padding:6px 15px 5px;font-size:10px;height:86px}.character-card.selected{border:2px solid var(--green);background:var(--green-light);padding:5px 14px 4px}.character-card img{height:52px;width:51px;object-fit:contain}.character-card .emoji-sprite{height:52px;font-size:37px}.character-card .check{position:absolute;top:5px;right:5px;width:13px;height:13px;fill:var(--green);color:white}.add-character-card{height:82px;min-width:66px;border:1px dashed oklch(.79 .025 230);border-radius:10px;color:var(--muted)}.add-character-card svg{width:22px}.character-properties{display:flex;gap:12px;align-items:center;min-height:36px;font-size:11px;color:var(--muted)}.character-properties label{display:flex;align-items:center;gap:6px}.character-properties input{width:46px;padding:5px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:white;font-size:11px}.character-properties button{margin-left:auto}.idea-banner{margin-top:16px;width:100%;background:oklch(.944 .031 80);border:1px solid oklch(.89 .045 80);padding:14px;text-align:left;justify-content:flex-start;border-radius:11px;white-space:normal;gap:12px}.idea-symbol{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:oklch(.89 .08 80);color:oklch(.49 .09 70)}.idea-banner strong{display:block;font-size:11px;font-weight:850;color:oklch(.4 .06 70)}.idea-banner small{display:block;font-size:10px;color:oklch(.47 .05 70);margin-top:3px;font-weight:650}.idea-banner>svg{margin-left:auto;width:15px}.code-column{min-width:0;background:white;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;margin-top:13px}.code-toolbar{height:49px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 15px;justify-content:space-between;flex-shrink:0}.editor-tabs{display:flex;align-items:center;gap:23px;height:100%}.editor-tab{height:100%;font-size:12px;position:relative;padding:0 4px;color:var(--muted);font-weight:800;gap:7px}.editor-tab svg{width:16px}.editor-tab.selected{color:var(--green)}.editor-tab.selected:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--green);border-radius:3px 3px 0 0}.coding-for{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);background:var(--surface);padding:2px 9px;border-radius:6px}.coding-for img{height:26px;width:22px;object-fit:contain}.workspace{flex:1;position:relative;min-height:540px;background-color:oklch(.99 .002 230);background-image:radial-gradient(oklch(.84 .017 230) .8px,transparent .8px);background-size:20px 20px;overflow:hidden}.workspace-heading{display:flex;align-items:center;justify-content:space-between;padding:11px 17px}.workspace-heading>span{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted);font-weight:650}.workspace-heading>span svg{height:12px;width:12px}.workspace-heading>div{display:flex}.workspace-heading .icon-button{width:31px;height:31px}.workspace-heading .icon-button svg{width:16px}.scripts-area{padding:25px 48px 70px;position:relative;min-height:380px;transform-origin:top left;overflow:auto;max-height:510px}.script-stack{width:max-content;min-width:190px;display:flex;flex-direction:column;align-items:flex-start;padding:3px 3px 12px}.code-block{--block-color:var(--motion);background:var(--block-color);color:white;border:1px solid oklch(.2 .05 240/.15);border-bottom:3px solid oklch(.2 .05 240/.2);border-radius:6px;position:relative;min-height:43px;font-weight:850;font-size:13px;display:flex;align-items:center;padding:8px 13px;gap:7px;width:max-content;min-width:168px;user-select:none;touch-action:none;cursor:grab;margin-bottom:1px;box-shadow:none}.code-block:before{content:'';position:absolute;top:-1px;left:22px;width:26px;height:6px;background:oklch(.2 .05 240/.14);border-radius:0 0 5px 5px}.code-block:after{content:'';position:absolute;left:22px;bottom:-6px;width:26px;height:7px;background:var(--block-color);border-bottom:2px solid oklch(.2 .05 240/.18);border-radius:0 0 5px 5px;z-index:1}.code-block svg{height:16px;width:16px;stroke-width:2.4}.code-block.events{--block-color:var(--events);color:oklch(.3 .06 69);border-color:oklch(.5 .11 70/.25);border-top-left-radius:20px;min-height:47px;padding-top:12px}.code-block.events:before{display:none}.code-block.events .flag-icon{color:oklch(.45 .12 157);fill:currentColor}.code-block.looks{--block-color:var(--looks)}.code-block.sound{--block-color:var(--sound)}.code-block.control{--block-color:var(--control)}.code-block input,.block-select{border:0;border-radius:20px;background:oklch(1 0 0/.95);padding:4px 7px;color:oklch(.34 .08 250);height:25px;min-width:32px;max-width:105px;font-size:11px;font-weight:800;text-align:center;touch-action:manipulation;user-select:text}.code-block input[type=number]{width:43px;-moz-appearance:textfield}.code-block input::-webkit-inner-spin-button{-webkit-appearance:none}.code-block input.text-value{width:105px;text-align:left}.block-select{max-width:100px;width:85px}.block-remove{display:none;position:absolute;right:-29px;top:3px;color:var(--muted);width:27px;height:34px;padding:4px}.block-remove svg{width:14px}.script-stack .block-wrap:hover>.code-block>.block-remove,.script-stack .block-wrap:focus-within>.code-block>.block-remove{display:flex}.block-wrap{position:relative}.block-wrap.executing>.code-block{outline:3px solid oklch(.86 .16 90);outline-offset:2px;filter:brightness(1.08)}.loop-body{border-left:14px solid var(--control);padding:8px 17px 11px 8px;min-height:57px;min-width:210px;background:oklch(.95 .025 55);border-radius:0 0 7px 7px;border-bottom:14px solid var(--control);width:max-content;margin-bottom:2px}.loop-body:empty:after{content:'Drop blocks inside';display:block;padding:8px;font-size:10px;color:oklch(.5 .09 55)}.loop-header{border-bottom:0;border-radius:6px 6px 0 0;min-width:210px}.loop-header:after{display:none}.loop-body .code-block{min-width:166px}.workspace-tip{display:flex;align-items:center;gap:6px;position:absolute;bottom:20px;left:22px;color:var(--muted);font-size:10px;pointer-events:none}.workspace-tip svg{width:14px}.workspace-tools{position:absolute;bottom:14px;right:16px;display:flex;align-items:center;gap:2px;background:white;border:1px solid var(--line);border-radius:8px;padding:1px 3px}.workspace-tools>span{font-size:9px;color:var(--muted)}.workspace-tools .icon-button{width:28px;height:29px}.workspace-tools svg{width:14px}.drop-hint{display:none;position:absolute;inset:55px 20px 60px;border:2px dashed var(--primary);background:oklch(.95 .02 230/.8);border-radius:12px;place-items:center;font-size:20px;color:var(--primary);pointer-events:none}.workspace.drag-over .drop-hint{display:grid}.drag-ghost{position:fixed!important;pointer-events:none;z-index:var(--z-modal);opacity:.88;rotate:-3deg;filter:drop-shadow(0 5px 5px oklch(.3 .03 230/.15));margin:0!important}.block-tray{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white}.tray-title{height:48px;display:flex;align-items:center;gap:15px;padding:0 19px;border-bottom:1px solid var(--line)}.tray-title h2{font-size:13px}.tray-title>span{font-size:10px;color:var(--muted);font-weight:650}.tray-title button{margin-left:auto}.tray-title svg{width:16px}.tray-body{display:flex;min-height:128px}.categories{display:flex;flex-direction:column;gap:2px;min-width:150px;padding:8px;border-right:1px solid var(--line)}.category{justify-content:flex-start;height:31px;padding:0 10px;border-radius:6px;gap:8px;font-size:11px;color:var(--muted);font-weight:750}.category .category-dot{width:9px;height:9px;border-radius:50%;background:var(--category)}.category.selected{background:var(--category-tint);color:var(--category-ink);font-weight:900}.category>svg{width:13px;height:13px;margin-left:auto}.palette{display:flex;align-items:flex-start;gap:22px;overflow-x:auto;padding:26px 26px 20px;flex:1}.palette-item{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}.palette-item .code-block{min-width:0;min-height:44px;font-size:12px;padding:9px 13px}.palette-item>.block-description{font-size:10px;color:var(--muted);font-weight:650}.palette-item .code-block input{pointer-events:auto}.statusbar{display:flex;align-items:center;justify-content:space-between;padding:0 31px 14px;color:var(--muted);font-size:10px;font-weight:650}.statusbar>span{display:flex;align-items:center;gap:5px}.statusbar svg{width:12px;height:12px}.statusbar button{font-size:10px;padding:0}.statusbar>span:first-child svg{color:oklch(.6 .15 30)}dialog{border:1px solid var(--line);border-radius:16px;padding:0;width:min(640px,calc(100vw - 32px));max-height:85dvh;overflow:auto;color:var(--ink);background:white}dialog::backdrop{background:oklch(.21 .03 230/.4);backdrop-filter:blur(3px)}.modal-head{padding:22px 24px 15px;display:flex;align-items:center;justify-content:space-between}.modal-body{padding:0 24px 24px}.modal-intro{color:var(--muted);font-size:13px;margin-bottom:20px}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);padding:15px 8px;border-radius:12px;min-height:130px;white-space:normal;font-size:12px;background:var(--surface)}.choice img{height:70px;width:70px;object-fit:contain}.choice .big-emoji{font-size:44px}.scene-choice .scene-swatch{height:75px;width:100%;border-radius:7px;background-size:cover}.guide-steps{display:flex;flex-direction:column;gap:18px}.guide-step{display:flex;gap:14px;align-items:flex-start}.guide-number{background:var(--green-light);color:var(--green);width:31px;height:31px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;font-weight:900}.guide-step strong{display:block;margin:2px 0 4px}.guide-step p{font-size:12px;color:var(--muted)}.guide-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}.idea-card{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid var(--line);padding:16px;border-radius:11px;width:100%;margin-top:10px;white-space:normal}.idea-card .big-emoji{font-size:32px}.idea-card strong{display:block;font-size:14px}.idea-card small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.idea-card>svg{margin-left:auto;width:17px}.project-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.project-row .project-open{flex:1;flex-direction:column;align-items:flex-start}.project-row small{font-size:10px;color:var(--muted)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);padding:11px 20px;border-radius:9px;background:var(--ink);color:white;z-index:var(--z-toast);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-size:12px;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.alternate-panel{flex:1;padding:25px;min-height:540px;background:var(--surface)}.alternate-panel[hidden]{display:none}.appearance-preview{height:210px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid var(--line);border-radius:12px;margin:20px 0}.appearance-preview img{height:170px}.appearance-preview .emoji-sprite{font-size:110px}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);gap:12px}.setting-row input[type=range]{width:160px;accent-color:var(--primary)}.setting-row input[type=text]{border:1px solid var(--line);border-radius:6px;padding:8px;width:150px}.sound-card{background:white;border:1px solid var(--line);border-radius:12px;padding:17px;display:flex;align-items:center;gap:12px;margin-top:15px}.sound-card>span{flex:1}.sound-card small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.sound-symbol{width:42px;height:42px;background:oklch(.94 .035 349);border-radius:9px;color:var(--sound);display:grid;place-items:center}.empty-script{padding:40px 0;max-width:260px}.empty-script svg{height:32px;width:32px;color:var(--primary)}.empty-script strong{display:block;font-size:18px;margin:12px 0 8px}.empty-script p{font-size:12px;color:var(--muted)}.exit-fullscreen{display:none}.stage.expanded{position:fixed;inset:4dvh 4vw;width:92vw;height:92dvh;aspect-ratio:auto;z-index:var(--z-dropdown);border:6px solid white;border-radius:18px;box-shadow:0 0 0 10vw oklch(.2 .02 230/.7)}.stage.expanded .exit-fullscreen{display:flex;position:absolute;top:12px;right:12px;background:white}.stage.expanded .stage-character{width:20%;height:40%}body:has(.stage.expanded){overflow:hidden}.drop-target{outline:2px dashed var(--primary)!important;outline-offset:4px}.about-character{width:100px;height:110px;object-fit:contain;float:right;margin:0 0 15px 20px}.about-copy p{font-size:13px;line-height:1.8;margin-bottom:12px;color:var(--muted)}.danger{color:oklch(.5 .17 25)}
@media(min-width:1500px){.editor{max-width:1600px;margin:auto;grid-template-columns:minmax(350px,.88fr) minmax(450px,1.4fr)}.workspace{min-height:620px}.scripts-area{max-height:590px}.topbar,.projectbar{padding-left:max(32px,calc((100vw - 1544px)/2));padding-right:max(32px,calc((100vw - 1544px)/2))}}
@media(max-width:1100px){.topbar{gap:30px;padding:0 22px;height:66px}.made-for{display:none}.projectbar{padding:0 22px;height:66px}.save-state{display:none}.editor{padding:0 18px 16px;gap:16px;grid-template-columns:minmax(305px, .95fr) minmax(400px,1.25fr)}.stage-controls{gap:3px}.run-button{padding:0 8px}.stage-controls .icon-button{width:28px}.stage-bottom>span{font-size:9px}.workspace{min-height:515px}.scripts-area{padding-left:28px;padding-top:25px;max-height:465px}.workspace-tip{bottom:56px;left:18px}.idea-banner{padding:11px;gap:8px}.idea-banner small{font-size:9px}.idea-banner strong{font-size:10px}.coding-for{display:none}.tray-body{min-height:148px}.categories{min-width:135px}.palette{gap:18px;padding:25px 20px}.code-toolbar{padding:0 12px}.editor-tabs{gap:20px}.character-properties{gap:9px}}
@media(max-width:800px){.topbar{gap:18px}.topbar nav{gap:0}.nav-link{padding:0 10px;font-size:12px}.brand{font-size:33px}.top-end{gap:0}.projectbar{height:65px}.project-actions{gap:13px}.project-actions .text-button span{display:none}#project-title{font-size:15px;width:205px}.project-name{gap:9px}.project-icon{width:31px;height:33px}.project-actions .button{font-size:11px;padding:0 10px}.editor{grid-template-columns:minmax(275px,.85fr) minmax(360px,1.15fr);gap:12px;padding:0 12px 15px}.section-top{height:53px}.section-heading h1{font-size:13px}.stage-controls .icon-button{width:25px}.stage-controls .separator{display:none}.run-button{font-size:10px;gap:4px;height:33px}.stop-button{width:31px;height:33px}.section-heading{gap:5px}.stage-controls{gap:3px}.stage-bottom{height:36px}.stage-bottom>span{display:none}.stage-bottom .text-button{margin-left:auto}.idea-banner{margin-top:11px}.idea-banner small{display:none}.workspace{min-height:480px}.scripts-area{max-height:430px;padding-left:25px}.character-card{min-width:83px}.character-properties input{width:38px}.editor-tabs{gap:15px}.editor-tab{font-size:11px}.workspace-heading{padding-left:13px}.tray-title{padding:0 15px}.tray-title>span{font-size:9px}.code-column{margin-top:11px}.workspace-tools{right:10px}.statusbar{padding:0 18px 12px}}
@media(max-width:680px){.topbar{padding:0 14px;height:61px;gap:16px}.brand{font-size:31px;gap:4px}.brand-monkey{width:36px;height:40px}.brand-monkey img{width:40px;height:48px}.nav-link{font-size:11px;padding:0 8px;gap:5px}.nav-link svg{width:15px}.little-spark{display:none}.avatar{height:29px;width:29px;font-size:11px}.top-end{margin-left:auto}.projectbar{padding:0 14px;height:62px}.project-icon,.pencil{display:none}#project-title{font-size:14px;width:min(45vw,220px)}.project-actions{gap:9px}.project-actions .button span{display:none}.project-actions .button{height:36px;width:36px;padding:8px}.editor{grid-template-columns:1fr;padding:0 12px 14px;gap:14px}.preview-column{display:grid;grid-template-columns:1fr;min-width:0}.section-top{height:47px}.section-heading h1{font-size:14px}.stage-shell{max-width:520px;width:100%;margin:auto}.stage{aspect-ratio:16/10}.stage-bottom>span{display:flex}.characters-header{margin-top:0}.character-list{padding-bottom:4px}.character-properties{padding-top:4px}.idea-banner{display:none}.code-column{min-height:440px;margin-top:0}.workspace{min-height:390px}.scripts-area{max-height:350px;padding-top:15px}.workspace-tip{bottom:18px;font-size:9px;max-width:145px;align-items:flex-start}.workspace-tools{bottom:14px}.block-tray{grid-column:1}.tray-title>span{display:none}.tray-body{flex-direction:column;min-height:170px}.categories{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);overflow:auto;min-height:49px;padding:8px;gap:3px}.category{height:30px;font-size:10px;padding:0 8px;flex-shrink:0}.category>svg{display:none}.category .category-dot{width:7px;height:7px}.palette{padding:22px 16px;gap:20px}.statusbar>span:nth-child(2){display:none}.choice-grid{grid-template-columns:repeat(2,1fr)}.alternate-panel{min-height:400px}.stage.expanded{inset:3dvh 3vw;width:94vw;height:94dvh}.workspace-heading{padding-top:8px}.stage-controls .icon-button{width:30px}.run-button{font-size:12px;padding:0 12px}.speech{font-size:10px;padding:6px 10px}.block-remove{display:flex;right:-28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Keep the blocks within reach in a landscape tablet viewport. */
@media(min-width:681px) and (max-height:900px){.topbar{height:62px}.projectbar{height:58px}.editor{height:calc(100dvh - 145px);min-height:560px;grid-template-rows:minmax(0,1fr) 177px;gap:14px;padding-bottom:12px}.preview-column{overflow:auto;scrollbar-width:thin}.section-top{height:44px}.stage{aspect-ratio:16/10}.stage-bottom{height:28px}.characters-header{margin:0;height:29px}.character-list{padding:4px 0;height:70px}.character-card,.character-card.selected{height:64px;min-width:77px;padding:3px 12px}.character-card img,.character-card .emoji-sprite{height:37px;width:40px}.character-card .emoji-sprite{font-size:29px}.add-character-card{height:60px;min-width:55px}.character-properties{min-height:31px}.idea-banner{display:none}.code-column{margin-top:6px}.workspace{min-height:0}.scripts-area{min-height:0;max-height:calc(100dvh - 325px);padding-top:12px;padding-bottom:80px}.workspace-heading{padding-top:5px;padding-bottom:3px}.workspace-tip{bottom:50px}.block-tray{min-height:0}.tray-title{height:38px}.tray-body{flex-direction:column;min-height:0}.categories{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:5px 14px;height:40px;min-height:40px;gap:8px}.category{height:29px;padding:0 11px}.category>svg{display:none}.palette{padding:13px 22px 10px;gap:28px}.palette-item{gap:9px}.palette-item .code-block{min-height:39px}.statusbar{height:25px;padding-bottom:6px}.statusbar>span{font-size:9px}}
@media(pointer:coarse){.nav-link,.editor-tab,.button,.text-button{min-height:44px}.icon-button{min-width:40px;min-height:40px}.category{min-height:38px}.categories{height:auto;min-height:48px}.code-block{min-height:48px}.code-block input,.block-select{height:30px;font-size:13px}.code-block input[type=number]{width:48px}.block-remove{display:flex;right:-34px;min-width:34px;min-height:40px}.palette-item .code-block{min-height:46px}.run-button,.stop-button{min-height:40px}.stage-controls .icon-button{min-width:30px}.character-properties input{min-height:35px}.character-properties .icon-button{min-width:35px}.workspace-tools .icon-button{min-width:32px;min-height:36px}.code-toolbar{height:50px}.stage-bottom .text-button{min-height:32px}.project-actions .button{min-width:40px}}

/* Editing controls stay outside the scrolling script, so long projects remain usable. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.workspace { display: flex; flex-direction: column; min-height: 0; }
.workspace-heading { flex-shrink: 0; }
.scripts-area { flex: 1; min-height: 0; max-height: none; padding-bottom: 30px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: white; flex-shrink: 0; }
.workspace-tip { position: static; font-size: 11px; max-width: 220px; }
.workspace-tools { position: static; flex-shrink: 0; }
#zoom-level { min-width: 42px; font-size: 11px; min-height: 32px; color: var(--muted); }
.block-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; background: var(--primary-light); border-bottom: 1px solid var(--line); flex-shrink: 0; }
#selection-label { font-size: 12px; line-height: 1.4; max-width: 230px; }
.block-actions > div { display: flex; flex-shrink: 0; gap: 2px; }
.block-actions button { font-size: 21px; }
.code-block.block-selected { outline: 2px solid var(--primary); outline-offset: 3px; }
.code-block:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.script-stack > .block-wrap:has(> .events):not(:first-child) { margin-top: 20px; }
.loop-body:empty:after { content: 'Select repeat, then tap a tray block'; max-width: 200px; white-space: normal; }
.workspace.drag-over .drop-hint { display: block; inset: 9px 95px auto auto; font-size: 11px; padding: 7px 10px; border: 1px solid var(--primary); background: white; border-radius: 6px; }
.drop-marker { position: fixed; height: 4px; border-radius: 2px; background: var(--primary); pointer-events: none; z-index: var(--z-dropdown); }
.palette { min-width: 0; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
.palette-item { scroll-snap-align: start; }
.block-remove { color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 6px; }
.speech-left { left: auto; right: 35%; border-radius: 14px 14px 2px 14px; }
.speech-below { top: 92%; bottom: auto; border-radius: 2px 14px 14px 14px; }
.speech-left.speech-below { border-radius: 14px 2px 14px 14px; }
.storage-warning { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 10px 20px; background: oklch(.95 .05 80); color: oklch(.34 .06 70); font-size: 13px; }
.storage-warning button { min-height: 40px; text-decoration: underline; }
.character-card { max-width: 130px; }
.character-card > span:last-child { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coding-for { max-width: 130px; min-width: 0; }
#coding-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-open { min-width: 0; white-space: normal; text-align: left; }
.project-open strong { max-width: 100%; overflow-wrap: anywhere; }
.alternate-panel { min-height: 0; overflow: auto; }
.modal-head { position: sticky; top: 0; background: white; z-index: 1; gap: 15px; }
.modal-head h3 { min-width: 0; overflow-wrap: anywhere; }
.run-button { min-width: 94px; }
.run-button.running svg { fill: currentColor; }
@media (min-width: 681px) {
  .editor { height: calc(100dvh - 173px); min-height: 570px; grid-template-rows: minmax(0, 1fr) auto; }
  .preview-column { min-height: 0; overflow: auto; scrollbar-width: thin; }
  .section-top { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .code-column { min-height: 0; }
  .block-tray { min-height: 0; }
}
@media (min-width: 681px) and (max-height: 900px) {
  .editor { height: calc(100dvh - 145px); min-height: 540px; grid-template-rows: minmax(0, 1fr) 177px; }
  .scripts-area { max-height: none; }
}
@media (max-width: 900px) {
  .workspace-tip { display: none; }
  .workspace-footer { justify-content: flex-end; }
  #selection-label { font-size: 11px; }
}
@media (max-width: 680px) {
  .code-column { height: 520px; min-height: 0; }
  .workspace { min-height: 0; }
  .scripts-area { min-height: 0; max-height: none; }
  .section-top { gap: 6px; }
  .block-tray { position: sticky; bottom: 0; z-index: var(--z-dropdown); }
  .projectbar { min-height: 62px; }
  .topbar { gap: 10px; }
  .nav-link svg, .little-spark { display: none; }
  .nav-link { font-size: 12px; }
  .brand-monkey { display: none; }
  .topbar nav { flex: 1; justify-content: center; }
  .avatar { width: 32px; height: 32px; }
  .tray-title h2, .editor-tab, .text-button, .character-card { font-size: 14px; }
}
@media (pointer: coarse) {
  .icon-button, .workspace-tools .icon-button, .stage-controls .icon-button, .character-properties .icon-button, .block-remove, .run-button, .stop-button, .category { min-width: 44px; min-height: 44px; }
  .run-button { min-width: 94px; }
  .code-block input, .block-select, #project-title, .character-properties input, .setting-row input { font-size: 16px; }
  .code-block input, .block-select { height: 34px; }
  .code-block, .palette-item .code-block { font-size: 14px; min-height: 50px; }
  .block-remove { right: -48px; }
  .script-stack { padding-right: 52px; }
  .category, .text-button, .editor-tab, .character-card { font-size: 14px; }
  .categories { min-height: 54px; overflow-x: auto; flex-shrink: 0; }
  .category { flex-shrink: 0; }
  .section-top { height: auto; min-height: 54px; flex-wrap: wrap; padding: 5px 0; }
  .stage-controls { margin-left: auto; }
  .character-list { height: auto; min-height: 80px; }
  .character-card, .character-card.selected { height: 76px; min-width: 86px; }
  .character-properties { min-height: 46px; }
  .stage-bottom { min-height: 44px; }
  .stage-bottom .text-button { min-height: 44px; }
  .character-properties input { width: 54px; min-height: 38px; }
  .palette { padding-top: 12px; padding-bottom: 10px; }
  .palette-item { gap: 7px; }
  .palette-item > .block-description { font-size: 12px; }
  .workspace-footer { padding: 5px 9px; }
  #zoom-level { min-height: 44px; }
}
@media (min-width: 681px) and (max-height: 900px) and (pointer: coarse) {
  .editor { grid-template-rows: minmax(0, 1fr) 202px; }
}
@media (max-width: 390px) { .top-end { display: none; } .nav-link { padding-inline: 7px; } }

/* Pose sheets use SVG image windows: every pose keeps its original proportions. */
.sprite-visual { display: block; width: 100%; height: 100%; flex-shrink: 0; overflow: hidden; }
.sprite-visual > svg { display: block; width: 100%; height: 100%; overflow: hidden; stroke: none; }
.stage-character > .sprite-visual { pointer-events: none; filter: drop-shadow(0 3px 2px oklch(.27 .07 130 / .12)); }
.character-card > .sprite-visual { width: 52px; height: 52px; }
.choice > .sprite-visual { width: 90px; height: 90px; }
.studio-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.studio-heading h3 { font-size: 20px; }
.sheet-download { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 12px; padding: 6px 0; }
.sheet-download svg { width: 15px; height: 15px; }
.studio-intro { font-size: 13px; color: var(--muted); margin-top: 7px; }
.studio-preview { position: relative; height: 180px; display: flex; justify-content: center; align-items: center; background: white; border: 1px solid var(--line); border-radius: 12px; margin: 18px 0 12px; }
.studio-character { width: 190px; height: 160px; }
.pose-caption { position: absolute; right: 12px; bottom: 9px; color: var(--muted); font-size: 12px; }
.pose-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pose-choice { min-width: 0; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); background: white; border-radius: 9px; padding: 7px 4px; font-size: 12px; }
.pose-choice .sprite-visual { width: 100%; height: 75px; }
.pose-choice.chosen { background: var(--primary-light); border: 2px solid var(--primary); padding: 6px 3px; }
.sequence-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 20px; }
.sequence-heading h4 { font-size: 14px; margin: 0; }
.sequence-heading h4 span { color: var(--muted); font-size: 11px; margin-left: 6px; font-weight: 650; }
.sequence-heading .text-button { color: var(--primary); }
.pose-sequence { list-style: none; display: flex; gap: 9px; padding: 6px 2px 12px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pose-sequence > li { position: relative; min-width: 96px; border: 1px solid var(--line); background: white; border-radius: 9px; }
.pose-sequence > li.frame-chosen { outline: 2px solid var(--primary); outline-offset: 1px; }
.pose-sequence .sprite-visual { height: 70px; width: 76px; }
.frame-select { display: flex; flex-direction: column; gap: 3px; padding: 8px 13px; font-size: 11px; width: 100%; }
.pose-sequence [data-remove-frame] { position: absolute; top: 0; right: 0; width: 27px; height: 27px; border-radius: 6px; background: white; }
.pose-sequence [data-remove-frame] svg { width: 13px; height: 13px; }
.pose-sequence > .sequence-empty { flex: 1; width: 100%; white-space: normal; padding: 18px; font-size: 13px; color: var(--muted); }
.frame-actions { display: flex; align-items: center; gap: 7px; }
.frame-actions > span { margin-right: auto; font-size: 11px; color: var(--muted); }
.frame-actions .button { height: 34px; font-size: 11px; padding: 0 10px; }
.animation-settings { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.animation-settings label { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.animation-settings input[type=range] { width: min(26vw, 140px); accent-color: var(--primary); }
.animation-settings output { min-width: 36px; font-variant-numeric: tabular-nums; }
.loop-toggle { cursor: pointer; }
.loop-toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.studio-controls { position: sticky; bottom: -25px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 0; margin-top: 10px; background: var(--surface); z-index: 1; }
.studio-controls .button { padding-inline: 12px; }
.sequence-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.character-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.character-details summary { cursor: pointer; font-size: 14px; font-weight: 850; padding: 8px 0; }
.character-details .guide-actions { margin-top: 12px; }
.code-block.animate .block-select { max-width: 115px; }
@media (max-height: 900px) and (min-width: 681px) { .studio-preview { height: 140px; margin-top: 13px; } .studio-character { height: 130px; width: 160px; } .pose-choice .sprite-visual { height: 58px; } }
@media (pointer: coarse) {
  .pose-choice { font-size: 14px; }
  .pose-sequence [data-remove-frame] { width: 44px; height: 44px; }
  .frame-select { padding-top: 24px; min-width: 108px; }
  .frame-actions .button, .sheet-download { min-height: 44px; }
  .animation-settings label { min-height: 44px; font-size: 14px; }
  .animation-settings input[type=range] { min-height: 36px; }
}
@media (max-width: 680px) {
  .pose-picker { gap: 5px; }
  .pose-choice .sprite-visual { height: 64px; }
  .studio-controls { bottom: -25px; }
  .studio-heading h3 { font-size: 18px; }
}