:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.comments-title{margin-bottom:1rem}.app-container{width:100vw;height:100vh;display:flex;flex-direction:column;padding:0;box-sizing:border-box}.header{margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.file-controls,.comment-controls{display:flex;gap:1rem;align-items:center}.filename{font-weight:700}.share-info{color:#4a9eff;font-family:monospace;background:#1a1a1a;padding:.5rem;border-radius:4px;border:1px solid #333}.main-content{display:flex;gap:1rem;flex:1;min-height:0;margin-bottom:3rem}.hex-view-container{flex:1;height:100%;min-height:0;position:relative}.hex-view{position:absolute!important;left:0;top:0;right:0;bottom:0;font-family:monospace;font-size:12px;background:#1a1a1a;contain:strict;-webkit-user-select:none;user-select:none}.hex-row{display:flex;padding:.125rem .25rem;gap:.75rem;border-left:2px solid transparent;transition:all .2s;height:18px;line-height:18px;min-width:min-content}.hex-row:hover{background-color:#2a2a2a}.hex-row.has-comment{background-color:#2a2a2a55;border-left-color:#4a9eff88}.hex-row.has-comment:hover{background-color:#2a2a2a88}.offset{color:#888;min-width:8ch;flex-shrink:0}.hex-values{display:flex;gap:0;flex-shrink:0}.hex{color:#4a9eff;cursor:pointer;min-width:2ch;padding:0 .125rem;-webkit-user-select:none;user-select:none;transition:background-color .1s;position:relative;flex-shrink:0}.hex.selected{background-color:#4a9eff55;transition:none}.hex.selected:before{content:"";position:absolute;top:-1px;bottom:-1px;left:0;right:0;pointer-events:none}.hex.highlighted{background-color:#ff9e4a88;color:#fff;font-weight:700}.hex.pad{color:#444;cursor:default}.binary-values{display:flex;gap:0;margin-left:.75rem;padding-left:.75rem;border-left:1px solid #444;flex-shrink:0}.binary{color:gold;cursor:pointer;min-width:8ch;padding:0 .125rem;-webkit-user-select:none;user-select:none;transition:background-color .1s;position:relative;letter-spacing:0;font-size:11px;flex-shrink:0}.binary.selected{background-color:#ffd70055;transition:none}.binary.selected:before{content:"";position:absolute;top:-1px;bottom:-1px;left:0;right:0;pointer-events:none}.binary.highlighted{background-color:#ff9e4a88;color:#fff;font-weight:700}.binary.pad{color:#444;cursor:default}.ascii-values{margin-left:.75rem;padding-left:.75rem;border-left:1px solid #444;display:flex;gap:0;flex-shrink:0}.ascii{color:#6f6;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s;position:relative;flex-shrink:0}.ascii.selected{background-color:#6f6f6f55;transition:none}.ascii.selected:before{content:"";position:absolute;top:-1px;bottom:-1px;left:0;right:0;pointer-events:none}.ascii.highlighted{background-color:#ff9e4a88;color:#fff;font-weight:700}.comments-sidebar{width:300px;background:#1a1a1a;padding:1rem;overflow-y:auto;font-size:12px}.comment{margin-bottom:1rem;padding:.5rem;background:#2a2a2a;border-radius:4px;cursor:pointer;transition:all .2s;border-left:2px solid transparent}.comment:hover{background:#333}.comment.active{background:#ff9e4a22;border-left-color:#ff9e4a;background:#2a2a2a;border-left:2px solid #ff9e4a;box-shadow:0 2px 8px #0003}.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.comment-offset{color:#888;font-family:monospace;cursor:pointer;flex:1}.delete-comment{background:none;border:none;color:#666;font-size:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;transition:all .2s;padding:0;margin-left:.5rem}.delete-comment:hover{background:#ff4a4a22;color:#ff4a4a}.comment-text{color:#fff;cursor:pointer}.comment-text h1,.comment-text h2,.comment-text h3,.comment-text h4,.comment-text h5,.comment-text h6{margin:.5rem 0;color:#fff}.comment-text p{margin:.5rem 0}.comment-text code{background:#1a1a1a;padding:.1rem .3rem;border-radius:3px;font-family:monospace;font-size:.9em}.comment-text pre{background:#1a1a1a;padding:.5rem;border-radius:4px;overflow-x:auto;margin:.5rem 0}.comment-text pre code{background:none;padding:0}.comment-text a{color:#4a9eff;text-decoration:none}.comment-text a:hover{text-decoration:underline}.comment-text ul,.comment-text ol{margin:.5rem 0;padding-left:1.5rem}.comment-text blockquote{border-left:2px solid #444;margin:.5rem 0;padding-left:.5rem;color:#888}.comment-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.comment-form-tabs{display:flex;gap:.5rem}.comment-form-tabs button{background:none;border:none;color:#888;padding:.2rem .5rem;cursor:pointer;border-radius:4px;font-size:12px}.comment-form-tabs button:hover{background:#2a2a2a}.comment-form-tabs button.active{color:#4a9eff;background:#2a2a2a}.comment-preview{background:#2a2a2a;padding:.5rem;border-radius:4px;min-height:60px;max-height:200px;overflow-y:auto;margin-bottom:.75rem}.file-input{padding:.5rem;background:#1a1a1a;border-radius:4px;border:1px solid #333;color:#fff;font-size:12px}button{padding:.5rem 1rem;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#fff;cursor:pointer;transition:all .2s;font-size:12px}button:hover:not(:disabled){background:#333;border-color:#555}button:disabled{opacity:.5;cursor:not-allowed}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}.comment-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:transparent}.comment-form{background:#1a1a1a;padding:1rem;border-radius:8px;width:300px;box-shadow:0 4px 20px #0000004d;border:1px solid #333;animation:comment-form-appear .2s ease-out}.comment-form-arrow{position:absolute;width:12px;height:12px;background:#1a1a1a;border:1px solid #333;border-right:none;border-bottom:none;transform:rotate(-45deg);left:-7px;top:20px}@keyframes comment-form-appear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.comment-form h3{margin:0 0 .75rem;color:#fff;font-size:14px}.comment-range{color:#888;font-family:monospace;margin-bottom:.75rem;font-size:12px}.comment-form textarea{width:100%;padding:.5rem;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#fff;font-family:inherit;font-size:12px;resize:vertical;margin-bottom:.75rem;box-sizing:border-box;min-height:60px}.comment-form textarea:focus{outline:none;border-color:#4a9eff;background:#2f2f2f}.comment-actions{display:flex;gap:.25rem}.comment-actions button{padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s}.comment-actions button[type=button]{background:transparent;border:1px solid #444;color:#fff}.comment-actions button[type=submit]{background:#4a9eff;border:1px solid #4a9eff;color:#fff}.comment-actions button[type=button]:hover{background:#2a2a2a;border-color:#555}.comment-actions button[type=submit]:hover{background:#3a8eef}.comment-actions button:disabled{opacity:.5;cursor:not-allowed}.selection-info-bar{position:fixed;bottom:0;left:0;right:0;background:#1a1a1a;border-top:1px solid #333;padding:.75rem;display:flex;justify-content:space-between;align-items:center;font-size:12px;z-index:100;box-shadow:0 -2px 10px #0003}.selection-controls{display:flex;gap:1.5rem;align-items:center}.selection-controls label{display:flex;align-items:center;gap:.5rem;color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none}.selection-controls input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border:2px solid #444;border-radius:50%;margin:0;cursor:pointer;position:relative}.selection-controls input[type=radio]:checked{border-color:#4a9eff}.selection-controls input[type=radio]:checked:after{content:"";position:absolute;width:8px;height:8px;background:#4a9eff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.selection-controls input[type=radio]:hover{border-color:#555}.selection-controls input[type=radio]:checked:hover{border-color:#3a8eef}.separator{width:1px;height:20px;background:#333;margin:0 .5rem}.selection-info{display:flex;gap:1rem;align-items:center}.selection-length{color:#888;padding:.25rem .5rem;border-radius:4px;background:#2a2a2a;min-width:100px;text-align:center}.selection-value{font-family:monospace;color:#4a9eff;font-weight:700;padding:.25rem .5rem;border-radius:4px;background:#2a2a2a;min-width:200px;text-align:right}.keyboard-hint{position:fixed;bottom:4rem;left:50%;transform:translate(-50%);background:#1a1a1a;padding:.5rem 1rem;border-radius:4px;font-size:12px;color:#888;border:1px solid #333;box-shadow:0 2px 8px #0003;animation:hint-appear .2s ease-out;z-index:90;white-space:nowrap}.keyboard-hint-button{background:none;border:none;color:#888;cursor:pointer;font-size:12px;text-decoration:underline;padding:0}.keyboard-hint:before{content:"⌨️";margin-right:.5rem}@keyframes hint-appear{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.selection-info-bar{z-index:100}.title{font-family:monospace;font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:.25rem;cursor:pointer;text-decoration:none;color:inherit;transition:opacity .2s}.title:hover{opacity:.8}.title .highlight-green{color:#6f6}.title .cursor-block{color:#6f6;animation:blink 1s step-end infinite;margin-left:2px;font-size:18px;line-height:1;-webkit-user-select:none;user-select:none;position:relative;top:-1px}.comments-header{margin:0 0 1rem;color:#fff;font-size:16px}@keyframes blink{0%{opacity:1}50%{opacity:0}}.auth-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#242424}.auth-box{overflow:hidden}.login-area{background:#1a1a1a;box-shadow:0 4px 20px #0000004d;border-radius:8px;width:400px;max-width:90vw}.auth-box .title-bar{margin-bottom:0;text-align:center;justify-content:center}.loading-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#242424}.loading{color:#4a9eff;font-family:monospace;font-size:16px;display:flex;align-items:center;gap:.5rem}.loading:after{content:"█";color:#6f6;animation:blink 1s step-end infinite}.auth-box form{padding:2rem!important}.auth-box [class*=button],.auth-box [class*=input]{font-family:inherit!important}.public-badge{background:#2a2a2a;color:#888;padding:.25rem .75rem;border-radius:4px;font-size:12px;border:1px solid #333;display:flex;align-items:center;gap:.5rem}.public-badge:before{content:"👁️";font-size:14px}.title-bar{background:#1a1a1a;padding:.75rem 1rem;border-bottom:1px solid #333;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.title-right{display:flex;align-items:center;gap:1rem}.user-info{display:flex;align-items:center;gap:1rem;padding-left:1rem;border-left:1px solid #333}.user-email{color:#888;font-size:12px}.sign-out-button{background:none;border:1px solid #444;color:#888;padding:.25rem .5rem;font-size:12px;border-radius:4px;cursor:pointer;transition:all .2s}.sign-out-button:hover{background:#2a2a2a;border-color:#555;color:#fff}.hex.commented{background-color:#4a9eff26;position:relative}.hex.commented:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:#4a9eff80}.hex.commented.highlighted{background-color:#ff9e4a80}.binary.commented{background-color:#4a9eff26;position:relative}.binary.commented:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:#4a9eff80}.binary.commented.highlighted{background-color:#ff9e4a80}.ascii.commented{background-color:#4a9eff26;position:relative}.ascii.commented:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:#4a9eff80}.ascii.commented.highlighted{background-color:#ff9e4a80}.comment.active{background:#2a2a2a;border-left:2px solid #ff9e4a;box-shadow:0 2px 8px #0003}.hex-view{scroll-behavior:smooth}.hex-values,.binary-values,.ascii-values{-webkit-user-select:none;user-select:none}.file-info{display:flex;flex-direction:column;align-items:start;gap:.5rem;padding:.25rem .75rem}.filename-display{color:#fff;font-size:14px;transition:color .2s}.filename-display.editable{cursor:pointer}.filename-display.editable:hover{color:#4a9eff}.filename-input{background:#1a1a1a;border:1px solid #4a9eff;color:#fff;font-size:14px;padding:.25rem .5rem;border-radius:4px;width:200px;outline:none}.filename-input:focus{box-shadow:0 0 0 2px #4a9eff33}.home-container{width:100vw;height:100vh;display:flex;flex-direction:column}.files-container{padding:2rem;flex:1;overflow-y:auto}.files-container h2{margin-bottom:2rem;color:#fff}.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.5rem}.file-card{position:relative;background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:1.5rem;display:flex;align-items:center;gap:1.5rem;transition:all .2s;cursor:pointer}.file-icon{font-size:2rem;color:#4a9eff;flex-shrink:0}.file-info{flex:1;min-width:0}.file-name{font-weight:500;color:#fff;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{display:flex;gap:1.5rem;color:#888;font-size:.875rem}.file-size{color:#4a9eff}.file-actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.view-button{background:#4a9eff;color:#fff;text-decoration:none;padding:.4rem .8rem;border-radius:4px;font-size:12px;transition:all .2s}.view-button:hover{background:#3a8eef;transform:translateY(-1px)}.more-button{background:none;border:none;color:#888;font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;transition:all .2s}.more-button:hover{background:#2a2a2a;color:#fff}.file-dropdown{position:absolute;right:0;top:100%;background:#1a1a1a;border:1px solid #333;border-radius:4px;padding:.5rem;z-index:10000;margin-top:.5rem;box-shadow:0 4px 12px #0003}.delete-button{background:none;border:none;color:#ff4a4a;padding:.4rem .8rem;width:100%;text-align:left;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:.5rem}.delete-button:before{content:"🗑️";font-size:14px}.delete-button:hover{background:#ff4a4a22}.delete-button:disabled{opacity:.5;cursor:not-allowed}.file-card:hover{background:#2a2a2a;border-color:#4a9eff}.file-icon{font-size:2rem}.file-name{font-weight:500;color:#fff;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#2a2a2a;padding:.25rem .5rem;border-radius:4px;border:1px solid #333}.file-date{color:#888;font-size:.875rem}.no-files{text-align:center;padding:3rem;background:#1a1a1a;border-radius:8px;border:1px solid #333}.no-files p{color:#888;margin-bottom:1.5rem}.new-file-button{background:#4a9eff;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.875rem;transition:background-color .2s}.new-file-button:hover{background:#3a8eef}.copy-link{background:none;border:none;color:#666;font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;transition:all .2s;padding:0}.copy-link:hover{background:#4a9eff22;color:#4a9eff}.not-found-container{width:100vw;height:100vh;display:flex;flex-direction:column}.not-found-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.not-found-code{font-size:8rem;font-weight:700;color:#4a9eff;font-family:monospace;margin-bottom:1rem;text-shadow:0 0 10px rgba(74,158,255,.3)}.not-found-content h1{font-size:2rem;margin-bottom:1rem;color:#fff}.not-found-content p{color:#888;margin-bottom:2rem;font-size:1.1rem}.back-home{background:#4a9eff;color:#fff;text-decoration:none;padding:.75rem 1.5rem;border-radius:4px;font-size:1rem;transition:all .2s}.back-home:hover{background:#3a8eef;transform:translateY(-2px)}.upload-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.upload-area{width:100%;max-width:500px;height:300px;border:2px dashed #333;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;transition:all .2s;background:#1a1a1a;cursor:pointer}.upload-area.dragging{border-color:#4a9eff;background:#4a9eff11}.upload-area.uploading{border-style:solid;border-color:#4a9eff;background:#4a9eff11;cursor:wait}.upload-icon{font-size:4rem;margin-bottom:1rem}.upload-area h2{margin:0;color:#fff;font-size:1.5rem}.upload-area p{margin:0;color:#888}.file-select-button{background:#4a9eff;color:#fff;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;transition:all .2s}.file-select-button:hover{background:#3a8eef;transform:translateY(-2px)}.upload-status{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-spinner{width:40px;height:40px;border:3px solid transparent;border-top-color:#4a9eff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fork-button{background:#6f6;border-color:#6f6;color:#000;font-weight:500;display:flex;align-items:center;gap:.5rem}.fork-button:hover{background:#5e5;border-color:#5e5}.fork-button:before{content:"🔀";font-size:14px}.login-button{background:#4a9eff;color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:4px;font-size:12px;transition:all .2s;display:flex;align-items:center;gap:.5rem}.login-button:hover{background:#3a8eef;transform:translateY(-1px)}.login-button:before{content:"👤";font-size:14px}.example-link{margin-top:1.5rem;text-align:center}.example-link a{color:#4caf50;text-decoration:none;font-size:.9rem;transition:color .2s ease}.example-link a:hover{color:#388e3c;text-decoration:underline}