.font-title{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:300}.title-container{align-items:end;gap:1em;display:flex}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f2fafd;--surface-flat:#fffffff7;--surface:#ffffff8c;--text:#222;--text-secondary:#666;--accent:#40718f;--accent-hover:red;--accent-active:#315870}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@supports (color:hsl(from white h s l)){:root{--accent-hover:hsl(from var(--accent) h s calc(l + 5));--accent-active:hsl(from var(--accent) h s calc(l - 5))}}:root{--border:#c8dceb80;--button-active:#dcebf5b3;--trim-overlay:#969696a6;--handle-color:#dd4444e6;--cursor-color:#40718f;--marker-color:#e67300;--button-text:#fff;--save-color:#36824b;--save-color-active:#2a653a;--buffer-indicator:var(--accent);--shadow-color:#143c641f;--glass-shadow:0 8px 32px var(--shadow-color), 0 2px 8px #143c640f, inset 0 1px 0 #ffffff40;--glass-border:#ffffffa6;--glass-blur:blur(20px) saturate(1.8);--time-bar-height:16px;--width-m:500px;--width-lg:800px;--border-radius:14px;--spectrogram-height:200px;--freq-axis-width:20px}@media (prefers-color-scheme:dark){:root{--bg:#0d1a27;--surface-flat:#2a2a2afa;--surface:#ffffff12;--text:#fff;--text-secondary:#aaa;--accent:#6091b3;--accent-active:#4a718f;--border:#ffffff1f;--button-active:#ffffff1a;--trim-overlay:#323232a6;--handle-color:#ee4444e6;--cursor-color:#6091b3;--marker-color:#f67300;--save-color:#2a653a;--save-color-active:#1a452a;--shadow-color:#00000059;--glass-shadow:0 8px 32px var(--shadow-color), 0 2px 8px #0003, inset 0 1px 0 #ffffff1a;--glass-border:#ffffff24}}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.4;overflow-x:hidden}#fileInput{display:none}.page{flex-direction:column;justify-content:space-between;align-items:stretch;min-height:100dvh;display:flex}.splash{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.splash h1{font-size:5rem}.splash p{color:var(--text-secondary);text-wrap:balance;font-size:16px}.splash label{margin:1rem}.container{width:100%;margin:0 auto;padding:12px}header{max-width:var(--width-lg);flex-direction:row;justify-content:space-between;align-items:start;margin-left:auto;margin-right:auto;display:flex}header h1{font-size:2.5rem}.peep-logo{color:var(--text)}.file-section{text-align:center;margin-bottom:12px}.file-button{background:color-mix(in srgb, var(--accent) 85%, transparent);color:var(--button-text);border-radius:var(--border-radius);cursor:pointer;border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);padding:12px 24px;font-size:16px;font-weight:500;transition:background .15s,box-shadow .15s;display:inline-block}.file-button:active{background:var(--accent-active)}.file-button input{display:none}.header-button{padding:unset;background:var(--surface);width:3rem;height:3rem;-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--border-radius);color:var(--accent);place-items:center;display:grid}.header-button:hover{color:var(--accent-hover)}.file-info{color:var(--text-secondary);text-wrap:nowrap;text-overflow:ellipsis;font-family:monospace;font-size:12px;overflow:hidden}.spectrogram-section{max-width:var(--width-lg);margin-bottom:12px;margin-left:auto;margin-right:auto}.spectrogram-wrapper{border:1px solid var(--glass-border);border-radius:var(--border-radius);background:var(--surface);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);flex-direction:row;display:flex;overflow:hidden}.spectrogram-scroll-wrap{touch-action:pan-x;-webkit-overflow-scrolling:touch;outline:none;flex:1;min-width:0;position:relative;overflow:auto hidden}.spectrogram-inner{height:var(--spectrogram-height);-webkit-user-select:none;user-select:none;outline:none;min-width:100%;position:relative;overflow:hidden}.time-ruler{height:var(--time-bar-height);-webkit-user-select:none;user-select:none;pointer-events:none;background:var(--surface);min-width:100%;position:relative;overflow:hidden}.time-tick{background:var(--border);width:1px;height:4px;position:absolute;top:0}.time-tick.major{background:var(--text-secondary);height:12px}.time-tick span{color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums;padding:.25rem;font-size:9px;line-height:1;position:absolute}.spectrogram-inner canvas{height:var(--spectrogram-height);image-rendering:pixelated;display:block}.freq-axis{width:var(--freq-axis-width);background:color-mix(in srgb, var(--surface) 60%, transparent);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);pointer-events:none;flex-shrink:0;position:relative}.freq-axis:before{content:"";height:var(--time-bar-height);display:block}.freq-label{color:var(--text-secondary);white-space:nowrap;font-size:9px;line-height:1;position:absolute;right:0;transform:translateY(-50%)}.trim-overlay-left,.trim-overlay-right{background:var(--trim-overlay);pointer-events:none;height:100%;position:absolute;top:0}.trim-overlay-left{left:0}.trim-overlay-right{right:0}.buffer-indicator{background:color-mix(in srgb, var(--buffer-indicator) 30%, transparent);pointer-events:none;z-index:5;height:100%;position:absolute;top:0}.start-buffer{border-right:2px solid var(--buffer-indicator)}.end-buffer{border-left:2px solid var(--buffer-indicator)}.trim-handle{background:var(--handle-color);cursor:ew-resize;z-index:10;touch-action:none;width:4px;height:100%;position:absolute;top:0}.trim-handle:before{content:"";transform:translate(var(--hit-offset,-50%), -50%);width:44px;height:var(--spectrogram-height);position:absolute;top:50%;left:50%}.trim-handle:after{content:"";border:2px solid var(--handle-color);background:var(--handle-color);border-radius:3px;width:14px;height:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playback-cursor{background:var(--cursor-color);pointer-events:none;z-index:5;width:2px;height:100%;display:none;position:absolute;top:0}.playback-marker{border-left:2px dotted var(--marker-color);pointer-events:none;z-index:4;width:0;height:100%;display:none;position:absolute;top:0}.below-spectrogram{margin-left:var(--freq-axis-width);justify-content:space-between;align-items:center;gap:2rem;display:flex}.time-bar{color:var(--text-secondary);justify-content:space-between;padding:2px 4px;font-size:11px;display:flex}.playback-controls-container{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:1.75rem;margin:8px 0;display:flex}.zoom-controls{justify-content:center;align-items:center;margin:8px 0;display:flex}.zoom-btn{--dim:2.5rem;width:var(--dim);height:var(--dim);border:1px solid var(--glass-border);border-radius:var(--border-radius);background:var(--surface);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);cursor:pointer;color:var(--text);justify-content:center;align-items:center;font-size:20px;font-weight:600;display:flex}.zoom-btn:active{background:var(--button-active)}.zoom-btn span{margin:0;padding:0;transform:translateY(-1px)}.zoom-level{color:var(--text-secondary);text-align:center;min-width:2.5rem;font-size:12px}.playback-controls{justify-content:center;align-items:center;gap:16px;margin:10px 0;display:flex}.play-btn{background:var(--accent);width:56px;height:56px;color:var(--button-text);cursor:pointer;box-shadow:var(--glass-shadow);border:1px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;font-size:22px;transition:background .15s;display:flex}.play-btn:active{background:var(--accent-active)}.rewind-btn{border:1px solid var(--glass-border);border-radius:var(--border-radius);background:var(--surface);width:40px;height:40px;-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);cursor:pointer;color:var(--text);justify-content:center;align-items:center;font-size:18px;display:flex}.rewind-btn:active{background:var(--button-active)}.time-display{color:var(--text-secondary);text-wrap:nowrap;flex-shrink:0;min-width:95px;font-family:monospace;font-size:12px}.settings{background:var(--surface);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--border-radius);max-width:var(--width-m);margin:12px auto;padding:.5rem 1rem}.setting-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:8px 0;display:flex}.setting-row:last-child{border-bottom:none}.setting-label{flex-shrink:0;font-size:14px}.setting-control{align-items:center;gap:8px;display:flex}.setting-value{color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;min-width:50px;font-size:13px}input[type=range]{appearance:none;background:var(--border);border-radius:3px;width:120px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:22px;height:22px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.save-section{text-align:center;margin:16px 0}.save-btn{background:var(--save-color);color:var(--button-text);border-radius:var(--border-radius);cursor:pointer;box-shadow:var(--glass-shadow);border:1px solid #fff3;justify-content:space-around;align-items:center;margin-left:auto;margin-right:auto;padding:1rem 2rem;font-size:16px;font-weight:600;transition:background .15s,box-shadow .15s;display:flex}.save-btn:active{background:var(--save-color-active)}.save-btn:disabled{background:var(--save-color-active);cursor:not-allowed}.loading-overlay{z-index:100;background:#00000026;justify-content:center;align-items:center;transition:opacity .2s ease-in-out;display:none;position:fixed;inset:0}.loading-overlay.visible{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s ease-in-out;display:flex}.loading-overlay .loading-box{background:var(--surface-flat);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);text-align:center;box-shadow:var(--glass-shadow);border-radius:20px;padding:2rem 3rem;font-size:15px}.loading-overlay .loading-box .peep-logo{margin:0 auto 12px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.9)}}.about-link-wrap{text-align:center;color:var(--text-secondary);padding-bottom:1.5rem}.about-link{padding:1rem 1rem 1.5rem}.about-main{max-width:80ch;margin-left:auto;margin-right:auto;padding:1rem 1rem 4rem}.about-main li{margin-left:2em}.about-main img{max-width:20rem}.flow>*+*{margin-top:var(--flow-space,1em)}a{color:currentColor;--text-color-link:var(--lightningcss-light,#9a4b3a)var(--lightningcss-dark,#accae7);-webkit-text-decoration-color:var(--text-color-link);-webkit-text-decoration-color:var(--text-color-link);text-decoration-color:var(--text-color-link);text-decoration-line:underline;text-decoration-thickness:1px}a.no-underline{text-decoration-line:none}a.no-underline:hover{text-decoration-line:underline;text-decoration-thickness:2px}a:hover{text-decoration-thickness:2px}