:root{--cyan:#17d7df;--pink:#f23879;--bg:#080c13;--panel:#101722;--line:#293548;color-scheme:dark}*{box-sizing:border-box;touch-action:manipulation}body{margin:0;background:var(--bg);color:#f7fbff;font:14px Inter,system-ui,sans-serif;overflow:hidden}button,input,select{font:inherit}button{color:#fff;background:#151e2b;border:1px solid #334055;border-radius:9px;padding:10px 13px;font-weight:800;cursor:pointer}button:active{transform:scale(.97)}button.active,button.selected{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.primary{background:var(--cyan);color:#041016;border:0}header{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.brand{display:flex;align-items:center;gap:10px}.brand>b{border:2px solid var(--cyan);padding:8px;border-radius:10px;color:var(--cyan)}.brand span{font-weight:900}.brand small{display:block;color:#8f9aae;font-size:10px}.modes,.actions{display:flex;gap:6px}.modes{background:#05080e;padding:4px;border-radius:12px}.modes button{border:0;background:transparent}.modes button.active{background:#243247;color:#fff}main{height:calc(100dvh - 66px);display:grid;grid-template-columns:350px minmax(300px,1fr)}#panel,#props{background:var(--panel);border-right:1px solid var(--line);min-height:0;display:flex;flex-direction:column}#steps{display:grid;grid-template-columns:repeat(5,1fr);padding:12px 8px;border-bottom:1px solid var(--line)}#steps button{border:0;background:none;color:#718096;padding:4px;font-size:10px}#steps button b{display:grid;place-items:center;margin:auto;width:26px;height:26px;border-radius:50%;background:#1b2635}#steps button.active{color:#fff;box-shadow:none}#steps button.active b{background:var(--cyan);color:#07111f}#content,#props{padding:20px;overflow:auto}h1{font-size:24px;margin:6px 0}h2{font-size:17px}.muted{color:#8f9aae}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.stack{display:grid;gap:8px}.upload{text-align:left;border-style:dashed}label{display:grid;gap:6px;margin:12px 0;color:#aab5c6;font-weight:700}input,select{width:100%;padding:10px;background:#0a1019;border:1px solid #344156;border-radius:8px}.colors{display:flex;gap:7px}.colors input{width:40px;height:40px;padding:2px;border-radius:50%}footer{margin-top:auto;padding:12px;display:flex;justify-content:space-between;border-top:1px solid var(--line)}#workspace{position:relative;display:grid;place-items:center;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:28px 28px;overflow:hidden;padding:50px 20px 28px}.canvasbar{position:absolute;right:12px;top:10px;display:flex;gap:5px;background:#080c13dd;padding:5px;border-radius:10px;z-index:3}#stage{height:90%;width:90%;display:grid;place-items:center;overflow:auto}#card{height:100%;max-width:100%;filter:drop-shadow(0 25px 35px #000b);user-select:none;touch-action:none}#workspace>p{position:absolute;bottom:5px;color:#708096;font-size:10px}.obj{cursor:move}.obj.selected{filter:drop-shadow(0 0 8px #17d7df);outline:4px solid #17d7df}#props{position:absolute;right:0;top:66px;width:270px;height:calc(100dvh - 66px);border-left:1px solid var(--line);border-right:0;z-index:5}.hidden{display:none!important}.layer{display:flex;justify-content:space-between;align-items:center;width:100%;margin:4px 0}.shapeGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.shapeGrid button{min-height:58px}.eyebrow{color:var(--cyan);letter-spacing:.15em;font-size:10px;font-weight:900}.summary{background:#0c1d27;border:1px solid #285061;padding:12px;border-radius:10px;color:var(--cyan)}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#182537;padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:20}#toast.show{opacity:1}@media(max-width:720px){body{overflow:auto}header{height:58px}.brand span,.actions button:not(.primary){display:none}.modes button{padding:8px;font-size:11px}main{height:auto;min-height:calc(100dvh - 58px);display:flex;flex-direction:column}#workspace{order:-1;height:58vh;padding:45px 8px 20px}#panel{min-height:42vh;border:0}#props{top:58px;height:calc(100dvh - 58px);width:min(84vw,320px)}.actions .primary{padding:8px}#stage{width:100%;height:100%}}