@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900;1000&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#171827;background:#f5f7ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit}button,select{color:inherit;border:1px solid #cbd3e5;background:#fff;border-radius:10px;min-height:38px}button{font-weight:900;padding:8px 14px;cursor:pointer}button:hover{border-color:#345fc4;background:#eef2ff}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #345fc4;outline-offset:3px}button[aria-pressed=true]{background:#345fc4;color:white;border-color:#345fc4}select{padding:8px 30px 8px 12px;cursor:pointer}.topbar{height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #dce2f1;gap:20px}h1{margin:0;display:flex;align-items:center;gap:17px}h1 svg{width:145px;height:33px}h1 span{font-size:9px;max-width:72px;letter-spacing:1.8px;line-height:1.6}.mode{padding:4px;background:#e7edfc;border-radius:15px;display:flex;gap:3px}.mode button{border:0;background:transparent}.mode button[aria-pressed=true]{background:#345fc4}.header-actions{display:flex;gap:8px}#about-open{border-radius:50%;width:38px;padding:0}.gold{background:#f4c542;border-color:#f4c542}.gold:hover{background:#ffdb64}main{flex:1;display:flex;min-height:0}.viewer{flex:1;min-width:0;display:flex;flex-direction:column}.viewport{flex:1;position:relative;min-height:0;background:#e0eaff}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.scene-title{position:absolute;left:25px;top:22px;pointer-events:none;display:grid;gap:3px}.scene-title span,.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:1000;color:#345fc4}.scene-title strong{font-size:32px;font-weight:1000;line-height:1.1}.hint{position:absolute;bottom:16px;left:24px;font-size:9px;font-weight:900;letter-spacing:1px;color:#345075;pointer-events:none}#performance{position:absolute;bottom:16px;right:23px;font-size:10px;font-weight:800;color:#345075;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-content:center;background:#e0eaff;font-size:18px;font-weight:900;padding:25px;text-align:center}#loading[hidden]{display:none}.transport{height:66px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #dce2f1}.transport label{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:900}.transport select{font-size:12px}.transport button{font-size:11px}.transport .tempo{margin-left:10px}#people{height:62px;flex-shrink:0;display:flex;gap:5px;padding:8px 12px;border-top:1px solid #dce2f1;overflow-x:auto}#people button{flex:1;min-width:69px;font-size:11px;border-radius:10px;white-space:nowrap}#people small{font-size:8px;display:block;text-align:left;opacity:.6;line-height:1.1}#editor{flex:0 0 325px;width:325px;overflow-y:auto;border-left:1px solid #dce2f1;padding:25px 22px 16px;background:#f5f7ff}#editor[hidden]{display:none}.editor-heading{display:flex;justify-content:space-between;align-items:center;gap:5px}.editor-heading h2{font-size:27px;letter-spacing:-.7px;line-height:1.1;margin:9px 0 0;font-weight:1000}#editor-close{flex-shrink:0;width:31px;height:31px;min-height:31px;padding:0;border-radius:50%;font-size:20px;font-weight:700}.intro{font-size:12px;line-height:1.5;color:#56658a;margin:18px 0 23px}.field{display:grid;font-size:12px;font-weight:900;gap:7px;margin:0 0 17px}.field select{width:100%;font-size:13px;min-height:43px}fieldset{border:0;padding:0;margin:23px 0}legend{font-size:12px;font-weight:900;margin:0 0 11px}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatches button{min-width:31px;width:31px;height:31px;min-height:31px;padding:0;border:3px solid #f5f7ff;box-shadow:0 0 0 1px #cbd3e5;background:var(--swatch);border-radius:50%;font-size:15px}.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px #345fc4}.swatches button:first-child{width:auto;min-width:51px;border-radius:9px;padding:0 5px;background:#fff;color:#171827;font-size:9px}.surprise,.secondary{width:100%;font-size:12px}.surprise{background:#345fc4;color:white;border-color:#345fc4;margin-top:6px}.surprise:hover{background:#214da9;color:white}.secondary{background:transparent;margin-top:9px;border-color:transparent;font-size:11px}.recipe-tools{display:flex;gap:7px;border-top:1px solid #dce2f1;margin-top:20px;padding-top:18px}.recipe-tools button{flex:1;font-size:10px;padding:7px 5px}.kit-note{font-size:11px;line-height:1.6;color:#68789d;margin:20px 0 0}#notice{font-size:11px;color:#b22242}#shade{position:fixed;inset:70px 0 0;background:#17182744;z-index:5;border:0;border-radius:0}dialog{border:0;border-radius:22px;max-width:465px;padding:38px;color:#171827;background:#f5f7ff;box-shadow:0 18px 90px #17182744}dialog::backdrop{background:#17182766}dialog h2{font-size:36px;line-height:1.07;font-weight:1000;margin:18px 0}dialog p{font-size:14px;line-height:1.7;color:#56658a}dialog a{color:#345fc4;font-size:13px;font-weight:900}.dialog-close{position:absolute;right:12px;top:12px;min-height:30px;padding:0;width:30px;border:0;font-size:20px;background:transparent}[hidden]{display:none!important}@media(max-width:900px){.topbar{height:60px;padding:0 13px;gap:8px}h1 svg{width:118px}h1 span{display:none}.mode button{font-size:11px;padding:6px 11px}.mode{padding:3px;border-radius:12px}.header-actions{gap:5px}#customize{font-size:11px;padding:8px 10px}#about-open{display:none}#editor{position:fixed;z-index:6;right:0;top:60px;bottom:0;box-shadow:-14px 0 40px #17182722;width:min(350px,92vw);padding-top:22px}#shade{top:60px}.transport{height:62px;padding:0 9px;gap:7px}.transport label{gap:5px}.transport label:first-child{font-size:0}.transport .tempo{margin-left:0;font-size:0}.transport select{font-size:11px;padding-left:8px;padding-right:22px}.transport button{padding:7px 9px}.hint{font-size:8px;left:15px;bottom:13px}#performance{font-size:8px;right:13px;bottom:13px}.scene-title{left:18px;top:19px}.scene-title strong{font-size:29px}.scene-title span{font-size:9px}#people{height:59px;padding:7px 8px;gap:4px}#people button{min-width:66px}}@media(max-width:380px){h1 svg{width:96px}.mode button{font-size:10px;padding:6px 8px}#customize{font-size:10px;padding:7px}.transport button{font-size:10px;padding:6px 7px}.transport select{max-width:117px}#view-reset{display:none}}

.play-actions{position:absolute;right:20px;top:20px;display:flex;gap:7px}.play-actions button{font-size:10px;padding:7px 11px;min-height:32px;background:#ffffffdc;border-color:#b7c8ee;backdrop-filter:blur(6px)}.play-actions #crash{background:#f4c542;border-color:#f4c542}.hint{line-height:1.7;max-width:70%}canvas[data-interaction=grab]{cursor:grabbing}canvas:focus{outline:none}canvas:focus-visible{outline:3px solid #345fc4;outline-offset:-3px}@media(max-width:900px){.play-actions{right:12px;top:15px;gap:5px}.play-actions button{font-size:8px;padding:6px 7px;min-height:29px}.hint{max-width:65%;font-size:7px}}

#walk-feedback{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);border-radius:12px;background:#ffffffed;color:#345fc4;font-size:12px;font-weight:900;text-align:center;padding:10px 16px;pointer-events:none;max-width:90%}#walk-feedback:empty{display:none}.play-actions #wander[aria-pressed=true]{background:#345fc4;color:#fff;border-color:#345fc4}@media(max-width:900px){.play-actions{flex-wrap:wrap;justify-content:flex-end;max-width:205px}.play-actions #wander{order:3}#walk-feedback{font-size:10px;bottom:58px;width:max-content;max-width:85%}}

/* A colorful puppet stage, with the dressing room kept clear and readable. */
.topbar{background:var(--swg-ink);border-bottom-color:var(--swg-panel)}
h1{color:var(--swg-paper)}
.mode{background:var(--swg-panel)}
.mode button{color:var(--swg-paper)}
.mode button:hover{background:#354364}
.mode button[aria-pressed=true]{background:var(--swg-blue)}
.viewport,#loading{background:var(--swg-panel)}
#loading,.scene-title strong{color:var(--swg-paper)}
.scene-title span{color:var(--swg-gold)}
.hint,#performance{color:var(--swg-paper);background:#171827bd;padding:6px 8px;border-radius:7px}
@media(max-width:900px){.hint{max-width:58%}}


/* The playground has two rails: scene controls above, people and actions below. */
.topbar{height:60px;padding:0 20px;gap:14px;border-bottom:0;z-index:12}h1 span{display:none}.top-tools{display:flex;align-items:center;gap:8px;margin-left:auto}.top-tools>button{min-height:35px;font-size:12px;padding:7px 15px}
.scene-title{display:none}.viewer{position:relative}.play-dock{display:flex;align-items:center;gap:10px;flex-shrink:0;height:62px;padding:8px 16px;background:#171827;border-top:1px solid #35405e;z-index:10}
.play-dock #people{flex:1;min-width:0;height:auto;padding:3px;border:0;gap:5px;overflow-x:auto;scrollbar-width:thin;align-items:center}
.play-dock #people button{flex:0 0 auto;min-width:58px;min-height:34px;padding:7px 11px;font-size:11px;border-radius:9px;background:#252b48;color:#b8c3dc;border:1px solid #4a5574}
.play-dock #people button[aria-pressed=true]{background:#365439;color:#e4efc5;border-color:#668a4e}.play-dock #people button[aria-pressed=true]:before{content:'✓';margin-right:5px;font-size:10px}.play-dock #people button.is-selected{box-shadow:inset 0 -3px #f4c542}
.play-dock>#pause{background:#252b48;border:1px solid #4a5574;color:#f5f7ff;font-size:11px;min-height:34px;padding:7px 12px}
.dock-menu{position:relative;font-size:12px}.dock-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;background:#252b48;border:1px solid #4a5574;color:#f5f7ff;border-radius:10px;min-height:35px;padding:7px 13px;font-weight:900;white-space:nowrap}.dock-menu>summary::-webkit-details-marker{display:none}.dock-menu>summary:after{content:'⌄';font-size:13px;color:#c2d19f}.dock-menu[open]>summary{background:#365439;border-color:#93c93e}.dock-menu>summary:focus-visible{outline:3px solid #f4c542;outline-offset:3px}
.menu-sheet{position:absolute;top:calc(100% + 10px);right:0;width:245px;max-width:calc(100vw - 24px);padding:12px;display:flex;flex-direction:column;gap:7px;border:1px solid #4a5574;border-radius:15px;background:#252b48;color:#f5f7ff;box-shadow:0 12px 35px #10132066;z-index:30}.dock-menu:not([open])>.menu-sheet{display:none}.menu-sheet>a,.menu-sheet>button{display:block;text-align:left;background:#171827;color:#f5f7ff;border:0;border-radius:8px;padding:10px 12px;text-decoration:none;font:800 12px Nunito,system-ui,sans-serif}.menu-sheet>a:hover,.menu-sheet>button:hover{background:#354364}.menu-sheet hr{width:100%;border:0;border-top:1px solid #4a5574;margin:4px 0}.menu-sheet #performance{position:static;padding:7px;background:transparent;font-size:10px;color:#a9b9d5}
.play-dock .menu-sheet{top:auto;bottom:calc(100% + 12px);width:360px;max-height:min(560px,75dvh);overflow-y:auto}.play-dock .antics{margin:0;padding:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;border:0;background:transparent;overflow:visible}.play-dock .antics button,.play-dock .antics select{width:100%;max-width:none;min-width:0;min-height:36px;font-size:11px}.play-dock .antics #voice-line,.play-dock .antics #inventory-item{grid-column:1/-1}.play-dock .antics-divider{display:none}.play-dock .transport{height:auto;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-top:12px;padding:12px 0 0;border-top:1px solid #4a5574}.play-dock .transport label,.play-dock .transport .tempo{font-size:11px;margin:0;display:grid;gap:6px;color:#b8c3dc}.play-dock .transport select{background:#171827;color:#f5f7ff;border-color:#4a5574;font-size:12px;max-width:none}
.light-slider{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 4px;font-size:12px;font-weight:800}.light-slider input{grid-column:1/-1;width:100%;min-width:0;accent-color:var(--swg-gold,#f4c542)}.light-slider output{color:var(--swg-gold,#f4c542);font-variant-numeric:tabular-nums}
#shade{top:60px}#editor{border-left:1px solid #dce2f1}
@media(max-width:900px){.topbar{height:56px;padding:0 12px;gap:9px}.topbar h1 svg.gruboli-mark{width:119px}.top-tools{gap:5px}.top-tools>button{font-size:11px;padding:7px 10px}.dock-menu>summary{font-size:11px;padding:7px 10px;gap:5px}.play-dock{height:57px;padding:7px 9px;gap:6px}.play-dock #people button{min-width:56px;font-size:11px;padding:7px 9px}.play-dock>#pause{padding:7px 10px}.play-dock .menu-sheet{position:fixed;bottom:68px;right:12px;max-height:calc(100dvh - 145px)}.cast-menu .menu-sheet{position:fixed;top:65px;right:12px}.scene-menu .menu-sheet{position:fixed;top:65px;right:12px}#editor{top:56px}#shade{top:56px}}
@media(max-width:380px){.topbar h1 svg.gruboli-mark{width:101px}.topbar{padding-inline:10px}.top-tools>button{padding-inline:8px}.dock-menu>summary{padding-inline:8px}}
/* Keep the logo and all four controls readable on narrow screens. */
@media(max-width:900px){.top-tools .menu-sheet{position:fixed;top:65px;right:12px;max-height:calc(100dvh - 81px);overflow-y:auto}}
@media(max-width:540px){.topbar{display:grid;grid-template-columns:minmax(0,1fr);height:84px;padding:8px 12px;gap:6px}.topbar h1,.top-tools{justify-content:center}.top-tools{margin-left:0;min-width:0}.top-tools .menu-sheet{top:93px;max-height:calc(100dvh - 109px)}#editor,#shade{top:84px}}