*,:before,:after{box-sizing:border-box}:root{--bg:#11191f;--surface:#1a2533;--border:#2d3d50;--text:#c8d3dc;--muted:#5f7285;--primary:#5b8dee;--primary-h:#4a7de4;--error:#e05252;--success:#69f0ae;--radius:.4rem;--shadow:0 4px 24px #0009}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5;overflow:hidden}h1,h2,h3{color:#fff;margin:0 0 .2rem;font-weight:700}p{margin:0 0 .4rem}small{color:var(--muted);font-size:.8em}article,hgroup{margin:0;padding:0}.container{max-width:860px;margin:0 auto;padding:0 1rem}button{border-radius:var(--radius);cursor:pointer;background:var(--primary);color:#fff;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.35em;padding:.45rem .9rem;font-size:.88rem;font-weight:500;line-height:1.4;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}button:hover{background:var(--primary-h)}button:active{opacity:.8}button.secondary{border-color:var(--border);color:var(--text);background:0 0}button.secondary:hover{background:#ffffff0f}button.outline{border-color:var(--border);color:var(--text);background:0 0}button.outline:hover{background:#ffffff0f}label[role=button]{border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;color:var(--text);background:0 0;justify-content:center;align-items:center;gap:.35em;padding:.45rem .9rem;font-size:.88rem;font-weight:500;transition:background .15s;display:inline-flex}label[role=button]:hover{background:#ffffff0f}input[type=range]{accent-color:var(--primary);background:0 0}main.container{box-sizing:border-box;flex-direction:column;height:100dvh;padding-top:.5rem;padding-bottom:.5rem;display:flex;overflow:hidden}.canvas-section{flex-direction:column;flex:1 1 0;justify-content:flex-start;align-items:stretch;min-height:0;display:flex;overflow:hidden}.canvas-area{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;container-type:size}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.upload-area{border:2.5px dashed var(--border);border-radius:var(--radius);cursor:pointer;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;width:100%;min-height:220px;padding:2rem;transition:border-color .2s,background .2s;display:flex}.upload-area:hover,.upload-area:focus{border-color:var(--primary);background:#5b8dee12;outline:none}.upload-area.dragover{border-color:var(--primary);background:#5b8dee24}.spinner{border:4px solid #5b8dee40;border-top-color:var(--primary);border-radius:50%;width:48px;height:48px;margin:0 auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.canvas-wrapper{aspect-ratio:3/2;border-radius:var(--radius);touch-action:none;cursor:grab;box-shadow:var(--shadow);background:#000;position:relative;overflow:hidden}@container (aspect-ratio>3/2){.canvas-wrapper{width:auto;height:100cqh}}@container (aspect-ratio<=3/2){.canvas-wrapper{width:100cqw;height:auto}}.canvas-wrapper:active{cursor:grabbing}#main-canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.drag-guide{color:#fff;pointer-events:none;white-space:nowrap;background:#000000a6;border-radius:999px;padding:.4rem .9rem;font-size:.82rem;animation:3s 2.5s forwards fadeOut;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.control-row{align-items:center;gap:.75rem;margin-bottom:.4rem;display:flex}.control-row label{min-width:2.8rem;color:var(--muted);margin:0;font-size:.85rem}.control-row input[type=range]{cursor:pointer;flex:1;width:0;min-width:0;margin:0;padding:0}.control-row small{text-align:right;font-variant-numeric:tabular-nums;width:3.5rem;color:var(--text);flex:0 0 3.5rem}.btn-row{flex-wrap:wrap;gap:.5rem;display:flex}.btn-row>*{flex:1;margin:0}.btn-x{color:#fff!important;background:#000!important;border:1px solid #333!important}.btn-x:hover{background:#111!important}.hashtag-row{align-items:center;gap:.5rem;margin-top:.4rem;display:flex}.hashtag-btn{border:1px solid var(--border);color:var(--muted);background:0 0;padding:.3rem .7rem;font-size:.8rem}.hashtag-btn:hover{color:var(--text);background:#ffffff0f}