*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--page-bg:#0e0e0e;--page-bg-alt:#1a1a1a;--page-border:#262626;--bg-primary:#0e0e0e;--bg-secondary:#1c1c1c;--bg-tertiary:#282828;--bg-hover:#303030;--text-primary:#ececec;--text-secondary:#d0d0d0;--text-muted:#a0a0a0;--border:#262626;--border-light:#383838;--border-dashed:#383838;--accent:#ececec;--danger:#e84040;--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;--radius:12px;--radius-sm:8px;--transition:.2s ease;--max-width:1080px}html{scroll-behavior:smooth}body{background:var(--page-bg);color:var(--text-primary);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}.container{margin:0 auto;max-width:var(--max-width);padding:0 24px}.section{padding:100px 0}.section+.section{border-top:1px solid var(--page-border)}.section-label{color:var(--text-muted);display:inline-block;font-size:11px;font-weight:600;letter-spacing:2px;margin-bottom:12px;text-transform:uppercase}.section-title{color:var(--text-primary);font-size:clamp(24px,3.5vw,34px);font-weight:700;letter-spacing:-.5px;line-height:1.2;margin-bottom:10px;text-wrap:balance}.section-desc{color:var(--text-muted);font-size:15px;line-height:1.6;margin-bottom:40px;max-width:480px;text-wrap:balance}.btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-family:var(--font);font-size:13px;font-weight:600;gap:8px;padding:11px 26px;transition:var(--transition);white-space:nowrap}.btn-primary{background:var(--text-primary);color:var(--bg-primary)}.btn-primary:hover{opacity:.9}.btn-secondary{background:transparent;border:1px solid var(--page-border);color:var(--text-secondary)}.btn-secondary:hover{background:var(--page-bg-alt);border-color:var(--border-light)}.app-frame{background:#0c0c0c;border:1px solid #333;border-radius:16px;box-shadow:0 0 0 1px #ffffff0f,0 20px 60px #00000080;font-family:var(--font);overflow:hidden;width:420px}.app-header{border-bottom:1px solid #333;justify-content:space-between;padding:14px 16px 12px}.app-header,.app-logo{align-items:center;display:flex}.app-logo{color:var(--text-primary);gap:8px}.app-logo svg{opacity:.9}.app-logo span{font-size:13px;font-weight:700;letter-spacing:2px}.app-header-btns{display:flex;gap:2px}.app-header-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--text-muted);display:flex;height:30px;justify-content:center;width:30px}.app-body{display:flex;flex-direction:column;gap:16px;padding:20px}.app-nav{align-items:center;border-top:1px solid #333;display:flex;justify-content:space-between;padding:10px 16px}.app-nav-add{background:#252525;border:1px solid #3a3a3a;border-radius:8px;color:var(--text-secondary);font-size:12px;font-weight:500;letter-spacing:.3px;padding:7px 14px}.app-nav-right{display:flex;gap:2px}.app-nav-btn{align-items:center;background:none;border:none;border-radius:8px;color:var(--text-secondary);display:flex;font-size:12px;font-weight:500;gap:5px;letter-spacing:.3px;padding:8px 10px}.app-nav-btn.active{color:var(--text-primary)}.mock-mode-card{background:#1a1a1a;border:1px solid #333;border-radius:12px;gap:16px;padding:18px}.mock-mode-card,.mock-mode-info{display:flex;flex-direction:column}.mock-mode-info{gap:2px}.mock-mode-name{color:var(--text-primary);font-size:13px;font-weight:600}.mock-mode-desc{color:var(--text-muted);font-size:11px}.mock-mode-actions{align-items:center;display:flex;justify-content:space-between}.mock-btn-start{background:var(--text-primary);border:none;border-radius:6px;color:var(--bg-primary);font-size:12px;font-weight:600;padding:7px 20px}.mock-btn-group{display:flex;gap:6px}.mock-btn-modify{border:1px dashed #444;border-radius:6px;color:var(--text-muted)}.mock-btn-delete,.mock-btn-modify{background:transparent;font-size:12px;font-weight:500;padding:6px 12px}.mock-btn-delete{border:1px solid rgba(232,64,64,.35);border-radius:6px;color:var(--danger)}.mock-locked{flex-direction:column;gap:8px;padding:20px 0}.mock-lock-icon,.mock-locked{align-items:center;display:flex;justify-content:center}.mock-lock-icon{background:#1a1a1a;border:1px solid #333;border-radius:50%;color:var(--text-primary);height:56px;width:56px;z-index:1}.mock-locked-label{color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:3px}.mock-timer{color:var(--text-primary);font-size:48px;font-variant-numeric:tabular-nums;font-weight:200;letter-spacing:2px;line-height:1}.mock-mode-tag{color:var(--text-muted);font-size:12px}.mock-sound-bar{align-items:center;background:#1a1a1a;border:1px solid #333;border-radius:20px;color:var(--text-muted);display:flex;font-size:11px;gap:6px;margin-top:2px;padding:6px 14px}.mock-sound-slider{background:#333;border-radius:2px;height:3px;position:relative;width:80px}.mock-sound-fill{background:var(--text-primary);border-radius:1px;height:100%;left:0;position:absolute;top:0;width:60%}.mock-stop-btn{align-items:center;background:transparent;border:1px solid rgba(255,68,68,.3);border-radius:8px;color:var(--danger);font-size:13px;font-weight:500;margin-top:10px;padding:10px 24px}.mock-stat-cards,.mock-stop-btn{display:flex;gap:8px}.mock-stat-card{align-items:center;background:#1a1a1a;border:1px solid #333;border-radius:10px;display:flex;flex:1;flex-direction:column;gap:2px;padding:12px 8px}.mock-stat-val{color:var(--text-primary);font-size:18px;font-weight:700}.mock-stat-lbl{color:var(--text-muted);font-size:10px;letter-spacing:.5px;text-transform:uppercase}.mock-chart{background:#1a1a1a;border:1px solid #333;border-radius:10px;padding:8px}.mock-chart-label{color:var(--text-secondary);font-size:9px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}.mock-bars{align-items:flex-end;display:flex;gap:4px;height:60px}.mock-bar-col{align-items:center;display:flex;flex:1;flex-direction:column;gap:4px;height:100%;justify-content:flex-end}.mock-bar{background:var(--text-primary);border-radius:3px 3px 0 0;max-width:24px;min-height:0;width:70%}.mock-bar-lbl{color:var(--text-muted);font-size:9px}@media(max-width:768px){.section{padding:64px 0}.container{padding:0 16px}.app-frame{max-width:420px;width:100%}}