*{box-sizing:border-box}body{margin:0;background:#182e30;color:#f3e9d5;font:13px Arial,sans-serif;overflow:hidden}button,input{font:inherit}button{border:1px solid #ffffff28;background:#213b3ee8;color:#ecdfc8;border-radius:9px;padding:10px 13px;cursor:pointer;backdrop-filter:blur(15px)}button:hover{background:#486059}.active{background:#cda574!important;color:#263c3b!important}button:focus-visible,input:focus-visible{outline:2px solid #dfbd8f;outline-offset:4px}#scene{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 51% 42%,transparent 40%,#10232899 100%)}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 30px;gap:16px;background:linear-gradient(#172d30aa,transparent)}.brand{font:bold 23px Georgia;letter-spacing:-1px}.brand span{font:8px Arial;letter-spacing:2.4px;display:block;margin-top:7px;color:#b3b9a9}#title{border:0;background:none;font:italic 20px Georgia;color:#dbcdb6;text-align:center;width:290px}.actions{display:flex;gap:8px}#record{background:#b18a5c;color:#182d2b}.intro{position:fixed;top:128px;left:32px;pointer-events:none}.intro>span,.eyebrow{font-size:8px;letter-spacing:2.5px;color:#c2b796}h1{font:normal 52px/.98 Georgia;margin:20px 0;color:#f0dfbe;letter-spacing:-2px}h1 i{font-weight:normal;color:#d2a877}.intro p{font:italic 14px/1.6 Georgia;color:#aeb7a4}.tools{position:fixed;left:30px;top:375px;display:flex;flex-direction:column;gap:6px;width:100px}.tools button{font-size:11px}#inspector{position:fixed;right:28px;top:125px;width:215px;padding:18px;background:#142e31cc;border:1px solid #ffffff17;border-radius:12px;backdrop-filter:blur(18px)}h2{font:italic 21px/1.2 Georgia;font-weight:normal;margin:12px 0 20px;color:#d7b891}#inspector label{display:block;color:#b6c1b7;font-size:10px;margin-top:15px}#inspector input:not([type=file]){display:block;width:100%;margin-top:7px;background:#ffffff09;border:1px solid #ffffff16;color:#e2dccb;border-radius:5px;padding:8px}#inspector input[type=range]{padding:0;accent-color:#ceaa76}output{float:right}.upload{border:1px dashed #6b7c6c;padding:10px;text-align:center;cursor:pointer}.upload input{display:none}#delete{width:100%;margin-top:15px;font-size:10px;color:#c99586;border:0}#caption{position:fixed;bottom:235px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:min(550px,70%);text-shadow:0 2px 10px #102423}#caption span{font-size:8px;letter-spacing:3px;color:#c9ac7e}#caption p{font:italic 24px Georgia;margin:10px 0}footer{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 60px));border:1px solid #ffffff20;background:#1b3436e8;border-radius:18px;padding:14px 18px;backdrop-filter:blur(20px);box-shadow:0 15px 40px #0004}.playback{display:flex;align-items:center;gap:14px}.playback #play{background:#d6b581;color:#213633;width:42px;height:42px;border-radius:50%}.playback #restart{padding:5px;border:0;font-size:22px}.progress{flex:1}.progress>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:#d0d6c8}.progress b{font-weight:normal}.track{height:2px;background:#4d5d56;margin-top:10px}.track i{display:block;height:100%;background:#deb97b;width:0}.playback label{font-size:10px;color:#b8c3b7}.playback label input{accent-color:#c6aa7c}.playback #sound{font-size:10px}.timeline{display:flex;gap:7px;margin:14px 0;overflow:auto;padding-bottom:3px}.timeline button{min-width:108px;text-align:left;background:#ffffff04;padding:9px 12px;font:12px Georgia}.timeline small{display:block;font:8px Arial;letter-spacing:1px;color:#8fa79b;margin-bottom:5px}.timeline .selected{border-color:#cda574;background:#cda57416}.palette{display:flex;gap:5px;align-items:center;overflow:auto}.palette>span{font-size:7px;letter-spacing:1px;white-space:nowrap;margin-right:8px;color:#879d90}.palette button{font-size:9px;white-space:nowrap;border:0;background:#ffffff08;padding:8px}.palette [data-add].active{background:#cda574!important}#hint{position:fixed;bottom:218px;left:32px;font-size:9px;color:#9eaea0;max-width:210px;line-height:1.5}#toast{position:fixed;top:90px;left:50%;transform:translateX(-50%);padding:11px 18px;background:#d4b68a;color:#273d36;border-radius:9px;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1}#error{position:fixed;inset:35%;background:#243c3e;padding:30px;z-index:30}body.compact header{padding:13px}body.compact .intro{top:90px;left:18px}body.compact h1{font-size:32px}body.compact .intro p{display:none}body.compact #title{display:none}body.compact .brand{font-size:17px}body.compact .actions button{font-size:10px;padding:8px}body.compact .tools{top:215px;left:14px;width:78px}body.compact #inspector{right:12px;top:100px;width:165px;padding:12px}body.compact #inspector h2{font-size:16px}body.compact #inspector label{font-size:9px;margin-top:10px}body.compact footer{width:calc(100% - 20px);bottom:10px;padding:11px}body.compact #caption{bottom:220px;width:75%}body.compact #caption p{font-size:18px}body.compact #hint{display:none}body.compact .playback{gap:8px}body.compact .playback #sound{font-size:8px}body.compact .timeline button{min-width:95px}body.compact #inspector{max-height:43vh;overflow:auto}@media(max-width:700px){header{padding:13px}.brand{font-size:17px}#title{display:none}.actions button{font-size:10px;padding:8px}.intro{top:86px;left:18px}h1{font-size:32px}.intro p{display:none}.tools{top:205px;left:14px;width:72px}.tools button{padding:8px;font-size:10px}#inspector{top:90px;right:12px;width:148px;padding:11px;max-height:41vh;overflow:auto}#inspector h2{font-size:16px;margin:10px 0}#inspector label{font-size:9px;margin-top:10px}#inspector input:not([type=file]){padding:6px}.upload{padding:7px}footer{width:calc(100% - 20px);bottom:10px;padding:10px}.playback{gap:7px}.playback #sound{font-size:8px}.playback label{font-size:9px}.timeline button{min-width:90px}.palette>span{display:none}#caption{bottom:211px;width:80%}#caption p{font-size:17px}#hint{display:none}}
@media(max-width:700px){body:not(.editing) #inspector{display:none}#eventTitle{cursor:pointer}#eventTitle:after{content:' ×';float:right}}

.floating{position:fixed;right:28px;top:110px;width:245px;padding:17px;background:#183336f2;border:1px solid #b59d702e;border-radius:14px;backdrop-filter:blur(20px);z-index:5;max-height:calc(100dvh - 330px);overflow:auto}.floating[hidden]{display:none}.panel-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#d4b98d}.panel-head button{border:0;padding:0;font-size:24px}.panel-help{font-size:10px;line-height:1.5;color:#a9b9ab}.floating label{display:block;font-size:10px;color:#bcc9bb;margin:13px 0}.floating input[type=range]{display:block;width:100%;accent-color:#c4a675;margin-top:7px}.floating select{background:#2d4948;color:#e6dec8;padding:6px;border:1px solid #587163;border-radius:6px;float:right}.floating input[type=color]{width:44px;height:24px;float:right;border:0;background:none}.floating h3{font:italic 18px Georgia;color:#cfb58e}#objectPalette,.camera-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}#objectPalette button,.camera-presets button,.row button{font-size:10px;padding:8px}.row{display:flex;gap:4px}.tools{top:340px}.tools #mobile{display:none}body.world-edit #inspector{display:none}body.camera-edit #inspector{display:none}#hint{bottom:215px;left:145px;font-size:8px}.floating .check{display:flex;gap:8px;align-items:center}@media(max-width:700px){.floating{top:82px;right:10px;width:210px;max-height:calc(100dvh - 310px);padding:12px}.tools{top:185px}.tools button{padding:7px}body.world-edit .intro,body.camera-edit .intro{display:none}.intro>span{font-size:7px}.intro h1{font-size:28px}#hint{display:none}}
.terrain-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}.terrain-palette button{padding:8px 4px;font-size:11px}.floating h3 output{font-size:12px;color:#9ba898}#worldEditor{overflow:auto;max-height:calc(100dvh - 230px)}.palette{overflow-x:auto;white-space:nowrap}.palette button{flex-shrink:0}@media(max-width:700px){#worldEditor{max-height:44dvh;bottom:150px;top:auto}.intro{pointer-events:none}}
/* Guided workstation HUD */
:root{--ink:#172d30;--cream:#efe3cd;--accent:#d3ae76}header{height:76px;padding:15px 24px;background:#132b30ed;border-bottom:1px solid #afbcac20;backdrop-filter:blur(20px)}.brand{font-size:21px}.brand span{font-size:7px}.intro{display:none}.workflow{position:fixed;top:92px;left:24px;display:flex;gap:6px;background:#162f32e8;border:1px solid #ffffff20;padding:5px;border-radius:14px}.workflow button{border:0;background:transparent;padding:11px 16px;font-size:12px}.workflow button:hover{background:#455b50}.tools{top:170px;left:24px;width:112px;gap:7px}.tools button{min-height:40px;text-align:left;font-size:11px}.tools #worldEdit,.tools #cameraPanel{display:none}#stepHelp{position:fixed;top:105px;left:510px;right:24px;font-size:12px;color:#b7c7bb;pointer-events:none;line-height:1.5}#hint{display:none}#inspector{z-index:6;top:155px;right:24px;width:270px;max-height:calc(100dvh - 350px);overflow:auto;background:#173236f5;border:1px solid #b9aa7b40;padding:18px}body:not(.editing) #inspector{display:none}#inspector h2{font:22px Georgia;margin:15px 0}#inspector label{font-size:12px}#inspector input:not([type=file]){font-size:13px;padding:10px}#inspector input[type=range]{min-height:28px}#eventTitle:after{display:none}#inspector .panel-head{font-size:10px}#caption{bottom:235px}#caption p{font-size:22px}footer{bottom:18px;width:min(1000px,calc(100% - 48px));padding:14px 18px;border-radius:18px}.story-heading{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;letter-spacing:1.5px;color:#b6c3b1}.story-heading small{margin-left:10px;color:#7f9c8e;letter-spacing:0}.story-heading button{background:#d3ae76;color:#243832;font-size:12px;padding:8px 14px;border:0}.timeline{margin:10px 0 0;min-height:54px}.timeline button{min-width:130px;font:13px Arial;padding:10px 12px}.timeline small{font-size:9px}.timeline button.selected{box-shadow:inset 3px 0 #d3ae76}.palette{position:fixed;bottom:calc(100% + 12px);right:0;width:380px;max-height:60dvh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px;background:#173236fa;border:1px solid #b9aa7b40;border-radius:16px;box-shadow:0 16px 60px #0005;white-space:normal}.palette[hidden]{display:none}.palette>span{display:none}.palette button{font-size:13px;padding:14px 10px;text-align:left;border:1px solid #ffffff15;background:#ffffff06;min-height:44px}.palette .picker-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font:24px Georgia}.palette .picker-heading button{padding:4px 10px;font-size:24px;border:0;min-height:32px}.palette p{grid-column:1/-1;font-size:12px;line-height:1.5;color:#afc0b1;margin:0 0 6px}.palette #demo{grid-column:1/-1;font-size:11px;color:#9cb4a5}#worldEditor,.floating{top:155px;max-height:calc(100dvh - 355px);width:285px;right:24px}#objectPalette button,.camera-presets button,.terrain-palette button,.row button{min-height:38px;font-size:12px}.floating label,.panel-help{font-size:12px}#toast{z-index:20;top:140px;max-width:90%;text-align:center;font-size:12px}.playback #sound{font-size:11px}#status{font-size:12px}
@media(max-width:700px){header{height:64px;padding:10px 12px}.brand{font-size:17px}.brand span{font-size:6px;letter-spacing:1.2px}.actions{gap:5px}.actions button{font-size:11px;min-height:36px}.workflow{top:74px;left:10px;right:10px;justify-content:space-between;padding:3px;gap:0}.workflow button{padding:10px 11px;font-size:11px}#stepHelp{top:124px;left:16px;right:16px;font-size:10px}.tools{top:171px;left:10px;width:82px;gap:5px}.tools button{min-height:36px;padding:8px;font-size:10px}footer{bottom:8px;width:calc(100% - 16px);padding:10px}.playback{gap:7px}.playback #play{width:38px;height:38px}.playback #sound{font-size:9px;padding:6px}.playback label{font-size:9px}.progress #status{font-size:10px}.story-heading{margin-top:10px}.story-heading button{padding:8px 11px}.timeline button{min-width:120px;font-size:12px}.timeline{max-height:65px}.palette{width:100%;max-height:52dvh;bottom:calc(100% + 10px);padding:14px}.palette button{font-size:12px;padding:12px}#inspector,#worldEditor,.floating{top:auto;bottom:190px;right:10px;width:min(300px,calc(100% - 20px));max-height:49dvh;padding:15px}#inspector label{font-size:11px;margin-top:12px}#inspector input:not([type=file]){padding:8px}#caption{bottom:210px;width:80%}#caption p{font-size:17px}body.editing #caption,body.world-edit #caption,body.camera-edit #caption{display:none}#toast{top:145px;width:90%}}