:where(logo-playground,logo-reference,turtle-tiles,.logo-toolbar,.logo-stage,.logo-panel,.logo-tip,.tt-ghost),:where(logo-playground,logo-reference,turtle-tiles,.logo-toolbar,.logo-stage,.logo-panel,.logo-tip,.tt-ghost) *,:where(logo-playground,logo-reference,turtle-tiles,.logo-toolbar,.logo-stage,.logo-panel,.logo-tip,.tt-ghost) :before,:where(logo-playground,logo-reference,turtle-tiles,.logo-toolbar,.logo-stage,.logo-panel,.logo-tip,.tt-ghost) :after{box-sizing:border-box}:where(logo-example){margin-bottom:20px}:where(logo-example,logo-worksheet,logo-playground,logo-reference,turtle-tiles,.logo-panel,.tt-ghost) button{font:inherit;color:inherit}.logo-toolbar{flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:13px;display:flex}.logo-btn,.logo-speed{border:1px solid var(--color-divider,#201e1d66);background:var(--color-bg,#f3f2f2);color:var(--color-text,#201e1d);cursor:pointer;padding:4px 10px;font:600 13px/1.4 inherit}.logo-btn:hover:not(:disabled){border-color:var(--color-text,#201e1d)}.logo-btn:disabled{opacity:.45;cursor:default}.logo-btn-primary{background:var(--color-accent,#ec3013);border-color:var(--color-accent,#ec3013);color:#fff}.logo-btn-primary:hover:not(:disabled){background:var(--color-accent-700,#ae1800);border-color:var(--color-accent-700,#ae1800)}.logo-btn.logo-running{background:var(--color-text,#201e1d);border-color:var(--color-text,#201e1d)}.logo-stage{border:1px solid var(--color-divider,#201e1d66);background:#fff;width:100%;position:relative}.logo-stage canvas{width:100%;height:100%;position:absolute;inset:0}:is(.logo-panel,.logo-worksheet,.logo-playground) .logo-output{background:var(--color-surface,#eae9e9);white-space:pre-wrap;max-height:12em;margin:0;padding:8px 12px;font:13px/1.5 ui-monospace,Menlo,monospace;overflow:auto}:is(.logo-panel,.logo-worksheet,.logo-playground) .logo-output.logo-error{color:var(--color-accent-700,#ae1800)}.logo-output[hidden]{display:none}.logo-stage{touch-action:none;cursor:grab;overflow:hidden}.logo-stage.logo-dragging{cursor:grabbing}.logo-stage canvas.logo-guides{pointer-events:none}.logo-view-tools{z-index:3;opacity:.55;gap:2px;transition:opacity .15s;display:flex;position:absolute;top:6px;right:6px}.logo-stage:hover .logo-view-tools,.logo-view-tools:focus-within{opacity:1}.logo-view-tools button{border:1px solid var(--color-divider,#201e1d66);min-width:28px;color:var(--color-text,#201e1d);cursor:pointer;background:#ffffffe6;padding:2px 6px;font:600 12px/1.4 inherit}.logo-view-tools button:hover{border-color:var(--color-text,#201e1d)}turtle-tiles{display:block}.turtle-tiles{--b:60px;--gap:6px;--pad:8px;--w:calc(var(--b) * 2 + var(--gap));box-sizing:border-box;height:100dvh;padding:var(--pad);gap:var(--gap);grid-template-columns:var(--b) var(--b) minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto var(--b) var(--b);grid-template-areas:"left stage stage""strip strip strip""wheel wheel line""wheel wheel tiles";display:grid}.turtle-tiles[data-layout=wide2]{grid-template-areas:"left left stage""strip strip strip""wheel wheel line""wheel wheel tiles"}.turtle-tiles[data-layout=wide2] .tt-left{grid-template-columns:repeat(2, var(--b));grid-auto-rows:var(--b);align-content:start;display:grid}.turtle-tiles[data-layout=wide2] .tt-left>*{display:contents}.turtle-tiles[data-layout=tall]{grid-template-columns:var(--b) var(--b) auto minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto var(--w);grid-template-areas:"left stage stage stage""strip strip strip strip""wheel wheel tiles line"}.turtle-tiles[data-layout=tall] .tt-line{grid-template-columns:repeat(3, var(--b));grid-template-rows:var(--b) var(--b);place-content:space-between end;column-gap:var(--gap);display:grid}.tt-stage-area{grid-area:stage;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.tt-stage .logo-stage{pointer-events:none;background:#fff;border:0;border-radius:14px;box-shadow:0 3px #0000001f}.tt-stage .logo-view-tools,.tt-stage .logo-output{display:none}.tt-button{width:var(--b);height:var(--b);background:var(--tile-color,#8a8478);cursor:pointer;touch-action:manipulation;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid;box-shadow:0 3px #0003}.tt-button svg{width:60%;height:60%}.tt-button:active{transform:translateY(2px);box-shadow:0 1px #0003}.tt-button:disabled{opacity:.35;cursor:default}.tt-button:focus-visible{outline-offset:2px;outline:3px solid #3b3a36}.tt-grownups{--tile-color:#b9b2a5;width:clamp(28px, calc(var(--b) * .55), 40px);height:clamp(28px, calc(var(--b) * .55), 40px);opacity:.55;position:absolute;top:4px;right:4px}.tt-version{color:#000;opacity:.3;pointer-events:none;font-size:10px;position:absolute;bottom:4px;left:8px}.tt-menu-version{opacity:.6;font-size:.75rem;font-weight:400}.tt-grownups.tt-holding{animation:.8s linear forwards tt-hold}@keyframes tt-hold{to{opacity:1;transform:scale(1.4)}}.tt-left{gap:var(--gap);flex-direction:column;grid-area:left;min-height:0;display:flex}.tt-stage-tools,.tt-left .tt-pop-buttons{gap:var(--gap);flex-direction:column;display:flex}.tt-clear{--tile-color:#c98a9a}.tt-line{align-items:center;gap:var(--gap);grid-area:line;min-width:0;display:flex}.tt-record{--tile-color:#fff;box-shadow:0 3px #0003,inset 0 0 0 2px #e0d6d6}.tt-record[aria-pressed=true]{--tile-color:#ffe1e1;animation:1.6s ease-in-out infinite tt-recording}@keyframes tt-recording{50%{box-shadow:0 3px #0003,0 0 0 5px #e5393559}}.tt-play{--tile-color:#2e9d48}.tt-step,.tt-rewind{--tile-color:#7d8ea3}.tt-trash{--tile-color:#a39a8a}.tt-speed{--tile-color:#fff;box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-speed svg,.tt-speed-choice svg{width:82%;height:82%}.tt-speed-choice{--tile-color:#fff;border-radius:calc(var(--b) * .2);box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-speed-choice[aria-pressed=true]{box-shadow:0 3px #0003,inset 0 0 0 3px #3d7fd9}.tt-strip-row{align-items:flex-start;gap:var(--gap);grid-area:strip;min-width:0;display:flex}.tt-prog{border-radius:calc(var(--b) * .2);cursor:default;position:relative;overflow:hidden;box-shadow:0 3px #0003,inset 0 0 0 2px #0000000f}.tt-prog-letter{place-items:center;width:100%;height:100%;display:grid}.tt-prog-letter svg{width:80%;height:80%}.tt-prog-step{cursor:pointer;background:0 0;border:0;width:100%;height:50%;padding:0;position:absolute;left:0}.tt-prog-step[hidden]{display:none}.tt-prog-up{top:0}.tt-prog-down{bottom:0}.tt-prog-step svg{fill:#00000073;pointer-events:none;width:100%;height:200%;position:absolute;left:0}.tt-prog-up svg{top:0}.tt-prog-down svg{bottom:0}.tt-prog-step:focus-visible{outline-offset:-3px;outline:3px solid #3b3a36}.tt-scrolling{overflow:hidden!important}.tt-plays{--tile-color:#fff;border-radius:calc(var(--b) * .2);box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-plays svg{width:78%;height:78%}.tt-tile[data-tile=call]{border-radius:50%}.tt-pop{position:relative}.tt-pop:after{content:"";border-style:solid;border-width:calc(var(--b) * .08) calc(var(--b) * .065) 0;border-color:var(--pop-mark,#00000073) transparent transparent;pointer-events:none;position:absolute;bottom:9%;right:9%}.tt-music{--pop-mark:#ffffffd9}.tt-source.tt-blocked{opacity:.3;filter:grayscale(.6);cursor:not-allowed}.tt-strip-area{--line:calc(var(--b) * .76 + 6px);box-sizing:border-box;min-width:0;max-height:calc(var(--line) * 3 + var(--gap) * 2 + 12px);border-radius:calc(var(--b) * .22);background:#fff;border:2px dashed #d6cfbf;flex:1;padding:4px;position:relative;overflow:hidden auto}.tt-recording .tt-strip-area{border-color:#e57373}.tt-strip,.tt-strip-ghost{align-content:flex-start;align-items:center;gap:var(--gap) calc(var(--gap) - 1px);min-height:var(--line);flex-wrap:wrap;display:flex}:is(.tt-strip,.tt-strip-ghost)>.tt-tile{margin:3px 0}.tt-strip.tt-empty:before{content:"";box-sizing:border-box;width:calc(var(--b) * .72);height:calc(var(--b) * .72);border:2px dashed #d6cfbf;border-radius:10px}.tt-tiles{gap:var(--gap);grid-area:tiles;min-width:0;display:flex}.tt-tiles .tt-group{gap:var(--gap);display:flex}.turtle-tiles[data-layout=tall] .tt-tiles{grid-template-rows:var(--b) var(--b);grid-auto-flow:column;grid-auto-columns:var(--b);display:grid}.turtle-tiles[data-layout=tall] .tt-tiles .tt-group{display:contents}.tt-pop{border-radius:calc(var(--b) * .2)}.tt-size svg{width:78%;height:78%}.tt-colors,.tt-size{--tile-color:#fff;box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-tile:is([data-tile=pendown],[data-tile=penup],[data-tile=nextcolor],[data-tile=invisible],.tt-crayon-item){box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-colors svg{width:78%;height:78%}.tt-music{--tile-color:#d81b60}.tt-look{--tile-color:#fff;box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-look svg,.tt-look-choice svg{width:78%;height:78%}.tt-popup .tt-looks{grid-template-columns:repeat(3, var(--b))}.tt-look-choice{--tile-color:#fff;border-radius:calc(var(--b) * .2);box-shadow:0 3px #0003,inset 0 0 0 2px #e0dbd0}.tt-look-choice[aria-pressed=true]{box-shadow:0 3px #0003,inset 0 0 0 3px #3d7fd9}.tt-marker-pos{pointer-events:none;width:0;height:0;display:none;position:absolute;top:0;left:0}.turtle-tiles:is([data-look=xy],[data-look=arrow]) .tt-marker-pos,.turtle-tiles:not([data-animal=turtle]) .tt-marker-pos{display:block}.turtle-tiles:not([data-animal=turtle]):not([data-look=arrow]) .logo-sprite{visibility:hidden}.turtle-tiles[data-look=turtle] :is(.tt-pos-dot,.tt-pos-xy,.tt-pos-heading){display:none}.tt-pos-animal{opacity:.85;display:none;position:absolute;top:0;left:0}.tt-pos-animal svg{width:100%;height:100%;display:block}.turtle-tiles:not([data-animal=turtle]):not([data-look=arrow]) .tt-pos-animal{display:block}.turtle-tiles .logo-sprite{opacity:.55}.turtle-tiles[data-look=arrow] .logo-sprite{visibility:hidden}.tt-pos-dot{border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite alternate tt-pos-flash;position:absolute;top:-6px;left:-6px;box-shadow:0 0 0 2px #fff,0 0 0 3px #00000059}@keyframes tt-pos-flash{0%{opacity:1}to{opacity:.25}}.tt-pos-xy,.tt-pos-heading{color:#6e6b65;opacity:.7;white-space:nowrap;font:600 20px/1 Archivo,sans-serif;position:absolute}.tt-pos-xy{top:0;left:0;transform:translate(16px,-50%)}.tt-pos-heading{top:0;left:0}.turtle-tiles[data-look=arrow] :is(.tt-pos-xy,.tt-pos-heading,.tt-pos-dot){display:none}.tt-pos-arrow{width:1px;height:1px;animation:1s ease-in-out infinite alternate tt-pos-flash;display:none;position:absolute;top:0;left:0;overflow:visible}.turtle-tiles[data-look=arrow] .tt-pos-arrow{display:block}.tt-pop[aria-expanded=true]{outline-offset:2px;outline:3px solid #3b3a36}.tt-popup{z-index:15;background:#fff;border-radius:16px;padding:10px;position:fixed;box-shadow:0 8px 30px #00000047}.tt-popup .tt-group{grid-template-columns:repeat(4, var(--b));gap:var(--gap);display:grid}.tt-popup .tt-crayons{grid-template-columns:repeat(3, var(--b))}.turtle-tiles:not(.tt-recording) .tt-source[data-tile=repeat]{opacity:.4}.tt-tile{box-sizing:border-box;width:var(--b);height:var(--b);border-radius:calc(var(--b) * .2);background:var(--tile-color);cursor:grab;touch-action:none;outline:none;flex:none;place-items:center;display:grid;box-shadow:0 3px #0003,inset 0 0 0 2px #0000000f}.tt-tile svg{pointer-events:none;width:78%;height:78%}.tt-tile:focus-visible,.tt-wheel-ring:focus-visible{outline-offset:2px;outline:3px solid #3b3a36}:is(.tt-strip,.tt-strip-ghost) .tt-tile{width:calc(var(--b) * .76);height:calc(var(--b) * .76);box-shadow:0 2px #0003}.tt-strip .tt-tile.tt-next{outline-offset:2px;outline:3px dashed #2e9d48}.tt-strip .tt-item.tt-selected{outline-offset:2px;outline:3px solid #3d7fd9}.tt-tile.tt-active{transform:scale(1.12);box-shadow:0 0 0 4px #ffd400,0 3px #0003}.tt-bounce{animation:.35s ease-out tt-bounce}@keyframes tt-bounce{40%{transform:scale(1.18)rotate(-4deg)}}.tt-lifted{opacity:.25}.tt-ghost{z-index:10;pointer-events:none;opacity:.9;margin:0;position:fixed;top:0;left:0;box-shadow:0 10px 20px #00000040}.tt-ghost-trash{opacity:.35;filter:grayscale()}.tt-trash.tt-drop{transform:scale(1.15);box-shadow:0 0 0 4px #e57373,0 3px #0003}.tt-trash.tt-armed{--tile-color:#e53935;animation:.6s ease-in-out infinite alternate tt-armed}@keyframes tt-armed{to{box-shadow:0 0 0 8px #e5393559,0 3px #0003}}.tt-marker{width:5px;height:calc(var(--b) * .76);background:#ffb000;border-radius:3px;flex:none}.tt-wheel{width:var(--w);height:var(--w);grid-area:wheel;place-items:center;display:grid}.tt-wheel>*{grid-area:1/1}.tt-wheel-ring{touch-action:none;cursor:pointer;border-radius:50%;width:100%;height:100%}.tt-turn-go{width:calc(var(--b) * .82);height:calc(var(--b) * .82);border-radius:50%;box-shadow:0 2px #0003,inset 0 0 0 3px #2e9d48}.tt-turn-go svg{width:94%;height:94%;overflow:visible}.tt-turn-degrees{fill:#1d5fb5;opacity:.6;font:800 19px Archivo,sans-serif}.tt-repeat{box-sizing:border-box;border-radius:calc(var(--b) * .2);background:#ffe2b8;flex:none;align-items:center;gap:3px;max-width:100%;padding:3px;display:flex;box-shadow:inset 0 0 0 2px #f08c00}.tt-repeat .tt-tile{width:calc(var(--b) * .64);height:calc(var(--b) * .64)}.tt-repeat .tt-repeat-head{width:calc(var(--b) * .76);height:calc(var(--b) * .76)}.tt-repeat-head{position:relative}.tt-dots{justify-content:center;gap:1px;display:flex;position:absolute;bottom:3px;left:0;right:0}.tt-dot{width:clamp(3px, calc(var(--b) * .07), 6px);height:clamp(3px, calc(var(--b) * .07), 6px);opacity:.55;background:#fff;border-radius:50%}.tt-dot.tt-on{opacity:1;box-shadow:0 0 0 1px #7a4500}.tt-progress{height:clamp(3px, calc(var(--b) * .07), 6px);background:#ffffff73;border-radius:3px;position:absolute;bottom:4px;left:12%;right:12%;overflow:hidden}.tt-progress-fill{background:#fff;width:0;height:100%;display:block}.tt-repeat.tt-open{border-radius:calc(var(--b) * .2) 0 0 calc(var(--b) * .2);border-right:3px dashed #f08c00;box-shadow:inset 0 0 0 2px #f08c00}.tt-source.tt-open{animation:1s ease-in-out infinite alternate tt-open-repeat}@keyframes tt-open-repeat{to{box-shadow:0 0 0 6px #f08c0073,0 3px #0003}}.tt-count-pop:not([hidden]){align-items:center;gap:var(--gap);flex-direction:column;display:flex}.tt-count-step{border-radius:calc(var(--b) * .2)}.tt-count-num{min-width:var(--b);font:800 calc(var(--b) * .6) / 1 Archivo, sans-serif;text-align:center;color:#3b3a36}.tt-repeat-head svg{width:90%;height:90%;margin-bottom:14%}.tt-repeat-body{min-width:0;min-width:calc(var(--b) * .64);min-height:calc(var(--b) * .64);flex-wrap:wrap;align-items:center;gap:3px;display:flex}.tt-playing .tt-group,.tt-playing .tt-wheel{opacity:.5}.tt-menu{z-index:20;box-sizing:border-box;-webkit-user-select:text;user-select:text;background:#fff;border-radius:16px;max-width:min(360px,100% - 32px);max-height:calc(100% - 32px);padding:16px 20px;position:fixed;inset:auto 16px 16px auto;overflow:auto;box-shadow:0 10px 40px #0000004d}.tt-menu[hidden]{display:none}.tt-menu h2{margin:0 32px 6px 0;font-size:1.2rem}.tt-menu-close{width:36px;height:36px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:6px;display:flex;position:absolute;top:10px;right:10px}.tt-menu-close:hover{background:#0000000f}.tt-menu-close svg{width:100%;height:100%}.tt-menu p{margin:0 0 12px;font-size:.95rem;line-height:1.4}.tt-menu-tools{gap:6px;margin-bottom:12px;display:flex}.tt-menu-button{color:inherit;font:inherit;cursor:pointer;background:#f6f5f4;border:1px solid #0003;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 2px 6px;font-size:.75rem;display:flex}.tt-menu-button:hover:not(:disabled){border-color:currentColor}.tt-menu-button:disabled{opacity:.4;cursor:default}.tt-menu-button svg{width:26px;height:26px}.tt-menu-link{font-size:.95rem}.tt-menu h3{margin:0 0 4px;font-size:1rem}.tt-menu ul{margin:0 0 12px;padding-left:1.2em;font-size:.95rem;line-height:1.35}.tt-menu li+li{margin-top:4px}.tt-menu-icon{vertical-align:-.35em;background:var(--tile-color);border-radius:5px;justify-content:center;align-items:center;width:1.4em;height:1.4em;display:inline-flex}.tt-menu-icon svg{width:80%;height:80%}@media (width>=600px) and (height<=500px){.tt-menu{grid-template-rows:auto auto auto 1fr;grid-template-columns:1fr 1fr;column-gap:24px;max-width:min(720px,100% - 32px);display:grid}.tt-menu>:not(.tt-menu-tips,.tt-menu-close){grid-column:1}.tt-menu-tips{grid-area:1/2/span 4}.tt-menu-tips ul{margin-bottom:0}.tt-menu-close+h2{margin-right:0}.tt-menu-tips h3{margin-right:32px}}