*{box-sizing:border-box}html{background:#0c1020}body{margin:0;color:#f4f5ff;background:radial-gradient(ellipse at 50% -10%,#27234b 0%,#11172b 48%,#0c1020 100%);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}a{color:#b5a9ff}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,5vw,4.6rem);line-height:1.06;letter-spacing:-.055em}h2{font-size:1.5rem;letter-spacing:-.03em}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1240px;margin:auto;padding:24px}.brand{font-size:1.75rem;letter-spacing:-.09em;font-weight:950;color:white;text-decoration:none}.brand-dot{color:#a47aff}nav{display:flex;gap:22px;flex-wrap:wrap}nav a{text-decoration:none;color:#c5c7dc;font-size:.9rem}nav a:hover{color:white}main{width:min(1160px,calc(100% - 32px));margin:auto;min-height:70vh}.hero{padding:90px 24px 70px;text-align:center}.hero h1{max-width:730px;margin:16px auto 20px}.hero em{color:#ad8aff;font-style:normal}.hero p{max-width:590px;margin:0 auto 30px;color:#b7b9d1;font-size:1.1rem}.eyebrow{font-size:.75rem;letter-spacing:.2em;color:#ad96fb;font-weight:800}.btn,button{display:inline-block;border:0;cursor:pointer;border-radius:12px;padding:12px 20px;background:#a07aff;color:#111125;font-weight:800;text-decoration:none;font-size:.95rem}.btn:hover,button:hover{background:#bca0ff}.btn.secondary{background:#2a2d49;color:white}.panel{background:rgba(23,28,50,.85);border:1px solid #333757;border-radius:24px;padding:clamp(22px,4vw,36px);margin:0 auto 30px;box-shadow:0 24px 80px #0002}.panel.narrow{max-width:680px;margin-top:40px}.muted{color:#aaafcb}.split{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.pill{border:1px solid #4c4b71;background:#292849;padding:7px 13px;border-radius:30px;font-size:.85rem}.canvas-scroll{overflow:auto;border-radius:14px;border:1px solid #4b4868}.canvas{position:relative;width:100%;min-width:620px;aspect-ratio:var(--cols)/var(--rows);background-color:#131831;background-image:linear-gradient(to right,#ffffff13 1px,transparent 1px),linear-gradient(to bottom,#ffffff13 1px,transparent 1px);background-size:calc(100% / var(--cols)) calc(100% / var(--rows));}.tile{position:absolute;display:flex;justify-content:center;align-items:center;overflow:hidden;border:1px solid #ffffff55;text-decoration:none;color:white;font-weight:750;text-align:center;font-size:clamp(9px,1.1vw,16px);text-shadow:0 1px 5px #0009}.tile:hover{outline:3px solid white;z-index:2}.tile img{width:100%;height:100%;object-fit:cover}.tile span{padding:4px;overflow:hidden}label{display:block;font-weight:700;margin:0 0 17px}input,textarea{display:block;width:100%;margin-top:7px;padding:13px 14px;color:white;background:#0d1226;border:1px solid #505373;border-radius:10px;font:inherit}input:focus,textarea:focus{outline:2px solid #a07aff}input[type=color]{width:90px;height:53px;padding:5px}input[type=checkbox]{width:auto;display:inline-block}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.error,.success,.notice{padding:12px 16px;border-radius:10px;background:#472935;color:#ffcbda}.success{background:#1b473e;color:#b4ffe0}.notice{background:#323354;color:white}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:15px 12px;text-align:left;border-bottom:1px solid #393d57;vertical-align:top}td small{display:block;color:#aeb1ca;font-size:.8rem}.actions{display:flex;flex-wrap:wrap;gap:6px}.actions form{margin:0}.small{font-size:.75rem;padding:7px 10px;border-radius:7px}.check{display:flex;gap:12px;align-items:center}footer{text-align:center;color:#8b92b1;padding:50px 10px;font-size:.85rem}@media(max-width:600px){.site-header{align-items:flex-start;flex-direction:column}nav{gap:15px}.hero{padding:65px 5px}.panel{border-radius:15px}.field-row{grid-template-columns:1fr}}

/* PIXUH v2: every canvas corner and cell is square */
.canvas-scroll,.canvas,.tile{border-radius:0!important;clip-path:none!important}
.canvas-scroll{overflow:auto}
.canvas{overflow:visible}
.image-editor{padding:18px;margin:18px 0;border:1px solid #454967;border-radius:12px}
.image-editor label{margin-bottom:8px}
.image-editor .muted{font-size:.9rem}
#editor-controls[hidden]{display:none}
#image-preview{display:block;max-width:100%;width:auto;height:auto;max-height:520px;object-fit:contain;border:1px solid #595876;margin:15px auto;background:#121830}
input[type=range]{padding:0;accent-color:#a07aff}
.price-readout{padding:14px 18px;margin:0 0 24px;background:#2a2548;border:1px solid #5e4f9a;font-size:1.1rem}
button.secondary{background:#30354f;color:#fff}
button:disabled{opacity:.65;cursor:wait}

/* v3: one million fine-grained squares, no visible scrollbar tracks */
html,body,.pixel-viewport,.canvas-scroll,.table-wrap{scrollbar-width:none!important;-ms-overflow-style:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,.pixel-viewport::-webkit-scrollbar,.canvas-scroll::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.pixel-viewport{width:100%;height:clamp(340px,65vh,680px);overflow:auto;overscroll-behavior:contain;border:1px solid #4b4868;border-radius:0;touch-action:pan-x pan-y;background:#10162c}
#pixel-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:0;cursor:crosshair}
.pixel-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.pixel-toolbar button{padding:7px 13px;border-radius:5px}
.page-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.page-nav a{padding:7px 14px;border:1px solid #454767;text-decoration:none;border-radius:0}.page-nav .current{background:#a07aff;color:#111125}
#editor-controls[hidden]{display:none}

/* v3: one million fine-grained squares, no visible scrollbar tracks */
html,body,.pixel-viewport,.canvas-scroll,.table-wrap{scrollbar-width:none!important;-ms-overflow-style:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,.pixel-viewport::-webkit-scrollbar,.canvas-scroll::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.pixel-viewport{width:100%;height:clamp(340px,65vh,680px);overflow:auto;overscroll-behavior:contain;border:1px solid #4b4868;border-radius:0;touch-action:pan-x pan-y;background:#10162c}
#pixel-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:0;cursor:crosshair}
.pixel-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.pixel-toolbar button{padding:7px 13px;border-radius:5px}
.page-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.page-nav a{padding:7px 14px;border:1px solid #454767;text-decoration:none;border-radius:0}.page-nav .current{background:#a07aff;color:#111125}
#editor-controls[hidden]{display:none}

#pixel-canvas{background-color:#121831;background-image:linear-gradient(to right,#4a4d6980 1px,transparent 1px),linear-gradient(to bottom,#4a4d6980 1px,transparent 1px);background-position:0 0}

/* PIXUH v4: exact, always-visible lines and sharp selection squares */
.pixel-canvas-wrap{position:relative;flex:none;isolation:isolate}
.pixel-canvas-wrap #pixel-canvas{position:absolute;inset:0;background-image:none!important;background-color:#11172d;image-rendering:pixelated;image-rendering:crisp-edges}
.pixel-grid-overlay,.pixel-selection-overlay{position:absolute;inset:0;pointer-events:none}
.pixel-grid-overlay{z-index:2;background-image:linear-gradient(to right,rgba(185,177,231,.46) 1px,transparent 1px),linear-gradient(to bottom,rgba(185,177,231,.46) 1px,transparent 1px);background-position:0 0}
.pixel-selection-overlay{z-index:3}
.pixel-selected{position:absolute;display:block;background:#a775ff;outline:1px solid #e1c6ff;outline-offset:-1px;box-shadow:none;filter:none}
input[hidden],#image-upload[hidden],#editor-controls[hidden]{display:none!important}
.pixel-toolbar #zoom-value{min-width:46px;text-align:center;white-space:nowrap}
.pixel-viewport{border-radius:0!important}

/* PIXUH v5: entire million-pixel page displayed, no scrollable grid */
.pixel-viewport{height:auto!important;aspect-ratio:1/1!important;overflow:hidden!important;touch-action:pan-y!important;border-radius:0!important;position:relative}
#pixel-canvas{display:block!important;position:static!important;width:100%!important;height:100%!important;image-rendering:pixelated!important;background:#11172d!important;cursor:crosshair}
.pixel-magnifier-shell{width:min(100%,480px);margin:20px auto;display:flex;align-items:center;flex-direction:column;gap:10px}
#pixel-magnifier{width:min(320px,100%);aspect-ratio:1;image-rendering:pixelated;border:1px solid #7565b5;border-radius:0;cursor:crosshair;touch-action:manipulation}
.pixel-navigation{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.pixel-navigation button{padding:7px 12px;border-radius:4px}
#grid-progress{font-size:.8rem}

/* PIXUH v6: full fixed overview + visible adjacent selector; never scroll the canvas */
.pixel-workspace{display:grid;grid-template-columns:minmax(0,1fr) 348px;align-items:start;gap:18px;margin:18px 0}
.pixel-workspace .pixel-viewport{width:100%!important;height:auto!important;aspect-ratio:1/1!important;overflow:hidden!important;position:relative;border:1px solid #655785;border-radius:0!important}
.pixel-workspace #pixel-canvas{display:block!important;width:100%!important;height:100%!important;image-rendering:pixelated!important}
.pixel-workspace .pixel-magnifier-shell{width:100%;min-width:0;margin:0!important;padding:12px;border:1px solid #655785;border-radius:0;align-items:center;gap:8px}
.pixel-workspace #pixel-magnifier{display:block;width:min(320px,100%);height:auto;aspect-ratio:1;image-rendering:pixelated!important;cursor:crosshair}
.pixel-tip{font-size:12px;color:#b5b6d0;margin:6px 0 18px}
.pixel-workspace .pixel-navigation{margin-top:4px}
#zoom-value{min-width:45px;text-align:center}
@media(max-width:850px){.pixel-workspace{grid-template-columns:1fr}.pixel-workspace .pixel-magnifier-shell{width:100%}}