html,body{--surface-light: #faf9f6;margin:0;padding:0;width:100%;height:100%;font-family:Arial,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--surface-light)}#container{display:flex;flex-direction:row;width:100%;height:100vh;overflow:hidden}#sidebar{flex:0 0 250px;background-color:var(--surface-light);overflow-y:auto;box-shadow:2px 0 10px #0000001a;z-index:10;border-right:1px solid #eaeaea;display:flex;flex-direction:column;height:100%;scrollbar-width:none;-ms-overflow-style:none}#sidebar::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}.sidebar-header{padding:20px 16px;border-bottom:1px solid #eaeaea;background:linear-gradient(to right,#6fc524,#5ca9fb);color:#000}.sidebar-header h1{margin:0;font-size:22px;font-weight:600}.sidebar-content{flex:1;overflow-y:auto;padding:0;scrollbar-width:none;-ms-overflow-style:none}.sidebar-content::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}#viewer{flex:1 1 auto;position:relative;min-width:0;background-color:var(--surface-light)}.gene-expression-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;padding:10px;box-sizing:border-box}.gene-expression-grid.hidden{display:none}.gene-expression-view{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--surface-light);border:1px solid rgba(210,216,224,.9)}.gene-expression-view-canvas{width:100%;height:100%}.gene-expression-view-canvas canvas{display:block;width:100%;height:100%}.main-view-title{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:20;max-width:calc(100% - 120px);color:#23384c;font-size:18px;font-weight:700;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(255,255,255,.75);pointer-events:none}.gene-expression-view-title{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;max-width:calc(100% - 96px);color:#23384c;font-size:16px;font-weight:700;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(255,255,255,.75);pointer-events:none}.gene-expression-colorbar{position:absolute;top:12px;left:12px;z-index:20;width:46px;padding:0;pointer-events:none}.gene-expression-colorbar.hidden{display:none}.gene-expression-colorbar-gene{margin-bottom:6px;color:#304254;font-size:11px;font-weight:700;line-height:1.1;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gene-expression-colorbar-scale{display:flex;flex-direction:column;align-items:center;gap:6px}.gene-expression-colorbar-bar{width:14px;height:124px;border-radius:0;border:none;background:linear-gradient(to top,#fff5f0,#fee0d2,#fcbba1,#fc9272,#fb6a4a,#de2d26,#a50f15)}.gene-expression-colorbar-min,.gene-expression-colorbar-max{color:#304254;font-size:11px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}#app{width:100%;height:100%}#gui-container{--tp-base-background-color: hsla(40, 33%, 97%, .92);--tp-base-shadow-color: hsla(0, 0%, 0%, .2);--tp-button-background-color: hsla(0, 0%, 90%, 1);--tp-button-background-color-active: hsla(0, 0%, 80%, 1);--tp-button-foreground-color: hsla(0, 0%, 0%, .9);scrollbar-width:none;-ms-overflow-style:none}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#4a90e2;font-size:16px;display:flex;flex-direction:column;align-items:center}.loading-indicator:after{content:"";width:30px;height:30px;border:3px solid #f3f3f3;border-top:3px solid #4a90e2;border-radius:50%;animation:spin 1s linear infinite;margin-top:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cell-types-header{padding:8px 16px;margin:15px 0 10px;border-top:1px solid #eaeaea;background:var(--surface-light)}.cell-types-header h3{margin:0;font-size:14px;font-weight:600;color:#7e7b7b}@media screen and (max-width: 768px){#container{flex-direction:column}#sidebar{flex:0 0 auto;width:100%;max-height:40vh;border-right:none;border-bottom:1px solid #eaeaea}#viewer{flex:1 1 auto;height:60vh}.gene-expression-grid{gap:8px;padding:8px}.gene-expression-colorbar{top:10px;left:10px;width:42px}.gene-expression-view-title{top:8px;max-width:calc(100% - 84px);font-size:14px}.gene-expression-colorbar-bar{height:100px}}#sample-gallery{position:fixed;bottom:0;left:0;right:0;background-color:#faf9f6f5;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px #0000001a;z-index:1000;padding:10px 0;max-height:0;overflow:hidden;transition:max-height .3s ease-in-out}#sample-gallery.visible{max-height:200px}.sample-gallery-header{display:flex;justify-content:space-between;align-items:center;padding:0 20px 10px;border-bottom:1px solid #eee}.sample-gallery-header h2{font-size:16px;font-weight:500;margin:0}.sample-gallery-container{display:flex;overflow-x:auto;padding:15px 20px;gap:15px;-webkit-overflow-scrolling:touch}.sample-gallery-container::-webkit-scrollbar{display:none}.sample-card{display:flex;flex-direction:column;align-items:center;min-width:140px;position:relative;border-radius:6px;background:#fff;box-shadow:0 2px 4px #0000001a;padding:8px;cursor:pointer;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background-color .24s ease;border:2px solid transparent}.sample-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px #00000026}.sample-card.active{border-color:#4285f4;background-color:#4285f40d;box-shadow:0 8px 18px #4285f433;transform:translateY(-4px) scale(1.02)}.sample-card:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:10px;border:1px solid rgba(66,133,244,.35);opacity:0;transform:scale(.96);transition:opacity .24s ease,transform .24s ease;pointer-events:none}.sample-card.active:after{opacity:1;transform:scale(1)}.sample-image{width:120px;height:80px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sample-image img{width:100%;height:100%;object-fit:cover}.sample-name{font-size:13px;color:#333;margin-top:8px;text-align:center;font-weight:500}.gallery-toggle{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:140px;height:36px;border-radius:18px;background-color:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0003;z-index:1001;transition:background-color .2s;font-weight:500;font-size:14px}.cell-types-section .tp-lblv_l{width:160px;min-width:160px;font-family:Arial,sans-serif;font-size:14px}.cell-types-section .tp-ckbv_w{margin-left:10px!important}.cell-types-section .unselected-mode-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 2px}.cell-types-section .unselected-mode-toggle-label{color:#4a5563;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}.cell-types-section .unselected-mode-toggle-button{border:none;background:transparent;box-shadow:none;outline:none;padding:0;color:#1f466d;font:inherit;font-size:12px;font-weight:600;letter-spacing:.1px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:color .15s ease,opacity .15s ease}.cell-types-section .unselected-mode-toggle-button:before{content:"";width:14px;height:14px;display:inline-block;flex:0 0 14px;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><path d='M1 1l22 22'/></svg>") center / contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><path d='M1 1l22 22'/></svg>") center / contain no-repeat;background-color:currentColor}.cell-types-section .unselected-mode-toggle-button:hover{opacity:.8}.cell-types-section .unselected-mode-toggle-button.is-visible{color:#5b6573}.cell-types-section .unselected-mode-toggle-button.is-visible:before{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat}body.dark-mode .cell-types-section .unselected-mode-toggle-button{color:#dbe7f5}body.dark-mode .cell-types-section .unselected-mode-toggle-label{color:#c3ccd8}body.dark-mode .cell-types-section .unselected-mode-toggle-button:hover{background:transparent}body.dark-mode .cell-types-section .unselected-mode-toggle-button.is-visible{color:#fff}body.dark-mode .gene-expression-colorbar-min,body.dark-mode .gene-expression-colorbar-max{color:#e3edf7}body.dark-mode .gene-expression-colorbar-bar{border:none}body.dark-mode .gene-expression-view{background:#000;border-color:#5e6775e6}body.dark-mode .main-view-title,body.dark-mode .gene-expression-view-title{color:#eef5fb;text-shadow:0 1px 2px rgba(0,0,0,.7)}.gene-expression-section .tp-lstv{width:112px;min-width:112px;max-width:112px;font-family:Arial,sans-serif;font-size:12px}.gene-expression-section .tp-lblv_l{width:74px!important;min-width:74px!important;font-family:Arial,sans-serif;font-size:12px;white-space:nowrap}.gene-expression-section .tp-lblv_v{min-width:0!important}.gene-expression-section .is-disabled{opacity:.45;pointer-events:none}.gene-window-remove-button .tp-btnv_b{color:#8b2d2d!important}#colormap-preview{height:20px;width:100%;margin:8px 0 15px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.tp-rotv .tp-cntv #colormap-preview{margin-left:8px;margin-right:8px;width:calc(100% - 16px)}.tp-rotv{--tp-base-shadow-color: transparent !important;--tp-base-background-color: hsla(0, 0%, 100%, .95);--tp-base-foreground-color: hsla(0, 0%, 0%, .8);box-shadow:none!important;border:0px solid #e0e0e0;border-radius:0!important;padding:4px!important}.tp-rotv .tp-fldv{--tp-container-background-color: hsla(0, 0%, 100%, .98);border:1px dashed #f0f0f0;border-radius:0!important;box-shadow:none!important;padding:4px!important}.tp-rotv .tp-btnv{box-shadow:none!important;border:1px solid #e0e0e0;border-radius:8px!important}.tp-rotv .tp-txtv,.tp-rotv .tp-sldv,.tp-rotv .tp-coltxtv{box-shadow:none!important}.gene-expression-section .tp-sldv{max-width:80px}#gui-container::-webkit-scrollbar,#gui-container .tp-rotv::-webkit-scrollbar,#gui-container .tp-fldv_c::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}#container{height:calc(100vh - var(--nav-height, 68px))}@media screen and (max-width: 768px){#container{height:calc(100vh - var(--nav-mobile-height, 132px))}}body.dark-mode #sidebar{background-color:#1e1e1e;border-right-color:#333}body.dark-mode #viewer{background-color:#000}body.dark-mode #gui-container{--tp-base-background-color: hsla(0, 0%, 10%, 1);--tp-base-shadow-color: hsla(0, 0%, 0%, .2);--tp-button-background-color: hsla(0, 0%, 25%, 1);--tp-button-background-color-active: hsla(0, 0%, 30%, 1);--tp-button-foreground-color: hsla(0, 0%, 95%, .9);--tp-input-background-color: hsla(0, 0%, 25%, 1);--tp-input-foreground-color: hsla(0, 0%, 95%, .9);--tp-label-foreground-color: hsla(0, 0%, 70%, .9);--tp-monitor-background-color: hsla(0, 0%, 25%, 1);--tp-monitor-foreground-color: hsla(0, 0%, 95%, .9)}body.dark-mode .sample-card{background:#2a2a2a;border:2px solid #444}body.dark-mode .sample-card .sample-name{color:#f1f1f1}body.dark-mode .sample-card.active{border-color:#bb86fc;background-color:#bb86fc1a;box-shadow:0 8px 18px #bb86fc33}body.dark-mode .sample-card:after{border-color:#bb86fc59}body.dark-mode #sample-gallery{background-color:#1e1e1ef2;border-top:1px solid #333}body.dark-mode .sample-gallery-header{border-bottom:1px solid #444}body.dark-mode .sample-gallery-header h2{color:#fff}.gallery-toggle{position:fixed;bottom:10px;left:50%;transform:translate(-50%);width:140px;height:36px;border-radius:18px;background-color:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0003;z-index:1001;transition:background-color .2s;font-weight:500;font-size:14px}.gallery-toggle:hover{background-color:#3367d6}.gallery-toggle i{margin-right:5px;font-size:16px;transition:transform .3s ease}.gallery-toggle.open i{transform:rotate(180deg)}body.dark-mode .tp-rotv{--tp-base-background-color: hsla(0, 0%, 10%, 1);--tp-base-foreground-color: hsla(0, 0%, 95%, .8)}
