:root{--bg-color:#050507;--surface-glass:#0d0d11b8;--border-glass:#ffffff14;--border-glass-strong:#ffffff2e;--accent-blue:#64a0ff;--text-primary:#ffffffeb;--text-secondary:#ffffff8a}.demo-container{padding:64px 0 96px}.demo-title{text-align:center;margin-bottom:48px}.demo-title h1{margin:0 0 16px;font-family:OpenDyslexic,Outfit,sans-serif;font-size:clamp(2rem,5vw,3rem)}.demo-title p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.simulator-layout{border:1px solid var(--border-glass-strong);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0d0d1166;grid-template-columns:320px 1fr;gap:32px;padding:24px;display:grid;box-shadow:0 20px 50px #0006}.tool-sidebar{flex-direction:column;gap:16px;display:flex}.tool-card{border:1px solid var(--border-glass);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff05;padding:16px;transition:all .2s}.tool-card:hover{background:#ffffff0d;border-color:#ffffff26}.tool-card.active{border-color:var(--accent-blue);background:#64a0ff14}.tool-header-row{align-items:center;gap:12px;margin-bottom:8px;display:flex}.tool-icon{width:24px;height:24px;color:var(--text-secondary);background:#ffffff0d;border-radius:6px;justify-content:center;align-items:center;font-size:.9rem;display:flex}.tool-card.active .tool-icon{background:var(--accent-blue);color:#fff}.tool-card h3{margin:0;font-size:.95rem;font-weight:700}.tool-card p{color:var(--text-secondary);margin:0;font-size:.8rem;line-height:1.4}.canvas-wrapper{aspect-ratio:16/10;border:1px solid var(--border-glass);border-radius:var(--radius-lg);background-color:#111;background-image:linear-gradient(45deg,#16161a 25%,#0000 25%),linear-gradient(-45deg,#16161a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#16161a 75%),linear-gradient(-45deg,#0000 75%,#16161a 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat;background-size:20px 20px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #000c}.canvas-screen{cursor:default;position:absolute;inset:0}.canvas-screen[data-tool=grab]{cursor:grab}.canvas-screen[data-tool=grab]:active{cursor:grabbing}.canvas-screen[data-tool=text]{cursor:text}.canvas-screen[data-tool=draw]{cursor:crosshair}.canvas-item{-webkit-user-select:none;user-select:none;touch-action:none;transform-origin:0 0;position:absolute}.item-card{border-radius:var(--radius-md);background:#181824;border:1.5px solid #ffffff26;flex-direction:column;justify-content:space-between;width:180px;height:220px;padding:12px;display:flex;box-shadow:0 10px 25px #00000080}.card-img-placeholder{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--accent-blue), #a855f7);width:100%;height:120px;position:relative;overflow:hidden}.card-img-placeholder:after{content:"✦";color:#fff;justify-content:center;align-items:center;font-size:2.2rem;animation:8s linear infinite spin;display:flex;position:absolute;inset:0}.card-text{color:#fff;margin-top:8px;font-size:.75rem;font-weight:700}.card-caption{color:var(--text-secondary);margin-top:4px;font-size:.65rem}.item-text{letter-spacing:-.02em;color:#fff;white-space:nowrap;border:1px dashed #0000;padding:4px 8px;font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:900}.item-text:hover{border-color:#fff3}.item-text input{font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;text-align:left;background:0 0;border:none;outline:none;width:100%;padding:0}.canvas-item.selected{outline:2px solid var(--accent-blue);outline-offset:4px}.draw-canvas{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;inset:0}.layer-controls{gap:12px;margin-top:16px;display:flex}.layer-btn{border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:#ffffff0d;padding:8px 16px;font-size:.8rem;font-weight:700;transition:all .2s}.layer-btn:hover{color:#fff;background:#ffffff1a}.debug-bar{border:1px solid var(--border-glass-strong);font-family:var(--font-mono);color:var(--accent-blue);z-index:10;pointer-events:none;background:#000c;border-radius:6px;padding:6px 12px;font-size:.72rem;position:absolute;bottom:12px;left:12px}@media (width<=900px){.simulator-layout{grid-template-columns:1fr}}