.info-bar[data-v-691ab462]{display:flex;align-items:center;gap:1rem}.users-counter[data-v-691ab462]{display:flex;align-items:center;gap:.5rem;background:rgba(102,126,234,.1);padding:.75rem 1.25rem;border-radius:50px;border:1px solid rgba(102,126,234,.2);transition:all .3s ease;min-width:120px;white-space:nowrap}.users-counter[data-v-691ab462]:hover{background:rgba(102,126,234,.15)}.counter-highlight[data-v-691ab462]{background:rgba(102,126,234,.2)!important;box-shadow:0 4px 12px rgba(102,126,234,.3)}.status-indicator[data-v-691ab462]{width:8px;height:8px;background:#10b981;border-radius:50%;position:relative}.status-indicator[data-v-691ab462]:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:inherit;border-radius:50%;transform:translate(-50%,-50%)}.number-change-enter-active[data-v-691ab462],.number-change-leave-active[data-v-691ab462]{transition:none}.number-change-enter-from[data-v-691ab462],.number-change-leave-to[data-v-691ab462]{opacity:1;transform:none}.counter-text[data-v-691ab462]{font-weight:600;color:#667eea;font-size:1.1rem;display:flex;align-items:center;gap:.25rem;position:relative}.counter-text span[data-v-691ab462]{display:inline-block;min-width:1.5em;text-align:center}.counter-label[data-v-691ab462]{color:#6c757d;font-size:.9rem}@media (max-width:480px){.users-counter[data-v-691ab462]{padding:.5rem 1rem}.counter-text[data-v-691ab462]{font-size:1rem}.counter-label[data-v-691ab462]{font-size:.8rem}}.pixel-canvas[data-v-be17ead2]{width:100%;height:100%;position:relative;overflow:hidden;padding:0}.canvas-grid[data-v-be17ead2]{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;border:2px solid rgba(102,126,234,.2);border-radius:8px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.1);animation:none!important;transition:none!important}.pixel-row[data-v-be17ead2]{display:flex;flex:1;min-height:0}.pixel-cell[data-v-be17ead2]{box-sizing:border-box;flex:1;min-width:0;border:1px solid rgba(0,0,0,.05);cursor:pointer;position:relative;background:#f8fafc}.pixel-cell[data-v-be17ead2]:hover{z-index:10;border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,.3)}.pixel-cell--active[data-v-be17ead2]{border-color:rgba(0,0,0,.1)}.pixel-cell--active[data-v-be17ead2]:hover{filter:brightness(1.1)}.pixel-overlay[data-v-be17ead2]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,hsla(0,0%,100%,.3),transparent 50%,rgba(0,0,0,.1));pointer-events:none;opacity:0}.pixel-cell:hover .pixel-overlay[data-v-be17ead2]{opacity:1}.hover-tooltip[data-v-be17ead2]{position:absolute;bottom:1rem;right:1rem;background:rgba(0,0,0,.9);color:#fff;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;font-family:Courier New,monospace;font-weight:500;pointer-events:none;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.1);min-width:180px}.tooltip-title[data-v-be17ead2]{font-size:.75rem;opacity:.8;margin-bottom:.25rem;color:#a0a0a0}.tooltip-coords[data-v-be17ead2]{font-size:.9rem;font-weight:600;letter-spacing:.5px}@media (max-width:480px){.pixel-cell[data-v-be17ead2]:hover{transform:none}}.canvas-workspace[data-v-ab480e60]{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.controls-panel[data-v-ab480e60]{display:flex;height:100%;gap:1rem}.nav-control[data-v-ab480e60]{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:.25rem}.joystick-pad[data-v-ab480e60]{position:relative;width:100px;height:100px;background:rgba(102,126,234,.06);border:2px solid rgba(102,126,234,.25);border-radius:50%;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;flex-shrink:0;transition:border-color .2s,background .2s}.joystick-pad[data-v-ab480e60]:hover{border-color:rgba(102,126,234,.5);background:rgba(102,126,234,.1)}.joystick-pad[data-v-ab480e60]:active{cursor:grabbing}.joystick-crosshair[data-v-ab480e60]{position:absolute;inset:0;pointer-events:none;border-radius:50%;overflow:hidden}.joystick-crosshair[data-v-ab480e60]:after,.joystick-crosshair[data-v-ab480e60]:before{content:"";position:absolute;background:rgba(102,126,234,.18)}.joystick-crosshair[data-v-ab480e60]:before{left:18%;right:18%;top:50%;height:1px;margin-top:-.5px}.joystick-crosshair[data-v-ab480e60]:after{top:18%;bottom:18%;left:50%;width:1px;margin-left:-.5px}.joystick-ring[data-v-ab480e60]{position:absolute;inset:18px;border-radius:50%;border:1px dashed rgba(102,126,234,.22);pointer-events:none}.joystick-knob[data-v-ab480e60]{position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 3px 10px rgba(102,126,234,.4);pointer-events:none}.joystick-knob--active[data-v-ab480e60]{box-shadow:0 5px 18px rgba(102,126,234,.65)}.control-label[data-v-ab480e60]{font-size:.75rem;font-weight:600;color:#6c757d;text-transform:uppercase;letter-spacing:.6px}.joystick-hint[data-v-ab480e60]{font-size:.68rem;color:hsla(208,7%,46%,.65);letter-spacing:.2px;white-space:nowrap}.main-workspace[data-v-ab480e60]{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}.workspace-header[data-v-ab480e60]{display:flex;justify-content:flex-end;align-items:center}.coordinates[data-v-ab480e60]{font-size:1.1rem;font-weight:600;color:#2c3e50;font-family:Courier New,monospace}.coordinates-label[data-v-ab480e60]{font-size:.75rem;color:#6c757d}.canvas-area[data-v-ab480e60]{flex:1;min-height:0;background:#fff;border-radius:12px;border:2px solid rgba(102,126,234,.1);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.05);padding:4px}.position-chip[data-v-ab480e60]{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:rgba(102,126,234,.05);border:1px solid rgba(102,126,234,.15);border-radius:8px}@media (max-width:768px){.controls-panel[data-v-ab480e60]{flex-direction:column;gap:.5rem}.nav-control[data-v-ab480e60]{flex-direction:row;align-items:center;gap:1rem;padding-top:0}.joystick-pad[data-v-ab480e60]{width:80px;height:80px}}body{background:linear-gradient(135deg,#667eea,#764ba2);color:#2c3e50}:root{--sidebar-width:clamp(64px,8vw,112px);--right-rail-width:clamp(56px,6vw,96px);--rail-gap:clamp(1mm,0.5vw,12px)}#app{height:100vh;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--sidebar-width,112px);padding-right:calc(var(--right-rail-width, 96px) + var(--rail-gap))}.app-header{background:hsla(0,0%,100%,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.app-header.left-rail{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);border-right:1px solid hsla(0,0%,100%,.2);box-shadow:2px 0 20px rgba(0,0,0,.1);padding:.75rem 0}.header-content{height:100%;padding:.5rem 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}.vertical-brand{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;gap:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.brand-title{font-size:1.4rem;font-weight:700;line-height:1}.brand-subtitle{font-size:.9rem;color:#6c757d;font-weight:500}.title-gradient{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:clamp(1mm,.8vw,1.5rem);max-width:100%;margin:0 auto;width:100%;gap:.75rem}.canvas-title{font-size:1.5rem;color:#2d3748;margin:0 0 1rem 0;font-weight:600}.canvas-description{margin-bottom:1.5rem}.canvas-description p{color:#4a5568;font-size:.95rem;line-height:1.6;margin:0}.seo-hero{margin-bottom:0;padding:clamp(.8rem,.9vw,1rem) clamp(1rem,1.35vw,1.35rem);border-radius:16px;background:linear-gradient(135deg,rgba(17,24,39,.24),rgba(79,70,229,.22));border:1px solid hsla(0,0%,100%,.16);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.95fr);gap:1rem;align-items:center;color:hsla(0,0%,100%,.96);box-shadow:0 12px 30px rgba(17,24,39,.08)}.seo-aside,.seo-copy{min-width:0}.seo-copy{display:flex;flex-direction:column;gap:.45rem}.seo-topline{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.seo-aside{display:flex;flex-direction:column;gap:.4rem}.eyebrow{display:inline-block;margin-bottom:0;color:hsla(0,0%,100%,.72);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.page-title{background:linear-gradient(90deg,#ff3b30,#ff9500 16%,#fc0 32%,#34c759 48%,#00c7be 64%,#007aff 80%,#af52de);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:clamp(1.6rem,2vw,2.35rem);line-height:1.1;margin:0;font-weight:800;text-shadow:none}.page-summary{color:hsla(0,0%,100%,.88);font-size:.95rem;line-height:1.55;margin:0;max-width:none}.seo-points{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;justify-content:flex-start}.seo-points li{padding:.4rem .75rem;border-radius:999px;background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.42);color:#1f2937;font-size:.88rem;font-weight:600;box-shadow:0 4px 14px rgba(15,23,42,.08)}.seo-aside .canvas-title{font-size:1.15rem;margin-bottom:0;color:#fff}.seo-aside .canvas-description{margin-bottom:0}.seo-aside .canvas-description,.seo-aside .canvas-description p{color:hsla(0,0%,100%,.86)}.seo-hero--collapsed{padding-top:.55rem;padding-bottom:.55rem}.seo-hero--collapsed .seo-copy{gap:.2rem}.seo-hero--collapsed .page-summary,.seo-hero--collapsed .seo-aside{display:none}.seo-hero--collapsed .page-title{font-size:clamp(1.35rem,1.65vw,1.8rem)}.rail-button{width:100%;display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;border:1px solid rgba(16,185,129,.6);border-radius:10px;background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(5,150,105,.2));color:#0f5132;text-decoration:none;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(16,185,129,.2)}.rail-button--seo-toggle{border:1px solid rgba(99,102,241,.32);background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(79,70,229,.18));color:#1e1b4b;box-shadow:0 2px 10px rgba(79,70,229,.16)}.rail-button--seo-toggle:hover{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(79,70,229,.24))}.rail-button:hover{background:linear-gradient(135deg,rgba(16,185,129,.28),rgba(5,150,105,.28))}.rail-button:focus-visible{outline:2px solid rgba(16,185,129,.5);outline-offset:2px}.right-rail{position:fixed;top:0;right:0;bottom:0;width:var(--right-rail-width);background:hsla(0,0%,100%,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:1px solid hsla(0,0%,100%,.2);box-shadow:-2px 0 20px rgba(0,0,0,.1);z-index:100}.right-rail-content{height:100%;padding:.75rem .25rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.75rem}.right-rail .info-bar{width:100%;display:flex;justify-content:center}.right-rail .users-counter{min-width:0;width:100%;padding:.75rem .5rem;border-radius:12px;flex-direction:column;gap:.25rem;align-items:center}.right-rail .counter-text{font-size:1rem}.right-rail .counter-label{font-size:.8rem}.canvas-container{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:hsla(0,0%,100%,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:clamp(2mm,1vw,2rem);box-shadow:0 8px 32px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.2)}.canvas-toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap;min-width:0}.hidden-file-input{display:none}.upload-button{border:1px solid rgba(59,130,246,.45);background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(37,99,235,.24));color:#0b3a7e;border-radius:10px;padding:.45rem .8rem;font-weight:600;cursor:pointer}.upload-button:disabled{opacity:.7;cursor:not-allowed}.upload-button--secondary{border-color:rgba(148,163,184,.5);background:rgba(241,245,249,.9);color:#334155}.upload-status{flex:1 0 100%;max-width:100%;min-width:0;display:block;color:#334155;font-size:.9rem;line-height:1.2}.upload-status--error{color:#b91c1c}.image-modal{position:fixed;inset:0;background:rgba(2,6,23,.75);display:flex;align-items:center;justify-content:center;z-index:1200;padding:1rem}.image-modal-card{width:min(92vw,1100px);max-height:92vh;background:#fff;border-radius:14px;padding:.9rem;display:flex;flex-direction:column;gap:.8rem}.image-modal-close{align-self:flex-end;border:none;border-radius:8px;background:#e2e8f0;color:#0f172a;font-weight:600;padding:.4rem .75rem;cursor:pointer}.image-modal-content{max-width:100%;max-height:calc(92vh - 90px);-o-object-fit:contain;object-fit:contain}@media (max-width:768px){#app{padding-left:0;padding-right:0}.app-header.left-rail{position:sticky;top:0;left:0;right:0;bottom:auto;width:100%;border-right:none;border-bottom:1px solid hsla(0,0%,100%,.2);box-shadow:0 2px 20px rgba(0,0,0,.1);padding:.75rem 0}.header-content{flex-direction:row;align-items:center;justify-content:space-between;padding:0 1rem;height:auto}.vertical-brand{writing-mode:initial;transform:none;gap:.25rem}.brand-title{font-size:1.25rem}.main-content{padding:clamp(2mm,2.5vw,1rem)}.seo-hero{grid-template-columns:1fr;row-gap:.75rem}.seo-topline{align-items:flex-start}.seo-points{justify-content:flex-start}.canvas-container,.description-card{padding:clamp(2mm,2.5vw,1.5rem)}.right-rail{display:none}}@media (max-width:480px){.title-gradient{font-size:1.75rem}.canvas-container,.description-card{padding:clamp(2mm,3vw,1rem)}}:root{--primary-gradient:linear-gradient(135deg,#667eea,#764ba2);--secondary-gradient:linear-gradient(135deg,#f093fb,#f5576c);--accent-gradient:linear-gradient(135deg,#4facfe,#00f2fe);--success-gradient:linear-gradient(135deg,#43e97b,#38f9d7);--primary-color:#667eea;--secondary-color:#764ba2;--accent-color:#f093fb;--success-color:#43e97b;--warning-color:#ffa726;--error-color:#f5576c;--text-primary:#2c3e50;--text-secondary:#5a6c7d;--text-muted:#6c757d;--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-accent:rgba(102,126,234,.05);--border-light:rgba(102,126,234,.1);--border-medium:rgba(102,126,234,.2);--border-dark:rgba(102,126,234,.3);--shadow-sm:0 2px 8px rgba(0,0,0,.05);--shadow-md:0 4px 20px rgba(0,0,0,.1);--shadow-lg:0 8px 32px rgba(0,0,0,.15);--shadow-xl:0 12px 40px rgba(0,0,0,.2);--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:50px;--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--primary-gradient);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.d-flex{display:flex}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-none{display:none}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.m-0{margin:0}.m-1{margin:.5rem}.m-2{margin:1rem}.m-3{margin:1.5rem}.m-4{margin:2rem}.p-0{padding:0}.p-1{padding:.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}.p-4{padding:2rem}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.transition-fast{transition:all var(--transition-fast)}.transition-normal{transition:all var(--transition-normal)}.transition-slow{transition:all var(--transition-slow)}.glass{background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2)}.glass,.glass-dark{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.glass-dark{background:rgba(0,0,0,.8);border:1px solid hsla(0,0%,100%,.1)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(0,0,0,.05);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-sm);-webkit-transition:background var(--transition-normal);transition:background var(--transition-normal)}::-webkit-scrollbar-thumb:hover{background:var(--border-dark)}::selection{background:var(--primary-color);color:#fff}::-moz-selection{background:var(--primary-color);color:#fff}@media (max-width:768px){:root{font-size:14px}}@media (max-width:480px){:root{font-size:13px}}@media (prefers-color-scheme:dark){:root{--text-primary:#e2e8f0;--text-secondary:#cbd5e0;--text-muted:#a0aec0;--bg-primary:#1a202c;--bg-secondary:#2d3748;--bg-accent:rgba(102,126,234,.1)}}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-color);outline-offset:2px}.gpu-accelerated{transform:translateZ(0);will-change:transform}