.tiles-app{--tiles-bg: #F4F4F0;--tiles-black: #000000;--tiles-yellow: #FDE047;--tiles-lime: #A3E635;--tiles-border: 3px solid #000;--tiles-shadow: 4px 4px 0px #000;--tiles-shadow-lg: 8px 8px 0px #000;position:relative;width:100%;overflow:hidden;background:var(--tiles-bg);font-family:Space Grotesk,sans-serif;-webkit-user-select:none;user-select:none}.tiles-app.tiles-app--fullpage{height:calc(100vh - 104px);min-height:400px}.tiles-app canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;display:block}.tiles-app .tiles-overlay{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;background:var(--tiles-bg);transition:opacity .8s ease}.tiles-app .tiles-overlay.hidden{opacity:0;pointer-events:none}.tiles-app .tiles-overlay:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.tiles-app .tiles-overlay-logo{position:relative;z-index:1;display:flex;align-items:center;gap:14px;opacity:.12}.tiles-app .tiles-overlay-logo span{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.tiles-app .tiles-upload-zone{position:relative;z-index:1;width:320px;height:280px;border:var(--tiles-border);box-shadow:var(--tiles-shadow-lg);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}.tiles-app .tiles-upload-zone:hover{transform:translate(-2px,-2px);box-shadow:10px 10px #000}.tiles-app .tiles-upload-zone.dragover{border-color:var(--tiles-yellow);box-shadow:10px 10px 0 var(--tiles-yellow);transform:translate(-2px,-2px)}.tiles-app .tiles-upload-zone .tiles-upload-icon{font-size:48px;line-height:1}.tiles-app .tiles-upload-zone .tiles-upload-title{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.tiles-app .tiles-upload-zone .tiles-upload-sub{font-size:10px;color:#999;letter-spacing:.05em;text-align:center;line-height:1.6}.tiles-app .tiles-upload-zone .tiles-upload-formats{display:flex;gap:6px;margin-top:4px}.tiles-app .tiles-upload-zone .tiles-upload-formats span{font-size:8px;font-weight:700;letter-spacing:.1em;padding:3px 8px;background:#f5f5f5;border:1px solid #e0e0e0}.tiles-app .tiles-controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 20px;background:#fffffff7;border:var(--tiles-border);box-shadow:var(--tiles-shadow);opacity:0;transition:opacity .4s ease;max-width:calc(100% - 32px)}.tiles-app .tiles-controls .tiles-ctrl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.tiles-app .tiles-controls.visible{opacity:1}.tiles-app .tiles-controls .tiles-ctrl-group{display:flex;flex-direction:column;align-items:center;gap:2px}.tiles-app .tiles-controls .tiles-ctrl-group label{font-size:7px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#888;white-space:nowrap}.tiles-app .tiles-controls input[type=range]{-webkit-appearance:none;appearance:none;width:72px;height:3px;background:#000;outline:none;cursor:pointer}.tiles-app .tiles-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:#000;cursor:pointer}.tiles-app .tiles-controls input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#000;border:none;cursor:pointer}.tiles-app .tiles-controls .tiles-sep{width:1px;height:24px;background:#ddd;margin:0 4px}.tiles-app .tiles-controls button{font-family:Space Grotesk,sans-serif;font-size:9px;font-weight:600;letter-spacing:.08em;padding:6px 12px;background:#fff;border:2px solid #000;box-shadow:3px 3px #000;cursor:pointer;transition:transform .1s,box-shadow .1s;white-space:nowrap}.tiles-app .tiles-controls button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px #000}.tiles-app .tiles-controls button:active{transform:translate(2px,2px);box-shadow:1px 1px #000}.tiles-app .tiles-controls button.active{background:var(--tiles-yellow)}.tiles-app .tiles-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:150;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#000;padding:8px 20px;background:var(--tiles-yellow);border:2px solid #000;box-shadow:3px 3px #000;opacity:0;transition:opacity .4s ease;pointer-events:none;white-space:nowrap}.tiles-app .tiles-hint.visible{opacity:1}.tiles-app .tiles-badge{position:absolute;top:12px;right:14px;z-index:200;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--tiles-lime);background:#000;padding:5px 10px;opacity:0;transition:opacity .4s ease}.tiles-app .tiles-badge.visible{opacity:1}.tiles-app .tiles-audio-viz{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:32px;pointer-events:none;opacity:0;transition:opacity .3s ease}.tiles-app .tiles-audio-viz.visible{opacity:1}.tiles-app .tiles-audio-viz .tiles-viz-bar{width:4px;min-height:1px;background:#222;transition:height .06s ease}@media(max-width:600px){.tiles-app .tiles-upload-zone{width:260px;height:240px}.tiles-app .tiles-controls{bottom:8px;padding:6px 10px;gap:4px}.tiles-app .tiles-controls input[type=range]{width:40px}.tiles-app .tiles-controls button{font-size:8px;padding:5px 8px}}