:root{--bg-panel: #10121a;--bg-elevated: #161b22;--bg-workspace: #05060a;--border-subtle: #262938;--surface-border: rgba(255, 255, 255, .08);--surface-hover: rgba(255, 255, 255, .03);--accent: #0fd3b5;--accent-soft: rgba(15, 211, 181, .14);--accent-text: #80ffe8;--text-main: #f7f7ff;--text-muted: #a6a8ba;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--ease-spring: cubic-bezier(.175, .885, .32, 1.275)}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#141824,#05060a 55%,#020308);color:var(--text-main);font-family:var(--font-sans);height:100vh;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}.hidden{display:none!important}.hyperlink{text-decoration:none}.header{position:fixed;top:0;left:0;width:100%;height:70px;background-color:var(--bg-elevated);z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--surface-border)}.name-heading{margin:0;font-size:1.8rem;font-weight:800;color:#25fddc;letter-spacing:-.03em}.svg-icons{display:flex;gap:1.5rem;align-items:center}.svg-icon{color:var(--text-muted);transition:color .2s ease,transform .2s ease;display:block}.svg-icon:hover{color:var(--accent);transform:translateY(-2px)}#home-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px;overflow-y:auto}.hero-section{text-align:center;margin-bottom:50px;animation:fadeIn .8s ease-out;padding:0 20px}.app-title{font-size:3rem;font-weight:800;letter-spacing:-.03em;margin:0;color:var(--accent);text-shadow:0 0 30px rgba(15,211,181,.2);display:inline-block}.badge{background:#0fd3b526;color:var(--accent-text);border:1px solid var(--accent);font-size:.7rem;padding:4px 8px;border-radius:4px;vertical-align:middle;transform:translateY(-15px);display:inline-block;letter-spacing:.1em;font-weight:700;font-family:var(--font-mono)}.app-subtitle{font-size:1.1rem;color:var(--text-muted);margin-top:10px;font-weight:300;letter-spacing:.05em}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;width:100%;max-width:700px;padding:0 20px}.mode-card{background:#161b2c66;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:1rem;padding:25px;cursor:pointer;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.mode-card:hover{transform:translateY(-6px);border-color:#fff3;box-shadow:0 20px 40px -5px #0006,0 0 0 1px var(--surface-hover);background:#161b2c99}.card-content{display:flex;align-items:center;gap:15px;z-index:1}.icon-circle{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;color:var(--text-muted);transition:all .3s ease;border:1px solid var(--surface-border);flex-shrink:0}.video-icon{color:#60a5fa}.photo-icon{color:#f472b6}.mode-card:hover .icon-circle{background:#ffffff1a;color:var(--text-main);border-color:#f5f5f5}.card-text h2{font-size:1.1rem;margin:0 0 5px;color:var(--text-main);font-weight:700;letter-spacing:.02em}.card-text p{margin:0;font-size:.85rem;color:var(--text-muted)}.card-arrow{font-size:1.5rem;color:var(--accent);opacity:0;transform:translate(-10px);transition:all .3s ease}.mode-card:hover .card-arrow{opacity:1;transform:translate(0)}.screen{height:100%;display:flex;flex-direction:column}.toolbar{height:60px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:10}.workspace{flex:1;display:flex;overflow:hidden}.sidebar{width:280px;background:var(--bg-panel);border-right:1px solid var(--border-subtle);padding:20px 20px 35px;display:flex;flex-direction:column;gap:15px;overflow-y:auto}.viewport{flex:1;background:var(--bg-workspace);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 50px #00000080}.primary-btn{background:var(--accent);color:#05060a;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:600;font-family:var(--font-sans);transition:filter .2s}.primary-btn:hover{filter:brightness(1.1)}.back-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;font-family:var(--font-mono);display:flex;align-items:center;gap:.5rem}.back-btn:hover{color:var(--accent)}.upload-btn{border:1px dashed var(--text-muted);background:#ffffff08;color:var(--text-muted);padding:20px;cursor:pointer;border-radius:8px;width:100%;box-sizing:border-box;transition:all .2s}.upload-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.placeholder{color:var(--text-muted);opacity:.5}.file-info{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);margin-top:5px}video{max-width:90%;max-height:80%;display:none;border-radius:4px}img{max-width:90%;max-height:90%;display:none;box-shadow:0 0 30px #00000080;border-radius:4px}.controls-group{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.controls-group label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;background:transparent}.timeline{height:150px;background:var(--bg-panel);border-top:1px solid var(--border-subtle);padding:10px 10px 35px;display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.timeline-track{flex:1;height:40px;max-height:60px;background:#080a10;margin:10px 15px;position:relative;border-radius:4px;border:1px solid var(--border-subtle);cursor:pointer;overflow:visible;touch-action:none}#playhead{position:absolute;height:130%;top:-15%;width:2px;background-color:#ff4757;left:0;z-index:10;pointer-events:none;box-shadow:0 0 8px #ff475799}#trim-box{position:absolute;top:0;bottom:0;height:100%;left:0%;width:100%;background-color:var(--accent-soft);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none;box-sizing:border-box}.handle{position:absolute;top:0;bottom:0;width:16px;background-color:var(--accent);cursor:col-resize;pointer-events:auto;display:flex;align-items:center;justify-content:center;z-index:20}.handle:after{content:"||";font-size:9px;color:#05060a;font-weight:700}.handle.left{left:0;border-radius:4px 0 0 4px;transform:translate(-50%)}.handle.right{right:0;border-radius:0 4px 4px 0;transform:translate(50%)}#footer{position:fixed;bottom:0;left:0;width:100%;height:30px;background-color:var(--bg-elevated);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted);z-index:9999}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.workspace{flex-direction:column}.viewport{order:-1;flex:0 0 40vh;width:100%;border-bottom:1px solid var(--border-subtle)}.sidebar{order:2;flex:1;width:100%;border-right:none;padding:15px 15px 80px;box-sizing:border-box;overflow-y:auto}.timeline{height:auto;padding:10px 5px 35px}.handle{width:32px;opacity:.9}.handle:after{font-size:14px}#playhead{width:3px}.app-title{font-size:2rem}.card-arrow{display:none}.mode-card{flex-direction:column;text-align:center;gap:15px}.card-content{flex-direction:column}.primary-btn,.upload-btn,button{min-height:44px;font-size:16px}input[type=range]{height:30px}.controls-group{padding:5px 0;border-bottom:1px solid var(--border-subtle)}.toolbar{padding:0 10px}#video-file-name{display:none}}@media(max-width:480px){.header{height:50px;padding:0 1rem}.name-heading{font-size:1.3rem}.svg-icons{gap:1rem}.hero-section{margin-bottom:30px}.app-title{font-size:1.8rem}.app-subtitle{font-size:.9rem}.mode-grid{padding:0 10px;gap:15px}.mode-card{padding:15px}.icon-circle{width:40px;height:40px}.viewport{flex:0 0 35vh}.timeline-track{margin:10px 5px}.toolbar{height:50px}.back-btn{font-size:.8rem}}