#root{min-height:100vh}.studio{max-width:1200px;margin:0 auto;padding:32px 40px 24px}.studio-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:58px}.brand{display:flex;align-items:center;gap:9px;color:#203746;font-size:25px;font-weight:750;text-decoration:none;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:37px;height:37px;margin-right:3px;background:#203746;color:#fff9ed;border-radius:10px;font:italic 32px Georgia,serif}.brand-studio{font-size:15px;font-weight:400;letter-spacing:.2px;color:#6c7a7e}.demo-badge{color:#627579;font-size:12px;border:1px solid #dbe1db;border-radius:24px;padding:9px 14px}.project-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:25px}.eyebrow{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:2px;color:#608d83}h1{font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:clamp(28px,3.1vw,42px);letter-spacing:-1.3px;line-height:1.15;margin:0}.project-description{color:#75817e;font-size:12px;line-height:1.7;margin:0 0 2px}.preview-panel{position:relative;background:#fff;border:1px solid #dce2dc;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px #20374608}.preview-toolbar{height:43px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0eb;color:#7b8784;font-size:10px;letter-spacing:.3px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5ba99b;margin-right:8px}.toolbar-divider{margin:0 10px;color:#d1d9d4}.stage{width:100%;aspect-ratio:16 / 9;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.stage-message{position:absolute;top:44px;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;color:#627579;font-size:14px;background:#ffffffed;text-align:center}.transport{display:flex;align-items:center;gap:24px;padding:21px 0;border-bottom:1px solid #dde3dc}.play-button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:104px;padding:12px 18px;border:0;border-radius:8px;background:#203f3b;color:#fff;font:inherit;font-size:12px;cursor:pointer}.play-button:hover{background:#31564f}.play-button:disabled{opacity:.5;cursor:wait}.play-button span{font-size:11px}.scrubber{display:flex;flex:1}.scrubber input{width:100%;cursor:pointer;accent-color:#3c8474;height:4px}.time-display{min-width:100px;color:#34514c;font-size:12px;font-variant-numeric:tabular-nums;text-align:right}.time-display span{color:#8b9690}.export-button{border:1px solid #cddbd3;border-radius:8px;padding:11px 15px;background:#fff;color:#34514c;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.export-button:disabled{opacity:.5;cursor:default}.export-progress{display:flex;align-items:center;gap:16px;padding-top:12px;color:#34514c;font-size:12px}.export-progress progress{flex:1;accent-color:#3c8474}.export-message{color:#627579;font-size:12px}.studio-footer{display:flex;justify-content:space-between;gap:16px;margin-top:17px;color:#89948e;font-size:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #63a99b;outline-offset:5px}@media(max-width:700px){.studio{padding:22px 18px}.studio-header{margin-bottom:38px}.demo-badge{font-size:10px;padding:7px 9px}.brand-studio,.project-description,.studio-footer span:last-child{display:none}.transport{gap:12px;flex-wrap:wrap}.play-button{min-width:82px;padding:11px 13px}.time-display{min-width:87px;font-size:11px}.preview-toolbar{padding:0 12px}}