:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#283323;background:#eef2e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #75a144;outline-offset:4px}[hidden]{display:none!important}main,.viewer{width:100%;height:100vh;height:var(--app-height,100vh)}.viewer{position:relative;background:#eef2e7;overflow:hidden}#canvas-wrap{position:absolute;inset:0}canvas{display:block;touch-action:none;outline:none}.brand{position:absolute;top:28px;left:30px;display:flex;align-items:center;gap:10px;color:#293820;text-decoration:none;z-index:2}.brand-icon{width:31px;height:33px;background:#9aed36;border-radius:10px 10px 10px 3px;display:grid;place-items:center;font-size:24px;font-weight:850;position:relative}.brand-icon span{position:absolute;right:4px;top:0;font-size:13px}.brand b{font-size:16px;letter-spacing:-.7px}.brand b>span{font-weight:400}.brand small{font-size:9px;letter-spacing:1px;border-left:1px solid #bdc7b0;padding-left:10px;margin-left:3px;color:#849174}.side-tools{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:4}.tool-button{display:grid;place-items:center;width:45px;height:45px;border:1px solid #d5ddc8;border-radius:14px;background:#fbfdf4ed;color:#536546;box-shadow:0 3px 18px #2439150a;backdrop-filter:blur(16px);transition:transform .2s,background .2s}.tool-button:hover{background:#fff;transform:translateY(-1px)}.palette-toggle{position:relative}.color-pair{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#80e615 0 50%,#ff6b19 50%);box-shadow:inset 0 0 0 1px #0000000c}.palette-toggle.orange .color-pair{background:linear-gradient(135deg,#ff7025 0 50%,#80e615 50%)}.swap-mark{position:absolute;right:1px;bottom:0;background:#fbfdf4;border-radius:50%;font-size:12px;width:17px;height:17px;color:#536546}aside{position:absolute;right:82px;top:50%;transform:translateY(-50%);width:238px;border:1px solid #d5ddc8;border-radius:17px;background:#fafcf5f5;backdrop-filter:blur(22px);box-shadow:0 15px 45px #283b1b12;padding:8px 18px 12px;z-index:5}.panel-title{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid #e2e8d9}.panel-title b{font-size:12px;font-weight:600}.panel-title button{border:0;background:none;color:#819171;font-size:22px;padding:5px}.setting{display:flex;justify-content:space-between;align-items:center;min-height:54px;font-size:11px;border-bottom:1px solid #e8eddf}.setting:last-child{border-bottom:0}.color-field{display:flex;align-items:center;gap:7px}#color-code{font-size:9px;font-family:monospace;color:#869578}input[type=color]{width:24px;height:24px;padding:0;background:none;border:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #0001;border-radius:6px}select{border:1px solid #dce3d1;border-radius:7px;background:#fff;color:#5d704e;font-size:10px;padding:6px;max-width:80px}.toggle{width:33px;height:20px;border:0;border-radius:20px;background:#dce3d3;padding:3px}.toggle span{display:block;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .2s}.toggle[aria-checked=true]{background:#75a144}.toggle[aria-checked=true] span{transform:translateX(13px)}.segments{display:flex;gap:2px;border:1px solid #dce3d1;border-radius:7px;padding:2px}.segments button{border:0;background:none;border-radius:5px;font-size:16px;color:#7e8a72;width:27px;height:25px}.segments .active{background:#e8efde;color:#314720}.view-controls{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:#fafcf3ed;backdrop-filter:blur(16px);border:1px solid #d5ddc8;padding:6px;border-radius:13px;box-shadow:0 5px 20px #3a4b1e0a;white-space:nowrap}.view-controls button{background:none;border:0;color:#637055;border-radius:7px;padding:9px 13px;font-size:11px;min-height:34px}.view-controls button:hover{background:#e7eddf}.view-controls button.active{background:#293b22;color:#fff}.view-controls>span{height:20px;width:1px;background:#d8dfcf;margin:0 6px}#zoom-in,#zoom-out,#reset{font-size:18px;padding:5px 11px}.viewer-bottom{position:absolute;bottom:19px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:9px;color:#869378;letter-spacing:.5px;pointer-events:none}#loading{position:absolute;inset:0;background:#eef2e7;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;font-size:12px;z-index:8;transition:opacity .4s}.loader{width:28px;height:28px;border:2px solid #d4dfc8;border-top-color:#6bad31;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}body.dark .viewer{background:#19221e}body.dark .brand{color:#e7f1de}body.dark .viewer-bottom{color:#9bac90}@media(max-width:600px){.brand{top:22px;left:20px}.brand b{font-size:14px}.brand-icon{width:28px;height:30px;font-size:22px}.side-tools{right:14px;gap:9px}.tool-button{width:42px;height:42px;border-radius:13px}aside{right:65px;width:220px;padding:8px 14px}.view-controls{bottom:46px;gap:2px;padding:5px}.view-controls button{padding:9px 10px;font-size:10px}.view-controls>span{margin:0 2px}#zoom-in,#zoom-out,#reset{padding:5px 10px}.viewer-bottom{left:20px;right:20px;font-size:8px}}

#split-layout{display:grid;grid-template-columns:minmax(0,var(--left-pane,50%)) 8px minmax(0,1fr);height:100vh;height:var(--app-height,100vh);width:100%;overflow:hidden}.viewer{height:100%;min-width:0}#editor-panel{height:100%;min-width:0;background:#071018;overflow:hidden}#original-ide{display:block;border:0;width:100%;height:100%}#splitter{position:relative;background:#d8e1cd;cursor:col-resize;touch-action:none;z-index:10;display:flex;align-items:center;justify-content:center;outline-offset:-2px}#splitter:hover,#splitter:focus-visible{background:#b4cf92}#splitter>span{display:block;width:3px;height:38px;border-radius:4px;background:#96a985}.is-resizing{cursor:col-resize;user-select:none}.is-resizing iframe{pointer-events:none}.is-resizing #canvas-wrap{pointer-events:none}.brand{left:auto;right:27px;top:32px;pointer-events:none}.play-program{position:absolute;top:22px;left:22px;z-index:3;display:flex;align-items:center;justify-content:center;gap:9px;background:#9be737;color:#284016;border:1px solid #8fd332;border-radius:16px;min-width:109px;height:60px;padding:0 19px;font-weight:650;font-size:15px;box-shadow:0 5px 20px #42661e14}.play-program:hover{background:#a8f04c}.play-program:active{transform:translateY(1px)}.play-program:disabled{opacity:.45;cursor:wait}#play-status{position:absolute;top:93px;left:23px;right:23px;z-index:2;font-size:10px;color:#6e805d;pointer-events:none}.dark #play-status{color:#a8bd95}.viewer-bottom>span:first-child{display:none}.viewer-bottom{justify-content:flex-end}.view-controls button{padding:9px 10px}.view-controls>span{margin:0 3px}@media(max-width:1000px){.brand b,.brand small{display:none}.brand{right:22px}.view-controls{gap:2px}.view-controls button{padding:8px}#zoom-in,#zoom-out{display:none}.view-controls>span{display:none}.side-tools{right:13px}}@media(max-width:600px){#split-layout{grid-template-columns:minmax(0,var(--left-pane,48%)) 7px minmax(0,1fr)}.brand{display:none}.play-program{top:16px;left:12px;min-width:80px;height:51px;padding:0 12px;gap:5px;font-size:13px;border-radius:13px}.play-program svg{width:20px;height:20px}.side-tools{right:10px}.tool-button{width:35px;height:35px;border-radius:11px}.view-controls{bottom:35px;gap:0;padding:4px;border-radius:9px;max-width:calc(100% - 12px)}.view-controls button{font-size:9px;padding:7px 5px}#reset{display:none}.viewer-bottom{right:12px;left:12px;font-size:7px;bottom:15px}#play-status{top:80px;left:12px;right:12px;font-size:8px;line-height:1.7}}

.motion-buttons{position:absolute;left:143px;top:30px;display:flex;gap:6px;z-index:4}.motion-buttons button{height:43px;width:39px;border:1px solid #cdd9be;border-radius:11px;background:#f7fbef;color:#5e784b;font-size:18px}.motion-buttons button:disabled{opacity:.35;cursor:default}.motion-buttons button:hover:not(:disabled){background:#e4f4d3}#play-status.error{color:#ae522a;max-width:calc(100% - 70px);line-height:1.6}#motion-hud{position:absolute;left:25px;bottom:108px;display:flex;gap:16px;color:#667e54;background:#f7fbefdc;border:1px solid #d3dfc6;border-radius:9px;padding:8px 11px;backdrop-filter:blur(12px);font-size:10px;pointer-events:none}#motion-hud b{font-variant-numeric:tabular-nums;min-width:23px;display:inline-block;font-weight:600}#sim-time{font-variant-numeric:tabular-nums;color:#96a487}#ideal-rpm{width:65px;background:#fff;border:1px solid #d7e0cb;border-radius:6px;padding:6px;color:#536c40;font-size:10px}.brand{top:38px}.brand b,.brand small{display:none}.brand-icon{height:27px;width:27px;font-size:20px}@media(max-width:600px){.motion-buttons{left:100px;top:20px;gap:3px}.motion-buttons button{height:39px;width:29px;font-size:16px;border-radius:9px}#motion-hud{bottom:83px;left:12px;right:12px;gap:7px;padding:7px;font-size:8px;justify-content:space-between}#play-status{top:80px}}

#motion-hud{flex-wrap:wrap;align-items:center;row-gap:6px}#led-hud{display:inline-flex;gap:4px}#led-hud i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--led-color);opacity:.2;border:1px solid #0002}#led-hud i.on{opacity:1;box-shadow:0 0 6px var(--led-color)}

#mp3-hud{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#mp3-status{color:#91a27d;margin-left:4px}

/* V11: readable top telemetry and compact CAD-style orientation navigation. */
#motion-hud{top:94px;bottom:auto;left:22px;right:22px;gap:12px 22px;padding:14px 18px;font-size:13px;line-height:1.5;min-height:54px;border-radius:13px;background:#f7fbefed;color:#657456;z-index:3;pointer-events:none;box-shadow:0 4px 18px #24391508}
#motion-hud>span{display:inline-flex;align-items:center;gap:7px}#motion-hud b{font-size:17px;font-weight:650;color:#293e22;min-width:25px}#motion-hud #servo-angle{min-width:35px}#motion-hud #sim-time{font-size:13px;margin-left:auto;color:#6d7e5e}#motion-hud #mp3-hud{max-width:230px}#motion-hud #mp3-track{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis}#mp3-status{font-size:12px}#led-hud em{font-style:normal;margin-right:2px}#led-hud i{width:13px;height:13px;border-width:1.5px;margin:0 2px}#touch-status{font-size:13px!important}#touch-status.pressed{color:#ce681b}#play-status{top:77px;font-size:11px;right:140px}.brand{display:none}
#view-navigation{position:absolute;right:20px;top:208px;width:112px;z-index:4;color:#53644b;user-select:none}.navigation-actions,.navigation-zoom{display:flex;justify-content:center;gap:7px}#view-navigation button{font-family:inherit;color:inherit;cursor:pointer}.navigation-actions button,.navigation-zoom button{width:33px;height:31px;border:1px solid #ccd6c1;background:#f9fcf3ed;border-radius:9px;display:grid;place-items:center;padding:0}.navigation-actions button:hover,.navigation-zoom button:hover{background:#e2eed5}.navigation-actions button[data-view]{font-size:24px}.navigation-zoom{margin-top:3px}.navigation-zoom button{font-size:20px}#view-cube-drag{position:relative;width:112px;height:112px;perspective:440px;touch-action:none;cursor:grab;outline-offset:-3px}#view-cube-drag.dragging{cursor:grabbing}#view-cube{position:absolute;left:28px;top:28px;width:56px;height:56px;transform-style:preserve-3d}.cube-face{position:absolute;width:56px;height:56px;background:#f1f6e9;border:1px solid #aab99a;display:grid;place-items:center;font-size:13px;font-weight:600;backface-visibility:hidden;border-radius:2px;opacity:.96}.cube-face:hover{background:#bee98d!important;color:#254718}.cube-front{transform:translateZ(28px)}.cube-back{transform:rotateY(180deg) translateZ(28px)}.cube-right{transform:rotateY(90deg) translateZ(28px);background:#dce7d1}.cube-left{transform:rotateY(-90deg) translateZ(28px);background:#dce7d1}.cube-top{transform:rotateX(90deg) translateZ(28px);background:#fbfff5}.cube-bottom{transform:rotateX(-90deg) translateZ(28px)}
body.dark #motion-hud{background:#233329ef;color:#afc29e;border-color:#46563d}body.dark #motion-hud b{color:#e3f0d8}body.dark #sim-time{color:#a6b993}
@media(max-width:1000px){#motion-hud{left:15px;right:15px;gap:7px 15px;padding:11px 13px;font-size:12px}#motion-hud b{font-size:15px}#view-navigation{right:12px;top:235px}#view-navigation #zoom-in,#view-navigation #zoom-out,#view-navigation #reset{display:grid}}
@media(max-width:600px){#motion-hud{top:82px;left:10px;right:10px;gap:5px 10px;font-size:11px;padding:9px 10px}#motion-hud b{font-size:14px}#motion-hud #sim-time{font-size:11px}#led-hud i{width:11px;height:11px;margin:0}#view-navigation{right:6px;top:255px;transform:scale(.85);transform-origin:top right}.navigation-actions button,.navigation-zoom button{min-width:30px}#play-status{top:69px;left:12px;font-size:9px}#motion-hud #mp3-hud{max-width:170px}}
/* V12: one compact toolbar; telemetry scrolls horizontally rather than adding rows. */
.top-toolbar{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr) 98px;gap:8px;align-items:center;min-height:72px;pointer-events:none}.top-toolbar>*{pointer-events:auto}.run-actions{display:flex;align-items:center;gap:5px}.top-toolbar .play-program{position:static;min-width:65px;height:44px;padding:0 9px;border-radius:11px;font-size:13px;gap:4px}.top-toolbar .play-program svg{width:19px;height:19px}.top-toolbar .motion-buttons{position:static;gap:3px}.top-toolbar .motion-buttons button{width:26px;height:34px;border-radius:8px;font-size:15px}
.top-toolbar #motion-hud{position:static;display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#becdad transparent;min-width:0;min-height:44px;height:50px;gap:11px;padding:8px 10px;font-size:11px;line-height:1.3;border-radius:10px;pointer-events:auto;box-shadow:none}.top-toolbar #motion-hud>span{flex:none;gap:4px}.top-toolbar #motion-hud b{font-size:14px;min-width:15px}.top-toolbar #motion-hud #servo-angle{min-width:28px}.top-toolbar #motion-hud #sim-time{font-size:11px;margin-left:0}.top-toolbar #motion-hud #mp3-hud{max-width:125px;overflow:visible}.top-toolbar #motion-hud #mp3-track{font-size:11px;max-width:72px}.top-toolbar #mp3-status{font-size:10px;margin-left:0}.top-toolbar #touch-status{font-size:11px!important}.top-toolbar #led-hud{gap:2px}.top-toolbar #led-hud i{width:10px;height:10px;margin:0}.top-toolbar #led-hud em{margin-right:1px}
.top-toolbar #view-navigation{position:static;display:flex;align-items:center;gap:0;width:98px;height:72px;transform:none}.top-toolbar .navigation-actions{display:flex;flex-direction:column;gap:2px}.top-toolbar .navigation-actions button{width:24px;min-width:24px;height:22px;border-radius:6px;font-size:19px}.top-toolbar .navigation-actions svg{width:15px;height:15px}.top-toolbar #pan-view[aria-pressed=true]{background:#bce986;color:#28491b;border-color:#8ab865}.top-toolbar #view-cube-drag{width:74px;height:72px;flex:none;perspective:440px}.top-toolbar #view-cube{left:9px;top:8px}.cube-face{display:grid;grid-template-columns:12px 32px 12px;grid-template-rows:12px 32px 12px;place-items:stretch;padding:0;overflow:hidden}.cube-face:hover{background:#f1f6e9!important;color:inherit}.cube-top:hover{background:#fbfff5!important}.cube-right:hover,.cube-left:hover{background:#dce7d1!important}.cube-zone{width:auto;height:auto;min-width:0;min-height:0;border:0;border-radius:0;padding:0;margin:0;background:transparent;font-size:13px;font-weight:600;display:grid;place-items:center;touch-action:none}.cube-zone:hover,.cube-zone.is-hover{background:#9ed95e;color:#243d17}.cube-zone.zone-edge.is-hover{background:#89c946}.cube-zone.zone-corner.is-hover{background:#78b737}.cube-zone:focus-visible{outline:2px solid #5b8f2f;outline-offset:-2px}#play-status{top:85px;left:16px;right:120px;font-size:10px}
@media(max-width:1000px){.top-toolbar{left:9px;right:9px;gap:6px}.top-toolbar #motion-hud{padding:7px 8px;gap:9px}.top-toolbar .play-program{min-width:57px;padding:0 7px;font-size:12px}.top-toolbar .motion-buttons button{width:23px}.top-toolbar .run-actions{gap:3px}}
@media(max-width:600px){.top-toolbar{left:6px;right:6px;gap:4px;grid-template-columns:auto minmax(0,1fr) 88px}.top-toolbar #view-navigation{width:88px}.top-toolbar #view-cube-drag{width:64px}.top-toolbar #view-cube{left:4px}.top-toolbar .play-program{min-width:46px;padding:0 6px;font-size:11px;gap:2px;height:40px}.top-toolbar .play-program svg{width:15px;height:15px}.top-toolbar .motion-buttons{gap:2px}.top-toolbar .motion-buttons button{width:20px;height:31px;font-size:13px}.top-toolbar #motion-hud{font-size:11px;height:46px;padding:6px;gap:9px}.top-toolbar #motion-hud b{font-size:13px}.top-toolbar .run-actions{gap:2px}#play-status{top:83px;left:10px}}
/* V13: enlarge telemetry within the unchanged frame, and centre navigation glyphs. */
.top-toolbar #motion-hud{font-size:14px;gap:8px;justify-content:space-between}
.top-toolbar #motion-hud b{font-size:18px}
.top-toolbar #motion-hud #mp3-track,.top-toolbar #motion-hud #mp3-status,.top-toolbar #motion-hud #sim-time{font-size:14px}
.top-toolbar #motion-hud #touch-status{font-size:14px!important}
.top-toolbar #led-hud i{width:12px;height:12px}
.top-toolbar #view-navigation .navigation-actions button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex:none}
.top-toolbar #view-navigation #reset{display:flex;padding:0;align-items:center;justify-content:center;font-size:15px;line-height:1}
.top-toolbar #view-navigation .navigation-actions svg{display:block;flex:none;margin:0}
/* V15: separate beginner examples entry, outside the original block toolbox. */
#editor-panel{position:relative;display:flex;flex-direction:column}#original-ide{flex:1;min-height:0;height:0}.experience-footer{flex:none;min-height:60px;display:flex;align-items:center;gap:8px;padding:9px 12px;background:#0e202b;border-top:1px solid #263c49;z-index:12}#examples-toggle{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:40px;border:1px solid #4c713b;border-radius:10px;background:#1b392d;color:#e3f3d8;padding:0 12px;text-align:left}#examples-toggle:hover{background:#264b36}#examples-toggle:disabled{opacity:.45;cursor:wait}.experience-icon{display:grid;place-items:center;width:25px;height:25px;flex:none;background:#a0e747;color:#29441d;border-radius:7px;font-size:11px}#examples-toggle b{font-size:14px;white-space:nowrap}#experience-name{font-size:11px;color:#9cb69f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.experience-chevron{margin-left:auto;font-size:19px;color:#b8cfac}#examples-restore{flex:none;background:none;border:0;color:#b2c5a6;font-size:11px;padding:8px 3px;white-space:nowrap}#examples-restore:hover{color:#d8f4bd}
#examples-backdrop{position:absolute;inset:0;border:0;background:#030d1555;z-index:10;cursor:default}#examples-panel{position:absolute;top:auto;right:12px;left:12px;bottom:72px;width:auto;max-height:calc(100% - 95px);transform:none;background:#132936;color:#e4eff5;border:1px solid #345263;border-radius:16px;padding:18px;z-index:13;box-shadow:0 16px 45px #0006;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(12px)}#examples-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}#examples-panel header>div{display:flex;flex-direction:column;gap:5px}#examples-panel header b{font-size:18px;font-weight:650}#examples-panel header span{font-size:12px;color:#91a9b6}#examples-close{border:0;background:none;color:#9fb4bf;font-size:27px;padding:0 3px;line-height:1}#example-categories{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}#example-categories button{font-size:12px;border:1px solid #385565;border-radius:8px;padding:7px 10px;color:#adc3cf;background:#1a3543}#example-categories button[aria-pressed=true]{background:#a2e452;border-color:#a2e452;color:#243a1c;font-weight:650}#example-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow-y:auto;min-height:0;max-height:52vh;scrollbar-width:thin;scrollbar-color:#466172 transparent}.example-card{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:left;border:1px solid #345061;border-radius:11px;min-height:86px;background:#193442;color:#e0edf3;padding:13px 30px 13px 12px}.example-card:hover{border-color:#87b960;background:#234435}.example-card b{font-size:14px;font-weight:600}.example-card>span{font-size:11px;line-height:1.55;color:#9fb7c3}.example-card i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:#a3dc73;font-size:10px}#examples-error{font-size:12px;line-height:1.6;color:#ffb397;margin:10px 0 0}
@media(max-width:1000px){#example-list{grid-template-columns:minmax(0,1fr)}#examples-panel{padding:14px}.example-card{min-height:70px}#example-categories{gap:5px}#example-categories button{padding:6px 8px}.experience-footer{padding:9px 8px;gap:5px}#examples-toggle{padding:0 8px;gap:7px}#examples-toggle b{font-size:13px}#experience-name{font-size:10px}#examples-restore{font-size:10px}}
@media(max-width:600px){.experience-footer{flex-wrap:wrap}#examples-panel{left:6px;right:6px;padding:12px}#examples-panel header b{font-size:16px}#example-categories button{font-size:11px;padding:6px}#examples-toggle b{font-size:12px}.experience-icon{width:21px;height:23px}#experience-name{display:none}}
/* V18: small Start button and a stable examples window across categories. */
.experience-footer{min-height:0;height:38px;padding:4px 8px;gap:5px;flex-wrap:nowrap}
#examples-toggle{flex:none;width:auto;height:28px;padding:0 12px;gap:0;border-radius:7px}
#examples-toggle b{font-size:13px}.experience-icon,#experience-name,.experience-chevron{display:none}
#examples-restore{height:28px;padding:0 8px;font-size:12px;text-align:left}
#examples-panel{bottom:46px;height:420px;max-height:calc(100% - 60px)}
#example-list{flex:1;align-content:start;max-height:none}
@media(max-width:1000px){#examples-panel{height:600px}.experience-footer{padding:4px 8px;gap:5px}#examples-toggle{padding:0 12px;gap:0}#examples-restore{font-size:12px}}
@media(max-width:600px){.experience-footer{flex-wrap:nowrap}#examples-toggle b{font-size:13px}#examples-panel{bottom:46px;height:600px}}
/* V19: Start belongs to the toolbox sidebar; the workspace keeps its full height. */
.experience-footer{position:absolute;left:0;bottom:0;width:var(--sidebar-width,130px);height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px 8px 9px;background:linear-gradient(transparent,#0e202b 12px);border:0;pointer-events:none;z-index:12}
#examples-toggle{order:2;display:flex;align-items:center;justify-content:center;width:100%;height:46px;flex:none;border:1px solid #ff9a56;border-radius:9px;background:#f47923;color:#fff;padding:0 7px;box-shadow:0 3px 12px #0003;pointer-events:auto}
#examples-toggle:hover{background:#ff8935}#examples-toggle b{font-size:19px;font-weight:750;letter-spacing:2px}#examples-toggle:disabled{opacity:.6}
#examples-restore{order:1;display:flex;align-items:center;justify-content:center;gap:5px;flex:none;width:100%;height:34px;padding:0 4px;border:1px solid #405565;border-radius:8px;background:#203746;color:#e1ebf0;font-size:11px;white-space:nowrap;pointer-events:auto}#examples-restore svg{display:block;flex:none}#examples-restore:hover{background:#2c4859;color:#fff}
#examples-panel{bottom:69px}#editor-panel:has(#examples-restore:not([hidden])) #examples-panel{bottom:109px}
@media(max-width:1000px){.experience-footer{padding:12px 8px 9px;gap:6px}#examples-toggle{padding:0 7px}#examples-toggle b{font-size:19px}#examples-restore{font-size:11px}}
@media(max-width:600px){#examples-panel{bottom:69px}#editor-panel:has(#examples-restore:not([hidden])) #examples-panel{bottom:109px}}
#examples-panel{max-height:calc(100% - 85px)}#editor-panel:has(#examples-restore:not([hidden])) #examples-panel{max-height:calc(100% - 125px)}
/* V20: sequential challenge coins beneath Play, with a compact objective. */
#challenge-strip{position:absolute;top:90px;left:12px;right:12px;display:flex;align-items:center;gap:12px;z-index:3;pointer-events:none}.challenge-label{font-size:12px;font-weight:650;color:#6f805c}#challenge-coins{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:thin;min-width:0;padding:4px 2px;pointer-events:auto}.challenge-coin{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #e4c264;border-radius:50%;background:linear-gradient(145deg,#fff0a0,#e9b83b);color:#805411;box-shadow:inset 0 0 0 3px #fff6c76b;font-size:14px}.challenge-coin.selected{outline:2px solid #8e6522;outline-offset:2px}.challenge-coin.locked{background:#e3e7dc;border-color:#cbd2c0;box-shadow:inset 0 0 0 3px #f6f8f066;color:#9ca58f;cursor:not-allowed}.challenge-coin.completed{background:linear-gradient(145deg,#ffe997,#efbc36);color:#76500d}.challenge-coin svg{width:17px;height:17px}.challenge-coin small{position:absolute;right:-3px;bottom:-2px;border-radius:6px;background:#f6f8ec;border:1px solid #cfd6c1;color:#6c7c58;min-width:13px;font-size:9px;line-height:13px}.challenge-coin:hover:not(:disabled){filter:brightness(1.06)}#challenge-progress{font-size:11px;color:#859374;white-space:nowrap}
#challenge-info{position:absolute;top:139px;left:15px;right:15px;z-index:2;display:flex;align-items:flex-start;gap:16px;pointer-events:none}#challenge-info>div{display:flex;flex-direction:column;gap:4px}#challenge-title{font-size:13px;font-weight:650;color:#50683e}#challenge-description{font-size:11px;line-height:1.5;color:#819170}#challenge-exit{pointer-events:auto;background:#f8fbf0c9;border:1px solid #d7dfcc;border-radius:7px;padding:5px 8px;font-size:10px;color:#788b65;white-space:nowrap}#challenge-success{position:absolute;top:202px;left:15px;right:15px;z-index:4;background:#f4fae9f5;border:1px solid #b6d18f;border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #40552312}.challenge-award{font-size:29px}#challenge-success>div{display:flex;flex:1;flex-direction:column;gap:5px}#challenge-success b{font-size:15px;color:#375824}#challenge-success-detail{font-size:11px;line-height:1.5;color:#7a8a68}#challenge-next{border:1px solid #9ec56e;background:#a6e557;color:#2c491d;border-radius:8px;padding:8px 10px;font-size:11px;white-space:nowrap}#play-status{top:181px}
body.dark .challenge-label,body.dark #challenge-title{color:#d2e5bd}body.dark #challenge-description,body.dark #challenge-progress{color:#a0b28c}
@media(max-width:1000px){#challenge-strip{gap:8px;left:10px;right:10px}.challenge-coin{width:29px;height:29px}#challenge-coins{gap:6px}#challenge-info{top:134px}#challenge-success{top:203px}}
@media(max-width:600px){#challenge-strip{gap:6px;left:9px;right:9px}.challenge-label{font-size:10px}.challenge-coin{width:27px;height:27px}#challenge-coins{gap:5px}#challenge-progress{font-size:10px}#challenge-info{left:10px;right:10px;gap:8px}#challenge-title{font-size:12px}#challenge-description{font-size:10px}#challenge-success{left:10px;right:10px;padding:10px;gap:7px;flex-wrap:wrap}#challenge-success b{font-size:13px}}
/* V21: celebration is full-window, transient and click-through. */
#celebration-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:100}
.is-celebrating #challenge-success{animation:challenge-victory-pop .6s cubic-bezier(.2,1.5,.5,1)}
.is-celebrating .challenge-coin.completed{animation:challenge-trophy-glow 1s ease-in-out 3}
@keyframes challenge-victory-pop{0%{opacity:0;transform:translateY(12px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes challenge-trophy-glow{50%{box-shadow:0 0 0 7px #ffce3d33,0 0 25px #ffbd30aa}}
@media(prefers-reduced-motion:reduce){.is-celebrating #challenge-success,.is-celebrating .challenge-coin.completed{animation:none}}
/* V22: brief failure feedback, distinct from the success celebration. */
.challenge-failed #challenge-description{color:#bc5837}
.challenge-failed .challenge-coin.selected{animation:challenge-failure-shake .28s ease-in-out 2}
@keyframes challenge-failure-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.challenge-failed .challenge-coin.selected{animation:none}}

.record-button{border:1px solid #bfd2b1;border-radius:9px;background:#f4f8ed;color:#405336;font-size:12px;font-weight:700;padding:7px;white-space:nowrap;cursor:pointer}.record-button[aria-pressed="true"]{background:#ff7a22;color:white;border-color:#ff7a22}

/* Readable challenge brief beside the five medals. */
#challenge-strip{align-items:flex-start;gap:10px;padding:10px 12px;background:#f4f8eded;border:1px solid #d7dfcc;border-radius:12px;box-sizing:border-box}.challenge-label{display:none}#challenge-coins{flex:none;padding:7px 3px}#challenge-progress{padding-top:17px;font-size:13px}#challenge-info{position:static;flex:1;min-width:0;gap:10px;align-items:flex-start}#challenge-info>div{min-width:0;gap:6px;flex:1}#challenge-title{font-size:22px;line-height:1.35;font-weight:750;color:#304a24}#challenge-description{font-size:18px;line-height:1.55;color:#43583a;overflow-wrap:anywhere}#challenge-exit{font-size:13px;padding:7px 9px}#challenge-success{top:var(--challenge-bottom,240px)}#play-status{top:var(--challenge-bottom,240px)}body.dark #challenge-strip{background:#243327ed;border-color:#4c6147}
@media(max-width:1000px){#challenge-strip{gap:8px;padding:9px}#challenge-title{font-size:21px}#challenge-description{font-size:18px}#challenge-info{gap:7px}#challenge-exit{padding:6px;font-size:12px}}
@media(max-width:600px){#challenge-strip{gap:6px;padding:8px}.challenge-coin{width:25px;height:25px}#challenge-coins{gap:4px}#challenge-progress{display:none}#challenge-title{font-size:19px}#challenge-description{font-size:17px}#challenge-info{flex-wrap:wrap}#challenge-exit{font-size:12px}}

.editor-brand{position:absolute;top:15px;right:22px;z-index:9;display:flex;align-items:center;gap:10px;padding:7px 11px;background:#0b161eeb;border:1px solid #263c49;border-radius:10px;pointer-events:none}.editor-brand-shield{width:39px;height:39px;object-fit:contain;border-radius:5px}.editor-brand-word{width:141px;height:28px;object-fit:contain}@media(max-width:1000px){.editor-brand{right:16px;gap:7px;padding:6px 8px}.editor-brand-shield{width:32px;height:32px}.editor-brand-word{width:115px;height:24px}}@media(max-width:600px){.editor-brand{top:10px;right:12px}.editor-brand-shield{width:26px;height:26px}.editor-brand-word{width:83px;height:20px}}

:root{--registration-height:32px}#split-layout{height:calc(var(--app-height,100dvh) - var(--registration-height))}#split-layout>.viewer{height:100%}.site-registration{height:var(--registration-height);display:flex;align-items:center;justify-content:center;gap:24px;padding:3px 10px;background:#f1f5e9;border-top:1px solid #d5dfcc;color:#59694f;font-size:12px}.site-registration a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;white-space:nowrap}.site-registration a:hover{color:#2b4920;text-decoration:underline}.site-registration img{object-fit:contain}body.dark .site-registration{background:#18251c;color:#b8c5ad;border-color:#35462e}@media(max-width:600px){:root{--registration-height:48px}.site-registration{flex-direction:column;gap:3px;font-size:11px}}

.visit-counter{margin-left:4px;padding-left:12px;border-left:1px solid #42584b;font-size:12px;color:#d8e6c8;white-space:nowrap}.visit-counter b{color:#d7ff00;font-size:17px;font-variant-numeric:tabular-nums}.editor-brand{flex-wrap:wrap}@media(max-width:600px){.visit-counter{font-size:10px;padding-left:7px}.visit-counter b{font-size:13px}.editor-brand{max-width:calc(100% - 110px);gap:5px;justify-content:flex-end}}